/* InboundOnSteroids, studio look. Source of truth: service film v7b/v8 DESIGN.md + carousel studio kit.
   One dark lit room, Bricolage 800 display, Geist body, Geist Mono data lines, brick red once per view. */
@font-face { font-family: "IMDisplay"; src: url("assets/fonts/Brico.woff2") format("woff2"); font-weight: 800; font-display: block; }
@font-face { font-family: "IMSans"; src: url("assets/fonts/GeistV.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "IMMono"; src: url("assets/fonts/GeistMonoV.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ground: #0F0E0D; --lifted: #1A1816; --ink: #16181A;
  --tx: #F3EFE6; --tx2: #A39E93; --tx3: #6B675F;
  --red: #C8361B; --redt: #E5502F; --sheet: #FBFAF7; --line: rgba(22,24,26,.10); --hair: rgba(243,239,230,.12);
  --shadow: 0 2px 6px rgba(0,0,0,.35), 0 60px 120px -30px rgba(0,0,0,.78);
  --shadow-soft: 0 1px 3px rgba(0,0,0,.25), 0 30px 70px -24px rgba(0,0,0,.6);
  --pad: clamp(20px, 4.2vw, 64px);
  --max: 1400px;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --back: cubic-bezier(.34, 1.45, .64, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: "IMSans", system-ui, sans-serif; font-weight: 450; color: var(--tx); background: var(--ground);
  font-size: 20px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--red); color: var(--tx); }

/* ---------- The lit room: fixed, behind everything ---------- */
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #141210, #0C0B0A); }
.room .pool { position: absolute; width: 90vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.room .p1 { left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(214,132,74,.24), rgba(214,132,74,0)); animation: drift1 60s linear infinite alternate; }
.room .p2 { right: -35vmax; bottom: -35vmax; background: radial-gradient(closest-side, rgba(200,54,27,.11), rgba(200,54,27,0)); animation: drift2 75s linear infinite alternate; }
.room .vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; background: url("assets/img/grain.png"); }
@keyframes drift1 { to { transform: translate3d(22vw, 26vh, 0); } }
@keyframes drift2 { to { transform: translate3d(-18vw, -22vh, 0); } }
@keyframes grain { 25% { transform: translate3d(-3%, 2%, 0); } 50% { transform: translate3d(2%, -3%, 0); } 75% { transform: translate3d(-2%, -1%, 0); } }

.wrap { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
main { position: relative; z-index: 2; }
section { position: relative; }

/* ---------- Type ---------- */
.disp { font-family: "IMDisplay", "IMSans", sans-serif; font-weight: 800; color: var(--tx); letter-spacing: -.035em; line-height: .9;
  font-size: clamp(51.3px, 7.85vw, 124.03px); text-wrap: balance; }
.disp .ln { display: block; white-space: nowrap; }
.disp .w { display: inline-block; }
.swipe { position: relative; display: inline-block; z-index: 0; }
.swipe::before { content: ""; position: absolute; left: -.05em; right: -.06em; top: 52%; height: 40%; background: var(--red); z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--inout) .45s; }
.on .swipe::before, .swipe.on::before, .nojs .swipe::before { transform: scaleX(1); }
.redt { color: var(--redt); }
.lede { font-size: clamp(21px, 1.68vw, 24.96px); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; color: var(--tx); max-width: 34em; }
.body { font-size: clamp(18px, 1.34vw, 20.16px); line-height: 1.55; color: var(--tx2); max-width: 36em; }
.body + .body, .lede + .body { margin-top: .9em; }
.flow { font-size: clamp(24px, 2.3vw, 36.48px); line-height: 1.22; font-weight: 550; letter-spacing: -.015em; color: var(--tx); max-width: 22em; }
.mono { font-family: "IMMono", monospace; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); font-size: 14px; line-height: 1.5; }
.note { font-size: 15px; color: var(--tx2); line-height: 1.5; }
/* staged blocks are sized by JS (fit + cutout); keep them out of paint until then so nothing jumps */
.js:not(.ready) [data-stage] .stage, .js:not(.ready) .close .disp { visibility: hidden; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 18px; font: 600 18px/1 "IMSans", sans-serif; letter-spacing: -.005em; text-decoration: none;
  padding: 19px 22px 19px 26px; border-radius: 14px; background: var(--tx); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(0,0,0,.35), 0 24px 50px -20px rgba(0,0,0,.8);
  transition: transform .35s var(--back), box-shadow .35s var(--expo); }
