/* ==========================================================================
   apostoleas.com
   Ported from the design handoff «Apostoleas Homepage.dc.html».
   Brand (navy / blue / cyan, «A» mark) is LOCKED — see README.md before
   changing any colour. The bevelled corner is reserved for the primary button.
   Static CSS. No build step, no dependencies, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, Greek + Latin subsets

   The handoff loaded these from Google Fonts and flagged it as a violation of
   the zero-external-requests rule. Self-hosting resolves that, and it is what
   makes the footer's «δεν παρακολουθεί τους επισκέπτες» and privacy.html#cookies
   true statements. Do not reintroduce a fonts.googleapis.com link.

   Manrope carries all Greek. Poppins has NO Greek glyphs — it is scoped to the
   Latin wordmark «apostoleas.com» only, and must never be used for body copy.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800; /* full variable range — body copy is 400 */
  font-display: swap;
  src: url('fonts/manrope-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens — verbatim from the handoff's «Design tokens» block
   -------------------------------------------------------------------------- */

:root {
  --navy: #0f172a;
  --navy-deep: #0b1220;
  --navy-line: #1c2740;
  --navy-border: #33405c;

  --blue: #2563eb;
  --blue-hover: #1d4ed8;
  --blue-underline: #c3d2f5;
  --cyan: #06b6d4;
  --cyan-light: #7dd3e8;
  --cyan-text: #0e7490;

  /* Three tiers per ground, not five. The old scale put five greys between
     4.6:1 and 16.8:1, so the three that carry most of the copy (8.1 / 6.8 /
     5.3 on --tint) read as one washed-out grey against a ground that is itself
     grey. Ratios below are on --tint, the harder of the two light grounds. */
  --ink: #0f172a;        /* headings                       16.8 */
  --ink-2: #2b3648;      /* reading text                   11.5 */
  --ink-3: var(--ink-2); /* was a second, near-identical dark — same tier */
  --ink-4: #45536d;      /* meta labels, captions           7.3 */
  --num: #525f79;        /* section counters: quiet, not faint   6.0 */

  /* on navy — same three tiers, ratios on --navy-deep */
  --on-navy: #ccd7e8;      /* reading text                 12.9 */
  --on-navy-2: #bfcadd;    /* secondary copy               11.3 */
  --on-navy-3: #8b99b2;    /* counters only: the quiet tier  6.5 */
  --on-navy-4: #aab6cc;    /* meta labels                   9.2 */
  --on-navy-link: #dbe3f0; /* must sit above the copy      14.5 */

  --tint: #f6f8fb;
  --tint-2: #f1f4f9;
  --line: #e3e8f0;
  --line-2: #cbd5e5;

  --ok: #146c43;
  --err: #b02020;

  --font: 'Manrope', 'Noto Sans', system-ui, sans-serif;
  --font-wordmark: 'Poppins', 'Manrope', sans-serif;

  /* Bevelled top-left corner, from the handoff. Deliberately reserved for the
     primary button alone — when every card, panel and tile carried it too, the
     cut stopped reading as a mark and just looked like a rendering artefact. */
  --bevel-btn: 13px;

  --max: 1240px;
  --pad-x: 24px;
  /* Sheet-frame inset from the page edges — independent of --max on purpose. */
  --frame-inset: clamp(20px, 3vw, 56px);
  --section-y: 104px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The sheet tone. White sections sit on top of this as brighter panels —
     which is what lets the trust row read as a band with no border on it. */
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--blue-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--ink);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

::selection {
  background: var(--blue);
  color: #fff;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip:focus {
  top: 16px;
  color: #fff;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* --- Sheet frame ------------------------------------------------------
   Two fixed hairlines inset from the LEFT AND RIGHT EDGES OF THE PAGE — not
   from the content column. They are deliberately unrelated to --max: the
   content sits inside the sheet, it does not define it.

   z-index 1, below main and the footer (z-index 2), so the lines show through
   the plain sections — transparent over the white body — and are covered by
   the tinted and navy bands. That interruption is the point: the frame marks
   the open sections and the coloured bands break it.
   ---------------------------------------------------------------------- */

.sheet-frame {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
.sheet-frame::before,
.sheet-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 7%, var(--line) 93%, transparent);
}
.sheet-frame::before {
  left: var(--frame-inset);
}
.sheet-frame::after {
  right: var(--frame-inset);
}

/* Narrower than this there is no room between the line and the content, so the
   frame stays hidden rather than crowding the edge. */
@media (min-width: 1100px) {
  .sheet-frame {
    display: block;
  }
}

main {
  position: relative;
  z-index: 2;
}

.section {
  position: relative;
  padding: var(--section-y) 0;
  background: #fff;
}
/* Transparent, so it shows the body's sheet tone AND lets the fixed sheet
   frame through. No borders anywhere — the tonal step does the separating. */
.section--tint {
  background: transparent;
}
.section--navy {
  background: var(--navy);
  color: #fff;
}

/* Section eyebrow. NOTE: all-caps labels are written accent-free in the HTML —
   there is deliberately no text-transform anywhere in this file, so Greek
   accents can never be stripped by the browser. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--blue);
}
.eyebrow__num {
  font-weight: 800;
  color: var(--num);
}
.eyebrow--cyan {
  color: var(--cyan-light);
}
/* The counter stays a tier below the label beside it, the way --num does on
   light grounds. --on-navy-4 is now the meta-label tier and would make the
   number almost as bright as the cyan next to it. */
.eyebrow--cyan .eyebrow__num {
  color: var(--on-navy-3);
}

.h2 {
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -1.4px;
}
.lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-3);
}
.section--navy .lede {
  color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   4. Buttons — the bevelled top-left corner, and nothing else, carries it
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 28px;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 var(--bevel-btn), var(--bevel-btn) 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color 0.18s ease;
}
.btn:hover {
  background: var(--blue-hover);
  color: #fff;
}

