/* Acquento website · Edition 1 */
@font-face{font-family:"Marcellus";src:url("fonts/Marcellus-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk[wght].ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono[wght].ttf") format("truetype");font-weight:100 800;font-display:swap}

:root{
  --ink:#1B1A14;--graphite:#6E6A5C;--pebble:#9C9682;--fog:#D6CFBC;--paper:#F3F0E8;--white:#FBFAF6;
  --marker:#E4A44A;--marker-soft:#F7E7CE;
  --line:rgba(14,14,14,.10);--line-strong:rgba(14,14,14,.24);
  --display:"Marcellus",Georgia,serif;--text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.7,0,.2,1);
  --max:1240px;--pad:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--marker);color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.display{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mute{color:var(--graphite)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- marker ---------- */
/* The highlighter: a marker swipe across the lower part of the words. Never a box. */
.mk,.mk-draw{background-image:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);background-repeat:no-repeat;
  background-position:0 0;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk{background-size:100% 100%}
.mk-draw{background-size:0% 100%;transition:background-size 1.1s var(--ease-io)}
.mk-draw.on{background-size:100% 100%}
/* on dark grounds the marker becomes the ink itself */
.dark .mk,.dark .mk-draw{background:none;color:var(--marker);transition:color .8s var(--ease)}
.dark .mk-draw{color:var(--paper)}
.dark .mk-draw.on{color:var(--marker)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:6px;font-size:15px;font-weight:500;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s,box-shadow .3s;will-change:transform}
.btn-mk{background:var(--marker);color:var(--ink)}
.btn-mk:hover{box-shadow:0 0 0 6px rgba(238,255,61,.35)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--white)}
.btn .arr{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}

/* ---------- nav ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--marker);transform-origin:0 50%;transform:scaleX(0);z-index:60}
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,border-color .4s,transform .5s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .4s var(--ease)}
.nav.scrolled{background:rgba(242,242,239,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav.scrolled .wrap{height:64px}
.nav.hide{transform:translateY(-100%)}
.nav .logo img{height:26px}
.nav ul{display:flex;gap:34px;list-style:none;font-size:14px}
.nav ul a{position:relative;color:var(--graphite);transition:color .2s}
.nav ul a:hover,.nav ul a.active{color:var(--ink)}
.nav ul a:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;background:var(--marker);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);z-index:-1}
.nav ul a:hover:after,.nav ul a.active:after{transform:scaleX(1)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink)}
.burger span:before{top:-6px}.burger span:after{top:6px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.split.in .w>span{transform:none}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(96px,12vw,160px) 0}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-bottom:clamp(48px,6vw,80px)}
.sec-head .n{padding-top:16px;color:var(--graphite)}
.sec-head h2{font-size:clamp(40px,5.6vw,76px);line-height:1.08}
.sec-head p{font-size:20px;color:var(--graphite);max-width:640px;margin-top:20px}
.dark{background:var(--ink);color:var(--paper)}
.dark .mute,.dark .sec-head .n,.dark .sec-head p{color:var(--pebble)}
.white{background:var(--white)}

/* ---------- hero ---------- */
.hero{background-image:radial-gradient(rgba(14,14,14,.09) 1px,transparent 1px);background-size:28px 28px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(48px,8vw,120px);align-items:center}
.hero h1{font-size:clamp(44px,5vw,80px);line-height:1.1}
.hero .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--graphite);max-width:540px;margin:32px 0 40px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .eyebrow{margin-bottom:28px;display:flex;align-items:center;gap:12px;color:var(--graphite)}
.hero .eyebrow i{width:8px;height:8px;background:var(--marker);display:block;box-shadow:0 0 0 4px rgba(238,255,61,.3);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(238,255,61,0)}}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes head{to{opacity:1;transform:none}}
@keyframes float{50%{translate:0 -10px}}
@keyframes fade{to{opacity:1}}
  box-shadow:0 10px 30px -12px rgba(14,14,14,.18);animation:evin .6s var(--ease) both}