.btn i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--tx); font-size: 16px; transition: transform .35s var(--back); }
.btn:hover { transform: translateY(-3px); }
.btn:hover i { transform: translate(2px, -2px) rotate(-8deg); }
.btn.big { font-size: 21px; padding: 24px 26px 24px 32px; }
.link { font-weight: 550; font-size: 18px; text-decoration: none; color: var(--tx); border-bottom: 1.5px solid var(--hair); padding-bottom: 4px; transition: border-color .3s; }
.link:hover { border-color: var(--tx); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, box-shadow .4s; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav.solid { background: rgba(15,14,13,.88); box-shadow: 0 1px 0 var(--hair); }
.mark { font: 800 22px/1 "IMDisplay", sans-serif; letter-spacing: -.03em; text-decoration: none; color: var(--tx); }
.mark b { color: var(--redt); font-weight: 800; }
.nav nav { display: flex; align-items: center; gap: 30px; }
.nav nav a.t { font-size: 16px; font-weight: 500; color: var(--tx2); text-decoration: none; transition: color .25s; }
.nav nav a.t:hover { color: var(--tx); }
.nav .btn { font-size: 15px; padding: 11px 12px 11px 16px; border-radius: 10px; gap: 12px; }
.nav .btn i { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.mob-i { display: none; }
@media (max-width: 860px) { .mob-i { display: inline; } .dsk-i { display: none; } }

/* ---------- Light UI sheets lit in the dark room ---------- */
.sheet { position: relative; background: var(--sheet); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; font-family: "IMSans"; }
.sheet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 2px), linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.07)); }
.sheet.dark { background: #1C1B19; color: var(--tx); box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.07) inset; }
.sheet.dark::after { background: linear-gradient(180deg, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 2px); }
.cap img { width: 100%; height: auto; filter: saturate(.94) contrast(1.03); }

/* ---------- Motion primitives (JS adds .js to <html>; without it everything is simply visible) ---------- */
.js [data-in] { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 46px), 0) scale(var(--s0, .97)); filter: blur(var(--b0, 6px));
  transition: opacity .5s ease-out, transform .85s var(--ease, var(--expo)), filter .7s var(--expo); transition-delay: var(--d, 0s); }
.js [data-in].on { opacity: 1; transform: none; filter: blur(0); }
.js [data-in="sheet"] { --dy: 90px; --s0: .9; --b0: 6px; --ease: var(--back); transition-duration: .5s, 1s, .7s; }
.js [data-in="right"] { --dx: 14vw; --dy: 0px; --s0: 1; }
.js [data-in="left"] { --dx: -14vw; --dy: 0px; --s0: 1; }
/* seams: whip (cut-the-curve) and zoom-through for chapter breaks */
.js .seam { opacity: 0; transform: translate3d(16vw, 0, 0); transition: opacity .35s ease-out, transform .7s var(--expo); }
.js .seam.zoom { transform: scale(.78); transition-duration: .4s, .9s; }
.js .seam.on { opacity: 1; transform: none; }
.js .seam .w { opacity: 0; transform: translate3d(0, .32em, 0) scale(1.06); filter: blur(8px);
  transition: opacity .35s ease-out, transform .6s var(--back), filter .5s var(--expo); transition-delay: calc(var(--i) * 45ms + .08s); }
.js .seam.on .w { opacity: 1; transform: none; filter: blur(0); }
.cam { position: relative; will-change: transform; transform-origin: 30% 60%; }

