/* ==========================================================================
   ToyTrade — design system
   Navy/gold heritage-trade shell. Toy colour used as pigment, never as theme.
   ========================================================================== */

/* --- 1. Tokens --------------------------------------------------------- */
:root{
  /* navy */
  --navy-900:#0A1220; --navy-800:#111E36; --navy-700:#1A2A4F;
  --navy-600:#294169; --navy-500:#41598A;
  /* gold */
  --gold-100:#F6EFDF; --gold-300:#E2CB96; --gold-500:#C9A55C;
  --gold-600:#A9863F; --gold-700:#7E6229;
  /* toy primaries, pulled back to enamel paint rather than pure hue */
  --toy-red:#D2402E; --toy-amber:#E9A426; --toy-green:#2E8460; --toy-blue:#2B6CB0;
  /* warm paper neutrals */
  --paper:#FBF9F5; --paper-2:#F4F0E8; --white:#fff;
  --line:#E5DFD3; --line-strong:#D2C9B7;
  --ink:#141A26; --ink-2:#4A5468; --ink-3:#77809A;

  /* semantic */
  --bg:var(--paper); --surface:var(--white); --surface-sunken:var(--paper-2);
  --border:var(--line); --text-primary:var(--navy-700); --text-body:var(--ink-2);
  --text-muted:var(--ink-3); --accent:var(--gold-500);

  /* type */
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* space */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --s8:64px;--s9:96px;--s10:128px;
  --r-xs:3px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;

  --sh-1:0 1px 2px rgba(16,28,50,.06);
  --sh-2:0 2px 4px rgba(16,28,50,.05),0 8px 20px -6px rgba(16,28,50,.09);
  --sh-3:0 4px 8px rgba(16,28,50,.06),0 20px 44px -12px rgba(16,28,50,.16);

  --wrap:1240px; --wrap-narrow:760px; --gutter:24px;

  /* motion */
  --ease-quiet:cubic-bezier(.33,1,.68,1);
  --ease-settle:cubic-bezier(.16,1,.3,1);
  --ease-symmetric:cubic-bezier(.65,0,.35,1);
  --ease-exit:cubic-bezier(.55,0,1,.45);
  --dur-1:120ms;--dur-2:180ms;--dur-3:260ms;--dur-4:420ms;--dur-5:640ms;
  --stagger:70ms;
}

.section--dark{
  --bg:var(--navy-800); --surface:#16253F; --surface-sunken:var(--navy-900);
  --border:rgba(201,165,92,.22); --text-primary:#fff;
  --text-body:#C3CCDE; --text-muted:#8794AC; --accent:var(--gold-300);
}

/* --- 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--text-body);
  font:400 1rem/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--toy-blue);outline-offset:3px;border-radius:var(--r-xs)}
.section--dark :focus-visible{outline-color:var(--gold-300)}
::selection{background:var(--gold-300);color:var(--navy-900)}

/* fine paper grain over the whole page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute;left:var(--s4);top:-64px;z-index:100;
  background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  transition:top var(--dur-2) var(--ease-quiet);
}
.skip:focus{top:var(--s4)}

/* --- 3. Type ----------------------------------------------------------- */
h1,h2,h3{font-family:var(--f-display);color:var(--text-primary);text-wrap:balance}
h4{font-family:var(--f-body);color:var(--text-primary);text-wrap:balance}
p{text-wrap:pretty}

.d-xl{font:700 clamp(2.6rem,5.6vw,4.25rem)/1.04 var(--f-display);letter-spacing:-.026em;
      font-variation-settings:'SOFT' 40,'WONK' 1;color:var(--text-primary);text-wrap:balance}
.d-l{font:700 clamp(2.1rem,4.2vw,3.1rem)/1.09 var(--f-display);letter-spacing:-.022em;
     font-variation-settings:'SOFT' 40}
h2{font:600 clamp(1.75rem,3vw,2.35rem)/1.16 var(--f-display);letter-spacing:-.018em}
h3{font:600 1.375rem/1.26 var(--f-display);letter-spacing:-.012em}
h4{font-weight:600;font-size:1.0625rem;line-height:1.4;letter-spacing:-.008em}

