/* ═══════════════════════════════════════════════════════════════════
   Vertara — "The Counting House" SUBPAGE stylesheet (dayos variant)
   Shared by every /​*​/index-dayos.html draft. The homepage
   (/index-dayos.html) stays self-contained; this sheet is the same
   design system with subpage-only components added:
   .crumbs, .hero--sub, .keyspec, .duo, .tear--light, .inds--3,
   .bay__strip--light, .principle-l, .util (thank-you / 404).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ FACES ═══
   Self-hosted, replacing the render-blocking fonts.googleapis.com stylesheet
   that used to sit in every subpage head — an extra DNS + TLS + fetch in front
   of first paint, plus a 100 KiB italic Archivo. One file per family instead of
   Google's latin / latin-ext pair, axes clamped to what the design uses and
   glyphs to the characters that appear anywhere in the site's copy plus all of
   Latin Extended-A, so Lithuanian is covered. The italic is registered from
   sub.js only when an <em>/<i> comes near the viewport.
   Recipe + landmines: vertara-kb/patterns/static-site-core-web-vitals.md */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:62% 100%;
  font-display:swap;
  src:url('/assets/fonts/archivo-subset.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/jetbrainsmono-subset.woff2') format('woff2');
}

/* ═══ TOKENS ═══ */
:root{
  --canvas:#e5e5e5;
  --mist:#f3f3f3;
  --paper:#ffffff;
  --carbon:#000000;
  --graphite:#2f2f2f;
  --ink:#111111;
  --slate:#444444;
  --smoke:#979797;
  --ash:#c6c6c6;
  --mint:#d1ffca;
  --volt:#fff100;
  --ink2:#63666b;
  --smoke-d:#b0b3b8;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;

  --r-btn:8px;
  --r-card:24px;
  --r-card-lg:32px;
  --r-slab:clamp(28px,4vw,64px);
  --r-pill:48px;
  --pad-x:clamp(20px,4vw,48px);
  --max:1280px;
}

/* ═══ BASE ═══ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:400; font-stretch:100%;
  font-size:16px; line-height:1.3; letter-spacing:-0.01em;
  color:var(--carbon);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--volt); color:var(--carbon); }
[id]{ scroll-margin-top:110px; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline-color:var(--carbon); }
.slab--carbon .btn:focus-visible, .footer .btn:focus-visible{ outline-color:var(--paper); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:fixed; top:-52px; left:16px; z-index:300;
  background:var(--carbon); color:var(--paper);
  padding:12px 22px; border-radius:var(--r-btn);
  font-size:14px; font-weight:500; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

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

/* ═══ TYPE VOICES ═══ */
.disp{
  font-stretch:62.5%; font-weight:750;
  text-transform:uppercase;
  line-height:.9; letter-spacing:-0.03em;
  text-wrap:balance;
}
.disp-xl{ font-size:clamp(56px,9.6vw,132px); }
.disp-lg{ font-size:clamp(44px,6.4vw,84px); }
.disp-md{ font-size:clamp(34px,4.2vw,56px); }
.kicker{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--smoke);
}
.mlabel{
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:-0.03em; line-height:1.6;
}
.lead{ font-size:18px; line-height:1.33; letter-spacing:-0.01em; max-width:56ch; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  color:currentColor;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
}
.hl{ background:var(--volt); color:var(--carbon); padding:1px 6px; border-radius:4px; }
.hl-m{ background:var(--mint); color:var(--carbon); padding:1px 6px; border-radius:4px; }

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--carbon); color:var(--paper);
  border-radius:var(--r-btn);
  font-family:var(--sans); font-size:16px; font-weight:500;
  letter-spacing:-0.01em; line-height:1;
  padding:16px 24px;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background:var(--volt); color:var(--carbon); }
