/* NYAS in the ZeBeyond layout.
   What was taken from the reference, deliberately:
     - near black ground with ONE soft coloured glow, top right
     - a heading where the second word carries the accent colour
     - a filter rail on the left and a dense card grid on the right,
       separated by hairlines rather than gaps
     - cards: light line art, small tag chips, short title, accent "read" link
     - a pill CTA in the nav, accent coloured
   What is ours: the archway, the orange to red gradient, the mint, Baloo 2.
   Spacing follows the reference: 24px card padding, 1px rules, 64/96/128
   section rhythm.                                                        */

.zb{background:var(--ink);color:var(--on-dark)}

/* ---------------- hero: three slides -------------------------------- */
.hero3{position:relative;overflow:clip;padding:clamp(34px,5vw,64px) clamp(18px,3vw,40px) clamp(40px,6vw,76px)}
.hero3__glow{
  position:absolute;right:-16%;top:-52%;width:min(1100px,104vw);aspect-ratio:1;
  border-radius:999px;pointer-events:none;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle,rgba(255,83,3,.8),transparent 62%);
  transition:background .5s ease,opacity .5s ease;
}
[data-slide="2"] .hero3__glow{background:radial-gradient(circle,rgba(70,252,171,.5),transparent 62%);opacity:.4}
[data-slide="3"] .hero3__glow{background:radial-gradient(circle,rgba(255,83,3,.7),transparent 62%);opacity:.46}

/* three-way switch */
.switch3{
  position:relative;isolation:isolate;display:inline-flex;flex-wrap:wrap;
  padding:5px;border-radius:999px;margin:0 auto clamp(30px,4.5vw,52px);
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.switch3 button{
  position:relative;z-index:1;border:0;cursor:pointer;background:transparent;
  min-height:44px;padding:.55em 1.3em;border-radius:999px;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-label);
  color:var(--on-dark);transition:color .3s ease;white-space:nowrap;
}
.switch3 button[aria-selected="true"]{color:#06110C}
.switch3__knob{
  position:absolute;z-index:0;top:5px;bottom:5px;left:5px;border-radius:999px;
  background:var(--orange);
  transition:transform .42s cubic-bezier(.65,0,.35,1),width .42s cubic-bezier(.65,0,.35,1),background .42s ease;
}
[data-slide="2"] .switch3__knob{background:var(--mint)}
/* the slides */
.switch3wrap{display:flex;justify-content:center;position:relative;z-index:3}
.slides{position:relative;z-index:2}
.slide{display:grid;gap:clamp(26px,4vw,56px);align-items:center;
  animation:rise .5s cubic-bezier(.2,.7,.25,1) both}
/* an explicit display beats the hidden attribute, so say it again */
.slide[hidden]{display:none}
@media (min-width:900px){ .slide{grid-template-columns:1.05fr .95fr} }
@media (prefers-reduced-motion:reduce){ .slide{animation:none} }
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.slide h1{
  font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem);line-height:1;
  letter-spacing:var(--tr-display);margin:0 0 .5em;max-width:17ch;
}
/* the accent follows the slide: orange, mint, orange */
.slide h1 .m{color:var(--orange)}
[data-slide="2"] .slide h1 .m{color:var(--mint)}
.slide__lead{font-size:var(--t-lead);line-height:1.45;color:var(--on-dark);max-width:38ch;margin:0}

.slide__art{position:relative}
/* flush to the right edge of the window, not the padded container */
@media (min-width:900px){
  .slide__art{margin-right:calc(clamp(18px,3vw,40px) * -1)}
}
.slide__art img{width:100%;height:auto;display:block}

/* the photograph melts into the ground rather than sitting in a box */
.slide__art--photo img{
  aspect-ratio:1060/1024;object-fit:cover;object-position:center 12%;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,
      rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),
    linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,
      rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,
      rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,
      rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),
    linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,
      rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,
      rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%);
  mask-composite:intersect;
}

/* the line drawings get the same treatment, softer, so nothing floats in a
   rectangle. A glow behind them ties them to the slide's accent colour. */
.slide__art--art{position:relative}
.slide__art--art::before{
  content:"";position:absolute;inset:-18% -12%;z-index:0;border-radius:999px;
  background:radial-gradient(closest-side,rgba(70,252,171,.16),transparent 72%);
  filter:blur(28px);
}
[data-slide="3"] .slide__art--art::before{
  background:radial-gradient(closest-side,rgba(255,83,3,.18),transparent 72%);
}
.slide__art--art img{
  position:relative;z-index:1;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.8) 20%,#000 32%),
    linear-gradient(0deg,transparent 0%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.8) 16%,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.8) 20%,#000 32%),
    linear-gradient(0deg,transparent 0%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.8) 16%,#000 26%);
  mask-composite:intersect;
}

/* ---------------- full width ticker ---------------------------------- */
.ticker{
  overflow:hidden;border-block:1px solid rgba(255,255,255,.08);
  padding:18px 0;background:rgba(255,255,255,.02);
}
.ticker__track{
  display:flex;align-items:center;gap:clamp(36px,6vw,80px);width:max-content;
  animation:roll 46s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker img{height:26px;width:auto;opacity:.75;flex:none}
@keyframes roll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} }

/* ---------------- case studies, the reference grid -------------------- */
.cases{padding:clamp(56px,8vw,128px) clamp(18px,3vw,40px)}
.cases__head{margin:0 0 clamp(28px,4vw,48px)}
.cases__head h2{
  font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(2.3rem, 1.5rem + 3.9vw, 4.4rem);line-height:1;letter-spacing:var(--tr-display);margin:0 0 .3em;
}
.cases__head h2 .m{color:var(--mint)}
.cases__head p{margin:0;font-size:var(--t-lead);color:var(--on-dark-dim);max-width:52ch}

