/* ============================================================
   RobotTwin — style.css
   VERSION: 1.2.0
   Anodised plate + intaglio. Credential-document visual system.
   The Twin Card is the hero; everything else stays quiet.
   ============================================================ */

:root{
  --plate:      #D7DBDC;   /* anodised aluminium, page ground */
  --plate-deep: #C2C8CA;   /* mill finish, recessed areas */
  --ink:        #16191C;   /* engraved type */
  --steel:      #5C6469;   /* secondary type */
  --intaglio:   #0F5C4C;   /* security-print green — verified states only */
  --rule:       rgba(22,25,28,.18);
  --rule-soft:  rgba(22,25,28,.10);

  --measure: 64ch;
  --max: 1280px;
  --gut: clamp(22px, 5vw, 84px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
section[id]{scroll-margin-top:76px;}
body{
  margin:0;
  background:var(--plate);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-optical-sizing:auto;
  font-size:17px;
  line-height:1.62;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* milled-metal grain */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;}

.wrap{width:min(100% - (var(--gut)*2), var(--max));margin-inline:auto;position:relative;z-index:1;}

.display{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:700;
  line-height:.84;
  letter-spacing:-.035em;
  margin:0;
  font-stretch:112%;
}
.plate-type{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--plate) 88%, transparent);
  backdrop-filter:blur(10px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.masthead.pinned{
  background:color-mix(in srgb, var(--plate) 95%, transparent);
  box-shadow:0 10px 26px rgba(22,25,28,.09);
}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  height:62px;transition:height .4s var(--ease);
}
.masthead.pinned .masthead-in{height:54px;}
.sigil{display:flex;align-items:center;gap:10px;text-decoration:none;}
.sigil svg{width:22px;height:22px;}
.sigil span{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;
  font-stretch:118%;letter-spacing:.02em;
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(24px,3.2vh,46px) 0 clamp(54px,8vh,112px);}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,5vw,74px);align-items:center;
}
.hero-grid>*,.anatomy-grid>*,.card-stage{min-width:0;}
.hero h1{font-size:clamp(46px,7.6vw,112px);}
.hero h1 em{display:block;font-style:normal;font-stretch:96%;}
.hero h1 strong{display:block;font-weight:800;font-stretch:124%;}
.hero-body{max-width:46ch;margin:clamp(20px,2.2vw,28px) 0 0;color:var(--steel);font-size:clamp(16px,1.3vw,19px);}
.hero-body b{font-weight:400;color:var(--ink);}

.tri{
  margin-top:clamp(24px,3vw,34px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
}
.tri p{margin:0;font-size:15px;color:var(--steel);}

/* ---------- the twin card ---------- */
.card-stage{perspective:1400px;display:grid;place-items:center;}
.card{
  position:relative;width:min(100%,430px);aspect-ratio:1.585/1;
  border-radius:12px;
  background:
    linear-gradient(148deg,#E9ECEC 0%,#D2D8D9 38%,#BFC6C8 62%,#DDE2E3 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(22,25,28,.16) inset,
    0 26px 54px rgba(22,25,28,.28),
    0 3px 10px rgba(22,25,28,.16);
  transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg));
  transition:transform .9s var(--ease);
  overflow:hidden;
  padding:20px 22px 0;
  display:flex;flex-direction:column;
}
.guilloche{
  position:absolute;right:-26px;top:-30px;width:210px;height:210px;
  opacity:.2;pointer-events:none;
}
.guilloche ellipse{fill:none;stroke:var(--intaglio);stroke-width:.35;}
.foil{
  position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#B7D8CE,#E4D3A8 22%,#C9C3E6 44%,#AFDCD6 66%,#E7D9B4 84%,#BCD6E0);
  background-size:220% 100%;
  background-position:var(--foil,0%) 0;
}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.card-id{
  font-family:"IBM Plex Mono",monospace;font-size:16px;letter-spacing:.02em;font-weight:500;
}
.card-org{font-family:"Archivo",sans-serif;font-weight:800;font-size:11px;font-stretch:120%;letter-spacing:.08em;color:var(--steel);text-align:right;line-height:1.3;}
.card-sub{font-size:13.5px;color:var(--steel);margin:2px 0 0;}

