/* OAK Digital Group v4: premium redesign. Plain CSS, no build step.
   Type: Inter Display (headlines) and Inter (text), self-hosted WOFF2 subsets, SIL OFL 1.1.
   Rhythm: dark and light "sheets" that overlap by --lap. One bold moment: the before/after transformation. */

@font-face{font-family:"PR Display";src:url(fonts/inter-display-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"PR Display";src:url(fonts/inter-display-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PR Text";src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PR Text";src:url(fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PR Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --night:#051514;--night-2:#082120;--deep:#030d0d;--teal:#0f3d3e;--teal-2:#14585a;
  --aqua:#6fe0d6;--blue:#5aa7ff;--gold:#f2b84b;--gold-hi:#ffc95c;
  --paper:#f3f4ee;--paper-2:#e6eae1;--white:#fff;
  --ink:#0c1d1e;--body-l:#27393b;--mute-l:#46575a;--mute-d:#a9bebb;
  --line-l:rgba(12,29,30,.16);--line-d:rgba(255,255,255,.14);
  --pin:#d63a1f;
  --f-display:"PR Display","PR Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-text:"PR Text","PR Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1280px;--gut:clamp(1.25rem,4vw,3rem);--lap:2.25rem;--sp:clamp(4.5rem,9vw,8rem);--hdr:4.25rem;
  --ease:cubic-bezier(.22,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;font:400 1.0625rem/1.6 var(--f-text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:800;font-feature-settings:"cv11","calt";word-spacing:.03em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
ul,ol{margin:0;padding:0}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--ink);padding:.8rem 1.2rem;border-radius:0 0 .8rem 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.on-light :focus-visible{outline-color:var(--teal)}
.fine{font-size:.9375rem;color:var(--mute-l)}
.on-dark .fine{color:var(--mute-d)}

/* ---------- section skins and the overlapping sheets ---------- */
.on-dark{background:var(--night);color:#fff;--fg-mute:var(--mute-d);--hair:var(--line-d)}
.on-light{background:var(--paper);color:var(--ink);--fg-mute:var(--mute-l);--hair:var(--line-l)}
.on-night{background:var(--deep);color:#fff}
.sheet{position:relative;border-radius:var(--lap) var(--lap) 0 0;margin-top:calc(var(--lap)*-1);padding:var(--sp) 0 calc(var(--sp) + var(--lap))}
.sec-head{max-width:48rem;margin-bottom:clamp(2.25rem,5vw,4rem)}
.sec-head h2,.stage-head h2,.final-copy h2{font-size:clamp(2.2rem,1rem + 4.2vw,4.4rem);line-height:.98;letter-spacing:-.034em;margin-bottom:1.1rem;text-wrap:balance}
.sec-head p,.stage-head p,.final-copy>p{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--fg-mute);max-width:40rem}
.kicker{font:600 1rem/1.3 var(--f-text);color:var(--aqua);margin:0 0 1.25rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3rem;padding:.8em 1.5em;border-radius:99px;border:1.5px solid transparent;font:600 1rem/1.15 var(--f-text);text-align:center;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,box-shadow .25s,color .2s,border-color .2s}
.btn-lg{min-height:3.5rem;padding:1em 1.9em;font-size:1.0625rem}
.btn-sm{min-height:2.5rem;padding:.55em 1.15em;font-size:.9375rem;white-space:nowrap}
.btn-block{width:100%}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(242,184,75,.6)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55)}
.btn-outline{border-color:currentColor;color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;color:#fff;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,backdrop-filter .3s}
.top.scrolled,.menu-open .top{background:rgba(5,21,20,.8);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-color:rgba(255,255,255,.09)}
.bar{display:flex;align-items:center;gap:1.5rem;height:var(--hdr)}
.logo{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;color:#fff;text-decoration:none;font:600 1.3rem/1 var(--f-display)}
.logo b{font-weight:800}
.logo .mark{width:1.9rem;height:1.9rem}
.nav{display:flex;gap:1.9rem;margin-left:auto}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;font-size:.9375rem;padding:.4rem 0;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat;transition:color .2s,background-size .3s var(--ease)}
.nav a:hover{color:#fff;background-size:100% 2px}
.menu-btn{display:none;width:2.75rem;height:2.75rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;place-items:center}
.menu-btn i,.menu-btn i::before{display:block;width:1.1rem;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
.menu-btn i{position:relative}.menu-btn i::before{content:"";position:absolute;left:0;top:-6px;width:100%}
.menu-open .menu-btn i{background:transparent}.menu-open .menu-btn i::before{top:0;transform:rotate(45deg)}
.menu-open .menu-btn i::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff;padding:calc(var(--hdr) + clamp(2rem,5vw,4.5rem)) 0 calc(var(--sp) + var(--lap))}
.hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 55% at 76% 40%,rgba(111,224,214,.22),transparent 70%),
  radial-gradient(38% 40% at 100% 4%,rgba(90,167,255,.2),transparent 70%),
  radial-gradient(50% 60% at 0% 100%,rgba(20,88,90,.6),transparent 70%),var(--night)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(70% 75% at 68% 42%,#000 15%,transparent 75%);mask-image:radial-gradient(70% 75% at 68% 42%,#000 15%,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5.1fr) minmax(0,6.4fr);gap:clamp(2rem,3.5vw,4rem);align-items:center}
.hero h1{font-size:clamp(3.1rem,1rem + 6.4vw,6.2rem);line-height:.92;letter-spacing:-.042em;margin-bottom:1.4rem;text-wrap:balance}
.hero-sub{font:800 clamp(1.3rem,1rem + 1vw,1.9rem)/1.15 var(--f-display);letter-spacing:-.024em;color:var(--gold);margin-bottom:1.1rem}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.82);max-width:32rem;margin-bottom:2rem}
.ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.ctas .btn-lg{padding-inline:1.45em}
.hero-note{margin:1.4rem 0 0;font-size:.9375rem;color:var(--mute-d)}
.hero-visual{margin:0;position:relative}
@media (min-width:1100px){.hero-visual{margin-right:calc(var(--gut)*-.9)}}
.hero-visual figcaption{margin-top:1.1rem;font-size:.9375rem;color:var(--mute-d);max-width:34rem}

.hv-stage{position:relative;--mx:0;--my:0;--sy:0}
#hero-compare:empty{aspect-ratio:1.1}
#stage-compare:empty{min-height:36rem}
@media (min-width:760px){#stage-compare:empty{min-height:0;aspect-ratio:1.5}}
.hero-cmp .cmp-frames{position:relative;padding:9% 0 12%}
.hero-cmp .dev-desk{position:relative;z-index:1;width:82%;margin-left:auto;transform:translate3d(calc(var(--mx)*-6px),calc(var(--my)*-4px + var(--sy)*-.025px),0)}
.hero-cmp .dev-ghost{position:absolute;z-index:0;left:-4%;top:1%;width:62%;transform:rotate(-2.4deg) translate3d(calc(var(--mx)*-3px),calc(var(--my)*-2px),0);filter:saturate(.8) brightness(.78)}
.hero-cmp .dev-desk .tag-b{display:none}
.hero-cmp .screen-p .handle{display:none}
.hero-cmp .dev-phone{position:absolute;z-index:2;right:-1%;bottom:0;width:27%;transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-9px + var(--sy)*-.06px),0)}
.hero-cmp .dev-pb,.hero-cmp .lbl{display:none}
.crop{position:absolute;width:1.7rem;height:1.7rem;border:2.5px solid var(--gold);opacity:0;transition:opacity .8s .9s;pointer-events:none}
.is-ready .crop{opacity:.95}
.c-tl{top:-1rem;left:-1rem;border-right:0;border-bottom:0}.c-tr{top:-1rem;right:-1rem;border-left:0;border-bottom:0}
.c-bl{bottom:-1rem;left:-1rem;border-right:0;border-top:0}.c-br{bottom:-1rem;right:-1rem;border-left:0;border-top:0}
.callouts{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;transform:translate3d(calc(var(--mx)*10px),calc(var(--my)*7px),0);z-index:8}
.co{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem .6rem .75rem;border-radius:99px;background:rgba(8,33,32,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font:600 .9375rem/1 var(--f-text);color:#fff;white-space:nowrap;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.co::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,184,75,.25)}
.is-done .co{opacity:1;transform:none}
.is-done .co-1{transition-delay:.0s}.is-done .co-2{transition-delay:.18s}.is-done .co-3{transition-delay:.36s}.is-done .co-4{transition-delay:.54s}.is-done .co-5{transition-delay:.72s}
.co-1{top:-3%;left:30%}
.co-2{top:59%;left:-3%}
.co-3{bottom:10%;left:27%}
.co-4{top:3%;right:6%}
.co-5{top:31%;right:-3%}

/* ---------- compare component: devices, mock sites, handle, pins ---------- */
.compare{position:relative;--pos:50%;--hy:34%}
.cmp-frames{position:relative}
.dev-desk,.dev-ghost{border-radius:.9rem;overflow:hidden;background:#101c1d;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 110px -34px rgba(111,224,214,.34),0 34px 70px -24px rgba(0,0,0,.75);will-change:transform}
.chrome{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;background:linear-gradient(#243536,#1a292a);border-bottom:1px solid rgba(255,255,255,.08)}
.chrome i{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.24)}
.chrome .url{flex:1;min-width:0;margin:0 .5rem;max-width:24rem;padding:.28rem .8rem;border-radius:99px;background:rgba(0,0,0,.3);color:#cfe0dd;font-size:.8125rem;line-height:1.3;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrome .badge{margin-left:auto;flex:none;padding:.16rem .55rem;border-radius:99px;background:rgba(242,184,75,.82);color:var(--ink);font:600 .6875rem/1.3 var(--f-text);white-space:nowrap}
.screen{position:relative;container-type:inline-size;overflow:hidden;background:#fff}
.screen-d{aspect-ratio:1200/760}
.screen-p{aspect-ratio:390/800;border-radius:1.7rem}
.layer{position:absolute;inset:0}
.l-after{clip-path:inset(0 0 0 var(--pos))}
.site{position:absolute;inset:0;overflow:hidden;font-size:1.3333cqw;line-height:1.35}
.tag{position:absolute;bottom:.9rem;z-index:5;padding:.28rem .7rem;border-radius:99px;font:600 .8125rem/1.3 var(--f-text);background:rgba(5,21,20,.78);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .3s}
.fdb-cap{display:block;padding:.3rem 0 .05rem;text-align:center;font:600 .625rem/1.2 var(--f-text);letter-spacing:.02em;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-b{left:.9rem}.tag-a{right:.9rem;background:var(--gold);color:var(--ink)}
.compare[data-view="before"] .tag-a,.compare[data-view="after"] .tag-b{opacity:0}
.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2.75rem;margin-left:-1.375rem;z-index:6;cursor:ew-resize;touch-action:none}
.handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--gold);box-shadow:0 0 18px rgba(242,184,75,.7)}
.knob{position:absolute;left:50%;top:var(--hy);width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;background:var(--gold);box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 6px rgba(242,184,75,.22);transition:transform .25s var(--ease)}
.knob::before,.knob::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-.32rem;border:.32rem solid transparent}
.knob::before{left:.55rem;border-right:.45rem solid var(--ink);border-left:0}
.knob::after{right:.55rem;border-left:.45rem solid var(--ink);border-right:0}
.handle:hover .knob,.dragging .knob{transform:scale(1.12)}
.compare[data-view="before"]:not(.dragging) .handle,.compare[data-view="after"]:not(.dragging) .handle{visibility:hidden}
.screen-p .handle{--hy:50%}
.dev-phone{filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.phone-shell{padding:.5rem;border-radius:2.2rem;background:linear-gradient(160deg,#2a3b3c,#0a1314);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.notch{position:absolute;top:1.6%;left:50%;width:27%;height:3%;margin-left:-13.5%;border-radius:99px;background:#040c0c;z-index:5}

/* pins and highlighted regions (Northline stage) */
.pin{position:absolute;z-index:7;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;border-radius:50%;display:grid;place-items:center;font:600 .875rem/1 var(--f-text);background:#fff;color:var(--ink);box-shadow:0 0 0 2.5px var(--pin),0 8px 18px rgba(0,0,0,.4);cursor:pointer;transition:transform .25s var(--ease),background-color .2s,color .2s}
.pin:hover{transform:scale(1.14)}
.pin.is-on{background:var(--pin);color:#fff;transform:scale(1.2)}
.pin.is-on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pin);animation:ping 1.1s var(--ease) 1 both}
@keyframes ping{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
.hot-1 [data-hot="1"],.hot-2 [data-hot="2"],.hot-3 [data-hot="3"],.hot-4 [data-hot="4"],.hot-5 [data-hot="5"]{outline:.12em solid var(--pin);outline-offset:.45em;border-radius:.35em}

/* ---------- why it matters ---------- */
.why{padding-bottom:calc(var(--sp) + var(--lap))}
.why .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.why h2{font-size:clamp(2.5rem,1rem + 5.6vw,5.8rem);line-height:.96;letter-spacing:-.04em;text-wrap:balance}
.why-cols{display:grid;gap:1.4rem;padding-bottom:.6rem}
.why-cols p{font-size:clamp(1.1rem,1rem + .35vw,1.3rem);line-height:1.6;color:var(--body-l);margin:0}

/* ---------- demo stage ---------- */
.stage-sec{overflow:hidden;isolation:isolate}
.stage-sec::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 40% at 70% 52%,rgba(111,224,214,.13),transparent 70%),radial-gradient(40% 30% at 5% 10%,rgba(90,167,255,.1),transparent 70%)}
.stage-head{max-width:46rem}
.picker{display:flex;gap:.6rem;margin:2rem 0 2.25rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.2rem 0 .6rem;scrollbar-width:thin}
.picker button{flex:none;scroll-snap-align:start;min-height:2.9rem;padding:.55em 1.3em;border-radius:99px;border:1.5px solid var(--line-d);background:transparent;color:#fff;font:600 1rem var(--f-text);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.picker button:hover{border-color:rgba(255,255,255,.5)}
.picker button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.stage .cmp-frames{position:relative;padding-bottom:8%}
.stage .dev-desk{width:86%}
.stage .dev-phone{position:absolute;right:0;bottom:0;width:23.5%}
.stage-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.75rem}
.dev-tabs{display:none}
.views,.dev-tabs{padding:.3rem;border-radius:99px;border:1.5px solid var(--line-d);gap:.2rem}
.views{display:inline-flex}
.views button,.dev-tab{min-height:2.6rem;padding:.4em 1.25em;border-radius:99px;border:0;background:transparent;color:#fff;font:600 .9375rem var(--f-text);cursor:pointer;transition:background-color .2s,color .2s}
.views button[aria-pressed="true"],.dev-tab[aria-pressed="true"]{background:#fff;color:var(--ink)}
.slider-label{display:flex;align-items:center;gap:1rem;font-weight:600;font-size:.9375rem;color:var(--mute-d)}
input[type=range]{-webkit-appearance:none;appearance:none;width:min(20rem,52vw);height:2rem;background:transparent;margin:0;cursor:pointer}
input[type=range]:disabled{opacity:.35;cursor:not-allowed}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:rgba(255,255,255,.22)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:rgba(255,255,255,.22)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin-top:calc(-.8rem + 3px);border-radius:50%;border:0;background:var(--gold);box-shadow:0 0 0 5px rgba(242,184,75,.25)}
input[type=range]::-moz-range-thumb{width:1.6rem;height:1.6rem;border-radius:50%;border:0;background:var(--gold);box-shadow:0 0 0 5px rgba(242,184,75,.25)}
.notes-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
.note-detail{position:relative;padding-left:4.5rem;min-height:11rem}
.note-detail .nd-pin{position:absolute;left:0;top:.15rem;width:3.1rem;height:3.1rem;margin:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font:800 1.25rem var(--f-display);box-shadow:0 0 0 3px var(--pin)}
.note-detail h2,.note-detail h3{font-size:clamp(1.7rem,1rem + 2.2vw,2.6rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:.9rem}
.note-detail p{font-size:1.1875rem;line-height:1.6;color:var(--mute-d);max-width:34rem;margin:0}
.note-list{list-style:none;border-top:1px solid var(--line-d)}
.note-list li{border-bottom:1px solid var(--line-d)}
.note-list button{display:flex;align-items:center;gap:1rem;width:100%;min-height:3.6rem;padding:.9rem .25rem;border:0;background:none;color:#fff;font:600 1.0625rem/1.3 var(--f-text);text-align:left;cursor:pointer;transition:color .2s,padding .3s var(--ease)}
.note-list button:hover{padding-left:.6rem}
.pin-n{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);font:600 .875rem var(--f-text);transition:background-color .2s,color .2s,box-shadow .2s}
.note-list button[aria-pressed="true"]{color:var(--gold)}
.note-list button[aria-pressed="true"] .pin-n{background:var(--pin);color:#fff;box-shadow:none}
.stage-link{margin:clamp(2.5rem,5vw,4rem) 0 0;text-align:center}

/* ---------- what we fix: bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:17rem;padding:clamp(1.5rem,2.4vw,2.25rem);border-radius:1.75rem}
.tile h3{font-size:clamp(1.45rem,1rem + 1.2vw,2rem);line-height:1.05;letter-spacing:-.026em;margin-bottom:.55rem}
.tile p{margin:0;max-width:24rem;line-height:1.5}
.t-mobile{grid-column:1/6;grid-row:1/3;min-height:36rem;background:var(--teal);color:#fff}
.t-mobile p{color:rgba(255,255,255,.82)}
.t-cta{grid-column:6/13;background:var(--paper-2)}
.t-trust{grid-column:6/10;background:#cfe9e3}
.t-pages{grid-column:10/13;background:#fff;box-shadow:inset 0 0 0 1px var(--line-l)}
.t-seo{grid-column:1/6;background:var(--night);color:#fff;min-height:19rem}
.t-seo p{color:var(--mute-d)}
.t-redesign{grid-column:6/13;background:var(--gold);color:var(--ink);min-height:19rem}
.tile-vis{position:absolute;pointer-events:none}
.t-mobile .tile-vis{inset:2.2rem 0 auto 0;display:grid;place-items:center}
.v-phone{position:relative;width:11.5rem;aspect-ratio:9/17;border-radius:1.8rem;background:#f3f4ee;border:.4rem solid #0a2627;padding:1.6rem 1rem;box-shadow:0 30px 50px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18)}
.v-l{display:block;height:.55rem;border-radius:.3rem;background:#cdd6d2;margin-bottom:.55rem}
.v-l.w1{width:80%;height:.9rem;background:#0f3d3e}.v-l.w2{width:100%}.v-l.w3{width:66%}
.v-tap{position:absolute;left:.7rem;right:.7rem;bottom:.8rem;padding:.7rem;border-radius:.9rem;background:var(--gold);color:var(--ink);font:800 .9rem var(--f-display);text-align:center;box-shadow:0 0 0 5px rgba(242,184,75,.28)}
.t-cta .tile-vis{right:2rem;top:1.6rem}
.t-cta h3,.t-cta p{max-width:46%;position:relative}
.t-cta{align-items:flex-start}
.v-form{width:15rem;padding:1.2rem;border-radius:1.1rem;background:#fff;box-shadow:0 24px 40px -20px rgba(12,29,30,.4),0 0 0 1px var(--line-l)}
.v-in{display:block;height:2.1rem;border-radius:.6rem;background:#eef1ec;box-shadow:inset 0 0 0 1px var(--line-l);margin-bottom:.6rem}
.v-in.short{width:62%}
.v-btn{display:block;margin-top:.9rem;padding:.7rem;border-radius:.7rem;background:var(--gold);color:var(--ink);font:600 .9375rem var(--f-text);text-align:center}
.v-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.5rem;padding:0}
.v-chips li{padding:.45rem .95rem .45rem .75rem;border-radius:99px;background:#fff;font:600 .9375rem var(--f-text);display:flex;align-items:center;gap:.5rem;box-shadow:inset 0 0 0 1px rgba(15,61,62,.18)}
.v-chips li::before{content:"";width:.4rem;height:.7rem;border:solid var(--teal);border-width:0 2.5px 2.5px 0;transform:rotate(40deg) translateY(-1px)}
.t-trust .v-chips,.t-pages .v-tree{order:-1}
.t-trust .v-chips{margin:0 0 auto}
.t-pages .v-tree{margin-bottom:auto}
.v-tree{list-style:none;margin:0 0 1.4rem;padding:0 0 0 1.1rem;border-left:2px solid var(--line-l);display:grid;gap:.5rem}
.v-tree li{position:relative;padding:.4rem .8rem;border-radius:.6rem;background:var(--paper);font:600 .9rem/1.25 var(--f-text);box-shadow:inset 0 0 0 1px var(--line-l)}
.v-tree li::before{content:"";position:absolute;left:-1.1rem;top:50%;width:.8rem;height:2px;background:var(--line-l)}
.t-seo,.t-redesign{flex-direction:row;align-items:flex-end;gap:1.5rem}
.t-seo .tile-copy,.t-redesign .tile-copy{flex:1 1 42%;position:relative;z-index:1}
.v-serp{flex:1 1 52%;display:grid;gap:.6rem;align-self:center}
.serp{padding:.8rem 1rem;border-radius:.9rem;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line-d);display:grid;gap:.15rem}
.serp b{font:600 .95rem/1.25 var(--f-text);color:#9ec3ff}
.serp span{font-size:.875rem;color:var(--mute-d);line-height:1.35}
.serp-old{opacity:.5}
.serp-new{background:#fff;box-shadow:0 18px 36px -16px rgba(0,0,0,.6)}.serp-new b{color:#1a4fb4}.serp-new span{color:#3a4a4c}
.v-ba{flex:1 1 52%;align-self:stretch;display:grid;grid-template-columns:1fr 1.25fr;gap:.6rem;min-height:11rem}
.v-old{border-radius:1rem;background:repeating-linear-gradient(45deg,#e6dcc0 0 .5rem,#d9cdab .5rem 1rem);box-shadow:inset 0 0 0 1px rgba(12,29,30,.2);position:relative}
.v-old::before{content:"";position:absolute;left:.8rem;right:.8rem;top:.8rem;height:1.3rem;background:#8c8c8c}
.v-new{border-radius:1rem;background:var(--night);box-shadow:0 24px 40px -20px rgba(5,21,20,.6);position:relative}
.v-new::before{content:"";position:absolute;left:1rem;right:1.6rem;top:1.1rem;height:1.5rem;border-radius:.4rem;background:#fff}
.v-new::after{content:"";position:absolute;left:1rem;top:3.6rem;width:5rem;height:2rem;border-radius:.6rem;background:var(--gold)}
.also{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:clamp(2rem,4vw,3rem);padding-top:2rem;border-top:1px solid var(--line-l)}
.also h3{font-size:1.35rem;line-height:1.1;letter-spacing:-.024em;margin-bottom:.45rem}
.also p{margin:0;color:var(--mute-l)}

/* ---------- process: five steps on a line that fills as you scroll ---------- */
.process{overflow:hidden}
.steps{--p:0;position:relative;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.75rem}
.steps::before,.steps::after{content:"";position:absolute;left:1.5rem;top:1.5rem;height:3px;margin-top:-1.5px;border-radius:3px}
.steps::before{right:1.5rem;background:rgba(255,255,255,.14)}
.steps::after{width:calc((100% - 3rem)*var(--p));background:linear-gradient(90deg,var(--aqua),var(--gold))}
.steps li{position:relative;padding-top:4.4rem}
.num{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--night);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);font:800 1.2rem var(--f-display);transition:background-color .4s,color .4s,box-shadow .4s}
.steps li.on .num{background:var(--gold);color:var(--night);box-shadow:0 0 0 6px rgba(242,184,75,.2)}
.steps h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:.6rem}
.steps p{margin:0;font-size:1rem;line-height:1.55;color:var(--mute-d)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.75rem,3.2vw,2.9rem);border-radius:2rem}
.plan p{margin:0;line-height:1.55}
.plan h3{font-size:clamp(1.5rem,1rem + 1.2vw,2rem);letter-spacing:-.026em}
.plan-a{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-l)}
.plan-a p{color:var(--mute-l)}
.plan-b{background:var(--night);color:#fff;box-shadow:0 50px 90px -40px rgba(5,21,20,.7);margin-top:-.75rem;margin-bottom:-.75rem;padding-block:calc(clamp(1.75rem,3.2vw,2.9rem) + .75rem)}
.plan-b p{color:rgba(255,255,255,.82)}
.amt{font:800 clamp(3.6rem,2rem + 6vw,6.4rem)/.9 var(--f-display)!important;letter-spacing:-.045em;margin:.3rem 0 .4rem!important;color:inherit!important}
.flag{position:absolute;top:1.6rem;right:1.6rem;padding:.38rem .85rem;border-radius:99px;background:var(--gold);color:var(--ink)!important;font:600 .875rem/1.2 var(--f-text)}
.plan-list{list-style:none;display:grid;gap:.65rem;margin:0 0 .4rem}
.plan-list li{display:flex;align-items:flex-start;gap:.7rem;font-weight:600;line-height:1.4}
.plan-list li::before{content:"";flex:none;width:.4rem;height:.72rem;border:solid var(--teal-2);border-width:0 2.5px 2.5px 0;transform:rotate(40deg);margin:.22rem .3rem 0 .15rem}
.plan-b .plan-list li::before{border-color:var(--gold)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plans-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,4rem);margin-top:clamp(2.25rem,5vw,3.5rem)}
.plan-s{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.6rem 0;border-top:1.5px solid var(--ink)}
.plan-s h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.024em;margin-bottom:.5rem}
.plan-s p{margin:0;color:var(--mute-l);max-width:30rem}
.plan-s .amt-s{color:var(--ink);font:800 2.2rem/1 var(--f-display)!important;letter-spacing:-.03em;margin:0!important;white-space:nowrap}
.cur{margin:0 0 1.75rem;max-width:46rem;font-size:1.0625rem;line-height:1.55;color:var(--body-l)}
.cur strong{color:var(--ink)}
.amt .cad{font:600 1.15rem/1 var(--f-text)!important;letter-spacing:0;opacity:.7;margin-left:.15rem}
.inc-h{font:600 .9375rem/1.2 var(--f-text)!important;margin:.5rem 0 -.1rem!important;opacity:.75}
.limits{margin:.2rem 0 1rem!important;padding-top:1rem;border-top:1px solid rgba(12,29,30,.14);font-size:.9375rem;line-height:1.5}
.plan-b .limits{border-color:rgba(255,255,255,.2)}
.plan-a .limits strong{color:var(--ink)}.plan-b .limits strong{color:#fff}
.scope-note{max-width:46rem;margin:1.6rem 0 0}

/* ---------- business types ---------- */
.type-list{list-style:none;border-top:1px solid var(--line-d)}
.type-list li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:clamp(1rem,2vw,1.5rem) 0;border-bottom:1px solid var(--line-d);transition:padding .35s var(--ease),background-color .35s}
.ty-n{font:800 clamp(1.9rem,1rem + 3.6vw,3.8rem)/1 var(--f-display);letter-spacing:-.034em;transition:color .25s}
.ty-a{color:var(--mute-d);font-size:1.0625rem;text-align:right}
@media (hover:hover){.type-list li:hover{padding-left:1.2rem;background:linear-gradient(90deg,rgba(242,184,75,.12),transparent 70%)}.type-list li:hover .ty-n{color:var(--gold)}}

/* ---------- our own projects ---------- */
.work{background:var(--paper-2)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-bottom:2rem}
.shot-b{margin-top:clamp(0rem,6vw,5rem)}
.shot-img{display:block;overflow:hidden;border-radius:1rem;background:#fff;text-decoration:none;box-shadow:0 36px 70px -34px rgba(12,29,30,.55),0 0 0 1px rgba(12,29,30,.1);transition:transform .5s var(--ease),box-shadow .5s}
.shot-img:hover{transform:translateY(-6px)}
.shot-img img{display:block;width:100%;height:auto}
.chrome.sm{background:#dfe4dc;border-bottom:1px solid rgba(12,29,30,.1)}
.chrome.sm i{background:rgba(12,29,30,.25)}
.chrome.sm .url{background:#fff;color:var(--mute-l)}
.own-tag{display:inline-block;margin:1.3rem 0 0;padding:.28rem .8rem;border-radius:99px;background:rgba(15,76,70,.1);color:var(--teal);font-size:.8125rem;font-weight:600;line-height:1.3}
.shot h3{font-size:1.6rem;letter-spacing:-.026em;margin:.55rem 0 .45rem}
.shot h3 a{display:inline-flex;align-items:center;min-height:2.5rem;text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.shot h3 a:hover{background-size:100% 2px}
.shot p{color:var(--mute-l);max-width:32rem;margin:0}
.crop-in{transition:clip-path 1s var(--ease),opacity .8s}
.crop-in.pre{clip-path:inset(7% 5% 7% 5% round 1.5rem);opacity:.001}
.crop-in.pre.in{clip-path:inset(0 round 1rem);opacity:1}

/* ---------- lead form ---------- */
.final{isolation:isolate;overflow:hidden;background:var(--night-2)}
.final-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 50% at 8% 20%,rgba(111,224,214,.16),transparent 70%),radial-gradient(40% 40% at 100% 100%,rgba(242,184,75,.1),transparent 70%)}
.final-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ticks{list-style:none;display:grid;gap:.9rem;margin:2rem 0 0}
.ticks li{display:flex;align-items:center;gap:.9rem;font-size:1.125rem;font-weight:600}
.ticks li::before{content:"";flex:none;width:.5rem;height:.9rem;border:solid var(--gold);border-width:0 3px 3px 0;transform:rotate(40deg) translateY(-2px);margin:0 .4rem 0 .2rem}
.form-card{background:var(--paper);color:var(--ink);padding:clamp(1.5rem,3.5vw,2.9rem);border-radius:2rem;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.form-card label{display:block;margin:1.15rem 0 .5rem;font:600 1rem/1.35 var(--f-text)}
.form-card .row2 label{margin-top:0}
.opt{font-weight:400;color:var(--mute-l)}
.form-card input:not([type=checkbox]),.form-card textarea{display:block;width:100%;min-height:3.5rem;padding:.9rem 1.1rem;border-radius:1rem;border:1.5px solid #bcc7c2;background:#fff;color:var(--ink);font:400 1.0625rem/1.4 var(--f-text);transition:border-color .2s,box-shadow .2s}
.form-card textarea{resize:vertical;min-height:7rem}
.form-card input:not([type=checkbox]):focus,.form-card textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(242,184,75,.65)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:0}
.row2>div{padding-top:0}
.row2+label{margin-top:1.15rem}
.check{display:flex;align-items:flex-start;gap:.9rem;margin:1.4rem 0;padding:1rem 1.1rem;border-radius:1rem;background:var(--paper-2)}
.check input{flex:none;width:1.5rem;height:1.5rem;margin:.15rem 0 0;accent-color:var(--teal)}
.check label{margin:0;font-weight:400;font-size:.9375rem;line-height:1.5}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
#form-msg{min-height:1.5rem;margin:1.1rem 0 0;font-weight:600}
.is-err #form-msg{color:#b42318}
.is-warn #form-msg{padding:.95rem 1.1rem;border-radius:1rem;background:#fff3d6;box-shadow:inset 0 0 0 1.5px var(--gold)}
.is-sent .fields{display:none}
.is-sent #form-msg{margin:0 0 1.25rem;padding:.5rem 0 0;font:800 clamp(1.5rem,1rem + 1.6vw,2.1rem)/1.15 var(--f-display);letter-spacing:-.024em;color:var(--ink)}
.is-sent #form-msg::before{content:"";display:block;width:4rem;height:4rem;margin-bottom:1.25rem;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 16.5l5 5 9-10' fill='none' stroke='%23f2b84b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 8px rgba(15,61,62,.12)}
.again{margin-bottom:1rem}
.on-dark .form-card .fine,.form-card .fine{margin:1.3rem 0 0;line-height:1.5;color:var(--mute-l)}

/* ---------- footer ---------- */
.foot{padding:clamp(3.5rem,7vw,6rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;align-items:start}
.foot p{color:var(--mute-d);margin:.9rem 0 0;max-width:26rem}
.foot-nav{display:grid;gap:.6rem}
.foot-nav a,.foot-cta,.foot a[href^=mailto]{display:inline-flex;align-items:center;min-height:2.5rem;color:#fff;text-decoration:none;font-weight:600}
.foot-nav a:hover,.foot-cta:hover,.foot a[href^=mailto]:hover{color:var(--gold)}
.foot-h{margin:0!important;color:#fff!important;font-weight:600}
.foot-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-d)}
.foot-base p{margin:0;font-size:.9375rem;max-width:none}
.foot-solo{margin-top:0;border-top:0;padding-top:0}

/* ---------- floating phone CTA ---------- */
.m-cta{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:55;display:none;align-items:center;justify-content:center;min-height:3.4rem;border-radius:99px;background:var(--gold);color:var(--ink);font:600 1.0625rem var(--f-text);text-decoration:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .4s var(--ease)}
.m-cta.on{transform:none}

.ns-fig{margin:1.2rem 0 0}.ns-fig img{display:block;width:100%;height:auto;border-radius:1rem}.ns-fig figcaption{margin:.6rem 0 0;color:var(--mute-d,#b9cfcb);font-size:.9375rem}
.ns-list{margin:1.2rem 0 .4rem;padding-left:1.3rem;max-width:44rem;color:#fff}.ns-list li{margin:.55rem 0}
.noscript-note{margin:1rem 0 0;padding:1rem 1.2rem;border-radius:1rem;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line-d);color:#fff;max-width:40rem}

/* ---------- Northline page ---------- */
.np-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff;padding:calc(var(--hdr) + clamp(1.5rem,3.5vw,3rem)) 0 calc(var(--sp)*.7 + var(--lap))}
.np-hero .hero-bg{z-index:-1}
.np-hero h1{font-size:clamp(2.4rem,1rem + 3.9vw,4.4rem);line-height:.98;letter-spacing:-.036em;max-width:16em;margin-bottom:1rem;text-wrap:balance}
.np-hero .lede{margin-bottom:1.25rem;max-width:44rem}
.np-hero .kicker{margin-bottom:.9rem}
.nl-banner{max-width:46rem;padding:1.1rem 1.3rem;border-radius:1.1rem;background:rgba(242,184,75,.12);box-shadow:inset 0 0 0 1.5px var(--gold);color:#fff;font-weight:600;line-height:1.5;margin:0}
.nl-stage{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.nl-chapters{list-style:none;display:grid;gap:0}
.nl-chapters li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1.5rem;padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-top:1.5px solid var(--ink)}
.nl-chapters .cn{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--pin);font:800 1.3rem var(--f-display)}
.nl-chapters h3{font-size:clamp(1.6rem,1rem + 2vw,2.4rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:.8rem}
.nl-chapters .why-t{max-width:40rem;font-size:1.1875rem;color:var(--body-l);margin:0 0 1.4rem}
.ba-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ba-pair div{padding:1.1rem 1.25rem;border-radius:1.1rem}
.ba-pair .was{background:#e8e2d2;box-shadow:inset 0 0 0 1px rgba(12,29,30,.12)}
.ba-pair .now{background:var(--night);color:#fff}
.ba-pair b{display:block;font:600 .9375rem var(--f-text);margin-bottom:.3rem;opacity:.75}
.ba-pair span{display:block;font-size:1.0625rem;line-height:1.45}
.np-cta{text-align:left}
.np-cta h2{font-size:clamp(2.2rem,1rem + 4vw,4.2rem);line-height:.98;letter-spacing:-.034em;max-width:14em;margin-bottom:1.5rem;text-wrap:balance}
.np-cta p{max-width:36rem;color:var(--mute-d);font-size:1.15rem}
.np-cta .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ================= responsive ================= */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:3.25rem}
  .hero-copy{max-width:44rem}
  .hero-visual{max-width:54rem;width:100%;margin-inline:auto}
  .co{font-size:.875rem;padding:.5rem .85rem .5rem .65rem}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.5rem}
  .steps::before,.steps::after{display:none}
  .steps li.on .num{box-shadow:0 0 0 6px rgba(242,184,75,.2)}
}
@media (max-width:899px){
  .nav{display:none}
  .bar-cta{margin-left:auto}
  .menu-btn{display:grid}
  .menu-open .nav{display:flex;flex-direction:column;gap:.25rem;position:fixed;inset:var(--hdr) 0 auto 0;margin:0;padding:1rem var(--gut) 2rem;background:rgba(5,21,20,.97);border-bottom:1px solid var(--line-d)}
  .menu-open .nav a{font:800 1.7rem/1.2 var(--f-display);letter-spacing:-.024em;padding:.7rem 0;color:#fff;background:none}
  .hero{padding-top:calc(var(--hdr) + 1.5rem)}
  .hero h1{font-size:clamp(3rem,1rem + 10.5vw,5.4rem)}
  .notes-wrap,.final-grid,.work-grid,.why .wrap{grid-template-columns:1fr}
  .shot-b{margin-top:0}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .t-mobile{grid-column:1/-1;grid-row:auto;min-height:32rem}
  .t-cta,.t-seo,.t-redesign{grid-column:1/-1}
  .t-trust{grid-column:1/4}.t-pages{grid-column:4/7}
  .plans,.plans-2{grid-template-columns:1fr}
  .plan-b{margin:0;padding-block:clamp(1.75rem,3.2vw,2.9rem)}
  .also{grid-template-columns:1fr;gap:1.5rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:759px){
  :root{--lap:1.6rem}
  .bar{gap:.6rem}
  .logo{font-size:1.15rem}.logo .mark{width:1.65rem;height:1.65rem}
  .btn-sm{padding:.5em .95em;font-size:.875rem}
  .hero{padding-top:calc(var(--hdr) + 1.1rem);padding-bottom:calc(var(--lap) + 2.5rem)}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero .kicker{display:none}
  .hero h1{order:1;font-size:clamp(2.25rem,1rem + 9.4vw,3.6rem);line-height:.95;margin-bottom:.75rem}
  .hero-sub{order:2;font-size:1.2rem;margin-bottom:1.25rem}
  .ctas{order:3;display:grid;gap:.6rem}
  .ctas .btn{width:100%}
  .ctas .btn-lg{min-height:3.5rem;padding-inline:1rem}
  .ctas .btn-ghost{min-height:3rem;font-size:1rem}
  .hero-note{order:4;margin:.9rem 0 1.6rem;font-size:.9375rem;line-height:1.5}
  .hero-visual{order:5;margin:0 0 1.75rem}
  .hero-copy .lede{order:6;font-size:1.0625rem;margin:0}
  .hv-stage{margin-inline:0}
  .crop{display:none}
  .hero-cmp .dev-desk,.hero-cmp .dev-ghost{display:none}
  .hero-cmp .cmp-frames{display:flex;align-items:flex-end;justify-content:center;padding:2.4rem 0 0}
  .hero-cmp .dev-pb{display:block;position:relative;flex:0 0 41%;z-index:1;margin-right:-4%;transform:rotate(-3.5deg) translateY(-5%);filter:saturate(.78) brightness(.88);transform-origin:50% 100%}
  .hero-cmp .dev-phone{position:relative;right:auto;bottom:auto;flex:0 0 55%;width:auto;z-index:2;transform:none}
  .hero-cmp .lbl{display:block;position:absolute;left:50%;top:-2.35rem;transform:translateX(-50%);padding:.3rem .85rem;border-radius:99px;font:600 .9375rem/1.3 var(--f-text);white-space:nowrap}
  .hero-cmp .lbl-b{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
  .hero-cmp .lbl-a{background:var(--gold);color:var(--ink)}
  .hero-cmp .dev-pb .phone-shell{padding:.4rem;border-radius:1.8rem}
  .hero-cmp .dev-pb .screen-p{border-radius:1.4rem}
  .callouts{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:1.15rem 0 0;transform:none!important}
  .co{position:static!important;opacity:1;transform:none;font-size:.875rem;padding:.45rem .8rem .45rem .65rem;gap:.5rem;box-shadow:none}
  .co-1{display:none}
  .chrome .url{display:none}
  .stage-tools{justify-content:flex-start}
  .dev-tabs{display:inline-flex}
  #stage-wrap[data-dev="phone"] .dev-desk{display:none}
  #stage-wrap[data-dev="phone"] .cmp-frames{padding-bottom:0}
  #stage-wrap[data-dev="phone"] .dev-phone{position:relative;width:min(19rem,82%);margin:0 auto}
  #stage-wrap[data-dev="desk"] .dev-phone{display:none}
  #stage-wrap[data-dev="desk"] .dev-desk{width:100%}
  #stage-wrap[data-dev="desk"] .cmp-frames{padding-bottom:0}
  .slider-label{width:100%;justify-content:space-between}
  input[type=range]{width:min(14rem,55vw);flex:1}
  .note-detail{padding-left:0;padding-top:4.1rem;min-height:0}
  .nd-pin{top:0}
  .bento{grid-template-columns:1fr}
  .t-mobile,.t-cta,.t-seo,.t-redesign,.t-trust,.t-pages{grid-column:1/-1}
  .t-mobile{min-height:34rem}
  .v-phone{width:10rem}
  .plan-b .flag{position:static;align-self:flex-start;margin-bottom:.2rem}
  .t-cta{min-height:21rem}.t-cta h3,.t-cta p{max-width:100%}
  .t-cta .tile-vis{right:1.25rem;left:1.25rem;top:1.25rem}
  .v-form{width:100%;max-width:18rem}
  .t-seo,.t-redesign{flex-direction:column;align-items:stretch;min-height:0}
  .v-serp,.v-ba{order:-1;flex:none}
  .steps{grid-template-columns:1fr;row-gap:0;padding-left:0}
  .steps::before,.steps::after{display:block;left:1.5rem;top:1.5rem;margin:0;width:3px;height:auto;bottom:1.5rem}
  .steps::before{right:auto}
  .steps::after{width:3px;height:calc((100% - 3rem)*var(--p));bottom:auto;background:linear-gradient(var(--aqua),var(--gold))}
  .steps li{padding:0 0 2.25rem 4.5rem;min-height:3rem}
  .steps li:last-child{padding-bottom:0}
  .type-list li{flex-direction:column;gap:.35rem}
  .ty-a{text-align:left}
  .plan-s{flex-direction:column;gap:.6rem}
  .row2{grid-template-columns:1fr}
  .row2>div+div label{margin-top:1.15rem}
  .foot-grid{grid-template-columns:1fr}
  .m-cta{display:flex}
  .nl-chapters li{grid-template-columns:1fr;gap:1rem}
  .ba-pair{grid-template-columns:1fr}
}
@media (max-width:379px){
  .bar-cta{display:none}
  .menu-btn{margin-left:auto}
}
@media (hover:none){.knob{transform:none!important}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .co{opacity:1;transform:none}.crop{opacity:.95}
  .hero-cmp .dev-desk,.hero-cmp .dev-phone,.callouts{transform:none}
}
/* OAK Digital Group wordmark */
.logo .wm{display:inline-flex;flex-direction:column;line-height:1;gap:.18rem}
.logo .wm b{font-weight:800;letter-spacing:.06em;font-size:1.25em}
.logo .wm small{font:600 .5em/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:#9fc3bf}
.logo .mark{--oak-cut:#0b2526}

/* portfolio: four founder-owned projects, desktop shot with a phone shot tucked in the corner */
.shot-img{position:relative}
.shot-img .shot-mob{position:absolute;right:4%;bottom:5%;width:21%!important;height:auto;border-radius:.7rem;border:3px solid #10201f;box-shadow:0 18px 30px -14px rgba(0,0,0,.55)}
.shot-kind{display:inline-block;margin:1.3rem 0 0 .5rem;font-size:.8125rem;color:var(--mute-l)}
/* consent banner (GA4, staging) */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;max-width:34rem;margin-left:auto;padding:1rem 1.15rem;border:1px solid var(--line-d);border-radius:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);font:400 .9375rem/1.45 var(--f-text)}
.consent p{margin:0 0 .75rem}.consent a{color:var(--aqua)}
.consent-btns{display:flex;gap:.6rem;justify-content:flex-end}