.lede{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.62;color:var(--text-body);max-width:56ch}
.sm{font-size:.9375rem;line-height:1.6}
.caption{font-size:.8125rem;line-height:1.45;color:var(--text-muted)}
.eyebrow{
  font:600 .75rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-600);display:block;
}
.section--dark .eyebrow{color:var(--gold-300)}

/* the wonk-italic emphasis — one word per major headline, the whole playful quota */
.wonk{
  font-style:italic;color:var(--gold-600);
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.section--dark .wonk{color:var(--gold-300)}

/* four-segment hairline: the logo palette as a repeating system mark */
.rule4{display:flex;width:96px;height:2px;margin:var(--s4) 0 var(--s5)}
.rule4 span{flex:1}
.rule4 span:nth-child(1){background:var(--toy-red)}
.rule4 span:nth-child(2){background:var(--toy-amber)}
.rule4 span:nth-child(3){background:var(--toy-green)}
.rule4 span:nth-child(4){background:var(--toy-blue)}
.rule4--c{margin-inline:auto}

/* --- 4. Layout --------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(72px,10vw,128px);background:var(--bg);color:var(--text-body);position:relative}
.section--sunken{--bg:var(--paper-2)}
.section-head{max-width:660px;margin-bottom:var(--s8)}
.section-head--c{margin-inline:auto;text-align:center}
.section-head p{margin-top:var(--s4)}

.grid{display:grid;gap:var(--s5)}
@media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:560px) and (max-width:899px){.g-4{grid-template-columns:repeat(2,1fr)}}

/* container stripe — used exactly twice per page */
.stripe{
  height:6px;border:0;margin:0;
  background:linear-gradient(90deg,var(--toy-red) 0 25%,var(--toy-amber) 0 50%,
             var(--toy-green) 0 75%,var(--toy-blue) 0);
}

/* --- 5. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:13px 24px;border-radius:var(--r-sm);border:1px solid transparent;
  font:600 .9375rem/1.2 var(--f-body);letter-spacing:-.005em;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur-2) var(--ease-quiet),
             border-color var(--dur-2) var(--ease-quiet),
             color var(--dur-2) var(--ease-quiet),
             translate var(--dur-2) var(--ease-quiet);
}
.btn:active{translate:0 1px;transition-duration:var(--dur-1)}
.btn__arrow{transition:translate var(--dur-2) var(--ease-quiet)}
.btn:hover .btn__arrow{translate:3px 0}

.btn--primary{background:var(--navy-700);color:#fff}
.btn--primary:hover{background:var(--navy-800)}

/* gold sheen — the one showy moment, reserved for the main CTA */
.btn--gold{
  background:linear-gradient(135deg,#D9B872 0%,var(--gold-500) 42%,#B98F45 100%);
  color:var(--navy-900);
}
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;translate:-120% 0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.42) 50%,transparent 60%);
  transition:translate 620ms var(--ease-settle);
}
.btn--gold:hover::after{translate:120% 0}

.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--text-primary)}
.btn--ghost:hover{border-color:var(--navy-700);background:rgba(26,42,79,.04)}
.section--dark .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.section--dark .btn--ghost:hover{border-color:var(--gold-300);background:rgba(255,255,255,.06)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* text link with the crane-cable underline */
.tlink{
  display:inline-flex;align-items:center;gap:var(--s2);position:relative;
  font-weight:600;color:var(--text-primary);padding-bottom:2px;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-500);
  scale:0 1;transform-origin:left;transition:scale 220ms var(--ease-quiet);
}
.tlink:hover::after{scale:1 1}
.tlink svg{transition:translate var(--dur-2) var(--ease-quiet)}
.tlink:hover svg{translate:3px 0}

