/* ==========================================================================
   TECH — sample 4
   Split-canvas direction.

   The fourth structural approach — this one changes the reading model itself:
   · the viewport is split. A fixed left STAGE holds the current chapter, and
     the right column FLOWS past it. The stage swaps as you scroll.
   · navigation lives inside the stage, not in a bar above the content
   · content is a single narrow column of numbered chapters, not a grid
   · teal on true black — the starkest ground of the four samples

   No external fonts or assets: the whole site runs from file://
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:      #050506;
  --bg-2:    #0B0B0D;
  --surface: #121214;

  --line:   rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);

  --text:   #F4F4F0;
  --text-2: #B4B5AE;
  --muted:  #77786F;

  --primary-rgb:  91 147 196;   /* base channels — the tints below derive from it */
  --primary:      #5B93C4;
  --primary-deep: #2E75B4;
  --primary-2:    #96BDE0;
  --primary-lift: #71A5D2;   /* hover: the primary a step brighter */
  --primary-soft: rgb(var(--primary-rgb) / .12);
  --primary-line: rgb(var(--primary-rgb) / .34);
  --on-primary:   #071522;
  --accent:       #E8734A;   /* rare: 1–2 places on the whole site */

  --r-xs: 3px;
  --r:    8px;
  --r-lg: 12px;

  --ease:     cubic-bezier(.22, .68, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --stage:  42%;
  --pad:    clamp(20px, 3.4vw, 56px);
  --topbar: 62px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-xs); }

html.lang-pending body { visibility: hidden; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--text);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); letter-spacing: -.042em; }
h2, .h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.4rem); letter-spacing: -.036em; }
h3, .h3 { font-size: 1.12rem; line-height: 1.28; }
h4, .h4 { font-size: .98rem; line-height: 1.4; }

