/* ==========================================================================
   TECH — sample 2
   Editorial / terminal direction.

   Deliberately the opposite of sample 1 in structure, not just colour:
   · sticky numbered meta rails instead of a centred container
   · hairline rules and full-bleed bands instead of floating cards
   · zero corner radius, no shadows, no glows
   · a full-screen overlay menu instead of an inline nav
   · monospace for every label, number and piece of metadata

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

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces — warm near-black, carried over from the brass original */
  --bg:        #0B0A09;
  --bg-2:      #100F0D;
  --surface:   #161512;
  --surface-2: #1D1B17;

  /* lines */
  --line:    rgba(242, 239, 234, .10);
  --line-2:  rgba(242, 239, 234, .20);
  --line-3:  rgba(242, 239, 234, .34);

  /* text */
  --text:   #F2EFEA;
  --text-2: #C6C0B6;
  --muted:  #8A8378;

  /* brand */
  --primary-rgb: 91 147 196;   /* base channels — the tints below derive from it */
  --primary:     #5B93C4;
  --primary-deep:#2E75B4;
  --primary-2:   #96BDE0;
  --primary-dim: rgb(var(--primary-rgb) / .13);
  --primary-mid: rgb(var(--primary-rgb) / .30);
  --on-primary:  #071522;
  --on-primary-rgb: 7 21 34;
  --accent:      #7C9CE0;      /* rare: 1–2 places on the whole site */

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

  /* layout */
  --pad:      clamp(20px, 4.5vw, 72px);   /* full-bleed side padding */
  --rail:     210px;                      /* sticky meta column */
  --gap:      clamp(28px, 4.5vw, 64px);
  --header-h: 74px;
  --maxw:     1560px;

  /* type */
  --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: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.68;
  -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; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--primary); color: var(--on-primary); }

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

/* Hide the page while the EN dictionary swaps in, so no Greek flash. */
html.lang-pending body { visibility: hidden; }

/* Fine grain over the whole page — the only texture in the system. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--text);
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); letter-spacing: -.045em; }
h2, .h2 { font-size: clamp(2rem, 1.15rem + 2.9vw, 3.6rem); letter-spacing: -.04em; }
h3, .h3 { font-size: clamp(1.22rem, 1.06rem + .6vw, 1.6rem); line-height: 1.22; letter-spacing: -.028em; }
h4, .h4 { font-size: 1.04rem; line-height: 1.35; letter-spacing: -.018em; }

p { color: var(--text-2); }
.lead {
  font-size: clamp(1.06rem, .96rem + .5vw, 1.32rem);
  line-height: 1.62;
  color: var(--text-2);
  letter-spacing: -.012em;
}
.muted { color: var(--muted); }
.small { font-size: .875rem; }
strong, b { font-weight: 600; color: var(--text); }

/* The system's signature: monospace metadata */
.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono--primary { color: var(--primary); }

.hl { color: var(--primary); }

/* Emphasised word inside a heading. Shares the class name used by the shared
   translation dictionary, but rendered flat here rather than as a gradient. */
.grad { color: var(--primary); }

/* Outlined word inside a heading */
.outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-3);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: clamp(64px, 7vw, 132px); position: relative; }
.band--tight { padding-block: clamp(44px, 4.5vw, 78px); }
.band--rule { border-top: 1px solid var(--line); }
.band--fill { background: var(--bg-2); }

/* The signature layout: sticky numbered rail + content */
.block {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.block-meta {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  align-self: start;
  display: grid;
  gap: 10px;
}
.block-meta .n {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--primary);
}
.block-meta .l {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
@media (max-width: 900px) {
  .block { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .block-meta { position: static; grid-auto-flow: column; justify-content: start; gap: 16px; align-items: center; }
  .block-meta .l { border-top: 0; padding-top: 0; }
}

.cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0,1fr); } }