.fields{
  margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding-bottom:14px;
}
.fields dt{color:var(--steel);letter-spacing:.04em;}
.fields dd{margin:0;text-align:right;letter-spacing:.02em;}
.fields dd.ok{color:var(--intaglio);font-weight:500;}

.mrz{
  margin:0 -22px;padding:9px 22px;
  border-top:1px solid rgba(22,25,28,.16);
  background:rgba(22,25,28,.045);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  color:var(--steel);white-space:nowrap;overflow:hidden;
}
.card-caption{
  margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--steel);text-align:center;letter-spacing:.03em;
}

/* ---------- statement ---------- */
.statement{border-top:1px solid var(--rule);padding:clamp(54px,8vw,104px) 0;}
.statement p{
  font-family:"Archivo",sans-serif;font-weight:400;font-stretch:96%;
  font-size:clamp(24px,3.4vw,46px);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 .38em;max-width:22ch;
}
.statement p:last-of-type{font-weight:800;font-stretch:118%;margin-bottom:0;}

/* ---------- what a twin holds ---------- */
.holds{border-top:1px solid var(--rule);padding:clamp(54px,8vw,104px) 0;}
.holds h2,.vocab h2,.anatomy h2{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:118%;
  font-size:clamp(28px,3.6vw,52px);line-height:.96;letter-spacing:-.035em;margin:0 0 14px;
}
.holds .intro{max-width:var(--measure);color:var(--steel);margin:0 0 clamp(28px,4vw,52px);}

.register{border-top:1px solid var(--ink);}
.row{
  display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(0,3fr) minmax(120px,.9fr);
  gap:clamp(14px,3vw,40px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule-soft);
}
.row-key{
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:112%;
  font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;
}
.row p{margin:0;color:var(--steel);font-size:16px;max-width:52ch;}
.row-q{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink);
  letter-spacing:.02em;text-align:right;
}

/* ---------- anatomy ---------- */
.anatomy{border-top:1px solid var(--rule);padding:clamp(54px,8vw,104px) 0;}
.anatomy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center;}
.anatomy .intro{max-width:var(--measure);color:var(--steel);margin:0 0 26px;}
.notes{border-top:1px solid var(--ink);}
.note{padding:16px 0;border-bottom:1px solid var(--rule-soft);display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:baseline;}
.note b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;color:var(--intaglio);}
.note span{font-size:15.5px;color:var(--steel);}
.note span i{font-style:normal;color:var(--ink);}

/* ---------- vocabulary ---------- */
.vocab{border-top:1px solid var(--rule);padding:clamp(54px,8vw,104px) 0;}
.vocab .intro{max-width:var(--measure);color:var(--steel);margin:0 0 clamp(30px,4vw,54px);}
.lines{display:grid;gap:0;border-top:1px solid var(--rule-soft);}
.lines p{
  margin:0;padding:15px 0;border-bottom:1px solid var(--rule-soft);
  font-family:"Archivo",sans-serif;font-weight:400;font-stretch:98%;
  font-size:clamp(19px,2.3vw,32px);letter-spacing:-.022em;line-height:1.16;
}
.vocab .close{margin:clamp(28px,4vw,50px) 0 0;max-width:var(--measure);color:var(--steel);}

/* ---------- arrival ---------- */
.arrival{border-top:1px solid var(--rule);padding:clamp(64px,9vw,124px) 0 clamp(54px,8vw,104px);}
.swarm{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:9px;margin-bottom:clamp(48px,7vw,96px);
}
.unit{
  border:1px solid var(--rule-soft);border-radius:4px;
  background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(22,25,28,.035));
  padding:9px 10px;
  font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--steel);
  line-height:1.5;opacity:0;transform:translateY(5px);
}
.unit b{display:block;color:var(--ink);font-weight:500;letter-spacing:.03em;}
.unit i{font-style:normal;color:var(--intaglio);}
.swarm.live .unit{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}

