/* 5for5 Consulting — two families only: Cormorant Garamond (display) + Jost (UI/body) */
:root{
  /* the three locked brand colours */
  --forest:#182818; --gold:#b8962e; --cream:#f4efe3;
  /* tones of them. The floor is far darker than it was: contrast is what reads as rich */
  --forest-2:#1e301e; --deep:#0c140c; --pitch:#070c07;
  --gold-lt:#d4b25a; --gold-hi:#e6c86c;
  --on-dark:#e6ebe2; --on-dark-2:#b7c3b3;
  --ground:#ffffff; --surface:#f6f8f5; --rule:#dbe2d9;
  --ink:#16211a; --ink-2:#3f5043; --ink-3:#6b7a6e;
  --disp:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:min(1120px,100% - 2.5rem);
  --wrap-wide:min(1480px,100% - 2rem);
  --r:3px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box}
html{color-scheme:dark light}
a,button,summary,.cta,.ghost{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* sticky header would otherwise sit on top of any heading jumped to from the contents rail */
:target,h2[id]{scroll-margin-top:6.5rem}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--deep);color:var(--ink);font-family:var(--sans);
     font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- header ---- */
.bar{background:var(--deep);color:var(--cream);font-size:.83rem;text-align:center;padding:.55rem 0}
.bar a{color:var(--gold-lt);font-weight:500}
.nav{position:sticky;top:0;z-index:50;color:var(--cream);
     background:rgba(12,20,12,.86);
     -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
     border-bottom:1px solid rgba(244,239,227,.09)}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;min-height:74px;flex-wrap:wrap}
.brand{font-family:var(--disp);font-size:1.4rem;font-weight:600;color:var(--cream);
       text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.brand span{color:var(--gold)}
.nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;
        font-size:.83rem;letter-spacing:.04em;text-transform:uppercase}
.nav a{color:var(--on-dark);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--gold-lt)}
.nav .spacer{flex:1}
.cta{background:var(--gold);color:var(--deep);text-decoration:none;font-weight:500;
     padding:.6rem 1.1rem;border-radius:var(--r);font-size:.82rem;letter-spacing:.05em;
     text-transform:uppercase;white-space:nowrap}
.cta:hover{background:var(--gold-lt)}

/* ---- header, small screens ----
   Brand + call button share the first row, links wrap onto the second, so the
   header stops eating half the viewport before the hero starts. */
@media (max-width:760px){
  .nav .wrap{min-height:0;padding:.65rem 0;gap:.55rem 1rem}
  .nav .spacer{display:none}
  .brand{font-size:1.2rem}
  .nav nav{order:3;width:100%}
  .nav ul{gap:.4rem 1.05rem;font-size:.73rem}
  .nav .cta{margin-left:auto}
  .cta{padding:.5rem .85rem;font-size:.72rem}
  .bar{font-size:.78rem;padding:.5rem 0}
  section{padding:2.75rem 0}
  .hero{padding:2.75rem 0 2.5rem}
}

/* ---- type ---- */
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.1;text-wrap:balance;margin:0 0 .55rem}
h1{font-size:clamp(2.75rem,6.6vw,5.2rem);letter-spacing:-.022em;line-height:1.02}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem);margin-top:0;letter-spacing:-.016em;line-height:1.05}
h3{font-family:var(--sans);font-weight:500;font-size:1.12rem;line-height:1.35}
p{margin:0 0 1.1rem;max-width:68ch}
.lede{font-size:1.16rem;color:var(--ink-2);max-width:64ch}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
         font-weight:500;margin:0 0 .9rem}
section{padding:5.5rem 0;background:var(--ground)}
section.tint{background:var(--surface);border-block:1px solid var(--rule)}
.dark{background:var(--forest);color:var(--cream)}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark p{color:var(--on-dark)}
.dark .eyebrow{color:var(--gold-hi)}

/* ---- industry ticker ----
   Nine items, each 22px tall, stepped one per 1.6s. steps(9) holds each item still
   instead of sliding, which is the snap the old site had. The global
   prefers-reduced-motion rule above freezes it on the first item. */
