/* ==========================================================================
   Sinarchie Media — site stylesheet
   One file, every page. Colour ratio roughly 60% black, 30% white, 10% yellow.
   Yellow marks actions and key figures only. It never fills a panel.
   ========================================================================== */
:root{
  --black:#000;--white:#fff;--grey:#86868b;--dim:#a1a1a6;
  --hair:rgba(255,255,255,.14);--hair-d:rgba(0,0,0,.13);
  --volt:#FCE300;--pad:clamp(22px,4.4vw,120px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--white);
  font-family:'Archivo',-apple-system,system-ui,sans-serif;line-height:1.55;
  overflow-x:clip;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--volt);color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
img,video{display:block;max-width:100%}

/* ---------- scroll-driven dot field ---------- */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease}
#stage.lit{opacity:1}
#gl{width:100%;height:100%;display:block}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:58px;display:flex;
  align-items:center;justify-content:space-between;padding:0 var(--pad);
  backdrop-filter:saturate(180%) blur(20px);background:rgba(0,0,0,.72);
  transition:background .4s ease,color .4s ease}
.nav.light{background:rgba(255,255,255,.88);color:#000}
.nav.light .nav-links > a,.nav.light .drop > a{color:#1d1d1f}
.nav.light .mark i{color:#000}
.mark{font-weight:800;font-stretch:64%;letter-spacing:.06em;font-size:16px;flex:none}
.mark i{font-style:normal;color:var(--volt);transition:color .4s ease}
.nav-links{display:flex;gap:24px;font-size:13.5px;color:var(--dim);align-items:center}
.nav-links > a:hover,.drop > a:hover{opacity:.62}
.nav-links a.here{color:var(--volt)}
.nav.light .nav-links a.here{color:#000;font-weight:700}
.pill{background:var(--volt);color:#000!important;font-weight:700;padding:9px 18px;border-radius:99px}
.pill:hover{opacity:.88}
.drop{position:relative}
.drop > a{color:var(--dim);display:inline-flex;align-items:center;gap:5px}
.drop-menu{position:absolute;top:32px;left:-18px;min-width:250px;background:#0d0d0c;
  border:1px solid var(--hair);border-radius:14px;padding:8px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:95}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:block;padding:9px 13px;border-radius:9px;font-size:13.5px;color:#ddd}
.drop-menu a:hover{background:rgba(252,227,0,.12);color:#fff}
.drop-menu .sep{height:1px;background:var(--hair);margin:7px 13px}
.burger{display:none;width:34px;height:34px;align-items:center;justify-content:center;font-size:19px}
@media(max-width:1120px){
  .nav-links{position:fixed;top:58px;left:0;right:0;background:#070706;flex-direction:column;
    align-items:stretch;gap:0;padding:10px var(--pad) 24px;border-bottom:1px solid var(--hair);
    display:none;max-height:calc(100svh - 58px);overflow:auto}
  .nav-links.open{display:flex}
  .nav-links > a,.drop > a{padding:13px 0;border-bottom:1px solid var(--hair);color:#ddd!important}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;
    background:transparent;padding:0 0 8px 14px;min-width:0}
  .drop-menu .sep{display:none}
  .pill{margin-top:16px;text-align:center}
  .burger{display:flex}
}

/* ---------- layout ---------- */
section{position:relative;z-index:10}
main{position:relative;z-index:10}
.light-sec{background:var(--white);color:#000}
.light-sec .lede,.light-sec .tiny{color:#5d5d62}
.pad{padding:clamp(70px,10vh,140px) var(--pad)}
.mid{width:100%;margin:0}
.narrow{max-width:78ch;margin:0}
.centre{text-align:center;margin-left:auto;margin-right:auto}
h1,h2,h3{font-weight:700;letter-spacing:-.028em;line-height:1.04}
h1{font-size:clamp(2.4rem,6.4vw,6.6rem);font-stretch:104%}
h2{font-size:clamp(1.8rem,4.4vw,4.1rem)}
h3{font-size:clamp(1.22rem,2.2vw,1.8rem);letter-spacing:-.02em}
.lede{font-size:clamp(1.02rem,1.6vw,1.46rem);color:var(--dim);line-height:1.5;max-width:46ch}
.tiny{font-size:12.5px;color:var(--grey);line-height:1.6}
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--volt);margin-bottom:14px}
.light-sec .kicker{color:#000;background:var(--volt);display:inline-block;padding:4px 11px;border-radius:99px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.centre .cta-row{justify-content:center}
.b{padding:14px 30px;border-radius:99px;font-size:15px;font-weight:700;display:inline-block;
  transition:transform .18s ease,opacity .2s ease}
.b:active{transform:scale(.97)}
.b-fill{background:var(--volt);color:#000}
.b-fill:hover{opacity:.87}
.b-line{border:1px solid var(--hair);color:var(--white)}
.light-sec .b-line{border-color:var(--hair-d);color:#000}

/* ---------- video hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000}
.hero.short{min-height:62svh}
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;filter:brightness(.5)}
.hero .scrim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.5)}
.hero .inner{position:relative;z-index:2;padding:130px var(--pad) 76px;width:100%;margin:0}
.hero.short .inner{padding:120px var(--pad) 56px}
.pillars{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.pillars span{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:var(--volt);color:#000;border-radius:99px;padding:7px 15px}
.hero h1{max-width:17ch}
.hero h1 em{font-style:normal;color:var(--volt)}
.hero .lede{margin-top:22px;max-width:54ch;color:#e6e6e6}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11.5px;color:#b9b9b9;letter-spacing:.1em}

/* page header for pages without video */
.phead{padding:150px var(--pad) clamp(50px,7vh,86px);position:relative;z-index:10}
.phead h1{max-width:18ch}
.phead .lede{margin-top:20px;max-width:56ch}
.crumb{font-size:12.5px;color:var(--grey);margin-bottom:18px}
.crumb a:hover{color:var(--volt)}

/* ---------- the feeling statement ---------- */
.statement{font-size:clamp(1.7rem,4.4vw,3.9rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.14;max-width:20ch}
.statement em{font-style:normal;color:var(--volt)}
.light-sec .statement em{color:#000;box-shadow:inset 0 -.36em 0 var(--volt)}

/* ---------- ladder ---------- */
.ladder{display:flex;flex-direction:column;gap:11px;margin-top:38px}
.rung{border:1px solid var(--hair);border-radius:16px;padding:22px 26px;
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  align-items:center;background:linear-gradient(90deg,rgba(252,227,0,.09),transparent 58%);
  transition:border-color .25s ease,transform .25s ease}
.rung:hover{border-color:var(--volt);transform:translateX(5px)}
.light-sec .rung{border-color:var(--hair-d);background:linear-gradient(90deg,rgba(252,227,0,.16),transparent 58%)}
.rung:nth-child(1){width:100%}.rung:nth-child(2){width:95%}
.rung:nth-child(3){width:88%}.rung:nth-child(4){width:79%}
@media(max-width:800px){.rung{grid-template-columns:1fr;gap:9px;width:100%!important}}
.rung b{font-size:1.14rem;font-weight:800;letter-spacing:-.02em;display:block}
.rung b span{display:block;font-size:12px;font-weight:600;color:var(--volt);margin-top:5px;letter-spacing:.04em}
.light-sec .rung b span{color:#8a7a00}
.rung p{font-size:14.8px;color:var(--dim);line-height:1.55}
.light-sec .rung p{color:#4a4a4d}

/* ---------- pillars / alternating blocks ---------- */
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,78px);align-items:center}
.pillar.flip .pv{order:2}
@media(max-width:900px){.pillar{grid-template-columns:1fr}.pillar.flip .pv{order:0}}
.pv{border-radius:18px;overflow:hidden;position:relative;margin:0}
.pv img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pv .no{position:absolute;top:18px;left:18px;background:var(--volt);color:#000;
  font-size:12px;font-weight:800;letter-spacing:.06em;padding:5px 12px;border-radius:99px}
.turn{margin-top:20px;font-size:clamp(1.04rem,1.8vw,1.4rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;max-width:30ch}
.turn span{color:var(--volt)}
.light-sec .turn span{color:#000;box-shadow:inset 0 -.36em 0 var(--volt)}
.plist{margin-top:26px;list-style:none;border-top:1px solid var(--hair)}
.light-sec .plist{border-color:var(--hair-d)}
.plist li{padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px;display:flex;gap:14px}
.light-sec .plist li{border-color:var(--hair-d);color:#3a3a3d}
.plist li b{color:var(--volt);font-weight:800;flex:none;font-size:13px;padding-top:2px}
.light-sec .plist li b{color:#000}

/* ---------- services grid ---------- */
.offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--hair-d);
  border:1px solid var(--hair-d);margin-top:40px}
@media(max-width:900px){.offer{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.offer{grid-template-columns:1fr}}
.off{background:#fff;padding:28px 24px 30px;display:flex;flex-direction:column;
  transition:background .25s ease}
.off:hover{background:#fafaf7}
.off b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8a8a;margin-bottom:12px}
.off h3{font-size:1.26rem;margin-bottom:9px}
.off p{font-size:14.5px;color:#4a4a4d;line-height:1.55;flex:1}
.off .go{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;
  border-bottom:2px solid var(--volt);padding-bottom:2px;align-self:flex-start}

/* ---------- counters ---------- */
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,6vw,90px);
  margin-top:clamp(40px,6vh,74px)}
@media(max-width:820px){.counts{grid-template-columns:1fr;gap:44px}}
.big-fig{font-size:clamp(3rem,8.2vw,7.6rem);font-weight:800;font-stretch:70%;
  line-height:.9;letter-spacing:-.03em;display:flex;align-items:baseline}
.big-fig .u{font-size:.34em;font-stretch:86%;color:var(--volt);margin-left:.05em}
.big-fig .p{font-size:.4em;font-stretch:86%;color:var(--volt);margin-right:.03em}
.counts p{margin-top:16px;font-size:14.5px;color:var(--dim);max-width:26ch;line-height:1.5}
.light-sec .counts p{color:#5d5d62}

/* ---------- work cards ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:40px}
@media(max-width:980px){.cases{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cases{grid-template-columns:1fr}}
.case{border-radius:18px;overflow:hidden;position:relative;background:#0b0b0a;
  border:1px solid var(--hair);display:flex;flex-direction:column;transition:border-color .25s ease}
.case:hover{border-color:var(--volt)}
.light-sec .case{border-color:var(--hair-d)}
.case img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover img{transform:scale(1.05)}
.case .im{overflow:hidden}
.case .body{padding:22px 22px 24px;background:#0b0b0a}
.light-sec .case .body{background:#fff}
.case .res{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800;font-stretch:68%;
  color:var(--volt);line-height:1;letter-spacing:-.02em}
.light-sec .case .res{color:#000;box-shadow:inset 0 -.28em 0 var(--volt);display:inline-block}
.case .who{margin-top:12px;font-size:15.5px;font-weight:700}
.case .what{margin-top:6px;font-size:13.8px;color:var(--grey);line-height:1.5}
.light-sec .case .what{color:#5d5d62}
.case .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.case .tags span{font-size:11.5px;font-weight:600;border:1px solid var(--hair);
  border-radius:99px;padding:4px 10px;color:var(--grey)}
.light-sec .case .tags span{border-color:var(--hair-d)}

/* ---------- studio shots ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media(max-width:900px){.shots{grid-template-columns:1fr}}
.shot{border-radius:16px;overflow:hidden;position:relative;margin:0}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);font-size:14.5px;font-weight:600}

/* ---------- steps ---------- */
.stage-row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:clamp(16px,4vw,60px);padding:clamp(22px,4vh,38px) 0;border-top:1px solid var(--hair);align-items:start}
.light-sec .stage-row{border-color:var(--hair-d)}
.stage-row:first-of-type{border-top:0;padding-top:0}
.when{font-size:clamp(1.04rem,1.9vw,1.38rem);font-weight:700;letter-spacing:-.02em;
  color:var(--volt);line-height:1.15}
.light-sec .when{color:#000}
.when small{display:block;font-size:12.5px;font-weight:500;color:var(--grey);margin-top:6px}
.stage-body h4{font-size:clamp(1.18rem,2.1vw,1.62rem);font-weight:700;letter-spacing:-.024em;margin-bottom:11px}
.stage-body p{font-size:clamp(14.5px,1.3vw,16.4px);color:var(--dim);max-width:62ch;line-height:1.6}
.light-sec .stage-body p{color:#4a4a4d}
.stage-body p+p{margin-top:11px}
@media(max-width:820px){.stage-row{grid-template-columns:1fr;gap:12px}
  .when{display:flex;align-items:baseline;gap:11px}.when small{margin-top:0}}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(26px,4vw,64px);
  margin-top:42px;align-items:start}
@media(max-width:940px){.calc{grid-template-columns:1fr}}
.roles{display:flex;flex-direction:column;gap:8px}
.role{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--hair);border-radius:12px;padding:14px 17px;text-align:left;
  transition:border-color .18s ease,background .18s ease}
.role:hover{border-color:#6a6a6a}
.role.on{border-color:var(--volt);background:rgba(252,227,0,.07)}
.role .rl b{display:block;font-size:15px;font-weight:600}
.role .rl span{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}
.role .tick{width:21px;height:21px;border-radius:99px;border:1px solid #4a4a4a;flex:none;
  display:grid;place-items:center;font-size:11px;color:transparent}
.role.on .tick{background:var(--volt);border-color:var(--volt);color:#000;font-weight:800}
.sal-note{margin-top:14px;font-size:12.5px;color:var(--grey);line-height:1.6}
.panel{border:1px solid var(--hair);border-radius:18px;padding:clamp(22px,3vw,32px);position:sticky;top:78px}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:14.5px}
.line span{color:var(--dim);max-width:26ch}
.line b{font-weight:600;white-space:nowrap}
.line.minus b{color:#7fbf7f}
.line.total{border-bottom:0;padding-top:18px;margin-top:6px;border-top:1px solid var(--hair)}
.line.total span{color:var(--white);font-weight:600;font-size:15px}
.line.total b{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;font-stretch:70%;
  letter-spacing:-.02em;color:var(--volt)}
.verdict{margin-top:20px;font-size:clamp(1rem,1.8vw,1.22rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.35}
.verdict em{font-style:normal;color:var(--volt)}
.assume{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:12px;color:#6b6b70;line-height:1.65}
.assume b{color:#9a9a9f}
.capture{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.capture input{flex:1;min-width:190px;background:transparent;border:1px solid var(--hair);
  border-radius:99px;padding:12px 18px;font:inherit;font-size:14.5px;color:#fff}
.capture input::placeholder{color:#5f5f63}
.capture input:focus{outline:none;border-color:var(--volt)}

/* ---------- forms ---------- */
.f{margin-bottom:15px}
.f label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.f label .req{color:var(--volt)}
.light-sec .f label .req{color:#b39b00}
.f input,.f select,.f textarea{width:100%;background:transparent;color:inherit;
  border:1px solid var(--hair);border-radius:11px;padding:13px 15px;font:inherit;font-size:15px}
.light-sec .f input,.light-sec .f select,.light-sec .f textarea{border-color:var(--hair-d);background:#fff}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--volt)}
.f textarea{min-height:104px;resize:vertical}
.f .hint{font-size:12.5px;color:var(--grey);margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.field-row{grid-template-columns:1fr}}
.formmsg{margin-top:14px;font-size:14px;font-weight:600;display:none}

/* ---------- misc ---------- */
.quote{max-width:26ch;font-size:clamp(1.6rem,4vw,2.9rem);font-weight:700;
  letter-spacing:-.028em;line-height:1.15;margin:0 auto}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,70px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.box{border:2px solid var(--volt);border-radius:20px;padding:clamp(24px,4vw,42px)}
.box ul{list-style:none;margin-top:16px}
.box li{padding:8px 0 8px 24px;position:relative;font-size:15px;color:var(--dim)}
.light-sec .box li{color:#4a4a4d}
.box li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:2px;background:var(--volt)}
.ph{border-bottom:2px dashed var(--volt);font-weight:600;padding-bottom:1px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:var(--volt);color:#000;padding:4px 11px;border-radius:99px;margin-bottom:14px}

/* ---------- footer ---------- */
footer{background:var(--black);color:var(--grey);padding:56px var(--pad) 46px;
  font-size:13px;position:relative;z-index:10;border-top:1px solid var(--hair)}
.f-grid{width:100%;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.f-grid h4{color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:14px}
.f-grid a,.f-grid p{display:block;font-size:13.5px;margin-bottom:8px;color:var(--grey)}
.f-grid a:hover{color:var(--volt)}
.f-base{width:100%;margin:38px 0 0;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#5f5f63}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero video{display:none}
  .shot img,.case img,.rung{transition:none}
}

/* ---------- services laid out as the Ladder ---------- */
.ladder-services{margin-top:36px}
.rungsec{margin-bottom:22px;border:1px solid var(--hair-d);border-radius:18px;overflow:hidden;
  background:linear-gradient(90deg,rgba(252,227,0,.14),transparent 60%);transition:border-color .25s ease}
.rungsec:hover{border-color:var(--volt)}
@media(max-width:900px){.rungsec{width:100%!important}}
.rungsec-head{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(14px,3vw,40px);padding:24px 26px;align-items:center}
@media(max-width:760px){.rungsec-head{grid-template-columns:1fr;gap:8px}}
.rungsec-head b{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;display:block}
.rungsec-head b span{display:block;font-size:12px;font-weight:700;color:#8a7a00;
  margin-top:5px;letter-spacing:.06em;text-transform:uppercase}
.rungsec-head p{font-size:14.8px;color:#4a4a4d;line-height:1.55}
.rungsec .offer{margin-top:0;border:0;border-top:1px solid var(--hair-d);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rungsec .off{background:rgba(255,255,255,.86)}
.rungsec .off:hover{background:#fff}

/* ---------- featured case study ---------- */
.cases.featured{grid-template-columns:repeat(2,1fr)}
.cases.featured > :first-child{grid-column:1 / -1}
.cases.featured > :first-child .im img{aspect-ratio:21/9}
.cases.featured > :first-child .res{font-size:clamp(2.4rem,5vw,3.6rem)}
@media(max-width:820px){.cases.featured{grid-template-columns:1fr}
  .cases.featured > :first-child .im img{aspect-ratio:3/2}}

/* ---------- veil over the dot field so type stays readable ---------- */
#stage::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:none}

/* ---------- hero pillars: white words, yellow dots ---------- */
.pillars{display:flex;gap:0;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.pillars span{background:none;color:#fff;border-radius:0;padding:0;
  font-size:clamp(13px,1.15vw,15.5px);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pillars span + span::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:99px;background:var(--volt);margin:0 clamp(12px,1.4vw,20px) 3px}

/* ---------- the ladder widget ---------- */
.ladder-stage{position:relative;height:340vh}
.ladder-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  justify-content:center;padding:0 var(--pad)}
.ladder-wrap{width:100%;max-width:1000px;display:block}
@media(max-width:900px){.ladder-stage{height:300vh}}
.ladder-copy{position:relative;min-height:clamp(300px,42vh,380px)}
.lcopy{position:absolute;inset:0;opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.lcopy .rungname,.lcopy .rungsub,.lcopy p,.lcopy .does{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lcopy.on .rungname{opacity:1;transform:none;transition-delay:.06s}
.lcopy.on .rungsub{opacity:1;transform:none;transition-delay:.16s}
.lcopy.on p{opacity:1;transform:none;transition-delay:.24s}
.lcopy.on .does{opacity:1;transform:none;transition-delay:.32s}
.lcopy.on{opacity:1;transform:none;pointer-events:auto}
.lcopy .rungname{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--volt)}
.lcopy .rungsub{display:block;font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-top:16px}
.lcopy p{margin-top:22px;font-size:clamp(16px,1.5vw,19px);color:var(--dim);
  line-height:1.6;max-width:52ch}
.lcopy .does{margin-top:18px;font-size:14px;color:var(--grey);max-width:46ch}
.lcopy .does b{color:#fff;font-weight:600}
.ladder-progress{display:flex;gap:8px;margin-top:44px;padding-top:26px;
  border-top:1px solid var(--hair)}
.ladder-progress span{height:3px;width:38px;border-radius:99px;background:#2f2f2a;transition:background .4s ease}
.ladder-progress span.on{background:var(--volt)}

/* ---------- services index on the homepage, as a list ---------- */
.svc-list{margin-top:40px;border-top:1px solid var(--hair)}
.svc-item{display:grid;grid-template-columns:minmax(0,4rem) minmax(0,1fr) minmax(0,1.05fr) minmax(0,3rem);
  gap:clamp(14px,3vw,44px);align-items:center;padding:clamp(20px,2.6vh,30px) 0;
  border-bottom:1px solid var(--hair);transition:padding-left .35s cubic-bezier(.2,.7,.2,1),background .35s ease}
.svc-item:hover{padding-left:18px;background:rgba(252,227,0,.05)}
.svc-item .n{font-size:12.5px;font-weight:800;color:var(--grey);letter-spacing:.06em}
.svc-item h3{font-size:clamp(1.35rem,2.7vw,2.1rem);letter-spacing:-.028em}
.svc-item .rung-tag{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--volt);margin-top:7px}
.svc-item p{font-size:15px;color:var(--dim);line-height:1.55;max-width:44ch}
.svc-item .arrow{font-size:22px;color:var(--grey);text-align:right;transition:color .3s ease,transform .3s ease}
.svc-item:hover .arrow{color:var(--volt);transform:translateX(6px)}
@media(max-width:860px){
  .svc-item{grid-template-columns:minmax(0,3rem) minmax(0,1fr);gap:12px 16px}
  .svc-item p{grid-column:2}.svc-item .arrow{display:none}}


/* ---------- client logo strip ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--hair);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);margin-top:38px}
.logo-cell{background:var(--black);min-height:118px;display:flex;align-items:center;
  justify-content:center;padding:22px 18px;text-align:center;transition:background .3s ease}
.logo-cell:hover{background:#0c0c0b}
.logo-cell span{font-size:clamp(13px,1.2vw,15.5px);font-weight:800;letter-spacing:.04em;
  color:#c9c9c4;line-height:1.35;transition:color .3s ease}
.logo-cell:hover span{color:var(--volt)}
.logo-cell img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.8);
  opacity:.8;transition:opacity .3s ease,filter .3s ease}
.logo-cell:hover img{opacity:1;filter:none}

/* counters directly under the hero */
.counts.top{margin-top:0}
.counts.top .big-fig{font-size:clamp(2.6rem,6.6vw,5.4rem)}

/* ---------- hire vs retain comparison ---------- */
.compare-note{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--volt);
  border-radius:14px;padding:16px 20px;margin-top:26px;background:rgba(252,227,0,.07)}
.compare-note b{color:var(--volt);font-weight:800;flex:none;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.compare-note p{font-size:14.6px;color:#e2e2e2;line-height:1.55;max-width:70ch}
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,26px);
  align-items:stretch;margin-top:26px}
@media(max-width:900px){.compare{grid-template-columns:1fr;gap:12px}}
.cc{border:1px solid var(--hair);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.cc.ours{border:2px solid var(--volt);background:rgba(252,227,0,.05)}
.cc .cc-tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);margin-bottom:12px}
.cc.ours .cc-tag{color:var(--volt)}
.cc h4{font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.cc .sub{font-size:13.5px;color:var(--grey);line-height:1.5;margin-bottom:18px}
.cc .fig{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;font-stretch:70%;
  letter-spacing:-.03em;line-height:1;margin-top:auto}
.cc .fig small{display:block;font-size:.26em;font-stretch:100%;font-weight:600;
  color:var(--grey);margin-top:10px;letter-spacing:0}
.cc.ours .fig{color:var(--volt)}
.cc ul{list-style:none;margin-top:16px;font-size:13.6px;color:var(--dim)}
.cc li{padding:5px 0 5px 18px;position:relative;line-height:1.5}
.cc li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:var(--volt)}
.cc.theirs li::before{background:#4a4a46}
.vs{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  letter-spacing:.14em;color:var(--grey);text-transform:uppercase}
@media(max-width:900px){.vs{padding:4px 0}}
.saving{margin-top:22px;border-top:1px solid var(--hair);padding-top:22px;
  font-size:clamp(1rem,1.8vw,1.24rem);font-weight:600;letter-spacing:-.015em;line-height:1.4}
.saving em{font-style:normal;color:var(--volt)}


/* ---------- tabbed pricing ---------- */
.ptabs{display:flex;gap:9px;flex-wrap:wrap;margin-top:32px}
.ptab{border:1px solid var(--hair);border-radius:11px;padding:12px 20px;
  font-weight:600;font-size:14.5px;transition:border-color .18s,background .18s,color .18s}
.ptab:hover{border-color:#fff}
.ptab.on{background:var(--volt);color:#000;border-color:var(--volt);font-weight:700}
.light-sec .ptab{border-color:var(--hair-d)}
.light-sec .ptab:hover{border-color:#000}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;margin-top:32px;align-items:start}
.pcard{border:1px solid var(--hair-d);border-radius:18px;padding:28px 26px 26px;
  display:flex;flex-direction:column;height:100%;background:#fff;position:relative}
.pcard.hl{border:2px solid var(--volt);padding:27px 25px 25px}
.pbadge{display:inline-block;background:var(--volt);color:#000;font-size:11.5px;font-weight:800;
  letter-spacing:.03em;padding:4px 12px;border-radius:99px;margin-bottom:14px;align-self:flex-start}
.pbadge.quiet{background:#f1f1ee;color:#3a3a3a}
.pcard h3{margin-bottom:7px;font-size:1.34rem}
.pcard .who{font-size:14px;color:#5d5d62;line-height:1.5;margin-bottom:20px}
.pprice{border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);
  padding:18px 0;margin-bottom:20px}
.pprice .ex{font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.pprice .ex small{font-size:.4em;font-weight:700;color:#5d5d62;letter-spacing:0}
.pprice .inc{display:block;margin-top:9px;font-size:14px;color:#5d5d62;font-weight:600}
.pcard ul{list-style:none;margin-bottom:22px}
.pcard li{font-size:14.2px;color:#3a3a3d;padding:6px 0 6px 20px;position:relative;line-height:1.5}
.pcard li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:2px;background:var(--volt)}
.pcard .pterm{font-size:12.5px;color:#5d5d62;margin-bottom:18px;line-height:1.45}
.pcard .b{margin-top:auto;text-align:center}
.pfoot{margin-top:26px;font-size:13px;color:#5d5d62;line-height:1.6;max-width:72ch}

/* ---------- service tiles with imagery ---------- */
.stiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:38px}
.stile{border:1px solid var(--hair);border-radius:18px;overflow:hidden;display:flex;
  flex-direction:column;background:#0b0b0a;transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.stile:hover{border-color:var(--volt);transform:translateY(-4px)}
.stile .im{overflow:hidden;position:relative}
.stile img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:grayscale(.35)}
.stile:hover img{transform:scale(1.05);filter:none}
.stile .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.stile h3{font-size:1.24rem;margin-bottom:8px}
.stile p{font-size:14.4px;color:var(--dim);line-height:1.55;flex:1}
.stile .go{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--volt);
  transition:transform .3s ease;display:inline-block}
.stile:hover .go{transform:translateX(5px)}


/* ==========================================================================
   PHRIVE FIXES
   Changes to Stefan's original stylesheet, kept in one block at the end so
   the difference from the supplied file stays obvious. Dated and explained.
   ========================================================================== */

/* 10 Sep 2026 — Ladder progress marks rendered on top of the stage copy.
   Cause: every .lcopy is position:absolute, so the only in-flow child of
   .ladder-copy was .ladder-progress, which therefore sat at the top of the
   box and behind the text. A second effect of the same rule was that the box
   could not grow to fit its content, so on narrow screens the copy overflowed
   the fixed min-height.
   Both were hidden until the Ladder started activating stages at all.
   Fix: stack the stages in one grid cell instead of absolutely positioning
   them. The row grows to the tallest stage, and the progress marks fall into
   the row beneath, which is where the design puts them. min-height is kept as
   a floor so short stages do not make the section jump. */
.ladder-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  position:relative;
}
.lcopy{
  position:relative;
  inset:auto;
  grid-row:1;
  grid-column:1;
  align-self:start;
}
.ladder-progress{
  grid-row:2;
  grid-column:1;
}

/* 10 Sep 2026 — Images ignored their aspect-ratio and rendered at whatever
   shape the original photograph happened to be, which left tall black gaps
   under the studio shots and made the service tiles uneven.
   Cause: WordPress writes width and height attributes onto every image it
   renders. The height attribute is a presentational hint that sets a real
   used height, and CSS aspect-ratio only applies when height is auto. The
   prototype's hand-written markup carried no such attributes, so its ratios
   worked. Keeping the attributes is worth it, since they are what stops the
   page jumping about while images load, so restore auto height instead of
   stripping them. */
.stile img,
.shot img,
.case .im img,
.cases.featured > :first-child .im img,
.pv img{
  height:auto;
}