@keyframes evin{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes evout{to{opacity:0;transform:translateY(-12px) scale(.97)}}
.scrollcue{margin-top:48px;display:flex;align-items:center;gap:12px;color:var(--pebble)}
.scrollcue span{width:1px;height:40px;background:var(--line-strong);position:relative;overflow:hidden}
.scrollcue span:after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 1.8s infinite var(--ease-io)}
@keyframes cue{to{top:100%}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;display:flex;gap:0;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;flex-shrink:0;gap:64px;padding-right:64px;animation:mq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--display);font-size:28px;white-space:nowrap;color:var(--graphite);display:flex;align-items:center;gap:64px}
.marquee span:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--pebble)}
@keyframes mq{to{transform:translateX(-100%)}}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(242,242,239,.14)}
.nums>div{padding:36px 28px 0 0;border-right:1px solid rgba(242,242,239,.14);margin-right:28px}
.nums>div:last-child{border-right:0;margin-right:0}
.nums b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,5.4vw,80px);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.nums span{font-size:15px;color:var(--pebble)}
.bars{margin-top:96px;display:grid;grid-template-columns:200px 1fr;gap:32px}
.bar{margin-bottom:28px}
.bar .row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:15px}
.bar .row b{font-family:var(--display);font-weight:400;font-size:26px}
.bar .track{height:14px;background:rgba(242,242,239,.08);border-radius:2px;overflow:hidden}
.bar .fill{height:100%;width:0;background:var(--marker);transition:width 1.6s var(--ease-io)}
.bar .fill.dim{background:var(--pebble)}

/* ---------- the edit (sticky, scroll-linked) ---------- */
.edit{height:340vh}
.edit .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.edit .lines{font-family:var(--display);font-size:clamp(36px,5.4vw,80px);line-height:1.22}
.edit .l{position:relative;display:inline-block;color:var(--ink);transition:color .5s}
.edit .l:after{content:"";position:absolute;left:0;top:54%;height:.06em;width:100%;background:var(--ink);transform:scaleX(var(--s,0));transform-origin:0 50%}
.edit .l.done{color:var(--pebble)}
.edit .final{margin-top:.4em;display:inline-block}
.edit .tag{position:absolute;top:120px;left:var(--pad);color:var(--graphite)}
.edit .count{position:absolute;bottom:48px;right:var(--pad);color:var(--graphite);font-variant-numeric:tabular-nums}

/* ---------- method ---------- */
.method{display:grid;grid-template-columns:200px 1fr;gap:32px}
.steps{position:relative}
.steps .rail{position:absolute;left:0;top:20px;bottom:40px;width:2px;background:var(--line)}
.steps .rail i{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--ink);transform-origin:0 0;transform:scaleY(var(--p,0))}
.step{padding:0 0 96px 64px;position:relative}
.step:last-child{padding-bottom:0}
.step .num{position:absolute;left:-19px;top:0;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--graphite);transition:background .5s,color .5s,border-color .5s,transform .5s var(--ease)}
.step.lit .num{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:scale(1.08)}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1.05;margin:8px 0 18px}
.step p{font-size:19px;color:var(--graphite);max-width:620px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:14px}
.chip img{width:16px;height:16px}