.arrival-close p{
  font-family:"Archivo",sans-serif;font-weight:400;font-stretch:98%;
  font-size:clamp(26px,4vw,58px);line-height:1.06;letter-spacing:-.035em;
  margin:0 0 .3em;max-width:18ch;
}
.arrival-close p.now{font-weight:800;font-stretch:122%;}
.arrival-mark{
  margin-top:clamp(40px,6vw,84px);padding-top:24px;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
}
.arrival-mark h2{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:125%;
  font-size:clamp(40px,8vw,110px);letter-spacing:-.05em;line-height:.82;margin:0;
}
.arrival-mark p{margin:0;color:var(--steel);font-size:16px;}

/* ---------- colophon ---------- */
/* (colophon lives in the navigation + footer block below) */

/* ---------- issuance: the one orchestrated moment ---------- */
.card{opacity:0;}
.issued .card{opacity:1;transition:opacity .8s var(--ease),transform .9s var(--ease);}
.fields dd,.mrz,.card-id{opacity:0;}
.issued .fields dd,.issued .mrz,.issued .card-id{opacity:1;transition:opacity .5s var(--ease);}
.issued .card-id{transition-delay:.55s;}
.issued .fields dd:nth-of-type(1){transition-delay:.80s;}
.issued .fields dd:nth-of-type(2){transition-delay:.90s;}
.issued .fields dd:nth-of-type(3){transition-delay:1.00s;}
.issued .fields dd:nth-of-type(4){transition-delay:1.10s;}
.issued .fields dd:nth-of-type(5){transition-delay:1.20s;}
.issued .mrz{transition-delay:1.40s;}
.foil{transform:scaleX(0);transform-origin:left;}
.issued .foil{transform:none;transition:transform 1.1s var(--ease) .15s;}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--intaglio);outline-offset:3px;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.anatomy-grid{grid-template-columns:1fr;}
  .card-stage{margin-bottom:14px;} /* copy leads on narrow screens, so the CTAs stay above the fold */
  .row{grid-template-columns:1fr;gap:8px;}
  .row-q{text-align:left;}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(40px,13vw,62px);}
  .hero h1 em,.hero h1 strong{font-stretch:105%;}
  .swarm{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .card,.fields dd,.mrz,.card-id,.unit{opacity:1!important;transform:none!important;}
  .foil{transform:none!important;}
  html{scroll-behavior:auto;}
  .pip{animation:none!important;}
  .cue-rule::after{animation:none!important;}
}

/* ============================================================
   NAVIGATION, CALL TO ACTION, FOOTER — v1.1.0
   Same credential-document grammar: hairlines, mono plate-type,
   intaglio green reserved for live and verified states.
   ============================================================ */

/* ---------- skip link ---------- */
.skip{
  position:fixed;left:50%;top:-70px;z-index:400;transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  padding:11px 18px;border-radius:0 0 7px 7px;
  background:var(--ink);color:var(--plate);
  transition:top .3s var(--ease);
}
.skip:focus-visible{top:0;outline-offset:-4px;}

/* ---------- masthead nav ---------- */
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);margin-left:auto;}
.nav a{
  position:relative;display:inline-block;padding:7px 1px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--intaglio);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{transform:none;}
.nav a.current{color:var(--ink);}
.nav a.current::after{transform:none;}

.masthead-end{display:flex;align-items:center;gap:16px;}

/* reading-progress hairline, engraved along the masthead edge */
.progress{
  position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--intaglio),color-mix(in srgb,var(--intaglio) 55%,var(--plate)));
  transform:scaleX(var(--p,0));transform-origin:left;
}