.ticker{display:inline-flex;align-items:center;gap:.65rem;background:rgba(7,12,7,.5);
        -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
        border:1px solid rgba(244,239,227,.2);border-radius:var(--r);padding:.4rem .9rem;
        margin:0 0 1.4rem;max-width:100%}
.ticker-label{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
              color:var(--gold);white-space:nowrap;flex-shrink:0}
.ticker-wrap{overflow:hidden;height:22px;min-width:0}
.ticker-items{display:flex;flex-direction:column;animation:tickerScroll 16s steps(10) infinite}
.ticker-items span{display:block;height:22px;line-height:22px;font-size:.84rem;font-weight:400;
                   color:var(--cream);white-space:nowrap;letter-spacing:.02em}
@keyframes tickerScroll{
  0%{transform:translateY(-0px)}
  10%{transform:translateY(-22px)}
  20%{transform:translateY(-44px)}
  30%{transform:translateY(-66px)}
  40%{transform:translateY(-88px)}
  50%{transform:translateY(-110px)}
  60%{transform:translateY(-132px)}
  70%{transform:translateY(-154px)}
  80%{transform:translateY(-176px)}
  90%{transform:translateY(-198px)}
  100%{transform:translateY(0)}
}

/* ---- hero ---- */
.hero{background:var(--forest);color:var(--cream);padding:4.5rem 0 4rem;
      border-bottom:3px solid var(--gold)}
.hero h1{color:var(--cream);max-width:22ch}
.hero .lede{color:var(--on-dark);margin-top:1rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.ghost{border:1px solid rgba(244,239,227,.55);color:var(--cream);text-decoration:none;
       background:rgba(7,12,7,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
       padding:.6rem 1.1rem;border-radius:var(--r);font-size:.82rem;letter-spacing:.05em;
       text-transform:uppercase;font-weight:500}
.ghost:hover{border-color:var(--gold);color:var(--gold-lt)}

/* ---- stats: huge numerals, tiny labels, no boxes ---- */
.stats{display:grid;gap:2.2rem 1.6rem;
       grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.stats div{border-left:1px solid rgba(212,178,90,.28);padding:.2rem 0 .2rem 1.15rem}
.stats b{display:block;font-family:var(--disp);font-size:clamp(2.5rem,4vw,3.9rem);line-height:.95;
         white-space:nowrap;
         font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
         color:var(--ink);margin-bottom:.55rem}
.stats span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
            color:var(--ink-3);line-height:1.4}
.stats small{display:block;margin-top:.6rem;font-size:.86rem;color:var(--ink-2);line-height:1.45}
/* the same component on a dark band: numerals go to the brightest gold */
.dark .stats b{color:var(--gold-hi)}
.dark .stats span{color:var(--on-dark-2)}
.dark .stats small{color:var(--on-dark)}
section.deep{background:var(--deep);padding:3.4rem 0 4.6rem}
.stats-lead{grid-template-columns:repeat(4,1fr)}
.stats-lead .lead{grid-column:1/-1;border-left:0;padding:0 0 2.2rem;margin-bottom:.6rem;
                  border-bottom:1px solid rgba(212,178,90,.25);
                  display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:1.8rem}
.stats-lead .lead b{font-size:clamp(5rem,11.5vw,10.5rem);line-height:.82;letter-spacing:-.035em;
                    margin:0}
.stats-lead .lead span{font-size:1rem;letter-spacing:.06em;max-width:15ch;line-height:1.35;
                       padding-bottom:.5rem;text-transform:none}
@media (max-width:900px){.stats-lead{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .stats-lead .lead{grid-template-columns:1fr;row-gap:.6rem}
  .stats-lead .lead span{padding-bottom:0}
}
section.deep::before{display:none}

/* ---- grid / cards ---- */
.grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.card{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);padding:1.4rem 1.5rem}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card.lift{border-top:3px solid var(--gold)}
.grid .wide{grid-column:1/-1}
.grid .wide h3{font-family:var(--disp);font-size:1.55rem;font-weight:600}
.grid .wide p{max-width:60ch}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--gold)}
a.card .more{color:var(--gold);font-size:.85rem;font-weight:500}