/* ---------- cases (horizontal scroll) ---------- */
.hscroll{height:var(--h,400vh)}
.hscroll .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.hscroll .head h2{font-size:clamp(40px,5.6vw,76px);line-height:1.05}
.hscroll .row{display:flex;gap:24px;padding:0 var(--pad);will-change:transform}
.card{flex:0 0 min(440px,82vw);background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:min(560px,66vh);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(14,14,14,.3)}
.card .top{display:flex;justify-content:space-between;color:var(--graphite)}
.card h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,2.6vw,40px);line-height:1.12;margin:24px 0 16px}
.card p{font-size:15.5px;color:var(--graphite)}
.card .st3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:28px}
.card .st3 b{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1}
.card .st3 span{font-size:12px;color:var(--graphite);line-height:1.3;display:block;margin-top:4px}
.card.end{background:var(--ink);color:var(--paper);border-color:var(--ink);justify-content:center;gap:28px}
.card.end h3{font-size:clamp(36px,3.4vw,52px)}
.hbar{margin:40px var(--pad) 0;height:2px;background:var(--line);position:relative}
.hbar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{border-top:2px solid var(--ink);padding-top:28px}
.quote q{display:block;font-family:var(--display);font-size:clamp(26px,2.4vw,34px);line-height:1.25;quotes:"“" "”"}
.quote cite{display:block;margin-top:24px;font-style:normal}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fit .col{border-radius:16px;padding:40px}
.fit .yes{background:var(--white);border:1px solid var(--line)}
.fit .no{border:1px dashed var(--line-strong)}
.fit h3{font-family:var(--display);font-weight:400;font-size:34px;margin-bottom:24px}
.fit li{list-style:none;display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:17px}
.fit li img{width:20px;height:20px;flex-shrink:0;margin-top:3px}
.fit .no li img{opacity:.45}
.fit .no li{color:var(--graphite)}
.fit .no li span{text-decoration:line-through;text-decoration-color:var(--pebble)}

/* ---------- faq ---------- */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;font-family:var(--display);font-size:clamp(22px,2vw,28px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:28px;height:28px;flex-shrink:0;position:relative;border-radius:50%;border:1px solid var(--line-strong);transition:background .3s,transform .4s var(--ease)}
.faq summary i:before,.faq summary i:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary i:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] summary i{background:var(--marker);border-color:var(--ink)}
.faq details[open] summary i:after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{overflow:hidden;color:var(--graphite);font-size:18px;max-width:720px}
.faq .a p{padding-bottom:28px}

/* ---------- cta ---------- */
.cta{text-align:left;overflow:hidden}
.cta h2{font-size:clamp(52px,9vw,140px);line-height:1.02}
.cta .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:56px;flex-wrap:wrap}
.cta p{font-size:19px;color:var(--pebble);max-width:520px}
.cta .bigmark{position:absolute;right:-6vw;top:50%;width:min(46vw,620px);transform:translateY(-50%) translateX(var(--x,0));opacity:.07;pointer-events:none}

/* ---------- footer ---------- */
footer{padding:64px 0 40px;border-top:1px solid rgba(242,242,239,.14)}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pebble);font-weight:400;margin-bottom:16px}
footer li{list-style:none;padding:4px 0;font-size:15px}
footer li a:hover{background:var(--marker);color:var(--ink)}
footer .base{display:flex;justify-content:space-between;margin-top:72px;color:var(--pebble)}

/* ---------- results page ---------- */
.page-hero{padding:180px 0 64px}
.page-hero h1{font-size:clamp(52px,8vw,120px);line-height:1.04}
.page-hero p{font-size:21px;color:var(--graphite);max-width:620px;margin-top:28px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 40px;position:sticky;top:72px;z-index:5;padding:12px 0;background:var(--paper)}
.filters button{height:42px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;transition:background .25s,border-color .25s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters button span{font-family:var(--mono);font-size:11px;margin-left:6px;opacity:.6}
.grid-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:120px}
.grid-cases .card{flex:none;min-height:440px;cursor:pointer;text-align:left}
.grid-cases .card.gone{display:none}
.drawer{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(14,14,14,.4);opacity:0;transition:opacity .4s}
.drawer .panel{position:relative;width:min(640px,100%);height:100%;background:var(--paper);overflow-y:auto;padding:48px;transform:translateX(100%);transition:transform .6s var(--ease)}
.drawer.open{pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.drawer .close{position:absolute;right:24px;top:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);font-size:20px}
.drawer h2{font-family:var(--display);font-weight:400;font-size:48px;line-height:1.08;margin:28px 0 20px}
.drawer .st3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0;border-top:1px solid var(--line);padding-top:24px}
.drawer .st3 b{display:block;font-family:var(--display);font-weight:400;font-size:34px}
.drawer .st3 span{font-size:13px;color:var(--graphite)}
.drawer .ba{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.drawer .ba h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--graphite);margin-bottom:12px}
.drawer .ba li{list-style:none;padding:10px 0;border-top:1px solid var(--line);font-size:15.5px}
.drawer .ba .b li{color:var(--pebble);text-decoration:line-through;text-decoration-color:var(--pebble)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav ul,.nav .btn{display:none}.burger{display:flex}
  .hero-grid{grid-template-columns:1fr}.stage{justify-self:center;max-width:420px;margin-top:24px}.feed{right:0}
  .sec-head,.method,.bars{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}.nums>div{border-right:0;margin:0;padding-bottom:28px}
  .quotes,.fit{grid-template-columns:1fr}
  .grid-cases{grid-template-columns:1fr 1fr}
  footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.grid-cases{grid-template-columns:1fr}.feed{display:none}.drawer .panel{padding:32px 24px}.drawer .ba{grid-template-columns:1fr}}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:70;background:var(--paper);padding:100px var(--pad);display:flex;flex-direction:column;gap:12px;transform:translateY(-100%);transition:transform .6s var(--ease)}