.cases__grid{display:grid;gap:0}
@media (min-width:900px){ .cases__grid{grid-template-columns:240px 1fr} }

.side{
  padding:24px 24px 24px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (min-width:900px){
  .side{border-bottom:0;border-right:1px solid rgba(255,255,255,.1);padding-bottom:0}
}
.side__h{
  font-size:var(--t-label);font-weight:600;color:#fff;margin:0 0 14px;
  letter-spacing:var(--tr-label);text-transform:uppercase;
}
.filt{display:flex;align-items:center;gap:11px;min-height:44px;cursor:pointer;color:var(--on-dark)}
.filt input{width:18px;height:18px;accent-color:var(--mint);cursor:pointer}
.filt span{font-size:var(--t-label)}
.filt:hover span{color:#fff}
.side__count{margin:14px 0 0;font-size:var(--t-label);color:var(--on-dark-dim)}

/* hairline grid, not gutters. this is what makes the reference read as a system */
.cards2{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  border-top:1px solid rgba(255,255,255,.1);
}
@media (min-width:600px){ .cards2{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .cards2{grid-template-columns:repeat(3,1fr)} }
.card{
  padding:24px;
  border-bottom:1px solid rgba(255,255,255,.1);
  border-right:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;
  transition:background .2s ease;
}
.card:hover{background:rgba(255,255,255,.035)}
.card__art{
  background:rgba(255,255,255,.04);border-radius:10px;
  padding:14px;margin:0 0 16px;
}
.card__art img{width:100%;height:auto;display:block}
.card__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  padding:.3em .6em;border-radius:6px;
  background:rgba(255,255,255,.08);color:var(--on-dark);
}
.chip--kind{background:rgba(70,252,171,.14);color:var(--mint)}
.chip--pending{background:rgba(255,83,3,.16);color:#FF8A4D}
.card__title{
  font-family:var(--f-head);font-weight:700;font-size:var(--t-lead);color:#fff;
  margin:0 0 .4em;letter-spacing:-.02em;line-height:1.15;
}
.card__body{margin:0 0 16px;font-size:var(--t-label);line-height:1.5;color:var(--on-dark-dim);flex:1}
.card__link{
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-size:var(--t-label);font-weight:600;color:var(--mint);
}
.card__link span{transition:transform .2s ease}
.card__link:hover span{transform:translateX(4px)}
.card__link--off{color:var(--on-dark-dim);font-weight:500;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-label)}
.card[hidden]{display:none}

/* ---------------- close ---------------------------------------------- */
.close{
  padding:clamp(56px,8vw,128px) clamp(18px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.1);
}
.close h2{
  font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(2.3rem, 1.5rem + 3.9vw, 4.4rem);line-height:1;letter-spacing:var(--tr-display);
  margin:0 0 .4em;max-width:16ch;
}
.close h2 .m{color:var(--mint)}
.close p{margin:0 0 clamp(26px,3.5vw,40px);font-size:var(--t-lead);color:var(--on-dark);max-width:46ch}

.foot2{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:28px clamp(18px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.08);
}
.foot2 small{font-size:var(--t-label);color:var(--on-dark-dim);line-height:1.6}

/* ---------------- the ticker gets a name ------------------------------ */
.tickerwrap{padding-top:clamp(18px,3vw,34px)}
.ticker__title{
  margin:0 0 clamp(12px,2vw,20px);text-align:center;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-dark-dim);
}

/* ---------------- possibilities --------------------------------------
   One question per row, because an owner does not browse services, they
   arrive with a sentence already in their head. The departments are the
   filter. Every question is a real link in the HTML whether its
   department is showing or not, so a crawler sees all of them.
   -------------------------------------------------------------------- */
.poss{padding:clamp(56px,8vw,120px) clamp(18px,3vw,40px) clamp(40px,6vw,80px);position:relative;overflow:clip}
.poss__head{max-width:62rem;margin:0 auto clamp(26px,4vw,44px)}
.poss__head h2{font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(2.3rem, 1.5rem + 3.9vw, 4.4rem);line-height:1;letter-spacing:var(--tr-display);margin:0 0 .3em;;margin:0 0 .4em}
.poss__head h2 .m{color:var(--mint)}
.poss__head p{margin:0;color:var(--on-dark);max-width:52ch;font-size:var(--t-lead);line-height:1.5}

/* the department rail: a horizontal scroller on a phone, a row on a desk */
.depts{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  max-width:62rem;margin:0 auto clamp(22px,3vw,34px);
  padding-bottom:4px;-webkit-overflow-scrolling:touch;
}
.depts::-webkit-scrollbar{display:none}
.dept{
  flex:none;min-height:var(--tap);display:inline-flex;align-items:center;gap:9px;
  padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:var(--on-dark);font:inherit;font-family:var(--f-body);font-weight:600;
  font-size:var(--t-label);white-space:nowrap;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.dept:hover{background:rgba(255,255,255,.12)}
.dept[aria-selected="true"]{background:var(--mint);color:var(--ink);box-shadow:none}
.dept__n{
  font-variant-numeric:tabular-nums;font-size:.8125rem;opacity:.65;
}

/* the answer rows */
.qs{list-style:none;margin:0 auto;padding:0;max-width:62rem;
    border-top:1px solid rgba(255,255,255,.12)}
.qs li[hidden]{display:none}
.q{
  display:flex;align-items:center;gap:18px;
  padding:clamp(18px,2.6vw,26px) 2px;min-height:var(--tap);
  border-bottom:1px solid rgba(255,255,255,.12);
  animation:qin .34s cubic-bezier(.2,.7,.25,1) both;
}
.q__txt{
  flex:1;font-family:var(--f-head);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem);line-height:1.25;color:#fff;
}
a.q .q__txt{transition:color .2s ease}
a.q:hover .q__txt{color:var(--mint)}
.q__go{
  flex:none;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font-size:1rem;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
a.q:hover .q__go{background:var(--mint);color:var(--ink);transform:translateX(3px)}
.q--soon{cursor:default}
.q--soon .q__txt{color:var(--on-dark)}
.q__soon{
  flex:none;font-family:var(--f-body);font-weight:600;font-size:.8125rem;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-dark-dim);
}
/* stagger, so the list arrives rather than snapping */
.q{animation-delay:calc(var(--i,0) * 45ms)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .q{animation:none} }

/* ---------------- hero slide 1: the founder's words, as a quote ---------- */
.slide h1.long{
  font-size:clamp(1.95rem,1.2rem + 3vw,3.5rem);line-height:1.04;max-width:21ch;
}
.slide__quote{margin:0;max-width:56ch}
.slide__quote p{
  margin:0;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.55;color:var(--on-dark);
  text-indent:-.45em;
}
.slide__quote footer{
  margin-top:16px;font-size:var(--t-label);color:var(--on-dark-dim);line-height:1.4;
}
.slide__quote footer b{color:#fff;font-weight:600}
.slide .actions{margin-top:clamp(20px,2.6vw,30px)}

/* the sticky bar must not cover where an in page link lands */
#main,#cases,#possibilities,#book,#services{scroll-margin-top:72px}

/* footer links */
.foot2__links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.foot2__links a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-label);color:var(--on-dark)}
.foot2__links a:hover{color:var(--mint)}