.stack   > * + * { margin-top: 16px; }
.stack-l > * + * { margin-top: 30px; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-64 { margin-top: 64px; }

.measure { max-width: 62ch; }
.measure-s { max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 400;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translateY(0); }

.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.head.is-stuck {
  background: rgba(11, 10, 9, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line);
}
.head-in {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.bar {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.head.is-stuck .bar { opacity: 1; }

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

/* Logo lockup */
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo-mark { width: 31px; height: 31px; flex: none; 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. */
.logo .f { transition: translate .5s var(--ease-out); }
.logo.is-open .f-top   { translate: 0 -4px; }
.logo.is-open .f-left  { translate: -3.4px 2px; }
.logo.is-open .f-right { translate: 3.4px 2px; }
.logo-txt {
  font-family: var(--mono);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text);
}
@media (max-width: 420px) { .logo-txt { font-size: .86rem; letter-spacing: .16em; } }

.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

/* Language toggle — two monospace codes split by a rule */
.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
}
.lang button {
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang button + button { border-left: 1px solid var(--line-2); }
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* Menu trigger */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 15px 8px 17px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.menu-btn:hover { border-color: var(--primary); color: var(--primary); }
.menu-btn i {
  display: grid;
  gap: 3.5px;
  width: 15px;
}
.menu-btn i::before, .menu-btn i::after {
  content: "";
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
body.menu-open .menu-btn i::before { transform: translateY(2.5px) rotate(45deg); }
body.menu-open .menu-btn i::after  { transform: translateY(-2.5px) rotate(-45deg); }
@media (max-width: 560px) { .menu-btn span { display: none; } .menu-btn { padding: 10px 12px; } }

/* --------------------------------------------------------------------------
   6. Overlay menu
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 190;
  background: var(--bg);
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow: hidden;
}
body.menu-open .overlay { opacity: 1; visibility: visible; }

.overlay-in {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vh, 40px) var(--gap);
  align-content: center;
  padding-block: min(clamp(32px, 6vw, 76px), 4vh);
}
@media (max-width: 900px) { .overlay-in { grid-template-columns: minmax(0,1fr); } }

.overlay-nav li { border-top: 1px solid var(--line); }
.overlay-nav li:last-child { border-bottom: 1px solid var(--line); }
.overlay-nav a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: min(clamp(12px, 1.6vw, 22px), 1.5vh) 0;
  font-size: min(clamp(1.7rem, 1rem + 3.4vw, 3.5rem), 4.4vh);
  font-weight: 550;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--text);
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.overlay-nav a:hover { color: var(--primary); padding-left: 18px; }
.overlay-nav a[aria-current="page"] { color: var(--primary); }
.overlay-nav .idx {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--muted);
  flex: none;
}
/* staggered entrance */
.overlay-nav li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
body.menu-open .overlay-nav li { opacity: 1; transform: none; }

.overlay-side {
  align-self: center;
  display: grid;
  gap: min(28px, 3vh);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out) .35s, transform .5s var(--ease-out) .35s;
}
body.menu-open .overlay-side { opacity: 1; transform: none; }
.overlay-side a:hover { color: var(--primary); }

/* Language lives in the header on wide screens and inside the overlay on
   phones, where the bar is down to the logo and the trigger. Only one of the
   two copies is ever on screen — see the 720px block below. The tint trigger is
   injected next to every language group, so it travels with whichever is live. */
.overlay-lang { display: none; }
.overlay-lang .lang button { padding: 9px 17px; font-size: .76rem; }
@media (max-width: 720px) {
  .head-right .lang,
  .head-right .tint { display: none; }
  /* label on its own line, then the pair and the tint side by side */
  .overlay-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .overlay-lang .mono { flex-basis: 100%; margin-bottom: 4px; }
}

/* keep the whole menu on one screen: tighten as height/width run out */
@media (max-width: 900px) {
  .overlay-nav a {
    font-size: min(clamp(1.5rem, .9rem + 2.6vw, 2.4rem), 3.4vh);
    padding: min(12px, 1.1vh) 0;
  }
}
@media (max-height: 720px) and (max-width: 900px) {
  .overlay-side > div:nth-child(2) { display: none; }
}
@media (max-height: 620px) {
  .overlay-side > div:nth-child(2) { display: none; }
  .overlay-side .btn { padding: 11px 20px; }
}
/* short landscape: go back to two columns instead of stacking */
@media (max-height: 560px) and (min-width: 620px) {
  .overlay-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-height: 520px) and (max-width: 619px) {
  .overlay-side > div:first-child { display: none; }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
/* wipe fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: var(--on-primary); border-color: var(--primary); }

.btn--solid { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--solid::before { background: var(--text); }
.btn--solid:hover { color: var(--bg); border-color: var(--text); }

.btn--sm { padding: 10px 16px; font-size: .68rem; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

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

/* Inline text link with a rule that wipes in */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 100% 1px; }
.tlink svg { transition: transform .3s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 128px));
  padding-bottom: clamp(40px, 5vw, 76px);
  position: relative;
}
.hero h1 { margin-block: 26px 30px; }
.hero .lead { max-width: 54ch; }
.hero .btns { margin-top: 40px; }

/* status line above the headline */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--primary);
  animation: blink 2.2s steps(1) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* facts row divided by rules */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(48px, 6vw, 88px);
}
.facts > div { padding: 26px 24px 0 24px; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts .n {
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem);
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.facts .l { margin-top: 10px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; 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; }
@media (max-width: 780px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(2n) { border-right: 0; }
  .facts > div:nth-child(-n+2) { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
  .facts > div:nth-child(n+3) { padding-top: 26px; }
}

/* Terminal-ish delivery readout — the hero's only "visual" */
.term {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: .78rem;
}
.term-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.term-top .live { color: var(--primary); display: flex; align-items: center; gap: 8px; }
.term-top .live::before { content: ""; width: 6px; height: 6px; background: currentColor; animation: blink 2.2s steps(1) infinite; }
.term-body { padding: 6px 0; }
.term-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  color: var(--muted);
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.term-row .k { color: var(--line-3); }
.term-row.is-done { color: var(--text-2); }
.term-row.is-done .k { color: var(--primary); }
.term-row.is-active { background: var(--primary-dim); color: var(--text); }
.term-row.is-active .k { color: var(--primary); }
.term-row .v { font-size: .7rem; letter-spacing: .1em; }
.term-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .7rem;
}
.term-foot .pct { color: var(--primary); font-variant-numeric: tabular-nums; }
.term-prog { height: 1px; background: var(--line); }
.term-prog i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 1s var(--ease); }