/* Outline on navy */
.btn--outline {
  background: transparent;
  border: 1px solid var(--navy-border);
  color: #fff;
  clip-path: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn--outline:hover {
  background: transparent;
  border-color: var(--cyan-light);
  color: var(--cyan-light);
}

/* Outline on light */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  clip-path: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.btn--sm {
  font-size: 15px;
  padding: 11px 20px;
  --bevel-btn: 10px;
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 76px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Always drawn — the handoff faded it in on scroll, which left the header
     floating with no edge at the top of the page. */
  border-bottom: 1px solid var(--line);
  transition: height 0.22s ease;
}
.header[data-scrolled='true'] {
  height: 62px;
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
/* The mark is an <img>, not inline SVG, so it lives in one file per colourway
   (assets/brand/mark.svg, mark-inverse.svg) instead of four copies of the
   markup. display:block kills the inline-image baseline gap. */
.brand img,
.footer__brand img {
  flex: none;
  display: block;
}
.brand__word {
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.brand__tld {
  font-size: 15px;
  color: var(--blue);
}

.nav {
  display: none;
  align-items: center;
  gap: 30px;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav a:hover {
  color: var(--ink);
}

.header__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.header__cta {
  display: none;
}

.menu-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.menu-btn__bars {
  display: block;
  width: 18px;
  height: 11px;
  position: relative;
}
.menu-btn__bars span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, top 0.2s ease;
}
.menu-btn__bars span:nth-child(1) {
  top: 0;
}
.menu-btn__bars span:nth-child(2) {
  top: 9.5px;
}
.menu-btn[aria-expanded='true'] .menu-btn__bars span {
  top: 5px;
}
.menu-btn[aria-expanded='true'] .menu-btn__bars span:nth-child(1) {
  transform: rotate(45deg);
}
.menu-btn[aria-expanded='true'] .menu-btn__bars span:nth-child(2) {
  transform: rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--line);
  background: #fff;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad-x) 24px;
  display: flex;
  flex-direction: column;
}
.mobile-nav a {
  padding: 15px 0;
  border-bottom: 1px solid var(--tint-2);
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.mobile-nav .btn {
  margin-top: 18px;
  border-bottom: 0;
  color: #fff;
  --bevel-btn: 12px;
  padding: 15px;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

/* Light hero on a two-column layout. The handoff's hero was a full navy band;
   the navy is kept as headline colour and in the ruled grid below instead, so
   the page opens light and the dark bands are rationed to «Αποστολή» and the
   footer. Layout (copy left, browser mock right) is carried over by request. */
/* Transparent: takes the body's sheet tone, and the sheet frame stays visible
   through it. The trust row below is pure white, so it lifts off this. */
.hero {
  position: relative;
  background: transparent;
  overflow: hidden;
  padding: 72px 0 88px;
}
/* Ruled grid behind the hero, faded out radially so it never reaches an edge
   and never competes with the copy column. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 85% at 72% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 85% at 72% 20%, #000 0%, transparent 72%);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

/* Pill, as in the earlier direction. Sentence case, so the wide tracking that
   suited an all-caps label is dialled right back. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  background: #eff4fe;
  border: 1px solid #cddff9;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--blue-hover);
}
.hero__eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
  position: relative;
}
.hero__eyebrow i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  opacity: 0;
  animation: ping 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero h1 {
  /* stacking context, so the highlight rule (z-index:-1) sits behind the
     glyphs but still above the hero's ruled grid */
  position: relative;
  z-index: 0;
  max-width: 16ch;
  font-size: clamp(2.375rem, 1rem + 4.4vw, 4.125rem);
  line-height: 1.02;
  letter-spacing: -2.2px;
  color: var(--ink);
}
/* The one highlighted word. inline-block gives the rule a full-width box —
   as an inline it fragments and the rule comes up short. */
.hero h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--blue);
  white-space: nowrap;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.11em;
  z-index: -1;
  background: rgba(37, 99, 235, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw-rule 0.8s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes draw-rule {
  to {
    transform: scaleX(1);
  }
}

.hero__lede {
  margin: 24px 0 0;
  max-width: 50ch;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.62;
  color: var(--ink-3);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--ink-4);
}
.hero__note svg {
  color: var(--blue);
  flex: none;
}

/* Three-phase indicator carried over from the previous hero layout */
.phases {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--ink-4);
}
.phases span:nth-child(even) {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

/* --- Browser mock ---------------------------------------------------- */

.mock {
  position: relative;
}
.mock__frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 24px 50px -28px rgba(15, 23, 42, 0.3),
    0 60px 90px -60px rgba(37, 99, 235, 0.28);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-4.5deg) rotateX(1.5deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mock:hover .mock__frame {
  transform: perspective(1400px) rotateY(-1.5deg) rotateX(0.5deg);
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.mock__dots {
  display: flex;
  gap: 5px;
}
.mock__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
}
.mock__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--ink-4);
}
.mock__url svg {
  color: #1c8a4a;
  flex: none;
}
.mock__body {
  padding: 22px;
  display: grid;
  gap: 13px;
}
.mock__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--tint-2);
}
.mock__logo {
  width: 58px;
  height: 9px;
  background: var(--navy);
}
.mock__links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock__links i {
  width: 22px;
  height: 5px;
  background: var(--line);
}
.mock__links i:last-child {
  width: 36px;
  height: 16px;
  background: var(--blue);
  margin-left: 4px;
}
.mock__hero {
  display: grid;
  gap: 8px;
  padding-block: 4px;
}
.mock__h {
  height: 15px;
  background: var(--navy);
}
.mock__h:nth-child(2) {
  width: 62%;
}
.mock__t {
  height: 6px;
  background: var(--line);
}
.mock__t:nth-child(4) {
  width: 78%;
}
.mock__btn {
  width: 86px;
  height: 22px;
  background: var(--blue);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.mock__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.42) 50%, transparent 75%);
  transform: translateX(-110%);
  animation: sweep 4.5s 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sweep {
  0% {
    transform: translateX(-110%);
  }
  22%,
  100% {
    transform: translateX(110%);
  }
}
.mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 4px;
}
.mock__card {
  padding: 10px;
  border: 1px solid var(--tint-2);
  display: grid;
  gap: 5px;
}
.mock__card i {
  height: 4px;
  background: var(--line);
  display: block;
}
.mock__card i:first-child {
  width: 14px;
  height: 14px;
  background: #dce8fd;
  margin-bottom: 3px;
}
.mock__card i:last-child {
  width: 65%;
}

