/* ==========================================================================
   DAYSTRIKE V4 — CORE DESIGN SYSTEM
   Foundation for production site migration.
   
   Extracted from: daystrike-v4-production/current-site/css/core.css
   
   "The page is an unlit room. The market is the only lit thing in it."
   Motif: the line — price, boundary, path, measure.
   ========================================================================== */

/* --- 01 tokens ----------------------------------------------------------- */

:root{
  /* ground */
  --void:#050505;
  --surface:#0A0A0A;
  --raise:#101010;
  --ink:#000;

  /* brand */
  --gold:#C9A227;
  --gold-hi:#E0B93F;
  --gold-dim:#8E731C;

  /* text */
  --paper:#F5F5F2;
  --muted:#8A8A84;
  --dim:#6E6E69;
  --faint:#4A4A47;

  /* market semantics */
  --buy:#46A876;
  --sell:#CD5B50;
  --state:var(--gold);

  /* linework */
  --line:rgba(245,245,242,.10);
  --line-soft:rgba(245,245,242,.055);
  --line-hard:rgba(245,245,242,.18);

  /* measure */
  --shell:1360px;
  --shell-mid:1180px;
  --shell-narrow:920px;
  --gutter:clamp(20px,4vw,40px);

  /* rhythm */
  --sp-section:clamp(96px,13vw,190px);
  --sp-section-sm:clamp(72px,9vw,128px);
  --sp-block:clamp(36px,4.4vw,64px);
  --sp-tight:clamp(20px,2.4vw,32px);

  /* type */
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-hero:clamp(2.9rem,11.6vw,10.4rem);
  --fs-h1:clamp(2.3rem,6.4vw,5.4rem);
  --fs-h2:clamp(1.9rem,4.2vw,3.4rem);
  --fs-h3:clamp(1.28rem,2.5vw,2.05rem);
  --fs-lead:clamp(1.05rem,1.7vw,1.35rem);
  --fs-body:1rem;
  --fs-small:.9rem;
  --fs-label:.72rem;
  --fs-micro:.66rem;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.6,0,.2,1);
  --d-fast:.22s;
  --d-base:.42s;
  --d-slow:.9s;

  --topbar-h:74px;
}

@media (max-width:640px){ :root{ --topbar-h:60px } }

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 20px)}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
svg{display:block}
video{display:block}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:1px}

::selection{background:var(--gold);color:var(--void)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--raise);color:var(--paper);padding:12px 18px;
  font-family:var(--mono);font-size:var(--fs-label);
}
.skip:focus{left:12px;top:12px}

.u-hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- 02 layout primitives ------------------------------------------------ */

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--mid{max-width:var(--shell-mid)}
.shell--narrow{max-width:var(--shell-narrow)}

.section{position:relative;padding-block:var(--sp-section)}
.section--sm{padding-block:var(--sp-section-sm)}
.section--surface{background:var(--surface)}
.section--void{background:var(--void)}

/* the seam: sections are joined by a hairline that carries the index number.
   it replaces the flat border and gives the page a continuous spine. */
.seam{
  position:absolute;inset:0 0 auto 0;height:1px;background:var(--line-soft);
  pointer-events:none;
}
.seam::after{
  content:"";position:absolute;left:var(--gutter);top:0;width:64px;height:1px;
  background:var(--gold);opacity:.55;
}

/* --- 03 type primitives -------------------------------------------------- */

.eyebrow{
  margin:0;font-family:var(--mono);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.eyebrow__n{color:var(--gold);margin-right:.85em}

.h1{
  margin:0;font-family:var(--display);font-variation-settings:'wdth' 125,'wght' 620;
  font-weight:600;font-size:var(--fs-h1);line-height:.94;letter-spacing:-.032em;
}
.h2{
  margin:0;font-family:var(--display);font-variation-settings:'wdth' 125,'wght' 600;
  font-weight:600;font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.022em;
}
.h3{
  margin:0;font-family:var(--display);font-variation-settings:'wdth' 115,'wght' 550;
  font-weight:500;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.018em;
}
.lead{margin:0;font-size:var(--fs-lead);line-height:1.55;color:var(--paper);opacity:.9}
.body{margin:0;font-size:var(--fs-body);line-height:1.68;color:var(--muted)}
.body--paper{color:var(--paper);opacity:.92}
.note{
  margin:0;font-family:var(--mono);font-size:var(--fs-label);line-height:1.7;
  letter-spacing:.03em;color:var(--dim);
}
.gold{color:var(--gold)}

.measure-32{max-width:32ch}
.measure-38{max-width:38ch}
.measure-46{max-width:46ch}
.measure-56{max-width:56ch}

/* section header ---------------------------------------------------------- */

.sechead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,72px);flex-wrap:wrap;
  margin-bottom:var(--sp-block);padding-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.sechead .eyebrow{flex:1 0 100%}
