/* =====================================================================================================
   The Marketing Cartel · inner pages (E06) — phone base (every width) + shared rules. The desktop layer is
   pages.desktop.css (≥1024px, media-gated like the home's). Consumes the tokens only. Motion: transform/opacity.
   Blocks: 1 hero · 2 illustrations (vx) · 3 section frame · 4 pains · 5 what you get · 6 cases · 7 cards · 8 search
   simulation · 9 rules · 10 case page · 11 hub · 12 simple pages.
   ===================================================================================================== */

/* ---------- 0 · page chrome (the home keeps these in hero.css, which inner pages don't load) ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-nav) + 10); padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bg-inverse); color: var(--fg-inverse); font: var(--w-ui) var(--text-sm) / 1 var(--font-sans); transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }
/* phones: the final CTA and the footer skip layout until near (same estimates as the home: identical blocks) */
@media (max-width: 1023.98px) {
  #contact, .site-footer { content-visibility: auto; }
  #contact { contain-intrinsic-size: auto 1206px; }
  .site-footer { contain-intrinsic-size: auto 1277px; }
}

/* ---------- 1 · hero ------------------------------------------------------------------------------ */
.phero { position: relative; isolation: isolate; padding: calc(var(--topbar-h) + var(--space-6)) 0 var(--section-y); overflow: clip; }
.phero__bg.bg-topo {
  position: absolute; z-index: -1; inset: -10% -35% auto auto; width: 120%; height: 120%;
  -webkit-mask-image: url("/sg/textures/topo-lines.svg"), radial-gradient(60% 55% at 85% 30%, #000 0%, transparent 70%);
  mask-image: url("/sg/textures/topo-lines.svg"), radial-gradient(60% 55% at 85% 30%, #000 0%, transparent 70%);
  opacity: .55;
}
.phero__inner { display: grid; gap: var(--space-9); }
.phero__copy { display: grid; justify-items: start; align-content: start; gap: var(--space-4); min-width: 0; }
.phero h1 { font-size: var(--text-h1); letter-spacing: var(--track-display); line-height: 1.02; max-width: 17ch; }
.phero__lede { max-width: 36em; font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
.phero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-2); }
.phero__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: var(--w-strong) var(--text-body) / 1 var(--font-sans); color: var(--fg); }
.phero__tel svg { width: 18px; height: 18px; color: var(--fg-accent); }
.phero__tel:hover span { text-decoration: underline; text-underline-offset: 3px; }
.phero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.phero__fig {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 14px 5px 5px;
  border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  font: var(--w-ui) var(--text-sm) / 1.3 var(--font-sans); color: var(--fg-muted);
}
.phero__fig b { flex: none; padding: 7px 11px; border-radius: calc(var(--r-lg) - 5px); background: var(--brand-soft); color: var(--fg-accent); font-weight: 800; letter-spacing: -.01em; }
.phero__fig svg { flex: none; width: 12px; height: 12px; color: var(--fg); transition: transform var(--d-ui) var(--e-spring); }
a.phero__fig:hover svg { transform: translate(2px, -2px); }
.phero__rating { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: var(--w-ui) var(--text-sm) / 1 var(--font-sans); color: var(--fg-muted); }
.phero__rating svg { width: 15px; height: 15px; color: var(--fg-accent); }
.phero__rating b { color: var(--fg); font-weight: 800; }
.phero__rating:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: var(--w-ui) var(--text-xs) / 1.4 var(--font-sans); color: var(--fg-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--fg-muted); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--fg); }
.crumbs svg { width: 12px; height: 12px; transform: rotate(-90deg); opacity: .6; }
.crumbs [aria-current] { color: var(--fg); }