/* ---------- mobile disclosure ---------- */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:-8px;padding:0;
  background:none;border:0;border-radius:5px;cursor:pointer;
}
.nav-toggle .bars{display:grid;gap:5px;width:17px;}
.nav-toggle .bars i{
  display:block;height:1.4px;background:var(--ink);border-radius:1px;
  transition:transform .38s var(--ease),opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .bars i:first-child{transform:translateY(3.2px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars i:last-child{transform:translateY(-3.2px) rotate(-45deg);}

/* ---------- buttons ---------- */
.cta-row{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(24px,3vw,34px);
}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 21px;border-radius:7px;border:1px solid transparent;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease);
}
.btn svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn-ink{
  background:var(--ink);color:var(--plate);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 22px rgba(22,25,28,.24);
}
.btn-ink:hover{
  background:var(--intaglio);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 14px 28px rgba(15,92,76,.30);
}
.btn-ink:hover svg{transform:translateY(3px);}

.btn-line{
  color:var(--ink);border-color:var(--rule);
  background:linear-gradient(148deg,rgba(255,255,255,.58),rgba(22,25,28,.035));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.btn-line:hover{
  border-color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 22px rgba(22,25,28,.12);
}
.btn-line:hover svg{transform:translateX(3px);}

/* ---------- hero eyebrow + scroll cue ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(16px,2vw,24px);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);
}
.pip{
  width:6px;height:6px;border-radius:50%;background:var(--intaglio);
  box-shadow:0 0 0 3px rgba(15,92,76,.14);
  animation:pip 3.4s var(--ease) infinite;
}
@keyframes pip{
  0%,72%,100%{box-shadow:0 0 0 3px rgba(15,92,76,.14);}
  86%{box-shadow:0 0 0 6px rgba(15,92,76,0);}
}

.scroll-cue{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;
  transition:color .3s var(--ease);
}
.scroll-cue:hover{color:var(--ink);}
.cue-rule{position:relative;display:block;width:1px;height:28px;background:var(--rule-soft);overflow:hidden;}
.cue-rule::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:14px;
  background:var(--intaglio);animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:translateY(-14px);opacity:0;}
  30%{opacity:1;}
  100%{transform:translateY(28px);opacity:0;}
}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;z-index:120;
  right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);
  width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid var(--rule);
  background:linear-gradient(148deg,#E9ECEC 0%,#D2D8D9 55%,#C3CACC 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(22,25,28,.14) inset,
    0 12px 26px rgba(22,25,28,.20);
  opacity:0;transform:translateY(12px) scale(.94);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .3s var(--ease);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{border-color:var(--ink);}
.to-top svg{
  width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.to-top:hover svg{transform:translateY(-2px);}

/* ---------- colophon ---------- */
.colophon{
  border-top:1px solid var(--rule);
  padding:clamp(38px,5vw,62px) 0 clamp(78px,8vw,100px);
  background:linear-gradient(180deg,transparent,rgba(22,25,28,.04));
}
.colophon-mark{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--rule-soft);
}
.thesis{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.045em;color:var(--steel);
}
.thesis .sep{color:var(--steel);opacity:.45;}
.thesis a{
  position:relative;color:var(--ink);text-decoration:none;padding-bottom:2px;
  transition:color .3s var(--ease);
}
.thesis a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--intaglio);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.thesis a:hover{color:var(--intaglio);}
.thesis a:hover::after{transform:none;}

.colophon-in{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:20px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;color:var(--steel);letter-spacing:.03em;
}
.colophon-nav{display:flex;gap:clamp(12px,2vw,24px);flex-wrap:wrap;}
.colophon-nav a{
  color:var(--steel);text-decoration:none;
  transition:color .3s var(--ease);
}
.colophon-nav a:hover{color:var(--ink);}

.gfd-credit{
  position:relative;color:var(--steel);text-decoration:none;padding-bottom:2px;
  transition:color .3s var(--ease);
}
.gfd-credit::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--intaglio);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.gfd-credit:hover{color:var(--ink);}
.gfd-credit:hover::after{transform:none;}

