/* RiverX v2 — cinematic.
   Archivo (variable wdth+wght) for the system; Newsreader semibold for the human moments.
   Paper, Deep Water ink, Answer green. Red only where a call was missed. */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #0E1B20; --ink-2: #16262C; --paper: #F2EEE5; --paper-2: #E8E3D7; --card: #FAF8F3;
  --muted: #4E5A5C; --line: rgba(14,27,32,.14); --line-strong: rgba(14,27,32,.28);
  --green: #16C266; --green-text: #087236; --red: #C23A28; --red-on-ink: #FF6B57;
  --muted-on-ink: #A9B1AF; --line-on-ink: rgba(242,238,229,.14);
  --pad: clamp(20px, 4.2vw, 64px); --max: 1360px; --gap: clamp(16px, 2vw, 28px);
  --section: clamp(96px, 12vw, 184px);
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif; font-stretch: 100%; font-weight: 400;
  font-size: 18px; line-height: 1.5; font-kerning: normal; font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, figure, blockquote, h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.serif { font-family: var(--serif); font-style: normal; font-weight: 600; font-optical-sizing: auto; letter-spacing: -.03em; }
.sans { font-family: "Archivo", sans-serif; font-style: normal; font-stretch: 116%; font-weight: 800; letter-spacing: -.035em; }
.body { color: var(--muted); text-wrap: pretty; font-size: 19px; line-height: 1.5; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 620; }
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }

/* ---------- buttons ---------- */
.btn {
  --h: 60px; display: inline-flex; align-items: center; gap: 12px; min-height: var(--h); padding: 0 26px 0 22px;
  border-radius: 999px; border: 0; font-size: 17px; font-weight: 640; letter-spacing: -.008em; line-height: 1;
  text-decoration: none; cursor: pointer; transition: transform .5s var(--ease-out), background-color .25s, color .25s, box-shadow .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }
.btn-call { background: var(--green); color: var(--ink); }
.btn-call:hover { background: #12B05C; }
.btn-call .num { font-weight: 520; opacity: .78; font-variant-numeric: tabular-nums; }
.btn-ink { background: var(--ink); color: var(--paper); padding: 0 24px; }
.btn-light { background: var(--paper); color: var(--ink); padding: 0 24px; }
.btn-light:hover { background: #fff; }
.btn-sm { --h: 42px; font-size: 15px; padding: 0 18px; gap: 8px; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 640; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease-out); padding-bottom: 2px;
}
.arrow-link:hover { background-size: 100% 1.5px; }
.arrow-link svg { width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(3px); }

/* play button: the signature CTA */
.btn-play { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); padding: 0 26px 0 8px; gap: 14px; --h: 64px; }
.btn-play .pi { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: none; transition: background-color .3s; }
.btn-play .pi svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.btn-play .i-pause, .btn-play.playing .i-play { display: none; }
.btn-play.playing .i-pause { display: block; }
.btn-play.playing .pi { background: var(--green); color: var(--ink); }
.btn-play .pl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.btn-play .pl small { font-size: 13px; font-weight: 520; color: var(--muted); }
.btn-play .pl-on, .btn-play.playing .pl-idle { display: none; }
.btn-play.playing .pl-on { display: inline; }
.btn-play .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.btn-play .prog span { display: block; height: 100%; width: 0; background: var(--green); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--paper); transition: background-color .35s, color .35s, border-color .35s; border-bottom: 1px solid transparent; }
.site-header.solid { color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 78px; }
.logo { display: block; color: inherit; flex: none; }
.logo svg { width: 128px; height: auto; }
.nav-links { display: flex; gap: 26px; margin-left: 20px; }
.nav-links a { text-decoration: none; font-size: 15.5px; font-weight: 540; opacity: .86; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-phone { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 15.5px; font-weight: 620; font-variant-numeric: tabular-nums; }
.nav-phone .live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.nav-phone svg, .nav-phone .call-word { display: none; }
.site-header.solid .nav-book { background: var(--ink); color: var(--paper); }
.sound-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; font-size: 13.5px; font-weight: 600; }
.sound-btn svg { width: 18px; height: 18px; }
.sound-btn .w { display: none; }
.sound-btn[aria-pressed="true"] { background: var(--green); color: var(--ink); box-shadow: none; }
.sound-btn[aria-pressed="true"] .w { display: inline; }
.sound-btn[aria-pressed="true"] .x { display: none; }
.menu-btn { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-phone .live { animation: live 2.4s var(--ease-out) infinite; }
  @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(22,194,102,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(22,194,102,0); } }
}
@media (max-width: 1120px) { .nav-links { display: none; } }
@media (max-width: 760px) {
  .nav { height: 64px; gap: 10px; }
  .logo svg { width: 108px; }
  .nav-phone .digits, .nav-phone .live, .nav-book, .sound-btn span { display: none; }
  .sound-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .nav-phone { background: var(--green); color: var(--ink); border-radius: 999px; height: 40px; padding: 0 16px 0 14px; }
  .nav-phone svg { display: block; width: 16px; height: 16px; }
  .nav-right .nav-phone .call-word { display: inline; font-weight: 650; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
}
.mobile-menu { position: fixed; inset: 64px 0 0 0; z-index: 49; background: var(--paper); color: var(--ink); padding: 24px var(--pad) 40px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .5s var(--ease-out), visibility 0s .3s; }
.mobile-menu.open { opacity: 1; transform: none; visibility: visible; transition: opacity .3s, transform .5s var(--ease-out); }
.mobile-menu a.big { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 38px; letter-spacing: -.02em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 14px; justify-content: center; }
body.menu-open .site-header { color: var(--ink); background: var(--paper); }

/* ================= HERO ================= */
.hero { position: relative; min-height: max(780px, 100svh); background: var(--ink); color: var(--paper); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 110px; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 38%; transform-origin: 60% 40%; }
@media (prefers-reduced-motion: no-preference) { .hero-media img { animation: drift 26s var(--ease-out) both; } @keyframes drift { from { transform: scale(1.09); } to { transform: scale(1.0); } } }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(14,27,32,.88) 0%, rgba(14,27,32,.62) 34%, rgba(14,27,32,.12) 62%, rgba(14,27,32,.3) 100%),
  linear-gradient(0deg, rgba(14,27,32,.95) 0%, rgba(14,27,32,.5) 22%, transparent 46%),
  linear-gradient(180deg, rgba(14,27,32,.6) 0%, transparent 18%); }
.hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.hero-copy { grid-column: 1 / span 7; container-type: inline-size; padding-bottom: 8px; }
.kicker.light { color: var(--paper); }
.hero h1 { margin-top: 22px; }
.hero h1 .serif { display: block; font-size: min(22.5cqw, 180px); line-height: .9; letter-spacing: -.035em; margin-left: -.02em; }
.hero h1 .sans { display: block; font-size: min(8.2cqw, 76px); line-height: .95; margin-top: .32em; }
.hero .lede { margin-top: 30px; max-width: 30em; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: rgba(242,238,229,.86); text-wrap: pretty; }
.hero .lede b { color: var(--paper); font-weight: 640; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.hero-note { margin-top: 16px; font-size: 14px; color: rgba(242,238,229,.66); }
.hero-note a { color: var(--paper); font-weight: 620; }

.hero-proof { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 48px; padding-top: 20px; padding-bottom: 28px; font-size: 14.5px; color: rgba(242,238,229,.72); }
.hero-proof::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: var(--line-on-ink); }
.hero-proof b { color: var(--paper); font-weight: 650; }
.stars { display: inline-flex; gap: 2px; vertical-align: -2px; margin-right: 6px; }
.stars svg { width: 13px; height: 13px; color: var(--paper); }
.hero-proof .clients { margin-left: auto; display: inline-flex; align-items: center; gap: 22px; }
.hero-proof .clients img { width: auto; filter: invert(1) brightness(1.6); opacity: .62; }