/* ---------- 2 · illustrations (vx) — the home's svc-vis language, larger ---------------------------- */
.vis {
  position: relative; display: grid; align-content: center; gap: 12px; padding: 20px; overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 90% at 100% 100%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(70% 110% at 0% 0%, color-mix(in oklab, var(--violet-400) 28%, transparent), transparent 70%),
    var(--brand-soft);
  font: 500 .8125rem / 1.25 var(--font-sans); color: var(--fg);
}
.vis--panel { background: none; padding: 0; border-radius: 0; overflow: visible; width: 100%; }
.vis svg { flex: none; }
.vx-card { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-2); }
.vx-card--row { grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.vx-card__title { font: 700 .75rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vx-muted { color: var(--fg-muted); font-weight: 500; }
.vx-search { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-full); background: var(--bg-raised); box-shadow: var(--shadow-1); color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; }
.vx-search span { overflow: hidden; text-overflow: ellipsis; }
.vx-search svg { width: 16px; height: 16px; color: var(--fg-muted); }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 .6875rem / 1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.vx-chip svg { width: 12px; height: 12px; }
.vx-ai { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.vx-ai i, .vx-row i, .vx-listing i, .vx-snippet i, .vx-doc i { display: block; height: 7px; width: 88%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-ai i.s, .vx-row i.s, .vx-listing i.s, .vx-snippet i.s, .vx-doc i.s { width: 56%; }
.vx-cite { justify-self: start; padding: 5px 10px; border-radius: 8px; background: var(--grad-brand); color: var(--on-brand); font: 700 .75rem / 1 var(--font-sans); }
.vx-mappack { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.vx-minimap {
  position: relative; height: 78px; border-radius: 12px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 46%, color-mix(in oklab, var(--fg) 9%, transparent) 46% 50%, transparent 50%),
    linear-gradient(0deg, transparent 58%, color-mix(in oklab, var(--fg) 9%, transparent) 58% 62%, transparent 62%),
    linear-gradient(35deg, transparent 30%, color-mix(in oklab, var(--fg) 6%, transparent) 30% 33%, transparent 33%),
    color-mix(in oklab, var(--violet-300) 18%, var(--bg-sunken));
}
.vx-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: color-mix(in oklab, var(--fg) 30%, transparent); }
.vx-pin.is-us { left: 40%; top: 22%; width: 20px; height: 20px; background: var(--accent); box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--accent) 60%, transparent); }
.vx-pin.p2 { left: 16%; top: 56%; } .vx-pin.p3 { left: 72%; top: 48%; }
.vx-listing { display: grid; gap: 4px; min-width: 0; }
.vx-listing b { font-weight: 800; }
.vx-listing.is-us b { color: var(--fg); }
.vx-stars { color: var(--fg-accent); letter-spacing: 1px; font-size: .75rem; }
.vx-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: color-mix(in oklab, var(--bg-raised) 72%, transparent); }
.vx-row.is-us { background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent), var(--shadow-1); font-weight: 800; }
.vx-badge { padding: 4px 8px; border-radius: 6px; background: var(--brand); color: var(--bg-raised); font: 800 .6875rem / 1 var(--font-sans); }
.vx-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.vx-note:first-child { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent), var(--shadow-2); }
.vx-note__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); color: var(--on-brand); }
.vx-note__icon svg { width: 16px; height: 16px; }
.vx-note b { display: block; font-weight: 700; }
.vx-note small { display: block; margin-top: 2px; font-size: .75rem; color: var(--fg-muted); }
.vx-time { font: 600 .6875rem / 1 var(--font-sans); color: var(--fg-muted); }
.vx-cal { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.vx-cal__head { font: 700 .6875rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vx-cal__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.vx-cal__grid i { height: 14px; border-radius: 4px; background: color-mix(in oklab, var(--fg) 8%, transparent); }
.vx-cal__grid i.on { background: var(--grad-brand); }
.vx-check, .vx-kw, .vx-vitals, .vx-report { display: grid; gap: 8px; }
.vx-check li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-weight: 600; }
.vx-check svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: color-mix(in oklab, var(--brand) 14%, transparent); color: var(--fg-accent); }
.vx-check li.bad svg { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.vx-check li span, .vx-kw em { padding: 4px 8px; border-radius: var(--r-full); background: var(--bg-sunken); font: 700 .6875rem / 1 var(--font-sans); font-style: normal; color: var(--fg-muted); }
.vx-check li.bad span { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--fg); }
.vx-kw li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--bg-sunken); font-weight: 600; }
.vx-kw li.on { background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 26%, transparent); }
.vx-kw li.on em { background: var(--brand-soft); color: var(--fg-accent); }
.vx-kw li:not(.on) { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.vx-snippet { display: grid; gap: 6px; }
.vx-url { font-size: .75rem; color: var(--fg-muted); }
.vx-snippet b { font: 700 1rem / 1.25 var(--font-sans); color: var(--fg-accent); }
.vx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 .6875rem / 1 var(--font-sans); }
.vx-tags svg { width: 11px; height: 11px; }
.vx-ring { position: relative; display: grid; place-items: center; width: 108px; height: 108px; }
.vx-ring svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.vx-ring circle { fill: none; stroke: color-mix(in oklab, var(--fg) 10%, transparent); stroke-width: 3.4; }
.vx-ring circle.val { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 96 100; }
.vx-ring__icon { width: 34px; height: 34px; color: var(--fg-accent); }
.vx-vitals li, .vx-report li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.vx-vitals svg, .vx-report svg { width: 16px; height: 16px; color: var(--fg-accent); }
.vx-doc { gap: 9px; }
.vx-doc__h, .vx-doc__h2 { display: block; height: 11px; width: 64%; border-radius: 5px; background: var(--fg); }
.vx-doc__h2 { width: 42%; height: 9px; margin-top: 6px; }
.vx-byline { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 .75rem / 1.2 var(--font-sans); color: var(--fg-muted); }
.vx-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-300), var(--pink-500)); }
.vx-net { width: 100%; height: auto; }
.vx-net__lines path { fill: none; stroke: color-mix(in oklab, var(--brand) 45%, transparent); stroke-width: 2; stroke-dasharray: 4 5; }
.vx-net__node { fill: var(--bg-raised); stroke: color-mix(in oklab, var(--fg) 16%, transparent); stroke-width: 1.5; }
.vx-net__us { fill: var(--brand); }
.vx-net text { font: 800 15px var(--font-sans); fill: var(--bg-raised); }
.vx-mappack--big { grid-template-columns: 1fr; }
.vx-mappack--big .vx-minimap { height: 150px; }
.vx-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 6px 2px 0; border-bottom: 1px solid var(--line); }
.vx-chart i { flex: 1; height: 100%; border-radius: 5px 5px 2px 2px; background: var(--grad-brand); transform-origin: 50% 100%; transform: scaleY(var(--h)); }
.vx-report .up { width: 0; height: 0; margin-left: auto; border: 6px solid transparent; border-bottom: 9px solid var(--fg-accent); border-top: 0; }

