/* Vanta Territory · v2 · 22-oct-2026. Same tokens as v1 (paper, ink, sage), one clean sheet. */
:root{
  --paper:#f6f5f1;--paper-2:#eeefe8;--ink:#101110;--ink-2:#1c2518;--muted:#666762;--line:#d6d6cf;
  --sage:#dce4d3;--sage-2:#e7eddf;--sage-ink:#4b5d3e;--accent:#a4bc8e;
  --ease:cubic-bezier(.2,.7,.25,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4.45vw,80px);--max:1680px;
  --r-lg:28px;--r-md:18px;--r-sm:12px;
  --sec:clamp(72px,9vw,140px);
}
@font-face{font-family:Inter;src:url('/assets/inter-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
body:has(dialog[open]){overflow:hidden}
img,video{display:block;max-width:100%;height:auto}
p,h1,h2,h3,h4,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--paper)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-180%);background:#fff;padding:12px 16px;border-radius:8px}
.skip-link:focus{transform:none}
.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--muted)}
.dark .eyebrow{color:#aab5a0}
.sec{padding-block:var(--sec)}
.sec-head{display:grid;gap:18px;max-width:880px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-size:clamp(32px,4.2vw,64px);letter-spacing:-.045em;line-height:1.02;font-weight:560}
.sec-head p{font-size:clamp(16px,1.25vw,19px);color:var(--muted);max-width:620px}
.dark .sec-head p{color:#c3cbb9}
.mark{background:var(--ink);color:#fff;padding:0 .14em;box-shadow:0 0 0 1px #a4bc8e94;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dark .mark{background:#fff;color:var(--ink);box-shadow:none}
.dark{background:var(--ink);color:var(--paper)}
.sage{background:var(--sage)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px 0 26px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.01em;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:transform .35s var(--ease-out),background .25s,color .25s,box-shadow .35s var(--ease-out)}
.btn .arr{display:inline-grid;place-items:center;width:22px;height:22px;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px #10111080}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.dark .btn.ghost{background:transparent;color:#fff;border-color:#ffffff66}
.dark .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;position:relative;padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .4s var(--ease-out)}
.link:hover::after{transform:scaleX(0);transform-origin:right}
.link .arr{transition:transform .3s var(--ease-out)}
.link:hover .arr{transform:translate(3px,-3px)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:var(--gutter);color:#fff;transition:background .35s,color .35s,box-shadow .35s,height .35s}
.site-header.solid{background:#f6f5f1e6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);height:64px;box-shadow:0 1px 0 #10111014}
.brand{display:inline-flex;align-items:baseline;gap:6px;font-weight:700;letter-spacing:-.04em;font-size:18px}
.brand b{font-weight:400;opacity:.75}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:13px;font-weight:600}
.nav a{position:relative;padding:6px 0;opacity:.85;transition:opacity .25s}
.nav a:hover{opacity:1}
.nav a:not(.pill)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav a:not(.pill):hover::after{transform:scaleX(1);transform-origin:left}
.nav .pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 18px;border:1px solid currentColor;border-radius:999px;opacity:1}
.nav .pill .arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:currentColor}
.nav .pill .arr::before{content:"↗";color:var(--ink);font-size:15px}
.site-header:not(.solid) .nav .pill .arr::before{color:var(--ink)}
.site-header.solid .nav .pill .arr::before{color:#fff}
.nav .pill:hover{background:#ffffff1a}
.site-header.solid .nav .pill:hover{background:#1011100f}
@media(max-width:700px){.nav a.hide-m{display:none}}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#070a06;color:#fff;isolation:isolate}
.hero-grid{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(var(--cols,12),1fr);grid-auto-rows:1fr;gap:1px;padding:1px;background:#ffffff0d}
.hero-grid i{display:block;background:#070a06;transition:background .9s var(--ease-out);will-change:background}
.hero-grid i.lit{background:#1c2518;transition-duration:.12s}
.hero-grid i.mine{background:var(--paper)}
.hero-glow{position:absolute;inset:-20%;z-index:1;pointer-events:none;background:radial-gradient(600px 600px at var(--gx,70%) var(--gy,30%),#a4bc8e22,transparent 60%);transition:opacity .6s}
.hero-inner{position:relative;z-index:2;display:grid;gap:34px;padding-top:140px;padding-bottom:clamp(40px,6vh,72px)}
.hero h1{font-size:clamp(44px,8.6vw,148px);letter-spacing:-.06em;line-height:.94;font-weight:620;max-width:12ch}
.hero h1 .mark{background:#fff;color:#070a06;box-shadow:none;padding:0 .1em;margin-left:.05em}
.hero-row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.hero-row p{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:#d8ddd2;max-width:560px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-self:end}
.hero-principles{display:flex;gap:10px;flex-wrap:wrap}
.hero-principles span{font-size:12px;font-weight:600;letter-spacing:.04em;padding:9px 14px;border:1px solid #ffffff33;border-radius:999px;color:#eef0e8;transition:background .3s,border-color .3s,transform .4s var(--ease-out)}
.hero-principles span:hover{background:#fff;color:#070a06;border-color:#fff;transform:translateY(-2px)}
.hero-top{position:absolute;z-index:2;top:96px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#aab5a0;font-weight:600}
.hero-cue{position:absolute;z-index:2;right:var(--gutter);bottom:28px;width:36px;height:56px;border:1px solid #ffffff44;border-radius:999px;display:grid;place-items:start center;padding-top:8px}
.hero-cue::before{content:"";width:3px;height:10px;border-radius:3px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(22px);opacity:0}100%{transform:translateY(22px);opacity:0}}
@media(max-width:900px){.hero-row{grid-template-columns:1fr}.hero-ctas{justify-self:start}.hero-top{top:84px}.hero-cue{display:none}}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:18px;background:var(--paper)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-inline:28px;white-space:nowrap;color:var(--muted)}
.marquee span::before{content:"·";margin-right:28px;color:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Who / specialties */
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.who p.lead{font-size:clamp(18px,1.6vw,24px);line-height:1.4;letter-spacing:-.015em;max-width:560px}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.spec{position:relative;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:#fff8;transition:background .35s,border-color .35s,transform .45s var(--ease-out),box-shadow .45s var(--ease-out);cursor:default}
.spec strong{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;letter-spacing:-.01em}
.spec strong i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;transition:transform .4s var(--ease-out),background .3s,color .3s}
.spec p{font-size:14px;color:var(--muted);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease-out),opacity .4s,margin .5s var(--ease-out)}
.spec:hover,.spec.open{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px -22px #10111099}
.spec:hover p,.spec.open p{max-height:120px;opacity:1;margin-top:10px;color:#c3cbb9}
.spec:hover strong i,.spec.open strong i{transform:rotate(45deg);background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:900px){.who{grid-template-columns:1fr}}
@media(max-width:520px){.spec-grid{grid-template-columns:1fr}}

/* Case header + film */
.case-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.case-head img{width:clamp(160px,18vw,260px);height:auto}
.case-head h2{font-size:clamp(34px,4.6vw,70px);letter-spacing:-.05em;line-height:1;font-weight:560}
.case-head p{color:#c3cbb9;font-size:clamp(16px,1.25vw,19px);max-width:620px;margin-top:14px}
.film{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 40px 80px -40px #000}
.film video{width:100%;height:100%;object-fit:cover}
.film .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0000 40%,#000a);transition:opacity .5s;cursor:pointer}
.film .play b{display:grid;place-items:center;width:clamp(72px,8vw,112px);height:clamp(72px,8vw,112px);border-radius:50%;background:#fff;color:#000;font-size:28px;padding-left:6px;transition:transform .5s var(--ease-out),box-shadow .5s}
.film:hover .play b{transform:scale(1.08);box-shadow:0 0 0 14px #ffffff22}
.film .play span{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,36px);right:clamp(18px,3vw,40px);display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#eef0e8;font-weight:600}
.film.playing .play{opacity:0;pointer-events:none}
.film-note{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:#aab5a0}
@media(max-width:700px){.case-head{grid-template-columns:1fr;align-items:start}.film{aspect-ratio:4/3;border-radius:var(--r-md)}}

/* Website */
.site-row{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,64px);align-items:center}
.mac{position:relative;border-radius:var(--r-md);overflow:hidden;background:#1e1e1e;box-shadow:0 30px 60px -30px #10111066;transform:perspective(1200px) rotateX(0) rotateY(0);transition:transform .7s var(--ease-out),box-shadow .7s}
.mac:hover{box-shadow:0 50px 90px -40px #10111099}
.mac-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#2a2a2a;color:#bdbdbd;font-size:12px}
.mac-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57;display:inline-block}
.mac-bar i:nth-child(2){background:#febc2e}.mac-bar i:nth-child(3){background:#28c840}
.mac-bar span{flex:1;text-align:center;background:#1a1a1a;border-radius:7px;padding:5px 10px;margin-inline:40px 20px}
.mac-screen{position:relative;overflow:hidden}
.mac-screen img{width:100%;height:auto;transition:transform 1.2s var(--ease-out)}
.mac:hover .mac-screen img{transform:scale(1.03)}
.mac-cta{position:absolute;inset:0;display:grid;place-items:center;background:#07090644;opacity:0;transition:opacity .4s}
.mac:hover .mac-cta,.mac:focus-within .mac-cta{opacity:1}
.mac-cta .btn{transform:translateY(8px)}
.mac:hover .mac-cta .btn{transform:translateY(0)}
@media(hover:none){.mac-cta{opacity:1;background:linear-gradient(0deg,#070906aa,#0000 60%);align-items:end;padding-bottom:18px}}
.site-points{display:grid;gap:22px}
.site-points li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.site-points li:first-child{border-top:0;padding-top:0}
.site-points li b{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink);padding-top:3px}
.site-points li strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px;font-size:16px}
.booking{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(20px,3vw,40px);border-radius:var(--r-lg);background:var(--ink);color:var(--paper)}
.booking figure{grid-column:1/-1;border-radius:var(--r-sm);overflow:hidden;background:#000;position:relative}
.booking img{width:100%;height:auto}
.booking .zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease-out)}
.booking figure:hover .zoom,.booking figure:focus-within .zoom{opacity:1;transform:none}
@media(hover:none){.booking .zoom{opacity:1;transform:none}}
.booking h3{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;font-weight:560;line-height:1.1}
.booking p{color:#c3cbb9;font-size:15px;max-width:520px}
.booking .limo{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:#eef0e8;padding:10px 16px 10px 10px;border:1px solid #ffffff2e;border-radius:999px}
.booking .limo img{width:26px;height:auto}
@media(max-width:900px){.site-row{grid-template-columns:1fr}.booking{grid-template-columns:1fr}}

/* Tools */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tool{display:grid;gap:14px;align-content:center;justify-items:center;min-height:150px;padding:22px 16px;border-radius:var(--r-md);background:#f6f5f1;border:1px solid #c6d0bc;text-align:center;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .3s}
.tool:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px #26391c80;background:#fff}
.tool img{height:34px;width:auto;max-width:120px;filter:grayscale(1) contrast(.9);opacity:.8;transition:filter .4s,opacity .4s,transform .5s var(--ease-out)}
.tool:hover img{filter:none;opacity:1;transform:scale(1.04)}
.tool .wordmark-text{font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ink);opacity:.8;transition:opacity .4s}
.tool:hover .wordmark-text{opacity:1}
.tool small{font-size:12px;color:var(--muted);line-height:1.4}
.tool strong{font-size:14px;font-weight:600;letter-spacing:-.01em}
.tools-note{margin-top:22px;font-size:12px;color:var(--muted)}

/* Carousels */
.car{position:relative}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;flex:0 0 auto}
.car-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.car-btns{display:flex;gap:8px}
.car-btns button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;transition:background .3s,color .3s,transform .4s var(--ease-out),opacity .3s}
.car-btns button:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.car-btns button:disabled{opacity:.3;pointer-events:none}
.dark .car-btns button{border-color:#ffffff33}
.dark .car-btns button:hover{background:#fff;color:var(--ink)}
.car-pos{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dark .car-pos{color:#aab5a0}
.card{position:relative;width:min(78vw,340px);aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;background:#111;color:#fff;isolation:isolate;transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.card.wide{width:min(86vw,560px);aspect-ratio:16/10}
.card.tall{aspect-ratio:4/5}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px #10111099}
.card img,.card video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.card:hover img{transform:scale(1.05)}
.card .tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:#0a0f07b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#eef0e8}
.card .tag img{width:auto;height:11px;object-fit:contain;transform:none}
.card .cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:48px 16px 16px;background:linear-gradient(0deg,#000c,#0000);font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.35;transform:translateY(6px);opacity:.9;transition:transform .5s var(--ease-out),opacity .5s}
.card:hover .cap{transform:none;opacity:1}
.card .open{position:absolute;right:14px;top:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:17px;opacity:0;transform:translateY(-6px) scale(.9);transition:opacity .35s,transform .45s var(--ease-out)}
.card:hover .open,.card:focus-within .open{opacity:1;transform:none}
@media(hover:none){.card .open{opacity:1;transform:none}}
.card .pv{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.card .pv b{width:56px;height:56px;border-radius:50%;background:#ffffffd9;color:#000;display:grid;place-items:center;font-size:20px;padding-left:4px;transition:transform .5s var(--ease-out)}
.card:hover .pv b{transform:scale(1.08)}
.card.is-playing .pv,.card.is-playing .cap{opacity:0}
.card .count{position:absolute;left:14px;bottom:14px;z-index:3;font-size:11px;letter-spacing:.08em;padding:6px 10px;border-radius:999px;background:#0a0f07b3;color:#eef0e8}

/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.filters button{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters button:hover:not([aria-pressed=true]){border-color:var(--ink)}
.filters .n{margin-left:auto;font-size:13px;color:var(--muted)}
.foot-note{margin-top:22px;font-size:13px;color:var(--muted)}

/* Newsletters */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-card{position:relative;display:grid;border-radius:var(--r-lg);overflow:hidden;background:#101110;color:#fff;aspect-ratio:4/5;text-align:left;transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.news-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px -34px #10111099}
.news-card .bg{position:absolute;inset:0}
.news-card .bg img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform 1.4s var(--ease-out),opacity .6s}
.news-card .bg.pair{display:grid;grid-template-columns:1fr 1fr}
.news-card:hover .bg img{transform:scale(1.05);opacity:1}
.news-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,#0006 0%,#0000 35%,#000d 100%)}
.news-card .top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px}
.news-card .top img{height:16px;width:auto}
.news-card .date{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:7px 11px;border-radius:999px;background:#ffffff22;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.news-card .body{position:relative;z-index:2;align-self:end;padding:18px 20px 20px;display:grid;gap:12px}
.news-card .body small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c3cbb9;font-weight:600}
.news-card h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.1;font-weight:560}
.news-card .read{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;height:40px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);width:max-content;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease-out)}
.news-card:hover .read,.news-card:focus-visible .read{opacity:1;transform:none}
@media(hover:none){.news-card .read{opacity:1;transform:none}}
@media(max-width:900px){.news{grid-template-columns:1fr;gap:14px}.news-card{aspect-ratio:4/4.4}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.form-card{border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);background:linear-gradient(145deg,#eef1e8,#e5ebdc);box-shadow:0 1px 0 #ffffffad inset,0 22px 40px -30px #263c1740}
.form-card h3{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.035em;line-height:1.08;font-weight:560;margin:10px 0 8px}
.form-card>p{color:var(--muted);font-size:15px;margin-bottom:22px}
form{display:grid;gap:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em}
label span{font-weight:400;color:var(--muted)}
input,textarea{font:inherit;font-size:15px;padding:13px 14px;border-radius:12px;border:1px solid #c3cbb9;background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px #a4bc8e55}
textarea{resize:vertical;min-height:88px}
.field-error{font-size:12px;color:#8a2f2f;min-height:1em;font-weight:500}
form .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.notice{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
.notice a{text-decoration:underline;text-underline-offset:3px}
.person{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:start;padding-top:8px}
.person img{width:120px;height:120px;border-radius:50%;object-fit:cover;filter:grayscale(1);transition:filter .6s}
.person:hover img{filter:none}
.person h3{font-size:22px;letter-spacing:-.03em;font-weight:600}
.person .role{font-size:13px;color:var(--muted);margin:2px 0 12px}
.person p{font-size:15px;color:var(--muted);max-width:420px}
.person .acts{display:grid;gap:10px;margin-top:18px;justify-items:start}
.person .acts .small{font-size:13px;color:var(--muted)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.pair{grid-template-columns:1fr}.person{grid-template-columns:88px 1fr}.person img{width:88px;height:88px}}
footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,7vw,100px);padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer .brand{color:var(--ink);font-size:15px}
footer nav{display:flex;gap:20px}
footer button:hover,footer a:hover{color:var(--ink)}

/* Dialogs */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:#070906d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog[open]{animation:dlg .45s var(--ease-out)}
@keyframes dlg{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}
.dlg{position:fixed;inset:0;width:100vw;height:100svh;display:none;grid-template-rows:auto 1fr auto;color:#fff}
.dlg-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gutter)}
.dlg-top h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dlg-top .eyebrow{color:#aab5a0}
.close{width:44px;height:44px;border-radius:50%;background:#ffffff1f;display:grid;place-items:center;font-size:20px;transition:background .3s,transform .4s var(--ease-out)}
.close:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
.dlg-stage{display:grid;place-items:center;padding:0 var(--gutter);min-height:0;overflow:auto}
.dlg-stage img,.dlg-stage video{max-width:100%;max-height:calc(100svh - 170px);width:auto;height:auto;border-radius:12px;object-fit:contain;background:#000}
.dlg-stage.wide img{max-height:none;width:min(1600px,100%)}
.dlg-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gutter);font-size:13px;color:#c3cbb9}
.dlg-bottom .car-btns button{border-color:#ffffff33;color:#fff}
.dlg-bottom .car-btns button:hover{background:#fff;color:var(--ink)}
.reader{position:fixed;inset:0;width:100vw;height:100svh;display:none;grid-template-rows:auto 1fr;background:#2b2b2b;color:#fff}
.reader iframe{width:100%;height:100%;border:0;background:#2b2b2b}
.privacy{display:none;position:fixed;inset:auto 0 0 0;width:100vw;max-height:88svh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:24px 24px 0 0;padding:28px var(--gutter) 48px}
@media(min-width:900px){.privacy{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(720px,92vw);border-radius:24px;max-height:86svh}dialog[open].privacy{animation:none}}
.privacy h2{font-size:28px;letter-spacing:-.03em;font-weight:560;margin:14px 0 18px}
.privacy h3{font-size:14px;font-weight:600;margin:18px 0 6px}
.privacy p{font-size:14px;color:var(--muted);line-height:1.6}
.privacy .close{background:#1011100f;color:var(--ink)}
.privacy .close:hover{background:var(--ink);color:#fff}

.dlg[open],.reader[open]{display:grid}.privacy[open]{display:block}
.hero .btn{background:#fff;color:#070a06;border-color:#fff}
.hero .btn.ghost{background:transparent;color:#fff;border-color:#ffffff66}
.hero .btn.ghost:hover{background:#fff;color:#070a06;border-color:#fff}

/* ===== v2.1 additions ===== */
/* Hero brand */
.hero-inner{padding-top:110px}
.hero-brand{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;column-gap:.22em;font-size:clamp(44px,7.6vw,128px);letter-spacing:-.06em;line-height:.9;font-weight:720;margin-bottom:auto}
.hero-brand .t{font-weight:300;letter-spacing:-.05em;color:#d8ddd2}
.hero-meta{justify-self:end;align-self:start;display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#aab5a0;font-weight:600;line-height:1.4;padding-top:.3em}
.hero h1{font-size:clamp(36px,6vw,96px);margin-top:clamp(40px,8vh,96px)}
@media(max-width:900px){.hero-brand{grid-template-columns:1fr;row-gap:.05em}.hero-meta{justify-self:start;padding-top:14px;gap:16px}.hero-inner{padding-top:96px;gap:24px}.hero h1{margin-top:28px}}

/* Challenges */
.challenges{padding-bottom:clamp(48px,6vw,96px)}
.ch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ch-grid li{display:grid;gap:14px;align-content:start;padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--r-md);min-height:200px;transition:background .35s,color .35s,transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.ch-grid li b{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ch-grid li strong{font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em;line-height:1.25;font-weight:560}
.ch-grid li span{margin-top:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--sage-ink);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .45s var(--ease-out)}
.ch-grid li:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-4px);box-shadow:0 22px 44px -26px #10111099}
.ch-grid li:hover b{color:#aab5a0}.ch-grid li:hover span{opacity:1;transform:none;color:var(--accent)}
@media(hover:none){.ch-grid li span{opacity:1;transform:none}}
@media(max-width:900px){.ch-grid{grid-template-columns:1fr 1fr}.ch-grid li{min-height:150px}}
@media(max-width:520px){.ch-grid{grid-template-columns:1fr}.ch-grid li{min-height:0}}

/* Specialty map */
.who.single{grid-template-columns:1fr;margin-bottom:clamp(32px,4vw,56px)}
.spec-map{position:relative;display:grid;grid-template-columns:1fr minmax(300px,420px) 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.spec-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.spec-lines path{fill:none;stroke:#c6d0bc;stroke-width:1.5;transition:stroke .35s,stroke-width .35s}
.spec-lines path.on{stroke:var(--sage-ink);stroke-width:2.5}
.spec-lines circle{fill:var(--sage-ink)}
.spec-col{display:grid;gap:12px;position:relative;z-index:1}
.spec-col .spec{background:#fff}
.hub{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);color:#fff;box-shadow:0 30px 60px -30px #10111080}
.hub-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.hub-top img{height:16px;width:auto}
.hub>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hub figcaption{display:grid;gap:6px;padding:18px}
.hub figcaption strong{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.03em;line-height:1.1;font-weight:560}
.hub figcaption span{font-size:12px;color:#aab5a0;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
@media(max-width:900px){.spec-map{grid-template-columns:1fr 1fr;grid-template-areas:"hub hub" "l r"}.hub{grid-area:hub;max-width:520px;margin-inline:auto;width:100%}.spec-col.left{grid-area:l}.spec-col.right{grid-area:r}.spec-lines{display:none}}
@media(max-width:520px){.spec-map{grid-template-columns:1fr;grid-template-areas:"hub" "l" "r"}}

/* Tool groups */
.tool-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.group{display:grid;gap:12px;align-content:start;padding:clamp(20px,2vw,28px);border-radius:var(--r-lg);background:#f6f5f1;border:1px solid #c6d0bc;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.group:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px #26391c80}
.group h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.03em;line-height:1.1;font-weight:560}
.group p{font-size:14px;color:var(--muted);line-height:1.5;min-height:3em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 10px;border-radius:999px;background:#fff;border:1px solid #d6d6cf;font-size:13px;font-weight:600;transition:border-color .3s,transform .4s var(--ease-out),box-shadow .4s}
.chip:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 20px -14px #10111080}
.chip .logo{display:grid;place-items:center;width:22px;height:22px}
.chip .logo img{max-width:22px;max-height:22px;width:auto;height:auto;filter:grayscale(1);opacity:.85;transition:filter .3s,opacity .3s}
.chip:hover .logo img{filter:none;opacity:1}
.chip .wm{font-size:11px;font-weight:800;letter-spacing:-.04em}
@media(max-width:1100px){.tool-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tool-groups{grid-template-columns:1fr}.group p{min-height:0}}

/* Channels chips under headings */
.channels{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.channels span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink)}
.dark .channels span{border-color:#ffffff33;color:#eef0e8}
.channels img{width:18px;height:18px;object-fit:contain}
.mark.nowrap{white-space:nowrap}
@media(max-width:520px){.mark.nowrap{white-space:normal}}
.sec-head{max-width:1000px}

/* Mac scrolling screenshot */
.mac-screen.scrolls{aspect-ratio:16/10;overflow:hidden;background:#0b0b0b}
.mac-screen.scrolls img{width:100%;height:auto;transform:translateY(0);transition:transform 9s cubic-bezier(.3,.1,.2,1)}
.mac:hover .mac-screen.scrolls img{transform:translateY(calc(-100% + 100% * 10 / 16))}
.mac-screen.scrolls .mac-cta{background:#07090633}
@media(hover:none){.mac-screen.scrolls img{animation:siteScroll 22s ease-in-out infinite alternate}}
@keyframes siteScroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 100% * 10 / 16))}}
@media(prefers-reduced-motion:reduce){.mac-screen.scrolls img{animation:none;transition:none}.mac:hover .mac-screen.scrolls img{transform:none}}
.site-points li.ext{border-top:1px solid var(--line);padding-top:18px}
.booking .limo img{width:22px}

/* Contact: dark audit card */
.form-card.dark{background:var(--ink);color:var(--paper);box-shadow:0 40px 80px -40px #101110}
.form-card.dark .eyebrow{color:#aab5a0}
.form-card.dark>p{color:#c3cbb9}
.form-card.dark label{color:#eef0e8}.form-card.dark label span{color:#aab5a0}
.form-card.dark input,.form-card.dark textarea{background:#fff;border-color:#fff0}
.form-card.dark .notice{color:#aab5a0}.form-card.dark .notice a{color:#fff}
.form-card.dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.form-card.dark .field-error{color:#f0b7b7}
.contact-grid{grid-template-columns:.9fr 1.1fr;align-items:center}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* v2.1 fixes */
.chip .logo{width:auto;min-width:22px;max-width:70px;height:22px}
.chip .logo img{max-width:70px;max-height:22px}
.chip .logo .wm{display:inline-block;padding:3px 7px;border-radius:6px;background:var(--ink);color:#fff;font-size:10px;letter-spacing:-.02em}
.spec-col .spec{padding:20px 22px}
.hub>img{height:auto}

.booking .limo{padding:10px 16px}
.chip .logo img[src*="highlevel"]{max-width:84px}
.chip .logo img[src*="youtube-logo"]{max-width:70px}

/* ===== v2.2 ===== */
/* Hero: small highlighted Vanta, big light Territory, meta aligned left */
.hero-brand{display:grid;grid-template-columns:1fr;row-gap:.06em;align-items:start;margin-bottom:0}
.hero-brand .v{justify-self:start;font-size:clamp(22px,2.6vw,44px);font-weight:720;letter-spacing:-.05em;line-height:1;background:#fff;color:#070a06;padding:.14em .32em .18em;border-radius:3px}
.hero-brand .t{font-size:clamp(56px,9.4vw,160px);font-weight:300;letter-spacing:-.06em;line-height:.9;color:#eef0e8}
.hero-meta{justify-self:start;display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#aab5a0;font-weight:600;line-height:1.4;padding-top:0;margin-top:-6px}
.hero h1{font-size:clamp(32px,4.6vw,74px);line-height:1.04;margin-top:clamp(28px,6vh,72px);font-weight:600}
.hero h1 .mark{padding:0 .12em;line-height:1.08;display:inline-block}
.hero-inner{gap:26px}
@media(max-width:900px){.hero-brand .t{font-size:clamp(56px,16vw,120px)}.hero h1{font-size:clamp(30px,8vw,48px)}.hero-meta{gap:16px;flex-wrap:wrap}}

/* Challenges: compact strip */
.challenges .sec-head{margin-bottom:28px}
.ch-grid li{min-height:0;padding:20px 20px 18px;gap:10px}
.ch-grid li strong{font-size:clamp(15px,1.15vw,18px)}
.ch-grid li span{font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted);opacity:1;transform:none;margin-top:0}
.ch-grid li:hover span{color:#c3cbb9}
@media(max-width:900px){.ch-grid li{min-height:0}}

/* Who: dark green block like v1 */
.who-sec{background:var(--ink);color:var(--paper)}
.who-sec .eyebrow{color:#aab5a0}
.who-sec .who p.lead{color:#eef0e8}
.who-sec .who p{color:#aab5a0}
.who-sec .mark{background:#fff;color:var(--ink);box-shadow:none}
.spec-col .spec{background:#1c2518;border-color:#4b5d3e;color:#eef0e8}
.spec-col .spec strong i{border-color:#6f8260;color:#eef0e8}
.spec-col .spec p{color:#c3cbb9}
.spec:hover,.spec.open{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.spec:hover p,.spec.open p{color:#1c2518}
.spec:hover strong i,.spec.open strong i{background:var(--ink);color:#fff;border-color:var(--ink)}
.spec-lines path{stroke:#4b5d3e}
.spec-lines path.on{stroke:var(--accent);stroke-width:2.5}
.spec-lines circle{fill:var(--accent)}
.hub{background:#1c2518;border:1px solid #4b5d3e;box-shadow:0 30px 60px -30px #000}
.hub figcaption span{color:var(--accent)}

/* Form: green */
.form-card.green{background:linear-gradient(150deg,#1c2518,#26391c);color:var(--paper);box-shadow:0 1px 0 #ffffff14 inset,0 40px 80px -40px #0b1705}
.form-card.green .eyebrow{color:var(--accent)}
.form-card.green>p{color:#c3cbb9}
.form-card.green .mark{background:var(--accent);color:var(--ink);box-shadow:none}
.form-card.green label{color:#eef0e8}.form-card.green label span{color:#aab5a0}
.form-card.green input,.form-card.green textarea{background:#f6f5f1;border-color:transparent}
.form-card.green input:focus,.form-card.green textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #a4bc8e55}
.form-card.green .notice{color:#aab5a0}.form-card.green .notice a{color:#fff}
.form-card.green .btn{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.form-card.green .btn:hover{background:#fff;border-color:#fff}
.form-card.green .field-error{color:#f0b7b7}

/* Tools: 6 groups */
.tool-groups{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.tool-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tool-groups{grid-template-columns:1fr}}
.chip .logo img[src*="highlevel"]{max-width:96px;max-height:22px}
.chip .logo img[src*="google-analytics"]{max-width:64px}
.chip .logo img[src*="mailchimp"]{max-width:80px}
.chip .logo img[src*="perfit"]{max-width:64px}
.chip .logo img[src*="magnific"]{max-width:70px}
.chip .logo img[src*="make-logo"]{max-width:60px}

/* wordmark chips: the logo is the label */
.chip.wm{padding:0 14px}
.chip.wm .logo{width:auto;max-width:120px;height:22px}
.chip.wm .logo img{max-width:120px;max-height:22px;width:auto;height:auto;filter:none;opacity:1}
.chip .logo img{filter:none;opacity:1}
.chip .logo img[src*="highlevel"]{max-width:104px}
.chip .logo img[src*="hubspot"]{max-height:26px;max-width:96px}
.chip .logo img[src*="google-analytics"]{max-width:88px}
.chip .logo img[src*="meta.svg"]{max-width:72px}
.chip .logo img[src*="mailchimp"]{max-width:104px}
.chip .logo img[src*="hubspot"]{min-width:84px;max-width:96px;max-height:26px}
.chip .logo img[src*="make-logo"]{max-width:26px;max-height:22px}

/* ===== v2.3 · mobile-first pass (23-oct-2026) ===== */
/* Challenges: 2×2 everywhere below desktop, less height on phones */
@media(max-width:900px){.challenges .sec-head{margin-bottom:20px}.ch-grid{grid-template-columns:1fr 1fr;gap:10px}.ch-grid li{padding:16px 16px 14px;gap:8px}.ch-grid li strong{font-size:15px;line-height:1.2}.ch-grid li span{font-size:12px;line-height:1.35}}
@media(max-width:520px){.ch-grid{grid-template-columns:1fr 1fr}.ch-grid li{min-height:0;padding:14px 14px 12px}.ch-grid li strong{font-size:14px}.ch-grid li span{display:none}.ch-grid li b{font-size:11px}}

/* Who: lighter hub, compact specialties on phones */
.spec-map{grid-template-columns:1fr minmax(240px,320px) 1fr}
.hub>img{aspect-ratio:16/9}
.hub figcaption{padding:14px 16px 16px}
.hub figcaption strong{font-size:clamp(17px,1.4vw,21px)}
.hub-top{padding:14px 16px 0}
.spec-hint{display:none;margin-top:14px;font-size:12px;color:#aab5a0;text-align:center}
@media(max-width:900px){
  .who.single{margin-bottom:22px}
  .who-sec .who p.lead{font-size:17px}
  .spec-map{gap:10px}
  .hub{max-width:none;display:grid;gap:6px;padding:14px 16px 14px}
  .hub>img{display:none}
  .hub-top{padding:0}
  .hub figcaption{padding:0}
  .hub figcaption strong{font-size:15px}
  .hub figcaption span{font-size:10px}
  .spec-col{gap:10px}
  .spec-col .spec{padding:13px 14px}
  .spec strong{font-size:13.5px;gap:8px;align-items:start}
  .spec strong i{flex:0 0 auto;width:20px;height:20px;font-size:13px}
  .spec p{font-size:13px}
  .spec-hint{display:block}
}
@media(max-width:520px){.spec-map{grid-template-columns:1fr 1fr;grid-template-areas:"hub hub" "l r"}}

/* Relier case: light section, centered, clearly the client case */
.case-sec{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.case-sec .case-head{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;max-width:820px;margin-inline:auto;margin-bottom:clamp(28px,4vw,48px)}
.case-sec .case-head img{width:clamp(150px,16vw,220px);height:auto;margin-top:6px}
.case-sec .case-head h2{font-size:clamp(32px,4.4vw,64px);letter-spacing:-.045em;line-height:1.02;font-weight:560}
.case-sec .case-head p{color:var(--muted);font-size:clamp(15px,1.2vw,18px);max-width:620px;margin-top:0}
.case-sec .film{box-shadow:0 40px 80px -40px #10111099}
.case-sec .film-note{color:var(--muted);justify-content:center;text-align:center}
.case-sec :focus-visible{outline-color:var(--ink)}
@media(max-width:700px){.case-sec .case-head{gap:12px}.case-sec .case-head img{width:140px}.case-sec .film{aspect-ratio:16/9}.case-sec .film-note{flex-direction:column;gap:4px;align-items:center}}

/* Website & booking: shorter on phones */
.site-points li.ext{display:none}
@media(max-width:900px){
  .site-row{gap:22px}
  .site-points{gap:14px}
  .site-points li{padding-top:14px;font-size:14px}
  .site-points li strong{font-size:15px;margin-bottom:2px}
  .booking{margin-top:28px;padding:18px;gap:14px;border-radius:var(--r-md)}
  .booking h3{font-size:21px}
  .booking p{font-size:14px}
  .booking .limo{padding:8px 12px 8px 8px;font-size:12px;justify-self:start}
  .booking figure{max-height:38svh;overflow:hidden}
  .booking figure img{object-fit:cover;object-position:top;height:100%}
  .booking .zoom{height:34px;font-size:11px;right:10px;bottom:10px}
}

/* Tools: official logos sized to read */
.chip{max-width:100%}
.chip .logo,.chip.wm .logo{overflow:visible}
.chip .logo img[src*="hubspot-logo"]{min-width:0;max-width:110px;max-height:30px;height:30px}
.chip.wm:has(img[src*="hubspot-logo"]){height:44px}
.chip .logo img[src*="zapier-logo"]{max-width:64px;max-height:28px;height:28px}
.chip .logo img[src*="mailchimp"]{max-width:96px}
.chip .logo img[src*="make-icon"],.chip .logo img[src*="n8n-icon"],.chip .logo img[src*="brevo-icon"],.chip .logo img[src*="higgsfield-icon"]{width:22px;height:22px;max-width:22px;max-height:22px}
.chip .logo img[src*="magnific"]{max-width:76px;max-height:24px}
@media(max-width:600px){.group{padding:18px}.group h3{font-size:19px}.group p{font-size:13px}.chips{gap:6px}.chip{height:38px;padding:0 12px 0 9px;font-size:12.5px}.chip .logo img[src*="highlevel"]{max-width:92px}}

/* Filters: the campaign buttons share one line on phones */
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;white-space:nowrap}
@media(max-width:520px){.filters{gap:6px;margin-bottom:18px}.filters button{height:36px;padding:0 11px;font-size:12px;letter-spacing:-.01em}.filters .n{display:none}}

/* Newsletters: 3 cards on desktop, scroll-accordion on phones */
.news-hint{display:none;margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:900px){
  .news{grid-template-columns:1fr;gap:10px}
  .news-card{aspect-ratio:auto;height:118px;border-radius:var(--r-md);transition:height .65s var(--ease-out),transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
  .news-card.is-open{height:min(68svh,520px);border-radius:var(--r-lg)}
  .news-card .top{padding:14px 16px}
  .news-card .body{padding:0 16px 16px;gap:8px}
  .news-card .body small,.news-card .read{display:none}
  .news-card.is-open .body{padding:16px 18px 18px;gap:10px}
  .news-card.is-open .body small{display:block}
  .news-card.is-open .read{display:inline-flex;opacity:1;transform:none}
  .news-card h3{font-size:20px}
  .news-card.is-open h3{font-size:clamp(22px,6vw,28px)}
  .news-card:not(.is-open) .shade{background:linear-gradient(180deg,#0008,#000b)}
  .news-card:not(.is-open) .bg img{opacity:.75}
  .news-card:hover{transform:none}
  .news-hint{display:block}
}

/* Contact: heading, form, then Andrés */
.contact-grid{grid-template-columns:1fr;align-items:start}
.contact-grid .form-card{max-width:860px}
.person{grid-template-columns:120px 1fr auto;gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(40px,5vw,72px);padding:clamp(22px,3vw,36px) 0 0;border-top:1px solid var(--line)}
.person .eyebrow{display:block;margin-bottom:8px}
.person h3{font-size:clamp(20px,2vw,26px)}
.person p{max-width:520px}
.person .acts{margin-top:0;justify-items:end;text-align:right}
@media(max-width:900px){
  .person{grid-template-columns:72px 1fr;gap:16px;align-items:start;margin-top:32px;padding-top:24px}
  .person img{width:72px;height:72px}
  .person .acts{grid-column:1/-1;justify-items:start;text-align:left;margin-top:4px}
  .person p{font-size:14px}
  .person .role{margin:0 0 8px}
}

/* v2.3b: wordmarks with no intrinsic size get explicit boxes; campaign filters fit a 390px screen */
.chip .logo img[src*="claude.svg"]{width:74px;height:16px;max-width:74px;max-height:16px}
.chip .logo img[src*="magnific"]{width:72px;height:23px;max-width:72px;max-height:23px}
@media(max-width:520px){.filters{gap:5px}.filters button{padding:0 10px;font-size:11.5px;letter-spacing:-.015em}}

/* v2.3d: brand lockup everywhere = small highlighted Vanta + bigger light Territory, square corners */
.hero-brand .v{border-radius:0}
.brand{display:inline-flex;align-items:center;gap:8px;letter-spacing:-.04em}
.brand .v{font-size:11px;font-weight:700;letter-spacing:-.02em;line-height:1;padding:4px 6px 5px;background:#fff;color:#070a06;border-radius:0}
.brand b{font-weight:300;font-size:21px;letter-spacing:-.045em;opacity:1;line-height:1}
.site-header.solid .brand .v,footer .brand .v{background:var(--ink);color:#fff}
footer .brand b{font-size:18px}

/* ===== v2.3e · polish round ===== */
/* Highlighted headlines: lines never overlap */
.sec-head h2,.case-sec .case-head h2,.form-card h3{line-height:1.1}
.mark{padding:.02em .14em .04em}
.hero h1 .mark{padding:0 .12em}
@media(max-width:700px){.sec-head h2,.case-sec .case-head h2,#who-title{line-height:1.14!important}}

/* Who: equal cards, no inline expansion; the detail shows in the hub (desktop) or below (phones) */
.spec{display:flex;align-items:center;min-height:76px;padding:0 22px;cursor:pointer}
.spec strong{flex:1}
.spec p{display:none}
.spec:hover,.spec.open{transform:none}
.spec.open{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.hub figcaption{min-height:112px;transition:background .3s}
.hub figcaption strong{display:block;transition:opacity .25s}
.hub figcaption p{font-size:14px;line-height:1.45;color:#1c2518;margin:0}
.hub figcaption span[hidden],.hub figcaption p[hidden]{display:none}
.hub.active{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hub.active .eyebrow{color:#2b3a22}
.hub.active figcaption strong{color:var(--ink)}
.spec-detail{display:none}
@media(max-width:900px){
  .spec{min-height:60px;padding:0 14px}
  .spec strong{font-size:13.5px;align-items:center}
  .spec-detail{display:grid;gap:6px;margin-top:12px;padding:16px 18px;border-radius:var(--r-md);background:#1c2518;border:1px solid #4b5d3e;min-height:84px;transition:background .3s,border-color .3s}
  .spec-detail strong{font-size:15px;letter-spacing:-.01em;font-weight:600;color:#eef0e8}
  .spec-detail strong:empty{display:none}
  .spec-detail p{font-size:13.5px;line-height:1.45;color:#c3cbb9;margin:0}
  .spec-detail.active{background:var(--accent);border-color:var(--accent)}
  .spec-detail.active strong,.spec-detail.active p{color:var(--ink)}
  .hub.active{background:#1c2518;border-color:#4b5d3e;color:#fff}
}

/* Mac: the capture scrolls to its real end, slow and smooth, inside the screen */
.mac-screen.scrolls{container-type:size}
.mac-screen.scrolls img{transition:transform 14s cubic-bezier(.33,.05,.25,1)}
@supports(height:1cqh){
  .mac:hover .mac-screen.scrolls img{transform:translateY(calc(-100% + 100cqh))}
  @keyframes siteScroll{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(calc(-100% + 100cqh))}}
  @media(hover:none){.mac-screen.scrolls img{animation:siteScroll 26s cubic-bezier(.4,0,.3,1) infinite alternate}}
}

/* Tools: wordmarks share one cap height; CRM trio on one line */
.chip .logo img[src*="hubspot-logo"]{width:auto;height:22px;max-height:22px;max-width:80px;min-width:0}
.chip.wm:has(img[src*="hubspot-logo"]){height:40px}
.chip .logo img[src*="highlevel"]{max-width:92px;max-height:20px;height:20px;width:auto}
.chip .logo img[src*="google-analytics"]{max-width:64px;max-height:22px;height:22px;width:auto}
.chip .logo img[src*="zapier-logo"]{height:20px;max-height:20px;width:auto;max-width:48px}
.chip .logo img[src*="mailchimp"]{height:22px;width:auto;max-width:92px}
.chip .logo img[src*="meta.svg"]{height:14px;width:auto;max-width:64px}
.chip.wm{padding:0 12px}
.chips{row-gap:8px;column-gap:6px}
@media(max-width:600px){
  .chip .logo img[src*="hubspot-logo"]{height:19px;max-height:19px;max-width:70px}
  .chip .logo img[src*="highlevel"]{height:17px;max-height:17px;max-width:80px}
  .chip .logo img[src*="google-analytics"]{height:19px;max-height:19px;max-width:56px}
  .chip.wm{padding:0 10px}
}

/* Newsletters: smoother accordion */
@media(max-width:900px){
  .news-card{transition:height 1.1s cubic-bezier(.3,0,.15,1),border-radius .8s}
  .news-card .body small,.news-card .read{display:block;opacity:0;max-height:0;overflow:hidden;transform:translateY(6px);transition:opacity .5s,max-height .9s cubic-bezier(.3,0,.15,1),transform .6s var(--ease-out)}
  .news-card .read{display:inline-flex}
  .news-card.is-open .body small{display:block;opacity:1;max-height:40px;transform:none;transition-delay:.25s}
  .news-card.is-open .read{display:inline-flex;opacity:1;max-height:40px;transform:none;transition-delay:.35s}
  .news-card h3{transition:font-size .9s cubic-bezier(.3,0,.15,1)}
  .news-card .bg img{transition:transform 1.4s var(--ease-out),opacity 1s}
  .news-card .shade{transition:background 1s}
  .news-card .body{transition:padding .9s cubic-bezier(.3,0,.15,1),gap .9s}
}

/* Free digital audit: unmistakable */
.form-card .badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.form-card .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
.form-card.green{border:1px solid #a4bc8e55;box-shadow:0 1px 0 #ffffff14 inset,0 0 0 6px #a4bc8e1f,0 40px 80px -40px #0b1705}
.form-card h3{font-size:clamp(28px,3vw,42px);margin:14px 0 10px}
.form-card>p{font-size:15px;margin-bottom:20px}
.form-card.green .btn{height:56px;font-size:15px;justify-content:center;width:100%}
.contact-grid .form-card{max-width:720px}
form{gap:12px}
@media(max-width:900px){.spec-map{grid-template-columns:1fr 1fr}.hub figcaption{min-height:0}}

/* ===== v2.3g · mobile harmony pass ===== */
/* Challenges: four identical cards */
.ch-grid{grid-auto-rows:1fr}
.ch-grid li{height:100%}
@media(max-width:520px){.ch-grid{gap:8px}.ch-grid li{padding:14px 12px 12px;gap:8px}.ch-grid li strong{font-size:14px;line-height:1.25}}

/* Who: symmetric map, the hub explains the selected specialty on every screen */
.spec .n-short{display:none}
.spec strong{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spec strong i{flex:0 0 auto}
.hub figcaption{display:grid;gap:6px;padding:16px 18px 18px;min-height:0}
.hub figcaption span{letter-spacing:.04em}
.hub figcaption p{color:#1c2518}
.hub.active figcaption p{color:#1c2518}
.hub:not(.active) figcaption span{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:#aab5a0}
@media(max-width:900px){
  .spec-map{grid-template-columns:1fr 1fr;grid-template-areas:"hub hub" "l r";gap:10px;row-gap:10px}
  .spec-col{gap:10px}
  .spec{height:64px;min-height:0;padding:0 12px 0 14px}
  .spec .n-full{display:none}.spec .n-short{display:block;font-size:13px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
  .spec strong i{width:20px;height:20px;font-size:13px}
  .hub{display:grid;padding:0;text-align:left}
  .hub-top{padding:14px 16px 0}
  .hub>img{display:none}
  .hub figcaption{padding:8px 16px 16px;min-height:112px;align-content:start}
  .hub figcaption strong{font-size:17px;line-height:1.15}
  .hub figcaption p{font-size:13.5px;line-height:1.45}
  .hub.active{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  .hub.active .eyebrow{color:#2b3a22}
  .hub.active figcaption strong{color:var(--ink)}
}

/* Case → the Relier thread */
.case-flow{display:grid;justify-items:center;gap:10px;margin-top:clamp(36px,5vw,64px);color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-align:center}
.case-flow i{display:block;width:1px;height:clamp(40px,6vw,72px);background:linear-gradient(180deg,#d6d6cf00,var(--sage-ink))}
.case-flow b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--sage-ink);color:var(--sage-ink);font-weight:500;font-size:15px;animation:cue2 2.2s var(--ease) infinite}
@keyframes cue2{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.case-flow b{animation:none}}
.eyebrow .rc{display:inline-block;font-style:normal;padding:3px 8px;margin-right:10px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;letter-spacing:.1em;vertical-align:1px}
.dark .eyebrow .rc{background:#fff;color:var(--ink)}
.sage .eyebrow .rc{background:var(--sage-ink);color:#fff}

/* Website: Mac on desktop, phone on phones; the capture starts at the hero and scrolls once when in view */
.phone{display:none}
.mac-screen.scrolls img,.phone-screen.scrolls img{transform:translateY(0);transition:transform 14s cubic-bezier(.33,.05,.25,1)}
@supports(height:1cqh){
  @media(hover:none){
    .mac-screen.scrolls img,.phone-screen.scrolls img{animation:none}
    .scrolls.go img{animation:siteScroll 18s cubic-bezier(.4,0,.3,1) 1 forwards}
    @keyframes siteScroll{0%,8%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 100cqh))}}
  }
}
@media(max-width:700px){
  .mac{display:none}
  .phone{position:relative;display:block;width:min(62vw,300px);margin:0 auto;padding:10px;border-radius:40px;background:#111;box-shadow:0 30px 60px -30px #10111099,inset 0 0 0 1px #333}
  .phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:38%;height:22px;border-radius:999px;background:#000;z-index:2}
  .phone-screen{position:relative;overflow:hidden;border-radius:32px;background:#0b0b0b;aspect-ratio:9/19.5;container-type:size}
  .phone-screen img{width:100%;height:auto;display:block}
  .phone-cta{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);height:44px;padding:0 18px 0 20px;font-size:13px;z-index:3;white-space:nowrap}
  .site-row{gap:28px}
}

/* Tools: four workflow chips on one line, three email platforms */
.chip{padding:0 12px 0 9px;gap:8px}
.chip .logo img[src*="activecampaign"]{height:14px;max-height:14px;width:auto;max-width:132px}
.chip.wm:has(img[src*="activecampaign"]){padding:0 12px}
.chip .logo img[src*="notion"]{width:20px;height:20px;max-width:20px;max-height:20px}

/* Contact: WhatsApp first */
.btn.wa{gap:10px}
.btn.wa svg{width:18px;height:18px}
.person .acts{display:grid;gap:10px}
.form-card .notice a{white-space:nowrap}
@media(max-width:700px){.phone{padding-bottom:10px}.phone-cta{position:static;transform:none;display:flex;margin:14px auto 0;width:max-content}.phone{display:grid;justify-items:center}}
.chip{padding:0 11px 0 8px;gap:7px}
.chips{column-gap:6px}
@media(max-width:700px){.phone-cta{position:static;transform:none;display:inline-flex;align-items:center;justify-self:center;height:44px;width:auto;padding:0 18px 0 20px;margin-top:14px}}

/* ===== v2.3j ===== */
/* Header: one sober glass bar, dark over the hero, light after it */
.site-header{height:64px;background:#0b0f0ab3;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 #ffffff14;color:#fff}
.site-header.solid{background:#f6f5f1cc;box-shadow:0 1px 0 #10111014}
.nav{gap:clamp(10px,1.6vw,22px)}
.nav .wa-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;opacity:1;transition:background .25s,color .25s,transform .35s var(--ease-out)}
.nav .wa-ic:hover{background:currentColor;transform:translateY(-1px)}
.site-header:not(.solid) .nav .wa-ic:hover svg{color:#070a06}
.site-header.solid .nav .wa-ic:hover svg{color:#fff}
.nav a.wa-ic::after{display:none}
.hero-inner{padding-top:120px}
@media(max-width:900px){.hero-inner{padding-top:100px}.nav .pill{height:38px;padding:0 5px 0 14px;font-size:12.5px}.nav .wa-ic{width:38px;height:38px}}

/* Back to top: always at hand once you leave the hero */
.to-top{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(16px,3vh,28px);z-index:40;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#f6f5f1e6;color:var(--ink);border:1px solid #10111022;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px -14px #10111066;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .45s var(--ease-out),background .25s,color .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink);color:#fff}
body:has(dialog[open]) .to-top{opacity:0;pointer-events:none}

/* Relier case tag: its own line, identical in every section */
.eyebrow .rc{display:block;width:max-content;margin:0 0 10px}

/* Website on phones: the Mac stays, the phone emulator opens on tap */
@media(max-width:700px){.mac{display:block}.phone{display:none}}
.dlg-stage.emu{align-content:center}
.emu-frame{width:min(86vw,360px);padding:10px;border-radius:44px;background:#111;box-shadow:0 40px 80px -30px #000,inset 0 0 0 1px #333}
.emu-screen{height:min(76svh,740px);overflow-y:auto;overflow-x:hidden;border-radius:34px;background:#0b0b0b;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.emu-screen::-webkit-scrollbar{display:none}
.emu-screen img{width:100%;height:auto;display:block;max-height:none;border-radius:0;background:none}
.dlg-stage.emu+.dlg-bottom p::after{content:" · scroll inside the phone"}

/* Newsletters on phones: one open, two folded; tap a folded one to open it */
@media(max-width:900px){
  .news-card{transition:height .7s cubic-bezier(.2,.7,.2,1),border-radius .5s}
  .news-card:not(.is-open) .body{padding:0 16px 14px}
  .news-card:not(.is-open) h3{font-size:19px}
  .news-card:not(.is-open)::after{content:"Tap to open";position:absolute;right:14px;top:50px;z-index:3;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#c3cbb9}
  .news-hint{display:none}
}

/* Relier case: an entrance, not a fade */
.case-sec{position:relative;overflow:hidden}
.case-head{position:relative;padding-top:clamp(28px,4vw,48px)}
.case-line{position:absolute;top:0;left:50%;width:1px;height:clamp(22px,3vw,40px);background:var(--sage-ink);transform-origin:top;transform:scaleY(0);transition:transform .9s var(--ease-out)}
.case-head.in .case-line{transform:scaleY(1)}
.case-head .eyebrow,.case-head img,.case-head p{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.case-head img{transform:translateY(14px) scale(.86);transition-delay:.15s}
.case-head .eyebrow{transition-delay:.3s}
.case-head p{transition-delay:.85s}
.case-head.in .eyebrow,.case-head.in img,.case-head.in p{opacity:1;transform:none}
.case-head .ln{display:block;overflow:hidden;padding:.06em .1em;margin:-.06em -.1em}
.case-head .ln>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out)}
.case-head .ln:nth-child(2)>span{transition-delay:.12s}
.case-head.in .ln>span{transform:none}
.case-head.in .ln:first-child>span{transition-delay:.45s}
.case-head.in .ln:nth-child(2)>span{transition-delay:.6s}
.case-head.reveal{opacity:1;transform:none}
.film.reveal{transform:translateY(40px) scale(.94);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out),box-shadow 1.2s}
.film.reveal.in{transform:none}
@supports(animation-timeline:view()){
  .film.reveal.in{animation:filmGrow linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes filmGrow{from{transform:translateY(30px) scale(.94)}to{transform:none}}
}
.case-flow i{transform-origin:top;transform:scaleY(0);transition:transform 1s var(--ease-out) .2s}
.case-flow.in i{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.case-head .eyebrow,.case-head img,.case-head p,.case-head .ln>span,.case-line,.case-flow i{opacity:1;transform:none;transition:none;animation:none}}

/* ===== v2.3k ===== */
/* Form title: the highlight no longer crowds the first line */
.form-card h3{font-size:clamp(24px,2.3vw,32px);line-height:1.18;margin:14px 0 10px}
.form-card h3 .mark{padding:.02em .12em .05em}

/* Footer cities, discreet */
footer .cities{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Bridge: scroll through Relier's world before the work begins */
.case-sec{overflow:visible}
.bridge{position:relative;height:220svh;margin-top:clamp(40px,6vw,80px);background:var(--ink);color:#fff}
.bridge-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.bridge-strip{position:absolute;top:50%;left:0;display:flex;gap:clamp(10px,1.4vw,18px);transform:translate(calc(var(--p,0) * -42%),-50%) rotate(-4deg);will-change:transform;opacity:.55;filter:saturate(.85)}
.bridge-strip img{width:clamp(180px,22vw,340px);aspect-ratio:4/3;object-fit:cover;border-radius:14px;flex:0 0 auto}
.bridge-text{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:14px;padding:0 var(--gutter);transform:scale(calc(.92 + var(--p,0) * .08));opacity:calc(.35 + var(--p,0) * .65)}
.bridge-text img{width:clamp(120px,14vw,190px);height:auto;filter:drop-shadow(0 10px 30px #000)}
.bridge-text h3{font-size:clamp(34px,5.6vw,84px);letter-spacing:-.05em;line-height:.98;font-weight:560;display:grid;text-shadow:0 10px 40px #000a}
.bridge-text h3 span{display:block}
.bridge-text h3 span:last-child{color:var(--accent)}
.bridge-text p{max-width:520px;font-size:clamp(14px,1.1vw,17px);color:#c3cbb9;text-shadow:0 2px 20px #000}
.bridge-text b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff55;font-weight:500;animation:cue2 2.2s var(--ease) infinite;margin-top:6px}
.bridge-sticky::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,#10111000 30%,#101110cc 100%);pointer-events:none}
.case-flow{display:none}
@media(max-width:700px){.bridge{height:180svh}.bridge-strip img{width:52vw}.bridge-strip{opacity:.5}}
@media(prefers-reduced-motion:reduce){.bridge{height:auto;padding:80px 0}.bridge-sticky{position:static;height:auto}.bridge-strip{display:none}.bridge-text{transform:none;opacity:1}}

/* ===== v2.3l ===== */
/* Hero: live-looking signals on the right (desktop) */
.hero-inner{position:relative}
.hero-signals{position:absolute;z-index:2;right:var(--gutter);top:50%;transform:translateY(-54%);width:min(34vw,460px);height:360px;display:none;pointer-events:none}
.sig{position:absolute;display:grid;gap:6px;padding:14px 16px 12px;border-radius:16px;background:#ffffff0f;border:1px solid #ffffff1f;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#eef0e8;box-shadow:0 30px 60px -30px #000;animation:sigFloat 7s ease-in-out infinite;opacity:0;transform:translateY(16px)}
.hero-signals.in .sig{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.sig .sig-k{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#aab5a0}
.sig .dot{width:7px;height:7px;border-radius:50%;background:#4285f4;box-shadow:0 0 0 4px #4285f433}
.sig .dot.ai{background:#d9b86a;box-shadow:0 0 0 4px #d9b86a33}.sig .dot.ok{background:var(--accent);box-shadow:0 0 0 4px #a4bc8e33}
.sig strong{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.sig small{justify-self:start;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#070a06;background:#fff;padding:3px 7px;border-radius:999px}
.sig.s1{left:0;top:0;width:66%;animation-delay:0s}
.sig.s2{right:0;top:92px;width:58%;animation-delay:-2.3s}
.sig.s3{left:6%;top:186px;width:64%;animation-delay:-4.1s}
.sig.s4{right:4%;top:276px;width:56%;animation-delay:-5.6s}
.hero-signals.in .sig.s2{transition-delay:.15s}.hero-signals.in .sig.s3{transition-delay:.3s}.hero-signals.in .sig.s4{transition-delay:.45s}
.sig-note{position:absolute;right:0;bottom:-26px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f8260}
@keyframes sigFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(min-width:1100px){.hero-signals{display:block}.hero-row{grid-template-columns:1fr;max-width:620px}.hero-ctas{justify-self:start}}
@media(prefers-reduced-motion:reduce){.sig{animation:none}}

/* Bridge: the gallery bursts out of the center as you scroll, then the panel zooms you into the work */
.bridge{height:260svh}
.bridge-sticky{perspective:1200px}
.bridge-burst{position:absolute;inset:0;pointer-events:none}
.bridge-burst img{position:absolute;left:50%;top:50%;width:clamp(150px,19vw,300px);aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -20px #000c;transform:translate(calc(-50% + var(--x) * var(--e,0)),calc(-50% + var(--y) * var(--e,0))) rotate(calc(var(--r) * var(--e,0))) scale(calc(.25 + .75 * var(--e,0)));opacity:calc(var(--e,0) * .9);will-change:transform,opacity;transition:none}
.bridge-glow{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.4 + var(--e,0) * 1.6));background:radial-gradient(circle,#a4bc8e55 0%,#a4bc8e11 40%,#0000 70%);opacity:calc(1 - var(--e,0) * .6);pointer-events:none}
.bridge-text{transform:scale(calc(.78 + var(--e,0) * .22));opacity:calc(.2 + var(--e,0) * .8)}
.bridge-text h3 span:first-child{transform:translateY(calc((1 - var(--e,0)) * 30px))}
.bridge-text h3 span:last-child{transform:translateY(calc((1 - var(--e,0)) * 50px))}
.bridge-text p,.bridge-text b{opacity:calc((var(--e,0) - .6) / .4)}
.bridge-sticky>*{transition:none}
/* zoom-through at the end */
.bridge-sticky{transform:scale(calc(1 + var(--z,0) * .35)) translateY(calc(var(--z,0) * -8vh));opacity:calc(1 - var(--z,0));transform-origin:50% 60%}
.bridge-sticky::after{opacity:calc(1 - var(--z,0))}
.bridge-strip{display:none}
@media(max-width:700px){.bridge{height:220svh}.bridge-burst img{width:44vw}}
@media(prefers-reduced-motion:reduce){.bridge-burst img{transform:none;position:static;opacity:1}.bridge-burst{display:none}.bridge-text{transform:none;opacity:1}.bridge-text h3 span{transform:none}.bridge-text p,.bridge-text b{opacity:1}.bridge-sticky{transform:none;opacity:1}}

/* Contact: button copy got longer */
.form-card.green .btn{padding-inline:20px}
.hero-signals{width:min(36vw,520px);height:390px;transform:translateY(-50%)}
.sig{padding:16px 18px 14px;gap:7px}
.sig strong{font-size:15px}
.sig.s2{top:100px}.sig.s3{top:200px}.sig.s4{top:300px}

/* ===== v2.3n ===== */
@media(max-width:700px){.hide-m{display:none!important}}
/* Cities under the principles, both screens */
.hero-cities{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#aab5a0;margin-top:-14px}
/* Desktop: six signals */
.hero-signals{height:470px;transform:translateY(-52%)}
.sig.s1{left:0;top:0;width:62%}
.sig.s2{right:0;top:84px;width:56%}
.sig.s3{left:8%;top:168px;width:58%}
.sig.s4{right:4%;top:250px;width:60%}
.sig.s5{left:2%;top:336px;width:60%}
.sig.s6{right:8%;top:418px;width:56%}
.hero-signals.in .sig.s5{transition-delay:.6s}.hero-signals.in .sig.s6{transition-delay:.75s}
.sig.s5{animation-delay:-1.4s}.sig.s6{animation-delay:-3.2s}
/* Phones: the same signals as a slow ticker under the hero */
.hero-signals-m{display:none}
@media(max-width:1099px){
  .hero-signals-m{display:block;overflow:hidden;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000)}
  .sig-track{display:flex;gap:10px;width:max-content;animation:sigTicker 46s linear infinite}
  .hero-signals-m:hover .sig-track{animation-play-state:paused}
  .sig-track .sig{position:static;width:auto;min-width:220px;opacity:1;transform:none;animation:none;padding:12px 14px 11px;gap:5px;grid-template-columns:1fr auto;align-items:center}
  .sig-track .sig .sig-k{grid-column:1/-1}
  .sig-track .sig strong{font-size:13px}
  .sig-track .sig small{font-size:9px;padding:2px 6px}
  @keyframes sigTicker{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.sig-track{animation:none;flex-wrap:wrap;width:auto}}
}
@media(max-width:900px){.hero-inner{gap:20px}.hero-cities{margin-top:-8px}}
@media(max-width:700px){.hero-cities{font-size:10px;letter-spacing:.08em}}
form .btn[disabled]{opacity:1;cursor:pointer}
footer nav{gap:16px}

/* ===== v2.3p ===== */
html,body{overflow-x:clip}
/* Bridge: the zoom lives on an inner layer; the sticky box clips it, nothing leaks sideways */
.bridge{overflow-x:clip}
.bridge-sticky{transform:none;opacity:1;transform-origin:50% 50%}
.bridge-zoom{position:absolute;inset:0;display:grid;place-items:center;transform:scale(calc(1 + var(--z,0) * .35)) translateY(calc(var(--z,0) * -8vh));opacity:calc(1 - var(--z,0));transform-origin:50% 60%;will-change:transform,opacity}
.bridge-sticky::after{z-index:3}
@media(prefers-reduced-motion:reduce){.bridge-zoom{position:static;transform:none;opacity:1}}
/* Phones: lighter hero. Ticker gets the room, cities sit on the bottom edge, scroll cue back */
@media(max-width:900px){
  .hero-inner{min-height:100svh;grid-template-rows:auto auto auto auto auto 1fr auto;gap:18px;padding-bottom:22px}
  .hero-signals-m{align-self:center}
  .hero-cities{align-self:end;margin-top:0;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .hero-cities::after{content:"↓";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff44;color:#fff;font-size:15px;letter-spacing:0;animation:cue2 2.2s var(--ease) infinite;flex:0 0 auto}
  .hero-cue{display:none}
}
@media(max-width:700px){.hero-cities{font-size:10px;letter-spacing:.06em}}
@media(max-width:900px){
  .hero-inner{grid-template-rows:none;align-content:start;gap:18px}
  .hero-brand{order:1}.hero-meta{order:2}.hero h1{order:3}.hero-row{order:4}
  .hero-signals-m{order:5;margin-top:auto;align-self:auto}
  .hero-cities{order:6;align-self:auto}
}
@media(max-width:900px){.hero-inner{display:flex;flex-direction:column;align-items:stretch}.hero-row{display:grid}.hero-signals-m{margin-top:auto}.hero-cities{margin-top:0}}

/* ===== v2.3s ===== */
.chip .logo img[src*="looker-logo"]{height:16px;max-height:16px;width:auto;max-width:72px}
.chip .logo img[src*="google-g-logo"],.chip .logo img[src*="search-console"],.chip .logo img[src*="tag-manager"]{width:20px;height:20px;max-width:20px;max-height:20px}
@media(max-width:600px){.chip .logo img[src*="looker-logo"]{height:14px;max-height:14px}}
/* Touch: the hero ticker and the marquee scroll by hand; JS keeps them drifting until you touch them */
@media(hover:none){
  .sig-track{animation:none}
  .hero-signals-m{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .hero-signals-m::-webkit-scrollbar{display:none}
  .marquee{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none}
}

/* ===== v2.3t ===== */
/* Phones: nothing in the hero column may push the page wider than the screen */
@media(max-width:900px){
  .hero-inner>*{min-width:0;max-width:100%}
  .hero-signals-m{width:auto;max-width:none}
  .hero h1{margin-top:auto}
  .hero-signals-m{margin-top:auto}
  .hero-row p{max-width:100%}
}
/* Lighthouse scorecard under the site points */
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(28px,4vw,48px)}
.score{display:grid;gap:4px;padding:18px 18px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:#fff8;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.score:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px #10111066}
.score b{font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;line-height:1;font-weight:600;color:var(--sage-ink)}
.score span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.score small{font-size:10px;letter-spacing:.06em;text-transform:lowercase;font-weight:500}
.scores p{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:700px){.scores{grid-template-columns:1fr 1fr;gap:8px}.score{padding:14px}.score b{font-size:28px}}
.hero{grid-template-columns:minmax(0,1fr)}
.hero-inner{min-width:0;max-width:100%}
.hero-signals-m{min-width:0}
.sig-track{width:max-content}

/* ===== v2.3u ===== */
/* Phones: hero breathes in three blocks, no ticker */
@media(max-width:900px){
  .hero-inner{padding-top:104px;padding-bottom:26px;gap:16px;justify-content:space-between}
  .hero h1{margin-top:24px}
  .hero-row{margin-top:-4px}
  .hero-cities{margin-top:24px}
  .hero-signals-m{display:none}
}
/* Phones: compact scorecard in one row */
@media(max-width:700px){
  .scores{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:24px}
  .score{padding:10px 6px 9px;gap:3px;text-align:center;justify-items:center;border-radius:12px}
  .score b{font-size:22px}
  .score span{font-size:8.5px;letter-spacing:.04em;justify-content:center;gap:3px;line-height:1.2}
  .score small{display:block;font-size:8px;width:100%}
  .scores p{font-size:11px;text-align:center}
}
@media(max-width:900px){.hero-inner{justify-content:flex-start;gap:14px}.hero h1{margin-top:auto}.hero-row{margin-top:2px;gap:22px}.hero-cities{margin-top:auto}.hero-meta{margin-top:-2px}}
@media(max-width:700px){.hero-cities{font-size:9.5px;letter-spacing:.02em;white-space:nowrap}.hero-cities::after{width:30px;height:30px;font-size:14px}}
@media(max-width:360px){.hero-cities{font-size:8.5px;letter-spacing:0}}
/* v2.3x: challenge cards carry one more line of meaning on desktop */
.ch-grid li span{font-size:13px;line-height:1.45}
.ch-grid li{min-height:0}
/* iOS: no long-press "Save Image" callout on media (friction, not DRM) */
img,video,.card,.film,.mac-screen,.phone-screen,.booking figure,.news-card .bg,.bridge-burst,.dlg-stage,.emu-screen,.ba-shots{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.legal img{-webkit-touch-callout:default}
/* v2.3z: form confirmation */
.form-done{display:grid;gap:8px;padding:20px 22px;border-radius:var(--r-md);background:#f6f5f1;color:var(--ink)}
.form-done strong{font-size:18px;letter-spacing:-.02em;font-weight:600}
.form-done p{font-size:14px;color:var(--muted);margin:0}
.form-done a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.form-card.green .notice[hidden],.form-card.green form[hidden]{display:none}

/* ===== v2.4 · daily 23-oct ===== */
/* Marquee: moves on its own on every device (CSS transform, never stuck); the finger can still drag it and pauses it while touching */
.marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000)}
.marquee::-webkit-scrollbar{display:none}
.marquee-track{animation:marquee5 60s linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes marquee5{to{transform:translateX(-20%)}}
.marquee.hold .marquee-track,.marquee:hover .marquee-track{animation-play-state:paused}
@media(hover:none){.marquee-track{animation:marquee5 60s linear infinite}.marquee:hover .marquee-track{animation-play-state:running}.marquee.hold .marquee-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow:hidden;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:8px}
  .marquee-track span:nth-child(n+10){display:none}
}

/* Site preview: scrolls by itself once it is on screen (desktop and phones), no hover needed */
.mac-screen.scrolls img{transition:none}
.mac:hover .mac-screen.scrolls img{transform:translateY(0)}
.mac-screen.scrolls.go img{animation:siteScroll 26s ease-in-out infinite alternate}
@media(hover:none){.mac-screen.scrolls img{animation:none}.mac-screen.scrolls.go img{animation:siteScroll 26s ease-in-out infinite alternate}}
@media(prefers-reduced-motion:reduce){.mac-screen.scrolls.go img,.phone-screen.scrolls.go img{animation:none}}

/* Phones: the live site inside a phone, with the real mobile capture */
.phone{display:none}
@media(max-width:900px){
  .mac{display:none}
  .phone{display:grid;justify-items:center;gap:12px}
  .phone-shell{position:relative;width:min(72vw,300px);padding:9px;border-radius:42px;background:#0e0e0e;box-shadow:0 30px 60px -30px #10111099,inset 0 0 0 1px #3a3a3a}
  .phone-island{position:absolute;top:18px;left:50%;width:86px;height:24px;transform:translateX(-50%);border-radius:14px;background:#000;z-index:2}
  .phone-screen{position:relative;overflow:hidden;aspect-ratio:9/19.5;border-radius:34px;background:#0b0b0b}
  .phone-screen img{width:100%;height:auto;display:block}
  .phone-screen.scrolls.go img{animation:phoneScroll 34s ease-in-out infinite alternate}
  .phone-screen .mac-cta{opacity:1;background:linear-gradient(0deg,#070906cc,#0000 55%);align-items:end;padding-bottom:22px}
  .phone-screen .mac-cta .btn{transform:none;height:40px;font-size:13px}
  .phone-cap{font-size:12px;color:var(--muted);text-align:center}
}
@keyframes phoneScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100% * 2.1667 / 11.035))}}

/* Before & after: one frame, two tabs (Website, Booking), a Before/After switch under the thumb */
.ba{margin-top:clamp(40px,5vw,72px)}
.ba-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.ba-head h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.035em;line-height:1.08;font-weight:560;margin-top:10px}
.ba-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:#fff8}
.ba-tabs button{height:40px;padding:0 16px;border-radius:999px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .3s,color .3s}
.ba-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.ba-stage{position:relative;display:grid;gap:14px}
.ba-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,260px);height:44px;padding:4px;border-radius:999px;background:var(--ink);justify-self:center;isolation:isolate}
.ba-toggle button{position:relative;z-index:2;border:0;background:none;font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;color:#c3cbb9;cursor:pointer;border-radius:999px;transition:color .3s}
.ba-toggle button[aria-pressed="true"]{color:var(--ink)}
.ba-toggle i{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--accent);transition:transform .4s var(--ease-out)}
.ba-toggle.after i{transform:translateX(100%)}
.ba-frame{margin:0;border-radius:var(--r-md);overflow:hidden;background:#1e1e1e;box-shadow:0 30px 60px -30px #10111066}
.ba-shots{position:relative;aspect-ratio:1568/764;background:#0b0b0b}
.ba-shot{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none}
.ba-shot.is-on{opacity:1;pointer-events:auto}
.ba-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ba-cap p{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--muted);max-width:760px;margin:0}
.ba-cap p[hidden]{display:none}
.ba-cap b{flex:0 0 auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);padding:3px 8px;border-radius:6px;background:#e5ebdc}
.ba-note{font-size:11.5px;color:var(--muted);margin:0}
@media(max-width:700px){
  .ba{margin-top:32px}
  .ba-head{gap:12px;margin-bottom:12px}
  .ba-head h3{font-size:22px}
  .ba-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .ba-tabs button{height:40px;padding:0 10px;font-size:12.5px}
  .ba-frame{width:min(76vw,320px);justify-self:center;border-radius:28px;background:#0e0e0e;padding:8px;box-shadow:0 30px 60px -30px #10111099,inset 0 0 0 1px #3a3a3a}
  .ba-frame .mac-bar{display:none}
  .ba-shots{aspect-ratio:750/1624;border-radius:22px;overflow:hidden}
  .ba-cap p{font-size:13px}
  .ba-note{display:none}
}

/* Booking block: text + two options, no second capture (the comparison above shows the interface) */
.booking.compact{grid-template-columns:1fr;gap:18px}
.booking-opts{display:flex;flex-wrap:wrap;gap:10px}
.booking .limo{display:inline-grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;padding:10px 16px;color:#eef0e8}
.booking .limo b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.booking .limo small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#aab5a0;margin-top:2px}
.booking .limo.custom svg{flex:0 0 auto;color:var(--accent)}
@media(max-width:900px){.booking.compact{padding:18px}.booking-opts{gap:8px}.booking .limo{padding:8px 12px}}

/* New tool logos */
.chip .logo img[src*="linkedin-icon"],.chip .logo img[src*="semrush-icon"],.chip .logo img[src*="pagespeed-icon"]{width:20px;height:20px;max-width:20px;max-height:20px}
.chip .logo img[src*="clarity-icon"]{width:24px;height:24px;max-width:24px;max-height:24px}
.chip .logo img[src*="lighthouse-logo"]{width:20px;height:22px;max-width:20px;max-height:22px}
.chip .logo svg{width:20px;height:20px;color:var(--ink)}

/* Free audit on desktop: the form and your point of contact share the row, nothing empty on the right */
@media(min-width:901px){
  .contact-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:stretch}
  .contact-grid .form-card{max-width:none}
  .contact-grid .person{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:18px;align-items:start;align-content:start;margin-top:0;padding:clamp(22px,3vw,36px);border-top:0;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff8}
  .contact-grid .person img{width:96px;height:96px}
  .contact-grid .person .acts{justify-items:start;text-align:left;margin-top:auto;gap:12px}
  .contact-grid .person p{max-width:none}
}

/* Fixes found in review: confirmation box stays hidden until the form is sent; booking block in two columns; the seventh tool group closes the grid full-width */
.form-done[hidden]{display:none}
@media(min-width:901px){
  .booking.compact{grid-template-columns:minmax(0,1.25fr) auto;align-items:center}
  .booking-opts{flex-direction:column;align-items:stretch}
  .tool-groups .group:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(24px,3vw,48px);align-items:center}
  .tool-groups .group:last-child .eyebrow,.tool-groups .group:last-child h3,.tool-groups .group:last-child p{grid-column:1}
  .tool-groups .group:last-child .chips{grid-column:2;grid-row:1/4;align-self:center;justify-content:flex-end}
}
@media(min-width:601px){.tool-groups .group:last-child{grid-column:1/-1}}
@media(min-width:701px){.ba-shot img{transform:scale(1.012);transform-origin:left top}}

/* ===== v2.4b · mobile pass on Websites & booking ===== */
/* The laptop preview is back on phones (it is the overview people liked); the phone frames now live in the before/after, with the real mobile captures */
@media(max-width:900px){.mac{display:block}.phone{display:none}}

/* Before/after shots are buttons: tap opens the capture big (phone emulator on phones, wide on desktop) */
.ba-shot{border:0;padding:0;background:none;font:inherit;color:inherit;cursor:zoom-in;text-align:left}
.ba-shot picture{display:block;width:100%;height:100%}
.ba-row,.ba-tag{display:none}
.ba-shot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Phones: no tabs, no switch. Both comparisons side by side, labelled, so the difference is visible at a glance */
@media(max-width:700px){
  .ba-tabs,.ba-toggle,.ba-frame .mac-bar,.ba-cap,.ba-note{display:none}
  .ba-head{display:block}
  .ba-frame{width:auto;padding:0;background:none;box-shadow:none;border-radius:0;justify-self:stretch}
  .ba-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
  .ba-row{display:grid;gap:3px;grid-column:1/-1;margin-top:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink)}
  .ba-row:first-child{margin-top:0}
  .ba-row small{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--muted);line-height:1.4}
  .ba-shot{position:static;opacity:1;pointer-events:auto;display:grid;gap:8px;align-content:start}
  .ba-shot.is-on{opacity:1}
  .ba-tag{display:inline-flex;justify-self:start;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);padding:4px 8px;border-radius:6px;background:#e5ebdc}
  .ba-shot[data-state="after"] .ba-tag{background:var(--ink);color:#fff}
  .ba-shot picture{padding:5px;border-radius:22px;background:#0e0e0e;box-shadow:0 20px 40px -24px #10111099,inset 0 0 0 1px #3a3a3a}
  .ba-shot img{aspect-ratio:750/1624;width:100%;height:auto;object-fit:cover;object-position:top;border-radius:18px;transform:none;display:block}
}

/* Reservations: two option rows instead of pills */
.booking-opts{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid #ffffff22}
.booking-opts li{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff22}
.bo-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff14;color:var(--accent)}
.bo-ic img{width:22px;height:22px;object-fit:contain}
.bo-t b{display:block;font-size:15px;font-weight:600;color:#eef0e8;line-height:1.2}
.bo-t small{display:block;font-size:12.5px;color:#aab5a0;margin-top:3px;line-height:1.35}
.booking-opts em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--accent);padding:5px 9px;border-radius:999px;white-space:nowrap}
.booking-opts li:last-child em{background:#ffffff22;color:#eef0e8}
@media(min-width:901px){.booking.compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px)}.booking-opts{flex-direction:initial}}
@media(max-width:480px){.booking-opts li{grid-template-columns:40px 1fr}.booking-opts em{grid-column:2;justify-self:start}}

/* v2.4d: the Website pair compares the full home page. On desktop each capture scrolls inside the browser frame; on phones the thumbnail opens the full page in the phone emulator. */
@media(min-width:701px){
.ba-shot.ba-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;cursor:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.ba-shot.ba-scroll::-webkit-scrollbar{width:8px}
.ba-shot.ba-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:8px}
.ba-shot.ba-scroll img{height:auto;object-fit:fill;transform:none}
.ba-shot.ba-scroll:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ba-hint{position:absolute;right:18px;bottom:18px;z-index:3;padding:9px 14px;border-radius:999px;background:rgba(16,17,16,.85);color:#fff;font-size:12.5px;letter-spacing:.01em;pointer-events:none;transition:opacity .35s var(--ease-out)}
.ba-hint[hidden]{display:none}
}
@media(max-width:700px){.ba-hint{display:none}.ba-shot.ba-scroll{overflow:visible}}