.mnav.open{transform:none}
.mnav a{font-family:var(--display);font-size:44px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal],.split .w>span{opacity:1;transform:none}
}


/* =========================================================
   v2 additions
   ========================================================= */

/* ---------- hero board ---------- */
.board-wrap{position:relative;padding:28px 0}
.board{position:relative;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 40px 80px -40px rgba(14,14,14,.28);
  opacity:0;transform:translateY(24px);animation:rise 1s .5s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.board .bh{display:flex;align-items:center;justify-content:space-between;color:var(--graphite)}
.board .bh .live{display:flex;align-items:center;gap:8px}
.board .bh .live i{width:7px;height:7px;border-radius:50%;background:#2BB673;box-shadow:0 0 0 3px rgba(43,182,115,.18);animation:pulse2 2s infinite}
@keyframes pulse2{50%{box-shadow:0 0 0 7px rgba(43,182,115,0)}}
.board .bm svg{width:26px;height:26px}
.board .bm .ring{stroke-dasharray:330;stroke-dashoffset:330;animation:draw 1.2s .8s var(--ease-io) forwards}
.board .bm .shaft{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s 1.8s var(--ease-io) forwards}
.board .bm .head{opacity:0;animation:fade .3s 2.2s forwards}
.board .big{font-family:var(--display);font-size:clamp(44px,4vw,60px);line-height:1;margin:22px 0 4px;font-variant-numeric:tabular-nums}
.board .sub{font-size:13px;color:var(--graphite)}
.board .spark{height:84px;margin:18px 0 8px}
.board .spark path.l{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s 1s var(--ease-io) forwards}
.board .spark path.a{fill:var(--marker);opacity:0;animation:fade 1s 2.6s forwards}
.opps{position:relative;height:208px;margin-top:14px;overflow:hidden}
.opp{display:flex;gap:12px;align-items:center;height:64px;margin-bottom:8px;padding:0 14px;background:var(--white);border:1px solid var(--line);border-radius:12px;font-size:13.5px;
  overflow:hidden;animation:oppin .7s var(--ease) both}
.opp .ic{width:30px;height:30px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.opp .ic img{width:16px;height:16px}
.opp small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pebble);margin-bottom:1px}
.opp.win{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opp.win small{color:var(--marker)}
.opp.win .ic{background:rgba(242,242,239,.1)}
.opp.win .ic img{filter:invert(1)}
.opp.out{animation:oppout .6s var(--ease) forwards}
@keyframes oppin{from{height:0;margin-bottom:0;opacity:0;border-width:0}60%{opacity:0}to{height:64px;margin-bottom:8px;opacity:1}}
@keyframes oppout{to{opacity:0}}
.floaty{position:absolute;background:var(--ink);color:var(--paper);border-radius:12px;padding:12px 16px;font-size:12px;box-shadow:0 20px 40px -20px rgba(14,14,14,.5);
  opacity:0;animation:fade .6s forwards,bob 6s ease-in-out infinite}
.floaty b{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;color:var(--marker)}
.floaty.f1{top:42%;right:-48px;animation-delay:2.4s,2.4s}
.floaty.f2{bottom:-10px;left:-44px;animation-delay:2.8s,3.2s}
@keyframes bob{50%{translate:0 -8px}}
.caption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pebble);margin-top:12px;text-align:right}