/* --- 6. Nav ------------------------------------------------------------ */
#nav-sentinel{position:absolute;top:0;height:96px;width:1px;pointer-events:none}
.nav{position:fixed;inset:0 0 auto;height:84px;z-index:50;isolation:isolate}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,249,245,.86);border-bottom:1px solid var(--line);
  transform-origin:top;scale:1 1;opacity:0;
  transition:scale var(--dur-3) var(--ease-quiet),opacity var(--dur-3) var(--ease-quiet);
}
.nav.is-stuck::before{scale:1 .78;opacity:1;backdrop-filter:blur(14px) saturate(140%)}
.nav__row{
  height:84px;display:flex;align-items:center;gap:var(--s6);
  transition:translate var(--dur-3) var(--ease-quiet);
}
.nav.is-stuck .nav__row{translate:0 -9px}
.nav__logo{
  display:flex;align-items:center;gap:10px;margin-right:auto;
  transform-origin:left center;transition:scale var(--dur-3) var(--ease-quiet);
}
.nav.is-stuck .nav__logo{scale:.84}
/* wide, tight-cropped mark — sized by height so the ship fills the bar */
.nav__mark{height:64px;width:auto;object-fit:contain}
.logo-word{
  font:700 1.75rem/1 var(--f-display);letter-spacing:-.02em;color:var(--navy-700);
  font-variation-settings:'SOFT' 40;white-space:nowrap;
}
/* on narrow screens the mark stays large; the menu button drops to icon-only
   so the logo + wordmark + button still fit across 390px */
@media(max-width:560px){
  .nav,.nav__row{height:96px}
  #nav-sentinel{height:108px}
  .jump{top:96px}
  .nav.is-stuck ~ main .jump{top:75px}
  .nav__mark{height:70px}
  .logo-word{font-size:1.625rem}
  .nav__burger{padding:11px}
  .nav__burger-label{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .nav__burger svg{width:20px;height:20px}
}
.logo-word i{font-style:normal}
.logo-word i:nth-child(1){color:var(--toy-red)}
.logo-word i:nth-child(2){color:var(--toy-amber)}
.logo-word i:nth-child(3){color:var(--toy-green)}
.nav__links{display:none;gap:var(--s6);align-items:center}
@media(min-width:940px){.nav__links{display:flex}}
.nav__links a{
  position:relative;font-size:.9375rem;font-weight:500;color:var(--navy-700);padding-block:6px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-500);
  scale:0 1;transform-origin:left;transition:scale 220ms var(--ease-quiet);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{scale:1 1}
.nav__cta{display:none}
@media(min-width:940px){.nav__cta{display:inline-flex}}

.nav__burger{
  display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;color:var(--navy-700);
  font:600 .875rem/1 var(--f-body);
}
@media(min-width:940px){.nav__burger{display:none}}
.nav__burger svg{width:16px;height:16px}

/* mobile drawer — popover + @starting-style, no JS choreography */
.menu{
  position:fixed;inset:0 0 0 auto;width:min(88vw,400px);max-height:100dvh;border:0;padding:0;
  background:var(--navy-900);color:#fff;translate:100% 0;overflow:auto;
  transition:translate var(--dur-4) var(--ease-settle),
             overlay var(--dur-4) allow-discrete,
             display var(--dur-4) allow-discrete;
}
.menu:popover-open{translate:0 0;will-change:translate}
@starting-style{.menu:popover-open{translate:100% 0}}
.menu::backdrop{
  background:rgba(4,10,22,.6);opacity:0;
  transition:opacity var(--dur-3) var(--ease-quiet),
             overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete;
}
.menu:popover-open::backdrop{opacity:1}
@starting-style{.menu:popover-open::backdrop{opacity:0}}
.menu__head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s5);border-bottom:1px solid rgba(201,165,92,.22)}
.menu__close{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;font:600 .875rem/1 var(--f-body)}
.menu ul{padding:var(--s5);display:grid;gap:var(--s1)}
.menu li{opacity:0;translate:0 14px;transition:opacity 120ms var(--ease-exit)}
.menu:popover-open li{
  opacity:1;translate:0 0;
  transition:opacity 380ms var(--ease-settle) calc(120ms + var(--i,0)*60ms),
             translate 380ms var(--ease-settle) calc(120ms + var(--i,0)*60ms);
}
.menu li:nth-child(1){--i:0}.menu li:nth-child(2){--i:1}.menu li:nth-child(3){--i:2}
.menu li:nth-child(4){--i:3}.menu li:nth-child(5){--i:4}.menu li:nth-child(6){--i:5}
.menu li a{display:block;padding:14px 4px;font:600 1.25rem/1.2 var(--f-display);
  border-bottom:1px solid rgba(255,255,255,.08)}