.slide__quote p + p{text-indent:0;margin-top:.7em}

/* ---------------- hero: two even halves, text centred ---------------- */
.slide h1.long .ln{display:block;text-wrap:balance}
.slide h1.long{max-width:none;font-size:clamp(2.1rem,1.3rem + 3.2vw,3rem);line-height:1.06}
.hero3:not(.hero3--about) .slide__copy{text-align:center;margin:0 auto;width:100%}
.hero3:not(.hero3--about) .slide h1{margin-left:auto;margin-right:auto}
.hero3:not(.hero3--about) .slide__lead{margin-left:auto;margin-right:auto}
.hero3:not(.hero3--about) .slide .actions{justify-content:center}
.hero3:not(.hero3--about) .slide__art{display:flex;justify-content:center}
.hero3:not(.hero3--about) .slide__art img{max-width:600px}
@media (min-width:900px){
  .hero3:not(.hero3--about) .slide{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px)}
  .hero3:not(.hero3--about) .slide__art{margin-right:0}
  .hero3:not(.hero3--about) .slide h1:not(.long){max-width:none}
}
@media (min-width:1200px){
  .slide h1.long{font-size:clamp(2rem,2.8vw,3.4rem)}
  .slide h1.long .ln{white-space:nowrap}
}

/* the quote: no rule, no clutter. a hook, a body, a close */
.slide--lead .slide__quote{max-width:34rem;margin:clamp(22px,2.4vw,32px) auto 0;padding:0;border:0;text-align:center}
.slide--lead .slide__quote p{
  text-indent:0;margin:0 0 .85em;text-wrap:balance;
  font-size:clamp(1.1rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--on-dark);
}
.slide--lead .slide__quote p.q-hook{
  font-family:var(--f-head);font-weight:700;color:#fff;letter-spacing:-.01em;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem);line-height:1.3;margin-bottom:.75em;
}
.slide--lead .slide__quote p.q-end{color:#fff;font-weight:600;margin-bottom:0}
.slide--lead .slide__quote footer{margin-top:16px;text-align:center}
.slide--lead .actions{margin-top:clamp(22px,2.6vw,32px)}

/* the three toggles stay side by side on a phone, labels wrap inside each */
@media (max-width:700px){
  .switch3{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:520px;padding:4px}
  .switch3__knob{top:4px;bottom:4px;left:4px}
  .switch3 button{min-height:54px;padding:.35em .4em;font-size:.8125rem;line-height:1.15;white-space:normal;text-align:center;width:auto}
}

/* the photograph now sits inside its half, so its right edge fades too */
.hero3:not(.hero3--about) .slide__art--photo img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%),linear-gradient(270deg,transparent 0%,rgba(0,0,0,.35) 5%,rgba(0,0,0,.8) 12%,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%),linear-gradient(270deg,transparent 0%,rgba(0,0,0,.35) 5%,rgba(0,0,0,.8) 12%,#000 22%);
  -webkit-mask-composite:source-in,source-in;
  mask-composite:intersect,intersect;
}

/* a one line title can be bigger; paragraphs break evenly */
.slide h1.long.short{font-size:clamp(2.8rem,1.6rem + 4.4vw,5rem)}
@media (min-width:1200px){ .slide h1.long.short{font-size:clamp(3.2rem,4.4vw,5rem)} }
.hero3:not(.hero3--about) .slide__lead{text-wrap:balance}

/* ====================== HOME HERO: one slide, built for the first screen ====================== */
.hero3--home{padding:clamp(20px,3vw,44px) clamp(18px,3vw,40px) clamp(28px,4vw,52px)}
.hero3--home .slide{align-items:center}

