/* Hale & Okafor — personal-injury homepage concept. Lane: "Urushi lacquer".
   Oxblood lacquer base, lacquer-red and kintsugi-gold bands, Gloock + Schibsted Grotesk (+ DM Mono for small figures).
   Every section sets a theme class (.t-lac, .t-deep, .t-red, .t-gold, .t-foot); components read the theme variables. */
:root {
  --lac: #2a0a10;
  --lac-deep: #150408;
  --lac-foot: #0d0205;
  --red: #9e1c1c;
  --gold: #e0a93b;
  --gold-lt: #f2c977;
  --bone: #f3e9da;
  --warn: #ff8b6b;
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4vw, 56px);
  --r: 2px;
  --sheen: linear-gradient(158deg, rgba(255, 238, 220, 0.1) 0%, rgba(255, 238, 220, 0.025) 28%, rgba(255, 238, 220, 0) 52%);
  /* theme defaults = lacquer */
  --bg: var(--lac);
  --fg: var(--bone);
  --fg-2: rgba(243, 233, 218, 0.78);
  --fg-3: rgba(243, 233, 218, 0.62);
  --hair: rgba(224, 169, 59, 0.3);
  --hair-2: rgba(224, 169, 59, 0.62);
  --line: rgba(243, 233, 218, 0.12);
  --panel: #37101a;
  --panel-2: #44141f;
  --accent: var(--gold);
  --on-accent: var(--lac);
}
.t-lac { --bg: var(--lac); --panel: #37101a; --panel-2: #44141f; }
.t-deep { --bg: var(--lac-deep); --fg: var(--bone); --fg-2: rgba(243, 233, 218, 0.78); --fg-3: rgba(243, 233, 218, 0.62); --hair: rgba(224, 169, 59, 0.3); --hair-2: rgba(224, 169, 59, 0.62); --line: rgba(243, 233, 218, 0.12); --panel: #25080f; --panel-2: #310c15; --accent: var(--gold); --on-accent: var(--lac); }
.t-red { --bg: var(--red); --fg-2: rgba(243, 233, 218, 0.88); --fg-3: rgba(243, 233, 218, 0.82); --hair: rgba(243, 233, 218, 0.3); --hair-2: rgba(243, 233, 218, 0.62); --line: rgba(243, 233, 218, 0.2); --panel: var(--lac-deep); --panel-2: #25080f; }
.t-gold { --bg: var(--gold); --fg: var(--lac); --fg-2: rgba(42, 10, 16, 0.84); --fg-3: rgba(42, 10, 16, 0.76); --hair: rgba(42, 10, 16, 0.3); --hair-2: rgba(42, 10, 16, 0.62); --line: rgba(42, 10, 16, 0.16); --panel: var(--lac-deep); --panel-2: #25080f; --accent: var(--lac); --on-accent: var(--gold); }
.t-foot { --bg: var(--lac-foot); }
.t-lac, .t-deep, .t-red, .t-gold, .t-foot { background-color: var(--bg); color: var(--fg); }
/* lacquer gloss on the bands */
.t-red.sec, .t-red.refer { background-image: linear-gradient(115deg, rgba(255, 220, 200, 0) 20%, rgba(255, 220, 200, 0.07) 34%, rgba(255, 220, 200, 0) 50%), linear-gradient(180deg, #a82020, #8c1717); }
.t-gold.sec { background-image: linear-gradient(112deg, rgba(255, 250, 235, 0) 18%, rgba(255, 250, 235, 0.22) 30%, rgba(255, 250, 235, 0) 44%), linear-gradient(180deg, #e6b146 0%, #d9a034 100%); }
.t-deep.sec, .t-lac.sec { box-shadow: inset 0 1px 0 rgba(224, 169, 59, 0.2); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--lac); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--lac); color: var(--bone);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
em { font-style: normal; }
::selection { background: var(--gold); color: var(--lac); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r); }
.t-gold :focus-visible { outline-color: var(--lac); }
.t-gold .t-deep :focus-visible { outline-color: var(--gold); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--lac); padding: 10px 14px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type ---------- */
.h2, .hero-title, .mend-title, .h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.h2 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; max-width: 17ch; }
.h2.big { font-size: clamp(48px, 5.8vw, 92px); }
.h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.02; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--fg-2); max-width: 44ch; margin: 22px 0 0; }
.label { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.t-red .label { color: var(--fg-2); }
.sec { padding: clamp(96px, 12vw, 176px) 0; position: relative; }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head.center { text-align: center; }
.sec-head.center .h2 { margin: 0 auto; max-width: 20ch; }
.sec-head.center .lede { margin: 22px auto 0; }
/* gold hairline ornament with a kintsugi seam in the middle */
.orn { display: block; width: 168px; height: 12px; margin: 0 auto 28px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 12'%3E%3Cpath d='M0 6.5H66l5-4.5 5.5 8 5-6 5.5 4.5 4.5-3H168' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 12'%3E%3Cpath d='M0 6.5H66l5-4.5 5.5 8 5-6 5.5 4.5 4.5-3H168' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.split-line { overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--accent); --b-fg: var(--on-accent); --b-hov: var(--fg); --b-hfg: var(--bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: var(--r); background: var(--b-bg); color: var(--b-fg);
  font-weight: 650; font-size: 15.5px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transition: color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-hov); transform: translateY(101%); transition: transform 0.55s var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--b-hfg); }
.t-gold .btn { --b-hov: var(--red); --b-hfg: var(--bone); }
.btn svg { width: 20px; height: 20px; transition: transform 0.45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 60px; padding: 0 30px; font-size: 16.5px; }
.btn-line { --b-bg: transparent; --b-fg: var(--fg); --b-hov: var(--accent); --b-hfg: var(--on-accent); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn-line::after { display: none; }
.btn span { position: relative; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.t-red .link-arrow { border-color: var(--gold); }
.link-arrow::after { content: "→"; transition: transform 0.4s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad); color: var(--bone);
  --accent: var(--gold); --on-accent: var(--lac); --fg: var(--bone); --bg: var(--lac); --hair-2: rgba(224, 169, 59, 0.62);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease);
}
.nav.is-solid { background: rgba(21, 4, 8, 0.84); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(224, 169, 59, 0.24); }
.nav.on-gold { color: var(--lac); --accent: var(--lac); --on-accent: var(--gold); --fg: var(--lac); --bg: var(--gold); }
.nav.on-gold.is-solid { background: rgba(224, 169, 59, 0.94); box-shadow: 0 1px 0 rgba(42, 10, 16, 0.25); }
.nav.on-gold .btn { --b-hov: var(--red); --b-hfg: var(--bone); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-seam { stroke: var(--gold); }
.on-gold .brand-seam { stroke: var(--red); }
.brand-name { font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
.brand-name em { color: var(--gold); }
.on-gold .brand-name em { color: var(--red); }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.72; padding-left: 12px; margin-left: 2px; border-left: 1px solid currentColor; white-space: nowrap; }
.nav-links { display: flex; gap: 22px; font-size: 14.5px; font-weight: 500; }
.nav-links a, .nav-portal { position: relative; opacity: 0.86; transition: opacity 0.3s; }
.nav-links a::after, .nav-portal::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav-links a:hover, .nav-portal:hover { opacity: 1; }
.nav-links a:hover::after, .nav-portal:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-right { display: flex; align-items: center; gap: 20px; font-size: 14.5px; font-weight: 500; }
.nav-portal { white-space: nowrap; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { width: 7px; height: 7px; background: #58d08e; box-shadow: 0 0 0 0 rgba(88, 208, 142, 0.5); animation: pulse 2.2s infinite; transform: rotate(45deg); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(88, 208, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(88, 208, 142, 0); } }
.nav-burger { display: none; width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--hair-2); position: relative; }
.nav-burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.nav-burger span:first-child { top: 18px; } .nav-burger span:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--lac-deep); color: var(--bone); padding: 100px var(--pad) 40px; display: flex; flex-direction: column; gap: 6px; --accent: var(--gold); --on-accent: var(--lac); --fg: var(--bone); --bg: var(--lac-deep); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font-family: var(--display); font-size: 40px; line-height: 1.2; border-bottom: 1px solid rgba(224, 169, 59, 0.16); }
.menu .btn { margin-top: 24px; }
.menu .menu-phone { font-family: var(--sans) !important; font-size: 16px !important; margin-top: 12px; color: rgba(243, 233, 218, 0.78); border: 0 !important; }

/* ---------- story / hero ---------- */
.story { position: relative; }
.stage {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden;
  background:
    radial-gradient(55% 60% at 73% 52%, rgba(122, 22, 34, 0.55) 0%, rgba(122, 22, 34, 0) 72%),
    linear-gradient(112deg, rgba(255, 228, 206, 0) 26%, rgba(255, 228, 206, 0.05) 38%, rgba(255, 228, 206, 0) 50%),
    linear-gradient(180deg, #310c14 0%, #260910 58%, #170508 100%);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bowl-fallback { display: none; position: absolute; left: 73%; top: 53%; width: min(34vw, 560px); transform: translate(-50%, -50%); transition: left 0.9s var(--ease), top 0.9s var(--ease), width 0.9s var(--ease); }
.no-webgl .bowl-fallback { display: block; }
.stage.is-mend .bowl-fallback { left: 50%; top: 60%; width: min(38vw, 560px); }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders path { fill: none; stroke: var(--gold); stroke-width: 1; }
.leaders circle { fill: var(--gold); }
.leaders .ring { fill: none; stroke: var(--gold); stroke-width: 1; }

.hero { position: absolute; left: var(--pad); top: 50%; transform: translateY(-47%); width: min(760px, 52vw); z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.eyebrow-line { width: 40px; height: 1px; background: var(--gold); }
.hero-title { font-size: clamp(48px, 5vw, 86px); line-height: 1.02; letter-spacing: -0.015em; }
.hero-sub { font-size: clamp(17px, 1.3vw, 20px); color: var(--fg-2); max-width: 46ch; margin: 28px 0 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-note { margin: 14px 0 0; font-size: 14px; color: var(--fg-3); }
.hero-pick { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hair); max-width: 600px; }
.hero-pick-q { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--fg-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r); background: rgba(243, 233, 218, 0.05); box-shadow: inset 0 0 0 1px var(--hair); font-size: 14.5px; font-weight: 500; transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.chip:hover { background: var(--gold); color: var(--lac); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-2px); }
.chip-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.18); }
.hero-proof { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--fg-2); z-index: 2; }
.hero-proof b { font-family: var(--display); font-weight: 400; font-size: 23px; color: var(--gold); margin-right: 6px; }
.hero-proof li { display: flex; align-items: baseline; }
.scroll-cue { position: absolute; right: var(--pad); bottom: 30px; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); z-index: 2; }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--gold) 50%, transparent 50%) 0 0 / 100% 200%; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* seam under "whole" */
.seam-word { position: relative; display: inline-block; }
.seam-word svg { position: absolute; left: -2%; right: -2%; width: 104%; bottom: -0.04em; height: 0.16em; overflow: visible; }
.seam-word path { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* mend overlay */
.mend { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.mend > * { pointer-events: auto; }
.mend-head { position: absolute; left: 50%; top: clamp(92px, 12vh, 130px); transform: translateX(-50%); width: min(920px, 90vw); text-align: center; }
.mend-title { font-size: clamp(34px, 3.5vw, 56px); line-height: 1.04; }
.mend-list { position: absolute; left: var(--pad); right: var(--pad); top: 34vh; bottom: 16vh; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(230px, 310px) 1fr minmax(230px, 310px); grid-template-rows: repeat(4, 1fr); }
.mend-list li { grid-column: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding-left: 30px; opacity: 0.34; transition: opacity 0.5s var(--ease); }
.mend-list li:nth-child(n+5) { grid-column: 3; padding-left: 0; padding-right: 30px; text-align: right; }
.mend-list li:nth-child(1), .mend-list li:nth-child(5) { grid-row: 1; }
.mend-list li:nth-child(2), .mend-list li:nth-child(6) { grid-row: 2; }
.mend-list li:nth-child(3), .mend-list li:nth-child(7) { grid-row: 3; }
.mend-list li:nth-child(4), .mend-list li:nth-child(8) { grid-row: 4; }
.mend-list b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.65vw, 27px); line-height: 1.1; }
.mend-list span { font-size: 14.5px; color: var(--fg-2); margin-top: 4px; }
.mend-list li::before { content: ""; position: absolute; left: 1px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.6); transition: background 0.4s, box-shadow 0.4s; }
.mend-list li:nth-child(n+5)::before { left: auto; right: 1px; }
.mend-list li.is-on { opacity: 1; }
.mend-list li.is-on::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(224, 169, 59, 0.18); }
.mend-count { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.mend-count span { color: var(--gold); font-weight: 500; }
.mend-end { position: absolute; left: 50%; bottom: clamp(40px, 7vh, 80px); transform: translateX(-50%); text-align: center; width: min(640px, 90vw); visibility: hidden; }
.mend-whole { font-family: var(--display); font-size: clamp(56px, 6vw, 96px); line-height: 0.95; margin: 0; background: linear-gradient(100deg, #b98224 0%, var(--gold) 35%, #fff0c4 50%, var(--gold) 65%, #b98224 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.mend-end-sub { margin: 14px 0 18px; color: var(--fg-2); font-size: 18px; }

/* ---------- what we handle ---------- */
.search { position: relative; display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 22px; border-radius: var(--r); background: var(--panel) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair); max-width: 760px; margin-bottom: 28px; transition: box-shadow 0.4s var(--ease); }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(224, 169, 59, 0.14); }
.search svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 18px; color: var(--fg); }
.search input::placeholder { color: var(--fg-3); }
.search-hint { font-size: 13.5px; color: var(--gold); white-space: nowrap; font-weight: 600; }
.cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.case {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 196px; padding: 22px 20px 20px; text-align: left;
  border-radius: var(--r); background: var(--panel) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease), opacity 0.45s;
}
.case:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--gold), 0 28px 40px -26px rgba(0, 0, 0, 0.8); }
.case svg { width: 44px; height: 44px; }
.case svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.case svg .g { stroke: var(--gold); }
.case b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.1; }
.case small { display: block; color: var(--fg-3); font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.case .case-go { position: absolute; right: 16px; top: 18px; width: 30px; height: 30px; box-shadow: inset 0 0 0 1px var(--hair); display: grid; place-items: center; font-size: 14px; transition: transform 0.45s var(--ease), background 0.45s, color 0.45s; }
.case:hover .case-go { transform: rotate(-45deg); background: var(--gold); color: var(--lac); box-shadow: none; }
.case.is-match, .case.is-open { background: var(--gold) linear-gradient(158deg, rgba(255, 250, 235, 0.3), rgba(255, 250, 235, 0) 50%); color: var(--lac); box-shadow: none; }
.case.is-match small, .case.is-open small { color: rgba(42, 10, 16, 0.78); }
.case.is-match svg .g, .case.is-open svg .g { stroke: var(--red); }
.case.is-match .case-go, .case.is-open .case-go { background: var(--lac); color: var(--gold); box-shadow: none; }
.cases.is-searching .case:not(.is-match) { opacity: 0.4; }
.case-other { background: transparent; box-shadow: none; outline: 1px dashed var(--hair-2); outline-offset: -1px; }

.case-panel { position: relative; margin-top: 10px; border-radius: var(--r); background: var(--lac) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair-2); overflow: hidden; }
.cp-in { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 0; }
.cp-col { padding: clamp(28px, 3vw, 44px); }
.cp-col + .cp-col { border-left: 1px solid var(--hair); }
.cp-yes { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cp-yes::before { content: ""; width: 18px; height: 18px; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%232a0a10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cp-title { font-family: var(--display); font-size: clamp(36px, 3.4vw, 54px); line-height: 1.02; margin: 16px 0 14px; }
.cp-lede { color: var(--fg-2); margin: 0; max-width: 40ch; }
.cp-h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; }
.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cp-list li { position: relative; padding-left: 22px; }
.cp-list li::before { content: ""; position: absolute; left: 1px; top: 0.55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.cp-facts { display: grid; gap: 18px; margin: 0; }
.cp-facts div { border-top: 1px solid var(--hair); padding-top: 14px; }
.cp-facts dt { font-size: 13px; color: var(--fg-3); }
.cp-facts dd { margin: 2px 0 0; font-size: 17px; }
.cp-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.cp-who img { width: 48px; height: 48px; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--hair-2); }
.cp-who small { display: block; color: var(--fg-3); font-size: 13px; }
.cp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.cp-close { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; box-shadow: inset 0 0 0 1px var(--hair); display: grid; place-items: center; color: var(--fg); transition: transform 0.4s var(--ease), background 0.3s; }
.cp-close:hover { transform: rotate(90deg); background: rgba(224, 169, 59, 0.12); }

@media (min-width: 1101px) {
  .handle .wrap { display: grid; grid-template-columns: 1fr minmax(420px, 620px); column-gap: 60px; }
  .handle .sec-head { grid-column: 1; }
  .handle .search { grid-column: 2; align-self: end; margin-bottom: clamp(40px, 5vw, 72px); max-width: none; }
  .handle .cases, .handle .case-panel { grid-column: 1 / -1; }
}

/* ---------- fees (lacquer red band) ---------- */
.fees-grid { display: grid; grid-template-columns: 1fr minmax(380px, 520px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.fee-facts { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 0; }
.fee-facts li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--fg-2); }
.fee-facts b { color: var(--fg); font-weight: 650; }
.ff-n { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); padding-top: 4px; }
.fee-demo { position: sticky; top: 110px; border-radius: var(--r); background: var(--lac-deep) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair-2), 0 50px 80px -40px rgba(0, 0, 0, 0.6); padding: 28px; overflow: hidden; }
.fd-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 1px var(--hair); padding: 4px; margin-bottom: 28px; }
.fd-toggle button { position: relative; z-index: 1; height: 42px; font-size: 15px; font-weight: 600; color: var(--fg-2); transition: color 0.4s var(--ease); }
.fd-toggle button[aria-selected="true"] { color: var(--lac); }
.fd-pill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); background: var(--gold); transition: transform 0.55s var(--ease), background 0.4s; }
.fee-demo.is-lose .fd-pill { transform: translateX(100%); background: var(--bone); }
.fd-label { margin: 0; font-size: 14px; color: var(--fg-2); }
.fd-amount { margin: 4px 0 18px; font-family: var(--display); font-size: clamp(56px, 5.2vw, 82px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.fd-cur { color: var(--gold); margin-right: 2px; }
.fd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: grab; }
.fd-range:active { cursor: grabbing; }
.fd-range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--gold) var(--v, 38%), rgba(243, 233, 218, 0.16) var(--v, 38%)); }
.fd-range::-moz-range-track { height: 3px; background: rgba(243, 233, 218, 0.16); }
.fd-range::-moz-range-progress { height: 3px; background: var(--gold); }
.fd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 5px rgba(224, 169, 59, 0.22); transition: box-shadow 0.3s; }
.fd-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 0; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 5px rgba(224, 169, 59, 0.22); }
.fd-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(224, 169, 59, 0.22); }
.fd-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.fd-bar { position: relative; display: flex; height: 64px; gap: 3px; margin: 26px 0 18px; }
.fd-seg { display: block; height: 100%; transition: flex-basis 0.7s var(--ease), background 0.5s, opacity 0.5s; flex: 0 0 auto; }
.fd-seg.you { background: linear-gradient(180deg, #f5cf7c, var(--gold) 55%, #c28d27); }
.fd-seg.fee { background: rgba(243, 233, 218, 0.22); }
.fd-seg.cost { background: repeating-linear-gradient(135deg, rgba(243, 233, 218, 0.18) 0 4px, rgba(243, 233, 218, 0.06) 4px 8px); }
.fd-rows { margin: 0; display: grid; gap: 0; }
.fd-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); transition: opacity 0.5s; }
.fd-row dt { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 15px; }
.fd-row dt i { width: 9px; height: 9px; transform: rotate(45deg); }
.fd-row.you dt i { background: var(--gold); } .fd-row.fee dt i { background: rgba(243, 233, 218, 0.45); } .fd-row.cost dt i { background: rgba(243, 233, 218, 0.18); box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.4); }
.fd-row dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; }
.fd-row.you dd { color: var(--gold); font-size: 21px; }
.fd-lose { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 17px; color: var(--fg); transition: max-height 0.6s var(--ease), opacity 0.4s, margin 0.6s var(--ease); }
.fd-lose b { font-family: var(--display); font-weight: 400; font-size: 34px; display: block; color: var(--gold); line-height: 1.1; }
.fee-demo.is-lose .fd-lose { max-height: 160px; opacity: 1; margin: 6px 0 4px; }
.fee-demo.is-lose .fd-row { opacity: 0.35; }
.fd-bar::after { content: "$0 owed"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 26px; color: var(--bone); box-shadow: inset 0 0 0 1px var(--hair-2); background: repeating-linear-gradient(135deg, rgba(224, 169, 59, 0.08) 0 8px, transparent 8px 16px); opacity: 0; transform: scale(0.96); transition: opacity 0.5s var(--ease) 0.25s, transform 0.6s var(--ease) 0.25s; }
.fee-demo.is-lose .fd-bar::after { opacity: 1; transform: none; }
.fee-demo.is-lose .fd-amount { opacity: 0.5; }
.fd-note { margin: 16px 0 0; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }
.faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(56px, 7vw, 100px); }
.faq details { background: rgba(21, 4, 8, 0.22); box-shadow: inset 0 0 0 1px var(--hair); padding: 20px 22px; transition: background 0.3s; }
.faq details[open] { background: rgba(21, 4, 8, 0.36); }
.faq summary { list-style: none; cursor: pointer; font-weight: 650; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 26px; line-height: 0.8; color: var(--gold); transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--fg-2); margin: 12px 0 0; font-size: 15.5px; }