.menu .btn{margin:0 var(--s5) var(--s6);width:calc(100% - var(--s5)*2)}

/* --- 7. Hero ----------------------------------------------------------- */
.hero{position:relative;padding-top:150px;padding-bottom:clamp(64px,8vw,104px);overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);
}
.hero__inner{display:grid;gap:var(--s8);align-items:center}
@media(min-width:1000px){
  .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s9)}
}
.hero h1{margin-block:var(--s4) var(--s5)}
.hero .lede{margin-bottom:var(--s7)}

/* masked line rise — transform-only so the LCP text is never opacity:0 */
.ln{display:block;overflow:hidden}
.ln>span{display:block;animation:line-rise var(--dur-5) var(--ease-settle) both}
.ln:nth-child(2)>span{animation-delay:90ms}
.ln:nth-child(3)>span{animation-delay:170ms}
@keyframes line-rise{from{translate:0 105%}to{translate:0 0}}

/* the berthing line: momentum arriving and decelerating against a stop */
.berth{
  position:relative;height:1px;margin-block:var(--s7) var(--s5);container-type:inline-size;
  background:linear-gradient(90deg,var(--gold-500) 0%,rgba(201,165,92,.14) 100%);
  transform-origin:left center;
  animation:berth-in 1100ms cubic-bezier(.12,.86,.2,1) 220ms both;
}
@keyframes berth-in{from{scale:0 1}to{scale:1 1}}
.berth i{
  position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;
  background:#E8C978;box-shadow:0 0 12px 2px rgba(232,201,120,.45);
  animation:berth-dot 1100ms cubic-bezier(.12,.86,.2,1) 220ms both;
}
@keyframes berth-dot{from{translate:0 0}to{translate:calc(100cqw - 5px) 0}}

.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7)}
.hero__meta div{max-width:200px}
.hero__meta dt{font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:8px}
.hero__meta dd{margin:0;font-size:.9375rem;line-height:1.5;color:var(--text-body)}

/* hero visual: two slow columns of real stock — the harbour in motion */
.ticker{
  display:none;position:relative;height:min(560px,72vh);gap:var(--s4);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
}
@media(min-width:1000px){.ticker{display:grid;grid-template-columns:1fr 1fr}}
.ticker__col{overflow:hidden;position:relative}
.ticker__run{display:grid;gap:var(--s4);animation:ticker-up 64s linear infinite}
.ticker__col:nth-child(2) .ticker__run{animation-duration:80s;animation-direction:reverse}
@keyframes ticker-up{from{translate:0 0}to{translate:0 -50%}}
.ticker:hover .ticker__run{animation-play-state:paused}
.ticker__tile{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  aspect-ratio:1;padding:var(--s4);display:grid;place-items:center;
}
.ticker__tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* --- 7b. In-page jump nav (the About page absorbs what used to be four) --- */
.jump{
  border-block:1px solid var(--border);background:var(--surface);
  position:sticky;top:84px;z-index:20;
}
.nav.is-stuck ~ main .jump{top:65px}
.jump__inner{
  display:flex;gap:var(--s6);overflow-x:auto;scrollbar-width:none;
  padding-block:var(--s4);
}
.jump__inner::-webkit-scrollbar{display:none}
.jump a{
  position:relative;white-space:nowrap;font-size:.875rem;font-weight:500;
  color:var(--text-body);padding-block:4px;
}
.jump a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-500);
  scale:0 1;transform-origin:left;transition:scale 220ms var(--ease-quiet);
}
.jump a:hover{color:var(--navy-700)}
.jump a:hover::after{scale:1 1}
/* anchors must clear the fixed header */
[id]{scroll-margin-top:150px}