.btn--sm{ padding:12px 18px; font-size:14px; }
.btn--lg{ padding:19px 30px; font-size:17px; }
.btn--block{ width:100%; }
.btn--ghost{
  background:transparent; color:var(--slate);
  border:1.5px solid var(--slate);
}
.btn--ghost:hover{ background:transparent; color:var(--carbon); border-color:var(--carbon); }
.btn--paper{ background:var(--paper); color:var(--carbon); }
.btn--paper:hover{ background:var(--volt); color:var(--carbon); }
.arr{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid currentColor; font-size:14px;
  transition:background-color .2s ease, color .2s ease;
}

/* ═══ NAV — floating pill ═══ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:96px; pointer-events:none;
}
.nav__inner{
  position:relative; z-index:95;
  height:100%;
  display:flex; align-items:center; gap:16px;
}
.nav__inner > *{ pointer-events:auto; }
.brand{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:17px; font-weight:600; letter-spacing:-0.02em;
  color:var(--carbon);
}
.nav .brand{
  background:var(--paper); border-radius:var(--r-pill);
  padding:11px 18px; border:1px solid rgba(198,198,198,.55);
}
.nav__pill{
  margin-inline:auto;
  display:flex; align-items:center; gap:4px;
  background:var(--paper); border-radius:var(--r-pill);
  padding:6px; border:1px solid rgba(198,198,198,.55);
}
.nav__pill a{
  font-size:14px; font-weight:450; text-decoration:none; color:var(--slate);
  padding:10px 16px; border-radius:var(--r-pill);
  transition:background-color .2s ease, color .2s ease;
}
.nav__pill a:hover{ background:var(--mist); color:var(--carbon); }
.nav__pill a[aria-current]{ background:var(--mist); color:var(--carbon); }
.langsw{
  display:flex; gap:2px; margin-left:6px; padding-left:10px;
  border-left:1px solid var(--ash);
}
.langsw a{
  font-family:var(--mono); font-size:12px; text-decoration:none; color:var(--ink2);
  padding:9px 8px; border-radius:var(--r-pill);
}
.langsw a[aria-current]{ color:var(--carbon); font-weight:500; }
.nav .btn{ transition:background-color .3s ease, color .3s ease; }
body.past-hero .nav > .nav__inner > .btn{ background:var(--volt); color:var(--carbon); }
body.past-hero .nav > .nav__inner > .btn:hover{ background:var(--carbon); color:var(--paper); }

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px;
  background:var(--paper); border:1px solid rgba(198,198,198,.55); border-radius:50%; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; width:100%; background:var(--carbon); transition:transform .25s ease, opacity .25s ease; }
.nav__mobile{
  display:none;
  pointer-events:auto;
  position:fixed; inset:0; z-index:90;
  background:var(--canvas);
  padding:120px var(--pad-x) 48px;
  flex-direction:column; gap:2px; overflow-y:auto;
}
.nav__mobile > a:not(.btn){
  font-stretch:62.5%; font-weight:750; text-transform:uppercase;
  font-size:44px; line-height:1.05; letter-spacing:-0.02em;
  text-decoration:none; padding:10px 0;
}
.nav__mobile .btn{ margin-top:28px; }
.nav__mobile .langsw{ margin-top:24px; border:0; padding:0; }
.nav__mobile .langsw a{ font-size:15px; }
body.menu-open{ overflow:hidden; }
body.menu-open .nav__mobile{ display:flex; }
body.menu-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═══ SLABS ═══ */
.slab{ border-radius:var(--r-slab) var(--r-slab) 0 0; }
.slab--carbon{ background:var(--carbon); color:var(--paper); }
.slab--paper{ background:var(--paper); }
.slab--canvas{ background:var(--canvas); }
.sect{ padding-block:clamp(72px,9vw,128px); }
.sect--top{ padding-top:clamp(88px,11vw,152px); }

/* ═══ SUBPAGE HERO ═══ */
.crumbs{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink2);
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.crumbs a{ text-decoration:none; color:var(--ink2); }
.crumbs a:hover{ color:var(--carbon); }
.crumbs b{ font-weight:500; color:var(--carbon); }
.crumbs span{ color:var(--ash); }

