/* ============================================================
   TIL — one-page site
   Tokens and rules follow DESIGN.md. Colours are the brand deck
   theme (accent1..accent4); every text pair is AA-verified.
   ============================================================ */

@property --pv { syntax: '<number>'; inherits: false; initial-value: 0; }

:root{
  /* brand surface */
  --blue:        oklch(0.4537 0.2657 264.25);  /* #0331E6 */
  --blue-deep:   oklch(0.4012 0.2528 265.60);  /* #0526C4 */
  --blue-lift:   oklch(0.5751 0.2306 263.73);  /* #2C69FE */
  --navy:        oklch(0.2039 0.1153 265.49);  /* #020A4A */

  /* ink + neutrals, tinted toward the brand hue (never warm) */
  --ink:         oklch(0.1757 0.0260 241.40);  /* #06121B  17.6:1 on white */
  --muted:       oklch(0.4699 0.0459 263.60);  /* #515C72   6.7:1 on white */
  --paper:       #ffffff;
  --offwhite:    oklch(0.9750 0.0120 281.09);  /* #F5F6FF */
  --lav:         oklch(0.8898 0.0546 282.30);  /* #D6D9FF   5.9:1 on blue */
  --lav-soft:    oklch(0.9560 0.0240 281.00);  /* #EEF0FF */
  --line:        oklch(0.9100 0.0170 272.00);

  /* signal */
  --green:       oklch(0.7064 0.1828 131.13);  /* #76B620 — fill only */
  --green-ink:   oklch(0.5615 0.1443 131.60);  /* #4F7C14 — 5:1 on white */

  /* type */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --fold-y: clamp(4.5rem, 10vw, 8.5rem);
  --r-ctl: 8px;
  --r-pan: 14px;
  --r-pill: 999px;

  /* stacking */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-toast: 400;

  --ease: cubic-bezier(.16,1,.3,1);
  --mark-eye: var(--blue);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
img{ height:auto }
h1,h2,h3,p,ul,ol,figure,fieldset,legend{ margin:0; padding:0 }
ul,ol{ list-style:none }
a{ color:inherit; text-decoration:none }
button,input{ font:inherit; color:inherit }
:focus-visible{ outline:3px solid var(--blue-lift); outline-offset:2px; border-radius:4px }
.fold-blue :focus-visible,.fold-navy :focus-visible,.hero :focus-visible,
.site-head:not(.is-stuck) :focus-visible{ outline-color:#fff }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap
}
.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:1rem; z-index:var(--z-toast);
  background:#fff; color:var(--blue); padding:.7rem 1rem; border-radius:var(--r-ctl); font-weight:600;
}
.skip:focus{ inset-block-start:1rem }

/* ---------- type ---------- */
.display{
  font-weight:800;
  font-size:clamp(2.55rem,1.6rem + 4.2vw,5rem);
  line-height:1.02;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.display em{ font-style:normal; color:var(--lav) }
.fold-navy .display em{ color:var(--blue-lift) }
.display-sm{ font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem); line-height:1.08 }

.sec-h{
  font-weight:700;
  font-size:clamp(1.85rem,1.35rem + 2vw,3rem);
  line-height:1.14;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.sec-lead{
  font-weight:300;
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
  margin-block-start:1.1rem;
  text-wrap:pretty;
}
.lead{
  font-weight:300;
  font-size:clamp(1.05rem,1rem + .55vw,1.35rem);
  line-height:1.6;
  max-width:54ch;
  text-wrap:pretty;
}
.fold-blue .sec-lead,.fold-navy .sec-lead{ color:var(--lav) }

/* ---------- layout ---------- */
.shell{ width:min(1200px,100% - var(--gutter)*2); margin-inline:auto }
.fold{ padding-block:var(--fold-y) }
.fold-light{ background:var(--paper) }
.fold-off{ background:var(--offwhite) }
.fold-blue{ background:var(--blue); color:#fff }
.fold-navy{ background:var(--navy); color:#fff }
.fold-blue .lead,.fold-navy .lead{ color:var(--lav); line-height:1.65 }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.4rem;
  border:0; border-radius:var(--r-ctl);
  font-weight:600; font-size:1rem; letter-spacing:-.01em;
  cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), background-color .18s, color .18s;
}
.btn:active{ transform:translateY(1px) }
.btn-sm{ min-height:44px; padding:.5rem 1.05rem; font-size:.9375rem }
.btn-block{ width:100%; min-height:52px }
.btn-solid{ background:var(--blue); color:#fff }
.btn-solid:hover{ background:var(--blue-deep) }
.btn-solid-light{ background:#fff; color:var(--blue) }
.btn-solid-light:hover{ background:var(--lav) }
.btn-ghost-light{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55) }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px #fff }

/* ---------- header ---------- */
/* Sticky, so it sits in the flow: it carries the hero's colour at the
   top and turns solid once you scroll past it. */
.site-head{
  position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:var(--blue); color:#fff;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s;
}
.site-head.is-stuck{ background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--line) }
.head-inner{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); min-height:74px }