/* ---------- responsive, v1.1.0 ---------- */
@media (min-width:961px){
  .hero{min-height:calc(100svh - 62px);display:grid;align-content:center;}
}
@media (min-width:961px) and (min-height:820px){
  .scroll-cue{display:flex;}
}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .masthead-in{position:static;}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 18px;
    background:var(--plate);
    border-bottom:1px solid var(--rule);
    box-shadow:0 18px 30px rgba(22,25,28,.12);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .3s var(--ease),transform .34s var(--ease);
  }
  .nav.open{opacity:1;transform:none;pointer-events:auto;}
  .nav a{padding:15px 0;border-bottom:1px solid var(--rule-soft);}
  .nav a:last-child{border-bottom:0;}
  .nav a::after{bottom:0;}
}
@media (max-width:560px){
  .cta-row{gap:10px;}
  .btn{width:100%;justify-content:space-between;}
  .colophon-mark{align-items:flex-start;}
  .colophon-in{flex-direction:column;align-items:flex-start;gap:14px;}
  .to-top{width:42px;height:42px;}
}


/* ============================================================
   NAV SEAL + HERO FOLD — v1.2.0
   The Twin Card's guilloche rosette, reduced to a security-print
   seal on the masthead's right edge, and a height-aware hero that
   keeps both CTAs above the fold on short laptop viewports.
   ============================================================ */

/* ---------- masthead seal ---------- */
.nav-seal{
  position:relative;display:grid;place-items:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;overflow:hidden;
  border:1px solid var(--rule);
  background:linear-gradient(148deg,#E9ECEC 0%,#D5DBDC 55%,#C6CDCF 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(22,25,28,.12) inset;
}
.nav-seal svg{width:30px;height:30px;animation:sealTurn 54s linear infinite;}
.nav-seal ellipse{fill:none;stroke:var(--intaglio);stroke-width:.6;opacity:.5;}
.seal-pip{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--intaglio);box-shadow:0 0 0 2.5px rgba(15,92,76,.16);
  animation:pip 3.4s var(--ease) infinite;
}
@keyframes sealTurn{to{transform:rotate(360deg);}}

.nav-stamp{
  display:grid;gap:1px;line-height:1.2;
  font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  white-space:nowrap;
}
.nav-stamp b{font-weight:500;color:var(--ink);}
.nav-stamp em{font-style:normal;color:var(--intaglio);}

.masthead-end{gap:11px;}

/* ---------- hero: height-aware type + short-viewport rescue ---------- */
@media (min-width:961px){
  /* The vh term makes the headline track the room it actually has,
     so it tapers on short laptops instead of jumping at a breakpoint. */
  .hero h1{font-size:clamp(46px, min(7.6vw, 12vh), 112px);}
}

/* Tier 1 — laptops under ~860px tall. Both columns ride up under the
   masthead instead of sitting centred, which is what buys the CTA row
   its clearance; the slack moves to the bottom where the cue lives. */
@media (min-width:961px) and (max-height:860px){
  .hero{
    padding-top:clamp(18px,2.6vh,34px);
    padding-bottom:clamp(44px,7vh,86px);
  }
  .eyebrow{margin-bottom:12px;}
  .hero-body{margin-top:16px;}
  .cta-row{margin-top:20px;}
  .tri{margin-top:18px;padding-top:14px;}
  .card{width:min(100%,392px);}
  .card-caption{margin-top:14px;}
}

/* Tier 2 — genuinely short laptops (~1280x620 after browser chrome).
   Only spacing and the card's cap are reclaimed; nothing is hidden,
   so the headline, body, both CTAs and the three-line rule all stay. */
@media (min-width:961px) and (max-height:700px){
  .hero{padding-top:clamp(12px,2vh,24px);padding-bottom:clamp(30px,5vh,58px);}
  .eyebrow{margin-bottom:8px;font-size:10px;}
  .hero-body{margin-top:12px;font-size:16px;}
  .cta-row{margin-top:14px;}
  .btn{padding:11px 17px;font-size:11px;}
  .tri{margin-top:14px;padding-top:11px;}
  .tri p{font-size:13.5px;}
  .card{width:min(100%,344px);}
  .card-caption{margin-top:11px;}
}

/* ---------- responsive, v1.2.0 ---------- */
@media (max-width:1180px){
  .nav-stamp{display:none;}
}
@media (max-width:359px){
  .nav-seal{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .nav-seal svg{animation:none!important;}
  .seal-pip{animation:none!important;}
}