/* v2: editorial layer */
:root{--muted:#b9bcbc}
.grad{background:none;-webkit-text-fill-color:#fff;color:#fff}
.green{color:var(--green-l)}
.lead{color:#e1e3e3}
body{color:#f4f4f4}
p{color:inherit}
.eyebrow{color:var(--green-l);font-size:13px}
/* green sections: black dots + black nodes */
.on-green::before{display:none}
.gnet{display:none}
.on-green>.wrap,.on-green>.footer{position:relative;z-index:1}
.on-green .eyebrow,.finale .eyebrow{color:var(--on-green)}
.on-green .eyebrow::before,.finale .eyebrow::before{background:var(--on-green)}
.on-green .lead,.on-green p,.finale .lead{color:rgba(4,18,10,.9)}
.finale{position:relative;overflow:hidden}
/* hero */
.hero .h1{font-size:clamp(32px,4.7vw,68px);max-width:760px;line-height:1.02}
.hero-copy .lead{max-width:540px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 28px;font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#d7d9d9}
.hero-meta span{display:flex;align-items:center;gap:10px}
.hero-meta span::before{content:"";width:8px;height:8px;background:var(--green);transform:rotate(45deg)}
/* statement */
.tagline p{font-size:clamp(26px,4.4vw,60px)}
/* service rows */
.rows{border-top:1px solid var(--line2)}
.srow{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr) 52px;gap:24px;align-items:center;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--line2);position:relative;transition:padding .6s var(--ease),background-color .4s}
.srow:hover{background:rgba(41,166,74,.09);padding-inline:clamp(12px,2vw,28px)}
.r-n{font:700 14px/1 var(--display);color:var(--green-l);letter-spacing:.08em}
.r-t{font:700 clamp(22px,3.6vw,52px)/1.05 var(--display);text-wrap:balance}
.r-d{color:#d3d6d6;font-size:16px;line-height:1.5;max-width:38ch}
.r-a{justify-self:end;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background-color .4s,transform .6s var(--ease),color .3s}
.r-a svg{width:18px;height:18px}
.srow:hover .r-a{background:var(--green);color:var(--on-green);border-color:var(--green);transform:rotate(-45deg)}
/* principles */
.prin{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.prin-l{position:sticky;top:120px;display:grid;gap:24px}
.prin-list{border-bottom:1px solid var(--line2)}
.prin-list li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:24px;padding-block:28px;border-top:1px solid var(--line2)}
.prin-list b{font:700 clamp(18px,1.8vw,24px)/1.15 var(--display)}
.prin-list p{color:#d3d6d6}
/* visual frames */
.frames{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(200px,23vw,330px);gap:16px}
.fr{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:#000}
.fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fr:hover img{transform:scale(1.04)}
.f1{grid-column:1/6;grid-row:1/3}.f2{grid-column:6/10}.f3{grid-column:10/13}.f4{grid-column:6/9}.f5{grid-column:9/13}
.f1 img{object-position:50% 20%}.f2 img{object-position:50% 25%}
.fr-note{margin-top:20px;color:#c9cccc;font-size:15px;max-width:60ch}
/* budget on green */
.bud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.bud-list{border-top:2px solid var(--on-green)}
.bud-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(14px,1.6vw,22px) 0;border-bottom:2px solid var(--on-green);font:700 clamp(22px,3.2vw,44px)/1 var(--display);color:var(--on-green)}
.bud-list li small{font:500 15px/1.3 var(--body);color:rgba(4,18,10,.85);text-align:right;max-width:20ch}
.gsec{padding-block:var(--sec)}
/* service page */
.sp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:end}
.sp-hero .h1{font-size:clamp(32px,5.2vw,72px);margin-block:var(--sp-5)}
.sp-media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--s2);aspect-ratio:5/4;position:relative}
.sp-media>img{width:100%;height:100%;object-fit:cover}
.sp-media.map{display:grid;place-items:center;padding:clamp(8px,2vw,24px)}
.sp-media.map::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(41,166,74,.34) 1.5px,transparent 1.5px);background-size:32px 32px;opacity:.6}
.sp-media svg{position:relative;width:100%;height:auto}
.map-lines path{stroke-dasharray:5 9;animation:dash 7s linear infinite}
@keyframes dash{to{stroke-dashoffset:-140}}
.make li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;padding-block:24px;border-top:1px solid var(--line2);align-items:baseline}
.make li:last-child{border-bottom:1px solid var(--line2)}
.make b{font:700 clamp(18px,1.9vw,26px)/1.15 var(--display)}
.make p{color:#d3d6d6;max-width:56ch}
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tools span{padding:10px 18px;border:1px solid var(--line2);border-radius:999px;font-weight:500;color:#e6e8e8;background:rgba(255,255,255,.03)}
.nextsvc{display:grid;gap:12px}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.two>.sec-head{position:sticky;top:120px;margin:0}
/* about */
.big-q{font:700 clamp(24px,3.8vw,52px)/1.12 var(--display);max-width:22ch;text-wrap:balance}
.statement-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
.statement-grid>div{border-top:2px solid var(--green);padding-top:24px;display:grid;gap:16px}
.statement-grid h3{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green-l)}
.statement-grid p{font-size:clamp(18px,1.9vw,24px);line-height:1.45;color:#eef0f0}
.facts p{color:#e1e3e3}
/* form */
.form{background:#101010;border:1px solid var(--line2);padding:clamp(22px,4vw,48px);gap:32px}
.lbl{font:700 14px/1.2 var(--body);color:#f0f1f1;display:block;margin-bottom:8px}
.lbl em{font-style:normal;font-weight:400;color:var(--muted)}
.field>label{color:#f0f1f1}
.input{background:#0a0a0a;border:1px solid rgba(255,255,255,.24);min-height:54px;border-radius:14px}
.input::placeholder{color:#8d9090}
.fs{display:block}
.dd{position:relative}
.dd-btn{width:100%;min-height:54px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:#0a0a0a;border:1px solid rgba(255,255,255,.24);border-radius:14px;color:#8d9090;font:400 16px/1.3 var(--body);transition:border-color .3s}
.dd-btn.has{color:#fff}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--green)}
.dd-btn i{flex:none;width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-3px) rotate(45deg);transition:transform .4s var(--ease)}
.dd.open .dd-btn i{transform:translateY(2px) rotate(225deg)}
.dd-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:#141414;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:8px;display:grid;gap:2px;max-height:320px;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .4s var(--ease),visibility 0s .25s}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s var(--ease)}
.dd-opt{position:relative;display:block}
.dd-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.dd-opt span{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 12px;border-radius:10px;color:#e6e8e8;font:500 16px/1.2 var(--body);transition:background-color .2s}
.dd-opt:hover span{background:rgba(255,255,255,.07)}
.dd-opt input:focus-visible+span{outline:2px solid var(--green-l);outline-offset:-2px}
.dd-opt span::after{content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35);flex:none}
.dd[data-kind=radio] .dd-opt span::after{border-radius:50%}
.dd-opt input:checked+span{color:#fff;background:rgba(41,166,74,.18)}
.dd-opt input:checked+span::after{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--green)}
.fs.bad .dd-btn{border-color:#ff6b6b}
.contact-side .pv{margin-top:24px}
@media (max-width:1024px){
  .f1{grid-column:1/7}.f2{grid-column:7/13}.f3{grid-column:1/5}.f4{grid-column:5/9}.f5{grid-column:9/13}.f1{grid-row:auto}
}
@media (max-width:820px){
  .srow{grid-template-columns:40px minmax(0,1fr) 44px;gap:8px 16px}
  .srow .r-d{grid-column:2/3;grid-row:2}
  .srow .r-a{grid-row:1/3;grid-column:3;width:44px;height:44px}
  .prin,.bud,.sp-hero,.two,.statement-grid{grid-template-columns:1fr}
  .prin-l,.two>.sec-head{position:static}
  .prin-list li,.make li{grid-template-columns:1fr;gap:8px}
  .frames{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(200px,52vw,300px)}
  .f1,.f2,.f3,.f4,.f5{grid-column:auto;grid-row:auto}
  .f1{grid-column:1/3}
  .hero-meta{font-size:12px}
}
@media (hover:none){.row-prev{display:none}}
/* how we work: pinned, scroll driven */
.flow{height:430dvh;position:relative}
.flow-pin{position:sticky;top:0;height:100dvh;display:flex;align-items:center;overflow:hidden}
.flow-in{display:grid;gap:clamp(20px,5vh,56px);position:relative}
.flow-stage{position:relative;min-height:clamp(260px,46vh,440px);display:grid;align-items:center}
.flow-num{position:absolute;inset:0;pointer-events:none}
.fn{position:absolute;right:0;top:50%;font:700 clamp(170px,32vw,460px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(59,197,95,.55);opacity:0;transform:translateY(-28%) scale(.92);transition:opacity .9s var(--ease),transform 1.2s var(--ease);white-space:nowrap}
.fn.is-on{opacity:1;transform:translateY(-50%) scale(1)}
.fn.is-past{opacity:0;transform:translateY(-72%) scale(1.06)}
.flow-items{position:relative;z-index:1;max-width:660px;display:grid}
.fi{grid-area:1/1;opacity:0;transform:translateY(36px);filter:blur(8px);transition:opacity .8s var(--ease),transform 1s var(--ease),filter .8s var(--ease);pointer-events:none}
.fi.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.fi.is-past{transform:translateY(-36px)}
.fi h3{font:700 clamp(44px,8.4vw,116px)/.95 var(--display);margin-bottom:clamp(16px,3vh,28px)}
.fi p{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:#e6e8e8;max-width:44ch}
.flow-rail{display:grid;gap:14px}
.flow-line{height:2px;background:rgba(255,255,255,.2);position:relative}
.flow-fill{position:absolute;inset:0;background:var(--green);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 14px rgba(59,197,95,.7)}
.flow-marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fm{display:flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;color:#9fa3a3;font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;transition:color .5s;text-align:left;min-height:44px}
.fm i{width:9px;height:9px;border:1.5px solid currentColor;transform:rotate(45deg);transition:background-color .5s,border-color .5s,transform .6s var(--ease);flex:none}
.fm.is-done{color:#d4d7d7}.fm.is-done i{background:#d4d7d7;border-color:#d4d7d7}
.fm.is-on{color:var(--green-l)}.fm.is-on i{background:var(--green);border-color:var(--green);transform:rotate(45deg) scale(1.5)}
.flow.flow-static,html:not(.js) .flow{height:auto}
.flow-static .flow-pin,html:not(.js) .flow-pin{position:static;height:auto;display:block;padding-block:var(--sec)}
.flow-static .fi,html:not(.js) .fi{grid-area:auto;opacity:1;transform:none;filter:none;margin-bottom:40px}
.flow-static .flow-items,html:not(.js) .flow-items{display:block}
.flow-static .flow-num,.flow-static .flow-rail,html:not(.js) .flow-num,html:not(.js) .flow-rail{display:none}
@media (max-width:820px){
  .fn{-webkit-text-stroke-width:1px;opacity:0}
  .fn.is-on{opacity:.85}
  .fm span{font-size:11px;letter-spacing:.08em}.fm{gap:6px}
}
/* service row widths */
.srow{grid-template-columns:64px minmax(0,1.7fr) minmax(0,1fr) 52px}
.r-t{font-size:clamp(22px,3.2vw,46px);transition:transform .7s var(--ease)}
.srow:hover .r-t{transform:translateX(14px)}
/* premium motion */
.btn{transition:transform .5s var(--ease),translate .6s var(--ease),background-color .3s,box-shadow .3s,color .3s}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.sw>.si{display:inline-block;will-change:transform}
.js .sp.rv{opacity:1;transform:none}
.js .sp .si{transform:translate3d(0,112%,0) rotate(4deg);transform-origin:0 100%}
.js .sp.in .si{transform:none;transition:transform 1.15s var(--ease) calc(var(--d,0ms) + var(--i)*55ms)}
.js .fr.rv,.js .sp-media.rv,.js .pv.rv{opacity:1;transform:none;clip-path:inset(14% 7% 14% 7% round 24px);transition:clip-path 1.5s var(--ease) var(--d,0ms)}
.js .fr.rv.in,.js .sp-media.rv.in,.js .pv.rv.in{clip-path:inset(0 round 24px)}
.js .fr.rv img,.js .sp-media.rv>img,.js .pv.rv img{transform:scale(1.28);transition:transform 2s var(--ease) var(--d,0ms)}
.js .fr.rv.in img,.js .sp-media.rv.in>img,.js .pv.rv.in img{transform:scale(1)}
.js .fr.rv.in:hover img,.js .sp-media.rv.in:hover>img,.js .pv.rv.in:hover img{transform:scale(1.045);transition-duration:1.4s;transition-delay:0ms}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:150;background:var(--green-l);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;box-shadow:0 0 10px rgba(59,197,95,.8)}
@media (prefers-reduced-motion:reduce){
  .js .sp .si{transform:none}
  .js .fr.rv,.js .sp-media.rv,.js .pv.rv{clip-path:none}
  .js .fr.rv img,.js .sp-media.rv>img,.js .pv.rv img{transform:none}
  .curtain,.progress{display:none}
}

/* ---- row preview: eased in/out ---- */
.row-prev{position:fixed;left:0;top:0;width:260px;aspect-ratio:4/5;pointer-events:none;z-index:60;will-change:transform}
.row-in{position:absolute;inset:0;border-radius:20px;overflow:hidden;border:1px solid var(--line2);background:#000;opacity:0;transform:scale(.86) rotate(-3deg);clip-path:inset(12% 10% 12% 10% round 20px);transition:opacity .55s cubic-bezier(.65,0,.35,1),transform .7s cubic-bezier(.65,0,.35,1),clip-path .7s cubic-bezier(.65,0,.35,1)}
.row-prev.on .row-in{opacity:1;transform:scale(1) rotate(0);clip-path:inset(0 round 20px)}
.row-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.row-in img.hide{opacity:0}
/* ---- page transition: columns ---- */
.curtain{position:fixed;inset:0;z-index:400;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none;visibility:hidden}
.curtain i{background:#0a0a0a;transform:translateY(101%);box-shadow:0 -2px 0 var(--green);transition:transform .75s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--k)*55ms)}
.curtain img{position:absolute;left:50%;top:50%;width:clamp(56px,8vw,92px);transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .4s ease .3s,transform .7s var(--ease) .25s}
.curtain.go{visibility:visible}
.curtain.go i{transform:none}
.curtain.go img{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pt-load .curtain{visibility:visible}
.pt-load .curtain i{transform:none;transition:none}
.pt-load .curtain img{opacity:1;transform:translate(-50%,-50%);transition:none}
.curtain.up{visibility:visible}
.curtain.up i{transform:translateY(-101%);transition:transform .8s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--k)*55ms + 150ms)}
.curtain.up img{opacity:0;transform:translate(-50%,-50%) scale(1.1);transition:opacity .3s ease,transform .5s var(--ease)}
/* ---- reel ---- */
.reel{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
.rc{flex:none;width:clamp(220px,23vw,320px);aspect-ratio:4/5;margin-right:16px;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#000}
.rc img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1.4s var(--ease)}
.rc:hover img{transform:scale(1.05)}
@keyframes reel{to{transform:translateX(-50%)}}
/* ---- faq ---- */
.faq summary{outline:none;-webkit-tap-highlight-color:transparent;transition:color .3s}
.faq summary:focus-visible{color:var(--green-l)}
.faq summary:hover{color:var(--green-l)}
.faq .ans{overflow:hidden;height:0;transition:height .55s var(--ease)}
.faq details[open] .ans{height:auto}
.faq .ans p{padding-bottom:24px;opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .55s var(--ease)}
.faq details.is-open .ans p{opacity:1;transform:none}
/* ---- plan builder ---- */
.plan{background:#0a0a0a;color:#f4f6f5;border-radius:28px;padding:clamp(22px,3vw,40px);display:grid;gap:clamp(22px,2.6vw,32px);box-shadow:0 30px 60px -30px rgba(4,18,10,.55)}
.plan-row{display:grid;gap:14px}
.plan-l{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#9aa3a0}
.plan-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:600 15px/1 var(--body);color:#e9eeec;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:12px 18px;min-height:44px;cursor:pointer;transition:background-color .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.chip:hover{border-color:var(--green-l);transform:translateY(-2px)}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--green);border-color:var(--green);color:var(--on-green)}
.chip:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}
.plan-amt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.plan-n{font:700 clamp(44px,6vw,76px)/1 var(--body);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.plan-t{font:500 14px/1 var(--body);color:#9aa3a0}
.plan-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;--p:37.5%}
.plan-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--green) var(--p),rgba(255,255,255,.16) var(--p))}
.plan-range::-moz-range-track{height:6px;border-radius:6px;background:rgba(255,255,255,.16)}
.plan-range::-moz-range-progress{height:6px;border-radius:6px;background:var(--green)}
.plan-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:6px solid var(--green);margin-top:-11px;transition:transform .3s var(--ease)}
.plan-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--green)}
.plan-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.plan-range:focus-visible{outline:2px solid var(--green-l);outline-offset:4px;border-radius:8px}
.plan-ticks{display:flex;justify-content:space-between;font:500 13px/1 var(--body);color:#9aa3a0;margin-top:-6px}
.plan-sum{font:500 clamp(18px,1.7vw,22px)/1.45 var(--body);color:#dfe5e2;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);margin:0}
.plan-sum b{color:#fff;font-weight:700}
.plan-sum .p-b{color:var(--green-l)}
.plan-go{justify-self:start}
.plan-note{font:400 13px/1.5 var(--body);color:#9aa3a0;margin:0}
@media (max-width:760px){.plan{border-radius:22px}.chip{font-size:14px;padding:11px 15px}.plan-go{justify-self:stretch;text-align:center;justify-content:center}}
@media (prefers-reduced-motion:reduce){.reel-track{animation:none}.row-in{transition:opacity .2s}.faq .ans{transition:none}}
.on-green .plan .plan-sum,.on-green .plan p.plan-sum{color:#dfe5e2}
.on-green .plan .plan-sum b{color:#fff}
.on-green .plan .plan-sum .p-b{color:var(--green-l)}
.on-green .plan .plan-note{color:#9aa3a0}
.on-green .plan .btn.plan-go{background:var(--green);color:var(--on-green);border-color:var(--green)}
.on-green .plan .plan-l,.on-green .plan .plan-t{color:#9aa3a0}
.on-green .plan .plan-n{color:#fff}
/* green think section + bento on black */
.on-green .prin-list,.on-green .prin-list li{border-color:rgba(4,18,10,.55)}
.on-green .prin-list p{color:rgba(4,18,10,.9)}
.on-green .prin-list b{color:var(--on-green)}
.frames{grid-auto-rows:clamp(200px,23vw,330px)}
.f3 img{object-position:50% 30%}.f4 img{object-position:50% 40%}.f5 img{object-position:50% 40%}
.plan-need .lbl{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#9aa3a0;margin-bottom:12px;display:block}
.plan-need .lbl em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500}
.plan .dd-btn{background:#141414}
.on-green .plan .dd-opt span{color:#e9eeec}
/* equal vertical rhythm */
.sec,.gsec,.tagline,.finale{padding-block:var(--sec)!important}
.sec:not(.gsec)+.sec:not(.gsec){padding-top:0!important}
.sec-head{margin-bottom:clamp(40px,5vw,64px)}
.phero{padding-bottom:var(--sec)}
.phero+.sec{padding-top:0!important}
/* one button size */
.btn,.btn.sm,.btn.ghost,.on-green .btn,.on-green .btn.ghost,.nav-links .btn{box-sizing:border-box;height:52px;min-height:52px;padding:0 28px;font:700 16px/1 var(--body);border:1.5px solid transparent;white-space:nowrap}
.btn.ghost{border-color:var(--line2)}
.on-green .btn.ghost{border-color:var(--on-green)}
.on-green .btn:not(.ghost){border-color:var(--on-green)}
.on-green .plan .btn.plan-go{border-color:var(--green)}
@media (max-width:760px){.nav-links .btn{height:52px}}
/* octo left on desktop */
@media (min-width:1025px){.hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.hero-art{order:-1}}
/* faq icon follows our own class so open and close stay in step */
.faq details[open] summary i{background:transparent;border-color:var(--line2);transform:none}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#fff}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq summary i,.faq summary i::before,.faq summary i::after{transition:transform .45s var(--ease),background-color .3s,border-color .3s}
.faq details.is-open summary i{background:var(--green);border-color:var(--green);transform:rotate(180deg)}
.faq details.is-open summary i::before,.faq details.is-open summary i::after{background:var(--on-green)}
.faq details.is-open summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
/* bento: green black green black checkerboard */
.frames{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(260px,29vw,420px)}
.f1,.f2,.f3,.f4,.f5,.f6{grid-column:auto;grid-row:auto}
.f1 img{object-position:50% 85%}.f2 img{object-position:50% 60%}.f3 img{object-position:50% 78%}.f4 img{object-position:50% 70%}.f5 img{object-position:50% 70%}
.f6{background:#0a0a0a;display:grid;align-content:end;padding:clamp(20px,2.4vw,32px)}
.f6 p{font:700 clamp(18px,1.9vw,26px)/1.25 var(--display);color:#f4f4f4;max-width:18ch;text-wrap:balance}
@media (max-width:760px){.frames{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(220px,54vw,300px)}.fr:nth-child(3){order:4}.fr:nth-child(4){order:3}.f6{padding:14px}.f6 p{font:700 12px/1.35 var(--display);max-width:none}}
/* transition: all green */
.curtain i{background:var(--green);box-shadow:none}
.curtain img{filter:brightness(0)}
/* services rows: transform and opacity only, no reflow on hover */
.srow{background:none!important}
.srow:hover{padding-inline:0;background:none!important}
.srow::before{content:"";position:absolute;inset:0 calc(-1*clamp(12px,2vw,28px));border-radius:18px;background:rgba(41,166,74,.1);opacity:0;transform:scaleY(.9);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1);pointer-events:none;z-index:0}
.srow:hover::before{opacity:1;transform:none}
.srow>*{position:relative;z-index:1}
.srow .r-t,.srow .r-n,.srow .r-d{transition:transform .6s cubic-bezier(.65,0,.35,1),color .4s ease;will-change:transform}
.srow:hover .r-t{transform:translateX(14px)}
.srow:hover .r-n{transform:translateX(6px)}
.srow .r-a{transition:transform .6s cubic-bezier(.65,0,.35,1),background-color .4s ease,color .4s ease,border-color .4s ease}
/* light protection: no drag, save or select on images and display text */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,.contact-list,.contact-list *,.footer a[href^="mailto"],.footer a[href^="tel"],.legal,.legal *{-webkit-user-select:text;user-select:text}
.fr,.rc,.row-prev,.hero-art{-webkit-touch-callout:none}
.f6{align-content:center;justify-items:center;text-align:center}
.f6 p{font-size:clamp(16px,1.6vw,22px);max-width:20ch;margin:0 auto}
@media (max-width:760px){.f6 p{font-size:12px;max-width:none}}
/* transition direction: in from the top, out through the bottom */
.curtain i{transform:translateY(-101%)}
.curtain.go i{transform:none}
.pt-load .curtain i{transform:none}
.curtain.up i{transform:translateY(101%)}
.rc img{object-position:50% 70%}
/* steps hover matches the service rows */
.step{position:relative;background:none!important}
.step::before{content:"";position:absolute;inset:0 calc(-1*clamp(12px,2vw,28px));border-radius:18px;background:rgba(41,166,74,.1);opacity:0;transform:scaleY(.9);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1);pointer-events:none;z-index:0}
.step:hover::before{opacity:1;transform:none}
.step>*{position:relative;z-index:1}
.step .n,.step h3{transition:transform .6s cubic-bezier(.65,0,.35,1),color .4s ease;will-change:transform}
.step:hover h3{transform:translateX(14px)}
.step:hover .n{transform:translateX(6px);color:var(--green-l)}
@media (hover:none){.step::before{display:none}.step:hover h3,.step:hover .n{transform:none}}
/* hover highlights: square, inside the row lines */
.srow::before,.step::before{inset:0;border-radius:0;transform:scaleX(.96);transform-origin:left center}
.srow:hover::before,.step:hover::before{transform:none}
/* transition from a green area: site dark with the coloured logo */
.curtain.dark i{background:#0a0a0a}
.curtain.dark img{filter:none}
/* cursor: small dot, ring opens around links so it never sits on top of text */
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px}
.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;transition:opacity .25s ease,border-color .2s ease,width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1),background-color .3s}
html.cursor-link .cursor-dot{opacity:0!important}
html.cursor-link .cursor-ring{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(41,166,74,.12)}
html.cursor-link.cursor-onBg .cursor-ring{background:rgba(4,18,10,.1)}
html.cursor-link.cursor-onGreen .cursor-ring{background:rgba(255,255,255,.08)}
/* nav: glowing animated underline, no grey pill */
.nav-links a:not(.btn),.nav-links a:not(.btn):hover{background:none!important}
.nav-links a:not(.btn)::after,.nav-links a[aria-current=page]:not(.btn)::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--green-l);box-shadow:0 0 10px rgba(59,197,95,.85),0 0 2px rgba(59,197,95,1);transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current=page]:not(.btn)::after{transform:scaleX(1);transform-origin:left center}
@media (max-width:900px){.nav-links a:not(.btn)::after{left:0;right:auto;width:48px;bottom:4px}}
/* animated underline on text links (footer etc.) */
.footer a:not(.btn):not(.logo){text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-position:100% 100%;background-repeat:no-repeat;transition:background-size .5s cubic-bezier(.65,0,.35,1),color .3s}
.footer a:not(.btn):not(.logo):hover,.footer a:not(.btn):not(.logo):focus-visible{background-size:100% 1.5px;background-position:0 100%}
.on-green a:not(.btn){text-decoration:none}
/* new images */
.wide-img{border-radius:var(--r-xl,24px);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:#000}
.wide-img img{width:100%;height:100%;object-fit:cover}
.side-img{border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;margin-bottom:24px;background:#000}
.side-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.wide-img{aspect-ratio:4/3}}
/* legal pages */
.legal-hero{padding-bottom:clamp(32px,4vw,56px)!important}
.legal-sec{padding-top:0!important}
.legal-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.legal-side{position:sticky;top:120px;display:grid;gap:20px;padding:28px;border:1px solid var(--line);border-radius:20px;background:#101010}
.legal-toc{display:grid;gap:4px;counter-reset:t}
.legal-toc li{counter-increment:t}
.legal-toc a{display:flex;gap:12px;padding:8px 0;color:#cfd3d1;font:500 15px/1.3 var(--body);transition:color .3s}
.legal-toc a::before{content:counter(t,decimal-leading-zero);color:var(--green-l);font:700 12px/1.6 var(--display);min-width:22px}
.legal-toc a:hover{color:#fff}
.legal-ask{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px}
.legal-ask p{color:#9aa3a0;font-size:14px}
.legal-ask a{color:var(--green-l);font-weight:700;font-size:15px;word-break:break-all}
.legal{max-width:760px}
.legal h2:first-child{margin-top:0}
.legal h2{scroll-margin-top:110px}
.finale.legal-end{padding-top:0!important;padding-bottom:0!important}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-side{position:static}}
.finale:not(:has(.cta)){padding-top:0!important;padding-bottom:0!important}
/* no scroll progress line */
.progress{display:none!important}
/* nav hover: glowing text and underline */
.nav-links a:not(.btn){transition:color .35s ease,text-shadow .45s ease}
.nav-links a:not(.btn):hover{color:#fff;text-shadow:0 0 12px rgba(59,197,95,.9),0 0 2px rgba(59,197,95,.6)}
.nav-links a:not(.btn)::after{height:2px;box-shadow:0 0 14px 1px rgba(59,197,95,.95),0 0 4px rgba(59,197,95,1)}
/* back to top */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:120;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--green);background:#0a0a0a;color:var(--green-l);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility .45s,background-color .3s,color .3s,box-shadow .4s}
.totop svg{width:20px;height:20px;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--green);color:var(--on-green);box-shadow:0 0 18px rgba(59,197,95,.6)}
.totop:hover svg{transform:translateY(-3px)}
.totop:active{transform:scale(.94)}
.totop:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}
.totop.on-g{border-color:var(--on-green)}
.totop.on-g:hover{background:#fff;color:var(--on-green);border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.75),0 0 6px rgba(255,255,255,.9)}
/* back to top: white glow only on hover, everywhere */
.totop,.totop.on-g{background:#0a0a0a;color:#fff;border-color:rgba(255,255,255,.35)}
.totop:hover,.totop.on-g:hover{background:#0a0a0a;color:#fff;border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.7),0 0 6px rgba(255,255,255,.9)}
/* bento: quicker reveal */
.js .fr.rv{transition:clip-path .9s var(--ease) var(--d,0ms)}
.js .fr.rv img{transform:scale(1.12);transition:transform 1.1s var(--ease) var(--d,0ms)}
/* back to top: fills white on hover */
.totop:hover,.totop.on-g:hover{background:#fff;color:#0a0a0a;border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.6)}
/* budget slider: no focus box, no text caret */
.plan-range,.plan-range:focus,.plan-range:focus-visible{outline:none!important;box-shadow:none;border-radius:0}
.plan-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(59,197,95,.25)}
.plan-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px rgba(59,197,95,.25)}
.plan,.plan *{-webkit-user-select:none;user-select:none;caret-color:transparent}
/* let magnetic buttons move without being clipped */
.cta,.finale,.gsec,.on-green{overflow:visible}
body{overflow-x:clip}
/* finale: two columns, no double gap */
.finale .cta{padding:0!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.finale .cta-copy{padding-bottom:0;max-width:760px}
.finale{padding-bottom:0!important}
.finale .footer{margin-top:var(--sec)}
.cta-side{background:#0a0a0a;border-radius:28px;padding:clamp(8px,1vw,12px) clamp(20px,2.4vw,32px);display:grid}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:auto auto;column-gap:16px;row-gap:6px;align-items:center;padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff!important;text-decoration:none!important;background:none!important}
.cs-row:last-child{border-bottom:0}
.cs-row small{grid-column:1;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#9aa3a0}
.cs-row span{grid-column:1;font:600 clamp(16px,1.5vw,19px)/1.3 var(--body);color:#fff;word-break:break-word}
.cs-row i{grid-column:2;grid-row:1/3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:background-color .4s,color .4s,border-color .4s,transform .6s cubic-bezier(.65,0,.35,1)}
.cs-row i svg{width:16px;height:16px}
.cs-row:hover i{background:var(--green);border-color:var(--green);color:var(--on-green);transform:rotate(-45deg)}
.cs-row:hover span{color:var(--green-l)}
.cs-row span{transition:color .3s}
@media (max-width:900px){.finale .cta{grid-template-columns:1fr}}
/* page heroes: headline left, intro right, so wide screens are not half empty */
@media (min-width:1025px){
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero)){display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);column-gap:clamp(40px,6vw,120px);align-items:end}
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>.eyebrow{grid-column:1;grid-row:1}
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>.h1{grid-column:1;grid-row:2;margin-bottom:0}
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>.lead{grid-column:2;grid-row:2;align-self:end;max-width:46ch;padding-bottom:.4em}
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>*:nth-child(n+4){grid-column:1/-1}
}
@media (min-width:1025px){
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>.h1{max-width:none}
  .phero:not(.legal-hero)>.wrap:not(:has(.sp-hero))>*:nth-child(n+4){justify-self:start;margin-top:32px}
}
/* orb tile in the bento */
.f6.f6i{padding:0;display:block;background:#000}
.f6.f6i img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* services planning image: smaller */
.phero+.sec .wide-img{aspect-ratio:auto;height:clamp(200px,24vw,340px);max-width:980px}
/* transition from green carries over to the next page */
.pt-dark .curtain i{background:#0a0a0a}
.pt-dark .curtain img{filter:none}
/* bento: identical frames so every card reads the same size and the gaps look even */
.frames{gap:16px}
.fr{border:0!important;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fr img{position:relative;z-index:0}
.fr::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none;z-index:1}
.f4 img{transform-origin:30% 60%}
.js .fr.f4.rv.in img{transform:scale(1.18) translateX(9%)}
.js .fr.f6i.rv.in img{transform:scale(1.12) translateX(-6%)}
.js .fr.f4.rv.in img{transform:scale(1.04) translateX(4%)}
/* never show the text I beam outside form fields */
html,body,body *{cursor:default}
a,button,summary,label,.chip,.dd-btn,.dd-opt,.srow,.cs-row,.totop,[role=button]{cursor:pointer}
.plan-range{cursor:grab}
.plan-range:active{cursor:grabbing}
input:not([type=range]):not([type=radio]):not([type=checkbox]),textarea{cursor:text}
html.has-cursor,html.has-cursor *{cursor:none!important}
/* budget card: real hand pointer instead of the custom cursor */
html.cursor-native .cursor-dot,html.cursor-native .cursor-ring{opacity:0!important}
html.has-cursor .plan,html.has-cursor .plan *{cursor:pointer!important}
html.has-cursor .plan .plan-range:active{cursor:grabbing!important}
#enquiry{scroll-margin-top:110px}
/* transition reset without a reverse sweep */
.curtain.reset i,.curtain.reset img{transition:none!important}
/* budget card: custom cursor on the card, hand only on the slider */
html.has-cursor .plan,html.has-cursor .plan *:not(.plan-range){cursor:none!important}
html.has-cursor .plan .plan-range{cursor:grab!important}
html.has-cursor .plan .plan-range:active{cursor:grabbing!important}
/* wide images match the text edges */
.phero+.sec .wide-img{max-width:none;width:100%}
/* back to top: hollow stroke, green on dark, black on green, white on hover */
.totop,.totop.on-g{background:transparent!important;box-shadow:none;border:1.5px solid var(--green-l);color:var(--green-l)}
.totop.on-g{border-color:var(--on-green);color:var(--on-green)}
.totop:hover,.totop.on-g:hover{background:#fff!important;border-color:#fff;color:#0a0a0a;box-shadow:0 0 22px rgba(255,255,255,.55)}
/* previous / next on service pages */
.pn{display:grid}
.pn-prev .r-a svg{transform:rotate(180deg)}
.pn-prev:hover .r-a{transform:rotate(45deg)}
/* faq: one smooth curve for open and close */
.faq details[open] .ans{height:auto}
.faq .ans{height:0;overflow:hidden;transition:height .6s cubic-bezier(.65,0,.35,1)}
.faq details[open] .ans{height:0}
.faq .ans p{transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1)}
.faq summary i,.faq summary i::before,.faq summary i::after{transition:transform .6s cubic-bezier(.65,0,.35,1),background-color .4s ease,border-color .4s ease}
/* previous / next label column */
.pn .srow{grid-template-columns:120px minmax(0,1.7fr) minmax(0,1fr) 52px}
@media (max-width:760px){.pn .srow{grid-template-columns:minmax(0,1fr) 44px}.pn .r-n{grid-column:1}.pn .r-t{grid-column:1}.pn .r-d{display:none}.pn .r-a{grid-column:2;grid-row:1/3}}
.faq .ans{padding-bottom:0!important}
.faq .ans p{padding-bottom:28px}
/* back to top: bolder stroke, white on green */
.totop,.totop.on-g{border-width:2.5px}
.totop.on-g{border-color:#fff;color:#fff}
.totop.on-g:hover{background:#fff!important;border-color:#fff;color:var(--on-green)}
/* back to top: solid white outline and arrow on green, no fade */
html body .totop.on-g{border:2.5px solid #fff!important;color:#fff!important;background:transparent!important;opacity:1}
html body .totop.on-g svg{stroke:#fff!important}
html body .totop.on-g:hover{background:#fff!important;color:#04120a!important}
html body .totop.on-g:hover svg{stroke:#04120a!important}
html body .totop:not(.on-g){border:2.5px solid var(--green-l)!important;color:var(--green-l)!important}
html body .totop:not(.on-g):hover{background:#fff!important;border-color:#fff!important;color:#0a0a0a!important}
/* nav hover glow: stronger and not covered by the cursor */
.nav-links a:not(.btn):hover{text-shadow:0 0 14px rgba(59,197,95,1),0 0 4px rgba(59,197,95,.8)}
/* inner page titles: lighter */
.phero:not(.legal-hero) .h1{font-size:clamp(36px,5.4vw,80px);line-height:1.02}
/* scrollbar: thin, visible while scrolling on desktop, hidden on phones */
html{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .6s ease}
html.scrolling{scrollbar-color:rgba(59,197,95,.85) transparent}
@media (hover:none),(pointer:coarse){
  html{scrollbar-width:none}
  ::-webkit-scrollbar{display:none;width:0;height:0}
}
/* Safari has no custom scrollbar styling here, so macOS uses its native overlay bar, which fades when idle */
/* nav hover: glow on the underline only, text stays plain */
.nav-links a:not(.btn):hover,.nav-links a:not(.btn){text-shadow:none!important}
/* nav: plain underline on hover, glowing underline only on the current page */
.nav-links a:not(.btn)::after{box-shadow:none!important;background:var(--green-l)}
.nav-links a[aria-current=page]:not(.btn)::after{box-shadow:0 0 14px 1px rgba(59,197,95,.95),0 0 4px rgba(59,197,95,1)!important}
/* page transition: always green, with the logo's dark green as an offset layer behind */
.curtain i,.curtain.dark i,.pt-dark .curtain i{background:var(--green)!important;box-shadow:0 14vh 0 0 #057f49,0 -14vh 0 0 #057f49}
.curtain img,.curtain.dark img,.pt-dark .curtain img{filter:brightness(0)!important}
/* hero headline: one colour per line */
.hero-h .hl{display:block;white-space:nowrap}
.hero-h{font-size:clamp(38px,6.2vw,96px)}
@media (max-width:420px){.hero-h{font-size:clamp(32px,10.4vw,48px)}}
.hero-h{font-size:clamp(34px,5.3vw,84px)}
@media (max-width:420px){.hero-h{font-size:9.6vw}}
.hero .hero-h{font-size:clamp(30px,4vw,60px);max-width:none}
@media (max-width:1024px){.hero .hero-h{font-size:7vw}}
@media (max-width:420px){.hero .hero-h{font-size:8.6vw}}
.hero .hero-h{font-size:clamp(30px,4vw,56px)}
@media (max-width:420px){.hero .hero-h{font-size:8.1vw}}
/* transition: dark green bands are part of each column, so they slide in and out with it */
.curtain{align-items:start;overflow:hidden}
.curtain i,.curtain.dark i,.pt-dark .curtain i{box-shadow:none!important;height:calc(100vh + 28vh);margin-top:-14vh;background:linear-gradient(to bottom,#057f49 0,#057f49 14vh,var(--green) 14vh,var(--green) calc(100% - 14vh),#057f49 calc(100% - 14vh))!important;transform:translateY(-100%)}
.curtain.go i,.pt-load .curtain i{transform:none}
.curtain.up i{transform:translateY(100%)}
/* about reel: smooth reveal instead of popping in */
.js .reel.rv{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.js .reel.rv.in{opacity:1;transform:none}
.js .reel.rv .rc{opacity:0;transform:scale(.94);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.js .reel.rv.in .rc{opacity:1;transform:none}
.js .reel.rv.in .rc:nth-child(2){transition-delay:.08s}.js .reel.rv.in .rc:nth-child(3){transition-delay:.16s}.js .reel.rv.in .rc:nth-child(4){transition-delay:.24s}.js .reel.rv.in .rc:nth-child(n+5){transition-delay:.32s}
/* typewriter tagline */
.tw-line{font:700 clamp(40px,7vw,104px)/1 var(--display);color:var(--green-l);margin:0 0 clamp(32px,4vw,56px);display:flex;align-items:center;min-height:1.1em;white-space:nowrap}
.tw-caret{display:inline-block;width:.07em;height:.9em;margin-left:.08em;background:var(--green-l);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-caret{animation:caret 1s steps(1) infinite!important;animation-duration:1s!important;animation-iteration-count:infinite!important}}
.tagline .tw-line{font:700 clamp(44px,8vw,120px)/1 var(--display);color:var(--green-l);max-width:none}
/* ---- uniform text: balanced headings, pretty body, soft justify on long copy ---- */
h1,h2,h3,.h1,.h2,.h3,.f-big,.r-t{text-wrap:balance}
p,li,.lead,.r-d,summary{text-wrap:pretty}
@media (min-width:900px){
  .legal p,.faq .ans p,.two p,.prin-list p,.make p,.step p,.lead,.r-d,.plan-sum,.f-brand p{text-align:justify;text-align-last:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:-.01em}
}
/* ---- mobile service rows: number, title and text stacked full width ---- */
@media (max-width:760px){
  .srow{grid-template-columns:minmax(0,1fr) 44px!important;gap:8px 16px}
  .srow .r-n{grid-column:1;grid-row:1}
  .srow .r-t{grid-column:1;grid-row:2}
  .srow .r-d{grid-column:1;grid-row:3;max-width:none}
  .srow .r-a{grid-column:2;grid-row:1/4;align-self:center}
}
/* ---- mobile footer: compact two column grid ---- */
@media (max-width:760px){
  .f-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:32px 20px!important}
  .f-brand{grid-column:1/-1}
  .f-col:last-child{grid-column:1/-1}
  .f-col:last-child ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
}
.prin-list li{grid-template-columns:minmax(0,220px) minmax(0,1fr)!important;column-gap:32px}
.prin-list b{font-size:clamp(16px,1.5vw,21px);overflow-wrap:anywhere}
@media (max-width:760px){.prin-list li{grid-template-columns:1fr!important}}
/* 404 */
.nf{min-height:100dvh;display:flex;align-items:center;padding-block:clamp(120px,16vh,180px) var(--sec)}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,120px);align-items:center}
.nf-copy{display:grid;gap:24px}
.nf-copy .h1{font-size:clamp(36px,5vw,76px);margin:0}
.nf-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.nf-side{background:#101010;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);display:grid;gap:16px;position:relative;overflow:hidden}
.nf-num{font:700 clamp(96px,13vw,190px)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--green);letter-spacing:-.02em;margin-bottom:8px}
.nf-l{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#9aa3a0}
.nf-links{display:grid;border-top:1px solid var(--line)}
.nf-links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:#e9eeec;font:600 16px/1.2 var(--body);transition:color .3s,padding .5s cubic-bezier(.65,0,.35,1)}
.nf-links a::after{content:"\2192";color:var(--green-l);transition:transform .5s cubic-bezier(.65,0,.35,1)}
.nf-links a:hover{color:var(--green-l)}
.nf-links a:hover::after{transform:translateX(4px)}
@media (max-width:900px){.nf-grid{grid-template-columns:1fr}.nf-cta .btn{width:100%}}
.nf-side{grid-template-columns:minmax(0,1fr)}
.nf-num{font-size:clamp(80px,8.6vw,140px)}
/* html sitemap */
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sm-col{background:#101010;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,2.6vw,36px);display:grid;gap:16px;align-content:start}
.sm-h{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green-l)}
.sm-col ul{display:grid;border-top:1px solid var(--line)}
.sm-col a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:#e9eeec;font:600 16px/1.2 var(--body);transition:color .3s}
.sm-col a::after{content:"\2192";color:var(--green-l);transition:transform .5s cubic-bezier(.65,0,.35,1)}
.sm-col a:hover{color:var(--green-l)}.sm-col a:hover::after{transform:translateX(4px)}
@media (max-width:900px){.sm-grid{grid-template-columns:1fr}}
.sm-grid{align-items:start}
.legal-sec:has(.sm-grid){padding-bottom:clamp(64px,7vw,96px)!important}
.f-brand p{text-align:left!important}
/* bento hover zoom works on every card, including the re-centred ones */
.js .fr.rv.in img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.js .fr.rv.in:hover img{transform:scale(1.06)}
.js .fr.f4.rv.in:hover img{transform:scale(1.1) translateX(4%)}
.js .fr.f6i.rv.in:hover img{transform:scale(1.18) translateX(-6%)}
.tw-caret{display:none!important}
/* contact form: tighter country code, consent text beside the button */
.phone{grid-template-columns:72px minmax(0,1fr)!important}
.phone input[name=countryCode]{text-align:center;padding-inline:8px}
.form-foot{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px}
.form-foot small{max-width:46ch}
@media (max-width:560px){.form-foot{grid-template-columns:1fr}}
/* ticker and about reel keep moving on hover */
.ticker:hover .ticker-track,.ticker-track:hover,.reel:hover .reel-track,.reel-track:hover{animation-play-state:running!important}
/* no justify on intros and short copy; only the long legal text stays justified on desktop */
.lead,.r-d,.plan-sum,.prin-list p,.step p,.make p,.two p,.faq .ans p,.f-brand p{text-align:left!important;word-spacing:normal!important}
@media (max-width:899px){.legal p{text-align:left!important;word-spacing:normal!important}}
/* ===== 14:41 batch ===== */
/* scrollbar: thumb sits inside a dark track; on green sections it flips dark on green */
html{scrollbar-width:thin;scrollbar-color:rgba(59,197,95,0) #0a0a0a}
html.scrolling{scrollbar-color:var(--green-l) #0a0a0a}
html.sb-g{scrollbar-color:rgba(4,18,10,0) var(--green)}
html.sb-g.scrolling{scrollbar-color:#04120a var(--green)}
/* hero typewriter and swapped tagline heading */
.hero .hero-tw{font-size:clamp(44px,7.4vw,112px);color:var(--green-l);min-height:1.05em;white-space:nowrap;max-width:none}
.tag-h{font:700 clamp(34px,5.2vw,80px)/1.02 var(--display);margin:0 0 clamp(32px,4vw,56px);letter-spacing:-.01em}
.tag-h .hl{display:block}
.tag-h .green{color:var(--green-l)}
@media (max-width:420px){.hero .hero-tw{font-size:12.5vw}.tag-h{font-size:8.4vw}}
/* social icons */
.soc{display:flex!important;gap:10px;align-items:center}
.soc-i{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;background:none!important;transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .5s cubic-bezier(.65,0,.35,1)}
.soc-i svg{width:18px;height:18px}
.on-green .soc-i,.finale .soc-i{color:var(--on-green);border-color:var(--on-green)}
.on-green .soc-i:hover,.finale .soc-i:hover{background:var(--on-green)!important;color:var(--green)}
.soc-i:hover{background:var(--green)!important;color:var(--on-green);border-color:var(--green);transform:translateY(-2px)}
/* phone menu: full screen, solid, same type for every item */
@media (max-width:900px){
  .nav-open .nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}
  .nav-links{background:#0a0a0a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;inset:0!important;width:100vw;height:100dvh}
  .nav-links .btn{all:unset;box-sizing:border-box;position:relative;display:block;font:700 clamp(28px,8vw,40px)/1.1 var(--display)!important;color:var(--green-l)!important;padding:12px 0!important;margin:0!important;height:auto!important;min-height:0!important;background:none!important;border:0!important;cursor:pointer;opacity:0;transform:translate3d(0,24px,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .nav-open .nav-links .btn{opacity:1;transform:none;transition-delay:180ms}
  .nav-links a:not(.btn)::after,.nav-links a[aria-current=page]:not(.btn)::after,.nav-links .btn::after{left:0!important;right:auto!important;width:56px!important;bottom:4px!important}
  .nav-links .btn[aria-current=page]::after{content:"";position:absolute;height:2px;border-radius:2px;background:var(--green-l);box-shadow:0 0 14px 1px rgba(59,197,95,.95)}
}
/* touch feedback: buttons, chips and rows react when tapped */
a,button,summary,.chip,.dd-btn,.dd-opt,.srow{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn:active{transform:scale(.96)!important;filter:brightness(1.12)}
  .btn.ghost:active{background:rgba(255,255,255,.12)}
  .chip:active,.dd-btn:active,.dd-opt:active{transform:scale(.97);border-color:var(--green-l)}
  .srow:active::before,.step:active::before{opacity:1;transform:none}
  .faq summary:active{color:var(--green-l)}
  .cs-row:active i,.soc-i:active{background:var(--green);color:var(--on-green);border-color:var(--green)}
  .totop:active{background:#fff!important;color:#0a0a0a!important}
  .btn,.chip,.dd-btn,.dd-opt{transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .25s,border-color .25s,filter .25s}
}
/* service images on phones */
.r-thumb{display:none}
@media (max-width:760px){
  .srow .r-thumb{display:block;grid-column:1/-1;grid-row:4;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1px solid var(--line);margin-top:8px}
}
/* contact image fills the column to the form's height, cropped from the top */
@media (min-width:901px){
  .contact-grid{align-items:stretch}
  .contact-side{position:static;display:flex;flex-direction:column}
  .contact-side .pv{flex:1 1 auto;aspect-ratio:auto;min-height:240px}
  .contact-side .pv img{object-position:50% 85%}
}
/* back to top: lighter stroke, higher on phones */
html body .totop.on-g,html body .totop:not(.on-g){border-width:1.5px!important}
@media (max-width:760px){.totop{bottom:88px!important;right:16px!important;width:46px;height:46px}}
/* footer on phones: tidy two column layout */
@media (max-width:760px){
  .f-grid{gap:36px 24px!important}
  .f-col ul{gap:12px!important}
  .f-col li a{padding:0!important}
  .f-col h4{margin-bottom:14px}
  .f-col:last-child ul{grid-template-columns:1fr!important}
  .f-base{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:760px){
  .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"brand brand" "studio services" "contact services"}
  .f-brand{grid-area:brand}
  .f-col:nth-of-type(2){grid-area:studio}
  .f-col:nth-of-type(3){grid-area:services}
  .f-col:nth-of-type(4){grid-area:contact;grid-column:auto!important}
  .f-col a{overflow-wrap:anywhere}
}
.nav-open .totop{opacity:0!important;visibility:hidden!important}
/* phone bento: keep natural order so every row runs green, black */
@media (max-width:760px){.frames .fr{order:0!important}}
@media (max-width:760px){.f-col:nth-of-type(4) a{overflow-wrap:normal;white-space:nowrap;font-size:13.5px}.f-col:nth-of-type(4) li:last-child{font-size:14px}}
/* footer: dark, below the green call to action */
.finale .footer{background:#0a0a0a!important;color:#e9eeec;border-top:0!important;margin-top:var(--sec);position:relative;z-index:1;box-shadow:0 0 0 100vmax #0a0a0a;clip-path:inset(0 -100vmax)}
.finale .footer .logo img{filter:none!important}
.finale .footer p,.finale .footer .f-brand p{color:#b9c0bd!important}
.finale .footer h4{color:var(--green-l)!important}
.finale .footer a:not(.btn){color:#e9eeec!important}
.finale .footer a:not(.btn):hover{color:var(--green-l)!important}
.finale .footer .f-base{border-color:rgba(255,255,255,.12)!important;color:#9aa3a0}
.finale .footer .f-base a{color:#9aa3a0!important}
.finale.legal-end .footer{margin-top:0}
/* social icons: no circle, just the mark */
.soc-i,.on-green .soc-i,.finale .soc-i{width:auto;height:auto;border:0!important;border-radius:0;background:none!important;padding:4px;color:inherit}
.soc-i svg{width:24px;height:24px}
.finale .footer .soc-i{color:#e9eeec!important}
.soc-i:hover,.on-green .soc-i:hover,.finale .footer .soc-i:hover{background:none!important;color:var(--green-l)!important;transform:translateY(-2px)}
.soc{gap:16px}
.totop.away{opacity:0!important;visibility:hidden!important;transform:translateY(16px) scale(.9)!important}
/* one size for every section heading, desktop and phone */
.h2,.f-big,.tag-h,.sec-head .h2,.plan .h2,.bud .h2{font-size:clamp(30px,4.2vw,60px)!important;line-height:1.05!important}
/* phone bento: checkerboard like desktop (green black, black green, green black) */
@media (max-width:760px){
  .frames .f1{order:1!important}.frames .f2{order:2!important}.frames .f4{order:3!important}.frames .f3{order:4!important}.frames .f5{order:5!important}.frames .f6{order:6!important}
}
/* back to top: normal corner position on phones */
@media (max-width:760px){.totop{bottom:20px!important;right:16px!important}}
/* footer on phones: same link size everywhere, contact full width, legal line on one row */
@media (max-width:760px){
  .f-grid{grid-template-areas:"brand brand" "studio services" "contact contact"!important}
  .f-col a,.f-col li,.f-col:nth-of-type(4) a,.f-col:nth-of-type(4) li:last-child{font-size:15px!important;white-space:normal}
  .f-col:nth-of-type(4) ul{display:grid;grid-template-columns:1fr 1fr!important;gap:12px 20px}
  .f-base{flex-direction:row!important;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px!important}
  .f-base span{white-space:nowrap}
  .f-base a{font-size:11.5px!important}
}
@media (max-width:760px){.f-col:nth-of-type(4) ul{grid-template-columns:1fr!important}.f-col:nth-of-type(4) a{white-space:nowrap}}
/* globe sits behind Uncle Octo */
.hero-art .octo{position:relative;z-index:2}
.hero-art .orb{z-index:1}
.hero-art .orb.o3{left:auto;right:6%;top:4%;bottom:auto;width:34%;opacity:.85}
/* hero decorations in the open space on the right */
.hero{position:relative}
.hero>.wrap{position:relative;z-index:1}
.hd{position:absolute;pointer-events:none;z-index:0;animation:drift 14s ease-in-out infinite}
.hd-globe{right:5%;top:12%;width:clamp(150px,14vw,240px);opacity:.8}
.hd-star{right:16%;bottom:10%;width:clamp(70px,7vw,120px);animation-delay:-5s}
@media (max-width:1024px){
  .hd-globe{right:4%;top:84px;width:110px;opacity:.5}
  .hd-star{right:8%;bottom:auto;top:46%;width:64px;opacity:.8}
}
@media (max-width:420px){.hd-globe{width:86px;top:80px;right:3%}.hd-star{width:52px;top:auto;bottom:38%;right:6%}}
@media (max-width:420px){.hd-globe{top:auto;bottom:24%;right:2%;width:84px;opacity:.55}.hd-star{bottom:auto;top:44%;right:8%;width:46px}}
/* phones: transition sweeps in from the left and leaves to the right */
@media (max-width:760px){
  .curtain{grid-template-columns:1fr;grid-template-rows:repeat(5,1fr);align-items:stretch;justify-items:start}
  .curtain i,.curtain.dark i,.pt-dark .curtain i{height:auto!important;width:calc(100vw + 28vw);margin-top:0!important;margin-left:-14vw;background:linear-gradient(to right,#057f49 0,#057f49 14vw,var(--green) 14vw,var(--green) calc(100% - 14vw),#057f49 calc(100% - 14vw))!important;transform:translateX(-100%)}
  .curtain.go i,.pt-load .curtain i{transform:none}
  .curtain.up i{transform:translateX(100%)}
}
/* menu: Get a quote is a plain link like Services and About, desktop and phone */
.nav-links .btn{all:unset;box-sizing:border-box;position:relative;cursor:pointer;padding:10px 16px;font:500 15px/1 var(--body);color:#d4d4d4;transition:color .3s}
.nav-links .btn:hover,.nav-links .btn[aria-current=page]{color:#fff}
.nav-links .btn::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--green-l);transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.nav-links .btn:hover::after{transform:scaleX(1);transform-origin:left center}
.nav-links .btn[aria-current=page]::after{transform:scaleX(1);box-shadow:0 0 14px 1px rgba(59,197,95,.95),0 0 4px rgba(59,197,95,1)}
/* phone menu: truly full screen, nothing behind it shows, no back to top */
@media (max-width:900px){
  .nav.nav-open{transform:none!important;left:12px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;border-color:transparent!important}
  .nav.nav-open .nav-links{position:fixed;inset:0!important;width:100vw!important;height:100dvh!important;background:#0a0a0a!important;z-index:-1}
  .nav-links .btn{font:700 clamp(28px,8vw,40px)/1.1 var(--display)!important;color:#d4d4d4!important;padding:12px 0!important}
  .nav-links .btn[aria-current=page]{color:#fff!important}
}
html.menu-open .totop{opacity:0!important;visibility:hidden!important;pointer-events:none}
html.menu-open .cursor-dot,html.menu-open .cursor-ring{z-index:200}
/* contact page: icon with label */
.soc-l{gap:24px!important;flex-wrap:wrap}
.soc-t{display:inline-flex;align-items:center;gap:10px;color:#fff;font:600 clamp(18px,1.6vw,22px)/1.2 var(--body);transition:color .3s}
.soc-t svg{width:22px;height:22px;flex:none}
.soc-t:hover{color:var(--green-l)}
/* phone menu: header never moves or changes layout when the menu opens */
@media (max-width:900px){
  .nav,.nav.nav-open{left:12px!important;right:12px!important;width:auto!important;transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(10,10,10,.92)!important;transition:background-color .3s,border-color .3s!important}
  .nav.nav-open{background:transparent!important;border-color:transparent!important}
  .nav-links,.nav.nav-open .nav-links{position:fixed;inset:0!important;width:100vw!important;height:100dvh!important;background:#0a0a0a!important;transform:none!important;z-index:-1;transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s!important}
  .nav.nav-open .nav-links{transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility 0s!important}
}
/* hide the system cursor everywhere (also over the page transition) on mouse devices */
html.has-cursor,html.has-cursor *,html.has-cursor .curtain,html.has-cursor .curtain *{cursor:none!important}
.cursor-dot,.cursor-ring{z-index:100000}
.curtain{z-index:99990}
/* narrow screens with a mouse: no floating row preview, no magnetic pull, no custom cursor */
@media (max-width:760px){.row-prev{display:none!important}}
@media (max-width:900px){
  html.has-cursor .cursor-dot,html.has-cursor .cursor-ring{display:none!important}
  html.has-cursor,html.has-cursor *{cursor:auto!important}
  html.has-cursor a,html.has-cursor button,html.has-cursor summary,html.has-cursor label,html.has-cursor .chip,html.has-cursor .dd-btn,html.has-cursor .dd-opt{cursor:pointer!important}
  .btn{translate:0 0!important}
}
/* how we work on phones: big outline number sits above the text, not behind it */
@media (max-width:760px){
  .fn{top:0;right:0;font-size:clamp(110px,34vw,150px);transform:translateY(-10%) scale(.92)}
  .fn.is-on{transform:translateY(0) scale(1);opacity:.6}
  .fn.is-past{transform:translateY(-20%) scale(1.04)}
}
@media (max-width:760px){.flow-stage{padding-top:clamp(110px,32vw,150px);align-items:start}}
/* heading scale, everywhere: page titles one size, section titles one size */
.h1:not(.hero-tw),.phero .h1,.phero:not(.legal-hero) .h1,.sp-hero .h1,.nf-copy .h1,.legal-hero .h1{font-size:clamp(34px,4.4vw,66px)!important;line-height:1.04!important;overflow-wrap:break-word;hyphens:manual}
.h2,.f-big,.tag-h,.sec-head .h2,.plan .h2,.bud .h2{font-size:clamp(28px,3.4vw,50px)!important;line-height:1.06!important}
.h3{font-size:clamp(20px,2vw,28px)}
.sp-hero{column-gap:clamp(32px,5vw,80px)}
.sp-hero>*{min-width:0}
.make h3,.make .h3,main h3:not(.h2):not(.h1){font-size:clamp(18px,1.7vw,24px)!important;line-height:1.2!important}
/* tagline: body text smaller than its heading on desktop; phone unchanged */
@media (min-width:761px){.tagline p[data-words]{font-size:clamp(22px,2.3vw,34px)!important;line-height:1.25!important;max-width:30ch}}
@media (min-width:761px){.tagline p[data-words]{max-width:40ch}}
@media (max-width:900px){.legal-side{display:none!important}}
/* phone footer: contact first, then studio and services side by side (no gap) */
@media (max-width:760px){.f-grid{grid-template-areas:"brand brand" "contact contact" "studio services"!important}}
/* transition logo exactly centred */
.curtain img{left:50%!important;top:50%!important;margin:0!important;translate:none}
/* how we work: step titles keep their big size (they were caught by the small h3 rule) */
main .fi h3{font:700 clamp(40px,6.4vw,96px)/.95 var(--display)!important;margin-bottom:clamp(16px,3vh,28px)}
.fi p{font-size:clamp(17px,1.5vw,22px)}
.flow-stage{min-height:clamp(240px,40vh,400px)}
/* phone footer: balanced two columns, no empty side */
@media (max-width:760px){
  .f-grid{grid-template-areas:"brand brand" "studio services" "contact services"!important;row-gap:28px!important}
  .f-col a,.f-col li,.f-col:nth-of-type(4) a,.f-col:nth-of-type(4) li:last-child{font-size:clamp(14px,3.7vw,15px)!important}
  .f-col:nth-of-type(4) a{white-space:nowrap}
}
main .flow .fi h3:not(.h2){font-size:clamp(40px,6.4vw,96px)!important;line-height:.95!important}
/* back to top: one fixed spot on every page; the footer leaves a clear dark strip for it at the very bottom */
.totop{bottom:24px!important;right:24px!important;margin:0!important}
.totop.away{opacity:1!important;visibility:visible!important;transform:none!important}
.finale .footer .f-base{padding-bottom:96px!important}
@media (max-width:760px){.totop{bottom:20px!important;right:16px!important}.finale .footer .f-base{padding-bottom:84px!important}}
/* visual language: no grey rim on the black cards */
.fr,.fr::after{box-shadow:none!important}
.fr:not(.g-img){border:1px solid rgba(255,255,255,.05)!important}
/* footer link underline sits a little below the text */
.footer a:not(.btn):not(.logo){padding-bottom:4px;background-position:100% 100%}
.footer a:not(.btn):not(.logo):hover,.footer a:not(.btn):not(.logo):focus-visible{background-position:0 100%}
/* phone footer: studio and contact side by side, services below in two columns */
@media (max-width:760px){
  .f-grid{grid-template-areas:"brand brand" "studio contact" "services services"!important}
  .f-col:nth-of-type(3) ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px!important}
  .f-col:nth-of-type(4) a,.f-col:nth-of-type(4) li{font-size:14px!important}
}
/* page change: the incoming page paints green first, so no dark frame shows before the curtain */
html.pt-load,html.pt-load body{background:#29a64a!important}
/* phone footer: every column uses the contact column's text size */
@media (max-width:760px){.f-col a,.f-col li{font-size:14px!important}}
/* page change: keep the covered (green) frame on screen until the next page has painted, so the browser never shows a blank frame between pages */
/* phone curtain: rows overlap slightly so no dark hairline shows between them */
@media (max-width:760px){.curtain i,.curtain.dark i,.pt-dark .curtain i{margin-bottom:-2px!important}}
/* v 1627 */
/* every form control uses the site fonts */
input,button,select,textarea{font-family:inherit}
/* visual language: black cards have no edge line at all */
.fr,.fr:not(.g-img){border:0!important;outline:0!important;box-shadow:none!important}
/* tagline paragraph in Satoshi so it reads apart from the Hanson heading */
.tagline p[data-words]{font-family:var(--body)!important;font-weight:500!important;letter-spacing:-.01em!important;text-transform:none!important;line-height:1.35!important}
@media (min-width:761px){.tagline p[data-words]{font-size:clamp(22px,2.1vw,32px)!important;max-width:36ch}}
@media (max-width:760px){.tagline p[data-words]{font-size:22px!important}}
/* globe moved into the tagline section, filling the space beside the text */
.tagline{position:relative;overflow:hidden}
.tagline>.wrap{position:relative;z-index:1}
.tagline .hd-globe{left:auto!important;right:12%!important;top:50%!important;bottom:auto!important;width:clamp(220px,22vw,380px)!important;opacity:.85!important;margin-top:calc(clamp(220px,22vw,380px)/-2)}
@media (max-width:1000px){.tagline .hd-globe{right:4%!important;width:180px!important;margin-top:-90px;opacity:.4!important}}
@media (max-width:760px){.tagline .hd-globe{top:28px!important;right:16px!important;width:84px!important;margin-top:0;opacity:.6!important}}
@media (max-width:760px){.tagline .hd-globe{top:14px!important;right:14px!important;width:64px!important}}
/* FAQ runs the full content width like the other sections */
.faq{max-width:none!important}
/* phone service thumbnails: small files, fixed size box, no pop in */
.srow .r-thumb{background:#111;transition:none!important;content-visibility:auto}
.srow .r-thumb{height:auto!important;aspect-ratio:16/9;object-fit:cover}
/* hero typewriter: never runs past the right edge of the nav pill */
@media (min-width:1025px){.hero .hero-tw{font-size:min(6.8vw,92px)!important}}
/* phone field: label gap and box height always match the budget field beside it */
.field,.fs{align-content:start;align-self:start}
.phone{align-items:start}
.phone .input,.dd-btn{height:54px;min-height:54px}
/* previous / next on service pages: one line, two halves, smaller titles */
.rows.pn{display:grid!important;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.pn .srow{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto;column-gap:20px!important;row-gap:6px!important;align-items:center;border-bottom:0!important;padding:28px 0!important}
.pn .srow .r-d{display:none!important}
.pn .srow .r-n{grid-column:2!important;grid-row:1!important;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase}
.pn .srow .r-t{grid-column:2!important;grid-row:2!important;font-size:clamp(18px,2vw,30px)!important}
.pn .srow .r-a{grid-column:1!important;grid-row:1/3!important;width:52px;height:52px}
.pn .srow:not(.pn-prev){grid-template-columns:minmax(0,1fr) auto!important;text-align:right;padding-left:20px!important;border-left:1px solid var(--line2)}
.pn .srow:not(.pn-prev) .r-n,.pn .srow:not(.pn-prev) .r-t{grid-column:1!important;justify-self:end}
.pn .srow:not(.pn-prev) .r-a{grid-column:2!important}
.pn .srow.pn-prev{padding-right:20px!important}
.pn .srow:hover .r-t{transform:none!important}
.pn .srow.pn-prev:hover .r-t{transform:translateX(8px)!important}
.pn .srow:not(.pn-prev):hover .r-t{transform:translateX(-8px)!important}
@media (max-width:760px){
  .pn .srow{column-gap:12px!important;padding:20px 0!important}
  .pn .srow .r-a{width:40px;height:40px}
  .pn .srow .r-t{font-size:16px!important}
  .pn .srow .r-n{font-size:10px!important}
  .pn .srow:not(.pn-prev){padding-left:12px!important}
  .pn .srow.pn-prev{padding-right:12px!important}
}
@media (max-width:760px){.pn .srow .r-t{font-size:14px!important;line-height:1.15!important}.pn .srow .r-a{width:36px;height:36px}.pn .srow{column-gap:10px!important}}
/* process steps: number, title and text sit in the middle, between the lines */
.step{align-items:center!important}
.step .n,.step h3,.step p{margin:0!important}
/* previous / next hover: green fill grows from the outer edge of each half; arrows keep pointing sideways */
.pn .srow.pn-prev::before{transform-origin:left center}
.pn .srow:not(.pn-prev)::before{transform-origin:right center}
.pn .srow.pn-prev:hover .r-a{transform:translateX(-4px)!important}
.pn .srow:not(.pn-prev):hover .r-a{transform:translateX(4px)!important}
/* previous / next: label and title stay still and aligned on hover, only the fill and arrow move */
.pn .srow:hover .r-t,.pn .srow:hover .r-n,.pn .srow.pn-prev:hover .r-t,.pn .srow:not(.pn-prev):hover .r-t{transform:none!important}
/* previous / next hover fill grows outward from the centre line */
.pn .srow.pn-prev::before{transform-origin:right center!important;transform:scaleX(0)}
.pn .srow:not(.pn-prev)::before{transform-origin:left center!important;transform:scaleX(0)}
.pn .srow:hover::before{transform:scaleX(1)!important}
/* 404: short and simple */
.nf2 .wrap{display:grid;gap:20px;justify-items:start}
.nf2 .nf-num{font-size:clamp(110px,16vw,240px);margin:0 0 8px}
.nf2 .h1{margin:0}
.nf-lines{display:grid;gap:10px;font-size:clamp(17px,1.4vw,20px);color:#cfd4d2;max-width:52ch}
.nf-lines p{margin:0}
.nf-lines a{color:var(--green-l);text-decoration:underline;text-underline-offset:4px}
.nf2 .nf-cta{margin-top:12px}
@media (max-width:760px){.nf2 .nf-cta{width:100%}.nf2 .nf-cta .btn{width:100%}}
/* 404: picture on one side, a short line and one button on the other */
.nf3-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:center}
.nf3-img{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:72vh;justify-self:end;width:100%;max-width:480px}
.nf3-img img{width:100%;height:100%;object-fit:cover;display:block}
.nf3-copy{display:grid;gap:24px;justify-items:start;max-width:620px}
.nf3-copy .h1{margin:0}
.nf3-p{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#d6dbd9}
.nf3-small{margin:0;font-size:15px;color:#9aa3a0}
.nf3-small a{color:var(--green-l);text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){
  .nf3-grid{grid-template-columns:1fr;gap:32px}
  .nf3-img{justify-self:start;max-width:none;aspect-ratio:16/10;max-height:none}
  .nf3-img img{object-position:50% 45%}
  .nf3 .nf-cta,.nf3 .nf-cta .btn{width:100%}
}
@media (max-width:900px){.nf3-img{aspect-ratio:1/1}.nf3-img img{object-position:50% 80%}}
.nf3 .nf-num{font-size:clamp(80px,10vw,150px);margin:0}
@media (max-width:900px){.nf3-img img{object-position:50% 75%}}
/* 404 picture: trimmed green above the antennas so it matches the text height */
.nf3-img{aspect-ratio:1/1!important;max-width:460px}
.nf3-img img{object-position:50% 88%!important}
@media (min-width:901px){.nf3-img{max-width:380px!important}}
/* 1236 */

/* logo: fade out before the page swaps, never shown on the incoming page (stops the mobile jump) */
.curtain.go.out img{opacity:0!important;transform:translate(-50%,-50%) scale(1)!important;transition:opacity .2s ease,transform .45s var(--ease) .55s!important}
/* logo zoom finishes before the fade out, so nothing snaps */
.curtain.go img{transition:opacity .3s ease .45s,transform .45s var(--ease) .45s}
/* phone menu: Satoshi instead of Hanson, lighter feel */
@media (max-width:900px){
  .nav-links a:not(.btn),.nav-links .btn{font:700 clamp(30px,9vw,42px)/1.15 var(--body)!important;letter-spacing:-.01em!important}
}
/* phone: keep the original logo zoom (it still ends before the page swaps) */
@media (max-width:760px){
  .curtain.go img{transition:opacity .4s ease .3s,transform .7s var(--ease) .25s}
  .curtain.go.out img{transition:opacity .2s ease,transform .7s var(--ease) .25s!important}
}
/* logo stays on screen while the next page loads, then grows slightly as it fades */
.pt-load .curtain img{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;transition:none!important}
.curtain.up img{opacity:0!important;transform:translate(-50%,-50%) scale(1.1)!important;transition:opacity .3s ease,transform .5s var(--ease)!important}
/* contact image on single column screens: never taller than 440px */
@media (max-width:900px){
  .contact-side .pv{max-height:440px}
  .contact-side .pv img{object-position:50% 80%}
}
/* tablets (761 to 1024): footer in one tidy row of three under the brand, no empty gaps */
@media (min-width:761px) and (max-width:1024px){
  .f-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-areas:"brand brand brand" "studio services contact"!important;gap:36px 28px!important}
  .f-brand{grid-area:brand!important;grid-column:auto!important}
  .f-col:nth-of-type(2){grid-area:studio!important;grid-column:auto!important}
  .f-col:nth-of-type(3){grid-area:services!important;grid-column:auto!important}
  .f-col:nth-of-type(4){grid-area:contact!important;grid-column:auto!important}
  .f-col:nth-of-type(3) ul,.f-col:nth-of-type(4) ul{display:grid;grid-template-columns:1fr!important}
}
/* very small phones (380 and below): contact gets its own full row so the email never runs off screen */
@media (max-width:380px){
  .f-grid{grid-template-areas:"brand brand" "contact contact" "studio services"!important}
  .f-col:nth-of-type(4){grid-area:contact!important;grid-column:1/-1!important}
  .f-col:nth-of-type(3) ul{grid-template-columns:1fr!important}
  .f-base{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
}
/* phone contact image: same width as the form at all times, empty space above the sphere cropped */
@media (max-width:760px){
  .contact-side .pv{aspect-ratio:1/1!important;max-height:none!important}
  .contact-side .pv img{object-position:50% 88%!important}
  .js .contact-side .pv.rv{clip-path:inset(10% 0 10% 0 round 24px)}
  .js .contact-side .pv.rv.in{clip-path:inset(0 round 24px)}
}
/* tablets and small laptops (761 to 1024, single column): wide crop, never tall */
@media (min-width:761px) and (max-width:1024px){
  .contact-side .pv{aspect-ratio:4/3!important;max-height:540px!important}
  .contact-side .pv img{object-position:50% 58%!important}
}

/* after a successful send: only the thank you message shows */
.form.sent>*:not(.ok){display:none!important}
.form.sent{display:flex;align-items:center;justify-content:center;min-height:360px}