/* ---------- 3 · section frame -------------------------------------------------------------------- */
.pg { position: relative; padding-block: var(--section-y); }
.pg__head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: var(--space-9); }
.pg__head h2 { font-size: var(--text-h2); }
.pg__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }

/* ---------- 4 · pains (and other small card grids) ------------------------------------------------ */
.pains__grid { display: grid; gap: var(--space-4); }
.pain { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.pain__num { font: 600 .8125rem / 1 var(--font-mono); letter-spacing: .04em; color: var(--fg-accent); }
.pain h3 { font-size: var(--text-h4); }
.pain p { color: var(--fg-muted); line-height: var(--lh-body); }
.pain p a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 5 · what you get (phone + no-motion: a numbered list; the desktop stage lives in the desktop layer) ---- */
.deliv__list { display: grid; }
.deliv__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.deliv__item:last-child { border-bottom: 1px solid var(--line); }
.deliv__num { padding-top: .35em; font: 600 .8125rem / 1 var(--font-mono); letter-spacing: .04em; color: var(--fg-accent); }
.deliv__item h3 { font-size: var(--text-h4); }
.deliv__item p { margin-top: var(--space-2); color: var(--fg-muted); line-height: var(--lh-body); }
.deliv__stage { display: none; }

/* ---------- 6 · case cards + the solo testimonial -------------------------------------------------- */
.proofs__grid { display: grid; gap: var(--space-5); }
.ccard { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
.ccard__media { padding: var(--space-4) var(--space-4) 0; background: radial-gradient(80% 120% at 0% 0%, color-mix(in oklab, var(--violet-400) 26%, transparent), transparent 70%), var(--brand-soft); }
.ccard__figure { position: relative; display: grid; place-content: center; gap: 6px; aspect-ratio: 16 / 10.8; padding: var(--space-6); border-radius: 14px 14px 0 0; background: var(--grad-brand); color: var(--on-brand); text-align: center; }
.ccard__figure b { font: 800 clamp(2.75rem, 2rem + 3vw, 4rem) / 1 var(--font-sans); letter-spacing: -.03em; }
.ccard__figure span { max-width: 18em; font: var(--w-ui) var(--text-sm) / 1.35 var(--font-sans); opacity: .9; }
.ccard__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.ccard__meta { font: var(--w-strong) var(--text-xs) / 1.3 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
.ccard__title { font-size: var(--text-h4); }
.ccard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ccard__fig { color: var(--fg-muted); }
.ccard__fig b { color: var(--fg-accent); font-weight: 800; }
.ccard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); font: var(--w-strong) var(--text-sm) / 1 var(--font-sans); color: var(--fg); }
.ccard__cta svg { width: 13px; height: 13px; transition: transform var(--d-ui) var(--e-spring); }
.ccard:hover .ccard__cta svg { transform: translate(2px, -2px); }
.ccard:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.ccard .ccard__title a:focus-visible { outline: none; }
.bshot { overflow: hidden; margin: 0; border-radius: 14px 14px 0 0; background: var(--bg-raised); box-shadow: var(--shadow-2); }
.bshot__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; background: var(--bg-sunken); }
.bshot__bar i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 18%, transparent); }
.bshot__bar span { flex: 1; max-width: 50%; height: 12px; margin-left: 10px; border-radius: 6px; background: var(--bg-raised); font: 500 .625rem / 12px var(--font-sans); color: var(--fg-muted); text-align: center; overflow: hidden; }
.bshot img { width: 100%; height: auto; }
.bshot--sm img { aspect-ratio: 16 / 9.4; object-fit: cover; object-position: 50% 0; }
.tst-card--solo { display: grid; }
.tst-card--solo .tst-card__avatar { background: var(--pink-700); }
.tst-card--solo figure { display: grid; align-content: space-between; gap: var(--space-4); height: 100%; padding: var(--space-6); border-radius: var(--r-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }

/* ---------- 7 · service / industry cards ---------------------------------------------------------- */
.scards { display: grid; gap: var(--space-3); }
.scard a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); transition: box-shadow var(--d-micro) var(--e-out); }
.scard a:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 40%, transparent), var(--shadow-2); }
.scard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--fg-accent); }
.scard__icon svg { width: 20px; height: 20px; }
.scard__text { display: grid; gap: 2px; min-width: 0; }
.scard__text b { font: var(--w-heading) var(--text-h4) / 1.2 var(--font-sans-heavy); letter-spacing: var(--track-tight); }
.scard__text span { font-size: var(--text-sm); color: var(--fg-muted); }
.scard__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 6%, transparent); }
.scard__arrow svg { width: 13px; height: 13px; transition: transform var(--d-ui) var(--e-spring); }
.scard a:hover .scard__arrow svg { transform: translate(2px, -2px); }
.who__more { margin-top: var(--space-5); color: var(--fg-muted); }