/* ---- long-form article with contents rail ---- */
.longform{display:grid;grid-template-columns:minmax(0,68ch) 1fr;gap:3.5rem;align-items:start}
.toc{position:sticky;top:104px;font-size:.88rem}
.toc .k{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
        margin:0 0 .9rem;font-weight:500}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc li{margin:0}
.toc a{display:block;padding:.42rem 0 .42rem 1rem;color:var(--ink-3);text-decoration:none;
       border-left:2px solid transparent;margin-left:-1px;line-height:1.35;
       transition:color .18s ease,border-color .18s ease}
.toc a:hover{color:var(--ink);border-left-color:var(--gold)}
@media (max-width:1000px){
  .longform{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin:0 0 2.4rem;max-width:68ch}
  .toc ul{columns:2;column-gap:2rem}
}
@media (max-width:560px){.toc ul{columns:1}}

/* ---- prose ---- */
.prose{max-width:70ch}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:1.9rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--gold)}
blockquote{margin:1.8rem 0;padding:1.1rem 1.4rem;background:var(--surface);
           border-left:4px solid var(--gold);border-radius:var(--r)}
blockquote p:last-child{margin-bottom:0}
blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.88rem;color:var(--ink-3)}

/* ---- depth and texture ----
   Flat colour fields were reading as unfinished. Grain sits on a fixed, non-interactive
   layer so it never repaints on scroll. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){body::after{display:none}}

/* dark bands get a light source rather than sitting as flat colour */
.dark, section.dark{position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 14% 0%,rgba(184,150,46,.14),transparent 62%)}

/* tinted shadows, never flat black */
.card,.clients a,.proof article{transition:transform .22s var(--ease-out),
  border-color .2s ease,box-shadow .22s var(--ease-out),background-color .2s ease}
@media (hover:hover) and (pointer:fine){
  a.card:hover,.clients a:hover{transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(7,12,7,.45)}
  .cta:hover{box-shadow:0 10px 26px rgba(184,150,46,.32)}
}
a.card:active,.clients a:active,.cta:active,.ghost:active{transform:translateY(0) scale(.97);
  transition-duration:.1s}
.cta,.ghost{transition:background-color .2s ease,border-color .2s ease,
  transform .16s var(--ease-out),box-shadow .2s ease}

/* ---- editorial furniture inside long articles ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
         border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin:2rem 0}
.compare div{background:var(--ground);padding:1.3rem 1.4rem}
.compare .win{background:var(--forest);border:0}
.compare h4{margin:0 0 .5rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
            text-transform:uppercase;color:var(--ink-3);font-weight:500}
.compare .win h4{color:var(--gold-lt)}
.compare b{display:block;font-family:var(--disp);font-size:2rem;line-height:1;font-weight:600;
           margin-bottom:.6rem}
.compare .win b{color:var(--gold)}
.compare p{margin:0;font-size:.9rem;color:var(--ink-2);max-width:none}
.compare .win p{color:var(--on-dark)}
@media (max-width:640px){.compare{grid-template-columns:1fr}}

ul.factors{list-style:none;padding:0}
ul.factors li{border-top:1px solid var(--rule);padding:.85rem 0 .85rem 1.6rem;position:relative;
              margin:0}
ul.factors li:last-child{border-bottom:1px solid var(--rule)}
ul.factors li::before{content:"";position:absolute;left:0;top:1.35rem;width:8px;height:8px;
                      background:var(--gold);border-radius:50%}

.callout{background:var(--forest);color:var(--cream);border-radius:var(--r);
         padding:1.5rem 1.6rem;margin:2.2rem 0;border-left:4px solid var(--gold)}
.callout h4{margin:0 0 .8rem;font-family:var(--disp);font-size:1.3rem;font-weight:600;
            color:var(--cream)}
.callout p{color:var(--on-dark);font-size:.94rem;margin:0 0 .7rem;max-width:none}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--gold-lt)}

.stat-row{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
          grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
          border-radius:var(--r);overflow:hidden;margin:2rem 0}
.stat-row div{background:var(--ground);padding:1.2rem 1.3rem}
.stat-row .slow{background:var(--forest)}
.stat-row b{display:block;font-family:var(--disp);font-size:2.4rem;line-height:1;font-weight:600;
            font-variant-numeric:tabular-nums}
.stat-row .slow b{color:var(--gold)}
.stat-row span{display:block;margin-top:.4rem;font-size:.74rem;letter-spacing:.08em;
               text-transform:uppercase;color:var(--ink-3)}
.stat-row .slow span{color:var(--on-dark-2)}

.trades{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0 2.2rem}
.trades figure{margin:0;min-width:0}
.trades img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--rule);
            background:var(--surface);display:block}
.trades figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.5rem}
@media (max-width:560px){.trades{grid-template-columns:1fr}}

/* ---- video ---- */
.video{position:relative;padding-top:56.25%;background:var(--deep);
       border-radius:var(--r);overflow:hidden;border:1px solid var(--rule)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- author byline ---- */
.byline{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:0 0 2rem;
        padding:.9rem 0;border-block:1px solid var(--rule);font-size:.9rem;color:var(--ink-2)}
.byline a{color:var(--ink);font-weight:500}
.byline .cred{color:var(--ink-3);flex:1 1 22ch;min-width:0}
.byline time{color:var(--ink-3)}

/* ---- table ---- */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th,td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--rule)}
thead th{background:var(--surface);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
         color:var(--ink-3);font-weight:500}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- footer ---- */