/* --------------------------------------------------------------------------
   9. Ticker
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 18px;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: run 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes run { to { transform: translateX(-50%); } }
.ticker-item {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline: 17px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker-item::after { content: "/"; color: var(--primary); opacity: .55; }

/* --------------------------------------------------------------------------
   10. Numbered rows (services, models, values)
   -------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line); }
.row {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.row-head {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: clamp(20px, 2.4vw, 34px) 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.row-head .n {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--primary);
}
.row-head .t {
  font-size: clamp(1.25rem, .95rem + 1.15vw, 2.05rem);
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.15;
  transition: transform .4s var(--ease), color .3s var(--ease);
}
.row:hover .row-head .t { transform: translateX(10px); color: var(--primary); }
.row-ico {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  transition: transform .4s var(--ease);
}
.row-ico::before, .row-ico::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--line-3);
  transform: translate(-50%, -50%);
  transition: background-color .3s var(--ease), opacity .3s var(--ease);
}
.row-ico::before { width: 15px; height: 1.5px; }
.row-ico::after  { width: 1.5px; height: 15px; }
.row:hover .row-ico::before, .row:hover .row-ico::after { background: var(--primary); }
.row.is-open .row-ico { transform: rotate(180deg); }
.row.is-open .row-ico::after { opacity: 0; }
.row.is-open .row-ico::before { background: var(--primary); }

.row-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.row.is-open .row-panel { grid-template-rows: 1fr; }
.row-panel > div { overflow: hidden; }
.row-body {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  padding-bottom: clamp(24px, 2.6vw, 40px);
}
.row-body p { font-size: .97rem; }
@media (max-width: 780px) {
  .row-head { grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; }
  .row-body { grid-template-columns: minmax(0,1fr); gap: 18px; padding-left: 0; }
  .row-body > .sp { display: none; }
}

/* bullet list used inside rows and elsewhere */
.ticks { display: grid; gap: 11px; }
.ticks li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 13px;
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  width: 7px; height: 1px;
  margin-top: 12px;
  background: var(--primary);
}
/* The --text variant carries a <strong> lead-in followed by its sentence in the
   same <li>. Under the grid above those are two separate items, so the sentence
   lands in row 2 of the 16px marker column and wraps a word at a time. Let the
   run flow as normal inline text and pin the marker out of the way instead;
   29px keeps the text edge exactly where the 16px + 13px gap track put it. */
.ticks--text li {
  display: block;
  position: relative;
  padding-left: 29px;
  color: var(--text-2);
}
.ticks--text li::before { position: absolute; left: 0; top: 12px; margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Index table (jobs)
   -------------------------------------------------------------------------- */
.idx { border-top: 1px solid var(--line); }
.idx-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease), padding-left .35s var(--ease);
}
.idx-row:hover { background: var(--surface); padding-left: 16px; }
.idx-row .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--primary); }
.idx-row .t { font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); font-weight: 550; letter-spacing: -.03em; transition: color .3s var(--ease); }
.idx-row:hover .t { color: var(--primary); }
.idx-row .d { font-size: .9rem; color: var(--muted); }
/* Three metrics share the one result cell, stacked so the column stays a column
   rather than wrapping raggedly against its neighbour. */
