/* ==========================================================================
   TECH — sample 3
   Product / control-panel direction.

   The third structural approach:
   · a persistent left rail instead of a top header (both other samples use one)
   · content assembled from bento tiles on a 6-column grid, not sections of prose
   · dense, UI-scale typography rather than display headlines
   · translucent panels with a lit top edge, over a fine dot grid
   · tight 4–12px radii — softer than sample 2, much tighter than sample 1

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

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces — cool near-black, tuned under the teal primary */
  --bg:       #090A0E;
  --bg-2:     #0C0E13;
  --rail-bg:  #0B0D12;

  /* translucent panel system */
  --panel:      rgba(255, 255, 255, .025);
  --panel-2:    rgba(255, 255, 255, .045);
  --panel-line: rgba(255, 255, 255, .085);
  --panel-lit:  rgba(255, 255, 255, .16);   /* lit top edge */

  --line:   rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);

  /* text */
  --text:   #EDEFF5;
  --text-2: #B8BDCC;
  --muted:  #7C8398;

  /* brand */
  --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) / .32);
  --primary-glow: rgb(var(--primary-rgb) / .30);
  --on-primary:   #071522;
  --accent:       #FF9E7A;    /* rare: 1–2 places on the whole site */

  /* shape — deliberately tighter than the other samples */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

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

  /* layout */
  --rail:  248px;
  --pad:   clamp(18px, 2.6vw, 40px);
  --gap:   12px;
  --topbar: 60px;   /* mobile only */

  --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: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.62;
  -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; }