.logo{ display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto }
.logo-mark{ display:grid; place-items:center; width:34px; height:34px; color:currentColor }
.logo-mark svg{ width:100%; height:100% }
.logo-word{ font-weight:800; font-size:1.6rem; letter-spacing:-.045em; line-height:1 }
.site-head:not(.is-stuck){ --mark-eye:var(--blue) }
.site-head.is-stuck{ --mark-eye:#fff }
.site-head.is-stuck .logo{ color:var(--blue) }

.nav{ display:flex; gap:clamp(.9rem,2vw,1.9rem); margin-inline-end:auto; font-size:.9375rem; font-weight:500 }
.nav a{ display:inline-flex; align-items:center; min-height:44px; opacity:.85; border-block-end:2px solid transparent }
.nav a:hover{ opacity:1; border-block-end-color:currentColor }
.nav a.is-current{ opacity:1; border-block-end-color:currentColor }

.head-actions{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto }
.lang{ display:flex; border-radius:var(--r-pill); padding:3px; background:rgba(255,255,255,.16) }
.site-head.is-stuck .lang{ background:var(--lav-soft) }
.lang-btn{
  min-width:44px; min-height:44px; padding:.2rem .6rem;
  background:transparent; border:0; border-radius:var(--r-pill);
  font-weight:600; font-size:.8125rem; cursor:pointer; opacity:.8;
}
.lang-btn.is-on{ background:#fff; color:var(--blue); opacity:1 }
.site-head.is-stuck .lang-btn.is-on{ background:var(--blue); color:#fff }

.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:10px }
.burger span{ display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .25s var(--ease) }
.burger span+span{ margin-block-start:6px }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg) }
.burger[aria-expanded="true"] span+span{ transform:translateY(-4px) rotate(-45deg) }

.mobile-nav{
  display:grid; gap:.25rem; padding:1rem var(--gutter) 1.6rem;
  background:var(--paper); color:var(--ink); box-shadow:0 8px 24px rgba(2,10,74,.12);
}
.mobile-nav a{ padding:.85rem 0; font-weight:600; border-block-end:1px solid var(--line) }
.mobile-nav .btn{ margin-block-start:.9rem; background:var(--blue); color:#fff; border:0 }

.he-note{
  background:var(--lav-soft); color:var(--blue-deep);
  padding:.7rem var(--gutter); text-align:center; font-size:.9375rem; font-weight:500;
}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--blue); color:#fff;
  padding-block:clamp(2rem,5vw,4rem) 0; overflow:hidden;
}
.hero-sky{ position:absolute; inset:0; color:#fff; pointer-events:none }
.hero-sky svg{ width:100%; height:100% }
.hero-grid{
  position:relative; display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr); align-items:end;
}
.hero-copy{ padding-block-end:clamp(2.5rem,6vw,5rem) }
.hero .lead{ margin-block-start:1.5rem; color:var(--lav) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:2rem }
.hero-foot{
  display:flex; align-items:center; gap:.5rem;
  margin-block-start:1.5rem; font-size:.9375rem; color:var(--lav);
}
.tick{ width:18px; height:18px; flex:0 0 auto; color:#fff }

.hero-art{
  position:relative; align-self:end; justify-self:center;
  width:100%; max-width:360px;
  padding-block-end:clamp(2.5rem,6vw,4.5rem);
}
.phone-hero{ margin-inline:auto; box-shadow:0 30px 60px rgba(2,10,74,.45) }
.float-card{
  position:absolute; display:flex; align-items:center; gap:.7rem;
  background:#fff; color:var(--ink);
  border-radius:var(--r-pan); padding:.7rem .9rem;
  box-shadow:0 8px 20px rgba(2,10,74,.22);
}
/* centred with inset-inline + auto margins: a 50% + translate would
   land off-centre in RTL (same trap as the phone notch). */
.float-skill{
  inset-block-end:1.25rem; inset-inline:0;
  margin-inline:auto; width:max-content; max-width:100%;
  gap:.45rem; padding:.55rem .7rem;
  flex-wrap:wrap; justify-content:center;   /* wraps instead of clipping on tiny screens */
}
.float-skill .morph{ width:26px; height:12px; color:var(--blue); flex:0 0 auto }

.chip{
  display:inline-block; border-radius:var(--r-pill);
  padding:.28rem .7rem; font-size:.75rem; font-weight:600; white-space:nowrap;
}
.chip-service{ background:var(--lav-soft); color:var(--blue-deep) }
.chip-skill{ background:var(--blue); color:#fff }

/* match ring */
.ring{
  --pv:var(--p);
  position:relative; flex:0 0 auto;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--blue) calc(var(--pv)*1%), var(--lav-soft) 0);
}
.ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff }
.ring>span{ position:relative; font-weight:700; font-size:.875rem; letter-spacing:-.02em; color:var(--blue) }
.ring>span i{ font-style:normal; font-size:.625em; font-weight:600 }
.ring-sm{ width:42px; height:42px }
.ring-sm>span{ font-size:.75rem }
.ring-sm::before{ inset:4px }
.ring-xs{ width:34px; height:34px }
.ring-xs>span{ font-size:.625rem }
.ring-xs::before{ inset:3px }