.mock__badge {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--line);
  padding: 11px 14px;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.34);
  display: grid;
  gap: 3px;
  animation: float-y 6s ease-in-out infinite;
}
.mock__badge--a {
  bottom: -24px;
  left: -16px;
}
.mock__badge--b {
  top: 16%;
  right: -14px;
  animation-delay: -3s;
}
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.mock__badge b {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--ink);
}
.mock__badge b i {
  font-style: normal;
  color: var(--blue);
}
.mock__badge span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */

/* Pure white band between two sheet-toned sections. Ruled top and bottom, but
   with NO dividers between the items — that was the border to drop. */
.trust {
  position: relative;
  background: #fff;
  border-block: 1px solid var(--line);
  padding: 42px 0;
}
.trust ul {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
.trust li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.trust svg {
  flex: none;
  margin-top: 2px;
  color: var(--blue);
}
.trust h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.trust p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */

/* Seamless bordered grid with an icon tile and a corner plate number — the
   layout from the earlier direction, rebuilt in the current brand (the tile
   and the container both take the bevelled top-left corner). */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 52px;
}

.card {
  position: relative;
  background: #fff;
  padding: 32px 30px 34px;
  display: grid;
  align-content: start;
  gap: 12px;
  transition: background-color 0.35s ease;
}
/* No ruled grid on hover here — behind body copy it cost more in legibility
   than it gained. The hero keeps its grid; there is no text over it.
   Not --tint either: the section itself is tinted, so the card would vanish. */