.hero--sub{
  padding-top:clamp(124px,15vh,164px);
  padding-bottom:clamp(48px,6vw,80px);
  overflow:clip;
}
.hero--sub .hero__grid{
  display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  margin-top:clamp(24px,3.5vw,44px);
}
.hero--sub h1{ overflow-wrap:anywhere; }
.hero__lede{ margin-top:26px; font-size:17px; line-height:1.38; max-width:52ch; color:var(--ink); }
.hero__cta{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero__see{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink2); text-decoration:none;
}
.hero__see:hover{ color:var(--carbon); }
.hero__tags{ margin-top:26px; display:flex; gap:24px; flex-wrap:wrap; }

.hero__stage{ display:flex; align-items:center; justify-content:flex-end; }
.stage{
  width:min(100%,500px); aspect-ratio:1;
  border-radius:var(--r-card-lg);
  overflow:hidden;
  background:var(--mist);
}
.stage--wide{ aspect-ratio:4/3; }
.stage video, .stage img{ width:100%; height:100%; object-fit:cover; }

/* Hero variant (homepage parity): no plinth card — the video's studio ground
   dissolves into the page canvas, and a veil of blur + canvas at the top lets
   the paper stream enter the scene out of the blur. Rules copied verbatim from
   the homepage so the two heroes cannot drift. The mobile .stage width below
   deliberately wins over the 130% here, exactly as it does on the homepage. */
.stage--blend{
  position:relative;
  background:transparent;
  border-radius:0;
  overflow:hidden;
  /* the card is gone, so the machine may outgrow its grid column — the
     feathered left margin of the clip is transparent and overlaps nothing
     visible. 130% = the one-third-larger machine. */
  width:min(130%,728px);
  flex:0 0 auto;
}
/* The hero still is a real <img> rather than a video `poster`: a poster can take
   neither fetchpriority nor srcset, and its paint timing is a poor thing to hang
   the largest contentful paint on. The clip layers over it. Both get the same
   treatment below so they are indistinguishable. */
.stage--blend .stage__still{ display:block; }
.stage--blend video{ position:absolute; inset:0; }
.stage--blend video, .stage--blend img{
  /* neutralize the clip's warm studio gray toward #e5e5e5 */
  filter:saturate(.6) brightness(1.1);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite:intersect;
}
/* loop-build.mp4 sits ~8 levels darker than the counting-machine clip, so it
   needs a touch more lift to land on --canvas (measured, not eyeballed). */
.stage--blend--deep video{ filter:saturate(.6) brightness(1.16); }
.stage__veil{
  position:absolute; left:0; right:0; top:0; height:28%;
  pointer-events:none;
  background:linear-gradient(180deg, var(--canvas) 0%, rgba(229,229,229,.6) 22%, rgba(229,229,229,0) 58%);
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
  /* the horizontal fade keeps the blur off the headline where the enlarged
     stage overlaps the text column */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0, #000 28%, transparent 100%),
    linear-gradient(90deg, transparent 8%, #000 24%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, #000 0, #000 28%, transparent 100%),
    linear-gradient(90deg, transparent 8%, #000 24%, #000 90%, transparent 100%);
  mask-composite:intersect;
}

/* masked line reveal for the H1 (single block) */
.lines .ln{ display:block; overflow:hidden; }
.lines .ln > span{ display:block; }
html.motion-ok .lines.rv-armed{ opacity:1; transform:none; transition:none; }
html.motion-ok .lines.rv-armed .ln > span{
  transform:translateY(110%);
  transition:transform .9s cubic-bezier(.19,1,.22,1);
}
html.motion-ok .lines.rv-armed.rv-in .ln > span{ transform:none; }

/* ═══ DUO — display copy beside a card ═══ */
.duo{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:start;
}
.duo__copy .lead{ margin-top:18px; }
.slab--carbon .duo__copy .lead{ color:rgba(255,255,255,.72); }
.duo__copy .kicker{ display:block; margin-bottom:16px; }

/* ═══ KEYSPEC — "In short" card (dark receipt) ═══ */
.keyspec{
  background:var(--graphite); border-radius:var(--r-card-lg);
  padding:clamp(24px,3vw,36px);
}
.keyspec__head{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke-d);
  margin-bottom:14px;
}
.keyspec dl > div{
  display:grid; grid-template-columns:minmax(110px,.62fr) 1fr; gap:16px;
  padding-block:10px;
}
.keyspec dl > div + div{ border-top:1px solid rgba(255,255,255,.1); }
.keyspec dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--smoke-d); padding-top:2px;
}
.keyspec dd{ font-size:14px; line-height:1.35; color:rgba(255,255,255,.88); }
.keyspec .tag{ margin-top:18px; }