/* --- 8. Cards ---------------------------------------------------------- */
.card{
  position:relative;isolation:isolate;contain:layout paint;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;translate:0 0;
  transition:translate var(--dur-3) var(--ease-quiet),border-color var(--dur-3) var(--ease-quiet);
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  box-shadow:var(--sh-2);transition:opacity var(--dur-3) var(--ease-quiet);
}
@media(hover:hover) and (pointer:fine){
  .card:hover{translate:0 -3px;border-color:var(--line-strong)}
  .card:hover::after{opacity:1}
}

/* PRODUCT TILE — every image renders at an identical size, whatever the source.
   Fixed 1:1 box + contain + identical padding is what guarantees it. */
.p-card__media{
  aspect-ratio:1;background:var(--white);padding:var(--s5);
  display:grid;place-items:center;position:relative;border-bottom:1px solid var(--border);
}
.p-card__media img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  mix-blend-mode:multiply;scale:1;
  transition:scale var(--dur-5) var(--ease-settle),opacity 320ms var(--ease-quiet);
}
@media(hover:hover) and (pointer:fine){.card:hover .p-card__media img{scale:1.045}}
.p-card__body{padding:var(--s4) var(--s5) var(--s5)}
.p-card__body h3{font:600 1rem/1.35 var(--f-body);color:var(--navy-700);letter-spacing:-.008em}
.chip{
  display:inline-block;font:600 .6875rem/1 var(--f-body);letter-spacing:.06em;
  text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);margin-bottom:10px;
  white-space:nowrap;
}
@media(max-width:520px){
  .p-card__media{padding:var(--s3)}
  .p-card__body{padding:var(--s3) var(--s4) var(--s4)}
  .p-card__body h3{font-size:.875rem}
  .chip{font-size:.625rem;padding:5px 8px}
}
.chip[data-cat="Robotics & RC"]{background:rgba(43,108,176,.1);color:#245C97}
.chip[data-cat="Role Play"]{background:rgba(210,64,46,.1);color:#A83324}
.chip[data-cat="Learning"]{background:rgba(46,132,96,.11);color:#256B4E}
.chip[data-cat="STEM & Coding"]{background:rgba(233,164,38,.15);color:#8A6110}
.chip[data-cat="Ride-On"]{background:rgba(26,42,79,.08);color:var(--navy-700)}
.p-card__ref{margin-top:10px;font-size:.75rem;letter-spacing:.06em;color:var(--text-muted);
  font-variant-numeric:tabular-nums}

/* feature card */
.f-card{padding:var(--s6);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);position:relative}
.f-card__icon{
  width:44px;height:44px;border-radius:var(--r-sm);background:var(--gold-100);
  display:grid;place-items:center;margin-bottom:var(--s5);color:var(--gold-700);
}
.section--dark .f-card__icon{background:rgba(201,165,92,.14);color:var(--gold-300)}
.f-card__icon svg{width:22px;height:22px}
.f-card h3{margin-bottom:10px;font-size:1.1875rem}
.f-card p{font-size:.9375rem;line-height:1.62}
.f-card::after{
  content:"";position:absolute;left:var(--s6);bottom:var(--s6);height:2px;width:0;
  background:var(--gold-500);transition:width 300ms var(--ease-quiet);
}
.f-card--rule{padding-bottom:calc(var(--s6) + var(--s5))}
.f-card--rule:hover::after{width:56px}

/* the order-size ladder */
.ladder__item{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s6) var(--s5) var(--s5);
  transition:translate var(--dur-3) var(--ease-quiet),border-color var(--dur-3) var(--ease-quiet);
}
@media(hover:hover){.ladder__item:hover{translate:0 -3px;border-color:var(--line-strong)}}
.ladder__bar{display:flex;gap:3px;margin-bottom:var(--s5)}
.ladder__bar span{height:4px;flex:1;background:var(--line);border-radius:2px}
.ladder__item:nth-child(1) .ladder__bar span:nth-child(-n+1),
.ladder__item:nth-child(2) .ladder__bar span:nth-child(-n+2),
.ladder__item:nth-child(3) .ladder__bar span:nth-child(-n+3),
.ladder__item:nth-child(4) .ladder__bar span:nth-child(-n+4){background:var(--gold-500)}
.ladder__item h3{font-size:1.125rem;margin-bottom:8px}
.ladder__item p{font-size:.9375rem;line-height:1.6}

/* numbered process steps */
.steps{counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding-left:64px;
  padding-block:var(--s5);border-top:1px solid var(--border);
}
.steps li:last-child{border-bottom:1px solid var(--border)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:var(--s5);
  font:600 .875rem/1 var(--f-body);letter-spacing:.08em;color:var(--gold-600);
  font-variant-numeric:tabular-nums;
}
.steps h3{font-size:1.125rem;margin-bottom:6px}
.steps p{font-size:.9375rem;max-width:60ch}

/* checklist */
.checks{display:grid;gap:var(--s3)}
/* normal flow, not flex: a flex context would blockify inline links inside the
   text and break them onto their own line */
.checks li{position:relative;padding-left:32px;font-size:.9375rem;line-height:1.6}
.checks svg{position:absolute;left:0;top:4px;width:19px;height:19px;color:var(--gold-600)}
.section--dark .checks svg{color:var(--gold-300)}

/* split media block */
.split{display:grid;gap:var(--s8);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr;gap:var(--s9)}
  .split--flip .split__media{order:-1}}
.split__media{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--surface-sunken);
}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
@media(min-width:920px){.split__media img{aspect-ratio:1}}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--navy-900);
  padding-block:clamp(72px,9vw,112px);text-align:center;color:#fff;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%,rgba(201,165,92,.16),transparent 62%);
}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta-band p{color:#C3CCDE;max-width:56ch;margin:var(--s5) auto var(--s7)}
.cta-band .btn-row{justify-content:center}

/* --- 9. Products page -------------------------------------------------- */
.notice{
  display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--gold-100);border:1px solid var(--gold-300);border-radius:var(--r-md);
  padding:var(--s5);margin-bottom:var(--s7);
}
.notice svg{flex:none;width:20px;height:20px;color:var(--gold-700);margin-top:2px}
.notice p{font-size:.9375rem;line-height:1.6;color:#5F4A18}
.notice strong{color:#3F3008}

.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7)}
.filters button{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:9px 18px;cursor:pointer;font:500 .875rem/1 var(--f-body);color:var(--text-body);
  transition:background var(--dur-2) var(--ease-quiet),border-color var(--dur-2) var(--ease-quiet),
             color var(--dur-2) var(--ease-quiet);
}
.filters button:hover{border-color:var(--line-strong)}
.filters button[aria-pressed="true"]{
  background:var(--navy-700);border-color:var(--navy-700);color:#fff;font-weight:600;
}
.filters__count{margin-left:auto;align-self:center;font-size:.875rem;color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.p-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.p-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.p-grid{grid-template-columns:repeat(4,1fr)}}
.p-grid>li{display:flex}
.p-grid .card{width:100%}
.is-hidden{display:none !important}