.sechead__title{flex:1 1 auto;max-width:18ch;margin:.55em 0 0}
.sechead__note{flex:0 1 360px;margin:0 0 .35em;max-width:38ch;color:var(--muted);font-size:.95rem}
.sechead--center{justify-content:center;text-align:center}
.sechead--center .sechead__title{max-width:22ch}

/* --- 04 buttons & cues --------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--void);background:var(--paper);padding:14px 22px;
  transition:transform var(--d-fast) var(--ease),background-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn i{width:14px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.btn:hover{background:var(--gold-hi)}
.btn:hover i{width:24px}
.btn:active{transform:translateY(1px)}
.btn--sm{font-size:.7rem;padding:9px 15px}
.btn--lg{font-size:.8rem;padding:19px 28px}
.btn--ghost{
  color:var(--paper);background:transparent;box-shadow:inset 0 0 0 1px var(--line-hard);
}
.btn--ghost:hover{background:transparent;color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--gold)}
.btn--gold{background:var(--gold);color:var(--void)}
.btn--gold:hover{background:var(--gold-hi)}

.cue{
  display:inline-flex;align-items:center;gap:14px;height:26px;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform var(--d-fast) var(--ease);
}
.cue svg{width:11px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}
.cue:hover{color:var(--gold);border-bottom-color:var(--gold)}
.cue:active{transform:translateY(1px)}
.cue--lead{color:var(--paper);border-bottom-color:var(--gold)}

.acts{display:flex;align-items:flex-end;gap:clamp(18px,2.6vw,34px);flex-wrap:wrap}

/* --- 05 topbar ----------------------------------------------------------- */

.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--topbar-h);padding-inline:var(--gutter);
  max-width:var(--shell);margin-inline:auto;
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(5,5,5,.97) 0%,rgba(5,5,5,.9) 50%,rgba(5,5,5,0) 100%);
  transition:opacity .4s var(--ease);
}
.topbar.is-stuck::before{background:rgba(5,5,5,.94);box-shadow:0 1px 0 var(--line-soft)}
@supports (backdrop-filter:blur(2px)){
  .topbar.is-stuck::before{backdrop-filter:blur(10px);background:rgba(5,5,5,.82)}
}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand__mark{width:30px;height:auto;filter:saturate(.82)}
.brand__name{
  font-family:var(--display);font-variation-settings:'wdth' 125,'wght' 620;font-weight:600;
  font-size:.9rem;letter-spacing:.13em;text-transform:uppercase;
}

.topnav{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px);margin-inline:auto}
.topnav a{
  position:relative;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:8px 0;transition:color .25s var(--ease);
}
.topnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--gold);transition:right .35s var(--ease);
}
.topnav a:hover{color:var(--paper)}
.topnav a:hover::after,.topnav a.is-here::after{right:0}
.topnav a.is-here{color:var(--paper)}

.topacts{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex:0 0 auto}
.topacts__quiet{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .25s var(--ease);
}
.topacts__quiet:hover{color:var(--paper)}

/* read progress: one hairline, the whole site's measure */
.progress{
  position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:transparent;overflow:hidden;
}
.progress__fill{
  display:block;height:100%;width:100%;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:.7;
}

/* burger ------------------------------------------------------------------ */

.burger{
  display:none;width:40px;height:40px;margin-right:-8px;
  position:relative;z-index:2;
}
/* the two rules are absolutely placed so the closed and open states are
   both exact — stretched grid rows put them too far apart to cross. */