/* ---------- phone reveals: same contract as the home (space held, opacity/transform only) ---------- */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .js .pain.reveal:not(.is-in), .js .scard.reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .js .pain.reveal, .js .scard.reveal { transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
}

.scard { display: grid; }
.scard a { height: 100%; }

/* ---------- 8 · industry: the search simulation (signature), what we do, lines ----------------------- */
.ssim { --row: 64px; --gap: 8px; display: grid; gap: var(--space-5); padding: clamp(16px, 3vw, 28px); border-radius: var(--r-xl);
  background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3); font: 500 .875rem / 1.25 var(--font-sans); }
.ssim__bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 18px; border-radius: var(--r-full); background: var(--bg-sunken); font-weight: 600; }
.ssim__bar svg { flex: none; width: 17px; height: 17px; color: var(--fg-muted); }
.ssim__bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssim__group { display: grid; gap: var(--gap); }
.ssim__label { font: 700 .6875rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.ssim__row { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: var(--row); padding: 0 16px; border-radius: 14px; background: var(--bg-sunken); }
.ssim__row i { display: block; height: 7px; width: 70%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.ssim__row i.s { width: 44%; }
.ssim__maprow { display: grid; gap: var(--space-3); }
.ssim__map { height: 110px; }
.ssim__list { display: grid; gap: var(--gap); }
.ssim__list .ssim__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: var(--row); transition: transform 900ms var(--e-out); }
.ssim__rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 8%, transparent); font: 800 .75rem / 1 var(--font-sans); color: var(--fg-muted); }
.ssim__who { display: grid; gap: 5px; min-width: 0; }
.ssim__who i { width: 60%; }
.ssim__who small { font-size: .75rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssim__row--us { position: relative; z-index: 1; background: var(--bg-raised); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 45%, transparent), var(--shadow-2); }
.ssim__row--us .ssim__rank { background: var(--grad-brand); color: var(--on-brand); }
.ssim__row--us b { font-weight: 800; }
.ssim__call { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 .75rem / 1 var(--font-sans); }
.ssim__call svg { width: 13px; height: 13px; }
/* the start state (set by reveal-once.js while off screen): the business sits third, the others above it */
.ssim--start .ssim__list .ssim__row { transition: none; }
.ssim--start .ssim__list .ssim__row[data-k="0"] { transform: translateY(calc(2 * (var(--row) + var(--gap)))); }
.ssim--start .ssim__list .ssim__row[data-k="1"], .ssim--start .ssim__list .ssim__row[data-k="2"] { transform: translateY(calc(-1 * (var(--row) + var(--gap)))); }
.ssim__note { font-size: var(--text-sm); color: var(--fg-muted); }
.work__list { display: grid; }
.work__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.work__item:last-child { border-bottom: 1px solid var(--line); }
.work__num, .rule__num, .did__num { padding-top: .3em; font: 600 .8125rem / 1 var(--font-mono); letter-spacing: .04em; color: var(--fg-accent); }
.work__text h3, .rule h3 { font-size: var(--text-h4); }
.work__text p, .rule p { margin-top: var(--space-2); color: var(--fg-muted); line-height: var(--lh-body); }
.work__link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 var(--text-sm) / 1 var(--font-sans); }
.work__link svg { width: 12px; height: 12px; transition: transform var(--d-ui) var(--e-spring); }
.work__link:hover svg { transform: translate(2px, -2px); }
.lines { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.lines li { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--bg-sunken); }
.lines b { font-weight: var(--w-strong); }
.lines span { color: var(--fg-muted); font-size: var(--text-sm); }