footer{background:var(--pitch);color:var(--on-dark-2);padding:3.4rem 0 2.5rem;font-size:.88rem}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{color:var(--gold-lt)}
.fgrid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin-bottom:2rem}
.fgrid h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
          margin:0 0 .8rem;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:.45rem}
.legal{border-top:1px solid rgba(244,239,227,.14);padding-top:1.4rem;font-size:.8rem;
       display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---- images ---- */
figure.shot{margin:2rem 0}
figure.shot img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
figure.shot figcaption{font-size:.86rem;color:var(--ink-3);margin-top:.7rem}
figure.shot.portrait{max-width:340px}
.ba-figure{margin:2rem 0}
.ba-figure .pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ba-figure img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r)}
.ba-figure .pair span{display:block;margin-top:.5rem;font-size:.7rem;letter-spacing:.14em;
                      text-transform:uppercase;color:var(--gold)}
.ba-figure figcaption{font-size:.86rem;color:var(--ink-3);margin-top:.9rem}
@media (max-width:640px){.ba-figure .pair{grid-template-columns:1fr}}
.badges{background:var(--deep);padding:1.8rem 0 .4rem}
.badges .wrap{display:flex;justify-content:center}
.badges img{width:auto;max-width:min(560px,100%);height:auto;opacity:.95}
.bleed{margin-inline:0}
@media (min-width:900px){.prose figure.shot.wide{width:min(100%,860px)}}

/* ---- client roster (trade + market, not testimonials) ---- */
.clients{display:grid;gap:.85rem;grid-template-columns:repeat(5,1fr)}
.clients a{display:block;min-width:0;padding:1.1rem 1.15rem 1.05rem;border-radius:var(--r);
           background:rgba(7,12,7,.42);border:1px solid rgba(244,239,227,.14);
           text-decoration:none;color:inherit}
.clients a:hover{background:rgba(7,12,7,.62);border-color:rgba(212,178,90,.35)}
.clients h3{color:var(--cream);margin:0 0 .5rem;font-family:var(--disp);font-size:1.12rem;
            font-weight:600;line-height:1.1}
.clients hr{border:0;border-top:1px solid var(--gold);width:28px;margin:0 0 .7rem}
.clients .where{margin:0 0 .35rem;font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-2)}
.clients .does{margin:0 0 1rem;font-size:.9rem;color:var(--on-dark)}
.clients .more{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
               font-weight:500}
.clients a:hover .more{color:var(--gold-hi)}