.idx-row .ms { display: grid; gap: 12px; }
.idx-row .m { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.idx-row .m b { display: block; color: var(--primary); font-size: 1.15rem; letter-spacing: -.02em; font-weight: 550; text-transform: none; font-variant-numeric: tabular-nums; }
.idx-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1080px) {
  .idx-row, .idx-head { grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1fr) auto; }
  .idx-row .d, .idx-head .c-d { display: none; }
}
@media (max-width: 720px) {
  .idx-head { display: none; }
  .idx-row {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 8px 14px;
    row-gap: 12px;
  }
  .idx-row .m, .idx-row .tag-row, .idx-row .go { grid-column: 2; }
  .idx-row:hover { padding-left: 0; }
}

/* tags */
.tag {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag--on { border-color: var(--primary-mid); background: var(--primary-dim); color: var(--primary); }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------------------
   12. Stat strip
   -------------------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
/* Longhands rather than the 4-value `padding` shorthand: the shorthand is valid
   CSS and browsers honour it, but a clamp() nested inside it trips some editor
   and stylelint parsers into flagging the whole declaration. Same output. */
.strip > div {
  padding-block: clamp(26px, 3vw, 44px);
  padding-right: 26px;
  padding-left: 26px;
  border-right: 1px solid var(--line);
}
.strip > div:last-child { border-right: 0; }
.strip .n {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 550;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.strip .l { margin-top: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div:nth-child(2n) { border-right: 0; }
  .strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 460px) { .strip { grid-template-columns: minmax(0,1fr); } .strip > div { border-right: 0; border-bottom: 1px solid var(--line); } .strip > div:last-child { border-bottom: 0; } }

/* --------------------------------------------------------------------------
   13. Spec list (key/value pairs)
   -------------------------------------------------------------------------- */
.spec { border-top: 1px solid var(--line); }
.spec-item {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.spec-item dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spec-item dd { margin: 0; font-size: .95rem; color: var(--text-2); }
@media (max-width: 620px) { .spec-item { grid-template-columns: minmax(0,1fr); gap: 8px; } }

/* --------------------------------------------------------------------------
   14. Timeline
   -------------------------------------------------------------------------- */
.tl { border-top: 1px solid var(--line); }
.tl-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: clamp(24px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease), background-color .3s var(--ease);
}
.tl-item:hover { padding-left: 14px; background: var(--surface); }
.tl-item .y { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: var(--primary); }
.tl-item h3 { margin-bottom: 10px; }
.tl-item p { font-size: .95rem; }
@media (max-width: 620px) { .tl-item { grid-template-columns: minmax(0,1fr); gap: 10px; } }

/* --------------------------------------------------------------------------
   15. People
   -------------------------------------------------------------------------- */
.people { border-top: 1px solid var(--line); }
.person {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease), background-color .3s var(--ease);
}
.person:hover { padding-left: 14px; background: var(--surface); }
.person .ini {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--primary);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.person:hover .ini { border-color: var(--primary-mid); background: var(--primary-dim); }
.person .nm { font-size: 1.05rem; font-weight: 550; letter-spacing: -.02em; }
.person .rl { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
  .person { grid-template-columns: 46px minmax(0,1fr); gap: 8px 16px; }
  .person .rl { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   16. Quote
   -------------------------------------------------------------------------- */
.quote { border-top: 1px solid var(--line-2); padding-top: clamp(32px, 4vw, 54px); }
.quote blockquote {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem);
  line-height: 1.32;
  letter-spacing: -.035em;
  font-weight: 400;
  color: var(--text);
  max-width: 22ch;
  min-width: 100%;
}
.quote-by { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.quote-by .ini {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--primary-mid);
  background: var(--primary-dim);
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--primary);
}
.quote-by .nm { font-weight: 550; font-size: .98rem; }
.quote-by .rl { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   17. CTA band — inverted, the loudest element in the system
   -------------------------------------------------------------------------- */
.cta {
  background: var(--primary);
  color: var(--on-primary);
}
.cta h2 { color: var(--on-primary); max-width: 18ch; }
.cta p { color: rgb(var(--on-primary-rgb) / .82); max-width: 52ch; }
.cta .mono { color: rgb(var(--on-primary-rgb) / .70); }
.cta .btn {
  border-color: rgb(var(--on-primary-rgb) / .32);
  color: var(--on-primary);
}
.cta .btn::before { background: var(--on-primary); }
.cta .btn:hover { color: var(--primary); border-color: var(--on-primary); }
.cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: end;
}
@media (max-width: 900px) { .cta-in { grid-template-columns: minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   18. Page head (inner pages)
   -------------------------------------------------------------------------- */
.phead {
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 96px));
  padding-bottom: clamp(36px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
}
.phead h1 { margin-block: 22px 24px; }
.phead .lead { max-width: 60ch; }
.crumb { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumb a:hover { color: var(--primary); }
.crumb .s { color: var(--line-3); }

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

.field { display: grid; gap: 9px; }
.field label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--primary); }

.input, .textarea, .select {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  transition: border-color .25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #5E574D; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-bottom-color: var(--primary); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8378' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px;
}
.select option { background: var(--surface); color: var(--text); }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-bottom-color: #E8705A; }
.err { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #E8705A; display: none; }
.field.has-error .err { display: block; }

/* choice pills — square, bordered */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: block;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.pill input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }

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

.form-note { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.7; }

.ok {
  display: none;
  padding: 30px;
  border: 1px solid var(--primary-mid);
  background: var(--primary-dim);
}
.ok.is-on { display: block; animation: rise .5s var(--ease-out) both; }
.ok h3 { color: var(--primary); margin-bottom: 10px; }
.ok p { font-size: .95rem; }

/* --------------------------------------------------------------------------
   20. Panel (bordered content box — used sparingly)
   -------------------------------------------------------------------------- */
.panel { border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 38px); background: var(--bg-2); }
.panel--plain { background: transparent; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line-2); padding-top: clamp(48px, 5vw, 84px); overflow: hidden; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 56px;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0,1fr); } }