/* ---------- logo strip ---------- */
.logos{display:flex;align-items:center;gap:72px;padding-right:72px}
.logos .lg{height:30px;display:flex;align-items:center}
.logos .lg img{height:100%;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.65;transition:opacity .3s,filter .3s}
.logos .lg img:hover{opacity:1;filter:none}
.logos .lg span{font-family:var(--display);font-size:26px;color:var(--graphite);white-space:nowrap}

/* ---------- engine flow (motion graphic) ---------- */
.flow{position:relative;margin-top:24px}
.flow .line{position:absolute;left:6%;right:6%;top:44px;height:2px;background:rgba(242,242,239,.14)}
.flow .line i{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--marker);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.4s var(--ease-io)}
.flow.in .line i{transform:scaleX(1)}
.flow .pkt{position:absolute;top:39px;left:6%;width:12px;height:12px;border-radius:50%;background:var(--marker);box-shadow:0 0 0 4px rgba(238,255,61,.18);opacity:0}
.flow.in .pkt{animation:travel 5s linear infinite;animation-delay:var(--d)}
@keyframes travel{0%{left:6%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(94% - 12px);opacity:0}}
.flow .nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.flow .node{text-align:center}
.flow .node .c{width:88px;height:88px;margin:0 auto 22px;border-radius:50%;background:var(--ink);border:1px solid rgba(242,242,239,.22);display:flex;align-items:center;justify-content:center;
  transition:border-color .6s,background .6s;transition-delay:var(--d)}
.flow.in .node .c{border-color:rgba(242,242,239,.5)}
.flow .node:last-child .c{background:var(--marker);border-color:var(--marker)}
.flow .node .c img{width:30px;height:30px;filter:invert(1)}
.flow .node:last-child .c img{filter:none}
.flow .node h4{font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:6px}
.flow .node p{font-size:14px;color:var(--pebble);max-width:200px;margin:0 auto}
.flow .funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.flow .funnel div{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pebble);text-align:center;border-top:1px solid rgba(242,242,239,.14);padding-top:14px}
.flow .funnel b{display:block;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:0;text-transform:none;color:var(--paper);margin-bottom:4px}

/* ---------- case cards v2 ---------- */
.card{min-height:0;justify-content:flex-start;gap:0}
.hscroll .card{flex:0 0 min(400px,82vw);height:min(520px,64vh)}
.card .lead{font-family:var(--display);font-size:clamp(54px,4.6vw,72px);line-height:1;margin:28px 0 6px;letter-spacing:-.01em}
.card .lead-l{font-size:13px;color:var(--graphite)}
.card h3{font-size:clamp(22px,1.8vw,26px);margin:22px 0 10px}
.card p{font-size:14.5px;line-height:1.55}
.card .st2{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.card .st2 b{display:block;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1}
.card .st2 span{font-size:12px;color:var(--graphite);line-height:1.3;display:block;margin-top:4px}
.card .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-top:14px;color:var(--graphite)}
.card.end{justify-content:center}
.grid-cases .card{min-height:520px}