/* ---- measured results ---- */
.proof{display:grid;gap:.85rem;
       grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.proof article{background:rgba(7,12,7,.42);border:1px solid rgba(244,239,227,.09);
               border-radius:var(--r);padding:1.9rem 1.8rem;display:flex;flex-direction:column}
.proof .who{color:var(--cream);font-size:.92rem;font-weight:500;letter-spacing:.02em}
.proof .big{font-family:var(--disp);font-size:clamp(3rem,4.4vw,4.2rem);line-height:.95;font-weight:600;
            letter-spacing:-.02em;color:var(--gold-hi);font-variant-numeric:tabular-nums;margin:.8rem 0 .7rem}
.proof .note{font-size:.9rem;color:var(--on-dark);margin:0;max-width:34ch}
.proof .said{font-size:.92rem;color:var(--on-dark);margin:1.1rem 0 .5rem;padding-top:1.1rem;
             border-top:1px solid rgba(244,239,227,.14);max-width:34ch;font-style:italic}
.proof cite{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);
            font-style:normal}

/* ---- founders (deliberately not the card grid used by services) ---- */
.people{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
        margin-top:2.6rem;border-top:1px solid rgba(244,239,227,.14);padding-top:2.6rem}
.people a{text-decoration:none;display:grid;grid-template-columns:200px 1fr;
          grid-template-rows:auto auto 1fr;column-gap:1.4rem;row-gap:.4rem;align-items:start}
.people .face{grid-column:1;grid-row:1/4;width:200px;height:250px;object-fit:cover;
              border-radius:var(--r);border:1px solid rgba(244,239,227,.14);margin:0;
              filter:contrast(1.04);transition:border-color .2s ease}
.people h3,.people p,.people .more{grid-column:2}
.people a:hover .face{border-color:var(--gold)}
.people h3{color:var(--cream);font-family:var(--disp);font-size:1.75rem;font-weight:600;
           margin:0 0 .3rem;line-height:1.05}
.people p{color:var(--on-dark);font-size:.94rem;margin:0 0 .6rem;max-width:46ch}
.people .more{color:var(--gold);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
              font-weight:500}
.people a:hover h3{color:var(--gold-hi)}
@media (max-width:520px){
  .people a{grid-template-columns:1fr;grid-template-rows:auto}
  .people .face{grid-row:auto;grid-column:1;width:200px}
  .people h3,.people p,.people .more{grid-column:1}
}

/* ---- poster hero ----
   One photograph, edge to edge, with the headline in the lower third and the top half of
   the picture left clean. The page scrolls over it like a curtain (sticky, no JavaScript)
   while the picture slowly zooms behind. Both effects are off under reduced motion. */
.hero-bleed{position:sticky;top:0;z-index:0;isolation:isolate;overflow:hidden;
            min-height:min(86dvh,840px);display:flex;align-items:flex-end;
            padding:calc(3rem + env(safe-area-inset-top)) env(safe-area-inset-right)
                    3.2rem env(safe-area-inset-left);
            background:var(--pitch)}
.hero-bleed::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/img/hero-bleed.jpg") center 38% / cover no-repeat;
  filter:contrast(1.06) saturate(1.04);transform-origin:50% 45%}
.hero-bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,12,7,.42) 0%,rgba(7,12,7,0) 16%,rgba(7,12,7,0) 40%,
                    rgba(7,12,7,.62) 64%,rgba(7,12,7,.94) 100%),
    linear-gradient(90deg,rgba(7,12,7,.45) 0%,rgba(7,12,7,0) 60%)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-bleed::before{animation:heroDrift linear both;animation-timeline:scroll(root);
                        animation-range:0 90vh;will-change:transform}
    @keyframes heroDrift{to{transform:scale(1.12)}}
  }
}
@media (prefers-reduced-motion:reduce){.hero-bleed{position:relative}}
/* the reel sits over the still, which stays as the fallback for slow connections and reduced motion */
.hero-video::before{z-index:-3}
.hero-reel{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
           object-position:center 42%;filter:contrast(1.05) saturate(1.03);transform-origin:50% 45%}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-reel{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 90vh;
               will-change:transform}
  }
}
@media (prefers-reduced-motion:reduce){.hero-reel{display:none}}
.sound{position:absolute;right:1.4rem;bottom:1.2rem;z-index:2;appearance:none;border:1px solid rgba(244,239,227,.45);
       background:rgba(7,12,7,.55);color:var(--on-dark);font:500 .68rem/1 var(--sans);letter-spacing:.14em;
       text-transform:uppercase;padding:.62rem .95rem;border-radius:var(--r);cursor:pointer;
       backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
       transition:background .2s ease,border-color .2s ease,transform .12s ease}