.js .seam.words { opacity: 1; transform: none; filter: none; }
.mbr { display: none; }
@media (max-width: 860px) { .mbr { display: block; } .dsk { display: none; } }
.step.flip .art .li, .step.flip .art .dm, .step.flip .art .scan, .step.flip .art .stack { margin-left: 0; margin-right: auto; }

/* ---------- The red thread ---------- */
#thread { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
#thread path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
#thread .glow { stroke: rgba(229,80,47,.16); stroke-width: 10; }
.tp { display: block; height: 0; }

/* ---------- Founder cutout over the type ---------- */
.cut { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) saturate(.92) contrast(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
.cut img { width: 100%; height: auto; }
.tag { position: absolute; z-index: 5; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.tag i { width: 0; height: 0; border-right: 11px solid var(--tx); border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: rotate(35deg); margin-top: -5px; }
.tag.flip { flex-direction: row-reverse; }
.tag.flip i { transform: rotate(-35deg) scaleX(-1); }
.tag span { font-weight: 550; font-size: 16px; padding: 6px 12px 7px; border-radius: 8px; background: rgba(24,22,20,.82); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 28px rgba(0,0,0,.4); }

/* ================= HERO ================= */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 104px 0 0; overflow: hidden; }
.hero .stage { position: relative; }
.hero .cam { animation: push 22s linear both; transform-origin: 20% 70%; }
@keyframes push { from { transform: scale(1.0); } to { transform: scale(1.045); } }
.hero h1 { font-size: 150px; position: relative; z-index: 2; }
.hero .copy { position: relative; z-index: 6; padding: clamp(28px, 3.4vh, 44px) 0 clamp(36px, 5vh, 60px); max-width: 600px; }
.hero .copy .lede { margin-bottom: 28px; font-size: clamp(20px, 1.49vw, 22.08px); }
.hero .copy .note { margin-top: 22px; }
.hero .who { color: var(--tx2); }

/* ================= PROOF STRIP ================= */
.stats { padding: clamp(70px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); }
.stats .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--hair); }
.stats .s { padding-top: 26px; }
.stats .n { font: 800 clamp(60.16px, 8.46vw, 141px)/.86 "IMDisplay", sans-serif; letter-spacing: -.045em; }
.stats .l { margin-top: 16px; font-size: clamp(17px, 1.25vw, 19.2px); color: var(--tx2); }
.logos { padding: 34px 0 20px; }
.logos .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marq .track { display: flex; align-items: center; gap: 84px; width: max-content; animation: marq 40s linear infinite; }
.marq:hover .track, .marq:focus-within .track { animation-play-state: paused; }
/* client marks in their own colours */
.marq img { height: 34px; width: auto; }
.marq img.ao { height: 52px; }
.marq img.pro { height: 42px; }
.marq .arch { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 40px; background: #F2FF82; }
.marq .arch img { height: 19px; }
.marq .wm { font: 700 23px "IMSans"; letter-spacing: -.02em; color: #E8E3D9; white-space: nowrap; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }

/* ================= PAIN ================= */
.pain { padding: clamp(110px, 14vw, 220px) 0 clamp(90px, 10vw, 160px); }
.pain .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.pain .stick { position: sticky; top: 130px; }
.pain .stick .body { margin-top: 30px; color: var(--tx2); font-size: clamp(19px, 1.44vw, 22.08px); }
.pain ol { list-style: none; }
.pain li { padding: 30px 0 32px; border-top: 1px solid var(--hair); font-size: clamp(23px, 2.02vw, 30.72px); line-height: 1.22; letter-spacing: -.015em; font-weight: 550; }
.pain li:last-child { border-bottom: 1px solid var(--hair); }
.pain li span { display: block; color: var(--tx2); font-weight: 450; }
.pain .after { margin-top: clamp(70px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); }
.pain .after .flow { grid-column: 2; }
.pain .after .ctas { grid-column: 2; margin-top: 34px; }

/* ================= CHANGE ================= */
.change { padding: clamp(80px, 10vw, 170px) 0; }
.change .disp { font-size: clamp(51.79px, 9.29vw, 150.02px); }
.change .cols { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); max-width: 1100px; margin-left: auto; }
.change .cols p { font-size: clamp(20px, 1.63vw, 24.96px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.change .cols p + p { color: var(--tx2); }

/* buyer path: the sentence laid on a timeline, markers light in order */
.path { list-style: none; margin-top: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 34px; }
.path::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(243,239,230,.18); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--inout) .2s; }
.path.on::before, .rm .path::before { transform: scaleX(1); }
.path li { position: relative; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.3; font-weight: 550; letter-spacing: -.01em; color: var(--tx3); transition: color .5s ease; transition-delay: calc(var(--k) * .32s + .35s); }
.path li::before { content: ""; position: absolute; left: 0; top: -34px; width: 14px; height: 14px; background: var(--ground); box-shadow: 0 0 0 2px rgba(243,239,230,.3) inset; transform: scale(.6);
  transition: transform .5s var(--back), background .4s, box-shadow .4s; transition-delay: inherit; }
.path.on li, .rm .path li { color: var(--tx); }
.path.on li::before, .rm .path li::before { background: var(--tx); box-shadow: 0 0 0 5px rgba(243,239,230,.1); transform: none; }
.path li:nth-child(1) { --k: 0; } .path li:nth-child(2) { --k: 1; } .path li:nth-child(3) { --k: 2; } .path li:nth-child(4) { --k: 3; }
.change .cols { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
[data-count] { font-variant-numeric: tabular-nums; }

/* ================= SYSTEM ================= */
.system { padding: clamp(100px, 12vw, 200px) 0 clamp(40px, 5vw, 80px); }
.system .open { max-width: 1250px; }
.system .open .disp { font-size: clamp(51.79px, 8.93vw, 142.88px); }
.system .open .lede { margin-top: 40px; color: var(--tx2); }
.who-first { margin-top: clamp(70px, 9vw, 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.who-first .flow { max-width: 14em; }
.who-first .mono { display: block; margin-bottom: 14px; }
.who-first .body { color: var(--tx); font-size: clamp(19px, 1.44vw, 22.08px); }

.step { padding: clamp(90px, 12vw, 190px) 0 0; }
.step .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5.5vw, 100px); align-items: center; }
.step.flip .grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.step.flip .text { order: 2; }
.step .disp { font-size: clamp(44.65px, 6.17vw, 100.02px); }
.step .text .body { margin-top: 30px; }
.step .text .body:first-of-type { color: var(--tx); font-size: clamp(19px, 1.49vw, 22.08px); }
.step .text .ctas { margin-top: 34px; }
.step .text .mono { margin-top: 28px; display: block; }
.art { position: relative; }
.art .mono { margin-top: 26px; display: block; }

/* LinkedIn post with a real carousel */
.li { max-width: 560px; margin-left: auto; padding: 22px 0 0; }
.li .hd { display: flex; gap: 12px; align-items: center; padding: 0 22px; }
.li .av { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.li .nm { font-weight: 650; font-size: 16px; }
.li .hl { font-size: 13px; color: #5f6368; }
.li .in { margin-left: auto; width: 26px; height: 26px; border-radius: 5px; background: #0A66C2; color: #fff; font: 700 15px/26px "IMSans"; text-align: center; }
.li .bd { font-size: 16px; line-height: 1.45; padding: 14px 22px 14px; }
.li .car { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0d0d0d; }
.li .car img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translate3d(30%, 0, 0); filter: blur(8px);
  transition: transform .7s var(--expo), opacity .4s, filter .55s var(--expo); }
.li .car img.cur { opacity: 1; transform: none; filter: blur(0); }
.li .car img.out { opacity: 0; transform: translate3d(-30%, 0, 0); filter: blur(8px); transition-timing-function: cubic-bezier(.55, 0, .9, .4); transition-duration: .4s; }
.li .ctl { position: absolute; z-index: 3; bottom: 14px; right: 14px; display: flex; gap: 8px; align-items: center; }
.li .ctl span { font: 500 13px "IMMono"; color: #fff; background: rgba(0,0,0,.6); padding: 5px 9px; border-radius: 6px; }
.li .ctl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #16181A; font-size: 16px; cursor: pointer; }
.li .act { display: flex; justify-content: space-around; font-size: 14px; font-weight: 600; color: #5f6368; padding: 12px 8px 14px; border-top: 1px solid var(--line); }

/* stacked real lead magnets, rack focus */
.stack { position: relative; aspect-ratio: 16 / 12; max-width: 680px; margin-left: auto; }
.stack .lm { position: absolute; width: 78%; transition: transform .8s var(--expo), filter .8s var(--expo); }
.stack .lm .chrome { height: 28px; background: #ECE9E3; display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.stack .lm .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #CFCAC0; }
.stack .lm .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px 16px; }
.stack .lm .meta b { font-weight: 650; font-size: 16px; }
.stack .lm .meta span { font-size: 14px; color: #6b7075; }
.stack .lm .meta a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1.5px solid rgba(22,24,26,.2); white-space: nowrap; }
.stack .a { left: 0; top: 0; z-index: 1; filter: blur(3px) brightness(.6); transform: rotate(-2deg); }
.stack .b { right: 0; bottom: 0; z-index: 2; transform: rotate(1.2deg); }
.stack:hover .a, .stack.swap .a { z-index: 3; filter: blur(0) brightness(1); transform: rotate(-1deg) translateY(-6px); }
.stack:hover .b, .stack.swap .b { filter: blur(3px) brightness(.6); }
.stack .lm .meta { position: relative; z-index: 6; }

/* personalised scan capture */
.scan { max-width: 640px; margin-left: auto; }
.scan .top { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.scan .top b { font-weight: 650; font-size: 16px; display: block; }
.scan .top span { font-size: 14px; color: #6b7075; }
.scan .top em { font-style: normal; font: 500 12px "IMMono"; letter-spacing: .06em; text-transform: uppercase; color: #6b7075; white-space: nowrap; }
.scan .cap { max-height: 430px; overflow: hidden; }
.scan .cap img { transform-origin: 0 0; transform: scale(1.02); }
.out-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; }

/* DM thread, drawn like LinkedIn messaging */
.dm { max-width: 560px; margin-left: auto; }
.dm .bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dm .bar .in { width: 24px; height: 24px; border-radius: 5px; background: #0A66C2; color: #fff; font: 700 14px/24px "IMSans"; text-align: center; }
.dm .bar b { font-weight: 650; font-size: 16px; }
.dm .bar span { margin-left: auto; color: #8a8f94; letter-spacing: 2px; }
.dm .who { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.dm .who b { font-weight: 650; font-size: 15px; display: block; }
.dm .who span { font-size: 13px; color: #6b7075; }
.dm .msgs { padding: 20px 20px 10px; display: flex; flex-direction: column; gap: 12px; min-height: 360px; }
.dm .m { max-width: 86%; font-size: 16px; line-height: 1.45; padding: 12px 15px; border-radius: 16px; background: #EEEBE5; }
.dm .m small { display: block; font-size: 12px; font-weight: 600; color: #8a8f94; margin-bottom: 3px; }
.dm .m.me { align-self: flex-end; background: var(--ink); color: var(--tx); border-bottom-right-radius: 5px; }
.dm .m.me small { color: #9a958c; }
.dm .m.them { border-bottom-left-radius: 5px; }
.js .dm .m { opacity: 0; transform: translate3d(0, 18px, 0) scale(.92); transform-origin: 100% 100%; transition: opacity .3s, transform .55s var(--back); }
.js .dm .m.them { transform-origin: 0 100%; }
.dm .m.on { opacity: 1; transform: none; }
.dm .typing { align-self: flex-start; display: none; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #EEEBE5; }
.dm .typing.on { display: flex; }
.dm .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a958c; animation: dot 1s infinite; }
.dm .typing i:nth-child(2) { animation-delay: .15s; } .dm .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }
.dm .comp { margin: 6px 20px 18px; padding: 12px 14px; border-radius: 10px; background: #F1EEE8; color: #8a8f94; font-size: 15px; }

/* ================= BUILDS ================= */
.builds { padding: clamp(110px, 14vw, 220px) 0 clamp(60px, 6vw, 100px); }
.builds .head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.builds .head .disp { font-size: clamp(48.22px, 7.5vw, 121.45px); }
.curve { position: relative; margin-top: clamp(50px, 6vw, 90px); aspect-ratio: 1300 / 520; }
.curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curve .axis { stroke: var(--hair); stroke-width: 1; }
.curve .c { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }
.curve .cg { fill: none; stroke: rgba(229,80,47,.25); stroke-width: 12; filter: blur(5px); }
.curve .th { position: absolute; z-index: 2; left: var(--l); top: var(--t); width: var(--w); border-radius: 8px; box-shadow: var(--shadow-soft); overflow: hidden; background: #fff; }
.curve .th img { width: 100%; height: auto; }
.curve .lab { position: absolute; left: var(--l); top: var(--t); font-weight: 600; font-size: clamp(16px, 1.34vw, 20.16px); white-space: nowrap; }
.curve .ax { position: absolute; bottom: -38px; }
.builds .cap-line { margin-top: 64px; }
.stays { padding: clamp(90px, 12vw, 200px) 0 clamp(60px, 8vw, 120px); }
.stays .disp { font-size: clamp(48.22px, 8.22vw, 133.95px); }
.stays .body { margin-top: 30px; }
.stays .ctas { margin-top: 40px; }

/* ================= ABOUT ================= */
.about { padding: clamp(110px, 14vw, 220px) 0 0; overflow: hidden; }
.about .stage { position: relative; }
.about .disp { font-size: 140px; position: relative; z-index: 2; }
.about .below { position: relative; z-index: 6; max-width: 600px; padding: 96px 0 clamp(70px, 9vw, 140px); }
.about .below .lede { color: var(--tx); }
.about .ten { display: flex; align-items: flex-end; gap: 22px; margin-top: 48px; }
.about .ten .n { font: 800 clamp(103.4px, 11.28vw, 178.6px)/.78 "IMDisplay", sans-serif; letter-spacing: -.05em; color: var(--redt); }
.about .ten p { font-size: clamp(20px, 1.63vw, 24.96px); line-height: 1.25; font-weight: 550; padding-bottom: 6px; }
.about .ten p span { display: block; color: var(--tx2); font-weight: 450; }

/* ================= OFFER ================= */
.offer { padding: clamp(110px, 14vw, 220px) 0 clamp(60px, 6vw, 100px); }
.offer .head .body { margin-top: 30px; color: var(--tx2); font-size: clamp(19px, 1.44vw, 22.08px); }
.plans { margin-top: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.plan { padding: clamp(28px, 3vw, 46px); }
.plan h3 { font-size: 20px; font-weight: 600; color: #5d6166; }
.plan.dark h3 { color: var(--tx2); }
.plan .pr { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 12px; }
.plan .pr b { font: 800 clamp(60.16px, 6.58vw, 103.4px)/.85 "IMDisplay", sans-serif; letter-spacing: -.045em; }
.plan .pr span { font-size: 19px; color: #6b7075; }
.plan.dark .pr span { color: var(--tx2); }
.plan .sum { font-size: 19px; line-height: 1.45; max-width: 26em; }
.plan .btn { margin: 28px 0 30px; }
.sheet:not(.dark) .btn { background: var(--ink); color: var(--tx); box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 20px 40px -18px rgba(0,0,0,.45); }
.sheet:not(.dark) .btn i { background: var(--tx); color: var(--ink); }
.plan ul { list-style: none; border-top: 1px solid var(--line); }
.plan.dark ul { border-color: var(--hair); }
.plan li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.plan.dark li { border-color: var(--hair); }
.plan li b { display: block; font-weight: 600; font-size: 18px; }
.plan li span { display: block; font-size: 16px; line-height: 1.45; color: #5d6166; margin-top: 2px; }
.plan.dark li span { color: var(--tx2); }
.yourpart { margin-top: 44px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: baseline; max-width: 980px; }
.yourpart b { font: 800 32px/1 "IMDisplay"; letter-spacing: -.03em; }
.yourpart p { font-size: clamp(19px, 1.44vw, 21.12px); line-height: 1.45; color: var(--tx2); }

/* alternatives */
.alts { padding: clamp(100px, 12vw, 190px) 0 clamp(60px, 6vw, 100px); }
.alts .row { margin-top: clamp(50px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.alt { padding: clamp(26px, 2.6vw, 40px) 0; border-top: 1px solid var(--hair); }
.alt h3 { font: 800 clamp(30.08px, 2.82vw, 43.24px)/.95 "IMDisplay"; letter-spacing: -.03em; }
.alt p { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--tx2); }
.alt .est { margin-top: 26px; }
.alt .est label { display: flex; justify-content: space-between; font-size: 16px; color: var(--tx); font-weight: 550; }
.alt input[type=range] { width: 100%; margin: 14px 0 10px; accent-color: var(--tx); }
.alt .est .tot { font: 800 41px/1 "IMDisplay"; letter-spacing: -.03em; margin-top: 6px; }
.alt .est .tot small { font: 500 17px "IMSans"; letter-spacing: 0; color: var(--tx2); margin-left: 6px; }
.alt .note { margin-top: 12px; }
.alt.me { border-top: 0; padding: clamp(26px, 2.6vw, 40px); }
.alt.me .pr { font: 800 clamp(45.12px, 4.14vw, 65.8px)/.9 "IMDisplay"; letter-spacing: -.04em; margin-top: 14px; }
.alt.me .pr small { font: 500 18px "IMSans"; letter-spacing: 0; color: #6b7075; }
.alt.me p { color: #4a4e53; }
.alt.me h3 { color: var(--ink); }
.alt.me .link { color: var(--ink); border-color: rgba(22,24,26,.25); display: inline-block; margin-top: 22px; }

/* ================= RESULTS ================= */
.results { padding: clamp(110px, 14vw, 220px) 0 clamp(60px, 6vw, 100px); }
.res { margin-top: clamp(60px, 7vw, 110px); padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--hair); }
.res .txt { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 10px clamp(30px, 5vw, 90px); align-items: start; }
.res .txt .p { grid-row: span 3; }
.res .txt .what, .res .txt .how, .res .txt .link { grid-column: 2; }
.res .txt .how { margin-top: 0; }
.res .txt .link { justify-self: start; margin-top: 12px; }
.res .p { display: flex; gap: 14px; align-items: center; }
.res .p img { width: 56px; height: 56px; border-radius: 50%; }
.res .p b { display: block; font-size: 19px; font-weight: 650; }
.res .p span { font-size: 16px; color: var(--tx2); }
.res .big { font: 800 clamp(65.8px, 10.34vw, 172.96px)/.86 "IMDisplay"; letter-spacing: -.045em; white-space: nowrap; }
.res .big .from { color: var(--tx2); }
.res .big small { font-size: .42em; letter-spacing: -.03em; }
/* 15 calls drawn as 15 tiles, one per call */
.res .big.calls { display: flex; align-items: flex-end; gap: clamp(26px, 4vw, 70px); white-space: normal; }
.tiles { display: grid; grid-template-columns: repeat(5, clamp(30px, 3.4vw, 50px)); gap: clamp(7px, .8vw, 12px); padding-bottom: .08em; }
.tiles i { aspect-ratio: 1; border-radius: 8px; background: #1F1D1B; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 24px -10px rgba(0,0,0,.7); position: relative; }
.tiles i::after { content: ""; position: absolute; left: 39%; top: 24%; width: 22%; height: 40%; border: solid var(--tx); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: .9; }
.js .tiles i { opacity: 0; transform: scale(.5); filter: blur(4px); transition: opacity .3s, transform .5s var(--back), filter .4s; }
.js .on .tiles i { opacity: 1; transform: none; filter: none; }
.res .what { font-size: clamp(19px, 1.44vw, 21.12px); font-weight: 550; }
.res .how { margin-top: 12px; font-size: 18px; color: var(--tx2); max-width: 30em; }
.res .link { display: inline-block; margin-top: 26px; }
.results .note { margin-top: 60px; }

/* ================= FAQ ================= */
.faq { padding: clamp(110px, 13vw, 200px) 0 clamp(60px, 6vw, 100px); }
.faq .grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.faq .disp { position: sticky; top: 130px; }
details { border-top: 1px solid var(--hair); }
details:last-child { border-bottom: 1px solid var(--hair); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0;
  font-size: clamp(21px, 1.73vw, 25.92px); font-weight: 550; letter-spacing: -.012em; }
summary::-webkit-details-marker { display: none; }
summary i { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--hair); position: relative; transition: transform .45s var(--back), background .3s; }
summary i::before, summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; background: var(--tx); }
summary i::after { transform: rotate(90deg); }
details[open] summary i { transform: rotate(45deg); background: rgba(243,239,230,.08); }
details p { padding: 0 60px 28px 0; font-size: 19px; line-height: 1.55; color: var(--tx2); max-width: 40em; }

/* ================= CLOSE ================= */
.close { padding: clamp(120px, 16vw, 260px) 0 clamp(100px, 12vw, 180px); }
.close .disp { font-size: 150px; }
.close .body { margin-top: 40px; color: var(--tx); font-size: clamp(20px, 1.63vw, 24px); }
.close .ctas { margin-top: 44px; }
footer { position: relative; z-index: 2; border-top: 1px solid var(--hair); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 34px; padding-bottom: 40px; flex-wrap: wrap; }
footer p { color: var(--tx2); font-size: 16px; }
footer a { font-size: 16px; text-decoration: none; color: var(--tx2); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .nav nav a.t { display: none; }
}
@media (max-width: 860px) {
  body { font-size: 18px; }
  .nav .wrap { height: 64px; }
  .mark { font-size: 19px; }
  .hero { padding-top: 96px; }
  .pain .grid, .pain .after, .step .grid, .step.flip .grid, .change .cols, .who-first, .builds .head, .about .below, .plans, .alts .row, .res, .faq .grid { grid-template-columns: minmax(0, 1fr); }
  .pain .stick, .faq .disp { position: static; }
  .pain .after .flow, .pain .after .ctas { grid-column: 1; }
  .step.flip .text { order: 0; }
  .step .art { margin-top: 30px; }
  .li, .dm, .scan, .stack { margin-left: 0; }
  .stats .row { grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; }
  .stats .s { border-top: 1px solid var(--hair); padding: 22px 0 26px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .stats .l { margin: 0; text-align: right; }
  .curve { aspect-ratio: 390 / 300; margin-bottom: 30px; }
  .curve .lab { font-size: 13px; left: var(--ml); top: var(--mt); }
  .curve .th { left: var(--ml); top: var(--mt); width: var(--mw); }
  .res .txt { grid-template-columns: minmax(0, 1fr); }
  .res .txt .p { grid-row: auto; }
  .res .txt .what, .res .txt .how, .res .txt .link { grid-column: 1; }
  .curve .ax { font-size: 11px; bottom: -30px; }
  .yourpart { grid-template-columns: minmax(0, 1fr); }
  .res .big { white-space: normal; }
  .res .big.calls { flex-direction: column; align-items: flex-start; gap: 22px; }
  .path { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 0 0 34px; }
  .path::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .path.on::before { transform: scaleY(1); }
  .path li::before { left: -34px; top: .3em; }
  .res { align-items: start; gap: 22px; }
  .alt.me { margin-top: 10px; }
  details p { padding-right: 0; }
  .tag.flip { flex-direction: row-reverse; }
.tag.flip i { transform: rotate(-35deg) scaleX(-1); }
.tag span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .room .pool, .grain, .marq .track, .hero .cam { animation: none !important; }
  .js [data-in], .js .seam, .js .seam .w, .js .dm .m { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .swipe::before { transform: scaleX(1); transition: none; }
}