/* ═══ TEAR — graphite process cards (carbon slab) + light variant ═══ */
.tear{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.tear--2{ grid-template-columns:repeat(2,1fr); }
.tear--4{ grid-template-columns:repeat(4,1fr); }
.tear__item{
  background:var(--graphite); border-radius:var(--r-card);
  padding:22px; display:flex; flex-direction:column; gap:8px;
}
.tear__fn{ font-family:var(--mono); font-size:14px; font-weight:500; color:var(--mint); }
.tear__what{ font-size:14px; line-height:1.33; color:rgba(255,255,255,.8); }
.tear__note{ font-family:var(--mono); font-size:11px; color:var(--smoke-d); margin-top:auto; padding-top:8px; }
/* light slabs: white cards, mint pill labels */
.tear--light .tear__item{ background:var(--paper); }
.tear--light .tear__fn{
  color:var(--carbon); background:var(--mint);
  align-self:flex-start; padding:3px 9px; border-radius:5px;
}
.tear--light .tear__what{ color:var(--slate); }
.tear--light .tear__note{ color:var(--ink2); }
/* on the paper slab the cards flip to canvas */
.slab--paper .tear--light .tear__item{ background:var(--canvas); }

/* ═══ PRINCIPLE PULL-QUOTES ═══ */
.principle{ margin-top:clamp(56px,7vw,96px); max-width:16ch; }
.principle .mint{ color:var(--mint); }
.principle-sub{ margin-top:20px; font-size:17px; color:rgba(255,255,255,.72); max-width:52ch; }
.principle-l{ margin-top:clamp(56px,7vw,96px); max-width:18ch; }
.principle-l-sub{ margin-top:20px; font-size:17px; color:var(--slate); max-width:52ch; }

/* ═══ SPEC TABLE (light slabs) ═══ */
.spec{ overflow-x:auto; margin-top:clamp(28px,4vw,40px); }
.spec table{ width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:14px; line-height:1.3; }
.spec th,.spec td{ text-align:left; padding:14px 18px; vertical-align:top; }
.spec thead th{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.spec tbody th{ font-weight:450; color:var(--slate); }
.spec tbody tr:nth-child(odd) td, .spec tbody tr:nth-child(odd) th{ background:var(--paper); }
.spec tbody tr:nth-child(odd) th{ border-radius:12px 0 0 12px; }
.spec tbody tr:nth-child(odd) td:last-child:not(.is-us){ border-radius:0 12px 12px 0; }
.spec .is-us{ background:var(--carbon)!important; color:var(--paper); font-weight:500; }
.spec thead .is-us{ color:var(--carbon); background:transparent!important; }
/* on the paper slab, odd rows flip to canvas */
.slab--paper .spec tbody tr:nth-child(odd) td, .slab--paper .spec tbody tr:nth-child(odd) th{ background:var(--mist); }

/* ═══ MONO STRIPS ═══ */
.bay__strip{
  margin-top:clamp(30px,4vw,44px);
  display:flex; gap:clamp(20px,4vw,48px); flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.bay__strip em{ font-style:normal; color:var(--mint); }
.bay__strip--light{ color:var(--ink2); }
.bay__strip--light em{ color:var(--carbon); background:var(--mint); padding:1px 5px; border-radius:4px; }

/* ═══ INDUSTRY / SECTOR CARDS ═══ */
.inds{
  margin-top:clamp(36px,5vw,56px);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.5vw,28px);
}
.inds--3{ grid-template-columns:repeat(3,1fr); }
.icard{
  background:var(--canvas); border-radius:var(--r-card-lg);
  overflow:hidden; text-decoration:none;
  display:flex; flex-direction:column;
  transition:background-color .25s ease;
}
.icard:hover{ background:var(--mist); }
.slab--canvas .icard, .slab--carbon .icard{ background:var(--paper); }
.icard__img{ aspect-ratio:4/3; overflow:hidden; }
.icard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.19,1,.22,1); }
.icard:hover .icard__img img{ transform:scale(1.03); }
.icard__body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.icard__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.icard h3{
  font-stretch:62.5%; font-weight:750; text-transform:uppercase;
  font-size:clamp(26px,2.4vw,34px); line-height:.92; letter-spacing:-0.02em;
}
.icard__pain{ font-size:14px; line-height:1.33; color:var(--slate); }
.icard .arr{ color:var(--carbon); }
.icard:hover .arr{ background:var(--volt); }