.card:hover {
  background: #fbfcff;
}

/* The website box spans the full row: it is the main purchase, the other two
   are what surrounds it. Equal-sized boxes would claim all three are equal. */
.card--wide {
  grid-column: 1 / -1;
}

/* Uses the extra width of the wide box: description on the left, the list it
   applies to on the right. Not two columns of options — every line applies to
   both the freelancer site and the corporate one. */
.card__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.card__split > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
}
.card__split ul {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.card__num {
  position: absolute;
  top: 32px;
  right: 30px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--num);
  transition: color 0.3s ease;
}
.card:hover .card__num {
  color: var(--blue);
}

.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #eff4fe;
  color: var(--blue);
  margin-bottom: 6px;
  border-radius: 3px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card__icon {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
  padding-right: 34px;
}
.card > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
}
.card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--tint-2);
}
.card li {
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
}
.card li::before {
  content: '—';
  color: var(--cyan-text);
  font-weight: 700;
  flex: none;
}

/* --------------------------------------------------------------------------
   9. Industries — carried over from the original brief, restyled to the brand
   -------------------------------------------------------------------------- */

.inds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 52px;
}
.ind {
  background: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background-color 0.2s ease;
}
.ind:hover {
  background: var(--tint);
}
.ind svg {
  flex: none;
  color: var(--blue);
}
.ind b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.ind span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-4);
  line-height: 1.45;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   10. Portfolio
   -------------------------------------------------------------------------- */