/* ---------- process ---------- */
.proc-grid { display: grid; grid-template-columns: 1fr minmax(360px, 480px); gap: clamp(40px, 7vw, 120px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 30px 0; border-top: 1px solid var(--hair); opacity: 0.5; transition: opacity 0.6s var(--ease); position: relative; z-index: 1; }
.step:last-of-type { border-bottom: 1px solid var(--hair); }
.step.is-on { opacity: 1; }
.step-n { width: 46px; height: 46px; display: grid; place-items: center; font-family: var(--display); font-size: 24px; background: var(--lac); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background 0.5s, color 0.5s, box-shadow 0.5s; }
.step.is-on .step-n { background: var(--gold); color: var(--lac); box-shadow: 0 0 0 6px var(--lac), 0 0 0 7px rgba(224, 169, 59, 0.5); }
.step h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.06; margin: 4px 0 8px; }
.step p { margin: 0; color: var(--fg-2); max-width: 46ch; }
.tag { display: inline-flex; margin-top: 14px; height: 28px; align-items: center; padding: 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--hair); color: var(--gold); }
.steps-seam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.steps-seam path { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thread-wrap { position: sticky; top: 104px; }
.thread { background: var(--lac-deep) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair-2), 0 60px 90px -50px rgba(0, 0, 0, 0.7); overflow: hidden; }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.thread-head b { display: block; font-size: 15px; }
.thread-head small { color: var(--fg-3); font-size: 12.5px; }
.th-dot { width: 36px; height: 36px; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='9' y='9' width='22' height='22' fill='none' stroke='%232a0a10' stroke-width='1.6'/%3E%3Cpath d='M13.5 13.5l4.2 4.6-1.5 3.2 4.8 2 .8 3.3 3.7 3.4' fill='none' stroke='%239e1c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.th-day { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.thread-body { height: 520px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 60px); mask: linear-gradient(transparent, #000 60px); }
.msg { max-width: 86%; display: none; }
.msg.is-in { display: block; }
.msg p { margin: 0; padding: 12px 15px; font-size: 15px; line-height: 1.42; }
.msg time { display: block; font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 5px; padding: 0 2px; }
.msg.me { align-self: flex-end; text-align: right; }
.msg.me p { background: var(--gold); color: var(--lac); text-align: left; }
.msg.sys p { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); font-size: 14px; }
.msg.them p { background: #3a111b; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.18); }
.msg .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin: 0 0 6px 2px; }
.msg .who img { width: 24px; height: 24px; object-fit: cover; object-position: 50% 20%; }
.msg.card { display: none; align-items: center; gap: 12px; padding: 12px 14px; background: #25080f; box-shadow: inset 0 0 0 1px var(--hair); max-width: 100%; width: 100%; }
.msg.card.is-in { display: flex; }
.card-ic { width: 36px; height: 36px; background: rgba(224, 169, 59, 0.14); color: var(--gold); display: grid; place-items: center; font-size: 16px; flex: none; }
.msg.card b { display: block; font-size: 14.5px; }
.msg.card small { color: var(--fg-3); font-size: 12.5px; }
.ok { margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px var(--hair-2); padding: 5px 9px; }
.ok.pend { color: var(--lac); background: var(--gold); box-shadow: none; }

/* ---------- portal (gold band) ---------- */
.portal { overflow: hidden; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.pfeat { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.pfeat button { width: 100%; text-align: left; padding: 18px 22px; display: grid; gap: 2px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.pfeat button b { font-weight: 650; font-size: 18px; }
.pfeat button span { color: var(--fg-3); font-size: 15px; }
.pfeat button:hover { background: rgba(42, 10, 16, 0.07); }
.pfeat button[aria-selected="true"] { background: var(--lac-deep) var(--sheen); color: var(--bone); box-shadow: 0 24px 40px -26px rgba(42, 10, 16, 0.8); }
.pfeat button[aria-selected="true"] span { color: rgba(243, 233, 218, 0.74); }
.pfeat button::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.pfeat button[aria-selected="true"]::after { animation: pbar var(--dur, 4.5s) linear forwards; }
.portal.is-user .pfeat button::after { animation: none; }
@keyframes pbar { to { transform: scaleX(1); } }
.portal-secure { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; font-size: 14px; color: var(--fg-2); max-width: 520px; }
.portal-secure svg { width: 20px; height: 20px; flex: none; color: var(--red); }
.phone-wrap { position: relative; display: grid; place-items: center; perspective: 1400px; }
.phone { position: relative; width: 340px; height: 690px; border-radius: 50px; background: #0d0205; padding: 12px; box-shadow: 0 0 0 1px rgba(224, 169, 59, 0.55), 0 80px 120px -50px rgba(42, 10, 16, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.06); z-index: 1; transform-style: preserve-3d; color: var(--bone); }
.phone::before { content: ""; position: absolute; inset: 12px; border-radius: 38px; background: #1c060b; }
.ph-notch { position: absolute; left: 50%; top: 22px; width: 100px; height: 28px; margin-left: -50px; border-radius: 20px; background: #0d0205; z-index: 3; }
.ph-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 0; height: 50px; font-size: 13px; font-weight: 600; }
.ph-brand { opacity: 0; }
.ph-ic { font-size: 7px; letter-spacing: 1px; }
.ph-screens { position: relative; z-index: 1; height: calc(100% - 50px - 70px); overflow: hidden; }
.ph-screen { position: absolute; inset: 0; padding: 22px 22px 0; opacity: 0; visibility: hidden; }
.ph-screen.is-on { opacity: 1; visibility: visible; }
.ph-h { font-family: var(--display); font-size: 33px; line-height: 1.02; margin: 6px 0 4px; }
.ph-s { margin: 0 0 20px; font-size: 13px; color: rgba(243, 233, 218, 0.66); }
.ph-stage { background: var(--gold) linear-gradient(158deg, rgba(255, 250, 235, 0.3), rgba(255, 250, 235, 0) 55%); color: var(--lac); padding: 16px 18px; }
.ph-stage span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42, 10, 16, 0.78); }
.ph-stage b { display: block; font-weight: 650; font-size: 18px; margin: 4px 0 2px; }
.ph-stage small { font-size: 12.5px; color: rgba(42, 10, 16, 0.78); }
.ph-prog { height: 3px; background: rgba(42, 10, 16, 0.2); margin-top: 14px; overflow: hidden; }
.ph-prog i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--lac); }
.ph-steps { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; font-size: 14px; }
.ph-steps li { position: relative; padding: 7px 0 7px 26px; color: rgba(243, 233, 218, 0.62); }
.ph-steps li::before { content: ""; position: absolute; left: 1px; top: 50%; width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.4); background: #1c060b; z-index: 1; }
.ph-steps li::after { content: ""; position: absolute; left: 5.5px; top: -50%; height: 100%; width: 1px; background: rgba(224, 169, 59, 0.3); }
.ph-steps li:first-child::after { display: none; }
.ph-steps li.done { color: var(--bone); }
.ph-steps li.done::before { background: var(--bone); box-shadow: none; }
.ph-steps li.now { color: var(--gold); font-weight: 650; }
.ph-steps li.now::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(224, 169, 59, 0.22); }
.ph-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ph-docs li { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px; background: #2a0a10; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.2); font-size: 14px; }
.ph-docs li b { display: block; font-weight: 600; }
.ph-docs li small { color: rgba(243, 233, 218, 0.66); font-size: 12px; }
.ph-chk { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.45); flex: none; transition: background 0.4s, box-shadow 0.4s; }
.ph-docs li.done .ph-chk { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.8' fill='none' stroke='%232a0a10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; box-shadow: none; }
.ph-docs li.up { box-shadow: inset 0 0 0 1px var(--gold); cursor: pointer; }
.ph-ring { position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--u, 0) * 1turn), rgba(243, 233, 218, 0.1) 0); -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); opacity: 0; transition: opacity 0.3s; }
.ph-docs li.is-loading .ph-ring { opacity: 1; }
.ph-chat { display: flex; flex-direction: column; gap: 8px; }
.ph-chat .b { margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.4; max-width: 86%; }
.ph-chat .me { align-self: flex-end; background: var(--gold); color: var(--lac); }
.ph-chat .them { background: #3a111b; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.18); }
.ph-chat .typing { display: flex; gap: 4px; width: fit-content; padding: 14px 16px; }
.ph-chat .typing i { width: 6px; height: 6px; background: rgba(243, 233, 218, 0.6); animation: typing 1.2s infinite; }
.ph-chat .typing i:nth-child(2) { animation-delay: 0.15s; } .ph-chat .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.ph-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ph-days span { display: grid; justify-items: center; padding: 10px 0; background: #2a0a10; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.2); font-size: 12px; color: rgba(243, 233, 218, 0.66); }
.ph-days b { font-family: var(--mono); font-size: 19px; color: var(--bone); font-weight: 500; }
.ph-days .on { background: var(--gold); color: rgba(42, 10, 16, 0.78); box-shadow: none; }
.ph-days .on b { color: var(--lac); }
.ph-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.ph-slots button { height: 40px; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.3); font-family: var(--mono); font-size: 13.5px; color: var(--bone); }
.ph-slots .on { background: var(--gold); color: var(--lac); box-shadow: none; font-weight: 500; }
.ph-kind { display: flex; gap: 6px; margin-top: 12px; }
.ph-kind span { flex: 1; text-align: center; padding: 9px 0; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.3); cursor: pointer; }
.ph-kind .on { background: var(--bone); color: var(--lac); box-shadow: none; font-weight: 600; }
.ph-conf { margin: 18px 0 0; padding: 12px 14px; background: rgba(224, 169, 59, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.3); color: var(--gold); font-size: 13.5px; font-weight: 600; }
.ph-tabs { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 70px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-top: 1px solid rgba(224, 169, 59, 0.22); border-radius: 0 0 38px 38px; background: #1c060b; font-size: 11.5px; color: rgba(243, 233, 218, 0.62); text-align: center; padding-bottom: 10px; }
.ph-tabs span { position: relative; padding-top: 18px; transition: color 0.3s; cursor: pointer; }
.ph-tabs span::before { content: ""; position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin-left: -8px; box-shadow: inset 0 0 0 1px currentColor; }
.ph-tabs span.is-on { color: var(--gold); font-weight: 650; }
.ph-tabs span.is-on::before { background: var(--gold); box-shadow: none; }
.phone-glow { position: absolute; width: 560px; height: 560px; background: radial-gradient(circle, rgba(158, 28, 28, 0.42), rgba(158, 28, 28, 0) 64%); filter: blur(8px); }

/* ---------- results ---------- */
.results { overflow: hidden; }
.rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 4px 0 8px; outline: none; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; }
.rail-track { display: flex; gap: 12px; padding: 0 var(--pad); width: max-content; }
.rcard { position: relative; width: clamp(300px, 30vw, 420px); min-height: 500px; background: var(--panel) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair); padding: 26px; display: flex; flex-direction: column; user-select: none; transition: transform 0.6s var(--ease), box-shadow 0.4s; }
.rcard:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.rcard::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: var(--gold); transform: scaleX(0.12); transform-origin: left; transition: transform 0.7s var(--ease); }
.rcard:hover::before { transform: scaleX(1); }
.rc-type { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.rc-amt { font-family: var(--display); font-size: clamp(54px, 4.6vw, 74px); line-height: 1; margin: 34px 0 6px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.rc-kind { font-size: 14px; font-weight: 600; color: var(--gold); }
.rc-story { color: var(--fg-2); margin: 22px 0 0; font-size: 15.5px; }
.rc-offer { margin-top: 14px; font-size: 14px; color: var(--fg-3); }
.rc-offer s { color: var(--fg); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.rc-foot { margin-top: auto; padding-top: 22px; }
.rc-bar { display: flex; height: 6px; gap: 2px; overflow: hidden; margin-bottom: 12px; }
.rc-bar i { display: block; height: 100%; }
.rc-bar i:nth-child(1) { background: var(--gold); } .rc-bar i:nth-child(2) { background: rgba(243, 233, 218, 0.32); } .rc-bar i:nth-child(3) { background: rgba(243, 233, 218, 0.14); }
.rc-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-2); padding: 7px 0; border-top: 1px solid var(--line); }
.rc-row b { font-family: var(--mono); color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.rc-row.home b { color: var(--gold); }
.rcard.loss { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.rcard.loss .rc-amt { color: var(--gold); }
.rail-foot { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; margin-top: 34px; }
.rail-prog { height: 2px; background: var(--line); overflow: hidden; }
.rail-prog i { display: block; height: 100%; width: 30%; background: var(--gold); transform-origin: left; }
.disclaim { margin: 0; font-size: 13px; color: var(--fg-3); max-width: 80ch; }

/* ---------- team ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.person { position: relative; }
.p-photo { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: #3a0e17; }
.p-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.45); pointer-events: none; }
.p-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.04); transition: transform 1.1s var(--ease), filter 0.6s; }
.person:hover .p-photo img { transform: scale(1.09); }
.p-langs { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.p-langs span { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; background: rgba(21, 4, 8, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.35); font-size: 12px; font-weight: 600; color: var(--bone); }
.p-book { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 18px; background: var(--gold); color: var(--lac); font-size: 14.5px; font-weight: 650; transform: translateY(calc(100% + 20px)); transition: transform 0.6s var(--ease); }
.p-book::after { content: "→"; }
.person:hover .p-book, .person:focus-within .p-book { transform: none; }
.p-meta { padding: 18px 2px 0; }
.p-name { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.04; margin: 0; }
.p-role { font-size: 14px; color: var(--fg-3); margin: 6px 0 0; }
.p-handles { margin: 12px 0 0; font-size: 15px; color: var(--fg-2); padding-top: 12px; border-top: 1px solid var(--hair); }
.p-handles b { font-weight: 650; color: var(--fg); }

/* ---------- offices ---------- */
.off-grid { display: grid; grid-template-columns: 1fr minmax(360px, 560px); gap: clamp(40px, 6vw, 100px); align-items: center; }
.offlist { margin-top: 36px; display: grid; gap: 6px; max-width: 560px; }
.office { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 20px; text-align: left; width: 100%; box-shadow: inset 0 0 0 1px transparent; transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.office:hover, .office.is-on { background: var(--panel) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair-2); }
.office b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.08; }
.office .o-st { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); align-self: center; }
.office small { grid-column: 1 / -1; color: var(--fg-3); font-size: 14px; }
.office .o-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.office .o-tags span { font-size: 12px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg-2); }
.map-wrap { position: relative; }
.map { width: 100%; height: auto; overflow: visible; }
.map .frame { fill: none; stroke: rgba(224, 169, 59, 0.45); stroke-width: 1.5; }
.map .sea-bg { fill: #1c060b; }
.map .hatch-line { stroke: rgba(224, 169, 59, 0.12); }
.map .other-land { fill: #25080f; stroke: rgba(243, 233, 218, 0.1); stroke-width: 1; }
.map .land { fill: #3a111b; stroke: rgba(224, 169, 59, 0.5); stroke-width: 1.2; }
.map .land.nj { fill: #4a1622; }
.map .river { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.map .river-glow { fill: none; stroke: rgba(224, 169, 59, 0.22); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.map .st { font-family: var(--display); font-size: 62px; fill: rgba(243, 233, 218, 0.62); }
.map .st-sm { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: 0.22em; fill: rgba(243, 233, 218, 0.42); }
.map .rv { font-family: var(--display); font-size: 25px; fill: var(--gold); }
.map .pin circle.pulse { fill: rgba(224, 169, 59, 0.3); transform-box: fill-box; transform-origin: center; }
.map .pin circle.core { fill: var(--bone); stroke: var(--lac-deep); stroke-width: 4; }
.map .pin text { font-family: var(--sans); font-size: 24px; font-weight: 650; fill: var(--bone); }
.map .pin .cap { font-size: 17px; font-weight: 500; fill: rgba(243, 233, 218, 0.66); }
.map .pin { cursor: pointer; }
.map .pin.is-on circle.core { fill: var(--gold); }
.map .radius { fill: rgba(224, 169, 59, 0.06); stroke: rgba(224, 169, 59, 0.5); stroke-width: 1.5; stroke-dasharray: 4 6; transform-box: fill-box; transform-origin: center; }
.access { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; margin-top: clamp(56px, 7vw, 100px); }
.visit { grid-row: 1 / span 2; margin: 0; position: relative; overflow: hidden; min-height: 460px; background: var(--panel); }
.visit::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.45); pointer-events: none; }
.visit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 30%; }
.visit figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 18px 20px; background: rgba(21, 4, 8, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.3); font-size: 15px; color: rgba(243, 233, 218, 0.8); }
.visit figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--bone); line-height: 1.08; margin-bottom: 4px; }
.access .acc-col:last-child { grid-column: 2 / span 2; }
.acc-col { background: var(--panel) var(--sheen); box-shadow: inset 0 0 0 1px var(--hair); padding: 26px; }
.acc-col h3 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0 0 16px; line-height: 1.04; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ways li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ways span { color: var(--fg-3); text-align: right; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.langs span { padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; }
.acc-note { margin: 16px 0 0; color: var(--fg-2); font-size: 15px; }
.acc-list { list-style: none; margin: 0; padding: 0; }
.acc-list li { padding: 10px 0 10px 24px; border-top: 1px solid var(--line); font-size: 15px; position: relative; }
.acc-list li::before { content: ""; position: absolute; left: 1px; top: 18px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }

/* ---------- referrals (red band) ---------- */
.refer { padding: clamp(56px, 6vw, 84px) 0; }
.refer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: clamp(24px, 3vw, 48px); align-items: end; }
.refer-col b { display: block; margin-bottom: 6px; font-weight: 650; }
.refer-col p { margin: 0; color: var(--fg-2); font-size: 15px; }
.refer-cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ---------- assess (gold band) ---------- */
.assess { overflow: hidden; }
.assess-grid { display: grid; grid-template-columns: 1fr minmax(380px, 560px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.deadline { display: grid; grid-template-columns: 120px 1fr; gap: 8px 24px; align-items: center; margin-top: 44px; padding: 24px; background-image: var(--sheen); box-shadow: 0 30px 60px -36px rgba(42, 10, 16, 0.8); max-width: 540px; position: relative; }
.deadline svg { width: 120px; height: 120px; transform: rotate(-90deg); grid-row: span 2; }
.dl-track { fill: none; stroke: rgba(243, 233, 218, 0.12); stroke-width: 7; }
.dl-fill { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: butt; stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease), stroke 0.4s; }
.deadline.is-warn .dl-fill { stroke: var(--warn); }
.dl-txt { position: absolute; left: 24px; top: 24px; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; }
.dl-txt b { font-family: var(--display); font-weight: 400; font-size: 29px; line-height: 1; }
.dl-txt small { font-size: 11px; color: var(--fg-3); margin-top: 4px; max-width: 84px; line-height: 1.2; }
.dl-note { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--fg-2); font-size: 15px; }
.dl-note b { color: var(--fg); font-weight: 650; }
.assess-call { margin: 28px 0 0; color: var(--fg-2); }
.assess-call a { color: var(--fg); font-weight: 650; border-bottom: 1px solid currentColor; }
.form { position: relative; background-image: var(--sheen); padding: clamp(24px, 3vw, 36px); box-shadow: 0 60px 100px -50px rgba(42, 10, 16, 0.85), inset 0 0 0 1px rgba(224, 169, 59, 0.35); min-height: 560px; display: flex; flex-direction: column; color-scheme: dark; }
.form-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.form-step { font-family: var(--mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.06em; }
.form-prog { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.form-prog i { display: block; height: 100%; width: 25%; background: var(--gold); transition: width 0.7s var(--ease); }
.fs { display: none; }
.fs.is-on { display: block; }
.fq { font-family: var(--display); font-size: clamp(32px, 2.8vw, 42px); line-height: 1.04; margin: 0 0 22px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opts-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.opts label, .seg label { position: relative; cursor: pointer; }
.opts input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.opts span { display: flex; align-items: center; min-height: 64px; padding: 12px 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; line-height: 1.25; font-weight: 600; transition: background 0.3s var(--ease), color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.opts label:hover span { box-shadow: inset 0 0 0 1px var(--gold); }
.opts input:checked + span { background: var(--gold); color: var(--lac); box-shadow: none; transform: scale(0.98); }
.opts input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.when, .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.field { display: grid; gap: 6px; font-size: 13.5px; color: var(--fg-2); font-weight: 600; }
.field input, .field select, .field textarea { height: 54px; border-radius: var(--r); border: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); padding: 0 16px; font-size: 16.5px; color: var(--fg); outline: none; transition: box-shadow 0.3s; font-weight: 400; }
.field select option { background: #25080f; color: var(--bone); }
.field textarea { height: auto; padding: 14px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(224, 169, 59, 0.16); }
.field.is-bad input { box-shadow: inset 0 0 0 1px var(--warn); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); margin: 1px 0 0; flex: none; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); height: 54px; }
.seg span { display: grid; place-items: center; height: 100%; font-size: 15px; font-weight: 600; color: var(--fg-2); transition: background 0.3s, color 0.3s; }
.seg input:checked + span { background: var(--gold); color: var(--lac); }
.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 26px; }
.btn-text { font-weight: 600; color: var(--fg-3); padding: 10px 4px; visibility: hidden; }
.btn-text.is-vis { visibility: visible; }
.btn-text:hover { color: var(--fg); }
.form-legal { font-size: 12px; color: var(--fg-3); margin: 16px 0 0; }
.shake { animation: shake 0.45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fs-done .stamp { width: 72px; height: 72px; color: var(--gold); margin-bottom: 18px; }
.fs-done .stamp path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.fs-done.is-on .stamp path { animation: draw 0.7s 0.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-lead { font-size: 18px; color: var(--fg-2); margin: -8px 0 22px; }
.done-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.done-steps li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--fg-2); }
.done-steps b { color: var(--gold); font-weight: 650; }
.form.is-done .form-nav, .form.is-done .form-top { display: none; }

/* ---------- footer ---------- */
.foot { padding: 80px 0 40px; box-shadow: inset 0 1px 0 rgba(224, 169, 59, 0.25); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.brand-lg .brand-name { font-size: 34px; }
.brand-lg .brand-mark { width: 42px; height: 42px; }
.foot-brand p { color: var(--fg-2); max-width: 36ch; margin: 18px 0 0; }
.foot-brand p em { font-family: var(--display); font-size: 1.15em; color: var(--gold); }
.foot-col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot-col b { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.foot-col a, .foot-col span { color: var(--fg); opacity: 0.84; }
.foot-col a:hover { opacity: 1; color: var(--gold); }
.foot-mark { position: relative; margin: 72px 0 0; padding: 0 var(--pad); overflow: hidden; line-height: 0.82; }
.foot-mark span { display: block; font-family: var(--display); font-size: clamp(80px, 15.6vw, 280px); letter-spacing: -0.02em; white-space: nowrap; color: rgba(224, 169, 59, 0.1); text-align: center; }
.foot-mark svg { position: absolute; left: 0; top: 18%; width: 100%; height: 60%; overflow: visible; }
.foot-mark path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.85; }
.foot-legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(224, 169, 59, 0.2); display: grid; gap: 8px; font-size: 12.5px; color: var(--fg-3); }
.foot-legal p { margin: 0; }

/* ---------- grain + mobile action bar ---------- */
.grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: 0.06; background: url("assets/grain.png") 0 0 / 200px; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.still .grain { display: none; }
.mbar { display: none; }
@media (max-width: 820px) {
  .mbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; display: flex; gap: 6px; padding: 6px; background: rgba(21, 4, 8, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.4), 0 20px 40px -16px rgba(0, 0, 0, 0.7); color: var(--bone); --accent: var(--gold); --on-accent: var(--lac); --fg: var(--bone); --bg: var(--lac-deep); transform: translateY(140%); transition: transform 0.6s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { flex: 1; height: 48px; font-size: 15px; padding: 0 16px; }
  .mbar-call { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px; box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.5); font-weight: 600; }
  .mbar-call svg { width: 20px; height: 20px; }
}