/* ═══ FAQ ═══ */
.faq{ margin-top:clamp(24px,3vw,36px); max-width:900px; }
.faq details{
  background:var(--paper); border-radius:var(--r-card);
  margin-top:10px;
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 28px;
  font-size:17px; font-weight:500; letter-spacing:-0.01em; line-height:1.25;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ash); border-radius:50%;
  font-size:18px; font-weight:400; color:var(--carbon);
  transition:transform .25s ease, background-color .25s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--mint); border-color:var(--mint); }
.faq details p{ padding:0 28px 26px; font-size:15px; line-height:1.4; color:var(--slate); max-width:66ch; }

/* ═══ CONTACT ═══ */
.cta{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start; }
.cta__lead{ margin-top:22px; font-size:17px; line-height:1.33; color:rgba(255,255,255,.72); max-width:46ch; }
.cta__points{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:10px; max-width:46ch; }
.cta__points li{
  display:flex; gap:12px; align-items:baseline;
  font-size:15px; line-height:1.33; color:rgba(255,255,255,.86);
}
.cta__points li::before{ content:"→"; color:var(--mint); flex:none; }
.cta__alt{ margin-top:28px; font-size:14px; color:rgba(255,255,255,.6); }
.cta__alt a{ color:var(--paper); text-underline-offset:4px; }
.cta__alt a:hover{ background:var(--volt); color:var(--carbon); text-decoration:none; padding:1px 6px; border-radius:4px; }

.intake{
  background:var(--paper); color:var(--carbon);
  border-radius:var(--r-card-lg); padding:clamp(24px,3vw,36px);
}
.intake__title{ font-size:19px; font-weight:600; letter-spacing:-0.02em; margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink2);
}
.field label .opt{ text-transform:none; letter-spacing:0; color:var(--ink2); font-weight:400; }
.field input,.field textarea{
  width:100%; background:var(--mist); color:var(--carbon);
  border:1.5px solid transparent; border-radius:var(--r-btn);
  padding:14px 16px;
  font-family:var(--sans); font-size:16px; letter-spacing:-0.01em; line-height:1.2;
  transition:border-color .2s ease, background-color .2s ease;
}
.field textarea{ resize:vertical; min-height:92px; line-height:1.35; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink2); }
.field input:focus,.field textarea:focus{ outline:none; background:var(--paper); border-color:var(--carbon); }
.intake__trust{ margin-block:18px; font-size:13.5px; line-height:1.4; color:var(--slate); }
.intake__trust b{ font-weight:600; color:var(--carbon); }
.intake__fine{ margin-top:12px; font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink2); text-align:center; }