/* ---------- 9 · rules (e.g. Florida Bar) ---------------------------------------------------------- */
.rules { background: var(--bg-sunken); }
.rules__list { display: grid; gap: var(--space-4); }
.rule { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); }
.rules__note { max-width: 46rem; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--fg-muted); }

/* ---------- 10 · case page ----------------------------------------------------------------------- */
.vis--figure { justify-items: start; align-content: end; gap: var(--space-3); min-height: 280px; padding: clamp(24px, 4vw, 40px); background: var(--grad-brand); color: var(--on-brand); }
.vfig__value { max-width: 100%; font: 800 clamp(2.75rem, 1.6rem + 6vw, 6.5rem) / .95 var(--font-sans); letter-spacing: -.04em; overflow-wrap: anywhere; }
.vfig__label { max-width: 20em; font: var(--w-ui) var(--text-lead) / 1.3 var(--font-sans); opacity: .92; }
.vfig__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.vfig__chips li { padding: 6px 11px; border-radius: var(--r-full); background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); font: 600 .75rem / 1 var(--font-sans); }
.glance { padding-block: 0; }
.glance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; border-radius: var(--r-lg); background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.glance__grid > div { display: grid; align-content: start; gap: 6px; padding: var(--space-4) var(--space-5); background: var(--bg-raised); }
.glance__grid dt { font: var(--w-strong) var(--text-xs) / 1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
.glance__grid dd { margin: 0; font-weight: var(--w-ui); }
.story__grid { display: grid; gap: var(--space-10); }
.story__text { display: grid; align-content: start; gap: var(--space-4); }
.story__text h2 { font-size: var(--text-h2); }
.story__body p { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
.story__h3 { margin-bottom: var(--space-4); font-size: var(--text-h4); }
.did { display: grid; }
.did__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.did__item:last-child { border-bottom: 1px solid var(--line); }
.did__item h4 { font-size: var(--text-body); font-weight: 780; letter-spacing: var(--track-tight); }
.did__item p { margin-top: 4px; color: var(--fg-muted); line-height: var(--lh-body); }
.rbars { display: grid; gap: var(--space-4); }
.rbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-6);
  padding: var(--space-6); border-radius: var(--r-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.rbar--solo { grid-template-columns: 1fr; }
.rbar__text { display: grid; gap: 6px; min-width: 0; }
.rbar__chart { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.rbar__col { display: grid; justify-items: center; align-content: end; gap: 8px; height: 100%; }
.rbar__fill { display: block; width: 34px; height: calc(var(--h) * 108px); border-radius: 8px 8px 3px 3px; background: var(--grad-brand); transform-origin: 50% 100%; transition: transform 1100ms var(--e-out); }
.rbar__fill--before { background: color-mix(in oklab, var(--fg) 16%, transparent); }
.rbar__col:last-child .rbar__fill { transition-delay: 160ms; }
.rbar--down .rbar__fill:not(.rbar__fill--before) { background: linear-gradient(180deg, var(--violet-400), var(--violet-700)); }
.rbar__tick { font: 600 .6875rem / 1 var(--font-sans); color: var(--fg-muted); }
.rbar__value { font: 800 clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem) / 1 var(--font-sans); letter-spacing: -.035em; color: var(--fg); }
.rbar__label { font-weight: var(--w-ui); }
.rbar__time { font-size: var(--text-sm); color: var(--fg-muted); }
.rbars--start .rbar__fill { transform: scaleY(0); transition: none; }
.rbars__source { max-width: 46rem; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--fg-muted); }
.site-shot__link { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-accent); font-weight: var(--w-strong); text-decoration: underline; text-underline-offset: 4px; }
.site-shot__link svg { width: 13px; height: 13px; }
.site-shot__credit { color: var(--fg-muted); }
.site-shot .bshot { border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.next-case { display: grid; gap: var(--space-4); margin-top: var(--space-11); }
.next-case__card { max-width: 420px; }

/* the current page inside the menu sheet */
.menu-tile[aria-current="page"], .menu-row[aria-current="page"] { color: var(--fg-accent); }
.menu-tile[aria-current="page"] { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 40%, transparent); }