/* ---------- the gap ---------- */
.gap-grid{
  margin-block-start:clamp(2.5rem,5vw,4rem);
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
}
.gap-side h3{
  font-size:1.25rem; font-weight:700; letter-spacing:-.01em;
  padding-block-end:.9rem; margin-block-end:1.1rem;
  border-block-end:2px solid var(--blue);
}
.ticks li{
  position:relative; padding-inline-start:1.9rem; padding-block:.55rem;
  color:var(--ink); max-width:44ch;
}
.ticks li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:1.15rem;
  width:10px; height:2px; background:var(--blue); border-radius:2px;
}
.gap-rule{ display:none }

/* ---------- translator ---------- */
.tr-head{ max-width:44ch }
.translator{ margin-block-start:clamp(2rem,4vw,3rem) }
.tr-roles{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-block-end:clamp(1.5rem,3vw,2.25rem);
}
.tr-role-btn{
  min-height:44px; padding:.55rem 1.05rem;
  background:rgba(255,255,255,.12); color:#fff;
  border:0; border-radius:var(--r-pill);
  font-weight:600; font-size:.9375rem; cursor:pointer;
  transition:background-color .2s, color .2s, transform .2s var(--ease);
}
.tr-role-btn:hover{ background:rgba(255,255,255,.25) }
.tr-role-btn[aria-selected="true"]{ background:#fff; color:var(--blue) }

.tr-panel{
  background:var(--blue-deep); border-radius:var(--r-pan);
  padding:clamp(1.4rem,3vw,2.4rem);
  display:grid; gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
.tr-label{
  font-size:.8125rem; font-weight:600; letter-spacing:-.01em;
  color:var(--lav); margin-block-end:.6rem;
}
.tr-label-2{ margin-block-start:1.6rem }
.tr-role{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); font-weight:700; line-height:1.15; letter-spacing:-.02em }
.tr-role-sub{ color:var(--lav); margin-block-start:.6rem; max-width:32ch; font-weight:300 }
.tr-arrow{ display:none; color:var(--blue-lift) }
.tr-arrow svg{ width:56px }

.tr-skills{ display:flex; flex-wrap:wrap; gap:.45rem }
.tr-skills li{
  background:#fff; color:var(--blue-deep);
  border-radius:var(--r-pill); padding:.35rem .8rem;
  font-size:.875rem; font-weight:600;
}
.tr-jobs{ display:grid; gap:.5rem }
.tr-jobs li{
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.1); border-radius:var(--r-ctl); padding:.6rem .8rem;
}
.tr-jobs b{ font-weight:600; font-size:.9375rem }
.tr-jobs em{ font-style:normal; color:var(--lav); font-size:.8125rem; margin-inline-start:auto }

/* ---------- how ---------- */
.how-grid{
  display:grid; gap:clamp(2.5rem,6vw,4rem);
  grid-template-columns:minmax(0,1fr); align-items:center;
}
.steps{ margin-block-start:clamp(2rem,4vw,3rem); display:grid; gap:clamp(1.6rem,3vw,2.2rem) }
.steps li{ position:relative; padding-inline-start:3.6rem }
.step-n{
  position:absolute; inset-inline-start:0; inset-block-start:-.1rem;
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue); color:#fff; font-weight:700; font-size:1.05rem;
}
.steps h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin-block-end:.35rem }
.steps p{ color:var(--muted); max-width:46ch }

