/* Stak Digital, site v2. One look, light paper with ink and green bands.
   Rule agreed 10 Nov: boxes are only for things you press. Everything else is bands, big type, lines and space. */
:root{
  --paper:#F4F6EF;--white:#FFFFFF;--sand:#F0ECE2;--ink:#15171A;--grey:#5F6670;--line:#DAD7CC;
  --accent:#A5EF72;--accent-deep:#90E05A;--accent-tint:#EEFBE4;
  --on-ink:#C9CDC6;--rule-ink:rgba(244,246,239,.18);
  --display:'Familjen Grotesk',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.75,.2,1);--pad:clamp(20px,4vw,40px);--band:clamp(64px,8.5vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance}
[id]{scroll-margin-top:88px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.work :focus-visible,.call :focus-visible{outline-color:var(--accent)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:12px}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}

/* Things you press */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:999px;border:1.5px solid var(--ink);white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.top{position:sticky;top:0;z-index:50;background:rgba(244,246,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:8px}
.brand b{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-0.02em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px}
.svc,.plain,.burger{font:500 .96rem var(--body);color:var(--ink);background:none;border:0;padding:9px 14px;border-radius:999px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.svc:hover,.plain:hover,.svc[aria-expanded="true"]{background:var(--white)}
.svc svg{transition:transform .2s}
.svc[aria-expanded="true"] svg{transform:rotate(180deg)}
.langs{display:inline-flex;gap:2px;font-family:var(--mono);font-size:.76rem}
.langs a{padding:5px 6px;color:var(--grey);text-decoration:none;border-radius:6px}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent-deep)}
.pick{align-items:center;gap:0;margin:0 10px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font:600 .8rem var(--body);letter-spacing:.02em}
.pick svg{margin:0 5px 0 7px;color:var(--grey)}
.pick a{padding:5px 9px;border-radius:999px;color:var(--ink);transition:background .18s}
.pick a:hover{background:var(--sand)}
.pick a[aria-current],.pick a[aria-current]:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.names{display:flex;flex-direction:column;align-items:flex-start;gap:0;font:400 1rem var(--body)}
.names a{padding:5px 0;color:inherit}
.names a:hover{text-decoration:underline;text-underline-offset:4px}
.cta{font:600 .96rem var(--body);background:var(--ink);color:var(--paper);text-decoration:none;padding:10px 18px;border-radius:999px;transition:background .18s,color .18s}
.cta:hover{background:var(--accent);color:var(--ink)}
.burger{display:none;border:1.5px solid var(--ink);padding:8px 16px;font-weight:600}

/* Services menu: the mark on the left, the four services as a list */
.menu-wrap{position:relative}
.menu{position:absolute;top:10px;right:var(--pad);width:min(800px,calc(100% - 2*var(--pad)));background:var(--white);border:1px solid var(--line);border-radius:24px;padding:22px;display:grid;grid-template-columns:216px minmax(0,1fr);gap:8px 30px}
.menu[hidden]{display:none}
.mark{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:center}
.mark span{aspect-ratio:1;border-radius:24%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:3.1rem;line-height:1;padding-bottom:.12em;transition:background .2s,color .2s}
.mark .g{background:var(--accent);color:var(--ink)}
.mark .d{background:var(--ink);color:var(--accent)}
.menu[data-on] .mark span{background:var(--sand);color:#C2BDAF}
.menu[data-on="1"] .mark span:nth-child(1),.menu[data-on="4"] .mark span:nth-child(4){background:var(--accent);color:var(--ink)}
.menu[data-on="2"] .mark span:nth-child(2),.menu[data-on="3"] .mark span:nth-child(3){background:var(--ink);color:var(--accent)}
.item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px;text-decoration:none;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item b{display:block;font-family:var(--display);font-weight:600;font-size:1.42rem;letter-spacing:-0.02em;line-height:1.15}
.item small{display:block;color:var(--grey);font-size:.93rem;margin-top:2px}
.go{flex:none;display:grid;place-items:center;border-radius:50%}
.item .go{width:36px;height:36px;border:1px solid var(--line);transition:background .18s,border-color .18s,transform .18s}
.item:hover .go,.item:focus-visible .go{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.more{display:none}
.foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:16px;margin-top:6px;color:var(--grey);font-size:.95rem}
.foot a{color:var(--ink);font-weight:600;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent-deep)}
main{transition:opacity .2s}
body.menu-open main{opacity:.25}