/* shop mode (e-commerce): product thumbnails instead of map ranks */
.ssim__group--shop .ssim__maprow { grid-template-columns: 1fr; }
.ssim__group--shop .ssim__rank { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in oklab, var(--violet-400) 28%, var(--bg-sunken)), color-mix(in oklab, var(--pink-400) 22%, var(--bg-sunken))); }
.ssim__group--shop .ssim__row--us .ssim__rank { background: var(--grad-brand); }

/* ---------- 2b · more illustrations (batch 2) ------------------------------------------------------ */
.vx-chat { padding: 12px 16px; border-radius: 18px; background: var(--bg-raised); box-shadow: var(--shadow-1); line-height: 1.4; }
.vx-chat--q { justify-self: end; max-width: 86%; border-bottom-right-radius: 6px; background: var(--grad-brand); color: var(--on-brand); font-weight: 600; }
.vx-chat--a { display: grid; gap: 8px; border-bottom-left-radius: 6px; }
.vx-chat--a i { display: block; height: 7px; width: 90%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-chat--a i.s { width: 62%; }
.vx-chat--a .vx-cite { justify-self: start; }
.vx-chat--r { justify-self: end; max-width: 88%; border-bottom-right-radius: 6px; background: var(--brand-soft); }
.vx-chat--sm { padding: 9px 12px; font-size: .75rem; }
.vx-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: .6875rem; color: var(--fg-muted); }
.vx-sources span { width: 64px; height: 18px; border-radius: 6px; background: var(--bg-sunken); }
.vx-sources span.on { width: auto; padding: 3px 8px; height: auto; background: var(--brand-soft); color: var(--fg-accent); font-weight: 700; }
.vx-ad { gap: 7px; }
.vx-ad b { font: 700 .9375rem / 1.25 var(--font-sans); color: var(--fg-accent); }
.vx-ad i { display: block; height: 7px; width: 88%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-ad i.s { width: 58%; }
.vx-sponsored { font: 700 .625rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vx-adcall { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 11px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 .75rem / 1 var(--font-sans); }
.vx-adcall svg { width: 12px; height: 12px; }
.vx-chart--down { height: 70px; }
.vx-phone { justify-self: center; display: grid; gap: 10px; width: min(260px, 100%); padding: 12px; border-radius: 26px; background: var(--bg-raised); box-shadow: var(--shadow-3); }
.vx-feedpost { display: grid; gap: 8px; }
.vx-feedpost__head { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
.vx-feedpost__head small { margin-left: auto; color: var(--fg-muted); }
.vx-feedpost__head i { display: block; height: 7px; width: 50%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-feedpost__img { height: 150px; border-radius: 14px; background: radial-gradient(60% 70% at 30% 30%, var(--pink-300), transparent 70%), linear-gradient(135deg, var(--violet-400), var(--violet-700)); }
.vx-feedpost__cta { padding: 9px; border-radius: 10px; background: var(--brand-soft); color: var(--fg-accent); text-align: center; font: 700 .75rem / 1 var(--font-sans); }
.vx-feedpost--ghost { opacity: .5; }
.vx-browser { overflow: hidden; border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow-2); }
.vx-browser__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; background: var(--bg-sunken); }
.vx-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 18%, transparent); }
.vx-browser__bar span { flex: 1; max-width: 55%; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: var(--bg-raised); font-size: .625rem; color: var(--fg-muted); min-height: 16px; }
.vx-browser__page { display: grid; justify-items: start; gap: 9px; padding: 20px 22px 22px; }
.vx-browser__page b { display: block; height: 13px; width: 78%; border-radius: 5px; background: var(--fg); }
.vx-browser__page b.s { width: 52%; }
.vx-browser__btn { margin-top: 6px; padding: 9px 16px; border-radius: var(--r-full); background: var(--grad-brand); color: var(--on-brand); font: 700 .75rem / 1 var(--font-sans); }
.vx-browser__proof { display: flex; align-items: center; gap: 8px; width: 100%; }
.vx-browser__proof i, .vx-browser__line { display: block; height: 7px; width: 40%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-browser__line { width: 92%; } .vx-browser__line.s { width: 70%; }
.vx-card--mini { padding: 12px 16px; }
.vx-ring--sm { width: 64px; height: 64px; }
.vx-ring--sm .vx-ring__icon { width: 22px; height: 22px; }
.vx-posts { position: relative; min-height: 240px; }
.vx-post { position: absolute; top: 12%; display: flex; align-items: flex-end; width: 42%; aspect-ratio: 1; padding: 8px; border-radius: 16px; box-shadow: var(--shadow-2); }
.vx-post span { padding: 4px 8px; border-radius: var(--r-full); background: var(--bg-raised); font: 700 .6875rem / 1 var(--font-sans); }
.vx-post.p1 { left: 2%; transform: rotate(-6deg); background: linear-gradient(135deg, var(--violet-300), var(--violet-600)); }
.vx-post.p2 { left: 29%; top: 6%; z-index: 1; transform: rotate(2deg); background: var(--grad-brand); }
.vx-post.p3 { left: 56%; transform: rotate(7deg); background: linear-gradient(135deg, var(--pink-300), var(--pink-600)); }
.vx-msg { position: absolute; left: 8%; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--bg-raised); box-shadow: var(--shadow-2); font-weight: 600; }
.vx-msg svg { width: 16px; height: 16px; color: var(--fg-accent); }
.vx-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vx-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; overflow: hidden; padding: 10px; border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow-1); font-size: .75rem; }
.vx-product.is-us { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 40%, transparent), var(--shadow-2); }
.vx-product__img { width: 100%; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, color-mix(in oklab, var(--violet-400) 28%, var(--bg-sunken)), color-mix(in oklab, var(--pink-400) 22%, var(--bg-sunken))); }
.vx-product.is-us .vx-product__img { background: var(--grad-brand); }
.vx-product i { display: block; height: 6px; width: 80%; border-radius: 3px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-product i.s { width: 50%; }
.vx-gbp { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.vx-gbp__photo { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, var(--violet-300), var(--pink-400)); }
.vx-gbp > span:last-child { display: grid; gap: 3px; }
.vx-review { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-sunken); }
.vx-review i { display: block; height: 6px; width: 85%; border-radius: 3px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-review i.s { width: 55%; }
.vx-reply { margin-left: 12px; padding: 8px 10px; border-left: 2px solid var(--brand); border-radius: 0 8px 8px 0; background: var(--bg-raised); font-size: .75rem; }
.vx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.vx-facts > div { padding: 9px 11px; border-radius: 10px; background: var(--bg-sunken); }
.vx-facts dt { font: 700 .625rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vx-facts dd { margin: 5px 0 0; font-weight: 700; }
.vx-split { display: grid; gap: 8px; }
.vx-split li { position: relative; overflow: hidden; padding: 10px 12px; border-radius: 10px; background: var(--bg-sunken); font-weight: 600; }
.vx-split li::before { content: ""; position: absolute; inset: 0; background: var(--brand-soft); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.vx-split li:first-child::before { background: color-mix(in oklab, var(--brand) 28%, var(--brand-soft)); }
.vx-split span { position: relative; }
.vx-ads2 { display: grid; gap: 12px; }
.vx-ads2 .vx-ad:not(.is-win) { opacity: .55; }
.vx-ads2 .is-win { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 40%, transparent), var(--shadow-2); }
.vx-browser--tall .vx-browser__page { padding-bottom: 28px; }
.vx-wire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border-radius: 16px; background: var(--bg-raised); box-shadow: var(--shadow-2); }
.vx-wire__col { display: grid; align-content: start; gap: 8px; }
.vx-wire__col b { display: block; height: 14px; width: 90%; border-radius: 5px; background: var(--fg); }
.vx-wire__col i { display: block; height: 7px; width: 100%; border-radius: 4px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vx-wire__col i.s { width: 70%; }
.vx-wire__col span { width: 60%; height: 22px; margin-top: 6px; border-radius: var(--r-full); background: var(--grad-brand); }
.vx-wire__col--vis { min-height: 110px; border-radius: 12px; border: 1.5px dashed color-mix(in oklab, var(--brand) 40%, transparent); background: var(--brand-soft); }
.vx-wire__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vx-wire__row i { height: 46px; border-radius: 10px; background: var(--bg-sunken); }
.vx-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.vx-month i { aspect-ratio: 1; border-radius: 6px; background: var(--bg-sunken); }
.vx-month i.on { background: var(--grad-brand); }
.vx-byline svg { width: 14px; height: 14px; color: var(--fg-accent); }

/* ---------- 11 · about, hub ---------------------------------------------------------------------- */
.about-card { display: grid; place-items: center; padding: var(--space-6) 0; }
.about-card .member-card { width: min(100%, 420px); }
.story__body { display: grid; gap: var(--space-4); }
.story__body p + p { margin-top: 0; }
.promises { grid-template-columns: 1fr; }
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.crew__card { display: grid; align-content: start; gap: 6px; }
.crew__photo { overflow: hidden; margin-bottom: var(--space-2); aspect-ratio: 1; border-radius: var(--r-lg); background: var(--brand-soft); }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; }
.crew__name { font: var(--w-heading) var(--text-body) / 1.25 var(--font-sans-heavy); letter-spacing: var(--track-tight); }
.crew__role { font-size: var(--text-sm); color: var(--fg-muted); }
.crew__card--lead .crew__photo { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 50%, transparent); }
.recog-sec { padding-block: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.chips[hidden] { display: none; }
.js .chips[hidden] { display: flex; }
.chip-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-full); background: var(--bg-sunken); color: var(--fg-muted); font: var(--w-ui) var(--text-sm) / 1 var(--font-sans); cursor: pointer; transition: background-color var(--d-micro) var(--e-out); }
.chip-btn[aria-pressed="true"] { background: var(--bg-inverse); color: var(--fg-inverse); }
.hub__count { min-height: 1.4em; margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--fg-muted); }
.hub__grid .ccard { transition: opacity 280ms var(--e-out), transform 360ms var(--e-out); }
.hub__grid .ccard.is-entering { opacity: 0; transform: translateY(12px); transition: none; }
.hub__more { margin-top: var(--space-11); font-size: var(--text-h4); }
.hub .lines { margin-top: var(--space-5); }