/* --- 10. Forms --------------------------------------------------------- */
.form{display:grid;gap:var(--s5)}
.field{display:grid;gap:8px}
.field label{font:600 .875rem/1.3 var(--f-body);color:var(--navy-700)}
.field .hint{font-size:.8125rem;color:var(--text-muted)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;background:var(--white);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:.9375rem;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease-quiet),box-shadow var(--dur-2) var(--ease-quiet);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(41,65,105,.12);
}
.field--opt label::after{content:" (optional)";font-weight:400;color:var(--text-muted)}
.form__row{display:grid;gap:var(--s5);align-items:start}
@media(min-width:620px){.form__row{grid-template-columns:1fr 1fr}}
/* inline links inside body copy shouldn't inherit the flex gap */
.checks .tlink,p .tlink{display:inline;gap:0}
.form__note{font-size:.8125rem;color:var(--text-muted);line-height:1.55}

/* --- 11. Footer -------------------------------------------------------- */
.footer{background:var(--navy-900);color:#C3CCDE;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%,rgba(201,165,92,.1),transparent 62%);
}
.footer>*{position:relative}
.footer__top{border-top:2px solid var(--gold-500);padding-block:var(--s9) var(--s8);
  display:grid;gap:var(--s8)}
@media(min-width:820px){
  .footer__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s7)}
  .footer__top--3{grid-template-columns:1.8fr 1fr 1.4fr}
}
.footer h4{color:#fff;font:600 .75rem/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:var(--s5)}
.footer ul{display:grid;gap:12px}
.footer a{font-size:.9375rem;color:#C3CCDE;transition:color var(--dur-2) var(--ease-quiet)}
.footer a:hover{color:var(--gold-300)}
.footer__brand .logo-word{color:#fff;font-size:1.75rem}
.footer__brand p{margin-top:var(--s4);font-size:.9375rem;line-height:1.62;max-width:34ch}
.footer__mark{height:72px;width:auto;object-fit:contain}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;
  font-size:.8125rem;color:#8794AC;
}
.footer__bar a{font-size:.8125rem;color:#8794AC}
.footer__legal{margin-right:auto}

/* --- 12. Reveal -------------------------------------------------------- */
@supports (animation-timeline:view()){
  .sda [data-reveal]{
    animation:reveal-up var(--dur-4) var(--ease-settle) both;
    animation-timeline:view();animation-range:entry 6% entry 50%;
  }
  .sda [data-stagger]>[data-reveal]{
    animation-range:entry calc(6% + var(--i,0)*5%) entry calc(50% + var(--i,0)*5%);
  }
}
.js:not(.sda) [data-reveal]{
  opacity:0;translate:0 22px;
  transition:opacity var(--dur-4) var(--ease-settle),translate var(--dur-4) var(--ease-settle);
  transition-delay:calc(var(--i,0)*var(--stagger));
}
.js:not(.sda) [data-reveal].is-in{opacity:1;translate:0 0}
@keyframes reveal-up{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes reveal-in{from{opacity:0}to{opacity:1}}

[data-stagger]>*{--i:0}
@media(min-width:700px){[data-stagger]>:nth-child(3n+2){--i:1}[data-stagger]>:nth-child(3n){--i:2}}
@media(min-width:1040px){
  [data-stagger]>:nth-child(4n+1){--i:0}[data-stagger]>:nth-child(4n+2){--i:1}
  [data-stagger]>:nth-child(4n+3){--i:2}[data-stagger]>:nth-child(4n+4){--i:3}
}

/* below-the-fold sections skip render work until near the viewport */
.section--defer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* --- 13. Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
    animation-timeline:none !important;
  }
  /* restore gentle fades — a hard 0ms cut reads as broken, not calm */
  [data-reveal]{
    opacity:0;translate:0 !important;transition-delay:0ms !important;
    animation:reveal-in 180ms var(--ease-quiet) both !important;
    animation-timeline:view() !important;animation-range:entry 10% entry 40% !important;
  }
  .js:not(.sda) [data-reveal]{transition:opacity 180ms var(--ease-quiet) !important}
  .js:not(.sda) [data-reveal].is-in{opacity:1}
  .ticker__run{animation:none !important}
  .berth{animation:none;scale:1 1}
  .berth i{display:none}
  .ln>span{animation:none}
  .menu{transition:opacity 150ms var(--ease-quiet),overlay 150ms allow-discrete,
    display 150ms allow-discrete !important;translate:0 !important;opacity:0}
  .menu:popover-open{opacity:1}
  @starting-style{.menu:popover-open{opacity:0;translate:0}}
}

/* --- 14. Print --------------------------------------------------------- */
@media print{
  .nav,.menu,.cta-band,.ticker,body::before{display:none !important}
  body{background:#fff}
  .section{padding-block:24px}
}