.notice {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed #b7c2d4;
  background: #eef2f8;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}
.chip {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 15px;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.chip[aria-pressed='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.works {
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.work {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
}
.work[hidden] {
  display: none;
}
/* Holds the 16/9 box whether or not a screenshot exists yet. With no shot the
   tint is all that shows — there is no generated stand-in image. */
.work__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tint-2);
}
.work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work__flag {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  padding: 5px 8px;
}
.work__flag--live {
  background: rgba(6, 182, 212, 0.92);
  color: #05323b;
}
.work__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.work__field {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--blue);
}
.work h3 {
  margin: 0 0 10px;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.work__blurb {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.work__tags {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.work__tags li {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--tint-2);
  border: 1px solid var(--line);
  padding: 5px 9px;
}
.work__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-underline);
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.work__link:hover {
  border-bottom-color: var(--blue-hover);
  color: var(--blue-hover);
}
.work__soon {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
}
.works-status {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */

.steps {
  margin: 52px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  background: #fff;
  padding: 32px 28px 34px;
}
.step__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.step__num {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--num);
  line-height: 1;
}
.step__time {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--blue);
  text-align: right;
}
.step h3 {
  margin: 0 0 10px;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   12. «Αποστολή» — the brand statement. Artwork is the mark in outline,
   assets/brand/mark-outline.svg.

   The one dark band in the body, and flat on purpose. A gradient was tried and
   reverted: its light stop (--navy-line) landed under the copy and dropped the
   body text from 9.74:1 to 8.10:1 and the mark's blue outline to 2.87:1.
   Reversing it only moved the problem onto the mark — --navy-line is too light
   for anything to sit on. --navy-deep is also the footer's colour, but the two
   never touch: the testimonials band separates them.
   -------------------------------------------------------------------------- */

.name-sec {
  background: var(--navy-deep);
  color: #fff;
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.name-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.name-sec h2 {
  max-width: 24ch;
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1.14;
  letter-spacing: -1.2px;
}
.name-sec p {
  max-width: 56ch;
}
.name-sec__body {
  margin: 24px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--on-navy);
}
.name-sec__art {
  justify-self: center;
}
/* width:100% would resolve against the shrink-to-fit grid item and collapse to
   the file's own 106px intrinsic width, so the size is stated here instead. */
.name-sec__art img {
  width: 260px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 52px;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 30px 28px 32px;
}
.quote__mark {
  width: 30px;
  height: 3px;
  background: var(--blue);
  flex: none;
}
.quote__text {
  flex: 1;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-2);
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--tint-2);
}
.quote__avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  background: #eff4fe;
  color: var(--blue);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.4px;
}
.quote__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.quote__role {
  display: block;
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.4;
}

/* Placeholder state — deliberately, visibly unfinished so it can never ship
   as a real review. Remove the modifier, the flag and the notice together. */