.sound:hover{border-color:var(--gold-lt);background:rgba(7,12,7,.72)}
.sound:active{transform:scale(.97)}
.sound .on{display:none}.sound[aria-pressed="true"] .on{display:inline}.sound[aria-pressed="true"] .off{display:none}
@media (prefers-reduced-motion:reduce){.sound{display:none}}
@media (max-width:760px){.sound{right:1rem;bottom:1rem}}
/* everything after the hero rides over it; the gold rule leads the curtain */
main > *:not(.hero){position:relative;z-index:1}
.badges{border-top:3px solid var(--gold)}
.hero-bleed .hero-copy{max-width:none;width:100%}
.hero-bleed h1{color:#fff;max-width:none;font-size:clamp(3rem,7.4vw,6.6rem);line-height:.98;
               letter-spacing:-.028em;margin-bottom:1.1rem}
.hero-bleed .lede{color:var(--on-dark);font-size:1.28rem;max-width:52ch;margin-top:0}
.hero-bleed .actions{margin-top:1.8rem}
.shotby{position:absolute;right:1.5rem;bottom:1.1rem;margin:0;font-size:.62rem;letter-spacing:.14em;
        text-transform:uppercase;color:var(--on-dark-2);max-width:34ch;text-align:right}
@media (max-width:760px){
  .hero-bleed{min-height:min(78dvh,640px);padding:2.75rem 0 3.2rem}
  .hero-bleed::before{background-position:center 40%}
  .hero-bleed::after{background:linear-gradient(180deg,rgba(7,12,7,.5) 0%,rgba(7,12,7,.1) 22%,
                                                 rgba(7,12,7,.7) 55%,rgba(7,12,7,.95) 100%)}
  .shotby{position:static;text-align:left;margin-top:1.6rem;max-width:none}
}

/* ---- split hero ---- */
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center}
.hero-split .hero-copy{min-width:0}
.hero-art{margin:0;min-width:0}
.hero-art img{width:100%;height:auto;border-radius:var(--r);border:1px solid rgba(244,239,227,.22);
              display:block}
.hero-art .lead img{aspect-ratio:4/3;object-fit:cover}
.hero-art .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.55rem}
.hero-art .thumbs img{aspect-ratio:1/1;object-fit:cover}
.hero-art figcaption{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
                     color:var(--on-dark-2);margin-top:.7rem}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:2rem}
  .hero-art{order:2}
}

/* ---- playbook ---- */
.playbook{margin-top:2rem}
.playbook article{display:grid;grid-template-columns:minmax(190px,1fr) 2.1fr;gap:1.4rem 2.4rem;
                  padding:1.7rem 0;border-top:1px solid var(--rule)}
.playbook article:last-child{border-bottom:1px solid var(--rule)}
.playbook h3{font-family:var(--disp);font-size:1.5rem;font-weight:600;margin:0;line-height:1.15}
.playbook p{margin:0 0 .9rem;max-width:62ch}
.playbook ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.playbook li{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
             border:1px solid var(--rule);border-radius:var(--r);padding:.3rem .65rem}
@media (max-width:760px){.playbook article{grid-template-columns:1fr;gap:.8rem}}

/* ---- social reach ---- */
.reach{display:grid;gap:1.2rem 2.4rem;align-items:start;margin:2rem 0 0;
       grid-template-columns:auto auto 1fr}