/* ---------- book page ---------- */
.book{padding:140px 0 96px}
.book .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.book h1{font-size:clamp(40px,4.2vw,62px);line-height:1.08;margin:20px 0 24px}
.book .lede{font-size:19px;color:var(--graphite);max-width:520px}
.book .agenda{margin:40px 0;counter-reset:a}
.book .agenda li{list-style:none;display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.book .agenda li:before{counter-increment:a;content:"0" counter(a);font-family:var(--mono);font-size:12px;color:var(--graphite);padding-top:4px}
.book .agenda b{display:block;font-weight:500;margin-bottom:2px}
.book .agenda span{color:var(--graphite);font-size:15px}
.book .host{display:flex;align-items:center;gap:16px;padding:20px;border-radius:14px;background:var(--white);border:1px solid var(--line)}
.book .host img.av{object-fit:cover;background:none}
.book .host .av{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--marker);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:20px;flex-shrink:0}
.book .host small{display:block;color:var(--graphite);font-size:13px}
.book .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.book .mini div{border-top:1px solid var(--line);padding-top:12px}
.book .mini b{display:block;font-family:var(--display);font-weight:400;font-size:30px}
.book .mini span{font-size:12.5px;color:var(--graphite)}
.book .quote2{margin-top:32px;font-family:var(--display);font-size:24px;line-height:1.3}
.book .quote2 cite{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-top:10px}
.cal{position:sticky;top:96px;background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(14,14,14,.35)}
.cal .ch{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.cal .calendly-inline-widget{min-width:320px;height:720px}
.cal .ph{height:720px;display:flex;align-items:center;justify-content:center;color:var(--pebble)}
.reassure{display:flex;gap:20px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);font-size:13px;color:var(--graphite)}
.reassure span{display:flex;align-items:center;gap:6px}
.reassure img{width:14px;height:14px}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}.board-wrap{max-width:520px;margin-top:16px}
  .floaty.f1{right:0}.floaty.f2{left:0}
  .flow .nodes,.flow .funnel{grid-template-columns:1fr 1fr}.flow .line,.flow .pkt{display:none}
  .book .grid{grid-template-columns:1fr}.cal{position:relative;top:0}
}

/* =========================================================
   Brand layer · Edition 2 (Northern palette). Overrides the base values above:
   Birch and Pitch foundation, Amber (fields and buttons), Amber deep (text and lines),
   Iron (the comparison, the work), Gilt (hairlines). Softly rounded corners. Acquento logo unchanged. */

:root{
  --ink:#1B1A14;          /* Pitch */
  --graphite:#6E6A5C;     /* Pitch mute */
  --pebble:#9C9682;
  --fog:#D6CFBC;          /* Birch deep */
  --paper:#F3F0E8;        /* Birch */
  --white:#FBFAF6;        /* Birch hi */
  --marker:#E4A44A;       /* Amber: fields and buttons only */
  --marker-soft:#F7E7CE;  /* Amber tint */
  --amber-deep:#B0762A;
  --iron:#47586A;
  --gilt:#A6853F;
  --line:rgba(27,26,20,.12);
  --line-strong:rgba(27,26,20,.26);
}

/* ---------- softly rounded corners throughout ---------- */
.btn,.filters button,.chip{border-radius:8px!important}
.card,.board,.fit .col,.cal,.book .host{border-radius:14px!important}
.opp,.floaty{border-radius:12px!important}
.opp .ic{border-radius:8px!important}
.bar .track{border-radius:4px!important}
.step .num{border-radius:10px!important}
.flow .node .c{border-radius:18px!important}
.drawer .close,.faq summary i{border-radius:50%!important}
.book .host img.av{border-radius:50%!important}

/* ---------- the accent: a gilt hairline drawn under amber-deep words, not a marker ---------- */
.mk,.mk-draw{background-image:linear-gradient(var(--gilt),var(--gilt));background-repeat:no-repeat;background-position:0 96%;
  background-size:100% 2px;padding:0;color:var(--amber-deep)}
.mk-draw{background-size:0% 2px;transition:background-size 1.2s var(--ease-io),color .8s var(--ease)}
.mk-draw.on{background-size:100% 2px}
.dark .mk,.dark .mk-draw,.dark .mk-draw.on{background:none!important;color:var(--marker)}