.burger span{
  position:absolute;left:9px;width:22px;height:1px;background:var(--paper);
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.burger span:first-child{top:17px}
.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* mobile menu ------------------------------------------------------------- */

.menu{
  position:fixed;inset:0;z-index:55;background:var(--void);
  display:grid;grid-template-rows:var(--topbar-h) minmax(0,1fr) auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),visibility .38s;
}
.menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.menu__body{
  padding:clamp(22px,5vw,44px) var(--gutter) clamp(22px,5vw,44px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:center;
}
.menu__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.menu__list li{border-bottom:1px solid var(--line-soft)}
.menu__list a{
  display:flex;align-items:baseline;gap:18px;padding:clamp(14px,3.4vw,20px) 0;
  transform:translateY(14px);opacity:0;
}
.menu.is-open .menu__list a{transform:none;opacity:1;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu__n{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--gold);
  flex:0 0 26px;
}
.menu__t{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 550;font-weight:500;
  font-size:clamp(1.55rem,7vw,2.3rem);line-height:1;letter-spacing:-.024em;color:var(--paper);
}
.menu__d{
  margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);align-self:center;
  text-align:right;line-height:1.4;white-space:nowrap;
}
.menu__thesis{
  margin:clamp(26px,5.5vw,42px) 0 0;
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 400;font-weight:400;
  font-size:clamp(1.02rem,4.2vw,1.3rem);line-height:1.22;letter-spacing:-.014em;color:var(--muted);
  opacity:0;transform:translateY(12px);
}
.menu.is-open .menu__thesis{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) .34s,transform .5s var(--ease) .34s;
}
.menu__thesis em{display:block;font-style:normal;color:var(--gold)}
.menu__foot{
  padding:clamp(20px,4vw,32px) var(--gutter) clamp(26px,5vw,40px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
}
.menu__foot .btn{flex:1 1 auto;justify-content:center}
body.is-locked{overflow:hidden}
/* while the overlay is open the bar keeps only its identity and the toggle */
body.is-locked .topacts .btn{opacity:0;pointer-events:none}
.topacts .btn{transition:transform var(--d-fast) var(--ease),background-color .3s var(--ease),color .3s var(--ease),opacity .25s var(--ease)}

/* --- 06 the lit panel ---------------------------------------------------- */
/* every piece of real product evidence sits in one of these. black bed,
   one hairline in the active state colour, corner ticks set outside the
   edge so the frame reads as page furniture, never as image decoration. */

.panel{
  position:relative;background:var(--ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--state) 30%,transparent),
    0 50px 100px -34px rgba(0,0,0,.95);
  transition:box-shadow .55s var(--ease);
}
.panel--matte{
  box-shadow:
    0 0 0 14px var(--matte,var(--surface)),
    0 0 0 15px color-mix(in srgb,var(--state) 34%,transparent),
    0 46px 90px -28px rgba(0,0,0,.95);
}

.tick{
  position:absolute;width:9px;height:9px;border:0 solid var(--state);opacity:.6;
  transition:border-color .55s var(--ease),opacity .4s var(--ease);pointer-events:none;
}
.tick--tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px;transform:translate(calc(-1 * var(--tick-off,22px)),calc(-1 * var(--tick-off,22px)))}
.tick--tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px;transform:translate(var(--tick-off,22px),calc(-1 * var(--tick-off,22px)))}
.tick--bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px;transform:translate(calc(-1 * var(--tick-off,22px)),var(--tick-off,22px))}
.tick--br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px;transform:translate(var(--tick-off,22px),var(--tick-off,22px))}
.ticks{position:absolute;inset:0;pointer-events:none}

/* percentage crop: container aspect equals the crop aspect, image offset in % */
.crop{position:relative;overflow:hidden}
.crop img{position:absolute;left:var(--cx,0);top:var(--cy,0);width:var(--cw,100%);height:var(--ch,100%);max-width:none}

/* annotation marker — only ever labels something real in the frame */
.marker{
  position:absolute;margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);background:rgba(5,5,5,.88);padding:7px 11px;
  pointer-events:none;
}
.marker__rule{width:34px;height:1px;background:currentColor;opacity:.7}
.marker--rev{flex-direction:row-reverse}
.marker--buy{color:var(--buy)}
.marker--sell{color:var(--sell)}

/* --- 07 ledger (numbered reading rows) ----------------------------------- */

.ledger{margin:0;padding:0;list-style:none;counter-reset:r}
.ledger li{
  counter-increment:r;position:relative;padding:14px 0 14px 34px;
  border-top:1px solid var(--line-soft);font-size:.95rem;line-height:1.5;color:var(--paper);
}
.ledger li::before{
  content:counter(r,decimal-leading-zero);position:absolute;left:0;top:15px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--state);
  transition:color .5s var(--ease);
}
.ledger li:last-child{border-bottom:1px solid var(--line-soft)}

/* --- 08 route rows (access / navigation lists) --------------------------- */

.routes{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.route{border-bottom:1px solid var(--line)}
.route a,.route button{
  display:grid;width:100%;text-align:left;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) 44px;
  gap:clamp(16px,3vw,40px);align-items:center;padding:26px 0;
  transition:padding-left .35s var(--ease);
}
.route a:hover,.route button:hover{padding-left:14px}
.route__name{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 500;font-weight:500;
  font-size:clamp(1.1rem,2vw,1.55rem);letter-spacing:-.014em;color:var(--paper);
}
.route__note{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--muted)}
.route__go{justify-self:end;align-self:center;width:22px;height:1px;background:var(--muted);
  transition:width .35s var(--ease),background-color .35s var(--ease)}
.route a:hover .route__go,.route button:hover .route__go{width:40px;background:var(--gold)}
.route__tag{
  display:inline-block;padding:2px 7px;vertical-align:middle;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,162,39,.4);
}

/* --- 09 CTA band --------------------------------------------------------- */