/* Hero: type first */
/* Black Friday strip, home page only. site.js hides it once the offer has ended. */
.offer{display:block;background:var(--ink);color:var(--paper);text-decoration:none}
.offer[hidden]{display:none}
.offer .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 16px;padding-top:13px;padding-bottom:13px;font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-0.01em;line-height:1.3;text-align:center}
.offer span span{text-wrap:balance}
.offer b{font-weight:600;color:var(--accent)}
.offer u{font-family:var(--body);font-weight:500;font-size:.93rem;letter-spacing:0;color:var(--on-ink);text-underline-offset:3px}
.offer:hover u{color:var(--accent)}
@media (max-width:560px){.offer .wrap{font-size:1rem;padding-top:10px;padding-bottom:10px}.offer u{display:none}}
.hero{padding:clamp(44px,7vw,104px) 0 clamp(52px,6vw,88px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.9rem);line-height:.94;letter-spacing:-0.045em;margin-top:22px;overflow-wrap:break-word}
/* The headline comes in a word at a time, then the green block wipes in behind Mallorca */
.js .hero h1{visibility:hidden}
.js .hero h1.split{visibility:visible}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .07em .14em;margin:-.08em -.07em -.14em}
.w>span{display:inline-block;animation:rise .85s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 60ms)}
@keyframes rise{from{transform:translateY(118%)}}
.split .hl{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 0/100% 100%;animation:wipe .6s cubic-bezier(.6,0,.2,1) .7s both}
@keyframes wipe{from{background-size:0% 100%}}
/* The green word sits on its own line and rolls through the kinds of business we work with */
.hl-line{display:block;margin:.07em 0 .05em;white-space:nowrap}
/* Room at the sides so the first and last letters are never shaved */
.roll{display:inline-block;box-sizing:content-box;position:relative;overflow:hidden;vertical-align:top;padding:.08em .07em .16em;margin:-.08em -.07em -.16em}
.cur,.nx{display:inline-block;white-space:nowrap}
.split .cur{animation:rise .7s var(--ease) .78s both}
.nx{position:absolute;left:.07em;top:.08em}

/* The stack: the four squares of the mark, one per service, landing on each other */
.stack{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 4px;width:100%;max-width:500px;justify-self:end}
.stack svg{display:block;width:100%;height:auto;overflow:visible}
.lt{font-family:var(--display);font-weight:700;font-size:58px;text-anchor:middle}
.drop{animation:drop .9s cubic-bezier(.2,.9,.3,1.18) both}
[data-n="4"] .drop{animation-delay:.2s}[data-n="3"] .drop{animation-delay:.36s}[data-n="2"] .drop{animation-delay:.52s}[data-n="1"] .drop{animation-delay:.68s}
@keyframes drop{from{transform:translateY(-240px);opacity:0}}
.hov{transition:transform .4s var(--ease)}
.lift{animation:float 7s ease-in-out infinite}
[data-n="2"] .lift{animation-delay:-1.6s}[data-n="3"] .lift{animation-delay:-3.2s}[data-n="4"] .lift{animation-delay:-4.8s}
@keyframes float{50%{transform:translateY(-7px)}}
.stack[data-on="1"] g[data-n="1"] .hov,.stack[data-on="2"] g[data-n="2"] .hov,.stack[data-on="3"] g[data-n="3"] .hov,.stack[data-on="4"] g[data-n="4"] .hov{transform:translateY(-18px)}
.tags{list-style:none;padding:0;position:relative}
.tags li{position:absolute;left:0;right:0;transform:translateY(-50%);animation:tag .5s var(--ease) both}
.tags li:nth-child(1){top:20.5%;animation-delay:1.25s}.tags li:nth-child(2){top:39%;animation-delay:1.15s}.tags li:nth-child(3){top:57.5%;animation-delay:1.05s}.tags li:nth-child(4){top:76%;animation-delay:.95s}
@keyframes tag{from{opacity:0;transform:translate(-12px,-50%)}}
.tags a{display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.2;color:var(--grey);transition:color .2s}
.tags a::before{content:"";flex:none;width:20px;height:1.5px;background:currentColor;transition:width .25s var(--ease)}
.tags a:hover,.stack[data-on="1"] a[data-n="1"],.stack[data-on="2"] a[data-n="2"],.stack[data-on="3"] a[data-n="3"],.stack[data-on="4"] a[data-n="4"]{color:var(--ink)}
.tags a:hover::before,.stack[data-on="1"] a[data-n="1"]::before,.stack[data-on="2"] a[data-n="2"]::before,.stack[data-on="3"] a[data-n="3"]::before,.stack[data-on="4"] a[data-n="4"]::before{width:34px}