/* ---------- device ---------- */
.device-wrap { grid-column: 9 / span 4; justify-self: center; position: relative; margin: 0 0 -6px; --dw: clamp(272px, 23vw, 336px); }
.device {
  position: relative; width: var(--dw); aspect-ratio: 71.6 / 147.6; border-radius: calc(var(--dw) * .165); padding: calc(var(--dw) * .034);
  background: linear-gradient(150deg, #4b5459 0%, #1b2226 22%, #0c1013 50%, #222a2f 78%, #59636a 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 4px #0a0d0f, 0 0 0 1px rgba(0,0,0,.7), 0 70px 120px -40px rgba(0,0,0,.9), 0 30px 60px -30px rgba(0,0,0,.7);
  transform: perspective(1800px) rotateY(-9deg) rotateX(3deg) rotateZ(1.2deg); transform-origin: 40% 50%;
}
.d-key { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #12171a, #59636a); }
.d-key.k1 { left: -3px; top: 17%; height: 4.5%; }
.d-key.k2 { left: -3px; top: 25%; height: 8.5%; }
.d-key.k3 { left: -3px; top: 35.5%; height: 8.5%; }
.d-key.k4 { right: -3px; top: 27%; height: 13%; background: linear-gradient(270deg, #12171a, #59636a); }
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--dw) * .135); overflow: hidden; background: #05080a; color: #fff; font-size: calc(var(--dw) * .043); isolation: isolate; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); }
.wall { position: absolute; inset: -10%; background: url("img/photo/wall.jpg") center / cover; }
.island { position: absolute; z-index: 8; left: 50%; top: 2.2%; width: 31%; height: 3.9%; transform: translateX(-50%); background: #000; border-radius: 999px; }
.status { position: absolute; z-index: 7; top: 2.6%; left: 9%; right: 8%; display: flex; justify-content: space-between; align-items: center; font-weight: 640; font-size: 1.02em; letter-spacing: -.01em; }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: .8em; }
.sig i { width: 3px; border-radius: 1px; background: #fff; }
.sig i:nth-child(1) { height: 35%; } .sig i:nth-child(2) { height: 55%; } .sig i:nth-child(3) { height: 78%; } .sig i:nth-child(4) { height: 100%; }
.home-ind { position: absolute; z-index: 8; bottom: 1.4%; left: 50%; width: 36%; height: 4px; border-radius: 99px; transform: translateX(-50%); background: rgba(255,255,255,.85); }

.sc { position: absolute; inset: 0; z-index: 2; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.sc-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22% 8% 10%; }
.in-label { font-size: .95em; color: rgba(255,255,255,.7); font-weight: 500; }
.in-num { margin-top: .35em; font-size: 2.05em; font-weight: 600; letter-spacing: -.02em; }
.in-meta { margin-top: .25em; font-size: .95em; color: rgba(255,255,255,.7); }
.in-rx { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .6em; color: var(--paper); }
.in-mark { width: 62%; overflow: visible; }
.in-rx p { font-size: .9em; font-weight: 600; color: rgba(255,255,255,.8); }
.in-rx p.ok { color: var(--green); }
.in-actions { margin-top: 12%; width: 100%; display: flex; justify-content: space-between; padding: 0 6%; }
.act { width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; }
.act svg { width: 46%; height: 46%; color: #fff; }
.act.no { background: #EB4D3D; }
.act.yes { background: #34C759; }

.sc-call { display: flex; flex-direction: column; padding: 17% 7% 9%; background: linear-gradient(180deg, rgba(5,8,10,.55), rgba(5,8,10,.82) 40%, rgba(5,8,10,.92)); }
.cl-head { display: flex; align-items: center; gap: .7em; }
.cl-x { width: 2.2em; color: var(--paper); flex: none; }
.cl-head p { display: flex; flex-direction: column; line-height: 1.2; }
.cl-head b { font-weight: 680; font-size: 1.05em; }
.cl-head span { font-size: .78em; color: rgba(255,255,255,.62); }
.cl-t { margin-left: auto; font-size: .9em; color: var(--green); font-weight: 600; }
.wave { width: 100%; height: 3.4em; margin-top: 1.1em; }
.tx { flex: 1; min-height: 0; margin-top: .9em; display: flex; flex-direction: column; justify-content: flex-start; gap: .75em; overflow: hidden; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.3em); mask-image: linear-gradient(180deg, transparent 0, #000 1.3em); padding-top: 1.3em; margin-top: .2em; }
.device-wrap:not([data-state]) .tx { justify-content: flex-end; }
.tl { display: flex; flex-direction: column; gap: .2em; font-size: 1.04em; line-height: 1.32; transition: opacity .5s; }
.tl .sp { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tl.rx .sp { color: var(--green); }
.tl .ws span { transition: opacity .18s linear; }
.notif { position: absolute; z-index: 6; left: 4%; right: 4%; top: 7.5%; display: flex; gap: .7em; align-items: flex-start; padding: .85em .9em; border-radius: 1.2em;
  background: rgba(242,238,229,.93); color: var(--ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  transition: transform .8s var(--ease-out), opacity .4s; }
.nx { width: 2em; flex: none; color: var(--ink); margin-top: .1em; }
.notif p { display: flex; flex-direction: column; line-height: 1.3; font-size: .9em; }
.notif b { font-weight: 700; }
.notif span { color: #3b4648; }
.notif .ok { color: var(--green-text); font-weight: 600; margin-top: .2em; }

/* device states (JS sets data-state on .device-wrap); default (no JS / static) = finished call */
.sc-in { opacity: 0; transform: scale(1.04); pointer-events: none; }
.device-wrap[data-state="in"] .sc-in { opacity: 1; transform: none; }
.device-wrap[data-state="in"] .sc-call { opacity: 0; transform: translateY(4%); }
.device-wrap[data-state]:not([data-booked]) .notif { opacity: 0; transform: translateY(-130%); }
.device-wrap[data-state] .tl.future { display: none; }
.device-wrap[data-state] .tl.now .ws span:not(.said) { opacity: .2; }
.device-wrap[data-state] .tl.past { opacity: .5; }

.ripples { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ripples span { position: absolute; left: 0; top: 0; width: calc(var(--dw) * 1.3); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(242,238,229,.35); transform: translate(-50%, -50%) scale(.6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .device-wrap.ringing .ripples span { animation: ripple 2.6s var(--ease-out) infinite; }
  .device-wrap.ringing .ripples span:nth-child(2) { animation-delay: .5s; }
  .device-wrap.ringing .ripples span:nth-child(3) { animation-delay: 1s; }
  @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.55); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } }
  .device-wrap.buzz .device { animation: buzz .9s linear; }
  @keyframes buzz { 0%, 100% { translate: 0 0; } 10%, 30%, 50%, 70% { translate: -2px 0; } 20%, 40%, 60%, 80% { translate: 2px 0; } 90% { translate: 0 0; } }
  .device-wrap.ringing .act.yes { animation: accept 1.3s var(--ease-out) infinite; }
  @keyframes accept { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.6); } 100% { box-shadow: 0 0 0 1.2em rgba(52,199,89,0); } }
}

@media (max-width: 1020px) {
  .hero { min-height: 0; padding-top: 104px; }
  .hero-copy { grid-column: 1 / -1; }
  .device-wrap { grid-column: 1 / -1; margin: 56px 0 0; --dw: min(300px, 72vw); }
  .device { transform: none; }
  .hero-proof .clients { margin-left: 0; }
}
@media (max-width: 560px) {
  .hero-proof .clients { display: none; }
  .btn-play, .hero-ctas .btn-call { width: 100%; }
  .hero-ctas .btn-call { justify-content: center; }
}

/* ================= 8 IN 10 ================= */
.miss { position: relative; height: 330vh; background: var(--ink); color: var(--paper); --g: 0; }
.miss-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.miss-green { position: absolute; inset: 0; background: var(--green); clip-path: inset(calc((1 - var(--g)) * 100%) 0 0 0); }
.miss-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.miss-copy { grid-column: 1 / span 6; container-type: inline-size; }
.miss .after { display: none; }
.miss.flipped .after { display: inline; }
.miss.flipped .before { display: none; }
.miss.flipped { color: var(--ink); }
.miss-eyebrow { font-size: 15px; font-weight: 620; color: var(--muted-on-ink); display: flex; align-items: center; gap: 10px; }
.miss-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red-on-ink); }
.miss.flipped .miss-eyebrow { color: var(--ink); }
.miss.flipped .miss-eyebrow::before { background: var(--ink); }
.miss-h { margin-top: 22px; }
.miss-h .big { display: block; white-space: nowrap; font-size: min(30cqw, 280px); line-height: .82; letter-spacing: -.04em; color: var(--red-on-ink); margin-left: -.04em; transition: color .5s; }
.miss.flipped .miss-h .big { color: var(--ink); }
.miss-h .sans { display: block; margin-top: 22px; font-size: clamp(28px, 2.9vw, 48px); line-height: 1; max-width: 13em; }
.miss-sub { margin-top: 24px; font-size: 19px; line-height: 1.5; max-width: 30em; color: var(--muted-on-ink); }
.miss.flipped .miss-sub { color: rgba(14,27,32,.78); }
.miss-tally { margin-top: 28px; font-size: 17px; font-weight: 600; }
.miss-tally b { font-stretch: 112%; font-weight: 800; font-size: 1.5em; letter-spacing: -.02em; }
.miss-tally .before b { color: var(--red-on-ink); }

.miss-log { grid-column: 8 / span 5; background: rgba(242,238,229,.05); border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line-on-ink); padding: 8px 0 6px; transition: background-color .5s, box-shadow .5s; }
.miss.flipped .miss-log { background: rgba(14,27,32,.07); box-shadow: inset 0 0 0 1px rgba(14,27,32,.16); }
.log-top { display: flex; justify-content: space-between; padding: 14px 22px 10px; font-size: 14px; font-weight: 640; color: var(--muted-on-ink); }
.miss.flipped .log-top { color: rgba(14,27,32,.6); }
.mrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line-on-ink); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), border-color .5s; }
.miss.flipped .mrow { border-top-color: rgba(14,27,32,.12); }
.js .miss:not(.static) .mrow:not(.in) { opacity: 0; transform: translateY(14px); }
.mrow .ic svg { width: 18px; height: 18px; }
.mrow .ic .af, .mrow .af { display: none; }
.miss.flipped .mrow.fl .ic .af, .miss.flipped .mrow.fl small.af { display: block; }
.miss.flipped .mrow.fl .ic .b4, .miss.flipped .mrow.fl .b4 { display: none; }
.miss.flipped .mrow.fl .st .af { display: inline; }
.mrow .ic { color: var(--muted-on-ink); }
.mrow.m .ic, .mrow.m .nm { color: var(--red-on-ink); }
.miss.flipped .mrow.fl .ic, .miss.flipped .mrow.fl .nm { color: var(--ink); }
.mrow .who { display: flex; flex-direction: column; min-width: 0; }
.mrow .nm { font-weight: 640; font-size: 16.5px; letter-spacing: -.005em; transition: color .4s; }
.mrow small { font-size: 13.5px; color: var(--muted-on-ink); }
.miss.flipped .mrow small { color: rgba(14,27,32,.68); }
.mrow .st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.mrow time { font-size: 13.5px; color: var(--muted-on-ink); }
.miss.flipped .mrow time { color: rgba(14,27,32,.6); }
.mrow .st span { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.mrow.m .st .b4 { color: var(--red-on-ink); }
.miss.flipped .mrow.fl .st .af { color: var(--ink); background: rgba(255,255,255,.4); padding: 2px 9px; border-radius: 999px; }
.miss.flipped .mrow:not(.fl) { opacity: .4; }
.miss.flipped .mrow:not(.fl) .nm, .miss.flipped .mrow:not(.fl) .ic, .miss.flipped .mrow:not(.fl) .st .b4 { color: var(--ink); }
.mrow.pop { animation: pop .7s var(--ease-out); }
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 100% { transform: scale(1); } }

.miss.static { height: auto; }
.miss.static .miss-stage { position: relative; height: auto; padding: var(--section) 0; }
@media (max-width: 1020px) {
  .miss-copy { grid-column: 1 / -1; }
  .miss-log { grid-column: 1 / -1; margin-top: 24px; }
  .miss-h .big { font-size: min(31cqw, 200px); }
  .miss-sub { display: none; }
  .miss-h .sans { font-size: clamp(24px, 6vw, 36px); margin-top: 12px; }
  .miss-h { margin-top: 12px; }
  .miss-tally { margin-top: 14px; }
  .miss:not(.static) .miss-stage { align-items: flex-start; padding-top: 84px; }
  .mrow { padding: 8px 16px; }
  .mrow .st { flex-direction: row-reverse; align-items: baseline; gap: 10px; }
  .mrow small { display: none !important; }
  .mrow .nm { font-size: 15px; }
  .log-top { padding: 8px 16px 6px; }
}
@media (max-width: 1020px) and (max-height: 760px) { .miss:not(.static) .mrow:nth-child(n+7) { display: none; } .miss:not(.static) .miss-eyebrow { display: none; } }

/* ================= 31 SECONDS ================= */
.sec31 { padding-block: var(--section); }
.s31-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.s31-head h2 { grid-column: 1 / span 8; }
.s31-head h2 .serif { display: block; font-size: clamp(64px, 9vw, 164px); line-height: .88; }
.s31-head h2 .sans { display: block; margin-top: 18px; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.08; font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; max-width: 22em; color: var(--muted); }
.s31-head .body { grid-column: 10 / span 3; padding-bottom: 6px; }
.ruler { position: relative; margin-top: clamp(56px, 7vw, 104px); height: 54px; }
.ruler-line { position: absolute; left: 0; right: 0; top: 24px; height: 2px; background: var(--ink); }
.playhead { position: absolute; top: 50%; left: calc(var(--p, 1) * 100%); width: 14px; height: 14px; border-radius: 50%; background: var(--green); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(22,194,102,.22); }
.ticks { position: absolute; inset: 0; }
.tk { position: absolute; left: calc(var(--at) / var(--max, 33) * 100%); top: 19px; width: 1px; height: 12px; background: var(--line-strong); }
.tk.mj { top: 14px; height: 22px; background: var(--ink); }
.tk b { position: absolute; top: 28px; left: 0; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tk.mj:first-child b { transform: none; }
.beats { margin-top: 36px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); counter-reset: beat; }
.beat { position: relative; padding-top: 22px; border-top: 1px solid var(--line-strong); transition: opacity .6s var(--ease-out); }
.js .sec31:not(.static) .beat:not(.lit) { opacity: .25; }
.beat::before { counter-increment: beat; content: counter(beat); position: absolute; top: -13px; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; transition: background-color .4s; }
.beat.lit::before { background: var(--green); box-shadow: none; }
.bt { font-size: 13.5px; font-weight: 640; color: var(--green-text); margin-top: 6px; }
.beat h3 .serif { display: block; font-size: clamp(38px, 3.6vw, 60px); line-height: .95; margin-top: 6px; }
.beat > p:not(.bt) { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.art { margin-top: 18px; font-size: 13px; }
.art-cal { display: grid; grid-template-columns: 40px 1fr; background: var(--card); border-radius: 14px; padding: 6px 12px; box-shadow: 0 0 0 1px var(--line); }
.art-cal span { padding: 7px 0; color: var(--muted); border-top: 1px solid var(--line); }
.art-cal b { padding: 7px 8px; font-weight: 560; color: var(--muted); border-top: 1px solid var(--line); }
.art-cal span:first-child, .art-cal b:nth-child(2) { border-top: 0; }
.art-cal b.new { background: var(--green); color: var(--ink); border-radius: 8px; font-weight: 680; border-top-color: transparent; }
.art-sms .b { background: var(--ink); color: var(--paper); border-radius: 16px 16px 4px 16px; padding: 10px 13px; line-height: 1.35; font-size: 14px; }
.facts { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.facts li { padding-top: 18px; border-top: 1px solid var(--line-strong); font-size: 16px; line-height: 1.45; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 680; display: block; font-size: 17px; margin-bottom: 4px; }
@media (max-width: 1020px) {
  .s31-head h2, .s31-head .body { grid-column: 1 / -1; }
  .s31-head .body { margin-top: 22px; }
  .ruler { display: none; }
  .beats { grid-template-columns: 1fr; gap: 34px; margin-top: 48px; }
  .beat { display: grid; grid-template-columns: 74px 1fr; column-gap: 12px; padding-top: 26px; }
  .beat .bt { grid-column: 1; grid-row: 1 / span 3; }
  .beat > *:not(.bt) { grid-column: 2; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ================= DIAL ================= */
.dial { background: var(--ink); color: var(--paper); padding-block: var(--section) calc(var(--section) * .8); overflow: hidden; }
.dial .wrap { container-type: inline-size; }
.dial-h .serif { display: block; font-size: clamp(48px, 6.2vw, 112px); line-height: .92; }
.dial-h .sans { display: block; font-size: clamp(48px, 6.2vw, 112px); line-height: .92; color: var(--green); margin-top: .06em; }
.dial-num { display: inline-block; margin-top: clamp(36px, 4vw, 64px); text-decoration: none; white-space: nowrap; font-stretch: 106%; font-weight: 740; letter-spacing: -.045em; line-height: .82; font-size: var(--fit, 13cqw); margin-left: -.04em; color: var(--paper); }
.dial-num .dg, .dial-num .pn { transition: color .25s; }
.dial-num .pn { color: var(--muted-on-ink); }
.dial.dialing .dial-num .dg:not(.lit), .dial.dialing .dial-num .pn { color: rgba(242,238,229,.1); }
.dial.dialing .dial-num.done .pn { color: var(--muted-on-ink); }
.dial-num:hover .dg { color: var(--green); }
.dial-grid { margin-top: clamp(44px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.dial-copy { grid-column: 1 / span 5; padding-top: 10px; }
.dial-copy .try { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.dial-copy .try2 { margin-top: 14px; font-size: 19px; color: var(--muted-on-ink); line-height: 1.5; max-width: 28em; }
.dial-copy .es { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-on-ink); font-size: 15px; color: var(--muted-on-ink); }
.dial-copy .es a { display: inline-block; margin-top: 6px; color: var(--paper); text-decoration: none; font-size: 30px; font-weight: 700; font-stretch: 106%; letter-spacing: -.02em; }
.dial-copy .es a:hover { color: var(--green); }
.arrow-link.light { margin-top: 26px; color: var(--paper); }
.pad { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); justify-items: center; max-width: 440px; justify-self: end; width: 100%; }
.key { width: clamp(68px, 6.6vw, 96px); aspect-ratio: 1; border-radius: 50%; background: rgba(242,238,229,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background-color .6s, color .6s; }
.key b { font-size: clamp(28px, 2.5vw, 38px); font-weight: 400; line-height: 1; }
.key i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .22em; margin-top: 3px; color: var(--muted-on-ink); min-height: 1em; padding-left: .22em; transition: color .6s; }
.key.on { background: var(--paper); color: var(--ink); transition: none; }
.key.on i { color: var(--ink); transition: none; }
.pad-call { grid-column: 2; position: relative; width: clamp(68px, 6.6vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--green); color: var(--ink); display: grid; place-items: center; margin-top: 6px; }
.pad-call svg { width: 38%; height: 38%; position: relative; }
.pad-call .r { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dial.ready .pad-call .r { animation: callring 2s var(--ease-out) infinite; }
  .dial.ready .pad-call .r + .r { animation-delay: .6s; }
  @keyframes callring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
}
@media (max-width: 1020px) {
  .dial-copy { grid-column: 1 / -1; }
  .pad { grid-column: 1 / -1; justify-self: center; margin-top: 48px; }
}

/* ================= WHO ================= */
.trades { background: var(--ink); color: var(--paper); padding-top: var(--section); padding-bottom: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line-on-ink); }
.who-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.who-head h2 { grid-column: 1 / span 9; }
.who-head h2 .serif { font-size: clamp(52px, 6.6vw, 120px); line-height: .92; display: block; }
.who-head .body { grid-column: 10 / span 3; color: var(--muted-on-ink); padding-bottom: 8px; }
.panels { display: flex; gap: 8px; height: min(76vh, 760px); min-height: 520px; margin-top: clamp(44px, 5vw, 72px); padding-inline: 8px; }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 10px; transition: flex-grow .9s var(--ease-out); outline-offset: -3px; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,27,32,.92) 0%, rgba(14,27,32,.3) 45%, rgba(14,27,32,.1) 100%); }
.pn-in { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; }
.pn-lab { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,238,229,.72); }
.panel h3 { margin-top: 8px; font-size: clamp(28px, 2.5vw, 46px); line-height: .98; }
.pn-does { margin-top: 12px; font-size: 16px; line-height: 1.45; color: rgba(242,238,229,.86); max-width: 26em; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .7s var(--ease-out); }
@media (hover: hover) and (min-width: 1021px) {
  .panels:hover .panel { flex-grow: .8; }
  .panels .panel:hover, .panels .panel:focus-within, .panels .panel:focus { flex-grow: 2.6; }
  .panel:hover img { transform: scale(1.04); }
  .panel:hover .pn-does, .panel:focus .pn-does { opacity: 1; transform: none; }
}
.panels:not(:hover) .panel.feat { flex-grow: 2.6; }
.panels:not(:hover) .panel.feat .pn-does { opacity: 1; transform: none; }
.who-also { margin-top: 32px; font-size: 16px; color: var(--muted-on-ink); }
.who-also b { color: var(--paper); font-weight: 620; }
@media (max-width: 1020px) {
  .who-head h2, .who-head .body { grid-column: 1 / -1; }
  .who-head .body { margin-top: 16px; }
  .panels { overflow-x: auto; scroll-snap-type: x mandatory; height: 520px; padding-inline: var(--pad); gap: 10px; scrollbar-width: none; }
  .panels::-webkit-scrollbar { display: none; }
  .panel, .panels:not(:hover) .panel.feat { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
  .panel h3 { white-space: normal; }
  .pn-does { opacity: 1; transform: none; }
}

/* ================= PROOF ================= */
.proof { padding-block: var(--section) calc(var(--section) * .6); }
.proof-h .serif { display: block; font-size: clamp(52px, 6.6vw, 120px); line-height: .92; max-width: 11em; }
.case { margin-top: clamp(64px, 7vw, 112px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.case-video { grid-column: 1 / span 4; position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: 0 50px 90px -40px rgba(14,27,32,.6); }
.case-video img, .case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.case-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,27,32,.55), transparent 40%); pointer-events: none; }
.case-video.playing::after, .case-video.playing .yt-play, .case-video.playing .yt-tag { display: none; }
.yt-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .5s var(--ease-out), background-color .2s; box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); }
.yt-play svg { width: 34px; height: 34px; margin-left: 5px; }
.yt-play:hover { transform: scale(1.07); background: var(--green); }
.yt-tag { position: absolute; z-index: 2; left: 16px; bottom: 16px; font-size: 13px; font-weight: 620; color: var(--paper); background: rgba(14,27,32,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 999px; }
.case-copy { grid-column: 6 / span 7; container-type: inline-size; }
.case.flip .case-video { grid-column: 9 / span 4; order: 2; }
.case.flip .case-copy { grid-column: 1 / span 7; order: 1; }
.case-big { font-stretch: 114%; font-weight: 800; font-size: min(18.5cqw, 210px); line-height: .8; letter-spacing: -.055em; white-space: nowrap; margin-left: -.04em; }
.case-big .from { color: #7A8283; }
.case-big .arr { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--muted); margin: 0 .05em; letter-spacing: 0; font-size: .62em; vertical-align: .1em; }
.case-big .to, .case-big .plus { color: var(--green-text); }
.case-copy blockquote { margin-top: 30px; font-size: clamp(28px, 2.7vw, 46px); line-height: 1.12; max-width: 17em; text-indent: -.36em; }
.who-said { margin-top: 20px; font-size: 16px; color: var(--muted); }
.who-said b { color: var(--ink); font-weight: 650; }
@media (max-width: 1020px) {
  .case, .case.flip { grid-template-columns: 1fr; }
  .case-video, .case.flip .case-video { grid-column: 1; order: 2; width: min(100%, 360px); margin-top: 32px; }
  .case-copy, .case.flip .case-copy { grid-column: 1; order: 1; }
  .case-big { font-size: min(18.5cqw, 150px); }
}

/* ================= QUOTES ================= */
.quotes { background: var(--paper-2); padding-block: var(--section); }
.pull blockquote { font-size: clamp(40px, 5.4vw, 98px); line-height: 1.02; letter-spacing: -.025em; text-indent: -.4em; max-width: 16em; text-wrap: balance; }
.pull figcaption { margin-top: 28px; font-size: 16px; color: var(--muted); }
.pull figcaption b { color: var(--ink); font-weight: 650; }
.qcols { margin-top: clamp(64px, 7vw, 104px); columns: 3 280px; column-gap: calc(var(--gap) * 2); column-rule: 1px solid var(--line-strong); }
.qcols figure { break-inside: avoid; padding: 4px 0 30px; }
.qcols blockquote { font-size: 18px; line-height: 1.5; text-indent: -.42em; }
.qcols figcaption { margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qcols .rating p { font-stretch: 112%; font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.qcols .rating p b { font-size: 3em; line-height: .8; letter-spacing: -.05em; }

/* ================= PRICING ================= */
.pricing { padding-top: var(--section); padding-bottom: var(--section); }
.pr-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.pr-head h2 { grid-column: 1 / span 8; }
.pr-head h2 .serif { font-size: clamp(52px, 6.6vw, 120px); line-height: .92; display: block; }
.pr-head .body { grid-column: 10 / span 3; padding-bottom: 8px; }
.rate { margin-top: clamp(48px, 6vw, 88px); }
.tier.wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; position: relative; padding-block: 34px 36px; }
.tier.wrap::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: var(--line-strong); }
.tier h3 { grid-column: 1 / span 3; font-size: clamp(40px, 3.8vw, 66px); line-height: .9; }
.tier .adds { grid-column: 4 / span 5; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 34em; }
.tier .adds b { color: var(--ink); font-weight: 680; }
.tier .price { grid-column: 9 / span 2; display: flex; align-items: baseline; gap: 4px; }
.price b { font-stretch: 110%; font-weight: 780; font-size: clamp(40px, 3.6vw, 60px); letter-spacing: -.045em; line-height: 1; }
.price b.custom { font-size: clamp(30px, 2.6vw, 42px); }
.price span { font-size: 15px; color: var(--muted); }
.tier .arrow-link { grid-column: 11 / span 2; justify-self: end; font-size: 16px; }
.tier.plus { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 6vw, 96px); margin-block: 4px; }
.plus-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; align-items: end; }
.plus-tag { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; color: var(--green); }
.plus-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.tier.plus h3 { grid-column: 1 / span 5; grid-row: 2 / span 3; font-size: clamp(110px, 15vw, 270px); line-height: .78; color: var(--paper); align-self: center; margin-left: -.03em; }
.tier.plus .adds { grid-column: 7 / span 6; color: var(--muted-on-ink); }
.tier.plus .adds b { color: var(--paper); }
.tier.plus ul { grid-column: 7 / span 6; columns: 2; column-gap: var(--gap); font-size: 16.5px; }
.tier.plus li { display: flex; gap: 10px; padding: 6px 0; break-inside: avoid; }
.tier.plus li svg { width: 17px; height: 17px; color: var(--green); flex: none; margin-top: 3px; }
.tier.plus .price { grid-column: 7 / span 3; margin-top: 12px; }
.tier.plus .price b { font-size: clamp(56px, 5.6vw, 96px); }
.tier.plus .price span { color: var(--muted-on-ink); }
.tier.plus .btn { grid-column: 10 / span 3; justify-self: end; margin-top: 12px; padding: 0 34px; }
@media (max-width: 1020px) {
  .pr-head h2, .pr-head .body { grid-column: 1 / -1; }
  .pr-head .body { margin-top: 16px; }
  .tier.wrap { grid-template-columns: 1fr auto; row-gap: 12px; }
  .tier h3 { grid-column: 1; }
  .tier .price { grid-column: 2; justify-self: end; }
  .tier .adds { grid-column: 1 / -1; }
  .tier .arrow-link { grid-column: 1 / -1; justify-self: start; }
  .plus-in { grid-template-columns: 1fr; }
  .tier.plus h3, .tier.plus .adds, .tier.plus ul, .tier.plus .price, .tier.plus .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .tier.plus h3 { font-size: clamp(96px, 30vw, 180px); }
  .tier.plus ul { columns: 1; }
}