.foot-brand p { font-size: .93rem; margin-top: 20px; max-width: 32ch; }
.foot-col h4 { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.foot-col li + li { margin-top: 12px; }
.foot-col a, .foot-col span { font-size: .93rem; color: var(--text-2); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.foot-col a:hover { color: var(--primary); padding-left: 5px; }

.socials { display: flex; gap: 0; margin-top: 26px; border: 1px solid var(--line); width: fit-content; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; color: var(--muted); transition: color .25s var(--ease), background-color .25s var(--ease); }
.socials a + a { border-left: 1px solid var(--line); }
.socials a:hover { color: var(--on-primary); background: var(--primary); }
.socials svg { width: 16px; height: 16px; }

.foot-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-bot nav { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-bot a:hover { color: var(--primary); }

/* oversized wordmark bleeding off the bottom */
.foot-mark {
  font-family: var(--mono);
  font-size: clamp(3.4rem, 15.5vw, 14rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: .78;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  user-select: none;
  pointer-events: none;
  margin-bottom: -.16em;
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   22. 404
   -------------------------------------------------------------------------- */
.e404 { min-height: 82vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.e404-code {
  font-family: var(--mono);
  font-size: clamp(5rem, 20vw, 14rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
}

/* --------------------------------------------------------------------------
   23. Reveal
   -------------------------------------------------------------------------- */
[data-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 75ms);
}
[data-rise].is-in { opacity: 1; transform: none; }

/* horizontal rules that draw in */
[data-draw] { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out); }
[data-draw].is-in { transform: scaleX(1); }

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

/* --------------------------------------------------------------------------
   24. Back to top
   -------------------------------------------------------------------------- */
.top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: rgba(11, 10, 9, .85);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), background-color .25s 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: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   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;
}
.full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   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-rise] { opacity: 1; transform: none; }
  [data-draw] { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print {
  .head, .foot, .top, .overlay, body::after,
  .tint, .tint-pop { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   28. Brand colour picker
   Square, mono-labelled, hard-edged — the same grammar as the language switch
   it sits beside. The popover is body-level and placed in script.
   -------------------------------------------------------------------------- */
.tint { display: inline-flex; }
.tint-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tint-btn:hover { border-color: var(--line-3); }
.tint-btn[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-dim); }
.tint-dot {
  width: 13px; height: 13px;
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}

.tint-pop {
  position: fixed;
  z-index: 500;
  width: 256px;
  padding: 15px 15px 13px;
  border: 1px solid var(--line-3);
  background: var(--surface);
  box-shadow: 0 20px 54px 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 12px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tint-sw {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tint-sw i { width: 12px; height: 12px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset; }
.tint-sw:hover { background: var(--surface); color: var(--text); }
.tint-sw[aria-pressed="true"] { background: var(--bg); color: var(--primary); }