/* phone mock */
.how-art{ display:grid; place-items:center }
.phone{
  position:relative; width:min(300px,84vw); aspect-ratio:300/610;
  background:var(--navy); border-radius:34px; padding:10px;
  box-shadow:0 24px 48px rgba(2,10,74,.28);
}
/* inset-inline + margin auto centres in both directions;
   a 50% + translate would fly out of the frame in RTL. */
.phone-notch{
  position:absolute; inset-block-start:16px; inset-inline:0; margin-inline:auto;
  width:96px; height:20px; border-radius:var(--r-pill); background:var(--navy); z-index:2;
}
.phone-screen{
  height:100%; border-radius:26px; background:var(--offwhite);
  padding:34px 12px 12px; overflow:hidden; display:flex; flex-direction:column; gap:8px;
}
.app-bar{ display:flex; align-items:center; gap:.4rem; color:var(--blue); --mark-eye:var(--offwhite) }
.app-logo svg{ width:18px; height:18px }
.app-bar b{ font-size:.875rem; font-weight:700; color:var(--ink) }
.app-search{
  background:#fff; border-radius:var(--r-ctl); padding:.5rem .6rem;
  font-size:.6875rem; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);
}
.app-chips{ display:flex; gap:.3rem; flex-wrap:wrap }
.app-chips i{
  font-style:normal; font-size:.625rem; font-weight:600;
  background:var(--lav-soft); color:var(--blue-deep);
  border-radius:var(--r-pill); padding:.2rem .5rem;
}
.app-card{
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border-radius:var(--r-ctl); padding:.55rem .6rem;
}
.app-card.is-top{ box-shadow:inset 0 0 0 2px var(--blue) }
.app-txt{ display:grid; min-width:0 }
.app-card strong{ font-size:.75rem; font-weight:700; line-height:1.25 }
.app-card em{ font-style:normal; font-size:.625rem; color:var(--muted) }
.app-field{ display:grid; gap:.22rem; padding-block:.3rem }
.app-k{ font-size:.5625rem; font-weight:600; color:var(--muted); letter-spacing:.01em }
.app-v{ font-size:.6875rem; font-weight:600; color:var(--ink) }
.app-tag{
  font-style:normal; display:inline-block; font-size:.625rem; font-weight:700;
  background:var(--blue); color:#fff; border-radius:var(--r-pill); padding:.18rem .55rem;
}
.app-chips2{ display:flex; flex-wrap:wrap; gap:.25rem }
.app-chips2 i{
  font-style:normal; font-size:.5625rem; font-weight:600;
  background:var(--lav-soft); color:var(--blue-deep);
  border-radius:var(--r-pill); padding:.18rem .45rem;
}
.app-cta{
  margin-block-start:.5rem; background:var(--blue); color:#fff;
  border-radius:var(--r-ctl); padding:.5rem; text-align:center;
  font-size:.6875rem; font-weight:700;
}
.app-tabs{ margin-block-start:auto; display:flex; justify-content:space-around; padding-block-start:.5rem }
.app-tabs i{ width:22px; height:4px; border-radius:2px; background:var(--line) }
.app-tabs i.on{ background:var(--blue) }

/* ---------- companies ---------- */
.co-head{ max-width:52ch }
.co-grid{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1fr); align-items:center;
}
.co-points{ display:grid; gap:1.4rem }
.co-points h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-.01em }
.co-points p{ color:var(--muted); font-size:.9375rem; max-width:44ch; margin-block-start:.2rem }
.co-copy .btn{ margin-block-start:2rem }