/* ================= FOUNDERS (colour block) ================= */
.founders { background: var(--green); color: var(--ink); padding-block: var(--section); }
.fd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.founders h2 { grid-column: 1 / span 7; font-size: clamp(52px, 6.6vw, 120px); line-height: .94; text-indent: -.38em; padding-left: .38em; }
.fd-copy { grid-column: 9 / span 4; padding-top: 14px; }
.fd-copy p { font-size: 19px; line-height: 1.55; }
.fd-copy p + p { margin-top: 16px; }
.people { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(14,27,32,.25); display: grid; gap: 14px; }
.person { display: flex; gap: 14px; align-items: center; }
.person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; flex: none; }
.person b { display: block; font-weight: 680; font-size: 15.5px; line-height: 1.25; }
.person span { font-size: 13.5px; opacity: .75; }
@media (max-width: 1020px) { .founders h2, .fd-copy { grid-column: 1 / -1; } .fd-copy { margin-top: 36px; } }

/* ================= AUDIT ================= */
.audit { padding-block: var(--section) 0; }
.au-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.au-grid h2 { grid-column: 1 / span 5; }
.au-grid h2 .serif { display: block; font-size: clamp(48px, 5.4vw, 96px); line-height: .92; }
.au-grid h2 .sans { display: block; margin-top: 14px; font-size: clamp(24px, 2.2vw, 36px); font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; color: var(--muted); }
.au-list { grid-column: 7 / span 6; }
.au-row { width: 100%; display: grid; grid-template-columns: 52px 1fr 28px; gap: 16px; align-items: start; text-align: left; padding: 28px 8px 30px 0; border: 0; border-top: 1px solid var(--line-strong); background: transparent; cursor: pointer; transition: background-color .3s, padding .5s var(--ease-out); }
.au-row:last-of-type { border-bottom: 1px solid var(--line-strong); }
.au-row:hover { background: var(--paper-2); padding-left: 14px; }
.au-row .n { font-size: 14px; font-weight: 700; color: var(--green-text); padding-top: 10px; }
.au-row b { display: block; font-stretch: 110%; font-weight: 760; font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -.03em; line-height: 1.05; }
.au-row .t span { display: block; margin-top: 8px; font-size: 16.5px; line-height: 1.45; color: var(--muted); max-width: 34em; }
.au-row svg { width: 26px; height: 26px; margin-top: 10px; transition: transform .45s var(--ease-out); }
.au-row:hover svg { transform: translateX(4px); }
.au-fine { margin-top: 18px; font-size: 14px; font-weight: 560; color: var(--muted); }
@media (max-width: 1020px) { .au-grid h2, .au-list { grid-column: 1 / -1; } .au-list { margin-top: 36px; } .au-row { grid-template-columns: 36px 1fr 24px; } }
dialog.modal { width: min(720px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); padding: 0; border: 0; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 40px 120px -20px rgba(14,27,32,.6); }
dialog.modal::backdrop { background: rgba(14,27,32,.6); }
.modal-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line); font-weight: 650; }
.modal-bar button { border: 0; background: var(--paper-2); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal-bar svg { width: 16px; height: 16px; }
dialog.modal iframe { width: 100%; height: calc(100% - 65px); border: 0; display: block; }

/* ================= FAQ ================= */
.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.faq-grid h2 { grid-column: 1 / span 4; align-self: start; position: sticky; top: 110px; }
.faq-grid h2 .serif { font-size: clamp(48px, 5.4vw, 96px); line-height: .92; display: block; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--line-strong); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font-size: 21px; font-weight: 640; letter-spacing: -.014em; }
summary::-webkit-details-marker { display: none; }
summary .pm { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; position: relative; transition: background-color .25s, box-shadow .25s; }
summary .pm::before, summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.75px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease-out); }
summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] summary .pm { background: var(--ink); color: var(--paper); box-shadow: none; }
details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.answer { padding: 0 56px 28px 0; color: var(--muted); font-size: 17.5px; line-height: 1.55; display: grid; gap: 12px; }
.answer b { color: var(--ink); font-weight: 620; }
@media (max-width: 1020px) { .faq-grid h2 { grid-column: 1 / -1; position: static; } .faq-list { grid-column: 1 / -1; margin-top: 36px; } }
@media (max-width: 560px) { summary { font-size: 18px; } .answer { padding-right: 0; } }