/* phone: photo first, title overlapping its fade, button before the long quote */
@media (max-width:899px){
  .hero3--home{padding:0 0 clamp(28px,6vw,44px)}
  .hero3--home .slide{display:flex;flex-direction:column;gap:0}
  .hero3--home .slide__art{order:-1;margin:0;display:block;position:relative;z-index:0}
  .hero3.hero3--home .slide__art.slide__art--photo img{
    max-width:none;width:100%;aspect-ratio:1/.86;object-fit:cover;object-position:62% 12%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.6) 76%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .hero3--home .slide__copy{
    position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
    margin-top:clamp(-96px,-22vw,-64px);padding:0 clamp(18px,5vw,28px);
  }
  .hero3--home .slide h1.long{font-size:clamp(2rem,9.6vw,2.9rem);line-height:1.04;margin:0 0 .5em;text-shadow:0 2px 24px rgba(8,22,15,.9)}
  .hero3--home .slide .actions{order:2;margin:0 0 clamp(26px,6vw,34px)}
  .hero3--home .slide .actions .btn{min-height:56px;padding-inline:2.2em;font-size:1.0625rem}
  .hero3--home .slide__quote{order:3;max-width:30rem;margin:0}
  .hero3--home .slide__quote p{font-size:1.125rem;line-height:1.6;margin-bottom:1em}
  .hero3--home .slide__quote p.q-hook{font-size:1.45rem;line-height:1.28;margin-bottom:.8em}
  .hero3--home .slide__quote footer{margin-top:18px}
}

/* desktop: even halves, vertically centred, button and logos both on the first screen */
@media (min-width:900px){
  .hero3--home{min-height:calc(100svh - 65px - 92px);display:flex;align-items:center}
  .hero3--home .slides{width:100%}
  .hero3--home .slide__art img{max-height:min(72svh,780px);width:auto;max-width:100%;object-fit:contain}
}
@media (min-width:900px) and (max-height:820px){
  .hero3--home{padding-top:16px;padding-bottom:20px}
  .hero3--home .slide__quote p{font-size:1.02rem;line-height:1.5;margin-bottom:.6em}
  .hero3--home .slide__quote p.q-hook{font-size:1.3rem;margin-bottom:.5em}
  .hero3--home .slide .actions{margin-top:18px}
  .hero3--home .slide__quote footer{margin-top:10px}
}

/* ====================== THREE STAGES: tabs ====================== */
.stages{padding:clamp(56px,8vw,112px) clamp(18px,3vw,40px);--accent:var(--orange);overflow:clip}
.stages[data-stage="2"]{--accent:var(--mint)}
.stages .svc__head{margin-bottom:clamp(24px,3.5vw,40px)}
.stage-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:clamp(28px,4vw,52px)}
.stage-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;
  padding:16px clamp(10px,1.6vw,22px) 14px;border:0;background:none;color:var(--on-dark-dim);
  border-bottom:4px solid transparent;margin-bottom:-1px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.stage-tab:hover{background:rgba(255,255,255,.04);color:#fff}
.stage-tab__n{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--on-dark-dim)}
.stage-tab b{font-family:var(--f-head);font-weight:800;font-size:clamp(.98rem,.8rem + 1.2vw,1.7rem);letter-spacing:-.015em;line-height:1.15;color:inherit}
.stage-tab[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.05);border-bottom-color:var(--accent)}
.stage-tab[aria-selected="true"] .stage-tab__n{color:var(--accent)}
.stage-panel{display:grid;gap:clamp(22px,4vw,64px);align-items:center;animation:rise .45s cubic-bezier(.2,.7,.25,1) both}
.stage-panel[hidden]{display:none}
@media (min-width:900px){ .stage-panel{grid-template-columns:1fr 1fr} }
.stage-panel__copy h3{
  font-family:var(--f-head);font-weight:800;color:#fff;margin:0 0 .45em;
  font-size:clamp(2.1rem,1.3rem + 3.2vw,3.8rem);line-height:1.02;letter-spacing:var(--tr-display);text-wrap:balance;
}
.stage-panel__copy h3 .m{color:var(--accent)}
.stage-panel__lead{margin:0 0 clamp(22px,3vw,30px);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.55;color:var(--on-dark);max-width:44ch;text-wrap:balance}
.stage-panel__art{position:relative;display:grid;place-items:center}
.stage-panel__art::before{content:"";position:absolute;inset:-10% -6%;border-radius:999px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%);filter:blur(26px)}
.stage-panel__art img{position:relative;width:min(100%,520px);height:auto}
@media (prefers-reduced-motion:reduce){ .stage-panel{animation:none} }

@media (min-width:900px) and (max-width:1199px){ .slide h1.long{font-size:clamp(1.9rem,3.5vw,2.3rem)} }

/* ============================================================================
   7 Oct 2026 round: everything centred, tabs on an orange band, phone hero in
   two halves. Orange is a SURFACE here, so text on it is ink (5.6:1 on #FF5303,
   4.5:1 on #F32B02). White is only used on the huge headings (3.2:1, large text).
   ============================================================================ */

/* ---------- global centring (menus stay left: lists of links read badly centred) ---------- */
.zb{text-align:center}
.zb .nav,.zb .nav *{text-align:left}
.zb .nav__mid,.zb .nav__mid *{text-align:left}
.zb h1,.zb h2,.zb h3,.zb p,.zb li,.zb summary,.zb details,.zb footer,.zb small{text-align:center}
.zb .actions,.zb .close .actions{justify-content:center}
.zb .svc__head,.zb .poss__head,.zb .close,.zb .certs,.zb .ladder,.zb .paper,.zb .about{text-align:center}
.zb .svc__head p,.zb .poss__head p,.zb .close p,.zb .certs__lede,.zb .paper__lede,.zb .about__lede{margin-left:auto;margin-right:auto}
.zb .close h2,.zb .poss__head h2,.zb .svc__head h2{margin-left:auto;margin-right:auto;max-width:none}