.reach div{min-width:0}
.reach b{display:block;font-family:var(--disp);font-size:clamp(2.6rem,4vw,3.8rem);line-height:.95;
         font-weight:600;letter-spacing:-.02em;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.reach span{display:block;margin-top:.35rem;font-size:.75rem;letter-spacing:.1em;
            text-transform:uppercase;color:var(--on-dark-2)}
.reach p{margin:0;font-size:.92rem;color:var(--on-dark);max-width:46ch}
@media (max-width:760px){
  .reach{grid-template-columns:1fr 1fr}
  .reach p{grid-column:1/-1}
}

/* ---- client work: one big, two small, the before/after across the bottom ---- */
.work-band{padding-bottom:6rem}
.work{width:var(--wrap-wide);margin:2.6rem auto 0;display:grid;gap:1rem;
      grid-template-columns:repeat(6,1fr);grid-auto-rows:272px}
.work figure{margin:0;min-width:0;display:grid;grid-template-rows:1fr auto;row-gap:.65rem}
.work img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);background:var(--deep);
          filter:contrast(1.04);min-height:0}
.work figcaption{font-size:.8rem;letter-spacing:.02em;color:var(--on-dark-2);margin:0}
.work .big{grid-column:1/5;grid-row:1/3}
.work .s1{grid-column:5/7;grid-row:1}
.work .s2{grid-column:5/7;grid-row:2}
.work .ba{grid-column:1/-1;grid-row:3/5}
.work .ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:0}
.work .ba .pair div{min-width:0;min-height:0;display:grid;grid-template-rows:1fr auto;row-gap:.5rem}
.work .ba .pair span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media (max-width:1000px){
  .work{grid-template-columns:repeat(2,1fr);grid-auto-rows:250px}
  .work .big{grid-column:1/3;grid-row:1/3}
  .work .s1{grid-column:1;grid-row:3}
  .work .s2{grid-column:2;grid-row:3}
  .work .ba{grid-column:1/3;grid-row:4/6}
}
@media (max-width:640px){
  .work{grid-template-columns:1fr;grid-auto-rows:auto;width:calc(100% - 2rem)}
  .work .big,.work .s1,.work .s2,.work .ba{grid-column:1;grid-row:auto}
  .work img{height:240px}
  .work .ba .pair{grid-template-columns:1fr}
}

/* ---- process ---- */
.steps{display:grid;gap:2rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.steps div{border-top:1px solid rgba(212,178,90,.3);padding-top:1.2rem}
.steps b{display:block;font-family:var(--disp);font-size:3.4rem;line-height:.9;letter-spacing:-.02em;
         color:rgba(230,200,108,.5);margin-bottom:.9rem}
.steps h3{color:var(--cream);margin:0 0 .5rem;font-size:1.08rem}
.steps p{margin:0;font-size:.9rem;color:var(--on-dark-2)}

/* ---- faq ---- */
.faq{border-top:1px solid rgba(244,239,227,.16)}
.faq details{border-bottom:1px solid rgba(244,239,227,.16)}
.faq summary{cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-family:var(--disp);font-size:1.16rem;
             color:var(--cream);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
                    color:var(--gold);font-family:var(--sans);font-size:1.3rem;font-weight:300}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--on-dark);font-size:.94rem;margin:0 0 1.1rem;max-width:74ch}

/* ---- market scarcity ---- */
.scarcity{position:relative;isolation:isolate;border:1px solid rgba(244,239,227,.2);
          border-radius:var(--r);padding:4.2rem 1.6rem;text-align:center;overflow:hidden}
.scarcity::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/img/cs-gen3-aerial.jpg") center/cover no-repeat;opacity:.26}
.scarcity::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 120% at 50% 0%,rgba(24,40,24,.58),rgba(7,12,7,.94))}
.scarcity .pill{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:.35rem .8rem;
                border-radius:var(--r);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4rem}
.scarcity h2{margin-bottom:.8rem}
.scarcity p{margin-inline:auto}
.scarcity .fine{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin-top:.9rem}

/* ---- arrival ---- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    section > .wrap > h2,section > .wrap > .lede,.work figure,.clients a,.proof article,
    .steps div,.people a,.playbook article,.stats div,.scarcity{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
    @keyframes rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  }
}

@media (max-width:1000px){.clients{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.clients{grid-template-columns:1fr}}