/* Things come in as you reach them */
.js [data-r]{opacity:0;transform:translateY(28px)}
.js [data-r].in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.hl{display:inline-block;background:var(--accent);border-radius:.16em;padding:0 .13em .05em;margin:0 -.03em;line-height:1}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:end;margin-top:clamp(36px,5vw,68px)}
.lead{font-size:1.24rem;line-height:1.45;max-width:30em}
.hero .actions{margin-top:28px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.facts div{border-top:2px solid var(--ink);padding-top:14px}
.facts dt{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-0.02em;line-height:1.15}
.facts dd{color:var(--grey);font-size:.93rem;margin-top:5px}
.facts s{font-family:var(--body);font-weight:500;font-size:.62em;letter-spacing:0;color:var(--grey);margin-left:.3em;text-decoration-thickness:1.5px}

/* Services: four full-width rows that fill with the logo's colours */
.svcs h2{margin-bottom:18px}
.row{display:block;text-decoration:none;border-top:1px solid var(--line);transition:background .2s,color .2s}
.row.last{border-bottom:1px solid var(--line)}
.row-in{display:grid;grid-template-columns:3.5rem minmax(0,1.15fr) minmax(0,.85fr) 3.25rem;gap:0 24px;align-items:center;padding-top:clamp(22px,3vw,40px);padding-bottom:clamp(22px,3vw,40px)}
.row .n{font-family:var(--mono);font-size:.84rem;color:var(--grey);transition:color .2s}
.row .name{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.6vw,4rem);line-height:1;letter-spacing:-0.035em;transition:color .2s,transform .35s var(--ease)}
.row:hover .name,.row:focus-visible .name{transform:translateX(14px)}
.row .line{color:var(--grey);font-size:1.08rem;max-width:24em;transition:color .2s}
.row .go{justify-self:end;width:52px;height:52px;border:1.5px solid currentColor;transition:transform .2s,background .2s,color .2s,border-color .2s}
.row:hover .go,.row:focus-visible .go{transform:rotate(45deg)}
.row.g:hover,.row.g:focus-visible{background:var(--accent)}
.row.g:hover .n,.row.g:hover .line,.row.g:focus-visible .n,.row.g:focus-visible .line{color:var(--ink)}
.row.d:hover,.row.d:focus-visible{background:var(--ink);color:var(--paper)}
.row.d:hover .name,.row.d:focus-visible .name{color:var(--accent)}
.row.d:hover .n,.row.d:hover .line,.row.d:focus-visible .n,.row.d:focus-visible .line{color:var(--on-ink)}
.row:focus-visible{outline-offset:-4px}