/* ---------- buttons: amber field, pitch text ---------- */
.btn-mk{background:var(--marker);color:var(--ink)}
.btn-mk:hover{box-shadow:0 0 0 6px rgba(228,164,74,.25)}
.progress{background:var(--amber-deep)}
::selection{background:var(--marker-soft);color:var(--ink)}

/* ---------- hero ---------- */
.hero{background-image:radial-gradient(rgba(166,133,63,.28) 1px,transparent 1px)}
.hero .eyebrow i{background:var(--marker);box-shadow:0 0 0 4px rgba(228,164,74,.25)}
.board{box-shadow:0 40px 80px -40px rgba(27,26,20,.28);border-color:var(--line)}
.board .bh .live i{background:var(--amber-deep);box-shadow:0 0 0 3px rgba(176,118,42,.2)}
.board .spark path.a{fill:var(--marker)}
.board .spark path.l{stroke:var(--ink)}
.opp{box-shadow:0 10px 24px -14px rgba(27,26,20,.22)}
.opp.win{background:var(--ink);border-color:var(--ink)}
.opp.win small{color:var(--marker)}
.floaty{background:var(--ink)}
.floaty b{color:var(--marker)}

/* ---------- nav ---------- */
.nav.scrolled{background:rgba(243,240,232,.86)}
.nav ul a:after{height:1.5px;bottom:-6px;background:var(--gilt)}

/* ---------- marquee ---------- */
.marquee{border-color:var(--gilt);border-top-width:1px;border-bottom-width:1px;border-top-color:rgba(166,133,63,.45);border-bottom-color:rgba(166,133,63,.45)}
.marquee span:after{background:var(--gilt);border-radius:50%}

/* ---------- the edit ---------- */
.edit .l:after{background:var(--amber-deep)}

/* ---------- engine flow ---------- */
.flow .line i{background:var(--marker)}
.flow .pkt{background:var(--marker);box-shadow:0 0 0 4px rgba(228,164,74,.18);border-radius:50%}
.flow .node:last-child .c{background:var(--marker);border-color:var(--marker)}
.flow .funnel div{border-top-color:rgba(166,133,63,.4)}

/* ---------- numbers: amber is the win, iron is the comparison ---------- */
.nums{border-top-color:rgba(166,133,63,.4)}
.bar .fill{background:var(--marker)}
.bar:nth-child(2) .fill{background:var(--iron)}
.bar .fill.dim{background:#6C7C89}

/* ---------- method: the Clozio frieze. Design gilt, Build iron, Close amber ---------- */
.steps .rail i{background:var(--ink)}
.step:nth-child(2).lit .num{background:var(--gilt);border-color:var(--gilt);color:var(--white)}
.step:nth-child(3).lit .num{background:var(--iron);border-color:var(--iron);color:var(--white)}
.step:nth-child(4).lit .num{background:var(--marker);border-color:var(--marker);color:var(--ink)}
.chip{background:var(--white)}

/* ---------- cases ---------- */
.card{border-color:var(--line)}
.card:hover{box-shadow:0 30px 60px -30px rgba(27,26,20,.3)}
.card .lead{color:var(--ink)}
.card .st2{border-top-color:rgba(166,133,63,.45)}
.hbar i{background:var(--amber-deep)}

/* ---------- fit ---------- */
.fit .yes{border-color:var(--line)}
.fit .yes li{border-top-color:rgba(166,133,63,.3)}

/* ---------- footer: the gilt twist ---------- */
footer{position:relative;border-top:0}
footer:before{content:"";display:block;height:22px;margin:-11px 0 40px;background:url("img/element-twist-gilt.svg") center/100% 22px no-repeat}

/* ---------- results page ---------- */
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.drawer .scrim{background:rgba(27,26,20,.45)}
.drawer .ba .b li{color:var(--pebble)}

/* ---------- booking page ---------- */
.cal{box-shadow:0 40px 80px -50px rgba(27,26,20,.35)}
.book .host .av{background:var(--ink);color:var(--marker)}