/* ═══ FOOTER ═══ */
.footer{ background:var(--carbon); color:var(--paper); }
.footer__inner{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(32px,5vw,72px);
  padding-block:clamp(56px,7vw,88px) clamp(40px,5vw,56px);
  border-top:1px solid rgba(255,255,255,.12);
}
.footer .brand{ color:var(--paper); }
.dict{ margin-top:20px; font-size:14px; line-height:1.4; color:rgba(255,255,255,.6); max-width:52ch; }
.dict b{ font-weight:600; color:var(--paper); }
.dict i{ font-style:italic; }
.dict .def{ display:block; margin-top:8px; color:var(--paper); }
.footer__col h3{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke); margin-bottom:16px; }
.footer__col a{
  display:block; font-size:15px; line-height:1.3; color:rgba(255,255,255,.72);
  text-decoration:none; padding-block:6px;
}
.footer__col a:hover{ color:var(--paper); }
/* LinkedIn sits with the contact links. The mark is inline SVG so it costs no
   request, and it inherits the link colour rather than carrying LinkedIn blue —
   a brand-coloured chip would be the one loud thing in a footer with no colour. */
.footer__col a.footer__social{ display:flex; align-items:center; gap:9px; }
.footer__col a.footer__social svg{ flex:none; opacity:.8; transition:opacity .2s ease; }
.footer__col a.footer__social:hover svg{ opacity:1; }
.footer__bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block:20px 28px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.58);
}
.toTop{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.6); text-decoration:none; }
.toTop:hover{ color:var(--volt); }

/* ═══ UTILITY PAGES (thank-you / 404) ═══ */
.util{
  min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:120px var(--pad-x) 64px;
}
.util__inner{ max-width:720px; display:flex; flex-direction:column; align-items:center; gap:0; }
.util h1{ margin-top:30px; }
.util p{ margin-top:22px; font-size:17px; line-height:1.4; color:var(--slate); max-width:46ch; }
.util p a{ color:var(--carbon); text-underline-offset:4px; }
.util p a:hover{ background:var(--volt); text-decoration:none; padding:1px 6px; border-radius:4px; }
.util .btn{ margin-top:34px; }
.util__mono{ margin-top:40px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }

/* ═══ LT TYPE FIX ═══
   Lithuanian diacritics (Ų Ž Š Č Ą Į Ė) extend past the 0.9 line box, and the
   masked line/block reveals clip anything outside it. Display voices get a
   taller line on lang="lt" pages only; EN keeps the tight 0.9. */
html[lang="lt"] .disp,
html[lang="lt"] .icard h3{ line-height:1.12; }

/* ═══ REVEALS — armed by JS only ═══ */
html.motion-ok .rv-armed{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--rv-d,0ms);
}
html.motion-ok .rv-armed.rv-in{ opacity:1; transform:none; }
/* padding+negative-margin gives the clip box room for comma/Q descenders and
   accents without changing the layout; the hidden state sits at 120% so the
   taller box can't pre-expose the text */
.maskwrap{ display:block; overflow:hidden; padding-block:.08em .09em; margin-block:-.08em -.09em; }
.maskwrap > .maskin{ display:block; }
html.motion-ok .rv-armed .maskin{ transform:translateY(120%); transition:transform .9s cubic-bezier(.19,1,.22,1); transition-delay:var(--rv-d,0ms); }
html.motion-ok .rv-armed.rv-in .maskin{ transform:none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1080px){
  .tear, .tear--4{ grid-template-columns:repeat(2,1fr); }
  .duo{ grid-template-columns:1fr; }
  .keyspec{ max-width:640px; }
  .cta{ grid-template-columns:1fr; }
  .inds--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav__pill{ display:none; }
  .nav__toggle{ display:flex; margin-left:auto; }
  .nav > .nav__inner > .btn{ display:none; }
  .hero--sub .hero__grid{ grid-template-columns:1fr; }
  .hero__stage{ justify-content:flex-start; }
  .stage{ width:min(100%,440px); }
  .inds, .inds--3{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:640px){
  .tear, .tear--4{ grid-template-columns:1fr; }
  .icard h3{ font-size:28px; }
}