/* ---------- 12 · legal and utility ---------------------------------------------------------------- */
.phero--legal, .phero--404 { padding-bottom: var(--space-7); }
.legal__updated { font-size: var(--text-sm); color: var(--fg-muted); }
.legal { padding-top: var(--space-6); }
.legal__body { max-width: 70ch; }
.legal__body h2 { margin: var(--space-9) 0 var(--space-3); font-size: var(--text-h4); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { color: var(--fg-muted); line-height: var(--lh-body); }
.legal__body p + p { margin-top: var(--space-3); }
.legal__body ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding-left: 1.2em; }
.legal__body a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
.story__body a { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* E10: case copy links (law-firm page, services) */
.legal__body b { color: var(--fg); font-weight: var(--w-strong); }

/* the offer and contact pages: the form comes right after a short hero */
main[data-template="offer"] .phero, main[data-template="contact"] .phero { padding-bottom: 0; }

/* narrow phones: the chart sits above a long figure (+121.88% overflowed at 320) */
@media (max-width: 379.98px) { .rbar { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); } .rbar__chart { height: 110px; } }

/* the hub filter hides cards with [hidden]; .ccard's display: grid must not override it (fresh review, critical) */
.hub__grid > [hidden] { display: none; }

/* web mode (national searches): organic results, no map */
.ssim__group--web .ssim__maprow { grid-template-columns: 1fr; }