/* two column "heading left, content right" sections become stacked and centred */
.about__grid{grid-template-columns:1fr !important;max-width:62rem !important;margin:0 auto !important;justify-items:center}
.about__lede{max-width:46ch}
.rec li,.status li{text-align:center}
.status li{flex-direction:column;justify-content:center;gap:10px}
.status div span{margin-left:auto;margin-right:auto}
.rec,.status,.faq,.proof,.sgrid,.people{margin-left:auto;margin-right:auto;width:100%}
.faq{max-width:46rem}
.faq summary{justify-content:center;position:relative;padding-inline:48px}
.faq summary::after{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin-left:auto;margin-right:auto}
.what summary{justify-content:center;position:relative;padding-inline:48px}
.what summary::after{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.what[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.cert__top{flex-direction:column;text-align:center;gap:12px}
.cert__line{max-width:40ch;margin-left:auto;margin-right:auto}
.proof li{flex-direction:column;align-items:center;text-align:center;gap:8px}
.proof div{text-align:center}
.what__not,.what__plain{text-align:center}
.people li,.sgrid li,.svc__grid li{text-align:center;align-items:center}
.report{flex-direction:column !important;align-items:center !important;text-align:center}
.report p{margin-left:auto;margin-right:auto}
.crumb{justify-content:center}
.flow li,.steps li,.feat2{text-align:center;align-items:center}
.feat2 .feat__art{margin-left:auto;margin-right:auto}
.steps__here{align-self:center}

/* footer */
.foot2{justify-content:center;text-align:center;flex-direction:column;gap:6px}
.foot2__links{margin:0;justify-content:center}

/* possibilities: question rows centred, arrow pinned right */
.depts{justify-content:safe center}
.q{justify-content:center;position:relative;padding-inline:56px;text-align:center}
.q__txt{flex:none;max-width:100%}
.q__go{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
a.q:hover .q__go{transform:translateY(-50%) translateX(3px)}
.q__soon{position:absolute;right:2px;top:50%;transform:translateY(-50%)}

/* ---------- 3 services in 1 solution: heading on ink, tabs on an orange band ---------- */
.stages{padding:0;overflow:clip}
.stages .svc__head{padding:clamp(56px,8vw,112px) clamp(18px,3vw,40px) clamp(32px,4.5vw,56px);margin:0}
.stages .svc__head h2{font-size:clamp(2.3rem,1.4rem + 4.2vw,4.6rem)}
.stages .svc__head h2 .m{color:var(--mint)}
.stages .svc__head p{max-width:60ch;font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);line-height:1.6;color:var(--on-dark)}
.stages__band{
  background:linear-gradient(135deg,#FF5303 0%,#F94003 50%,#F32B02 100%);
  padding:clamp(36px,5.5vw,84px) clamp(18px,3vw,40px) clamp(44px,6vw,96px);
  color:var(--ink);
}
.stages__band .stage-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:46rem;margin:0 auto clamp(30px,4.5vw,56px);
  padding:6px;border-radius:22px;border:0;background:rgba(8,22,15,.16);
}
.stages__band .stage-tab{
  align-items:center;text-align:center;border:0;margin:0;border-radius:16px;
  padding:12px 6px 11px;color:var(--ink);background:transparent;
}
.stages__band .stage-tab:hover{background:rgba(8,22,15,.1);color:var(--ink)}
.stages__band .stage-tab__n{color:var(--ink);font-weight:700;opacity:.8}
.stages__band .stage-tab b{color:inherit}
.stages__band .stage-tab[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(8,22,15,.28)}
.stages__band .stage-tab[aria-selected="true"] .stage-tab__n{color:var(--mint);opacity:1}
.stages__band .stage-panel{max-width:72rem;margin:0 auto;text-align:center}
.stages__band .stage-panel__copy{display:flex;flex-direction:column;align-items:center}
.stages__band .stage-panel__copy h3{color:var(--ink)}
.stages__band .stage-panel__copy h3 .m{color:#fff}
.stages__band .stage-panel__lead{color:var(--ink);max-width:40ch;font-weight:500}
.stages__band .btn--primary{background:var(--ink);color:#fff;box-shadow:none}
.stages__band .btn--primary:hover{background:#0D2419}
/* the line drawings were drawn for a dark ground, so they sit on one */
.stages__band .stage-panel__art::before{display:none}
.stages__band .stage-panel__art{padding:clamp(18px,2.4vw,32px);border-radius:28px;background:var(--ground);box-shadow:0 24px 50px rgba(8,22,15,.35);max-width:520px;margin:0 auto;width:100%}
.stages__band .stage-panel__art img{width:100%}
.stages__band :where(a,button):focus-visible{outline-color:var(--ink)}

/* ---------- phone hero: title on top, then quote (left) and photo (right) in two halves ---------- */
@media (max-width:899px){
  .hero3--home{padding:0 clamp(16px,4.5vw,28px) clamp(26px,6vw,40px)}
  .hero3--home .slide{
    display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(10px,3vw,18px);row-gap:clamp(16px,4vw,24px);
    grid-template-areas:"title title" "cta cta" "quote art";align-items:stretch;
    padding-top:clamp(22px,5vw,34px);
  }
  .hero3--home .slide__copy{display:contents}
  .hero3--home .slide h1.long{grid-area:title;margin:0;text-shadow:none}
  .hero3--home .slide .actions{grid-area:cta;order:0;margin:0;justify-content:center}
  .hero3--home .slide__quote{grid-area:quote;order:0;align-self:center;margin:0;max-width:none}
  .hero3--home .slide__quote p{font-size:.9rem;line-height:1.5;margin-bottom:.75em}
  .hero3--home .slide__quote p.q-hook{font-size:1.1rem;line-height:1.28;margin-bottom:.65em}
  .hero3--home .slide__quote footer{margin-top:10px;font-size:.8125rem;line-height:1.4}
  .hero3--home .slide__art{grid-area:art;order:0;margin:0;position:relative;z-index:0;display:block;min-height:0}
  .hero3.hero3--home .slide__art.slide__art--photo img{
    position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;
    object-fit:cover;object-position:60% 14%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 34%),linear-gradient(180deg,#000 68%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 34%),linear-gradient(180deg,#000 68%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

.secband p,.secband h2{margin-left:auto;margin-right:auto}
.secband .actions{justify-content:center}

/* about hero: same even halves, centred block */
.hero3--about .slide__copy{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto}
.hero3--about .slide h1,.hero3--about .slide__lead{margin-left:auto;margin-right:auto;text-align:center}
.hero3--about .slide .actions{justify-content:center}
.hero3--about .slide__art{display:flex;justify-content:center}
.hero3--about .slide__art img{max-width:600px}
@media (min-width:900px){ .hero3--about .slide:not(.slide--solo){grid-template-columns:1fr 1fr} .hero3--about .slide__art{margin-right:0} }

/* =====================================================================
   Clean pass: Apple-style space. Phone first fold = title + button, centred.
   Photo bleeds to the right edge. Orange section is light and airy:
   white tabs, white buttons, white illustration card.
   ===================================================================== */

/* desktop/tablet order stays: title, quote, button */
.hero3--home .slide__copy{display:flex;flex-direction:column;align-items:center}
.hero3--home .hero-top{display:contents}
.hero3--home .slide h1.long{order:1}
.hero3--home .slide__quote{order:2}
.hero3--home .slide .actions{order:3}
@media (min-width:900px){
  /* photo flush to the right edge of the window, no cut line */
  .hero3--home .slide__art{margin-right:calc(clamp(18px,3vw,40px) * -1);justify-content:flex-end}
  .hero3.hero3--home .slide__art--photo img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.46) 21%,rgba(0,0,0,.82) 33%,rgba(0,0,0,.97) 43%,#000 55%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 15%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.97) 34%,#000 46%,#000 80%,rgba(0,0,0,.72) 90%,rgba(0,0,0,.28) 96%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

/* phone: the first screen is the title and the button, centred. quote and photo follow. */
@media (max-width:899px){
  .hero3--home .slide{
    grid-template-areas:"top top" "quote art";grid-template-rows:auto auto;
    row-gap:clamp(20px,5vw,32px);padding-top:0;
  }
  .hero3--home .slide__copy{display:contents}
  .hero3--home .hero-top{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,7vw,40px);
    grid-area:top;min-height:calc(100svh - 65px - 72px);padding:clamp(20px,5vw,36px) 0;
  }
  .hero3--home .hero-top h1.long{margin:0;font-size:clamp(2.1rem,10.4vw,3.2rem);line-height:1.04;text-shadow:none}
  .hero3--home .hero-top .actions{margin:0;order:0}
  .hero3--home .hero-top .actions .btn{min-height:58px;padding-inline:2.4em;font-size:1.125rem}
  /* the photo bleeds off the right edge, so there is no visible cut line */
  .hero3--home .slide__art{margin-right:calc(clamp(16px,4.5vw,28px) * -1)}
}

/* ---------- the orange section: light, spacious, white controls ---------- */
.stages__band{padding:clamp(56px,8vw,120px) clamp(18px,3vw,40px) clamp(64px,9vw,132px)}
.stages__band .stage-tabs{background:rgba(255,255,255,.3);padding:6px;gap:6px;max-width:44rem;margin-bottom:clamp(40px,6vw,76px)}
.stages__band .stage-tab{padding:15px 8px;color:var(--ink);border-radius:16px}
.stages__band .stage-tab:hover{background:rgba(255,255,255,.35)}
.stages__band .stage-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(130,25,0,.2)}
.stages__band .stage-tab b{font-size:clamp(.95rem,.8rem + 1vw,1.45rem)}
.stages__band .btn--primary{background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(130,25,0,.2)}
.stages__band .btn--primary:hover{background:#fff;transform:translateY(-2px)}
.stages__band .stage-panel{gap:clamp(30px,5vw,88px)}
.stages__band .stage-panel__copy h3{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.2rem);margin-bottom:.5em}
.stages__band .stage-panel__lead{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.6;font-weight:500;margin-bottom:clamp(28px,4vw,40px)}
.stages__band .stage-panel__art{background:#fff;box-shadow:0 36px 80px rgba(130,25,0,.32);border-radius:clamp(26px,3vw,40px);padding:clamp(22px,3vw,40px)}

/* option B: the band floats as an inset rounded card on the dark page */
.stages--card .stages__band{margin:0 clamp(12px,3vw,40px) clamp(48px,7vw,112px);border-radius:clamp(26px,3.4vw,52px)}

/* phone fixes: order inside the top block, headline size, true centring */
@media (max-width:899px){
  .hero3--home .hero-top h1.long{order:0;font-size:clamp(2rem,9.4vw,3rem)}
  .hero3--home .hero-top .actions{order:1}
  .hero3--home .hero-top{min-height:calc(100vh - 65px);min-height:calc(100svh - 65px)}
}
.stages .svc__head h2 .m{white-space:nowrap}

@media (min-width:900px){
  .hero3.hero3--home .slide__art.slide__art--photo{margin-right:calc(clamp(18px,3vw,40px) * -1);justify-content:flex-end}
}

/* =====================================================================
   Scroll cue and the logo strip pinned to the bottom of the first screen
   ===================================================================== */
.scrollcue{display:none}
.hero3--home .tickerwrap{grid-column:1/-1;margin-inline:calc(clamp(18px,3vw,40px) * -1);padding-top:clamp(14px,2vw,24px)}
.hero3--home{padding-bottom:0}
@media (min-width:900px){
  .hero3--home{display:block;min-height:0}
  .hero3--home .slide{min-height:calc(100vh - 65px - 24px);min-height:calc(100svh - 65px - 24px);grid-template-rows:1fr auto}
  .hero3--home .slide__copy,.hero3--home .slide__art{align-self:center}
}
@media (max-width:899px){
  .hero3--home{padding-bottom:0}
  .hero3--home .slide{grid-template-areas:"top top" "ticker ticker" "quote art"}
  .hero3--home .tickerwrap{grid-area:ticker;margin-inline:calc(clamp(16px,4.5vw,28px) * -1);padding-top:0}
  /* the first screen: title + cue, then the logo strip sits on its bottom edge */
  .hero3--home .hero-top{min-height:calc(100vh - 65px - 96px);min-height:calc(100svh - 65px - 96px)}
  .hero3--home .hero-top .actions{display:none}
  .hero3--home .slide__quote{margin-top:clamp(8px,2vw,16px)}
  .hero3--home .slide{row-gap:clamp(22px,5vw,32px)}
  .scrollcue{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    color:var(--on-dark);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    min-height:44px;padding:6px 10px;
  }
  .scrollcue i{
    width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);position:relative;
    animation:cue 1.8s ease-in-out infinite;
  }
  .scrollcue i::before{
    content:"";width:11px;height:11px;border-right:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);
    transform:rotate(45deg) translate(-2px,-2px);
  }
}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ .scrollcue i{animation:none} }

/* tune: logo strip lands on the bottom edge of the first screen */
@media (max-width:899px){
  .hero3--home .hero-top{min-height:calc(100vh - 65px - 122px);min-height:calc(100svh - 65px - 122px)}
}
@media (min-width:900px){
  .hero3--home .slide{min-height:calc(100vh - 65px - 46px);min-height:calc(100svh - 65px - 46px)}
}
@media (min-width:900px) and (max-height:820px){
  .hero3--home{padding-top:6px}
  .hero3--home .slide__quote p{margin-bottom:.5em;line-height:1.45}
  .hero3--home .slide .actions{margin-top:12px}
  .hero3--home .slide__quote footer{margin-top:8px}
  .hero3--home .slide h1.long{margin-bottom:.35em}
  .hero3--home .slide__art img{max-height:min(62svh,520px)}
}

/* desktop: the hero IS the first screen, and the strip sits on its bottom edge */
@media (min-width:900px){
  .hero3--home{display:flex;flex-direction:column;min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);padding-bottom:0}
  .hero3--home .slides{flex:1;display:flex;width:100%}
  .hero3--home .slide{flex:1;min-height:0;width:100%}
}

/* the one line that says what we do, under the headline, on phones */
.hero-line{display:none}
@media (max-width:899px){
  .hero3--home .hero-top{gap:clamp(18px,5vw,26px)}
  .hero3--home .hero-line{
    display:block;margin:0;max-width:21em;text-wrap:balance;
    font-size:clamp(1.05rem,.95rem + .6vw,1.2rem);line-height:1.5;color:var(--on-dark);
  }
  .hero3--home .scrollcue{margin-top:clamp(2px,2vw,10px)}
}

/* ---------- three small visuals: the 3 in 1, phones only ---------- */
.triple{display:none}
@media (max-width:899px){
  .hero3--home .hero-line{display:none}
  .hero3--home .triple{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px clamp(4px,2vw,12px);width:100%;max-width:23rem}
  .triple__item{display:flex;flex-direction:column;align-items:center;gap:9px;width:clamp(86px,27vw,108px)}
  .triple__ic{
    width:clamp(54px,15vw,62px);height:clamp(54px,15vw,62px);border-radius:50%;display:grid;place-items:center;color:#fff;
    border:2px solid transparent;
    background:linear-gradient(#0d2419,#0d2419) padding-box,linear-gradient(135deg,#FF5303,#EC0A01) border-box;
    box-shadow:0 8px 24px rgba(255,83,3,.22);
  }
  .triple__item b{font-size:.78rem;font-weight:600;line-height:1.25;color:var(--on-dark);text-align:center;text-wrap:balance}
  .triple__plus{align-self:flex-start;margin-top:clamp(12px,3.4vw,16px);font-family:var(--f-head);font-weight:800;font-size:1.4rem;line-height:1;color:var(--orange)}
  .triple__eq{flex-basis:100%;margin:clamp(10px,3vw,16px) 0 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    font-size:.9375rem;line-height:1.4;color:var(--on-dark)}
  .triple__pill{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;
    background:linear-gradient(135deg,#FF5303,#F94003);color:var(--ink)}
}

/* ---------- the arrow: on its own, orange, no circle ---------- */
.scrollcue i{box-shadow:none !important;background:none;width:34px;height:30px}
.scrollcue i::before{border-right:3.5px solid var(--orange) !important;border-bottom:3.5px solid var(--orange) !important;width:18px !important;height:18px !important;transform:rotate(45deg) translate(-3px,-3px) !important}

/* ---------- trusted by: gold, prestigious, with room beneath ---------- */
.hero3--home .ticker__title{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);
  background:linear-gradient(90deg,#B8872E 0%,#F3D98B 35%,#C99A3D 62%,#F3D98B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  letter-spacing:.22em;font-weight:700;
}
@media (min-width:600px){
  .hero3--home .ticker__title::before,.hero3--home .ticker__title::after{
    content:"";flex:0 1 clamp(40px,9vw,140px);height:1px;-webkit-text-fill-color:initial;
    background:linear-gradient(90deg,transparent,rgba(214,170,80,.75));
  }
  .hero3--home .ticker__title::after{background:linear-gradient(270deg,transparent,rgba(214,170,80,.75))}
}
@media (max-width:899px){
  .hero3--home .hero-top{min-height:calc(100vh - 65px - 150px);min-height:calc(100svh - 65px - 150px)}
}
@media (min-width:900px){ .hero3--home{padding-bottom:clamp(22px,2.6vw,34px)} }

/* triple: always one row of three, never wraps */
@media (max-width:899px){
  .hero3--home .triple{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;column-gap:clamp(2px,1.6vw,8px);row-gap:0;max-width:21rem;align-items:start;justify-items:center}
  .triple__item{width:auto;min-width:0;gap:8px}
  .triple__item b{font-size:.72rem;padding-inline:2px}
  .triple__plus{margin-top:clamp(12px,3.4vw,17px);font-size:1.2rem}
  .triple__eq{grid-column:1/-1}
}
/* short phones (iPhone SE and similar): trim so everything still fits one screen */
@media (max-width:899px) and (max-height:720px){
  .hero3--home .hero-top{gap:12px}
  .hero3--home .hero-top h1.long{font-size:clamp(1.8rem,8.6vw,2.4rem)}
  .triple__ic{width:46px;height:46px}
  .triple__ic svg{width:22px;height:22px}
  .triple__eq{margin-top:8px}
  .scrollcue span{display:none}
  .scrollcue{min-height:36px;padding:0}
}

/* ---------- the stage map: full width on a phone ---------- */
.stagemap{display:none;margin:0}
.stagemap__svg{display:block;width:100%;height:auto;overflow:visible}
.sm-n{font-family:var(--f-head);font-weight:800;font-size:15px;fill:#08160F}
.sm-t{font-family:var(--f-head);font-weight:700;font-size:16px;fill:#fff}
.sm-d{font-family:var(--f-body);font-weight:500;font-size:12.5px;fill:#B5BDB8}
@media (max-width:899px){
  .hero3--home .hero-top{gap:clamp(8px,2vw,14px)}
  .hero3--home .stagemap{display:block;width:calc(100% + clamp(32px,9vw,56px));margin-inline:calc(clamp(16px,4.5vw,28px) * -1);align-self:stretch}
  .hero3--home .hero-top h1.long{margin-bottom:clamp(4px,2vw,14px)}
}
@media (max-width:899px) and (max-height:760px){
  .hero3--home .stagemap{margin-block:-6px}
}

/* ---------- phone hero: the mark on its own, then the reason to read on ---------- */
.hero-mark{display:none}
@media (max-width:899px){
  .hero3--home .hero-top{gap:clamp(22px,6vw,32px)}
  .hero3--home .hero-top h1.long{margin-bottom:0}
  .hero3--home .hero-mark{display:block;height:auto;width:clamp(116px,34vw,156px);margin:0}
  .hero3--home .hero-why{gap:14px;padding:0;margin:0;min-height:0}
  .hero3--home .hero-why span{font-size:clamp(1.0625rem,.95rem + .6vw,1.2rem);letter-spacing:0;text-transform:none;font-weight:500;line-height:1.45;color:var(--on-dark)}
  .hero3--home .hero-why b{font-family:var(--f-head);font-weight:800;color:#fff;font-size:1.15em;letter-spacing:-.01em}
}
@media (max-width:899px) and (max-height:720px){
  .hero3--home .hero-mark{width:96px}
  .hero3--home .hero-top{gap:16px}
  .hero3--home .hero-why span{font-size:1rem}
}

/* ---------- phone hero: the question (her words), her headline beneath it ---------- */
.hero-kicker,.hero-q{display:none}
@media (max-width:899px){
  .hero3--home .hero-top{gap:clamp(18px,5vw,26px)}
  .hero3--home .hero-mark{display:none}
  .hero3--home .hero-kicker{
    display:block;margin:0;max-width:17em;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;
    background:linear-gradient(90deg,#B8872E,#F3D98B 50%,#C99A3D);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  }
  .hero3--home .hero-q{
    display:block;margin:0;font-family:var(--f-head);font-weight:800;color:#fff;line-height:1.06;letter-spacing:-.03em;
    font-size:clamp(2.2rem,11vw,3.2rem);max-width:10em;text-wrap:balance;
  }
  .hero3--home .hero-q span{color:var(--orange)}
  /* her locked headline becomes the line beneath the question */
  .hero3--home .hero-top h1.long{
    font-family:var(--f-body);font-weight:500;letter-spacing:0;line-height:1.5;color:var(--on-dark-dim);
    font-size:clamp(1rem,.93rem + .35vw,1.125rem);max-width:19em;text-wrap:balance;margin:0;
  }
  .hero3--home .hero-top h1.long .ln{display:inline}
  .hero3--home .hero-top h1.long .ln.m{color:var(--on-dark)}
  .hero3--home .hero-why span{font-size:clamp(1rem,.95rem + .4vw,1.1rem)}
}
@media (max-width:899px) and (max-height:720px){
  .hero3--home .hero-q{font-size:clamp(1.8rem,9vw,2.4rem)}
  .hero3--home .hero-top{gap:12px}
}

@media (max-width:899px){
  .hero3--home .hero3__glow{right:-38%;left:auto;top:-14%;width:96vw;opacity:.6;filter:blur(44px);
    background:radial-gradient(circle,rgba(255,83,3,.7),transparent 66%)}
}

/* ---------- phone hero, final: her headline is the big text ---------- */
@media (max-width:899px){
  .hero3--home .hero-top{gap:clamp(24px,7vw,36px)}
  .hero3--home .hero-top h1.long{
    font-family:var(--f-head);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff;
    font-size:clamp(2.1rem,10.4vw,3.2rem);max-width:none;margin:0;
  }
  .hero3--home .hero-top h1.long .ln{display:block;text-wrap:balance}
  .hero3--home .hero-top h1.long .ln.m{color:var(--orange)}
  .hero3--home .hero-why span{font-size:clamp(1.0625rem,.95rem + .6vw,1.2rem)}
}
@media (max-width:899px) and (max-height:720px){
  .hero3--home .hero-top h1.long{font-size:clamp(1.8rem,9vw,2.5rem)}
  .hero3--home .hero-top{gap:18px}
}

@media (max-width:899px){ .hero3--home .hero-top h1.long{font-size:clamp(2rem,9.4vw,3rem)} }
@media (max-width:899px) and (max-height:720px){ .hero3--home .hero-top h1.long{font-size:clamp(1.8rem,8.8vw,2.4rem)} }