/* Work: each project is its own band. Wello on ink with real screens, the jetski service on green */
.work{background:var(--ink);color:var(--paper);margin-top:var(--band);padding-top:var(--band);overflow:hidden}
.work .eyebrow{color:var(--accent)}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.work h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1;letter-spacing:-0.03em;margin-top:14px}
.proj{overflow:hidden;padding-top:clamp(40px,5vw,64px)}
.proj .case{padding-bottom:var(--band)}
.proj.two{background:var(--accent);color:var(--ink);padding:var(--band) 0}
.proj.two .case{padding-bottom:0}
.proj.two .kind,.proj.two .kind span,.proj.two .status,.proj.two .case .about,.proj.two .case.jet h3,.proj.two .case.jet li::before{color:var(--ink)}
.proj.two .case li{border-color:rgba(21,23,26,.3)}
.proj.two .status.soon i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.proj.two :focus-visible{outline-color:var(--ink)}
.proj.three{background:var(--sand);color:var(--ink);padding:var(--band) 0}
.proj.three .case{padding-bottom:0}
.proj.three .kind,.proj.three .kind span,.proj.three .status,.proj.three .case .about,.proj.three .case.jet h3,.proj.three .case.jet li::before,.proj.three .what summary::after{color:var(--ink)}
.proj.three .case li,.proj.three .what summary{border-color:var(--line)}
.proj.three .status.soon i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.proj.three :focus-visible{outline-color:var(--ink)}
.proj.three .jet-cols{align-items:center}
.screens{position:relative;padding:0 0 9% 12%}
/* No device frames: the two screens stand on their own, the phone set off from the laptop by a ring of the band's colour */
.desk{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.screens .ph{position:absolute;left:0;bottom:0;width:27%;border-radius:18px;padding:0;background:none;box-shadow:0 0 0 1px var(--line),0 0 0 6px var(--sand)}
/* Each screen holds a still picture, then the running page once it has loaded */
.view{position:relative;overflow:hidden;aspect-ratio:16/10;background:#FAE2EA}
.ph .view{aspect-ratio:390/844;border-radius:18px}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.view iframe{position:absolute;left:0;top:0;max-width:none;border:0;transform-origin:0 0;visibility:hidden}
.view.on iframe{visibility:visible}
.view.on img{visibility:hidden}
.hint{margin:18px 0 0;font:400 .78rem/1.4 var(--mono);letter-spacing:.04em;color:var(--grey);text-align:right;visibility:hidden}
.hint.on{visibility:visible}
.hint .touch{display:none}
/* On touch screens a swipe over the laptop screen moves the page; only the phone scrolls inside */
@media (hover:none) and (pointer:coarse){
  .desk .view iframe{pointer-events:none}
  .hint span{display:none}
  .hint .touch{display:inline}
}
.work.solo{margin-top:0;padding-top:clamp(20px,3vw,40px)}
.kind{display:flex;gap:14px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink)}
.kind span{color:var(--accent)}
.status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;color:var(--on-ink);margin-bottom:16px}
.status i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.status.soon i{background:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.case h3{font-weight:700;font-size:clamp(4.4rem,11vw,9.2rem);line-height:.9;letter-spacing:-0.055em;color:var(--accent);margin:10px 0 24px -.04em}
.case.jet h3{font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.95;letter-spacing:-0.045em;color:var(--paper);margin:14px 0 34px -.03em}
.case .about{font-size:1.16rem;max-width:31em;color:var(--on-ink)}
.case ul,.case ol{list-style:none;padding:0;margin:28px 0 26px;max-width:31em}
.case li{border-top:1px solid var(--rule-ink);padding:13px 0}
.case li:last-child{border-bottom:1px solid var(--rule-ink)}
/* What it does opens and closes */
.what{margin:28px 0 26px;max-width:31em}
.what summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);font-weight:600}
.what summary::-webkit-details-marker{display:none}
.what summary::after{content:"+";font:400 1.3rem/1 var(--mono);color:var(--accent)}
.what[open] summary::after{content:"\2212"}
.what summary:hover{opacity:.8}
.case .what ul,.case .what ol{margin:0;max-width:none}
.case .what li:first-child{border-top:0}
.case.jet .jet-cols>.what{margin:0;max-width:none}
.proj.two .what summary{border-color:rgba(21,23,26,.3)}
.proj.two .what summary::after{color:var(--ink)}
.jet-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.case.jet ol{margin:0;max-width:none;counter-reset:st}
.case.jet li{counter-increment:st;display:flex;gap:18px;align-items:baseline}
.case.jet li::before{content:"0" counter(st);flex:none;font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.out{font-weight:600;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.out:hover{color:var(--accent)}
.phones{display:flex;justify-content:flex-end;align-items:flex-start;align-self:end;margin-bottom:-120px}
.ph{position:relative;will-change:transform;width:min(54%,300px);background:#2B2F33;border-radius:38px;padding:9px}
.ph img{width:100%;border-radius:30px}
.ph.two{margin:110px 0 0 -7%;box-shadow:0 0 0 6px var(--ink)}

/* How it works: ruled columns */
.how{padding:var(--band) 0}
.how h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-0.03em;max-width:24ch;margin-top:14px}
.proc{list-style:none;padding:0;margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.proc li{position:relative;padding-top:16px}
.proc li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--ink);transform-origin:left}
.js .proc li::before{transform:scaleX(0);transition:transform 1s var(--ease) var(--d,0s)}
.js .proc li.in::before{transform:scaleX(1)}
.proc .n{font-family:var(--mono);font-size:.8rem;color:var(--grey)}
.proc h3{font-size:1.5rem;letter-spacing:-0.02em;line-height:1.15;margin-top:30px}
.proc .when{display:block;font-family:var(--mono);font-size:.78rem;margin-top:6px}
.proc p{color:var(--grey);margin-top:14px}

/* Three promises: full-width bands that stack over each other as you scroll */
.pane{position:sticky;top:68px;display:flex;min-height:min(68vh,620px)}
.pane-in{display:grid;grid-template-rows:auto 1fr auto;width:100%;padding-top:26px;padding-bottom:34px}
.pane .n{font-family:var(--mono);font-size:.84rem}
.pane b{align-self:center;font-family:var(--display);font-weight:600;font-size:clamp(3.1rem,11.5vw,10.5rem);line-height:.9;letter-spacing:-0.05em;padding:.12em 0}
.pane .s{justify-self:end;text-align:right;max-width:17em;font-size:1.14rem}
.p-g{background:var(--accent)}
.p-d{background:var(--ink);color:var(--paper)}
.p-d b{color:var(--accent)}
.p-d .n,.p-d .s{color:var(--on-ink)}
.p-s{background:var(--sand)}

/* Inner pages. Page head: the service name in big type, with its square of the mark lit */
.phead{padding:clamp(40px,6vw,88px) 0 clamp(52px,6vw,88px)}
.phead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:clamp(28px,5vw,80px);align-items:center}
.phead .eyebrow span{color:var(--ink);margin-right:14px}
.phead h1{font-size:clamp(2.9rem,7vw,6.4rem);line-height:.94;letter-spacing:-0.045em;margin-top:22px;overflow-wrap:break-word}
.phead h1.wide{font-size:clamp(3rem,8.6vw,7.8rem);max-width:11.5ch}
.phead .lead{margin-top:clamp(22px,3vw,34px)}
.phead .actions{margin-top:28px}
.phead .facts{margin-top:clamp(40px,5vw,68px)}
.stack.solo{display:block;max-width:250px}
.stack.solo use[href="#face"]{fill:#E9E5D9}
.stack.solo use[href="#side"]{fill:#D3CEC0;stroke:#D3CEC0}
.stack.solo text{fill:#B9B3A4}
.stack.solo[data-on="1"] g[data-n="1"] use[href="#face"],.stack.solo[data-on="4"] g[data-n="4"] use[href="#face"]{fill:#A5EF72}
.stack.solo[data-on="1"] g[data-n="1"] use[href="#side"],.stack.solo[data-on="4"] g[data-n="4"] use[href="#side"]{fill:#7CCB45;stroke:#7CCB45}
.stack.solo[data-on="1"] g[data-n="1"] text,.stack.solo[data-on="4"] g[data-n="4"] text{fill:#15171A}
.stack.solo[data-on="2"] g[data-n="2"] use[href="#face"],.stack.solo[data-on="3"] g[data-n="3"] use[href="#face"]{fill:#15171A}
.stack.solo[data-on="2"] g[data-n="2"] use[href="#side"],.stack.solo[data-on="3"] g[data-n="3"] use[href="#side"]{fill:#353A40;stroke:#353A40}
.stack.solo[data-on="2"] g[data-n="2"] text,.stack.solo[data-on="3"] g[data-n="3"] text{fill:#A5EF72}

/* What you get: a sand band, one ruled line each */
.gets{background:var(--sand);padding:var(--band) 0}
.gets-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.gets h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-0.03em;position:sticky;top:104px}
.gets-side h2{position:static}
.shot{margin:clamp(24px,3vw,40px) 0 0}
.shot .ph{width:min(100%,250px)}
.shot figcaption{font:400 .8rem var(--mono);color:var(--grey);margin-top:14px}
.stack svg a{cursor:pointer}
.lines{list-style:none;padding:0;counter-reset:ln}
.lines li{counter-increment:ln;display:flex;gap:20px;align-items:baseline;border-top:1px solid var(--ink);padding:18px 0;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.15;letter-spacing:-0.02em}
.lines li:last-child{border-bottom:1px solid var(--ink)}
.lines li::before{content:"0" counter(ln);flex:none;font:400 .8rem var(--mono);letter-spacing:0;color:var(--grey)}
.note{color:var(--grey);margin-top:20px;max-width:34em}
.gets .facts{margin-top:clamp(36px,4vw,56px)}

/* The steps, on ink */
.how.dark{background:var(--ink);color:var(--paper)}
.how.dark .eyebrow{color:var(--accent)}
.how.dark .proc li::before{background:var(--accent)}
.how.dark .proc .n,.how.dark .proc p{color:var(--on-ink)}

/* One line in a full band */
.say.one .pane{position:static;min-height:min(56vh,500px)}
.say.one .pane b{font-size:clamp(2.9rem,9.6vw,8.6rem)}

/* Where to go next */
.nexts{padding:var(--band) 0}

/* Prices: rows with the amount on the right */
.plist{padding-bottom:var(--band)}
.row.pr .row-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) clamp(12.5rem,20vw,17.5rem) 3.25rem}
.row.pr.flat .row-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) clamp(12.5rem,20vw,17.5rem)}
.row.pr .name{font-size:clamp(1.6rem,3.1vw,2.7rem);line-height:1.04;letter-spacing:-0.03em}
.row.flat:hover .name{transform:none}
.amt{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-0.02em;line-height:1.1;white-space:nowrap;text-align:right}
.amt s{font-family:var(--body);font-weight:500;font-size:.58em;letter-spacing:0;color:var(--grey);margin-left:.3em;text-decoration-thickness:1.5px;transition:color .2s}
.amt small{font:400 .92rem var(--body);letter-spacing:0;color:var(--grey)}
.row.d:hover .amt s,.row.d:focus-visible .amt s{color:var(--on-ink)}
.row.g:hover .amt s,.row.g:focus-visible .amt s{color:var(--ink)}
.monthly{background:var(--ink);color:var(--paper);padding:var(--band) 0}
.month-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.month-head h2{font-weight:700;font-size:clamp(3.6rem,10vw,8.4rem);line-height:.9;letter-spacing:-0.05em;color:var(--accent);margin-left:-.04em}
.month-head p{font-size:1.16rem;color:var(--on-ink);max-width:24em;padding-bottom:.6em}
.monthly .row{border-color:var(--rule-ink)}
.monthly .line,.monthly .amt small{color:var(--on-ink)}

/* About: two names */
.people{padding-bottom:var(--band)}
.people-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.people-grid div{border-top:2px solid var(--ink);padding-top:18px}
.people-grid b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,9vw,7.6rem);line-height:.92;letter-spacing:-0.05em;margin-left:-.04em}
.people-grid p{color:var(--grey);font-size:1.12rem;max-width:22em;margin-top:18px}

/* Contact: two rows to press */
.reachrows{padding-bottom:var(--band)}
.reachrows .line{overflow-wrap:anywhere}
.reachrows .facts{margin-top:clamp(40px,5vw,68px)}

/* Call: ink band */
.call{background:var(--ink);color:var(--paper);padding:var(--band) 0}
.call h2{font-size:clamp(2.3rem,5.6vw,4.8rem);line-height:.98;letter-spacing:-0.04em}
.call h2 span{display:block;color:var(--accent)}
.call .lead{color:var(--on-ink);font-size:1.16rem;max-width:33em;margin:28px 0 30px}
.call .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.call .btn:hover{background:var(--paper);border-color:var(--paper)}
.call .btn.ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.call .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--rule-ink);padding-top:20px}
.reach dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#9AA0A6}
.reach dd{margin-top:5px;font-size:1.06rem;overflow-wrap:anywhere}

