/* Unroot — homepage concept, Nov 2026. One aesthetic: minimal agency grid. Sharp corners everywhere.
   Brand motif: the pixel. The logo's loose pixel is the star in the dawn sky and the corner mark of the grid. */
:root{
  --ink:#121116; --ink-2:#4b4954; --ink-3:#6f6d78;
  --line:rgba(18,17,22,.10); --line-b:rgba(18,17,22,.2);
  --violet:#8961e7; --violet-d:#6538d6; --violet-btn:#7c52e6; --night:#1d1336; --pink:#f2c2dc;
  --dawn:radial-gradient(70% 34% at 50% 100%,rgba(255,214,190,.95) 0%,rgba(255,206,196,.55) 45%,rgba(255,206,196,0) 100%),linear-gradient(180deg,#3f1bb8 0%,#5b33d8 26%,#8564ec 52%,#c79be6 76%,#f4c4d6 90%,#ffe3d6 100%);
  /* the same sky kept deep enough for white text (>=4.5:1 where text sits) */
  --band:radial-gradient(55% 70% at 88% -10%,rgba(242,194,220,.55),rgba(242,194,220,0) 70%),linear-gradient(180deg,#4f27c4 0%,#6338d8 55%,#7c52e6 100%);
  --f:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px; --pad:clamp(16px,4vw,48px);
  --rail-x:max(var(--pad),calc((100vw - var(--wrap)) / 2));
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;position:relative}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}

/* Container rails */
.rails{position:fixed;inset:0;pointer-events:none;z-index:1}
.rails::before,.rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rails::before{left:var(--rail-x)}
.rails::after{right:var(--rail-x)}
.sec{position:relative;border-top:1px solid var(--line)}

/* Pixel sky: squares generated by the script, twinkling slowly */
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky i{position:absolute;background:#fff;animation:tw var(--d,5s) ease-in-out var(--dl,0s) infinite}
@keyframes tw{0%,100%{opacity:var(--o,.7)}50%{opacity:calc(var(--o,.7) * .25)}}
.sky .xstar{position:absolute;width:6px;height:6px;background:#fff;animation:tw var(--d,5s) ease-in-out var(--dl,0s) infinite;--o:.85}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;font-size:15px;font-weight:500;letter-spacing:-.01em;border:1px solid transparent;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-p{background:var(--violet-btn);color:#fff}
.btn-p:hover{background:var(--violet-d)}
.btn-s{border-color:var(--line-b);color:var(--ink);background:#fff}
.btn-s:hover{border-color:var(--ink)}
.btn-w{background:#fff;color:var(--violet-d)}
.btn-w:hover{background:var(--night);color:#fff}
.btn-o{border-color:rgba(255,255,255,.7);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.14)}

/* Header */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav>.wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:20px}
.logo{display:flex;align-items:center;gap:9px}
.logo svg{width:30px;height:30px}
.logo span{font-weight:600;font-size:23px;letter-spacing:-.05em;line-height:1}
.links{display:flex;align-items:center;gap:4px}
.links>a,.links>button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;font-size:14.5px;color:var(--ink-2);transition:color .3s var(--ease)}
.links>a:hover,.links>button:hover,.links>button[aria-expanded="true"]{color:var(--ink)}
.links>button svg{width:9px;height:9px;transition:transform .35s var(--ease)}
.links>button[aria-expanded="true"] svg{transform:rotate(45deg)}
.nav .btn{height:40px;padding:0 16px;font-size:14px}
.burger{display:none;width:40px;height:40px;place-items:center}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}

/* Mega menu */
.mega{position:absolute;left:0;right:0;top:var(--nav-h);background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(29,19,54,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.mega>.wrap{display:grid;grid-template-columns:repeat(3,1fr) 1.25fr;border-inline:1px solid var(--line)}
.mega-col{padding:28px 24px 30px;border-right:1px solid var(--line)}
.mega-col h4{font-weight:500;font-size:13px;color:var(--ink-3);margin-bottom:14px}
.mega-col a{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:16px;border-bottom:1px solid var(--line);transition:color .3s var(--ease),padding .4s var(--ease)}
.mega-col a:hover{color:var(--violet-d);padding-left:6px}
.mega-col a em{font-style:normal;font-size:12px;color:var(--ink-3)}
.mega-feat{position:relative;padding:24px;background:var(--band);color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.mega-feat strong{font-size:26px;line-height:1.05;letter-spacing:-.04em;font-weight:600}
.mega-feat p{font-size:14px;opacity:.92;max-width:28ch;margin-top:8px}
.mega-feat .mono{color:rgba(255,255,255,.9)}

/* Hero */
.hero{padding:30px 0 0}
.hero-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;padding-inline:20px}
.eyebrow{grid-column:1/13;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:-4px}
.eyebrow i{width:8px;height:8px;background:var(--violet)}
.hero h1{grid-column:1/9;font-size:clamp(48px,6.3vw,98px);line-height:.9;letter-spacing:-.058em;font-weight:600}
.hero h1 .l{display:block}
.hero h1 .v{color:var(--violet)}
.hero-side{grid-column:9/13;padding-bottom:6px}
.hero-side p{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:34ch;margin-bottom:20px}
.hero-side .ctas{display:flex;flex-wrap:wrap;gap:8px}
.hero-proof{display:grid;grid-template-columns:auto auto auto 1fr;margin-top:32px;border-top:1px solid var(--line)}
.hero-proof li{display:flex;align-items:baseline;gap:10px;padding:14px 36px 14px 20px;white-space:nowrap}
.hero-proof li::before{content:"";flex:none;width:6px;height:6px;background:var(--violet);align-self:center;margin-right:2px}
.hp-m{display:none}
.hero-proof strong{font-size:28px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.hero-proof span{font-size:14px;color:var(--ink-2);line-height:1.25}

/* Stage — the one place the dawn sky lives */
.stage{--ww:clamp(500px,46vw,680px);position:relative;z-index:2;height:clamp(450px,35vw,540px);margin-inline:calc(50% - 50vw);background:var(--dawn);overflow:hidden;isolation:isolate}
.dither{position:absolute;left:0;bottom:0;width:100%;height:72px;pointer-events:none}
.cap{position:absolute;left:calc(var(--rail-x) + 20px);top:20px;z-index:3;color:#fff;font-size:15px;line-height:1.35;max-width:min(560px,46%)}
.cap b{font-weight:600;margin-right:8px}
.cap span{opacity:.92}
.win{position:absolute;left:50%;top:52%;width:var(--ww);transform:translate(-50%,-50%);background:#fff;box-shadow:0 40px 80px -30px rgba(29,19,54,.55),0 0 0 1px rgba(29,19,54,.08)}
.win-bar{height:40px;display:flex;align-items:center;padding:0 0 0 12px;border-bottom:1px solid var(--line);background:#fbfafd}
.win-dots{display:flex;gap:6px;flex:none}.win-dots i{width:8px;height:8px;background:#dcd8e4}
.win-bar .track{position:relative;flex:1;height:100%;margin:0 18px 0 22px}
.track .base,.track .fill{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-b)}
.track .fill{background:var(--violet);height:2px;margin-top:-.5px;transform-origin:left;transform:scaleX(0)}
.stop{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding-right:8px;background:#fbfafd;font-size:13.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:color .3s var(--ease)}
.stop.end{transform:translate(-100%,-50%);padding:0 0 0 8px}
.stop i{flex:none;width:8px;height:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-b);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.stop .dn{font-size:12px;font-weight:400;color:var(--ink-3)}
.stop.on{color:var(--ink)}
.stop.on i{background:var(--violet);box-shadow:none}
.win-url{position:absolute;left:0;right:0;top:0;height:30px;z-index:3;display:none;align-items:center;justify-content:center;gap:6px;background:#fbfafd;border-bottom:1px solid var(--line)}
.win-url #wUrlT{padding:3px 14px;background:#efedf3;font-size:12px;color:var(--ink);min-width:min(300px,70%);text-align:center}
.win-url svg{width:12px;height:12px;color:var(--ink-2)}
.win.is-live .win-url{display:flex}
.win.is-live .shot-after,.win.is-live .shot-live{top:30px;height:calc(100% - 30px)}
.btag{position:absolute;left:12px;top:10px;z-index:2;font-size:11.5px;padding:4px 8px;background:var(--night);color:#fff}
.win-body{position:relative;aspect-ratio:16/9;overflow:hidden;background:#efecf5}
.old{position:absolute;inset:0;display:flex;justify-content:center;overflow:hidden}
.old img{width:min(560px,64%);height:auto;align-self:flex-start;box-shadow:0 0 0 1px rgba(29,19,54,.08),0 20px 40px -24px rgba(29,19,54,.45);will-change:transform}
.canvas{position:absolute;inset:0;background:#e9e7ee;opacity:0}
.ff{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(29,19,54,.08),0 14px 30px -18px rgba(29,19,54,.5)}
.ff img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fl{position:absolute;left:0;bottom:calc(100% + 5px);font:500 10.5px/1 var(--f);color:#6f6c78;white-space:nowrap}
.ff-d{left:4%;top:21%;width:58%;height:58%}
.ff-p{left:67%;top:11%;width:27.5%;height:81%}
.shot-after,.shot-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0}
.scan{position:absolute;left:0;right:0;height:34%;top:0;opacity:0;background:linear-gradient(180deg,rgba(137,97,231,0) 0%,rgba(137,97,231,.14) 70%,rgba(137,97,231,.45) 99%,#8961e7 100%);pointer-events:none}
.sel{position:absolute;left:4%;top:21%;width:58%;height:58%;border:1.5px solid var(--violet);opacity:0;pointer-events:none}
.sel i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--violet)}
.sel i:nth-child(1){left:-4px;top:-4px}.sel i:nth-child(2){right:-4px;top:-4px}.sel i:nth-child(3){left:-4px;bottom:-4px}.sel i:nth-child(4){right:-4px;bottom:-4px}
.sel .tag{position:absolute;left:-1.5px;top:auto;bottom:-21px;background:var(--violet);color:#fff;font:500 10px/1 var(--mono);padding:5px 6px}
.comment{position:absolute;left:40%;top:66%;display:flex;align-items:flex-start;gap:8px;opacity:0;max-width:38%}
.comment .pin{flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--night);box-shadow:0 10px 20px -10px rgba(29,19,54,.7)}
.comment .pin svg{width:18px;height:18px;color:#fff;--accent:#f2c2dc}
.comment>div{background:#fff;padding:9px 12px 10px;box-shadow:0 18px 36px -16px rgba(29,19,54,.55);min-width:200px}
.comment .who{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.comment .t{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);min-height:1.4em;white-space:nowrap}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:9px 12px;font-size:13px;box-shadow:0 18px 36px -18px rgba(29,19,54,.55);opacity:0;white-space:nowrap;z-index:3}
.chip svg{width:14px;height:14px;color:var(--violet-d)}
.chip .sw{display:flex}.chip .sw i{width:12px;height:12px}
.c1{right:calc(50% + var(--ww) / 2 - 36px);top:26%}.c2{left:calc(50% + var(--ww) / 2 - 36px);top:31%}.c3{right:calc(50% + var(--ww) / 2 - 56px);bottom:20%}.c4{left:calc(50% + var(--ww) / 2 - 48px);bottom:25%}
.c5{left:calc(50% + var(--ww) / 2 - 64px);bottom:19%}
.c5 svg{color:#1f9d55}
.cursor{position:absolute;left:62%;top:58%;width:22px;height:22px;opacity:0;z-index:4;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.audit{position:absolute;left:calc(50% + var(--ww) / 2 - 36px);top:27%;z-index:3;background:#fff;padding:14px 16px 12px;box-shadow:0 24px 48px -20px rgba(29,19,54,.55);width:250px;opacity:0}
.audit::before{content:"Review";display:block;font-size:11px;color:var(--ink-3);margin-bottom:8px}
.audit li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.3;padding:6px 0;border-top:1px solid var(--line);opacity:.25}
.audit li b{flex:none;width:16px;height:16px;display:grid;place-items:center;background:var(--violet-btn);color:#fff;margin-top:1px}
.audit li b svg{width:11px;height:11px}

.stage-bar{position:absolute;top:14px;right:20px;z-index:5}
.tabs{display:flex;gap:2px}
.tabs button{font-size:14px;padding:7px 12px;color:rgba(255,255,255,.78);border:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.tabs button[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.tabs button:hover{color:#fff}

/* Client logos */
.logos{display:grid;grid-template-columns:150px repeat(8,minmax(0,1fr));align-items:center;padding:22px 20px 26px;gap:8px}
.logos-lbl{font-size:14px;line-height:1.3;color:var(--ink-2);max-width:12ch}
.logos div{display:grid;place-items:center;min-height:44px}
.logos img{width:auto;max-width:96px;filter:grayscale(1);opacity:.62;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.logos div:hover img{opacity:1;filter:none}

/* Section heads */
.head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:96px 20px 56px;align-items:end}
.idx{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink)}
.idx i{flex:none;width:8px;height:8px;background:var(--violet)}
.head .idx{grid-column:1/3;align-self:start;padding-top:14px}
.head h2{grid-column:3/10;font-size:clamp(38px,4.8vw,76px);line-height:.95;letter-spacing:-.05em;font-weight:600}
.head h2 .v{color:var(--violet)}
.head p{grid-column:10/13;color:var(--ink-2);font-size:16px}

/* Work: one row per case, its numbers next to its own picture */
.case-list{display:flex;flex-direction:column;padding:0 20px 40px}
.case{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px 0;border-top:1px solid var(--line)}
.case:first-child{border-top:0;padding-top:0}
.case-cap{grid-column:1/5;display:flex;flex-direction:column;justify-content:flex-start;gap:22px;padding:4px 0}
.case-cap .metric{margin-top:auto}
.case-no{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.metric{font-size:clamp(64px,7.4vw,120px);font-weight:600;letter-spacing:-.065em;line-height:.85;font-variant-numeric:proportional-nums}
.metric small{display:block;font-size:16px;letter-spacing:-.01em;font-weight:500;color:var(--ink);margin-top:16px;line-height:1.3}
.case-name h3{font-size:30px;letter-spacing:-.035em;font-weight:600;line-height:1.05}
.case-name p{font-size:14px;color:var(--ink-2);margin:8px 0 16px}
.case-name a{display:inline-flex;align-items:center;gap:8px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.case-name a svg{width:12px;height:12px}
.case .frame{grid-column:5/13;position:relative;overflow:hidden;aspect-ratio:16/9;background:#f1eef7;box-shadow:0 0 0 1px var(--line)}
.case .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.case:hover .frame img{transform:scale(1.03)}

.quote{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:72px 20px 96px;border-top:1px solid var(--line)}
.quote .idx{grid-column:1/3;align-self:start;padding-top:8px}
.quote blockquote{grid-column:3/11;font-size:clamp(24px,2.6vw,36px);line-height:1.2;letter-spacing:-.03em;font-weight:500}
.quote blockquote::before{content:"“";color:var(--violet)}
.quote blockquote::after{content:"”";color:var(--violet)}
.who{grid-column:3/11;display:flex;align-items:center;gap:14px;margin-top:8px}
.who img{width:44px;height:44px;object-fit:cover}
.who strong{display:block;font-weight:600}
.who span{color:var(--ink-2);font-size:14px}
.who a{margin-left:auto;color:var(--ink-2);font-size:14px;border-bottom:1px solid var(--line-b)}

/* Process */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.steps-rail{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.steps-rail i{position:absolute;inset:0;background:var(--violet);transform-origin:left;transform:scaleX(0)}
.step{padding:40px 20px 48px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step>.node{position:absolute;left:20px;top:0;width:9px;height:9px;transform:translateY(-50%);background:#d6d0e2;transition:background .4s var(--ease)}
.step.on>.node{background:var(--violet)}
.step .no{display:flex;align-items:baseline;gap:12px;font-size:14px;color:var(--ink-2)}
.step .no b{font-size:56px;font-weight:600;letter-spacing:-.06em;line-height:.9;color:var(--ink)}
.step h3{font-size:26px;letter-spacing:-.035em;font-weight:600;margin:6px 0 8px;line-height:1.1}
.step p{color:var(--ink-2);font-size:15px;max-width:38ch;min-height:3em}
.mini{position:relative;margin:24px 0 18px;aspect-ratio:4/3;background:#efecf5;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.lbl{position:absolute;bottom:10px;font-size:11.5px;padding:4px 8px;background:#fff;color:var(--ink);box-shadow:0 8px 18px -10px rgba(29,19,54,.5)}
/* 1 — a real before → after */
.m1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.m1 .lb{left:10px}.m1 .la{right:10px;background:var(--violet-btn);color:#fff}
/* 2 — one design becomes every page */
.m2 .pages{position:absolute;inset:11% 6% 19%;display:grid;grid-template-columns:.85fr 1fr;grid-template-rows:1fr 1fr;gap:18px 10px}
.m2 .pg{position:relative;display:flex;flex-direction:column}
.m2 .pg span{font-size:10.5px;color:#6f6c78;line-height:1;margin-bottom:4px}
.m2 .pg i{flex:1;background-size:cover;background-position:top center;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(29,19,54,.1),0 10px 20px -14px rgba(29,19,54,.5)}
.m2 .pg-tall{grid-row:1/3}
.m2 .la{left:7%}
/* 3 — the team edits by asking AI */
.m3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.m3 .edit{position:absolute;left:3.5%;top:27%;width:94%;height:30%;border:1.5px solid var(--violet);opacity:0}
.m3 .edit .tag{position:absolute;left:-1.5px;top:-20px;background:var(--violet);color:#fff;font:500 10px/1 var(--mono);padding:4px 6px}
.m3 .toast{position:absolute;right:6%;top:7%;display:flex;align-items:center;gap:6px;background:var(--night);color:#fff;font-size:12px;padding:6px 10px;opacity:0}
.m3 .toast svg{width:12px;height:12px;color:#b9f5c8}
.m3 .ask{position:absolute;left:6%;right:6%;bottom:7%;display:flex;align-items:center;gap:8px;background:var(--night);color:#fff;padding:8px 8px 8px 12px;font-size:12.5px}
.m3 .ask .t{flex:1;white-space:nowrap;overflow:hidden;min-height:1.4em}
.m3 .ask .t:empty::before{content:"Ask AI to change the site…";color:rgba(255,255,255,.5)}
.m3 .ask b{width:22px;height:22px;display:grid;place-items:center;background:var(--violet-btn)}
.m3 .ask b svg{width:10px;height:10px}

/* Closing call to action */
.cta-band{position:relative;background:linear-gradient(180deg,#ffffff 0%,#fbeef6 34%,#ffe6dc 100%);color:var(--ink);overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.cta-band>.wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:96px 20px 0;align-items:end}
.cta-band h2{grid-column:1/9;font-size:clamp(40px,5.4vw,84px);line-height:.94;letter-spacing:-.055em;font-weight:600}
.cta-band .side{grid-column:9/13}
.cta-band .side p{margin-bottom:20px;color:var(--ink-2)}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:8px}
.cta-band .fine{grid-column:1/13;margin-top:40px;position:relative;z-index:1;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line-b);padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sun{position:relative;display:block;width:100%;height:clamp(150px,17vw,240px);margin-top:-8px;border-bottom:1px solid var(--line-b)}

footer.foot>.wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:48px 20px 40px}
.foot .logo{grid-column:1/4;align-self:start}
.foot .say{grid-column:4/8;color:var(--ink-2)}
.foot nav{grid-column:9/13;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:15px}
.foot nav a{color:var(--ink-2)}.foot nav a:hover{color:var(--ink)}
.foot .base{grid-column:1/13;display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:16px;margin-top:24px}

/* Motion gating: hide only when the script is alive */
html.has-motion [data-reveal],html.has-motion [data-split]{visibility:hidden}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w{display:inline-block;will-change:transform}

/* Tablet */
@media (max-width:1024px){
  .hero h1{grid-column:1/13}
  .hero-side{grid-column:1/13;display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
  .hero-side p{margin-bottom:0}
  .hero-proof{grid-template-columns:repeat(4,auto)}
  .audit{display:none}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}
  .logos-lbl{grid-column:1/-1;max-width:none}
  .head .idx{grid-column:1/13;padding-top:0}
  .head h2{grid-column:1/13}
  .head p{grid-column:1/10}
  .quote blockquote,.who,.quote .idx{grid-column:1/13}
  .links{display:none}.burger{display:grid}
  .mega>.wrap{grid-template-columns:1fr 1fr}.mega-feat{grid-column:1/3;min-height:160px}
  .cta-band h2,.cta-band .side{grid-column:1/13}
}
/* Phone */
@media (max-width:760px){
  :root{--nav-h:58px}
  .rails{display:none}
  .nav>.wrap{padding-inline:0}
  .nav .btn{display:none}
  .hero{padding-top:36px}
  .hero-top{padding-inline:0}
  .hero h1{font-size:clamp(44px,13.4vw,72px)}
  .hero-side{display:block}
  .hero-side p{margin-bottom:20px;font-size:16px}
  .hero-side .ctas .btn,.cta-band .ctas .btn{flex:1 1 100%}
  .hp-d{display:none}.hp-m{display:grid}
  .hero-proof li::before{display:none}
  .hero-proof{grid-template-columns:1fr 1fr;margin-top:0}
  .hero-proof li{white-space:normal;padding:12px 0;border-right:0;border-bottom:1px solid var(--line);flex-direction:column;gap:4px}
  .hero-proof li:nth-child(odd){padding-right:12px;border-right:1px solid var(--line)}
  .hero-proof li:nth-child(even){padding-left:14px}
  .hero-proof li:nth-child(n+3){border-bottom:0}
  .stage{--ww:92vw;height:auto;aspect-ratio:4/3.4}
  .win{top:50%}
  .cap{display:none}
  .dither{height:40px}
  .stage-bar{position:static;padding:14px 0 16px}
  .tabs button{color:var(--ink-3)}
  .tabs button[aria-pressed="true"]{color:var(--ink);border-color:var(--line-b);background:none}
  .win-dots{display:none}
  .win-bar{padding:0}
  .win-bar .track{margin:0 12px}
  .stop{font-size:11px}
  .stop .dn{display:none}
  .eyebrow{font-size:14px;margin-bottom:-2px}
  .old img{width:70%}
  .chip{font-size:11.5px;padding:7px 9px}
  .c1{left:4%;right:auto;top:3%}.c2{right:4%;left:auto;top:3%}.c3{left:4%;right:auto;bottom:3%}.c4{display:none}.c5{right:4%;left:auto;bottom:3%}
  .fl{font-size:8.5px;bottom:calc(100% + 3px)}
  .sel .tag{display:none}
  .sel{left:3%;width:80%;top:12%;height:70%}
  .comment{left:auto;right:3%;top:auto;bottom:4%;max-width:66%}
  .comment .t{white-space:normal}
  .comment>div{min-width:0}
  .comment .t{font-size:12.5px}
  .comment .who{display:none}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px 0 22px;gap:14px 10px}
  .logos-lbl{grid-column:1/-1;max-width:none}
  .logos div{min-height:36px}
  .logos img{max-width:100%}
  .head{padding:72px 0 32px}
  .head p{grid-column:1/13}
  .case-list{padding:0 0 40px}
  .case{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .case-cap,.case .frame{grid-column:1/-1}
  .case-cap{order:2;gap:16px}
  .case-no{display:none}
  .metric{font-size:64px}
  .metric small{font-size:13px;margin-top:8px}
  .case-name h3{font-size:24px}
  .step .no b{font-size:44px}
  .quote{padding:56px 0 72px}
  .who a{display:none}
  .steps{grid-template-columns:1fr}
  .steps-rail{display:none}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:36px 0 40px}
  .step>.node{left:0}
  .step p{min-height:0}
  .cta-band>.wrap{padding:64px 0 0}
  .sun{height:150px;margin-top:20px}
  .c5{top:3%;bottom:auto}
  footer.foot>.wrap{padding:40px 0 32px}
  .foot .logo,.foot .say,.foot nav{grid-column:1/13}
  .foot .base{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}