/* ---------- reveal helpers ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.still [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- responsive ---------- */
.nav-links a { white-space: nowrap; }
@media (max-width: 1520px) {
  .brand-sub { display: none; }
}
@media (max-width: 1360px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .brand-sub { display: none; }
}
@media (max-width: 1240px) {
  .cases { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 820px) and (min-width: 821px) {
  .hero-proof { display: none; }
  .hero-pick { margin-top: 24px; padding-top: 16px; }
  .hero-cta { margin-top: 26px; }
  .eyebrow { margin-bottom: 18px; }
}
@media (max-width: 1100px) {
  .nav-portal { display: none; }
  .fees-grid, .proc-grid, .portal-grid, .off-grid, .assess-grid { grid-template-columns: 1fr; }
  .fee-demo, .thread-wrap { position: relative; top: 0; }
  .faq { grid-template-columns: 1fr; }
  .cp-in { grid-template-columns: 1fr 1fr; }
  .cp-in .cp-col:first-child { grid-column: 1 / -1; }
  .cp-col + .cp-col { border-left: 0; border-top: 1px solid var(--hair); }
  .cp-col:nth-child(3) { border-left: 1px solid var(--hair); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .refer-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .access { grid-template-columns: 1fr; }
  .visit { grid-row: auto; min-height: 380px; }
  .access .acc-col:last-child { grid-column: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .map-wrap { max-width: 560px; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .nav { height: 64px; }
  .brand-sub, .nav-phone, .nav-right > .btn { display: none; }
  .nav-burger { display: block; }
  .brand-name { font-size: 22px; }
  .stage { min-height: 0; }
  .hero { left: var(--pad); right: var(--pad); width: auto; top: 88px; transform: none; }
  .hero-title { font-size: clamp(44px, 12.2vw, 62px); }
  .hero-sub { margin-top: 16px; font-size: 16px; }
  .hero-cta { margin-top: 20px; }
  .hero-cta .btn-lg { height: 54px; padding: 0 22px; font-size: 16px; flex: 1 1 auto; }
  .hero-note, .hero-pick { display: none; }
  .bowl-fallback { left: 50%; top: 80%; width: 62vw; }
  .stage.is-mend .bowl-fallback { top: 50%; width: 64vw; }
  .hero-proof { display: none; }
  .scroll-cue { display: none; }
  .eyebrow { margin-bottom: 16px; font-size: 10.5px; letter-spacing: 0.14em; gap: 10px; }
  .eyebrow-line { width: 20px; }
  .mend-head { top: 80px; }
  .mend-title { font-size: clamp(28px, 7.8vw, 38px); }
  .mend-list { top: auto; bottom: 64px; left: var(--pad); right: var(--pad); display: block; height: 96px; }
  .mend-list li, .mend-list li:nth-child(n+5) { position: absolute; inset: 0; padding: 18px 20px 18px 46px; text-align: left; background: rgba(21, 4, 8, 0.92); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); transform: translateY(10px); }
  .mend-list li::before, .mend-list li:nth-child(n+5)::before { left: 19px; right: auto; }
  .mend-list li.is-cur { opacity: 1; visibility: visible; transform: none; }
  .mend-count { bottom: 26px; }
  .mend-end { bottom: 40px; }
  .cases { grid-template-columns: 1fr 1fr; gap: 8px; }
  .case { min-height: 150px; padding: 16px; }
  .case b { font-size: 19px; }
  .case small { display: none; }
  .case svg { width: 36px; height: 36px; }
  .search { height: 58px; padding: 0 18px; }
  .search input { font-size: 16px; }
  .search-hint { display: none; }
  .cp-in { grid-template-columns: 1fr; }
  .cp-col:nth-child(3) { border-left: 0; }
  .fee-demo { padding: 20px; }
  .fd-bar { height: 48px; }
  .step { grid-template-columns: 52px 1fr; gap: 12px; padding: 22px 0; }
  .step-n { width: 40px; height: 40px; font-size: 21px; }
  .thread-body { height: 440px; }
  .phone { width: 300px; height: 610px; border-radius: 44px; }
  .phone::before { border-radius: 34px; }
  .ph-tabs { border-radius: 0 0 34px 34px; }
  .people { grid-template-columns: 1fr; }
  .p-book { transform: none; position: static; margin-top: -64px; margin-inline: 14px; position: relative; }
  .rail-foot { grid-template-columns: 1fr; gap: 16px; }
  .refer-grid { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr 1fr; }
  .opts-3 { grid-template-columns: 1fr; }
  .when, .two { grid-template-columns: 1fr; }
  .deadline { grid-template-columns: 96px 1fr; padding: 18px; }
  .deadline svg { width: 96px; height: 96px; }
  .dl-txt { left: 18px; top: 18px; width: 96px; height: 96px; }
  .dl-txt b { font-size: 23px; }
  .dl-txt small { font-size: 9px; max-width: 58px; margin-inline: auto; }
  .foot-grid { grid-template-columns: 1fr; }
  .h2 { font-size: clamp(38px, 10vw, 52px); }
  .sec-head.center .h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* 0s, not 0.01ms: with the default transition-property "all", a tiny duration still delays the pin spacer's padding while ScrollTrigger measures */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}