/* ==========================================================================
   Ninthroot redesign concept, v2
   Their copy, their palette. Every picture is a UI illustration drawn in code:
   hero composition, a sticky animated product stage, a bento and twelve service scenes.
   Illustrations scale with container query units, so they stay crisp at every width.
   ========================================================================== */

:root {
  /* palette: sampled from logo.svg and the live site's CSS */
  --loam: #1C2226;          /* primary ink and dark sections (their #212529, deepened) */
  --loam-2: #232B30;        /* raised surfaces on loam */
  --loam-3: #2C353A;        /* hairlines on loam */
  --pink: #FF527F;          /* the logo, locations, the one pink band */
  --pink-deep: #D93D67;     /* pink text on light grounds (4.5:1) */
  --cyan: #3ABFE0;          /* the live site's action colour: buttons, UI accents */
  --cyan-deep: #0B6A84;     /* links and focus on light grounds */
  --slate: #505356;         /* secondary text (their tertiary) */
  --ground: #F4F5F3;        /* page background */
  --white: #FFFFFF;
  --root: #9AA7AD;          /* root drawings and the ground line; never text */
  --root-dark: #56656D;
  --line: #DDE2E3;
  --on-loam: #E9EDEE;
  --on-loam-2: #A9B4B9;
  --notice: #F3D34A;        /* the concept notice only */

  /* UI illustration vocabulary */
  --ui-bg: #F7F8F7;
  --ui-line: #E3E8EA;
  --ui-sk: #E4E9EB;
  --ui-sk-2: #D6DDE0;
  --amber: #F2B233;         /* rating stars inside product screens */
  --up: #1E9A68;            /* positive deltas inside product screens */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.35rem, 1rem + 3.2vw, 4rem);
  --fs-statement: clamp(2.9rem, .8rem + 6.4vw, 7.4rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);
  --fs-h3: 1.375rem;
  --fs-lede: clamp(1.125rem, 1.04rem + .4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(84px, 10vw, 150px);
  --radius: 12px;
  --radius-l: 20px;
  --shadow-ui: 0 1px 2px rgba(28, 34, 38, .06), 0 12px 32px -12px rgba(28, 34, 38, .28);
  --masthead-h: 76px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(.34, 1.45, .64, 1);

  /* tokens the consent card expects */
  --ink: var(--loam);
  --ink-soft: #3A4247;
  --muted: #5B6468;
  --mist: #E8ECED;
  --lapis: var(--loam);
  --blue: var(--cyan-deep);
  --teal: var(--cyan-deep);
  --gold: var(--pink);
  --serif: var(--font);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: calc(var(--masthead-h) + 16px); }
body { margin: 0; background: var(--ground); color: var(--loam); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 720; font-stretch: 92%; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--cyan-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
blockquote, figure, dl, dd { margin: 0; }
address { font-style: normal; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 3px; border-radius: 2px; }
.section--loam :focus-visible, .footer :focus-visible, .menu :focus-visible, .faith :focus-visible { outline-color: var(--cyan); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section--loam { background: var(--loam); color: var(--on-loam); }
.section--loam a:not(.btn) { color: var(--cyan); }
.section--white { background: var(--white); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--loam); color: #fff; border-radius: 6px; }
.skip:focus { top: 16px; }

.section-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { margin-top: 16px; font-size: var(--fs-lede); color: var(--slate); line-height: 1.5; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; flex-wrap: wrap; }
.section-head--split p { max-width: 26rem; margin: 0; }
.art-caption { margin-top: 14px; font-size: .75rem; color: var(--slate); letter-spacing: .01em; }
.art-caption--dark { color: var(--on-loam-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--cyan); color: var(--loam); }
.btn--dark { background: var(--loam); color: var(--white); }
.btn--ghost { border-color: rgba(28, 34, 38, .22); color: var(--loam); }
.btn--outline { border-color: currentColor; color: var(--loam); }
.btn--lg { min-height: 54px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #62CCE7; }
  .btn--dark:hover { background: #2E383E; }
  .btn--ghost:hover { border-color: var(--loam); }
  .btn--outline:hover { background: var(--mist); }
}

/* ---------- concept notice ---------- */
.notice { position: relative; z-index: 101; padding: 9px var(--gutter); background: var(--notice); color: var(--loam); font-size: var(--fs-small); line-height: 1.45; text-align: center; }
.notice a { color: var(--loam); font-weight: 600; margin-left: 4px; }

/* ---------- loader: the wordmark writes itself, the curtain lifts ---------- */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--loam); pointer-events: none; }
.loader__mark { width: min(360px, 62vw); height: auto; fill: var(--pink); clip-path: inset(0 100% 0 0); }
.is-writing .loader__mark { clip-path: inset(0 0 0 0); transition: clip-path 1000ms cubic-bezier(.55, .1, .35, 1); }
.is-lifting .loader { transform: translateY(-100%); transition: transform 1100ms var(--ease-in-out); }
.is-lifting .loader__mark { opacity: 0; transform: translateY(-24px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-in-out); }
.is-ready .loader { display: none; }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 100; background: rgba(244, 245, 243, .97); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.masthead.is-stuck { border-bottom-color: var(--line); }
.masthead__inner { transition: height .35s var(--ease-out); }
.masthead__logo svg { transition: width .35s var(--ease-out); }
@media (min-width: 1021px) {
  .masthead.is-stuck .masthead__inner { height: 62px; }
  .masthead.is-stuck .masthead__logo svg { width: 128px; }
}
.masthead__inner { display: flex; align-items: center; gap: 30px; height: var(--masthead-h); }
.masthead__logo { display: block; margin-right: auto; margin-left: -6px; }
.masthead__logo svg { width: 150px; height: auto; fill: var(--pink); }
.nav { position: relative; display: flex; gap: 2px; }
.nav a { position: relative; z-index: 1; padding: 8px 14px; border-radius: 99px; color: var(--loam); text-decoration: none; font-weight: 500; font-size: .9875rem; transition: color .2s; }
.nav a.is-current { font-weight: 600; }
/* one pill: slides to the hovered link, rests on the section being read */
.nav__pill { position: absolute; left: 0; top: 50%; height: 38px; width: var(--w, 0px); translate: var(--x, 0px) -50%; border-radius: 99px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px -8px rgba(28, 34, 38, .35); opacity: 0; pointer-events: none; }
.nav.has-pill .nav__pill { opacity: 1; transition: translate .38s var(--ease-out), width .38s var(--ease-out), opacity .25s; }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-weight: 600; }
.menu-toggle__bars, .menu-toggle__bars::before { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-toggle__bars { position: relative; transform: translateY(-3px); }
.menu-toggle__bars::before { content: ""; position: absolute; top: 6px; }
@media (max-width: 1020px) {
  :root { --masthead-h: 64px; }
  .nav, .masthead__cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .masthead__logo svg { width: 124px; }
}

/* ---------- full-screen mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--loam); color: var(--on-loam); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s cubic-bezier(.7, 0, .2, 1) .14s, visibility 0s linear .69s; }
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--masthead-h); }
.menu__logo { width: 124px; height: auto; fill: var(--pink); margin-left: -6px; }
.menu__close { position: relative; width: 44px; height: 44px; margin-right: -10px; }
.menu__close span, .menu__close span::before { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: currentColor; transform: rotate(45deg); }
.menu__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.menu__nav { display: flex; flex-direction: column; gap: 6px; margin-top: 6vh; }
.menu__nav a { color: var(--on-loam); text-decoration: none; font-size: clamp(1.9rem, 7.6vw, 2.6rem); font-weight: 720; font-stretch: 90%; line-height: 1.25; letter-spacing: -.02em; opacity: 0; transform: translateY(26px); transition: opacity .2s, transform .2s; }
.menu.is-open .menu__nav a { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .06s), transform .75s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .06s); }
.menu__nav a:last-child { color: var(--cyan); }
.menu__foot { margin-top: auto; padding-bottom: 32px; color: var(--on-loam-2); font-size: var(--fs-small); line-height: 1.7; }
.menu__foot a { color: var(--on-loam); }

/* ==========================================================================
   Shared UI-illustration parts (all sized in container units by their scene)
   ========================================================================== */
.sk { display: block; height: .62em; border-radius: 99px; background: var(--ui-sk); }
.sk--h { height: .95em; background: var(--ui-sk-2); }
.sk--30 { width: 30%; } .sk--40 { width: 40%; } .sk--50 { width: 50%; } .sk--60 { width: 60%; } .sk--70 { width: 70%; } .sk--80 { width: 80%; }
.ui-btn { display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em; border-radius: 99px; background: var(--cyan); color: var(--loam); font-weight: 650; font-size: .82em; line-height: 1.1; white-space: nowrap; }
.ui-btn svg { width: 1em; height: 1em; fill: currentColor; }
.ui-btn--line { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-sk-2); color: var(--slate); }
.ui-label { font-size: .72em; font-weight: 600; color: #737B7F; letter-spacing: .01em; line-height: 1.3; }
.stars { display: inline-flex; align-items: center; gap: .08em; }
.stars svg { width: 1em; height: 1em; fill: var(--amber); }
.stars small { margin-left: .4em; font-size: .8em; color: #737B7F; }
.stars--sm svg { width: .8em; height: .8em; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--pink); flex: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 110px); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__inner > * { min-width: 0; }
/* eyebrow: their real Google rating */
.hero__rating { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 16px 8px 10px; border-radius: 99px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -12px rgba(28, 34, 38, .35); font-size: .9375rem; font-weight: 500; color: var(--slate); }
.hero__g { width: 20px; height: 20px; flex: none; }
.hero__stars { display: inline-flex; gap: 1px; }
.hero__stars svg { width: 15px; height: 15px; fill: #FBBC05; }
.hero__rating-txt b { font-weight: 750; color: var(--loam); }
.hero__count { color: #7A8286; }
@media (max-width: 420px) {
  .hero__rating { gap: 7px; padding: 7px 12px 7px 8px; font-size: .8125rem; }
  .hero__g { width: 17px; height: 17px; }
  .hero__stars svg { width: 12px; height: 12px; }
}
/* the headline: open, normal width (the condensed 76% setting read as cramped) */
.hero__title { margin-top: 26px; font-size: clamp(2.3rem, 1rem + 3vw, 3.7rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 750; font-stretch: 106%; }
/* alternates for hero-options.html: ?type=open (normal width) and ?type=condensed (the first setting) */
[data-type="open"] .hero__title { font-size: var(--fs-display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.025em; line-height: 1.04; }
[data-type="condensed"] .hero__title { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.5rem); font-weight: 800; font-stretch: 76%; letter-spacing: -0.03em; line-height: .96; }
.hero__title .line { display: block; }
.hero__lede { margin-top: 24px; max-width: 30rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__art { position: relative; container-type: inline-size; } /* container for .comp: an element can't size its own font from its own cqw */
.hero__art .art-caption { text-align: right; }

/* the composition: 640x600 design units, scaled with container query units */
.comp {
  --u: calc(100cqw / 640);
  position: relative;
  aspect-ratio: 640 / 600;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
}
.comp > * { position: absolute; }
.comp__grid { inset: -6% -10% -4% -8%; background-image: radial-gradient(circle, #CBD3D6 1.1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 80%); }
.comp__layer { inset: 0; z-index: 5; pointer-events: none; } /* above the cards, so each root tip sits on its card's edge */
.comp__layer .roots { width: 100%; height: 100%; }
[data-depth] { translate: calc(var(--px, 0) * var(--depth, 0) * 8px) calc(var(--py, 0) * var(--depth, 0) * 8px); transition: translate 600ms var(--ease-out); }

.win, .loc, .chip { background: var(--white); border-radius: calc(12 * var(--u)); box-shadow: var(--shadow-ui), 0 0 0 1px rgba(28, 34, 38, .05); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(26 * var(--u)); padding-inline: calc(11 * var(--u)); background: #F1F3F2; border-bottom: 1px solid var(--ui-line); }
.win__bar i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #D5DBDE; }
.win__url { margin-left: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: 99px; background: var(--white); font-size: .82em; color: #6E777B; box-shadow: inset 0 0 0 1px var(--ui-line); }
.win__bar--sm { height: calc(20 * var(--u)); padding-inline: calc(8 * var(--u)); gap: calc(4 * var(--u)); }
.win__bar--sm i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
.win__bar--sm .win__url { font-size: .76em; margin-left: calc(4 * var(--u)); }

.win--brand { left: calc(96 * var(--u)); top: calc(20 * var(--u)); width: calc(380 * var(--u)); z-index: 3; }
.bs { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); }
.bs__nav { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.bs__nav .sk { width: calc(26 * var(--u)); }
.bs__nav .ui-btn { margin-left: auto; }
.bs__logo { width: calc(58 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--loam); }
.bs__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); align-items: center; }
.bs__copy { display: grid; gap: calc(8 * var(--u)); }
.finder { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--ui-sk-2); font-size: .82em; color: #7A8286; }
.finder svg { width: 1.1em; height: 1.1em; color: #7A8286; }
.finder em { margin-left: auto; padding: .4em .8em; border-radius: 99px; background: var(--loam); color: #fff; font-weight: 600; }
.bs__map { border-radius: calc(10 * var(--u)); background: #EAF4F7; padding: calc(8 * var(--u)); }
.bs__land { fill: #D3E7EE; }
.bs__map use { fill: var(--pink); }

.loc { width: calc(176 * var(--u)); z-index: 4; padding-bottom: calc(12 * var(--u)); }
.loc--a { left: calc(16 * var(--u)); top: calc(392 * var(--u)); }
.loc--b { left: calc(232 * var(--u)); top: calc(440 * var(--u)); }
.loc--c { left: calc(448 * var(--u)); top: calc(380 * var(--u)); }
.loc__img { height: calc(58 * var(--u)); margin: calc(8 * var(--u)) calc(8 * var(--u)) 0; border-radius: calc(7 * var(--u));
  /* a little storefront: sky, wall, striped awning, window and door */
  background:
    linear-gradient(var(--door, #2C353A), var(--door, #2C353A)) 72% 100% / 16% 42% no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) 22% 88% / 34% 26% no-repeat,
    repeating-linear-gradient(90deg, var(--awn, #3ABFE0) 0 8%, #FFFFFF 8% 16%) 50% 44% / 100% 16% no-repeat,
    linear-gradient(var(--wall, #E9E2D6), var(--wall, #E9E2D6)) 50% 100% / 100% 64% no-repeat,
    linear-gradient(#DCEEF4, #EAF5F8);
}
.loc__img--b { --awn: #FF527F; --wall: #E4E7EA; --door: #3A4247; }
.loc__img--c { --awn: #1C2226; --wall: #EFE6D2; }
.loc__name { display: block; margin: calc(9 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)); font-size: 1.02em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc { position: absolute; }
.loc .stars { margin-inline: calc(10 * var(--u)); font-size: .9em; }
.loc__btns { display: flex; gap: calc(5 * var(--u)); margin: calc(9 * var(--u)) calc(10 * var(--u)) 0; font-size: .92em; }

.chip { z-index: 6; padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.chip--rank { left: calc(404 * var(--u)); top: calc(88 * var(--u)); width: calc(236 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.chip__search { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: 99px; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); color: #5E676B; font-size: .92em; }
.chip__search svg { width: 1.05em; height: 1.05em; }
.chip__result { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.chip__fav { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--pink); flex: none; box-shadow: inset 0 0 0 calc(4 * var(--u)) #FFD4DF; }
.chip__site { display: grid; line-height: 1.25; min-width: 0; }
.chip__site b, .chip__site small, .chip__lead small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__lead { min-width: 0; }
.chip__site b { font-size: .98em; }
.chip__site small { font-size: .8em; color: #737B7F; }
.chip__pos { margin-left: auto; padding: .25em .55em; border-radius: calc(6 * var(--u)); background: var(--loam); color: #fff; font-weight: 800; font-size: .95em; }
.chip--lead { left: calc(440 * var(--u)); top: calc(262 * var(--u)); width: calc(200 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.chip__ping { position: relative; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--pink); flex: none; }
.chip__ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); opacity: 0; }
.chip__lead { display: grid; line-height: 1.25; }
.chip__lead b { font-size: 1em; }
.chip__lead small { font-size: .82em; color: #6E777B; }
.chip--chart { left: calc(-14 * var(--u)); top: calc(150 * var(--u)); width: calc(176 * var(--u)); }
.chip--chart small { display: block; font-size: .78em; font-weight: 600; color: #737B7F; margin-bottom: calc(6 * var(--u)); }
.chip--chart svg { width: 100%; height: calc(44 * var(--u)); }
.chip__area { fill: rgba(58, 191, 224, .16); }
.chip__trend { fill: none; stroke: var(--cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* roots (generated by source-images/build_roots.py) */
.roots { overflow: visible; }
.roots .rt-fill path { fill: var(--root); }
.rt-ground { stroke: var(--root); stroke-width: 1.25; }
.rt-halo { fill: var(--pink); opacity: .18; }
.rt-dot { fill: var(--pink); }
.rt-tip { transform-box: fill-box; transform-origin: center; }
.rt-m { fill: none; stroke: #fff; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.roots.is-armed .rt-m { stroke-dashoffset: 1; }
.roots.is-armed .rt-tip { opacity: 0; transform: scale(.4); }
.roots.is-armed.is-grown .rt-m { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d) linear var(--w); }
.roots.is-armed.is-grown .rt-tip { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out) var(--w), transform 480ms var(--ease-pop) var(--w); }

/* hero intro: armed by JS (is-intro), played by is-go. Transitions live on the played state only. */
.js .hero.is-intro :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions) { opacity: 0; transform: translateY(20px); }
.js .hero.is-intro .win--brand { opacity: 0; transform: translateY(calc(18 * var(--u))) scale(.97); }
.js .hero.is-intro .loc { opacity: 0; transform: translateY(calc(12 * var(--u))) scale(.92); }
.js .hero.is-intro .chip { opacity: 0; transform: translateY(calc(10 * var(--u))) scale(.94); }
.js .hero.is-intro .chip--lead { transform: translateX(calc(24 * var(--u))); }
.js .hero.is-intro .comp__grid { opacity: 0; }
.js .hero.is-intro.is-go :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions) { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--d, 0s), transform 900ms var(--ease-out) var(--d, 0s); }
.hero.is-intro .hero__title .line:nth-child(1) { --d: .06s; }
.hero.is-intro .hero__title .line:nth-child(2) { --d: .12s; }
.hero.is-intro .hero__title .line:nth-child(3) { --d: .18s; }
.hero.is-intro .hero__lede { --d: .28s; }
.hero.is-intro .hero__actions { --d: .36s; }
.js .hero.is-intro.is-go .comp__grid { opacity: 1; transition: opacity 1200ms var(--ease-out); }
.js .hero.is-intro.is-go :is(.win--brand, .loc, .chip) { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) var(--d, 0s), transform 800ms var(--ease-out) var(--d, 0s); }
.hero.is-intro .win--brand { --d: .1s; }
.hero.is-intro .chip--chart { --d: .45s; }
/* each location card lands when its root arrives (arrival times injected by build_roots.py) */
.hero.is-intro .loc--a { --d: calc(.7s + var(--arrive-a, .9s)); }
.hero.is-intro .loc--b { --d: calc(.7s + var(--arrive-b, .7s)); }
.hero.is-intro .loc--c { --d: calc(.7s + var(--arrive-c, 1.1s)); }
.hero.is-intro .chip--rank { --d: 1.9s; }
.hero.is-intro .chip--lead { --d: 2.3s; }
.js .hero.is-intro.is-go .loc { transition-timing-function: var(--ease-out), var(--ease-pop); }
.hero.is-go .chip__ping::after { animation: ping 1.4s var(--ease-out) 2.6s 3; }
.hero.is-go .chip--chart svg { animation: reveal 1.4s var(--ease-out) .7s both; }
/* stretched charts (preserveAspectRatio="none") are revealed with a clip, not dashes: dashes on a
   non-uniformly scaled, non-scaling stroke break into pieces in Chrome */
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ping { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

/* the hero keeps working after the intro: leads land on their cards, the ranking rotates cities */
.is-swap { opacity: 0; transform: translateY(-4px); }
.chip__lead small, .chip__site b, .chip__site small, .loc__name, .loc .win__url { transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.chip--lead.is-new { animation: chip-new .7s var(--ease-out); }
.chip--lead.is-new .chip__ping::after { animation: ping 1.2s var(--ease-out); }
@keyframes chip-new { 0% { transform: translateX(calc(10 * var(--u))); opacity: .4; } 100% { transform: none; opacity: 1; } }
.loc__plus { position: absolute; right: calc(9 * var(--u)); top: calc(30 * var(--u)); padding: .2em .6em; border-radius: 99px; background: var(--pink); color: var(--white); font-size: .82em; font-weight: 700; pointer-events: none; animation: plus 1.6s var(--ease-out) forwards; }
@keyframes plus { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.rt-halo { transform-box: fill-box; transform-origin: center; }
.rt-tip.is-ping .rt-halo { animation: tip-ping 1.1s var(--ease-out); }
@keyframes tip-ping { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
.chip__pos.is-pop, .loc.is-reland { animation: pop .55s var(--ease-pop); }

.hero__controls { display: flex; align-items: center; gap: 12px 16px; margin-top: 14px; }
.hero__controls .art-caption { margin: 0 0 0 auto; }
.live-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: .8125rem; font-weight: 500; color: var(--slate); border: 1px solid var(--line); background: var(--white); }
.live-toggle[hidden] { display: none; }
.live-toggle__icon { position: relative; width: 10px; height: 10px; }
.live-toggle__icon::before, .live-toggle__icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 10px; border-radius: 1px; background: currentColor; }
.live-toggle__icon::before { left: 1px; }
.live-toggle__icon::after { right: 1px; }
.live-toggle[aria-pressed="true"] .live-toggle__icon::before { width: 0; height: 0; background: none; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 0; }
.live-toggle[aria-pressed="true"] .live-toggle__icon::after { display: none; }
@media (hover: hover) and (pointer: fine) { .live-toggle:hover { color: var(--loam); border-color: var(--root); } }

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 1020px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 640px; width: 100%; margin-inline: auto; }
  .hero__art .art-caption { text-align: left; }
}

/* ---------- brands marquee ---------- */
.brands { padding-block: 26px 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.brands__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.brands__title { font-size: 1rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--slate); }
.marquee-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: var(--fs-small); font-weight: 500; color: var(--slate); border: 1px solid var(--line); }
.marquee-toggle__icon { position: relative; width: 10px; height: 10px; }
.marquee-toggle__icon::before, .marquee-toggle__icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 10px; background: currentColor; border-radius: 1px; }
.marquee-toggle__icon::before { left: 1px; }
.marquee-toggle__icon::after { right: 1px; }
.marquee-toggle[aria-pressed="true"] .marquee-toggle__icon::before { width: 0; height: 0; background: none; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 0; }
.marquee-toggle[aria-pressed="true"] .marquee-toggle__icon::after { display: none; }
@media (hover: hover) and (pointer: fine) { .marquee-toggle:hover { color: var(--loam); border-color: var(--root); } }
.marquee { overflow: hidden; }
.marquee__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.marquee__list li { flex: none; display: grid; place-items: center; height: 56px; }
.marquee__list img { height: var(--h, 40px); width: auto; max-width: none; }
.marquee.is-running { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee.is-running .marquee__track { display: flex; width: max-content; animation: marquee var(--dur, 60s) linear infinite; }
.marquee.is-running .marquee__list { flex-wrap: nowrap; justify-content: flex-start; max-width: none; margin: 0; padding-inline: 0 56px; gap: 56px; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .marquee.is-running:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.brands__head .marquee-toggle[hidden] { display: none; }

/* ---------- we grow when you grow ---------- */
.grow { padding-block: var(--section); overflow: hidden; }
.grow__statement { font-size: var(--fs-statement); font-weight: 820; font-stretch: 112%; line-height: .9; letter-spacing: -0.045em; }
.grow__statement span { display: block; }
.grow__statement span + span { padding-left: clamp(0px, 9vw, 150px); color: transparent; -webkit-text-stroke: 1.5px var(--loam); }
.grow__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 100px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.grow__body > * { min-width: 0; }
.grow__rings { max-width: 460px; width: 100%; justify-self: center; }
.rings { width: 100%; height: auto; overflow: visible; }
.ring { fill: none; stroke: #C4CDD1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ring--key { stroke: var(--loam); stroke-width: 1.6; }
.rings__core { fill: var(--pink); }
.ring__label circle { fill: var(--pink); }
.ring__label rect { fill: var(--white); stroke: var(--line); }
.ring__label text { font: 600 12px var(--font); fill: var(--loam); }
.js [data-inview] .ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-inview] .ring__label, .js [data-inview] .rings__core { opacity: 0; }
.js [data-inview].is-inview .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-out) calc(var(--i) * 110ms); }
.js [data-inview].is-inview .rings__core { opacity: 1; transition: opacity .4s; }
.js [data-inview].is-inview .ring__label { opacity: 1; transition: opacity .5s var(--ease-out) calc(.5s + var(--i) * 110ms); }
.grow__copy h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.grow__lede { margin-top: 22px; font-size: var(--fs-lede); line-height: 1.5; color: var(--loam); }
.grow__copy > p:not(.grow__lede) { margin-top: 16px; color: var(--ink-soft); }
.grow__cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 34px; padding: 22px 24px; border-radius: var(--radius-l); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.grow__cta p { flex: 1 1 18rem; font-size: .9375rem; color: var(--slate); }
.grow__cta b { display: block; color: var(--loam); font-size: 1.0625rem; }
@media (max-width: 900px) { .grow__body { grid-template-columns: minmax(0, 1fr); } .grow__rings { max-width: 360px; } }

/* ---------- our multi-location specialties: steps + sticky animated stage ---------- */
.spec { padding-block: var(--section); }
.spec__head { max-width: 44rem; }
.spec__head p { margin-top: 16px; font-size: var(--fs-lede); color: var(--on-loam-2); }
.spec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 72px); }
.spec__grid > * { min-width: 0; }
.step { min-height: 64vh; padding-block: 7vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s var(--ease-out); }
.step:first-child { padding-top: 4vh; }
.step.is-current { opacity: 1; }
.step__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 650; color: var(--cyan); }
.step__kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.step h3 { margin-top: 14px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); color: var(--white); }
.step > p { margin-top: 16px; color: var(--on-loam-2); }
.options { display: grid; gap: 10px; margin-top: 20px; }
.options__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--loam-2); box-shadow: inset 0 0 0 1px var(--loam-3); font-size: .9375rem; color: var(--on-loam-2); }
.options__item b { color: var(--on-loam); }
.options__mark { position: relative; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; box-shadow: inset 0 0 0 1.5px #56656D; }
.options__item--no .options__mark::before, .options__item--no .options__mark::after { content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 1.5px; background: #7C8C94; transform: rotate(45deg); }
.options__item--no .options__mark::after { transform: rotate(-45deg); }
.options__item--yes { background: rgba(58, 191, 224, .08); box-shadow: inset 0 0 0 1px rgba(58, 191, 224, .45); }
.options__item--yes b { color: var(--white); }
.options__item--yes .options__mark { background: var(--cyan); box-shadow: none; color: var(--loam); display: grid; place-items: center; }
.options__item--yes .options__mark svg { width: 14px; height: 14px; }

.spec__stage-wrap { position: relative; }
.stage { container-type: inline-size; position: sticky; top: calc(var(--masthead-h) + max(24px, (100vh - var(--masthead-h) - 560px) / 2)); }
.stage__rail { display: flex; gap: 6px; margin-bottom: 14px; }
.stage__rail span { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--loam-3); overflow: hidden; }
.stage__rail span::after { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.stage__rail span.is-on::after { transform: scaleX(1); }
.stage__frame {
  --s: calc(100cqw / 560);
  position: relative;
  aspect-ratio: 560 / 430;
  border-radius: calc(16 * var(--s));
  background: var(--ui-bg);
  overflow: hidden;
  font-size: calc(12 * var(--s));
  line-height: 1.3;
  color: var(--loam);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 120px -40px rgba(58, 191, 224, .35);
}
.app__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(6 * var(--s)); height: calc(34 * var(--s)); padding-inline: calc(14 * var(--s)); background: var(--white); border-bottom: 1px solid var(--ui-line); }
.app__bar > i { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: #D5DBDE; }
.app__url { position: relative; flex: 1; max-width: calc(300 * var(--s)); height: calc(22 * var(--s)); margin-inline: auto; border-radius: 99px; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); font-size: .86em; color: #6E777B; }
.app__url-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(40%); transition: opacity .25s, transform .25s; white-space: nowrap; }
.app__url-txt b { color: var(--loam); font-weight: 650; }
.stage[data-scene="1"] .app__url-txt[data-for="1"],
.stage[data-scene="2"] .app__url-txt[data-for="2"],
.stage[data-scene="3"] .app__url-txt[data-for="3"] { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) .1s, transform .5s var(--ease-out) .1s; }

.scene { position: absolute; inset: calc(34 * var(--s)) 0 0; padding: calc(16 * var(--s)); opacity: 0; visibility: hidden; transform: translateY(calc(10 * var(--s))); transition: opacity .25s, visibility 0s linear .25s, transform .25s; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out) .12s, visibility 0s, transform .6s var(--ease-out) .12s; }

/* scene 1: location sites */
.scene--sites { display: grid; grid-template-columns: calc(150 * var(--s)) minmax(0, 1fr); gap: calc(14 * var(--s)); }
.sites__list { display: flex; flex-direction: column; gap: calc(8 * var(--s)); }
.sites__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(5 * var(--s)); }
.sites__list li { display: flex; align-items: center; gap: calc(7 * var(--s)); padding: calc(6 * var(--s)) calc(8 * var(--s)); border-radius: calc(8 * var(--s)); font-size: .92em; font-weight: 600; background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); }
.sites__list li small { margin-left: auto; font-size: .78em; font-weight: 600; color: var(--up); }
.sites__list li.is-current { box-shadow: inset 0 0 0 1.5px var(--cyan); }
.brandkit { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: calc(5 * var(--s)); padding: calc(9 * var(--s)); border-radius: calc(10 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); }
.brandkit .ui-label { width: 100%; }
.brandkit__sw { width: calc(18 * var(--s)); height: calc(18 * var(--s)); border-radius: calc(5 * var(--s)); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.brandkit__aa { margin-left: auto; font-weight: 800; font-size: 1.1em; }
.lp { display: flex; flex-direction: column; gap: calc(10 * var(--s)); padding: calc(12 * var(--s)); border-radius: calc(12 * var(--s)); background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), inset 0 0 0 1px var(--ui-line); min-height: 0; }
.lp__nav { display: flex; align-items: center; gap: calc(9 * var(--s)); }
.lp__nav .sk { width: calc(26 * var(--s)); }
.lp__nav .ui-btn { margin-left: auto; }
.lp__logo { width: calc(52 * var(--s)); height: calc(11 * var(--s)); border-radius: calc(3 * var(--s)); background: var(--loam); }
.lp__hero { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(12 * var(--s)); padding: calc(12 * var(--s)); border-radius: calc(10 * var(--s)); background: #F3F7F8; }
.lp__heading { display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--s)); }
.lp__kicker { font-size: .8em; font-weight: 700; color: var(--cyan-deep); }
.lp__title { font-size: 1.28em; font-weight: 750; line-height: 1.12; letter-spacing: -.01em; }
.lp__ctas { display: flex; gap: calc(6 * var(--s)); margin-top: calc(2 * var(--s)); font-size: .95em; }
.lp__map { border-radius: calc(8 * var(--s)); overflow: hidden; background: #E3EEF1; }
.lp__map svg { width: 100%; height: 100%; }
.street { fill: none; stroke: #FFFFFF; stroke-width: 5; }
.street--thin { stroke-width: 2.4; }
.lp__pin { fill: var(--pink); }
.lp__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--s)); }
.lp__block { display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(5 * var(--s)); padding: calc(9 * var(--s)); border-radius: calc(9 * var(--s)); box-shadow: inset 0 0 0 1px var(--ui-line); }
.lp__block .ui-label { width: 100%; }
.lp__block .sk { width: 100%; }
.lp__block .sk--70 { width: 70%; }
.pill { padding: .25em .6em; border-radius: 99px; background: #EEF3F4; font-size: .78em; font-weight: 600; color: #4A5357; }
.face { width: calc(24 * var(--s)); height: calc(24 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #F0D2BD 0 30%, transparent 31%), radial-gradient(circle at 50% 110%, #3A4247 0 48%, transparent 49%), #DDE5E8; }
.face--2 { background: radial-gradient(circle at 50% 38%, #C99A7A 0 30%, transparent 31%), radial-gradient(circle at 50% 110%, #0B6A84 0 48%, transparent 49%), #DDE5E8; }
.face--3 { background: radial-gradient(circle at 50% 38%, #E8C0A4 0 30%, transparent 31%), radial-gradient(circle at 50% 110%, #FF527F 0 48%, transparent 49%), #DDE5E8; }
.toast { position: absolute; right: calc(18 * var(--s)); bottom: calc(16 * var(--s)); display: inline-flex; align-items: center; gap: calc(7 * var(--s)); padding: calc(8 * var(--s)) calc(12 * var(--s)); border-radius: 99px; background: var(--loam); color: var(--white); font-weight: 650; font-size: .92em; box-shadow: var(--shadow-ui); }
.toast svg { width: 1.2em; height: 1.2em; padding: .15em; border-radius: 50%; background: var(--up); color: #fff; }

.scene--sites .sites__list li,
.scene--sites :is(.b1, .b2, .b3, .b4, .b5),
.scene--sites .toast,
.scene--sites .brandkit { opacity: 0; transform: translateY(calc(8 * var(--s))); }
.scene--sites .lp__pin { opacity: 0; transform: translateY(-40%); transform-box: fill-box; }
.scene--sites.is-active .sites__list li { animation: rise .5s var(--ease-out) calc(.2s + var(--i) * 70ms) forwards; }
.scene--sites.is-active .brandkit { animation: rise .5s var(--ease-out) .7s forwards; }
.scene--sites.is-active .b1 { animation: rise .5s var(--ease-out) .35s forwards; }
.scene--sites.is-active .b2 { animation: rise .5s var(--ease-out) .5s forwards; }
.scene--sites.is-active .b3 { animation: rise .5s var(--ease-out) .72s forwards; }
.scene--sites.is-active .b4 { animation: rise .5s var(--ease-out) .82s forwards; }
.scene--sites.is-active .b5 { animation: rise .5s var(--ease-out) .92s forwards; }
.scene--sites.is-active .lp__pin { animation: pin-drop .6s var(--ease-pop) 1s forwards; }
.scene--sites.is-active .toast { animation: rise .5s var(--ease-pop) 1.5s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pin-drop { to { opacity: 1; transform: none; } }

/* scene 2: local search */
.scene--seo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: calc(14 * var(--s)); }
.seo__main { display: flex; flex-direction: column; gap: calc(12 * var(--s)); min-width: 0; }
.search { display: flex; align-items: center; gap: calc(8 * var(--s)); padding: calc(9 * var(--s)) calc(10 * var(--s)) calc(9 * var(--s)) calc(14 * var(--s)); border-radius: 99px; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 0 0 1px var(--ui-line); }
.search > svg { width: 1.2em; height: 1.2em; color: #7A8286; flex: none; }
.search__q { flex: 1; font-weight: 600; min-width: 0; }
.search__typed { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; border-right: 2px solid transparent; }
.search__loc { display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: 99px; background: #FFE9EF; color: #B92E55; font-size: .82em; font-weight: 650; white-space: nowrap; }
.search__loc svg { width: .8em; height: 1em; fill: currentColor; }
.serp { --row: calc(50 * var(--s)); position: relative; list-style: none; margin: 0; padding: 0; height: calc(var(--row) * 5); }
.serp__item { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--row) - 6 * var(--s)); display: flex; align-items: center; gap: calc(10 * var(--s)); padding-inline: calc(12 * var(--s)); border-radius: calc(10 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); transform: translateY(calc(var(--from) * var(--row))); }
.serp__txt { display: grid; gap: calc(5 * var(--s)); flex: 1; min-width: 0; }
.serp__txt .sk:first-child { height: .5em; }
.serp__txt small { font-size: .78em; color: #6E777B; }
.serp__txt b { font-size: .98em; font-weight: 700; color: #1A5CC8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav { width: calc(20 * var(--s)); height: calc(20 * var(--s)); border-radius: 50%; background: var(--ui-sk-2); flex: none; }
.fav--ours { background: var(--pink); box-shadow: inset 0 0 0 calc(5 * var(--s)) #FFD4DF; }
.serp__item--ours { z-index: 2; box-shadow: inset 0 0 0 1.5px var(--pink), 0 8px 20px -10px rgba(255, 82, 127, .5); }
.serp__badge { padding: .25em .55em; border-radius: calc(6 * var(--s)); background: var(--loam); color: #fff; font-weight: 800; font-size: .9em; opacity: 0; transform: scale(.6); }
.scene--seo.is-active .serp__item { transform: translateY(calc(var(--to) * var(--row))); transition: transform 1s var(--ease-in-out) 1.5s; }
.scene--seo.is-active .serp__badge { opacity: 1; transform: none; transition: opacity .3s 2.5s, transform .5s var(--ease-pop) 2.5s; }
.scene--seo .search__typed { width: 0; }
.scene--seo.is-active .search__typed { animation: typing 1s steps(16, end) .35s forwards, caret .6s step-end .35s 3; }
@keyframes typing { to { width: 16ch; } }
@keyframes caret { 50% { border-right-color: var(--loam); } }
.seo__side { display: flex; flex-direction: column; gap: calc(10 * var(--s)); padding: calc(12 * var(--s)); border-radius: calc(12 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6 * var(--s)); }
.ranks li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: calc(8 * var(--s)); padding: calc(7 * var(--s)) calc(9 * var(--s)); border-radius: calc(8 * var(--s)); background: var(--ui-bg); font-size: .95em; font-weight: 600; }
.ranks b { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.ranks em { font-size: .78em; font-weight: 700; color: var(--up); background: #DDF3EA; padding: .15em .45em; border-radius: 99px; opacity: 0; transform: scale(.6); }
.scene--seo.is-active .ranks em { opacity: 1; transform: none; transition: opacity .3s calc(2.4s + var(--i) * 90ms), transform .5s var(--ease-pop) calc(2.4s + var(--i) * 90ms); }
.trend { width: 100%; flex: 1; min-height: calc(50 * var(--s)); }
.trend__grid { stroke: var(--ui-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend__line { fill: none; stroke: var(--cyan); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.scene--seo .trend__line { clip-path: inset(0 100% 0 0); }
.scene--seo.is-active .trend__line { animation: reveal 1.6s var(--ease-out) 1.4s forwards; }

/* scene 3: leads */
.scene--leads { display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--s)); }
.kpi { padding: calc(10 * var(--s)) calc(12 * var(--s)); border-radius: calc(10 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); }
.kpi b { display: block; margin-top: calc(3 * var(--s)); font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi:first-child b { color: var(--pink-deep); }
.leads { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(10 * var(--s)); flex: 1; min-height: 0; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6 * var(--s)); align-content: start; }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(9 * var(--s)); padding: calc(8 * var(--s)) calc(10 * var(--s)); border-radius: calc(10 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); opacity: 0; transform: translateX(calc(30 * var(--s))); }
.feed__dot { position: relative; width: calc(22 * var(--s)); height: calc(22 * var(--s)); border-radius: 50%; background: #FFE3EA; }
.feed__dot::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--pink); }
.feed__dot--call { display: grid; place-items: center; background: #DDF1F7; }
.feed__dot--call::after { display: none; }
.feed__dot--call svg { width: 55%; height: 55%; fill: var(--cyan-deep); }
.feed__what { display: grid; line-height: 1.2; min-width: 0; }
.feed__what b { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__what small { font-size: .8em; color: #6E777B; }
.src { padding: .22em .55em; border-radius: 99px; font-size: .74em; font-weight: 700; }
.src--org { background: #DDF3EA; color: #13704B; }
.src--paid { background: #DDF1F7; color: var(--cyan-deep); }
.src--list { background: #FFF1D6; color: #8A5A00; }
.feed time { font-size: .76em; color: #8A9295; }
.scene--leads.is-active .feed li { animation: slide-in .6s var(--ease-out) calc(.5s + var(--i) * 280ms) forwards; }
.scene--leads.is-active .feed li:first-child .feed__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); animation: ping 1.4s var(--ease-out) 1s 2; opacity: 0; }
@keyframes slide-in { to { opacity: 1; transform: none; } }
.weekly { display: flex; flex-direction: column; gap: calc(8 * var(--s)); padding: calc(10 * var(--s)) calc(12 * var(--s)); border-radius: calc(10 * var(--s)); background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); }
.weekly__bars { flex: 1; display: flex; align-items: flex-end; gap: calc(5 * var(--s)); min-height: calc(90 * var(--s)); }
.weekly__bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: calc(4 * var(--s)) calc(4 * var(--s)) calc(2 * var(--s)) calc(2 * var(--s)); background: var(--cyan); transform: scaleY(0); transform-origin: bottom; }
.weekly__bars span:last-child { background: var(--pink); }
.scene--leads.is-active .weekly__bars span { animation: grow-y .7s var(--ease-out) calc(.6s + var(--i) * 70ms) forwards; }
@keyframes grow-y { to { transform: scaleY(1); } }

/* phones and tablets: stacked slides. Each step carries its own copy of its scene (made by main.js),
   drawn on a 400-unit frame so the screen stays readable, with the side panels dropped */
.stage--compact { display: none; }
@media (max-width: 900px) {
  .spec__stage-wrap { display: none; }
  .spec__grid { display: block; margin-top: 36px; }
  .step { min-height: 0; padding-block: 0; opacity: 1; display: block; }
  .step + .step { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--loam-3); }
  .stage--compact { display: block; position: relative; top: auto; margin-bottom: 24px; }
  .stage--compact .stage__frame { --s: calc(100cqw / 400); aspect-ratio: 400 / 380; }
  .stage--compact .app__url { max-width: calc(250 * var(--s)); }
  .stage--compact .app__url-txt { opacity: 1; transform: none; }
  .stage--compact .scene--sites { grid-template-columns: minmax(0, 1fr); }
  .stage--compact .sites__list { display: none; }
  .stage--compact .scene--seo { grid-template-columns: minmax(0, 1fr); }
  .stage--compact .seo__side { display: none; }
  .stage--compact .leads { grid-template-columns: minmax(0, 1fr); }
  .stage--compact .weekly { display: none; }
  .stage--compact .feed li:nth-child(n+6) { display: none; }   /* five leads fit the compact frame */
  .stage--compact .art-caption { margin-top: 10px; }
}

/* ---------- ready to restore your faith: the pink band ---------- */
.faith { background: var(--pink); color: var(--loam); padding-block: clamp(64px, 9vw, 130px); overflow: hidden; }
.faith__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.faith__title { font-size: clamp(2.5rem, 0.9rem + 5.6vw, 6.6rem); font-weight: 820; font-stretch: 108%; line-height: .92; letter-spacing: -0.045em; }
.faith__title span { display: block; }
.faith .btn--dark { flex: none; margin-left: auto; margin-bottom: .6em; }

/* ---------- how we help you grow: bento ---------- */
.help { padding-block: var(--section); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tile { position: relative; display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius-l); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-width: 0; }
.tile h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.tile__text p { margin-top: 10px; color: var(--ink-soft); font-size: .98rem; }
.tile__art { position: relative; container-type: inline-size; }
.tile--years { grid-column: span 7; justify-content: space-between; }
.tile--territory { grid-column: span 5; }
.tile--rollup { grid-column: span 7; }
.tile--integrations { grid-column: span 5; }
.tile--brand { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text art"; align-items: center; gap: clamp(24px, 4vw, 64px); }
.tile--brand .tile__art { grid-area: art; }
.tile--brand .tile__text { grid-area: text; }
.tile--years { background: var(--loam); color: var(--on-loam); box-shadow: none; }
.tile--years .tile__text p { color: var(--on-loam-2); }

.years { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 6px !important; }
.years b { font-size: clamp(4.6rem, 3rem + 5vw, 8rem); font-weight: 850; font-stretch: 80%; line-height: .8; letter-spacing: -0.05em; color: var(--white); font-variant-numeric: tabular-nums; }
.years span { font-size: 1.05rem; font-weight: 650; line-height: 1.2; color: var(--pink); padding-bottom: .3em; }
.timeline { position: relative; padding: 78px 6px 70px; }
.timeline__track { position: relative; height: 3px; border-radius: 3px; background: var(--loam-3); }
.timeline__fill { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--pink)); transform-origin: left; }
.timeline__marks { position: absolute; left: 6px; right: 6px; top: 79.5px; height: 0; }
.tm { position: absolute; left: calc(var(--x) * 100%); top: 0; width: 0; height: 0; }
.tm i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--loam); box-shadow: inset 0 0 0 3px var(--cyan); }
.tm--now i { box-shadow: inset 0 0 0 3px var(--pink); }
.tm em { position: absolute; left: -7px; top: 16px; display: grid; width: max-content; max-width: 150px; }
.tm--up em { top: auto; bottom: 16px; }
.tm--now em { left: auto; right: -7px; justify-items: end; text-align: right; }
.tm b { font-weight: 800; font-stretch: 80%; font-size: 1.05rem; color: var(--white); line-height: 1.2; }
.tm small { font-size: .78rem; line-height: 1.3; color: var(--on-loam-2); }
.js .tile--years[data-inview] .timeline__fill { transform: scaleX(0); }
.js .tile--years[data-inview] .tm { opacity: 0; }
.js .tile--years.is-inview .timeline__fill { transform: scaleX(1); transition: transform 1.6s var(--ease-in-out) .2s; }
.js .tile--years.is-inview .tm { opacity: 1; transition: opacity .5s var(--ease-out) calc(.3s + var(--x) * 1.4s); }

.territory svg { width: 100%; height: auto; border-radius: 14px; background: #EEF3F1; }
.territory__streets path { fill: none; stroke: #FFFFFF; stroke-width: 7; }
.territory__streets .thin { stroke-width: 3; }
.territory__streets .hwy { stroke: #F8E9B4; stroke-width: 9; }
.cell { opacity: .9; }
.cell--1 { fill: rgba(58, 191, 224, .22); }
.cell--2 { fill: rgba(255, 82, 127, .16); }
.cell--3 { fill: rgba(80, 83, 86, .12); }
.cell--4 { fill: rgba(242, 178, 51, .18); }
.border { fill: none; stroke: var(--loam); stroke-width: 2; stroke-dasharray: 6 5; }
.tpin circle { fill: var(--pink); }
.tpin .tpin__halo { opacity: .2; }
.tpin { transform-box: fill-box; }
.tlabel rect { fill: var(--white); stroke: var(--line); }
.tlabel text { font: 650 11px var(--font); fill: var(--loam); }
.js .tile--territory[data-inview] .cell { opacity: 0; }
.js .tile--territory[data-inview] :is(.tpin, .tlabel) { opacity: 0; }
.js .tile--territory[data-inview] .border { opacity: 0; }
.js .tile--territory.is-inview .cell { opacity: .9; transition: opacity .6s var(--ease-out); }
.js .tile--territory.is-inview .cell--1 { transition-delay: .5s; }
.js .tile--territory.is-inview .cell--2 { transition-delay: .7s; }
.js .tile--territory.is-inview .cell--3 { transition-delay: .9s; }
.js .tile--territory.is-inview .cell--4 { transition-delay: 1.1s; }
.js .tile--territory.is-inview .border { opacity: 1; transition: opacity .6s .35s; }
.js .tile--territory.is-inview .tpin { opacity: 1; transition: opacity .4s calc(.1s + var(--i) * 120ms); }
.js .tile--territory.is-inview .tlabel { opacity: 1; transition: opacity .5s calc(1.1s + var(--i) * 120ms); }

.rollup { display: grid; gap: 6px; font-size: .875rem; }
.rollup__head, .rollup__row { display: grid; grid-template-columns: 1.3fr .8fr .6fr 1.6fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; }
.rollup__head { font-size: .75rem; font-weight: 600; color: #737B7F; padding-block: 0 2px; }
.rollup__row { position: relative; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); font-variant-numeric: tabular-nums; }
.rollup__row > span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.rollup__bar { height: 8px; border-radius: 8px; background: var(--ui-sk); overflow: hidden; }
.rollup__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 8px; background: var(--cyan); transform-origin: left; }
.rollup__row--weak .rollup__bar i { background: var(--pink); }
.rollup__flag { position: absolute; right: 10px; top: -9px; padding: 2px 8px; border-radius: 99px; background: var(--pink); color: var(--white); font-size: .7rem; font-weight: 700; }
.rollup__row--total { background: var(--loam); color: var(--white); box-shadow: none; font-weight: 700; }
.rollup__corp { justify-self: start; padding: 3px 10px; border-radius: 99px; background: rgba(58, 191, 224, .18); color: var(--cyan); font-size: .75rem; }
.js .tile--rollup[data-inview] .rollup__row { opacity: 0; transform: translateY(8px); }
.js .tile--rollup[data-inview] .rollup__bar i { transform: scaleX(0); }
.js .tile--rollup[data-inview] .rollup__flag { opacity: 0; transform: scale(.6); }
.js .tile--rollup.is-inview .rollup__row { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) calc(var(--i, 4) * 110ms), transform .6s var(--ease-out) calc(var(--i, 4) * 110ms); }
.js .tile--rollup.is-inview .rollup__bar i { transform: scaleX(1); transition: transform .9s var(--ease-out) calc(.3s + var(--i) * 110ms); }
.js .tile--rollup.is-inview .rollup__flag { opacity: 1; transform: none; transition: opacity .3s 1.3s, transform .5s var(--ease-pop) 1.3s; }

.hub { aspect-ratio: 300 / 180; }
.hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__line { fill: none; stroke: var(--ui-sk-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hub__flow { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 14; stroke-linecap: round; opacity: 0; }
.hub__core { position: absolute; left: 50%; top: 50%; width: 22cqw; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-ui), 0 0 0 6px rgba(255, 82, 127, .08); }
.hub__core svg { width: 62%; height: 62%; fill: var(--pink); }
.hub__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; padding: .45em .8em; border-radius: 99px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px -6px rgba(0, 0, 0, .2); font-size: clamp(.7rem, 3.6cqw, .85rem); font-weight: 650; white-space: nowrap; }
.js .tile--integrations[data-inview] .hub__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .tile--integrations[data-inview] .hub__node { opacity: 0; scale: .8; }
.js .tile--integrations.is-inview .hub__line { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out) .2s; }
.js .tile--integrations.is-inview .hub__node { opacity: 1; scale: 1; transition: opacity .3s calc(.5s + var(--i) * 90ms), scale .5s var(--ease-pop) calc(.5s + var(--i) * 90ms); }
.js .tile--integrations.is-inview .hub__flow { opacity: 1; animation: flow 1.2s linear 1s 4; transition: opacity .3s 1s; }
@keyframes flow { to { stroke-dashoffset: -34; } }

.integrity { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 12px; align-items: stretch; }
.kit { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--loam); color: var(--white); }
.kit .ui-label { color: var(--on-loam-2); font-size: .75rem; }
.kit__logo { width: 70%; height: 14px; border-radius: 4px; background: var(--white); }
.kit__sw { display: flex; gap: 6px; }
.kit__sw span { width: 26px; height: 26px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.kit__aa { margin-top: auto; font-size: 1.8rem; font-weight: 800; font-stretch: 90%; line-height: 1; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 0 0 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line), 0 6px 16px -10px rgba(0, 0, 0, .25); overflow: hidden; font-size: .8125rem; }
.mini__bar { height: 30px; background: var(--loam); box-shadow: inset 0 -3px 0 var(--cyan); transform-origin: left; }
.mini__hero { height: 84px; margin: 2px 10px 2px; border-radius: 8px; background: linear-gradient(#FFFFFF, #FFFFFF) 22% 86% / 36% 24% no-repeat, repeating-linear-gradient(90deg, var(--cyan) 0 9%, #FFFFFF 9% 18%) 50% 40% / 100% 15% no-repeat, linear-gradient(#E9E2D6, #E9E2D6) 50% 100% / 100% 62% no-repeat, #DCEEF4; }
.mini__btn { align-self: flex-start; margin: 4px 10px 0; padding: 4px 10px; border-radius: 99px; background: var(--cyan); font-size: .72rem; font-weight: 700; color: var(--loam); }
.mini b { margin: 4px 10px 0; font-weight: 750; }
.mini .sk { margin-inline: 10px; width: auto; }
.mini .sk--60 { width: 50%; }
.mini__ok { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--up); color: #fff; }
.mini__ok svg { width: 12px; height: 12px; }
.js .tile--brand[data-inview] .mini__bar { transform: scaleX(0); }
.js .tile--brand[data-inview] .mini__ok { opacity: 0; scale: .5; }
.js .tile--brand[data-inview] .kit__sw span { scale: 0; }
.js .tile--brand.is-inview .kit__sw span { scale: 1; transition: scale .5s var(--ease-pop) .2s; }
.js .tile--brand.is-inview .kit__sw span:nth-child(2) { transition-delay: .3s; }
.js .tile--brand.is-inview .kit__sw span:nth-child(3) { transition-delay: .4s; }
.js .tile--brand.is-inview .mini__bar { transform: scaleX(1); transition: transform .7s var(--ease-in-out) calc(.6s + var(--i) * 180ms); }
.js .tile--brand.is-inview .mini__ok { opacity: 1; scale: 1; transition: opacity .3s calc(1.2s + var(--i) * 180ms), scale .5s var(--ease-pop) calc(1.2s + var(--i) * 180ms); }

@media (max-width: 1020px) {
  .tile--years, .tile--rollup, .tile--brand, .tile--integrations { grid-column: span 12; }
  .tile--territory { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .tile--brand { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "text"; }
}
@media (max-width: 640px) {
  .tile--territory { display: flex; }
  .integrity { grid-template-columns: minmax(0, 1fr); }
  .kit { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kit .ui-label { width: 100%; }
  .kit__logo { width: 70px; }
  .kit__aa { margin: 0 0 0 auto; }
  .rollup__head, .rollup__row { grid-template-columns: 1.2fr .7fr .6fr 1fr; gap: 6px; padding-inline: 10px; }
  .tm small { display: none; }
}

/* ---------- our marketing services: split, sticky head, illustrated tiles ---------- */
.services { padding-block: var(--section); }
.services__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.services__head { position: sticky; top: calc(var(--masthead-h) + 40px); }
.services__head p { margin-top: 16px; font-size: var(--fs-lede); color: var(--slate); line-height: 1.5; }
.services__head .btn { margin-top: 26px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svc { container-type: inline-size; display: flex; flex-direction: column; border-radius: 18px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .25s; }
@media (hover: hover) and (pointer: fine) { .svc:hover { box-shadow: inset 0 0 0 1px var(--root); } }
.svc h3 { padding: 14px 18px 18px; font-size: 1.0625rem; font-stretch: 96%; letter-spacing: -.005em; }
.svc__art { position: relative; aspect-ratio: 16 / 11; margin: 10px 10px 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--ui-line); overflow: hidden; font-size: 4.6cqw; line-height: 1.3; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .services__inner { grid-template-columns: minmax(0, 1fr); } .services__head { position: static; } }
@media (max-width: 420px) { .svc-grid { gap: 10px; } .svc h3 { padding: 12px 12px 14px; font-size: .95rem; } }

/* mini scenes: everything in cqw of .svc__art; animations run on .is-play (in view, and again on hover) */
.m-seo { display: flex; flex-direction: column; justify-content: center; gap: 5cqw; padding: 8cqw; }
.m-search { display: flex; align-items: center; gap: 3cqw; padding: 3.2cqw 5cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--ui-sk-2); font-size: 4.4cqw; font-weight: 600; color: #6E777B; }
.m-search svg { width: 5cqw; height: 5cqw; }
.m-results { position: relative; height: 36cqw; }
.m-res { position: absolute; left: 0; right: 0; top: calc(var(--pos, 0) * 12cqw); display: flex; align-items: center; gap: 3cqw; height: 10cqw; padding-inline: 3cqw; border-radius: 3cqw; background: var(--ui-bg); }
.m-res i { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--ui-sk-2); }
.m-res b { flex: 1; height: 2.6cqw; border-radius: 9px; background: var(--ui-sk-2); }
.m-res:nth-child(1) { --pos: 2; }
.m-res:nth-child(2) { --pos: 0; }
.m-res:nth-child(3) { --pos: 1; }
.m-res--ours { z-index: 1; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--pink); }
.m-res--ours i { background: var(--pink); }
.m-res--ours b { background: #9EC9F5; }
.is-play .m-res:nth-child(1) { animation: m-up 1s var(--ease-in-out) .5s forwards; }
.is-play .m-res:nth-child(2) { animation: m-down1 1s var(--ease-in-out) .5s forwards; }
.is-play .m-res:nth-child(3) { animation: m-down2 1s var(--ease-in-out) .5s forwards; }
@keyframes m-up { to { top: 0; } }
@keyframes m-down1 { to { top: 12cqw; } }
@keyframes m-down2 { to { top: 24cqw; } }

.m-rank { display: grid; grid-template-columns: 34cqw 1fr; align-items: center; gap: 5cqw; padding: 7cqw; }
.m-rank__card { display: grid; justify-items: start; gap: 1cqw; padding: 5cqw; border-radius: 4cqw; background: var(--loam); color: var(--white); }
.m-rank__card small { font-size: 4cqw; color: var(--on-loam-2); }
.m-rank__card b { font-size: 12cqw; font-weight: 850; line-height: 1; letter-spacing: -.03em; }
.m-rank__card em { padding: .5cqw 2cqw; border-radius: 99px; background: rgba(30, 154, 104, .25); color: #6FE0AE; font-size: 4cqw; font-weight: 700; }
.m-rank__chart { width: 100%; height: 38cqw; }
.m-rank__grid { stroke: var(--ui-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-rank__line { fill: none; stroke: var(--cyan); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.is-play .m-rank__line { animation: reveal 1.2s var(--ease-out) .3s both; }
.is-play .m-rank__card b { animation: pop .5s var(--ease-pop) 1.3s both; }
@keyframes pop { from { transform: scale(.7); opacity: .3; } }

.m-content { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; align-items: center; padding: 7cqw; }
.m-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; }
.m-cal span { aspect-ratio: 1; border-radius: 1.6cqw; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); }
.m-cal .t1 { background: var(--cyan); box-shadow: none; }
.m-cal .t2 { background: var(--pink); box-shadow: none; }
.m-cal .t3 { background: var(--loam); box-shadow: none; }
.m-doc { display: grid; gap: 2.4cqw; padding: 5cqw; border-radius: 3cqw; background: var(--white); box-shadow: var(--shadow-ui); }
.m-doc b { height: 4cqw; width: 80%; border-radius: 9px; background: var(--loam); }
.m-doc span { height: 2.4cqw; border-radius: 9px; background: var(--ui-sk); }
.m-doc .short { width: 60%; }
.is-play .m-cal :is(.t1, .t2, .t3) { animation: pop .45s var(--ease-pop) both; }
.is-play .m-cal span:nth-child(2) { animation-delay: .3s; } .is-play .m-cal span:nth-child(4) { animation-delay: .45s; } .is-play .m-cal span:nth-child(6) { animation-delay: .6s; } .is-play .m-cal span:nth-child(9) { animation-delay: .75s; }

.m-web { display: grid; place-items: center; padding: 6cqw; }
.m-browser { width: 100%; border-radius: 3cqw; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--ui-line); overflow: hidden; }
.m-browser__bar { display: flex; gap: 1.4cqw; padding: 2.2cqw 3cqw; background: #F1F3F2; }
.m-browser__bar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #D5DBDE; }
.m-wf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 3.6cqw; }
.m-wf__hero { grid-column: 1 / -1; height: 18cqw; border-radius: 2cqw; background: var(--loam); }
.m-wf__col { height: 11cqw; border-radius: 2cqw; background: var(--ui-sk); }
.m-wf__col:nth-child(3) { background: var(--cyan); }
.m-cursor { position: absolute; width: 8cqw; height: 8cqw; right: 20cqw; bottom: 14cqw; fill: var(--loam); stroke: #fff; stroke-width: 1.2; }
.is-play .m-wf > span { animation: pop .5s var(--ease-pop) both; }
.is-play .m-wf__col:nth-child(2) { animation-delay: .2s; } .is-play .m-wf__col:nth-child(3) { animation-delay: .3s; } .is-play .m-wf__col:nth-child(4) { animation-delay: .4s; }
.is-play .m-cursor { animation: cursor 1.4s var(--ease-in-out) .2s both; }
@keyframes cursor { from { transform: translate(14cqw, 10cqw); } 70% { transform: translate(-2cqw, -1cqw); } }

.m-ads { display: grid; place-items: center; padding: 7cqw; }
.m-ad { display: grid; gap: 2.4cqw; width: 100%; padding: 5cqw; border-radius: 3.4cqw; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--ui-line); }
.m-ad small { font-size: 3.8cqw; font-weight: 700; color: var(--loam); }
.m-ad b { height: 4cqw; width: 85%; border-radius: 9px; background: #9EC9F5; }
.m-ad span { height: 2.4cqw; border-radius: 9px; background: var(--ui-sk); }
.m-ad .short { width: 60%; }
.m-ad em { justify-self: start; margin-top: 1.4cqw; padding: 1.6cqw 3.6cqw; border-radius: 99px; background: var(--cyan); font-size: 3.8cqw; font-weight: 700; }
.m-ad__lead { position: absolute; right: 8cqw; bottom: 8cqw; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 3.4cqw; border-radius: 99px; background: var(--loam); color: #fff; font-size: 3.8cqw; font-weight: 700; opacity: 0; }
.m-ad__lead i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--pink); }
.is-play .m-ad em { animation: press .5s var(--ease-out) .5s; }
.is-play .m-ad__lead { animation: lead-in .6s var(--ease-pop) .9s forwards; }
@keyframes press { 40% { transform: scale(.92); } }
@keyframes lead-in { from { opacity: 0; transform: translateY(4cqw) scale(.8); } to { opacity: 1; transform: none; } }

.m-research { display: grid; place-items: end center; padding: 8cqw 10cqw 9cqw; }
.m-bars { display: flex; align-items: flex-end; gap: 4cqw; width: 100%; height: 44cqw; border-bottom: 1px solid var(--ui-sk-2); }
.m-bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: 2cqw 2cqw 0 0; background: var(--ui-sk-2); transform-origin: bottom; }
.m-bars .hi { background: var(--cyan); }
.m-lens { position: absolute; left: 54%; top: 16%; width: 20cqw; height: 20cqw; border-radius: 50%; border: 2.2cqw solid var(--loam); background: rgba(255, 255, 255, .35); }
.m-lens::after { content: ""; position: absolute; right: -8cqw; bottom: -5cqw; width: 9cqw; height: 2.4cqw; border-radius: 9px; background: var(--loam); transform: rotate(45deg); }
.is-play .m-bars span { animation: grow-y .7s var(--ease-out) both; }
.is-play .m-bars span:nth-child(2) { animation-delay: .08s; } .is-play .m-bars span:nth-child(3) { animation-delay: .16s; } .is-play .m-bars span:nth-child(4) { animation-delay: .24s; } .is-play .m-bars span:nth-child(5) { animation-delay: .32s; }
.is-play .m-lens { animation: lens 1.2s var(--ease-in-out) .4s both; }
@keyframes grow-y-from0 { from { transform: scaleY(0); } }
@keyframes lens { from { transform: translate(-26cqw, 10cqw); } }
.is-play .m-bars span { animation-name: grow-y-from0; }

.m-listing { display: grid; place-items: center; padding: 8cqw; }
.m-list { display: grid; grid-template-columns: 30cqw 1fr; width: 100%; border-radius: 4cqw; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--ui-line); overflow: hidden; }
.m-list__map { display: grid; place-items: center; background: repeating-linear-gradient(0deg, transparent 0 10cqw, #fff 10cqw 11.5cqw), repeating-linear-gradient(90deg, transparent 0 9cqw, #fff 9cqw 10.5cqw), #E3EEF1; }
.m-list__map svg { width: 9cqw; height: 11cqw; fill: var(--pink); }
.m-list__body { display: grid; gap: 1.6cqw; padding: 4.4cqw; }
.m-list__body b { font-size: 4.6cqw; }
.m-list__body .stars { font-size: 5cqw; }
.m-list__body em { justify-self: start; padding: .6cqw 2.6cqw; border-radius: 99px; background: #DDF3EA; color: #13704B; font-size: 3.6cqw; font-weight: 700; }
.is-play .m-list__map svg { animation: pin-bounce .7s var(--ease-pop) .3s both; }
.is-play .m-list__body .stars svg { animation: pop .4s var(--ease-pop) both; }
.is-play .m-list__body .stars svg:nth-child(2) { animation-delay: .08s; } .is-play .m-list__body .stars svg:nth-child(3) { animation-delay: .16s; } .is-play .m-list__body .stars svg:nth-child(4) { animation-delay: .24s; } .is-play .m-list__body .stars svg:nth-child(5) { animation-delay: .32s; }
@keyframes pin-bounce { from { transform: translateY(-8cqw); opacity: 0; } }

.m-links svg { width: 100%; height: 100%; }
.m-links__l { fill: none; stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.m-links__site { fill: var(--ui-bg); stroke: var(--ui-sk-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-links__page { fill: var(--loam); }
.is-play .m-links__l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s var(--ease-out) forwards; }
.is-play .m-links__l:nth-child(2) { animation-delay: .15s; } .is-play .m-links__l:nth-child(3) { animation-delay: .3s; } .is-play .m-links__l:nth-child(4) { animation-delay: .45s; }

.m-social { display: grid; place-items: center; padding: 6cqw; }
.m-post { width: 62%; border-radius: 3.4cqw; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--ui-line); overflow: hidden; }
.m-post__head { display: flex; align-items: center; gap: 2cqw; padding: 2.6cqw; }
.m-post__head i { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--pink); }
.m-post__head b { width: 40%; height: 2.4cqw; border-radius: 9px; background: var(--ui-sk-2); }
.m-post__img { height: 22cqw; background: linear-gradient(160deg, #CFE9F1, #E9DCCB); }
.m-post__foot { display: flex; align-items: center; gap: 2cqw; padding: 2.6cqw; }
.m-heart { width: 5cqw; height: 5cqw; fill: var(--pink); }
.m-post__foot span { width: 30%; height: 2.4cqw; border-radius: 9px; background: var(--ui-sk); }
.m-sched { position: absolute; right: 7cqw; top: 9cqw; padding: 1.4cqw 3cqw; border-radius: 99px; background: var(--loam); color: #fff; font-size: 3.6cqw; font-weight: 700; }
.is-play .m-heart { animation: heart .6s var(--ease-pop) .6s both; }
.is-play .m-sched { animation: lead-in .5s var(--ease-pop) .2s both; }
@keyframes heart { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

.m-reviews { display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 7cqw; }
.m-review { display: grid; gap: 2cqw; padding: 3.6cqw 4.4cqw; border-radius: 3.4cqw 3.4cqw 3.4cqw 1cqw; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); width: 82%; }
.m-review .stars { font-size: 5cqw; }
.m-review span:not(.stars) { height: 2.4cqw; border-radius: 9px; background: var(--ui-sk-2); }
.m-review .short { width: 60%; }
.m-review--reply { align-self: flex-end; width: 64%; background: var(--loam); box-shadow: none; border-radius: 3.4cqw 3.4cqw 1cqw 3.4cqw; }
.m-review--reply small { font-size: 3.4cqw; font-weight: 700; color: var(--cyan); }
.m-review--reply span { background: #4A565C !important; }
.is-play .m-review--reply { animation: lead-in .6s var(--ease-pop) .5s both; }

.m-dash { display: flex; flex-direction: column; gap: 3.6cqw; padding: 7cqw; }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.m-kpis span { display: grid; gap: 1.6cqw; padding: 2.8cqw; border-radius: 2.6cqw; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); }
.m-kpis small { height: 1.8cqw; width: 70%; border-radius: 9px; background: var(--ui-sk-2); }
.m-kpis b { height: 4.4cqw; width: 55%; border-radius: 9px; background: var(--loam); }
.m-kpis span:first-child b { background: var(--pink); }
.m-area { width: 100%; flex: 1; }
.m-area__fill { fill: rgba(58, 191, 224, .18); }
.m-area__line { fill: none; stroke: var(--cyan); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.is-play .m-area__line { animation: reveal 1.2s var(--ease-out) .2s both; }
.is-play .m-area__fill { animation: fade-in .8s ease .8s both; }
@keyframes fade-in { from { opacity: 0; } }

.m-fran { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4cqw; padding: 7cqw; }
.m-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.m-stores svg { width: 100%; aspect-ratio: 1; padding: 2.4cqw; border-radius: 3cqw; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line); fill: var(--loam); color: var(--loam); }
.m-stores svg:first-child { background: var(--loam); fill: var(--white); color: var(--white); }
.m-inquiry { display: grid; gap: 2.4cqw; padding: 4.4cqw; border-radius: 3.4cqw; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--ui-line); }
.m-inquiry small { font-size: 3.6cqw; font-weight: 700; }
.m-inquiry span { height: 5cqw; border-radius: 1.6cqw; box-shadow: inset 0 0 0 1px var(--ui-sk-2); }
.m-inquiry em { padding: 1.6cqw 2cqw; border-radius: 99px; background: var(--pink); color: var(--white); text-align: center; font-size: 3.6cqw; font-weight: 700; }
.is-play .m-stores svg:not(:first-child) { animation: pop .5s var(--ease-pop) both; }
.is-play .m-stores svg:nth-child(2) { animation-delay: .5s; } .is-play .m-stores svg:nth-child(3) { animation-delay: .7s; } .is-play .m-stores svg:nth-child(4) { animation-delay: .9s; }

/* ---------- testimonials: scroll-snap carousel ---------- */
.quotes { padding-block: var(--section); overflow: hidden; }
.quotes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.quotes__head p { margin-top: 14px; color: var(--slate); font-size: var(--fs-lede); }
.quotes__nav { display: flex; align-items: center; gap: 10px; }
.quotes__count { margin-right: 8px; font-size: .9375rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.quotes__count b { color: var(--loam); }
.round-btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, opacity .2s, transform 160ms var(--ease-out); }
.round-btn svg { width: 20px; height: 20px; }
.round-btn--prev svg { transform: rotate(180deg); }
.round-btn:active { transform: scale(.94); }
.round-btn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .round-btn:not(:disabled):hover { background: var(--loam); color: var(--white); } }
.quotes__track {
  display: flex; gap: 18px; margin-top: clamp(32px, 4vw, 48px);
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  padding-bottom: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { outline-offset: -3px; }
.qcard { flex: 0 0 min(420px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius-l); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.qcard .stars svg { width: 18px; height: 18px; fill: var(--pink); }
.qcard blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--loam); }
.qcard figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; font-size: .875rem; line-height: 1.35; color: var(--slate); }
.qcard figcaption b { display: block; color: var(--loam); font-size: 1rem; }
.qcard__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-weight: 750; font-size: .875rem; color: var(--loam); }
.qcard--lead { flex-basis: min(560px, 88vw); background: var(--loam); box-shadow: none; }
.qcard--lead blockquote p { color: var(--white); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.45; font-weight: 500; letter-spacing: -.005em; }
.qcard--lead figcaption { color: var(--on-loam-2); }
.qcard--lead figcaption b { color: var(--white); }
.qcard--lead .qcard__avatar { background: var(--pink); color: var(--loam); box-shadow: none; }

/* ---------- about: dotted map + their words ---------- */
.about { padding-block: var(--section) calc(var(--section) * .7); }
.about__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.about__inner > * { min-width: 0; }
.usmap { width: 100%; height: auto; overflow: visible; }
.usmap__dots { fill: none; stroke: #C7D0D4; stroke-width: 6.2; stroke-linecap: round; }
.usmap__pin { fill: var(--pink); stroke: var(--white); stroke-width: 3; }
.usmap__pulse { fill: none; stroke: var(--pink); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.usmap__label rect { fill: var(--loam); }
.usmap__label text { font: 700 14px var(--font); fill: var(--white); }
.usmap__label .usmap__sub { font-weight: 500; font-size: 11.5px; fill: var(--on-loam-2); }
.js .about__map[data-inview] .usmap__label > g { opacity: 0; transform: translateY(6px); }
.js .about__map.is-inview .usmap__label > g { opacity: 1; transform: none; transition: opacity .5s .6s, transform .6s var(--ease-out) .6s; }
.about__map.is-inview .usmap__pulse { animation: map-pulse 1.8s var(--ease-out) .3s 2; } /* done within 5s (WCAG 2.2.2) */
.about__map.is-inview .usmap__pulse--2 { animation-delay: 1.2s; }
@keyframes map-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
.about__copy h2 { margin-bottom: 20px; }
.about__lede { font-size: var(--fs-lede); line-height: 1.5; }
.about__copy > p:not(.about__lede) { margin-top: 16px; color: var(--ink-soft); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.facts > div { padding: 26px 20px 0 0; }
.facts > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.facts dt { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 850; font-stretch: 80%; line-height: 1; letter-spacing: -.03em; }
.facts dd { margin-top: 8px; color: var(--slate); font-size: .9375rem; line-height: 1.4; }
@media (max-width: 900px) { .about__inner { grid-template-columns: minmax(0, 1fr); } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .facts > div:nth-child(3) { padding-left: 0; border-left: 0; } }

/* ---------- demo ---------- */
.demo { position: relative; padding-block: 0 var(--section); overflow: hidden; }
.demo__ground { height: clamp(96px, 12vw, 160px); margin-bottom: clamp(24px, 4vw, 48px); }
.demo__ground .roots { width: 100%; height: 100%; }
.demo__ground .rt-fill path { fill: #3D4A51; }
.demo__ground .rt-ground { stroke: var(--root-dark); }
.demo__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.demo__inner > * { min-width: 0; }
.demo__copy h2 { color: var(--white); }
.demo__copy > p { margin-top: 18px; font-size: var(--fs-lede); line-height: 1.5; color: var(--on-loam-2); }
.demo__gets { display: grid; gap: 12px; margin-top: 30px; }
.demo__gets li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--on-loam); }
.demo__gets span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: var(--loam); }
.demo__gets svg { width: 15px; height: 15px; }
.demo__call { margin-top: 30px; color: var(--on-loam-2); }
.demo__call a { font-weight: 650; }
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-l); background: var(--loam-2); box-shadow: inset 0 0 0 1px var(--loam-3); }
.form__title { font-size: 1.25rem; font-weight: 720; color: var(--white); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .9375rem; font-weight: 500; color: var(--on-loam); }
.field__opt { color: var(--on-loam-2); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #3E4A51; border-radius: 10px; background: var(--loam); color: var(--white); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A9B4B9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(58, 191, 224, .25); }
.field.is-invalid :is(input, select) { border-color: #FF8FA9; }
.form__status { min-height: 1.5em; font-size: .9375rem; color: var(--on-loam-2); }
.form__status.is-note { color: var(--on-loam); }
@media (max-width: 900px) { .demo__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.footer { background: #151A1D; color: var(--on-loam-2); padding-block: 0 36px; font-size: .9375rem; }
.footer a { color: var(--on-loam); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { text-decoration: underline; } }
.footer__cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(56px, 7vw, 96px); }
.footer__big { max-width: 14ch; font-size: clamp(2.4rem, 1rem + 5vw, 5.4rem); font-weight: 820; font-stretch: 108%; line-height: .95; letter-spacing: -.04em; color: var(--white); }
.footer__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; padding-top: 48px; }
.footer__inner::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: #2A3237; }
.footer__logo { width: 150px; height: auto; fill: var(--pink); margin-left: -6px; }
.footer__tag { margin-top: 6px; color: var(--on-loam); }
.footer address { margin-top: 22px; line-height: 1.7; }
.footer__social { display: flex; gap: 20px; margin-top: 18px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h2 { font-size: .9375rem; font-stretch: 100%; letter-spacing: 0; font-weight: 650; color: var(--white); margin-bottom: 6px; }
.footer__twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.footer__legal { margin-top: 56px; display: grid; gap: 12px; font-size: .8125rem; line-height: 1.6; }
.footer__legal::before { content: ""; height: 1px; margin-bottom: 12px; background: #2A3237; }
.footer__legal a, .footer__cookie { color: var(--on-loam); text-decoration: underline; text-decoration-color: #4A575E; margin-left: 10px; }
.footer__concept { max-width: 62rem; }
.footer__concept a { margin-left: 0; }
@media (max-width: 900px) { .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } .footer__twocol { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Hero concepts, shown with ?hero=b and ?hero=c (compare them on hero-concepts.html)
   ========================================================================== */
.hero__rating--dark { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--on-loam-2); }
.hero__rating--dark .hero__rating-txt b { color: var(--white); }
.hero__rating--dark .hero__count { color: #8C979C; }
.btn--ghost-light { border-color: rgba(255, 255, 255, .3); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--ghost-light:hover { border-color: var(--white); } }
.live-toggle--dark { background: transparent; border-color: #3A464D; color: var(--on-loam-2); }
@media (hover: hover) and (pointer: fine) { .live-toggle--dark:hover { color: var(--white); border-color: #56656D; } }

/* ---------- B: every location, one brand. A dark hero; the dotted map is the stage ---------- */
.hero-b { position: relative; display: flex; flex-direction: column; min-height: min(820px, calc(100vh - 40px)); padding-block: clamp(48px, 6vw, 88px) 24px; overflow: hidden; }
.hero-b[hidden], .hero-c[hidden] { display: none; }
.hero-b::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 72% 48%, rgba(58, 191, 224, .10), transparent 70%); pointer-events: none; }
.hb__inner { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; }
.hb__copy { max-width: 600px; }
.hb__copy .hero__title { color: var(--white); }
.hb__copy .hero__lede { color: var(--on-loam-2); }
.hb__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hb__foot .art-caption { margin: 0; }
.hb__stage { position: absolute; z-index: 1; right: max(-60px, calc((100vw - 1440px) / 2 - 60px)); top: 52%; width: min(60vw, 960px); translate: 0 -50%; }
.hb__map { --m: calc(100cqw / 900); position: relative; container-type: inline-size; aspect-ratio: 900 / 640; }
.hnet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hnet__dots { fill: none; stroke: #34414A; stroke-width: 6.2; stroke-linecap: round; }
.hnet__arc { fill: none; stroke: var(--cyan); stroke-width: 1.3; opacity: .42; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.hnet__hub { fill: var(--cyan); }
.hnet__halo { fill: var(--pink); opacity: .22; transform-box: fill-box; transform-origin: center; }
.hnet__dot { fill: var(--pink); stroke: var(--loam); stroke-width: 2; }
.hnet__pin-in { transform-box: fill-box; transform-origin: center; }
.hnet__pin.is-ping .hnet__halo { animation: tip-ping 1.1s var(--ease-out); }
.hnet__pin.is-on .hnet__dot { fill: var(--white); stroke: var(--pink); stroke-width: 3; }

.hb__brand, .hb__detail, .hb__rollup { position: absolute; background: var(--white); color: var(--loam); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 24px 48px -20px rgba(0, 0, 0, .6); overflow: hidden; }
.hb__brand { left: 50.2%; top: 7.2%; width: 25cqw; translate: -50% -100%; font-size: 1.25cqw; }
.hb__brand .win__bar { height: 2.9cqw; gap: .6cqw; padding-inline: 1.2cqw; }
.hb__brand .win__bar i { width: .8cqw; height: .8cqw; }
.hb__brand .win__url { font-size: 1.1cqw; margin-left: .8cqw; padding: .2cqw 1cqw; }
.hb__brand-body { display: flex; align-items: center; gap: 1cqw; padding: 1.6cqw 1.6cqw 1.8cqw; }
.hb__brand-body .bs__logo { width: 5cqw; height: 1.2cqw; }
.hb__brand-body .sk { flex: 1; height: .8cqw; }
.hb__brand-body .ui-btn { font-size: 1cqw; }
.hb__detail { left: var(--x); top: var(--y); width: 23cqw; padding: 1.4cqw 1.6cqw; translate: -50% calc(-100% - 2.4cqw); font-size: 1.35cqw; line-height: 1.3; transition: left .8s var(--ease-in-out), top .8s var(--ease-in-out); }
.hb__detail::after { content: ""; position: absolute; left: 50%; bottom: -.7cqw; width: 1.4cqw; height: 1.4cqw; background: var(--white); rotate: 45deg; translate: -50% 0; }
.hb__detail-top { display: flex; align-items: center; gap: .8cqw; }
.hb__detail-top b { font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb__pos { margin-left: auto; padding: .15em .45em; border-radius: .5cqw; background: var(--loam); color: #fff; font-weight: 800; font-size: .9em; }
.hb__detail small { display: block; margin-top: .3cqw; color: #6E777B; font-size: .85em; }
.hb__detail-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: .9cqw; padding-top: .9cqw; border-top: 1px solid var(--ui-line); font-size: .9em; color: var(--slate); }
.hb__detail-row b { font-size: 1.35em; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.hb__rollup { left: 2%; bottom: 3%; width: 29%; padding: 14px 16px; font-size: .8125rem; }
.hb__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.hb__kpis small { display: block; color: #737B7F; font-size: .75rem; }
.hb__kpis b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hb__kpis div:last-child b { color: var(--pink-deep); }
.hb__bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 10px; }
.hb__bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: var(--cyan); transform-origin: bottom; transition: height .6s var(--ease-out); }
.hb__bars span:last-child { background: var(--pink); }

/* intro: armed hides everything instantly; grown draws it with timing (so arming never animates backwards) */
.hb__stage.is-armed .hnet__dots { opacity: 0; }
.hb__stage.is-armed .hnet__arc { stroke-dashoffset: 1; }
.hb__stage.is-armed .hnet__hub { opacity: 0; }
.hb__stage.is-armed .hnet__pin-in { opacity: 0; transform: scale(.3); }
.hb__stage.is-armed :is(.hb__brand, .hb__detail, .hb__rollup) { opacity: 0; transform: translateY(14px); }
.hb__stage.is-armed.is-grown .hnet__dots { opacity: 1; transition: opacity 1.2s var(--ease-out); }
.hb__stage.is-armed.is-grown .hnet__hub { opacity: 1; transition: opacity .4s .5s; }
.hb__stage.is-armed.is-grown .hnet__arc { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) calc(.6s + var(--i) * 80ms); }
.hb__stage.is-armed.is-grown .hnet__pin-in { opacity: 1; transform: none; transition: opacity .3s calc(1.2s + var(--i) * 80ms), transform .5s var(--ease-pop) calc(1.2s + var(--i) * 80ms); }
.hb__stage.is-armed.is-grown .hb__brand { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .25s, transform .7s var(--ease-out) .25s; }
.hb__stage.is-armed.is-grown .hb__rollup { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) 2.5s, transform .7s var(--ease-out) 2.5s; }
.hb__stage.is-armed.is-grown .hb__detail { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) 3s, transform .6s var(--ease-out) 3s, left .8s var(--ease-in-out), top .8s var(--ease-in-out); }
.js .hero-b.is-intro :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions) { opacity: 0; transform: translateY(20px); }
.js .hero-b.is-intro.is-go :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions) { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--d, 0s), transform 900ms var(--ease-out) var(--d, 0s); }
.hero-b .hero__title .line:nth-child(2), .hero-c .hero__title .line:nth-child(2) { --d: .08s; }
.hero-b .hero__title .line:nth-child(3), .hero-c .hero__title .line:nth-child(3) { --d: .16s; }
.hero-b .hero__lede, .hero-c .hero__lede { --d: .26s; }
.hero-b .hero__actions, .hero-c .hero__actions { --d: .34s; }

@media (max-width: 1020px) {
  .hero-b { min-height: 0; padding-bottom: 28px; }
  .hb__inner { order: 1; }
  .hb__stage { order: 2; position: relative; right: auto; top: auto; translate: none; width: calc(100% + var(--gutter)); margin: 28px 0 0 calc(var(--gutter) * -.5); max-width: none; }
  .hb__rollup { position: relative; left: auto; bottom: auto; width: auto; margin: 12px var(--gutter) 0; }
  .hb__foot { order: 3; }
}

/* ---------- C: #1 in every town. A search that plays out in three cities at once ---------- */
.hero-c { position: relative; padding-block: clamp(40px, 5vw, 76px) clamp(36px, 4vw, 56px); overflow: hidden; }
.hero-c::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #CBD3D6 1.1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 78%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 78%, #000 20%, transparent 75%); pointer-events: none; }
.hc__top { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; }
.hc__top > * { min-width: 0; }
.hc__side .hero__lede { margin-top: 0; }
.hc__side .hero__actions { margin-top: 24px; }
.hc__stage { position: relative; margin-top: clamp(30px, 4vw, 50px); }
.hc__bar { display: flex; align-items: center; gap: 12px; max-width: 760px; margin-inline: auto; padding: 12px 12px 12px 22px; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--line); font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); font-weight: 600; min-height: 62px; }
.hc__bar > svg { width: 22px; height: 22px; color: #7A8286; flex: none; }
.hc__q { white-space: nowrap; overflow: hidden; }
.hc__caret { width: 2px; height: 1.25em; margin-left: -9px; background: var(--loam); animation: caret-blink 1s step-end infinite; }
.hc__stage.is-still .hc__caret { animation: none; opacity: 0; }
@keyframes caret-blink { 50% { opacity: 0; } }
.hc__near { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 14px; border-radius: 99px; background: #FFE9EF; color: #B92E55; font-size: .875rem; font-weight: 650; white-space: nowrap; }
.hc__near svg { width: 10px; height: 13px; fill: currentColor; }
.hc__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.hc__col { min-width: 0; padding: 14px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-ui), inset 0 0 0 1px var(--line); }
.hc__city { display: flex; align-items: center; gap: 8px; font-size: .9375rem; }
.hc__city svg { width: 12px; height: 15px; fill: var(--pink); flex: none; }
.hc__city small { margin-left: auto; font-size: .75rem; color: #7A8286; }
.hc__list { --row: 54px; position: relative; list-style: none; margin: 12px 0 0; padding: 0; height: calc(var(--row) * 4); transition: opacity .3s; }
.hc__row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--row) - 6px); display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: var(--ui-bg); transform: translateY(calc(var(--to) * var(--row))); }
.hc__row .fav { width: 20px; height: 20px; }
.hc__row--ours { z-index: 2; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--pink), 0 8px 18px -10px rgba(255, 82, 127, .5); }
.hc__txt { display: grid; gap: 5px; flex: 1; min-width: 0; }
.hc__txt b { font-size: .875rem; color: #1A5CC8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc__txt small { font-size: .75rem; color: #6E777B; }
.hc__txt .sk { height: .55em; }
.hc__badge { padding: .2em .5em; border-radius: 6px; background: var(--loam); color: #fff; font-weight: 800; font-size: .8rem; }
.hc__leads { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ui-bg); font-size: .8125rem; color: var(--slate); }
.hc__leads b { margin-left: auto; font-size: 1.125rem; color: var(--loam); font-variant-numeric: tabular-nums; }
.hc__leads em { padding: .1em .5em; border-radius: 99px; background: #DDF3EA; color: #13704B; font-size: .75rem; font-weight: 700; }
.hc__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hc__foot .art-caption { margin: 0; }

/* each round: armed puts every row back where it started (instantly), climb moves them with timing */
.hc__stage.is-armed .hc__row { transform: translateY(calc(var(--from) * var(--row))); }
.hc__stage.is-armed .hc__list { opacity: .45; }
.hc__stage.is-armed :is(.hc__badge, .hc__leads em) { opacity: 0; transform: scale(.6); }
.hc__stage.is-climb .hc__row { transition: transform .9s var(--ease-in-out) calc(.2s + var(--c) * 150ms); }
.hc__stage.is-climb .hc__col { --c: inherit; }
.hc__stage.is-climb :is(.hc__badge, .hc__leads em) { transition: opacity .3s calc(1.1s + var(--c) * 150ms), transform .5s var(--ease-pop) calc(1.1s + var(--c) * 150ms); }
.js .hero-c.is-intro :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions, .hc__bar, .hc__col) { opacity: 0; transform: translateY(18px); }
.js .hero-c.is-intro.is-go :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions, .hc__bar, .hc__col) { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--d, 0s), transform 900ms var(--ease-out) var(--d, 0s); }
.hero-c .hc__bar { --d: .45s; }
.hero-c .hc__col { --d: calc(.6s + var(--c) * .1s); }

@media (max-width: 900px) {
  .hc__top { grid-template-columns: minmax(0, 1fr); }
  .hc__cols { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .hc__cols::-webkit-scrollbar { display: none; }
  .hc__col { flex: 0 0 84%; scroll-snap-align: center; }
  .hc__near { display: none; }
}

/* reduced motion and ?static: concepts show their final frame */
@media (prefers-reduced-motion: reduce) {
  .hc__caret { animation: none; }
  .js :is(.hero-b, .hero-c).is-intro :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions, .hc__bar, .hc__col) { transform: none !important; }
}

/* ---------- consent overrides ---------- */
.consent__star { width: 22px; height: 22px; fill: var(--pink); }
.consent__title { font-weight: 720; font-stretch: 90%; }
.consent .btn { border-radius: 10px; }

/* ---------- ?static and reduced motion: gentler, not zero ---------- */
.is-static .loader { display: none !important; }
/* ?static: every scene lands on its final frame at once, for reviews and screenshots.
   Steps size to their content, since full-page captures use a very tall window (vh would explode). */
.is-static .step { min-height: 0; padding-block: 40px; opacity: 1; }
.is-static *, .is-static *::before, .is-static *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .loader { display: none; }
  [data-depth] { translate: none !important; }
  .roots.is-armed .rt-m { stroke-dashoffset: 0; }
  .roots.is-armed .rt-tip { opacity: 1; transform: none; }
  .js .hero.is-intro :is(.hero__rating, .hero__title .line, .hero__lede, .hero__actions, .win--brand, .loc, .chip) { transform: none !important; }
  .menu, .menu.is-open { transition: opacity .3s, visibility 0s linear .3s; clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; transition: opacity .3s, visibility 0s; }
  .menu__nav a { transform: none !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .scene, .scene.is-active { transform: none; }
  .serp__item { transition: none !important; }
  .step { opacity: 1; }
}