/* fine dot grid behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 90% 70% at 60% 0%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 0%, #000 5%, transparent 75%);
}

/* --------------------------------------------------------------------------
   3. Typography — UI scale, not display scale
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--text);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); letter-spacing: -.038em; line-height: 1.06; }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); letter-spacing: -.032em; }
h3, .h3 { font-size: 1.08rem; line-height: 1.3; }
h4, .h4 { font-size: .95rem; line-height: 1.4; }

p { color: var(--text-2); }
.lead { font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--text-2); line-height: 1.62; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
strong, b { font-weight: 600; color: var(--text); }

/* small-caps label — this system's metadata voice (sample 2 used monospace) */
.label {
  display: inline-block;
  font-size: .69rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--primary { color: var(--primary); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Emphasised word inside a heading. Shares the class name used by the shared
   translation dictionary; rendered as a soft gradient here. */
.grad {
  background: linear-gradient(96deg, var(--primary) 10%, var(--primary-2) 60%, var(--primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. App shell: rail + content
   -------------------------------------------------------------------------- */
.shell { position: relative; z-index: 1; }

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 18px;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
}

/* ------------------------------------------------------------------------
   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));
  }
}

.rail-logo { display: flex; align-items: center; gap: 11px; flex: none; padding: 4px 8px; }
.rail-logo svg { width: 29px; height: 29px; 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. */
.rail-logo .f { transition: translate .45s var(--ease-out); }
.rail-logo.is-open .f-top   { translate: 0 -4px; }
.rail-logo.is-open .f-left  { translate: -3.4px 2px; }
.rail-logo.is-open .f-right { translate: 3.4px 2px; }
.rail-logo .nm { font-size: 1rem; font-weight: 640; letter-spacing: -.02em; }

.rail-nav { flex: 1; overflow-y: auto; margin-top: 4px; }
.rail-nav li + li { margin-top: 2px; }
.rail-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .91rem;
  color: var(--text-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.rail-nav a .ix {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.rail-nav a:hover { background: var(--panel-2); color: var(--text); }
.rail-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.rail-nav a[aria-current="page"] .ix { color: var(--primary); }
.rail-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 16px;
  margin-top: -8px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

/* The language pair and the tint trigger injected beside it share the top row;
   everything under them runs the full width of the rail. */
.rail-foot {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.rail-foot > .seg { justify-self: start; }
.rail-foot > .contact,
.rail-foot > .btn { grid-column: 1 / -1; }
.rail-foot .contact { display: grid; gap: 4px; padding: 0 12px; }
.rail-foot .contact a { font-size: .84rem; color: var(--text-2); transition: color .2s var(--ease); }
.rail-foot .contact a:hover { color: var(--primary); }

/* Content column sits beside the rail */
.main { margin-left: var(--rail); min-height: 100vh; }
.wrap { padding-inline: var(--pad); max-width: 1500px; }

/* --- mobile: rail becomes a drawer behind a top bar ---------------------- */
.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;
  height: var(--topbar);
  align-items: center;
  gap: 12px;
  padding-inline: var(--pad);
  background: rgba(9, 10, 14, .86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(4, 5, 8, .68);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

@media (max-width: 1100px) {
  .topbar { display: flex; }
  .scrim { display: block; pointer-events: none; }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }

  .rail {
    transform: translateX(-100%);
    transition: transform .35s var(--ease);
    width: min(300px, 84vw);
    box-shadow: 0 0 60px rgba(0,0,0,.6);
    /* clear the fixed top bar, which sits above the rail */
    padding-top: calc(var(--topbar) + 18px);
  }
  body.nav-open .rail { transform: none; }
  /* the top bar already carries the logo, so the rail's copy is redundant */
  .rail > .rail-logo { display: none; }

  .main { margin-left: 0; padding-top: var(--topbar); }
}

/* --------------------------------------------------------------------------
   5. Bento grid
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}
.w2 { grid-column: span 2; }
.w3 { grid-column: span 3; }
.w4 { grid-column: span 4; }
.w6 { grid-column: span 6; }

@media (max-width: 1240px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w2 { grid-column: span 2; }
  .w3 { grid-column: span 2; }
  .w4 { grid-column: span 4; }
  .w6 { grid-column: span 4; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .w2, .w3, .w4, .w6 { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   6. Tile / panel
   -------------------------------------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease);
}
/* lit top edge — the signature of this system */
.tile::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--panel-lit), transparent);
}
.tile > * { position: relative; }

/* cursor-follow glow, coordinates injected by main.js */
.tile--live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              var(--primary-soft), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.tile--live:hover::after { opacity: 1; }
.tile--live:hover { border-color: var(--primary-line); transform: translateY(-2px); }

.tile--flat { background: transparent; }
.tile--fill { background: var(--panel-2); }
.tile--pad  { padding: clamp(24px, 3vw, 40px); }

.tile h3 { margin-bottom: 8px; }
.tile p  { font-size: .92rem; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }

.tile-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--primary);
  flex: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.tile--live:hover .tile-ico { border-color: var(--primary-line); background: var(--primary-soft); }

.tile-list { margin-top: 16px; display: grid; gap: 8px; }
/* When the list closes a tile, pin it to the bottom of the flex column. Tiles in
   a row are stretched to equal height, so a blurb that wraps one line longer
   would otherwise drop that tile's list out of line with its neighbours'. */
.tile-list:last-child { margin-top: auto; padding-top: 16px; }
.tile-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.5;
}
.tile-list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 1px;
  background: var(--primary-line);
}

.tile-foot { margin-top: auto; padding-top: 18px; }

/* big number inside a tile */
.metric { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 640; letter-spacing: -.045em; line-height: 1; color: var(--primary); }
.metric-l { margin-top: 8px; font-size: .8rem; 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; }

/* --------------------------------------------------------------------------
   7. Section headers
   -------------------------------------------------------------------------- */
.sec { padding-block: clamp(40px, 4.5vw, 76px); }
.sec--top { padding-top: clamp(30px, 4vw, 56px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.sec-head > div { max-width: 62ch; }
.sec-head h2 { margin-top: 10px; }
.sec-head p { margin-top: 12px; }
@media (max-width: 760px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: .89rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.btn--primary:hover {
  background: var(--primary-lift);
  border-color: var(--primary-lift);
  box-shadow: 0 8px 26px -12px var(--primary-glow);
}
.btn--ghost { background: transparent; }
.btn--lg { padding: 13px 22px; font-size: .95rem; }
.btn--sm { padding: 8px 13px; font-size: .82rem; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btns { display: flex; flex-wrap: wrap; gap: 10px; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: .89rem;
  font-weight: 550;
  transition: gap .25s var(--ease);
}
.tlink:hover { gap: 12px; }

/* --------------------------------------------------------------------------
   9. Chips / status
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel-2);
  font-size: .74rem;
  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); box-shadow: 0 0 0 3px var(--primary-soft); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0%,100% { box-shadow: 0 0 0 3px var(--primary-soft); } 50% { box-shadow: 0 0 0 6px rgb(var(--primary-rgb) / .04); } }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(34px, 5vw, 68px); padding-bottom: clamp(18px, 2vw, 26px); }
.hero h1 { margin-block: 18px 20px; max-width: 17ch; }
.hero .lead { max-width: 58ch; }
.hero .btns { margin-top: 28px; }
.hero-tag { display: flex; align-items: baseline; gap: 9px; margin-top: 22px; font-size: .84rem; color: var(--muted); }
.hero-tag b { font-family: var(--mono); font-size: .95rem; font-weight: 500; color: var(--text); letter-spacing: -.01em; }

/* live status readout tile */
.run { display: grid; gap: 7px; margin-top: 4px; }
.run-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  font-size: .82rem;
  color: var(--muted);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.run-row .k {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: transparent;
  transition: all .35s var(--ease);
}
.run-row .k svg { width: 8px; height: 8px; }
.run-row.is-done { color: var(--text-2); }
.run-row.is-done .k { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.run-row.is-active { background: var(--primary-soft); color: var(--text); }
.run-row.is-active .k { border-color: var(--primary); }
.run-row .t { font-family: var(--mono); font-size: .68rem; color: var(--muted); }

.meter { height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 14px; }
.meter i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--primary-deep), var(--primary)); transition: width 1s var(--ease); }

/* --------------------------------------------------------------------------
   11. Marquee strip
   -------------------------------------------------------------------------- */
.strip-tile { padding-block: 16px; }
.marq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq-track { display: flex; width: max-content; gap: 34px; animation: slide 40s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marq-item { font-size: .86rem; color: var(--muted); white-space: nowrap; transition: color .3s var(--ease); }
.marq:hover .marq-item { color: var(--text-2); }

/* --------------------------------------------------------------------------
   12. Stepper (process)
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0,1fr); } }
.step-n {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--mono);
  font-size: .7rem;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   13. Check list
   -------------------------------------------------------------------------- */
.checks { display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 12px; align-items: start; font-size: .92rem; color: var(--text-2); }
.checks svg { width: 17px; height: 17px; color: var(--primary); margin-top: 3px; }

/* --------------------------------------------------------------------------
   14. Data rows (jobs, people, timeline)
   -------------------------------------------------------------------------- */
.rows { display: grid; gap: 8px; }
.drow {
  display: grid;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-sm);
  background: var(--panel);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.drow:hover { border-color: var(--primary-line); background: var(--panel-2); transform: translateX(3px); }

.drow--job    { grid-template-columns: 34px minmax(0,1.5fr) minmax(0,1fr) auto auto; }
.drow--person { grid-template-columns: 40px minmax(0,1fr) minmax(0,1.2fr); }
.drow--tl     { grid-template-columns: 74px minmax(0,1fr); align-items: start; }

.drow .ix { font-family: var(--mono); font-size: .72rem; color: var(--primary); }
.drow .ttl { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; transition: color .25s var(--ease); }
.drow:hover .ttl { color: var(--primary); }
.drow .dsc { font-size: .86rem; color: var(--muted); }
.drow .vals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.drow .val { text-align: right; }
.drow .val b { display: block; font-size: 1.05rem; font-weight: 640; letter-spacing: -.03em; color: var(--primary); font-variant-numeric: tabular-nums; }
.drow .val span { font-size: .74rem; color: var(--muted); }
.drow .go { color: var(--muted); transition: color .25s var(--ease), transform .25s var(--ease); }
.drow:hover .go { color: var(--primary); transform: translateX(2px); }

.ini {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  flex: none;
}
.drow .role { font-size: .84rem; color: var(--muted); }
.drow .yr { font-family: var(--mono); font-size: .76rem; color: var(--primary); padding-top: 2px; }

@media (max-width: 1000px) {
  .drow--job { grid-template-columns: 30px minmax(0,1fr) auto; }
  .drow--job .dsc { display: none; }
}
@media (max-width: 640px) {
  .drow--job { grid-template-columns: 30px minmax(0,1fr); row-gap: 10px; }
  .drow--job .vals, .drow .go { grid-column: 2; justify-content: flex-start; }
  .drow--person { grid-template-columns: 40px minmax(0,1fr); }
  .drow--person .role { grid-column: 2; }
  .drow--tl { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .drow:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Accordion
   -------------------------------------------------------------------------- */
.acc { display: grid; gap: 8px; }
.acc-item { border: 1px solid var(--panel-line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; transition: border-color .25s var(--ease); }
.acc-item.is-open { border-color: var(--primary-line); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: .96rem;
  font-weight: 550;
  letter-spacing: -.015em;
  color: var(--text);
  transition: color .2s var(--ease);
}
.acc-head:hover { color: var(--primary); }
.acc-ico { flex: none; position: relative; width: 16px; height: 16px; }
.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: 0 18px 18px; font-size: .9rem; }
.acc-panel ul { margin-top: 0; padding: 0 18px 18px; }

/* --------------------------------------------------------------------------
   16. Tabs (segmented control)
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  margin-bottom: 18px;
  max-width: 100%;
  flex-wrap: wrap;
}
.seg button {
  padding: 7px 15px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.seg button:hover { color: var(--text); }
/* `aria-selected` for the tab strips, `aria-pressed` for the language pair in
   the rail — same control, two different roles. */
.seg button[aria-selected="true"],
.seg button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fade .4s var(--ease-out) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17. Quote
   -------------------------------------------------------------------------- */
.quote blockquote { font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem); line-height: 1.45; letter-spacing: -.025em; color: var(--text); font-weight: 400; }
.quote-by { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.quote-by .nm { font-weight: 600; font-size: .92rem; }
.quote-by .rl { font-size: .8rem; color: var(--muted); }

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

.field { display: grid; gap: 7px; }
.field label { font-size: .8rem; font-weight: 550; color: var(--text-2); }
.field .req { color: var(--primary); }

.input, .textarea, .select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-size: .92rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #5C6376; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary-line);
  background: rgba(0,0,0,.34);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .09);
}
.textarea { min-height: 120px; 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='%237C8398' 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 11px center;
  background-size: 15px;
}
.select option { background: #14161D; color: var(--text); }

.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: #F0736B; }
.err { font-size: .77rem; color: #F0736B; 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: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--panel);
  font-size: .83rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.pill input:checked + span { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.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: .84rem; color: var(--muted); line-height: 1.55; }
.consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.consent.has-error label { color: #F0736B; }

.form-note { font-size: .8rem; 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 .45s var(--ease-out) both; }
.ok h3 { color: var(--primary); margin-bottom: 7px; }
.ok p { font-size: .9rem; }

/* --------------------------------------------------------------------------
   19. CTA tile
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(34px, 4.5vw, 60px);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 50% 0%, rgb(var(--primary-rgb) / .14), transparent 62%),
    var(--panel-2);
  overflow: hidden;
}
.cta p { max-width: 54ch; margin-inline: auto; margin-top: 12px; }
.cta .btns { justify-content: center; margin-top: 24px; }

/* --------------------------------------------------------------------------
   20. Page head
   -------------------------------------------------------------------------- */
.phead { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(20px, 2.4vw, 32px); }
.phead h1 { margin-block: 14px 16px; }
.phead .lead { max-width: 62ch; }
.crumb { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--muted); }
.crumb a:hover { color: var(--primary); }
.crumb .s { opacity: .5; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 60px); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); padding-block: clamp(30px, 3.4vw, 52px); border-bottom: 1px solid var(--line); }
.foot-brand p { max-width: 34ch; font-size: .88rem; color: var(--text-2); }
.foot-col h4 { font-size: .72rem; letter-spacing: .12em; 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: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 22px; font-size: .83rem; color: var(--muted); }
.foot-in nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-in a:hover { color: var(--primary); }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); transition: all .2s var(--ease); }
.socials a:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.socials svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   22. 404
   -------------------------------------------------------------------------- */
.e404 { min-height: 76vh; display: grid; place-items: center; text-align: center; }
.e404-code { font-size: clamp(4.5rem, 15vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; background: linear-gradient(180deg, var(--primary), rgb(var(--primary-rgb) / .1)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------------
   23. Reveal
   -------------------------------------------------------------------------- */
[data-in] {
  opacity: 0;
  transform: translateY(14px) scale(.994);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 55ms);
}
[data-in].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. Back to top
   -------------------------------------------------------------------------- */
.top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 110;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(12,14,19,.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: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   25. 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-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translateY(0); }

.mt-8 { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.stack > * + * { margin-top: 14px; }
.measure { max-width: 62ch; }

/* --------------------------------------------------------------------------
   26. 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; }
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print {
  .rail, .topbar, .scrim, .top, body::before,
  .tint, .tint-pop { display: none !important; }
  .main { margin-left: 0; padding-top: 0; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   28. Brand colour picker
   Tight radii and the translucent panel system, like everything else in the
   rail. Rendered at body level and positioned in script so the rail's own
   overflow 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-sm);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tint-btn:hover { border-color: var(--line-2); background: var(--panel-2); }
.tint-btn[aria-expanded="true"] { border-color: var(--primary-line); background: var(--primary-soft); }
.tint-dot {
  width: 12px; height: 12px;
  border-radius: var(--r-xs);
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 0 10px var(--primary-glow);
}

.tint-pop {
  position: fixed;
  z-index: 500;
  width: 248px;
  padding: 13px;
  border: 1px solid var(--panel-line);
  border-top-color: var(--panel-lit);
  border-radius: var(--r);
  background: rgba(12,14,19,.95);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 52px rgba(0,0,0,.6);
  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 10px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  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;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tint-sw i { width: 12px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset; }
.tint-sw:hover { background: var(--panel-2); 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; }