p { color: var(--text-2); }
.lead { font-size: clamp(1.04rem, .97rem + .4vw, 1.24rem); color: var(--text-2); line-height: 1.62; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
strong, b { font-weight: 650; color: var(--text); }

/* This system's metadata voice: a numeric prefix + sentence-case label */
.tag-n {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  font-size: .8rem;
  color: var(--muted);
}
.tag-n b {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: .06em;
}

.grad { color: var(--primary); }
.measure { max-width: 60ch; }

/* --------------------------------------------------------------------------
   4. Split shell
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, var(--stage)) minmax(0, 1fr);
  align-items: start;
}

/* --- the fixed stage ---------------------------------------------------- */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  /* --pad is width-driven, but this column never scrolls: cap the vertical half
     against the height too, so a short window spends its pixels on content
     rather than on gutters. Wide-and-tall screens keep the full --pad. */
  padding-block: min(var(--pad), 5.5vh);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

/* ------------------------------------------------------------------------
   Brand mark ramp
   The pyramid in the page's <defs> block paints itself from these eight steps,
   and they are all derived from --primary — so picking a brand colour repaints
   the logo along with the rest of the site, gradients and all.

   The floor mixes toward white and black, which every browser understands but
   which drains chroma at both ends. Where relative colour is supported the ramp
   is rebuilt in OKLCH: lightness travels, chroma is held up, and the hue turns
   with it, so the lit facets stay lit instead of going chalky.
   --------------------------------------------------------------------- */
.pyr-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;

  --pyr-50:  color-mix(in oklab, var(--primary), #FFFFFF 46%);
  --pyr-100: color-mix(in oklab, var(--primary), #FFFFFF 38%);
  --pyr-200: color-mix(in oklab, var(--primary), #FFFFFF 26%);
  --pyr-300: color-mix(in oklab, var(--primary), #FFFFFF 13%);
  --pyr-500: color-mix(in oklab, var(--primary), #000000 22%);
  --pyr-600: color-mix(in oklab, var(--primary), #000000 34%);
  --pyr-700: color-mix(in oklab, var(--primary), #000000 46%);
  --pyr-800: color-mix(in oklab, var(--primary), #000000 58%);
}
@supports (color: oklch(from #000 l c h)) {
  .pyr-defs {
    --pyr-50:  oklch(from var(--primary) .93 calc(c * .82) calc(h - 14));
    --pyr-100: oklch(from var(--primary) .89 calc(c * .92) calc(h - 11));
    --pyr-200: oklch(from var(--primary) .83 calc(c * 1.00) calc(h -  7));
    --pyr-300: oklch(from var(--primary) .77 calc(c * 1.06) calc(h -  3));
    --pyr-500: oklch(from var(--primary) .62 calc(c * 1.12) calc(h +  7));
    --pyr-600: oklch(from var(--primary) .56 calc(c * 1.20) calc(h + 11));
    --pyr-700: oklch(from var(--primary) .50 calc(c * 1.28) calc(h + 16));
    --pyr-800: oklch(from var(--primary) .44 calc(c * 1.35) calc(h + 20));
  }
}

.stage-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.stage-logo svg { width: 27px; height: 27px; overflow: visible; }
/* The three sections carry no fill of their own — each <use> pulls a gradient
   out of the page's <defs>, so the colour comes from --primary and nothing here
   needs to know the hue. The translate is in the mark's own 64-unit space, not
   screen pixels.

   Opening is driven by `is-open`, which `brandMark()` in main.js sets on a
   genuine hover and nothing else. Deliberately not `:hover`: that matches the
   moment a page loads with the cursor already on the brand — exactly where it
   is after you click the brand — so the mark would animate open on arrival,
   which reads as the logo answering the click. There is no press state here
   for the same reason. */
.stage-logo .f { transition: translate .45s var(--ease-out); }
.stage-logo.is-open .f-top   { translate: 0 -4px; }
.stage-logo.is-open .f-left  { translate: -3.4px 2px; }
.stage-logo.is-open .f-right { translate: 3.4px 2px; }

/* the swapping middle */
/* Each slide is absolutely positioned at `inset: 0` and centres its own
   content, so a slide taller than this box overflows it in BOTH directions —
   onto the logo above and the nav below. `flex: 1` gives the box whatever the
   logo, nav and footer leave over, which on a short viewport is not much, so
   the clip here is the guarantee and the vh-aware type below is what keeps
   there being something to read. */
.stage-mid { position: relative; flex: 1; display: flex; align-items: center; min-height: 0; overflow: hidden; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.slide .n {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--primary-line);
}
.slide h2 {
  margin-top: clamp(10px, 2vh, 20px);
  max-width: 15ch;
  font-size: clamp(1.25rem, .9rem + 1.5vw, 2.3rem);
}
.slide p {
  margin-top: clamp(8px, 1.6vh, 14px);
  max-width: 34ch;
  font-size: clamp(.84rem, 1.9vh, .93rem);
  color: var(--muted);
}

/* On desktop the slide's ceiling is the height the logo, nav and footer leave —
   not the window's. Measuring against that box (cqh) instead of vh is what lets
   a 1512x982 laptop keep the full-size numeral while a 1512x700 window scales
   it down: the leftover height shrinks much faster than the window does.
   Browsers without container queries keep the vw-only sizes above and are
   caught by `overflow: hidden` on .stage-mid. */
@media (min-width: 1021px) {
  .stage-mid { container-type: size; }
  .slide .n { font-size: clamp(2.6rem, min(6.5vw, 23cqh), 6rem); }
  .slide h2 { font-size: clamp(1.25rem, min(.9rem + 1.5vw, 9.5cqh), 2.3rem); }

  /* Below this the type is already at its floor and the numeral is the only
     thing left to give up — it is decoration, the heading is not. */
  @container (max-height: 200px) {
    .slide .n { display: none; }
  }
}

/* nav + footer inside the stage */
/* Seven rows are the biggest fixed block in the column, so they tighten with
   the viewport height as well — same reasoning as the stage's padding. */
.stage-nav { flex: none; margin-bottom: min(22px, 3vh); }
.stage-nav li { border-top: 1px solid var(--line); }
.stage-nav li:last-child { border-bottom: 1px solid var(--line); }
.stage-nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: min(10px, 1.35vh) 0;
  font-size: min(.95rem, 2.1vh);
  color: var(--text-2);
  transition: color .22s var(--ease), padding-left .3s var(--ease);
}
.stage-nav a .ix { font-family: var(--mono); font-size: .66rem; color: var(--muted); transition: color .22s var(--ease); }
.stage-nav a:hover { color: var(--primary); padding-left: 9px; }
.stage-nav a:hover .ix { color: var(--primary); }
.stage-nav a[aria-current="page"] { color: var(--primary); }
.stage-nav a[aria-current="page"] .ix { color: var(--primary); }

.stage-foot { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* progress hairline down the stage's right edge */
.stage-bar {
  position: absolute;
  top: 0; right: -1px;
  width: 1px;
  height: 0;
  background: var(--primary);
  transition: height .2s linear;
}

/* --- the scrolling column ----------------------------------------------- */
.flow { padding: var(--pad); padding-bottom: 0; min-width: 0; }
.chapter { padding-block: clamp(46px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.chapter:first-child { padding-top: clamp(30px, 4vw, 60px); }
.chapter:last-of-type { border-bottom: 0; }

/* The stage picks whichever chapter owns the viewport middle. A short opening
   chapter would hand that to chapter 2 while the reader is still on the h1,
   so the intro is given enough height to hold it. */
@media (min-width: 1021px) {
  .chapter:first-child { min-height: 68vh; }
}

/* --- responsive: the stage stops being fixed ---------------------------- */
@media (max-width: 1020px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .stage {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-top: calc(var(--topbar) + var(--pad));
  }
  /* The stage's own furniture folds away here — the top bar carries the brand
     and the drawer carries the nav. Scoped to `.stage` so the top bar's copy
     of `.stage-logo` survives. */
  .stage > .stage-logo, .stage-nav, .stage-foot { display: none; }
  .stage-mid { display: block; overflow: visible; container-type: normal; }
  .slide {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }
  .slide.is-first { display: flex; }      /* only the page's opening slide */
  .slide .n { font-size: clamp(2.6rem, 12vw, 4rem); }
  .stage-bar { display: none; }
  .flow { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   5. Mobile top bar + drawer
   -------------------------------------------------------------------------- */
.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;
  height: var(--topbar);
  align-items: center;
  gap: 10px;
  padding-inline: var(--pad);
  background: rgba(5, 5, 6, .9);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
/* Full-height sheet: `bottom: 0` on a fixed element is the visual viewport
   floor, so the drawer fills everything under the bar with no `vh`/`dvh` maths
   and no exposure to a phone's collapsing URL bar. Nothing inside scrolls — the
   height tiers below shrink the rows and re-column the index until the content
   fits whatever it is given. The `overflow-y` is a last-resort guard for a
   viewport shorter than any real device, so its scrollbar stays hidden. */
.drawer {
  display: none;
  position: fixed;
  inset: var(--topbar) 0 0 0;
  z-index: 125;
  flex-direction: column;
  padding: 14px var(--pad) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: rgba(5, 5, 6, .98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer::-webkit-scrollbar { width: 0; height: 0; }
body.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer li { border-bottom: 1px solid var(--line); }
.drawer a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  font-size: 1.02rem;
  color: var(--text-2);
}
.drawer a .ix { font-family: var(--mono); font-size: .66rem; color: var(--muted); }
.drawer a[aria-current="page"] { color: var(--primary); }
.drawer .btn { margin-top: 18px; width: 100%; }
/* Language sits at the foot of the drawer rather than in the top bar, which
   leaves the bar as logo + burger down to the narrowest phone. `auto` is what
   pins the row to the floor of the sheet on a tall phone. */
.drawer-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.drawer-lang-label {
  margin-right: auto;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.drawer-lang .lang button { padding: 8px 16px; font-size: .8rem; }

@media (max-width: 1020px) {
  .topbar { display: flex; }
  .drawer { display: flex; }
}

/* --------------------------------------------------------------------------
   Short viewports — a phone in landscape, mostly
   The sheet is full height by definition, so on a short screen the content is
   what has to give. Each tier buys back what the one above it ran out of:
   first the row height, then the number of rows. The two-column index keeps
   its hairlines, so it still reads as the same numbered list.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) and (max-height: 620px) {
  .drawer { padding-block: 10px 16px; }
  .drawer a { padding: 9px 0; font-size: .96rem; }
  .drawer .btn { margin-top: 12px; }
  .drawer-lang { padding-top: 12px; }
  .drawer-lang .lang button { padding: 6px 14px; }
}
@media (max-width: 1020px) and (max-height: 500px) {
  .drawer ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .drawer a { padding: 7px 0; }
}
/* Two columns still clear 375px of height; three only earn their place below
   that, and only once the width can carry them. */
@media (max-width: 1020px) and (max-height: 340px) and (min-width: 560px) {
  .drawer ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The close state only reads as an X if the travel equals the distance between
   bar centres, and `place-items` cannot give you that: it centres each bar
   inside its track but lets the three auto tracks stretch to fill the 38px
   button, which pushed the centres 12.66px apart against a 5.5px travel — the
   diagonals landed nowhere near each other and the X came out a chevron.
   `place-content` centres the track block instead, so the centres sit exactly
   `height + gap` = 6px apart and the 6px travel closes them. */
.burger {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  width: 40px; height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.burger:hover { border-color: var(--muted); }
.burger span {
  display: block;
  width: 16px; height: 2px;
  background: var(--text);
  transition: transform .28s var(--ease), opacity .16s var(--ease);
}
/* Middle bar collapses inward rather than dissolving where the diagonals cross. */
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text);
  font-size: .91rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .24s var(--ease), border-color .24s var(--ease),
              color .24s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 650; }
.btn--primary:hover { background: var(--primary-lift); border-color: var(--primary-lift); }
.btn--sm { padding: 8px 13px; font-size: .83rem; }
.btn--lg { padding: 14px 24px; font-size: .98rem; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .28s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: .91rem;
  font-weight: 600;
  transition: gap .24s var(--ease);
}
.tlink:hover { gap: 13px; }

/* --------------------------------------------------------------------------
   7. Language switch
   -------------------------------------------------------------------------- */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; }
.lang button {
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang button + button { border-left: 1px solid var(--line); }
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* --------------------------------------------------------------------------
   8. Chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: .75rem;
  color: var(--muted);
}
.chip--primary { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: ping 2.3s var(--ease) infinite; }
@keyframes ping { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* --------------------------------------------------------------------------
   9. Numbered item list — the flow's main content unit
   -------------------------------------------------------------------------- */
.items { display: grid; }
.item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.item:last-child { border-bottom: 1px solid var(--line); }
.item .n { font-family: var(--mono); font-size: .74rem; color: var(--primary); padding-top: 5px; }
.item h3 { margin-bottom: 7px; }
.item p { font-size: .94rem; }
@media (max-width: 560px) { .item { grid-template-columns: minmax(0,1fr); gap: 8px; } }

/* bullets */
.ticks { display: grid; gap: 9px; margin-top: 14px; }
.ticks li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 11px;
  font-size: .89rem;
  color: var(--muted);
  line-height: 1.5;
}
.ticks li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; background: var(--primary-line); }
.ticks--text li { color: var(--text-2); font-size: .94rem; }

.checks { display: grid; gap: 13px; }
.checks li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 12px; align-items: start; font-size: .94rem; color: var(--text-2); }
.checks svg { width: 16px; height: 16px; color: var(--primary); margin-top: 4px; }

/* --------------------------------------------------------------------------
   10. Data rows (jobs, people, timeline)
   -------------------------------------------------------------------------- */
.rows { display: grid; }
.drow {
  display: grid;
  align-items: center;
  gap: 8px 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .3s var(--ease), border-color .25s var(--ease);
}
.rows .drow:last-child { border-bottom: 1px solid var(--line); }
.drow:hover { padding-left: 10px; border-color: var(--primary-line); }

.drow--job  { grid-template-columns: 44px minmax(0, 1fr) auto; }
.drow--tl   { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.drow--person { grid-template-columns: 44px minmax(0, 1fr); }

.drow .ix { font-family: var(--mono); font-size: .74rem; color: var(--primary); }
.drow .ttl { font-size: 1.02rem; font-weight: 600; letter-spacing: -.024em; transition: color .25s var(--ease); }
.drow:hover .ttl { color: var(--primary); }
.drow .dsc { font-size: .89rem; color: var(--muted); margin-top: 5px; }
.drow .vals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.drow .val { text-align: right; white-space: nowrap; }
.drow .val b { display: block; font-size: 1.06rem; font-weight: 650; letter-spacing: -.03em; color: var(--primary); font-variant-numeric: tabular-nums; }
.drow .val span { font-size: .74rem; color: var(--muted); }
.drow .yr { font-family: var(--mono); font-size: .77rem; color: var(--primary); padding-top: 3px; }
.drow .role { font-size: .84rem; color: var(--muted); margin-top: 3px; }
.ini {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  font-size: .76rem;
  font-weight: 650;
  color: var(--primary);
}
@media (max-width: 620px) {
  .drow--job { grid-template-columns: 34px minmax(0,1fr); }
  .drow--job .vals { grid-column: 2; justify-content: flex-start; }
  .drow--tl { grid-template-columns: minmax(0,1fr); }
  .drow:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats > div { padding: 24px 22px; background: var(--bg); }
.stats .n { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.stats .l { margin-top: 9px; font-size: .82rem; color: var(--muted); }

/* small unit word set beside a stat figure (e.g. 14+ χρόνια) */
.stat-unit { font-size: .46em; font-weight: 500; letter-spacing: 0; margin-left: .22em; color: var(--muted); }
/* qualifier set BEFORE a stat figure (e.g. Μέσος όρος 6 εβδ.) */
.stat-qual { font-size: .30em; font-weight: 500; letter-spacing: 0; margin-right: .3em; color: var(--muted); white-space: nowrap; }
/* The flow column here is narrow, so in the stats grid the qualifier takes
   its own line above the figure rather than overflowing its cell. */
.stats .n .stat-qual { display: block; margin-right: 0; }
/* Captions hang from a common bottom edge, so the taller cell cannot skew
   the row. */
.stats > div { display: flex; flex-direction: column; }
.stats .l { margin-top: auto; padding-top: 9px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   12. Spec list
   -------------------------------------------------------------------------- */
.spec { display: grid; }
.spec > div { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-size: .82rem; color: var(--muted); }
.spec dd { margin: 0; font-size: .93rem; color: var(--text-2); }
@media (max-width: 560px) { .spec > div { grid-template-columns: minmax(0,1fr); gap: 6px; } }

/* --------------------------------------------------------------------------
   13. Accordion
   -------------------------------------------------------------------------- */
.acc { display: grid; }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -.018em;
  color: var(--text);
  transition: color .2s var(--ease);
}
.acc-head:hover { color: var(--primary); }
.acc-ico { flex: none; position: relative; width: 15px; height: 15px; }
.acc-ico::before, .acc-ico::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--muted);
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}
.acc-ico::before { width: 11px; height: 1.5px; }
.acc-ico::after  { width: 1.5px; height: 11px; }
.acc-item.is-open .acc-ico::after { opacity: 0; }
.acc-item.is-open .acc-ico::before { background: var(--primary); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding-bottom: 18px; font-size: .93rem; max-width: 62ch; }
.acc-panel ul { margin-top: 0; padding-bottom: 18px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   14. Tabs
   -------------------------------------------------------------------------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.seg button {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 650; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fade .38s var(--ease-out) both; }
@keyframes fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   15. Quote
   -------------------------------------------------------------------------- */
.quote blockquote {
  font-size: clamp(1.14rem, .98rem + .8vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -.028em;
  color: var(--text);
  font-weight: 400;
  border-left: 2px solid var(--primary);
  padding-left: 22px;
}
.quote-by { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding-left: 24px; }
.quote-by .nm { font-weight: 600; font-size: .94rem; }
.quote-by .rl { font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 620px) { .pair { grid-template-columns: minmax(0,1fr); } }

.field { display: grid; gap: 7px; }
.field label { font-size: .82rem; color: var(--muted); }
.field .req { color: var(--primary); }

.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--text);
  font-size: .94rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #5A5B54; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.textarea { min-height: 126px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377786F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}
.select option { background: var(--surface); color: var(--text); }

.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--accent); }
.err { font-size: .78rem; color: var(--accent); display: none; }
.field.has-error .err { display: block; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: block;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  font-size: .84rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.pill input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); font-weight: 600; }
.pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }

.consent { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 12px; align-items: start; }
.consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); }
.consent label { font-size: .85rem; color: var(--muted); line-height: 1.55; }
.consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.consent.has-error label { color: var(--accent); }

.form-note { font-size: .82rem; color: var(--muted); }

.ok { display: none; padding: 22px; border: 1px solid var(--primary-line); border-radius: var(--r); background: var(--primary-soft); }
.ok.is-on { display: block; animation: fade .4s var(--ease-out) both; }
.ok h3 { color: var(--primary); margin-bottom: 7px; }
.ok p { font-size: .92rem; }

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */
.cta { padding: clamp(28px, 3.6vw, 48px); border: 1px solid var(--primary-line); border-radius: var(--r-lg); background: var(--primary-soft); }
.cta p { max-width: 52ch; margin-top: 12px; }
.cta .btns { margin-top: 22px; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.foot { padding-block: 26px; border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 56px); }
/* The flow column is narrow by design, so the brand line takes its own row and
   the three link columns share the width below it. */
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(20px, 2.4vw, 36px); padding-bottom: clamp(28px, 3.2vw, 48px); margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { max-width: 46ch; font-size: .88rem; color: var(--text-2); }
.foot-col h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: grid; gap: 9px; }
.foot-col li, .foot-col a { font-size: .86rem; color: var(--text-2); }
.foot-col a:hover { color: var(--primary); }
.foot-col .addr { font-size: .82rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 620px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .foot-top { grid-template-columns: 1fr; } }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.foot-in nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-in a:hover { color: var(--primary); }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); transition: all .2s var(--ease); }
.socials a:hover { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.socials svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   18a. Hero readout + delivery pipeline
   -------------------------------------------------------------------------- */
.hero-tag { display: flex; align-items: baseline; gap: 10px; font-size: .85rem; color: var(--muted); }
.hero-tag b { font-family: var(--mono); font-size: 1rem; font-weight: 500; color: var(--primary); letter-spacing: -.01em; }

.pipe { display: grid; border: 1px solid var(--line); }
.pipe-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
}
.pipe-step + .pipe-step { border-top: 1px solid var(--line); }
.pipe-dot {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.pipe-dot svg { width: 10px; height: 10px; }
.pipe-label { font-size: .89rem; color: var(--text-2); }
.pipe-meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.pipe-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-size: .82rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   18b. Back to top
   -------------------------------------------------------------------------- */
.top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 110;
  display: grid;
  place-items: center;
  width: 37px; height: 37px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: rgba(11,11,13,.9);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .28s var(--ease);
}
.top.is-on { opacity: 1; visibility: visible; transform: none; }
.top:hover { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.top svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   19. 404
   -------------------------------------------------------------------------- */
.e404-code { font-size: clamp(4rem, 13vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -.055em; color: transparent; -webkit-text-stroke: 2px var(--primary); }

/* --------------------------------------------------------------------------
   20. Reveal
   -------------------------------------------------------------------------- */
[data-in] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 60ms);
}
[data-in].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 400;
  padding: 9px 16px;
  border-radius: var(--r-xs);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 650;
  transform: translateY(-170%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translateY(0); }

.crumb { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.crumb a:hover { color: var(--primary); }
.crumb .s { opacity: .5; }

.mt-8 { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.mt-44 { margin-top: 44px; }
.stack > * + * { margin-top: 14px; }

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-in] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .stage, .topbar, .drawer, .stage-bar,
  .tint, .tint-pop { display: none !important; }
  .split { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   24. Brand colour picker
   Near-square corners and hard borders, matching the stage furniture. Body
   level, positioned in script, so the fixed stage never clips it.
   -------------------------------------------------------------------------- */
.tint { display: inline-flex; }
.tint-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tint-btn:hover { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.tint-btn[aria-expanded="true"] { border-color: var(--primary-line); background: var(--primary-soft); }
.tint-dot {
  width: 12px; height: 12px;
  border-radius: 1px;
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset;
}

.tint-pop {
  position: fixed;
  z-index: 500;
  width: 244px;
  padding: 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: rgba(11,11,13,.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.65);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.tint-pop.is-open { opacity: 1; transform: none; }
.tint-ttl {
  margin: 0 0 11px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.tint-sw {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tint-sw i { width: 12px; height: 12px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset; }
.tint-sw:hover { background: rgba(255,255,255,.04); color: var(--text); }
.tint-sw[aria-pressed="true"] { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.margin-x-auto { margin: 0 auto; }