.co-art{ position:relative }
.window{
  position:relative; z-index:1;
  border-radius:var(--r-pan); overflow:hidden; background:#fff;
  box-shadow:0 22px 44px rgba(2,10,74,.16);
}
.win-chrome{
  display:flex; align-items:center; gap:.35rem;
  background:var(--lav-soft); padding:.55rem .75rem;
}
.win-chrome i{ width:9px; height:9px; border-radius:50%; background:#fff }
.win-chrome span{
  flex:1; margin-inline-start:.6rem; background:#fff; border-radius:var(--r-pill);
  padding:.2rem .7rem; font-size:.6875rem; color:var(--muted);
}
.win-body{ display:flex; min-height:250px }
.win-side{
  flex:0 0 34%; max-width:150px; background:var(--blue); color:#fff;
  padding:.8rem .7rem; display:grid; gap:.3rem; align-content:start;
  --mark-eye:var(--blue);
}
.win-logo{ display:flex; align-items:center; gap:.3rem; font-weight:800; font-size:.9375rem; letter-spacing:-.04em; margin-block-end:.5rem }
.win-logo svg{ width:16px; height:16px }
.win-side i{ font-style:normal; font-size:.6875rem; opacity:.75; padding:.32rem .4rem; border-radius:6px }
.win-side i.on{ background:#fff; color:var(--blue); opacity:1; font-weight:600 }
.win-main{ flex:1; padding:.85rem .9rem; min-width:0 }
.win-h{ font-size:.8125rem; font-weight:700; margin-block-end:.6rem }
.win-h em{ font-style:normal; font-weight:500; color:var(--muted); margin-inline-start:.4rem; font-size:.75rem }
.applicants{ display:grid; gap:.4rem }
.applicants li{
  display:flex; align-items:center; gap:.45rem;
  background:var(--offwhite); border-radius:var(--r-ctl); padding:.35rem .5rem;
}
.applicants b{ font-size:.75rem; font-weight:700 }
.applicants i{
  font-style:normal; font-size:.5625rem; font-weight:600;
  background:var(--lav-soft); color:var(--blue-deep);
  border-radius:var(--r-pill); padding:.12rem .45rem;
}
.applicants u{
  text-decoration:none; margin-inline-start:auto;
  font-size:.5625rem; font-weight:700;
  background:var(--green); color:#14260a;
  border-radius:var(--r-pill); padding:.18rem .5rem;
}

/* ---------- mission ---------- */
.mission-grid{
  display:grid; gap:clamp(2.5rem,6vw,4rem);
  grid-template-columns:minmax(0,1fr); align-items:center;
}
.mi-list{ margin-block-start:2rem; display:grid; gap:.7rem }
.mi-list li{
  position:relative; padding-inline-start:1.75rem;
  color:#fff; font-weight:500;
}
.mi-list li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62rem;
  width:8px; height:8px; border-radius:50%; background:var(--green);
}
.founder{ position:relative; max-width:420px; justify-self:center }
.founder figcaption{
  background:#fff; color:var(--ink); border-radius:var(--r-pan);
  padding:clamp(1.3rem,3vw,1.9rem);
  box-shadow:0 14px 30px rgba(2,10,74,.3);
}
.founder p{ font-size:.9375rem; color:var(--muted); text-wrap:pretty }
.founder cite{
  display:grid; font-style:normal; font-weight:700; margin-block-start:.7rem; font-size:.9375rem;
}
.founder cite span{ font-weight:500; font-size:.8125rem; color:var(--muted) }

/* ---------- waitlist ---------- */
.join-shell{ max-width:640px }
.join-form{ margin-block-start:clamp(2rem,4vw,2.75rem); display:grid; gap:1.1rem }
.seg{
  display:flex; gap:.4rem; border:0; padding:4px;
  background:var(--lav-soft); border-radius:var(--r-pill);
}
.seg label{ flex:1; min-width:0 }
.seg input{ position:absolute; opacity:0; width:1px; height:1px }
.seg span{
  display:grid; place-items:center; min-height:44px;
  padding:.4rem .6rem; border-radius:var(--r-pill); text-align:center;
  font-weight:600; font-size:.9375rem; line-height:1.25; cursor:pointer;
  color:var(--blue-deep); overflow-wrap:break-word;
  transition:background-color .2s, color .2s;
}
.seg input:checked + span{ background:var(--blue); color:#fff }
.seg input:focus-visible + span{ outline:3px solid var(--blue-lift); outline-offset:2px }

.field{ display:grid; gap:.4rem }
.field label{ font-size:.875rem; font-weight:600 }
.field input{
  min-height:50px; padding:.75rem .9rem;
  background:var(--offwhite); border:1px solid var(--line); border-radius:var(--r-ctl);
  transition:border-color .2s, background-color .2s;
}
.field input::placeholder{ color:var(--muted) }
.field input:focus{ background:#fff; border-color:var(--blue) }
.field input[aria-invalid="true"]{ border-color:#b3261e; background:#fff }
.err{ font-size:.8125rem; font-weight:500; color:#b3261e }
.form-note{ font-size:.8125rem; color:var(--muted); text-wrap:pretty }
.form-status{ font-weight:600; font-size:.9375rem; color:var(--green-ink) }
.form-status.is-err{ color:#b3261e }

/* ---------- footer ---------- */
.site-foot{ background:var(--navy); color:#fff; padding-block:clamp(2.5rem,5vw,3.5rem) }
.foot-inner{ display:grid; gap:1.1rem }
.logo-foot{ --mark-eye:var(--navy) }
.foot-line{ color:var(--lav); max-width:40ch; font-size:.9375rem }
.foot-nav{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.9375rem; font-weight:500 }
.foot-nav a{ color:var(--lav); border-block-end:1px solid transparent }
.foot-nav a:hover{ color:#fff; border-block-end-color:currentColor }
.foot-legal{ font-size:.8125rem; color:var(--lav); opacity:.8 }

/* ---------- motion ---------- */
/* The hero entrance is a pure CSS animation: the hidden state exists only
   because the animation exists, so if animations never run the content is
   simply visible. It must never depend on a JS callback firing
   (requestAnimationFrame does not fire in a tab that is not painting). */
html.has-motion .rise{ animation:rise .7s var(--ease) both; animation-delay:var(--d,0ms) }
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* Scroll reveals stay JS-driven, with a safety net in main.js. */
html.has-motion .reveal{ opacity:0; transform:translateY(22px) }
html.has-motion .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
/* The ring is drawn at its real value by default; the animation only
   replays it from zero. If it never runs, the ring is simply correct. */
html.has-motion .ring.is-in{ animation:ringfill .9s var(--ease) }
@keyframes ringfill{ from{ --pv:0 } }

html.has-motion .tr-skills li,
html.has-motion .tr-jobs li{ animation:pop .45s var(--ease) both; animation-delay:var(--d,0ms) }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- RTL ---------- */
[dir="rtl"] .trail,
[dir="rtl"] .tr-arrow svg,
[dir="rtl"] .float-skill .morph{ transform:scaleX(-1) }
[dir="rtl"] .display,[dir="rtl"] .sec-h{ letter-spacing:normal }

/* ---------- breakpoints ---------- */
@media (max-width:900px){
  .nav{ display:none }
  .head-cta{ display:none }
  .burger{ display:block }
  .hero-art{ max-width:320px }
}

/* two full-width choices read better than two cramped pills */
@media (max-width:430px){
  .seg{ flex-direction:column; border-radius:var(--r-pan) }
  .seg span{ border-radius:var(--r-ctl) }
}

/* the dashboard mock has to stay readable, not get clipped */
@media (max-width:620px){
  .win-body{ min-height:0 }
  .win-side{ flex-basis:30%; padding:.7rem .5rem }
  .win-main{ padding:.7rem .6rem }
  .applicants li{ gap:.35rem; padding:.3rem .4rem }
  .applicants li i{ display:none }
  .applicants b{ margin-inline-end:auto }
  .applicants u{ font-size:.5rem; padding:.16rem .42rem }
}

/* keep the floating cards inside the frame on small screens */
@media (max-width:620px){
  .hero-art{ max-width:270px }
  .float-skill .chip{ font-size:.6875rem; padding:.24rem .55rem }
}

@media (min-width:640px){
  .gap-grid{ grid-template-columns:1fr auto 1fr; align-items:start }
  .gap-rule{
    display:grid; place-items:center; align-self:stretch;
    writing-mode:vertical-rl; text-orientation:mixed;
    font-size:.75rem; font-weight:600; color:var(--muted);
    letter-spacing:.02em; position:relative; padding-inline:.75rem;
  }
  .gap-rule::before{
    content:""; position:absolute; inset-block:0; inset-inline-start:50%;
    width:1px; background:var(--line);
  }
  .gap-rule span{ background:var(--paper); padding-block:.6rem; position:relative }
  .foot-inner{ grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem 2rem }
  .foot-line{ grid-column:1/-1; order:3 }
  .foot-legal{ grid-column:1/-1; order:4 }
}

@media (min-width:901px){
  .hero-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4rem) }
  .hero-copy{ padding-block-end:clamp(4rem,8vw,7rem) }
  .how-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
  .co-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .mission-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .tr-panel{ grid-template-columns:minmax(0,.9fr) auto minmax(0,1.3fr); align-items:center }
  .tr-arrow{ display:grid; place-items:center }
}

@media (min-width:1100px){
}