/* Footer */
.end{padding:56px 0 28px}
.end-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr;gap:32px}
.end-brand p{color:var(--grey);max-width:21em;margin-top:14px;font-size:.98rem}
.end h2{font-family:var(--mono);font-weight:400;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.end nav a{display:block;width:fit-content;padding:5px 0;text-decoration:none}
.end nav a:hover{text-decoration:underline;text-underline-offset:4px}
.end .langs{margin-left:0}
.end-base{display:flex;justify-content:space-between;gap:16px;margin-top:48px;border-top:1px solid var(--line);padding-top:18px;font-family:var(--mono);font-size:.74rem;color:var(--grey)}


/* Process page: the audit follows one customer along a line; each stage carries its mark */
.journey{background:var(--white);padding:var(--band) 0}
.journey h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-0.03em;margin-top:14px}
.stages{list-style:none;padding:0;margin-top:clamp(44px,6vw,76px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stages li{position:relative;border-top:2px solid var(--ink);padding:26px 18px 0 0}
.stages li::before{content:"";position:absolute;left:0;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--white);border:2px solid var(--ink);box-sizing:border-box}
.stages li.ok::before{background:var(--accent)}
.stages li.pain::before{background:var(--ink)}
.stages .n{font-family:var(--mono);font-size:.8rem;color:var(--grey)}
.stages b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.1;letter-spacing:-0.02em;margin:10px 0 12px}
.stages .st{display:inline-block;font-family:var(--mono);font-size:.76rem;color:var(--grey)}
.stages .ok .st{color:var(--ink);background:var(--accent-tint);padding:3px 8px}
.stages .pain .st{color:var(--paper);background:var(--ink);padding:3px 8px}
.journey .note{margin-top:clamp(28px,4vw,44px)}
.row.tl .row-in{grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1fr)}
.row.tl .name{font-size:clamp(1.6rem,3.1vw,2.7rem);line-height:1.04;letter-spacing:-0.03em}
.monthly .row .n{color:var(--on-ink)}
.about-facts{padding-bottom:var(--band)}