.ctaband{
  position:relative;padding-block:clamp(72px,9vw,130px);
  background:var(--surface);overflow:hidden;
}
.ctaband__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(28px,5vw,80px);align-items:end;
}
.ctaband__title{max-width:16ch}
.ctaband__note{margin:18px 0 0;max-width:44ch;color:var(--muted);font-size:.95rem}
.ctaband__acts{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.ctaband__line{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  opacity:.28;
}

/* --- 10 email capture ---------------------------------------------------- */

.capture{display:flex;align-items:stretch;gap:0;max-width:460px;width:100%}
.capture input{
  flex:1 1 auto;min-width:0;background:transparent;border:0;
  border-bottom:1px solid var(--line-hard);padding:14px 2px;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--paper);
}
.capture input::placeholder{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.capture input:focus{outline:none;border-bottom-color:var(--gold)}
.capture button{
  flex:0 0 auto;padding:14px 18px;border-bottom:1px solid var(--line-hard);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.capture button:hover{color:var(--gold-hi);border-bottom-color:var(--gold)}
.capture__msg{
  margin:12px 0 0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);min-height:1.2em;
}

/* --- 11 footer ----------------------------------------------------------- */

.foot{background:var(--void);border-top:1px solid var(--line-soft);padding-block:clamp(56px,7vw,88px) 0}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,54px);align-items:start;
  padding-bottom:clamp(40px,5vw,64px);
}
.foot__brand{display:flex;flex-direction:column;gap:18px;max-width:32ch}
.foot__mark{width:104px;height:auto;opacity:.9}
.foot__tag{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:26ch}
.foot__col h3{
  margin:0 0 16px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
}
.foot__col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.foot__col a{
  font-size:.88rem;color:var(--muted);transition:color .25s var(--ease);
  display:inline-block;
}
.foot__col a:hover{color:var(--paper)}
.foot__legal{
  border-top:1px solid var(--line-soft);padding-block:clamp(26px,3.4vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:24px clamp(28px,4vw,60px);
  align-items:start;
}
.foot__disc{
  margin:0;max-width:82ch;font-family:var(--mono);font-size:var(--fs-micro);line-height:1.85;
  letter-spacing:.02em;color:var(--dim);
}
.foot__disc b{color:var(--muted);font-weight:400}
.foot__ph{color:var(--faint)}
.foot__meta{
  display:flex;flex-direction:column;gap:8px;text-align:right;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--faint);
}

/* --- 12 motion engine ---------------------------------------------------- */

[data-rise]{opacity:0;transform:translateY(var(--rise-y,20px))}
[data-rise].is-in{
  opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);
  transition-delay:var(--rise-d,0s);
}

[data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000)}
[data-draw].is-in{stroke-dashoffset:0;transition:stroke-dashoffset var(--draw-t,1.4s) var(--ease-io) var(--draw-d,0s)}

/* the wipe is a curtain, not a clip on the element itself — a clipped
   element reports zero intersection and would never reveal. */
[data-wipe]{position:relative}
[data-wipe]::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--wipe-bg,var(--surface));transform-origin:100% 50%;
}
[data-wipe].is-in::after{transform:scaleX(0);transition:transform 1.1s var(--ease-io) var(--rise-d,0s)}

/* --- 13 responsive ------------------------------------------------------- */

@media (max-width:1080px){
  .foot__top{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr));row-gap:40px}
  .foot__brand{grid-column:1 / -1;max-width:none}
}

@media (max-width:960px){
  .topnav{display:none}
  .topacts__quiet{display:none}
  .burger{display:grid}
  .ctaband__in{grid-template-columns:1fr;align-items:start;gap:32px}
}

@media (max-width:760px){
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__legal{grid-template-columns:1fr}
  .foot__meta{text-align:left;flex-direction:row;flex-wrap:wrap;gap:14px}
}

@media (max-width:640px){
  :root{--tick-off:11px}
  .brand__name{font-size:.82rem}
  .brand__mark{width:26px}
  /* every cell is explicit: a definite grid-row with an auto column would
     otherwise claim column 1 before the auto-placed items get there. */
  .route a,.route button{grid-template-columns:minmax(0,1fr) 30px;row-gap:6px;padding:20px 0}
  .route__name{grid-column:1;grid-row:1}
  .route__note{grid-column:1;grid-row:2}
  .route__go{grid-column:2;grid-row:1 / span 2}
  .sechead{padding-bottom:20px}
  .capture{max-width:none}
}

@media (max-width:430px){
  .foot__top{grid-template-columns:1fr;row-gap:34px}
}

@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}
  .menu.is-open .menu__list a,.menu.is-open .menu__thesis{opacity:1;transform:none}
  [data-wipe]::after{transform:scaleX(0)}
  [data-draw]{stroke-dashoffset:0}
}