/* ================= CLOSER ================= */
.closer { position: relative; min-height: max(720px, 96vh); background: var(--ink); color: var(--paper); display: flex; align-items: flex-end; overflow: hidden; }
.closer-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.closer-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,10,.75), rgba(5,8,10,.2) 60%, rgba(5,8,10,.1)), linear-gradient(0deg, rgba(5,8,10,.8), transparent 50%); }
.closer-in { position: relative; padding-block: var(--section) clamp(64px, 8vw, 120px); container-type: inline-size; }
.closer-time { font-size: 15px; font-weight: 700; color: var(--green); letter-spacing: .02em; }
.closer h2 { margin-top: 18px; }
.closer h2 .serif { display: block; font-size: min(12cqw, 156px); line-height: .9; text-wrap: balance; max-width: 9.5em; }
.closer h2 .sans { display: block; font-size: min(5cqw, 76px); line-height: .95; margin-top: .3em; }
.closer-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 760px) { .closer h2 .serif { font-size: 13cqw; } .closer h2 .sans { font-size: 8.4cqw; } }

/* ================= FOOTER ================= */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(56px, 7vw, 96px); overflow: hidden; border-top: 1px solid var(--line-on-ink); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.foot-about { grid-column: 1 / span 4; font-size: 15.5px; color: var(--muted-on-ink); line-height: 1.5; }
.foot-about a.tel { display: inline-block; margin-top: 18px; color: var(--paper); text-decoration: none; font-size: 22px; font-weight: 680; letter-spacing: -.015em; }
.foot-about a.tel:hover { color: var(--green); }
.foot-col { grid-column: span 2; }
.foot-col:first-of-type { grid-column: 7 / span 2; }
.foot-col .foot-h { font-size: 13.5px; font-weight: 600; color: var(--muted-on-ink); margin-bottom: 14px; }
.foot-col a { display: block; text-decoration: none; font-size: 15.5px; padding: 4px 0; opacity: .9; }
.foot-col a:hover { opacity: 1; color: var(--green); }
.foot-mark { margin-top: clamp(56px, 7vw, 100px); margin-bottom: clamp(18px, 2.4vw, 32px); }
.foot-mark svg { width: 100%; height: auto; }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 22px 0 28px; border-top: 1px solid var(--line-on-ink); font-size: 13.5px; color: var(--muted-on-ink); }
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--paper); }
.foot-legal nav { display: flex; gap: 22px; }
@media (max-width: 1020px) { .foot-about { grid-column: 1 / -1; } .foot-col, .foot-col:first-of-type { grid-column: span 4; } }
@media (max-width: 560px) { .foot-col, .foot-col:first-of-type { grid-column: span 6; } }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .btn { --h: 56px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}