.quote--todo {
  background: repeating-linear-gradient(-45deg, var(--tint-2) 0 10px, #fff 10px 20px);
  border-style: dashed;
  border-color: #b7c2d4;
}
.quote--todo .quote__text {
  color: var(--ink-4);
  font-style: italic;
}
.quote--todo .quote__mark {
  background: var(--line-2);
}
.todo-flag {
  align-self: flex-start;
  padding: 5px 9px;
  background: #fff4e0;
  border: 1px solid #f0d5a3;
  color: #8a5a1e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

/* --------------------------------------------------------------------------
   14. FAQ — carried over from the original brief, restyled to the brand
   -------------------------------------------------------------------------- */

.faq {
  margin-top: 52px;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.4;
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover,
.faq details[open] summary {
  color: var(--blue);
}
.faq__q {
  flex: 1;
}
.faq__sign {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--blue);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq__sign::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq__sign::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.faq details[open] .faq__sign {
  background: var(--blue);
  border-color: var(--blue);
}
.faq details[open] .faq__sign::before,
.faq details[open] .faq__sign::after {
  background: #fff;
}
.faq details[open] .faq__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.faq__a {
  padding: 0 0 24px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.faq__a p + p {
  margin-top: 12px;
}
.faq__a strong {
  color: var(--ink);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
.contact dl {
  margin: 38px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact dt {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.contact dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.contact dd a {
  color: var(--blue-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-underline);
  transition: border-color 0.18s ease;
}
.contact dd a:hover {
  border-bottom-color: var(--blue-hover);
  color: var(--blue-hover);
}
.contact dd.plain {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
}

.form {
  border: 1px solid var(--line);
  background: #fff;
  padding: 32px 26px 34px;
}
.form__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  font-size: 13.5px;
  font-weight: 700;
}
.field label span {
  font-weight: 500;
  color: var(--ink-4);
}
.field input,
.field textarea {
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: 0;
  width: 100%;
}
.field textarea {
  resize: vertical;
  font-family: inherit;
  min-height: 7rem;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Per-field error: the message sits directly under its own input, and the
   line under the button stays generic. `:empty` collapses the slot so the
   fields keep their spacing while there is nothing to say. */
.field__err {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--err);
}
.field__err:empty {
  display: none;
}
.field--bad input,
.field--bad textarea {
  border-color: var(--err);
}
.field--bad input:focus,
.field--bad textarea:focus {
  border-color: var(--err);
  box-shadow: 0 0 0 2px rgba(176, 32, 32, 0.15);
}
.form__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: transparent;
}
.form__status[data-ok='true'] {
  color: var(--ok);
}
.form__status[data-ok='false'] {
  color: var(--err);
}
.form__foot {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  background: var(--navy-deep);
  color: #fff;
  padding: 72px 0 40px;
  border-top: 1px solid var(--navy-line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  text-decoration: none;
}
.footer__brand .brand__word {
  color: #fff;
  font-size: 20px;
}
.footer__brand .brand__tld {
  color: var(--cyan-light);
  font-size: 14px;
}
.footer__about {
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--on-navy-2);
}
.footer h2 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--on-navy-4);
}
.footer nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer nav a {
  font-size: 14.5px;
  color: var(--on-navy-link);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer nav a:hover {
  color: #fff;
}
.footer address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.85;
  color: var(--on-navy-2);
}
.footer address a {
  color: var(--on-navy-link);
  text-decoration: none;
}
.footer address a:hover {
  color: #fff;
}
.footer__legal h2 {
  margin-bottom: 14px;
}
.footer__bottom {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--navy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p {
  font-size: 13.5px;
  color: var(--on-navy-4);
}
/* Links here are on navy, so they cannot take the page's blue link colour —
   that lands at 2.79:1. Same treatment as .footer address a. */
.footer__bottom p a {
  color: var(--on-navy-link);
  text-decoration: none;
}
.footer__bottom p a:hover {
  color: #fff;
}

/* Unfilled placeholder — same treatment everywhere on the site.
   Light-surface variant is the default; the navy footer overrides it. */
.fill {
  background: #fff4e0;
  border-bottom: 1px dashed #c99a44;
  padding: 0 4px;
  font-size: 0.92em;
  font-weight: 700;
  color: #8a5a1e;
  white-space: nowrap;
}
.footer .fill {
  background: rgba(125, 211, 232, 0.14);
  border-bottom-color: var(--cyan-light);
  color: var(--cyan-light);
}

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll reveal, driven by the scroll position itself — no JS, no observer,
   no class on the element.

   The old version added a class when an element scrolled into view, which
   meant the element had already been painted at full opacity; `rise` then
   snapped it to opacity 0 on its first frame and faded it back in. Visible,
   hidden, visible — that was the flicker. A view() timeline has no such
   moment: `both` holds the `from` state until the element's entry range
   begins, so it is never painted in the state it is about to animate out of.

   `@supports` is the whole safety net. Where view() timelines are missing the
   rules never apply, so nothing is ever hidden and the page is plain static
   content. That is also why this must stay a progressive enhancement: never
   put `opacity: 0` outside this block.

   One gotcha: view() resolves against the nearest scroll container, and
   `overflow: hidden` makes one. `.hero` and `.name-sec` both set it, so their
   children sit at the end state and never animate. Harmless — they are simply
   visible — but a new section with `overflow: hidden` will not reveal. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main section > .wrap > * {
      animation: rise 0.6s cubic-bezier(0.22, 0.7, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* The reveal is already scoped to no-preference above, so there is nothing
     to switch off here. */
  .hero h1 em::after {
    animation: none;
    transform: none;
  }
  * {
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Breakpoints — 600 / 820 / 1040, ported verbatim from the handoff's
   injectMediaQueries(). Do not re-derive these.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .works,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .inds {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 760px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 820px) {
  .nav {
    display: flex;
  }
  .menu-btn,
  .mobile-nav {
    display: none;
  }
  .name-grid {
    grid-template-columns: 1.35fr 0.65fr;
  }
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* No desktop columns at all: ΕΝΟΤΗΤΕΣ, ΝΟΜΙΚΑ and ΣΤΟΙΧΕΙΑ ΕΠΙΧΕΙΡΗΣΗΣ are
     all commented out in index.html, so the brand block is the only child and
     the base single-column rule is what it wants. Restore
     `1.4fr 0.7fr 0.7fr 1.2fr` here when those blocks come back.
  .footer-grid {
    grid-template-columns: 1.4fr 0.7fr 0.7fr 1.2fr;
  }
  */
  /* One under the other on every mobile width — these only split here, where
     the desktop nav appears. A 2-up phase at 600px left large phones and small
     tablets with cramped two-column rows.
     The strip goes 2-up rather than 4-up: four columns at 820–1039 leaves ~224px
     each, which wraps every title and description onto two lines. It reaches
     4-up at 1040, where the columns are wide enough to hold one line. */
  .trust ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .card__split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 44px;
  }
  .inds {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 40px;
  }
  .phases {
    display: flex;
  }
  .hero {
    padding: 88px 0 104px;
  }
}

@media (min-width: 1040px) {
  .works {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
  /* The handoff showed the header CTA from 820px with a four-item nav. This
     build has five (Ερωτήσεις was carried over from the brief), which overflows
     the bar at 820 — so the CTA waits for 1040. The hero CTA covers that band. */
  .header__cta {
    display: inline-block;
  }
}

/* The strip's own breakpoint, outside the handoff's 600/820/1040 set and
   measured rather than chosen: four columns need ~280px each to hold their
   description on one line, which the container only reaches at 1240. At 1040 a
   column is ~228px and every item wraps to two lines. Below this it stays 2-up,
   and below 820 one per row. */
@media (min-width: 1240px) {
  .trust ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   18. Legal document pages
   -------------------------------------------------------------------------- */

.doc {
  position: relative;
  z-index: 2;
  max-width: 76ch;
  padding: 72px var(--pad-x) var(--section-y);
  margin: 0 auto;
}
.doc__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-4);
  text-decoration: none;
  margin-bottom: 40px;
}
.doc__back:hover {
  color: var(--blue);
}
.doc h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -1.4px;
}
.doc__meta {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-4);
}
.doc h2 {
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.doc h2 + p,
.doc h2 + ul,
.doc p + p,
.doc p + ul,
.doc ul + p {
  margin-top: 14px;
}
.doc p,
.doc li {
  color: var(--ink-3);
  line-height: 1.7;
}
.doc ul {
  display: grid;
  gap: 8px;
}
.doc li {
  padding-left: 18px;
  position: relative;
}
.doc li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--cyan-text);
  font-weight: 700;
}
.doc strong {
  color: var(--ink);
}
.doc .notice {
  margin: 32px 0 0;
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .mobile-nav,
  .chips,
  .form {
    display: none !important;
  }
  .hero,
  .trust,
  .name-sec,
  .footer,
  .section--navy {
    background: #fff !important;
    color: #000 !important;
  }
  .btn {
    clip-path: none !important;
  }
}