@media (max-width:1000px){
  .hero-top{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:clamp(2.9rem,8.6vw,7.6rem)}
  .stack{justify-self:start;max-width:430px;grid-template-columns:minmax(0,190px) minmax(0,1fr)}
  .hero-row{grid-template-columns:1fr;align-items:start}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .end-grid{grid-template-columns:1fr 1fr}
  .end-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .stages{grid-template-columns:1fr}
  .stages li{border-top:0;border-left:2px solid var(--ink);padding:0 0 26px 24px}
  .stages li:last-child{padding-bottom:0}
  .stages li::before{left:-9px;top:0}
  .stages b{margin:4px 0 8px}
  .row.tl .row-in{grid-template-columns:2.4rem minmax(0,1fr)}
  .plain,.svc,.cta{display:none}
  .pick{margin:0 6px 0 0}
  .burger{display:inline-flex}
  .menu{left:var(--pad);width:auto;grid-template-columns:1fr;padding:18px;max-height:calc(100dvh - 92px);overflow:auto}
  .mark{grid-template-columns:repeat(4,44px);gap:6px;align-self:start}
  .mark span{font-size:1.5rem}
  .item b{font-size:1.28rem}
  .more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
  .more a{font-weight:500;text-decoration:none;padding:6px 0}
  .work-grid{grid-template-columns:1fr}
  .proj .case{padding-bottom:8px}
  .proj.two .case{padding-bottom:0}
  .jet-cols{grid-template-columns:1fr}
  .phones{justify-content:center;margin-bottom:-90px}
  .ph.two{margin-top:64px}
  .row-in{grid-template-columns:2.4rem minmax(0,1fr) 2.75rem;gap:6px 12px}
  .row .n{align-self:start;padding-top:.5em}
  .row .line{grid-column:2;font-size:1rem}
  .row .go{grid-column:3;grid-row:1/span 2;width:42px;height:42px}
  .pane{min-height:min(58vh,460px)}
  .pane .s{justify-self:start;text-align:left}
  .phead-grid{grid-template-columns:1fr}
  .stack.solo{display:none}
  .gets-grid{grid-template-columns:1fr}
  .gets h2{position:static}
  .shot{display:none}
  .row.pr .row-in,.row.pr.flat .row-in{grid-template-columns:minmax(0,1fr) 2.75rem;gap:6px 12px}
  .row.pr .name,.row.pr .line,.row.pr .amt{grid-column:1}
  .row.pr .amt{text-align:left;margin-top:8px}
  .row.pr .go{grid-column:2;grid-row:1/span 3}
  .month-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .people-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .lines li{gap:14px;padding:15px 0}
  .stack{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
  .tags a{font-size:.86rem;line-height:1.15;gap:8px}
  .tags a::before{width:14px}
  .facts{grid-template-columns:1fr;gap:0}
  .facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding:12px 0}
  .facts div:first-child{border-top-width:2px}
  .facts dt{font-size:1.2rem;white-space:nowrap}
  .facts dd{text-align:right;margin:0}
  .lead{font-size:1.12rem}
  .hero .actions .btn{flex:1 1 auto}
  .proc{grid-template-columns:1fr;gap:28px}
  .proc h3{margin-top:14px}
  .reach{grid-template-columns:1fr;gap:14px}
  .end-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (max-width:420px){
  .bar{gap:10px}
  .pick svg{display:none}
  .pick a{padding:5px 7px}
  .burger{padding:8px 13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js [data-r]{opacity:1;transform:none}
  .js .proc li::before{transform:none}
  .js .hero h1{visibility:visible}
  .pane{position:static}
}