/* Mainstreet homepage prototype, Premium Pass 2. Provisional design system: colors and type are NOT final. */

@font-face { font-family: "Archivo Head"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/archivo-800-latin.woff2") format("woff2"); }

:root {
  --paper: #f6f4ef;
  --paper-2: #ece8df;
  --line-strong: #a9a595;
  --hair: rgba(22, 41, 63, .13);
  --skel: #e6e9ee;
  --text: #1f2a36;
  --muted: #4d5a67;
  --base: #16293f;
  --base-quiet: #1b3049;
  --on-base: #f6f4ef;
  --on-base-muted: #c9d1db;
  /* Amber is a signal color: primary CTA, completion checks, the "You decide" step and its message. */
  --accent: #f0a020;
  /* Muted brass for quiet detail. */
  --brass: #b48a3a;
  --brass-ink: #7a5a1e;
  --focus: #16293f;
  /* Display roles only (h1, h2, big numbers; h3 stays on the system sans): self-hosted Archivo 800, Latin subset, SIL OFL 1.1
     (assets/fonts/OFL-Archivo.txt). Body copy, buttons and nav stay on the system stacks below. */
  --head: "Archivo Head", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Heading tuning: when a display font is approved, set --display above and adjust these. */
  --h1-wght: 800; --h2-wght: 800; --h1-track: -.018em; --h2-track: -.018em; --wm-strong: 800; --wm-light: 500;
  --mono: ui-monospace, Consolas, "Courier New", monospace;
  /* Surface system: three radii, one hairline, three static elevations. */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(22, 41, 63, .07), 0 2px 8px -2px rgba(22, 41, 63, .08);
  --sh-2: 0 1px 2px rgba(22, 41, 63, .08), 0 8px 18px -8px rgba(22, 41, 63, .2);
  --sh-3: 0 2px 4px rgba(22, 41, 63, .08), 0 16px 34px -14px rgba(22, 41, 63, .32);
  --gutter: clamp(1rem, 4vw, 2rem);
  --seam: clamp(1rem, 2.6vw, 2rem);
}
/* Quick base-color test: change data-base on <html> to navy, slate or green. */
html[data-base="slate"] { --base: #232f3b; --base-quiet: #2a3744; --focus: #232f3b; }
html[data-base="green"] { --base: #143a30; --base-quiet: #18402f; --focus: #143a30; }
/* Phones: lighter shadows. */
@media (max-width: 47.99rem) {
  :root {
    --sh-2: 0 1px 2px rgba(22, 41, 63, .08), 0 4px 10px -6px rgba(22, 41, 63, .18);
    --sh-3: 0 1px 3px rgba(22, 41, 63, .1), 0 8px 18px -10px rgba(22, 41, 63, .26);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 1.0625rem/1.6 var(--sans); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.section-base :focus-visible { outline-color: var(--accent); }

.skip { position: absolute; left: -999px; top: 0; background: var(--base); color: var(--on-base); padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: 0; }
.wrap { width: min(100%, 72rem); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 46rem; }
.center { text-align: center; }

/* Text links */
.section a:not(.btn), .site-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-thickness .12s ease, color .12s ease; }
@media (hover: hover) { .section a:not(.btn):hover, .site-footer a:hover { text-decoration-thickness: 2px; color: var(--base); } }
.tel { font-weight: 700; color: var(--base); }
.section-base .tel { color: var(--on-base); }

/* Review notes: one small muted line per affected section. Open items live in HTML comments. */

/* Header: a typographic wordmark, a quiet phone link, a compact CTA. */
.site-header { background: var(--paper); border-bottom: 1px solid var(--hair); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: flex; flex-direction: column; justify-content: center; gap: .3rem; text-decoration: none; color: var(--base); }
.wm { font: var(--wm-light) 1.45rem/1 var(--display); letter-spacing: -.04em; }
.wm b { font-weight: var(--wm-strong); }
.brand-sub { display: none; font: 700 .625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.head-actions { display: flex; align-items: center; gap: .5rem; }
.head-phone { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; min-height: 2.75rem; color: var(--base); text-decoration: none; font: 700 .9375rem var(--sans); }
.ico-phone { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ph-num { display: none; }
.long { display: none; }

/* Buttons: one raised style, a quiet hover lift, a small press. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .75rem 1.6rem; background: var(--accent); color: var(--base); font: 800 1.0625rem var(--display); letter-spacing: -.005em; text-decoration: none; border: 0; border-radius: var(--r-md); box-shadow: inset 0 -2px 0 rgba(22, 41, 63, .16), 0 1px 2px rgba(22, 41, 63, .22), 0 8px 18px -10px rgba(22, 41, 63, .55); transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); background: #f4ad3a; box-shadow: inset 0 -2px 0 rgba(22, 41, 63, .16), 0 2px 4px rgba(22, 41, 63, .22), 0 12px 22px -10px rgba(22, 41, 63, .6); } }
.btn:active { transform: translateY(0) scale(.985); box-shadow: inset 0 -1px 0 rgba(22, 41, 63, .16), 0 1px 2px rgba(22, 41, 63, .25); }
.btn-sm { min-height: 2.5rem; padding: .3rem .95rem; font-size: .875rem; border-radius: 10px; box-shadow: inset 0 -2px 0 rgba(22, 41, 63, .14), 0 1px 2px rgba(22, 41, 63, .2); }
.section-base .btn { box-shadow: inset 0 -2px 0 rgba(22, 41, 63, .18), 0 8px 18px -10px rgba(0, 0, 0, .6); }
.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.75rem; }
.center .cta-row { align-items: center; }
.micro { font-size: .9375rem; color: var(--muted); }
.section-base .micro { color: var(--on-base-muted); }

/* Hero */
.hero { padding-block: clamp(2rem, 7vw, 4.5rem); overflow-x: clip; }
.hero-grid { display: grid; gap: 2rem; }
.eyebrow { font: 800 .8125rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); }
h1 { margin-top: .7rem; font: var(--h1-wght) clamp(2.2rem, 7vw + .5rem, 4rem)/1.04 var(--head); letter-spacing: var(--h1-track); color: var(--base); text-wrap: balance; }
.br-d { display: none; }
/* Mainstreet signature: the closing line, a thin rule that ends in a check. Used in the hero, the final call
   to action, the timeline end and the seal. */
.hl { position: relative; display: inline-block; padding-right: .62em; }
.hl::after { content: ""; position: absolute; left: 0; right: .46em; bottom: -.04em; height: .06em; background: var(--brass); }
.hl::before { content: ""; position: absolute; right: .12em; bottom: 0; width: .17em; height: .34em; border-right: .06em solid var(--brass); border-bottom: .06em solid var(--brass); transform: rotate(45deg); }
.closer { position: relative; display: block; width: 5rem; height: 1.3rem; margin: 0 auto 1rem; }
.closer::before { content: ""; position: absolute; left: 0; right: 1.7rem; top: .85rem; height: 2px; background: var(--brass); }
.closer::after { content: ""; position: absolute; right: .6rem; top: .05rem; width: .5rem; height: .95rem; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg); }
.final h2::before { display: none; }
.lede { margin-top: 1.1rem; font-size: 1.1875rem; max-width: 34rem; text-wrap: pretty; }
.deal { margin-top: 1.25rem; padding: .85rem 1rem; max-width: 34rem; background: #fff; border: 1px solid var(--hair); border-left: 4px solid var(--base); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.deal strong { color: var(--base); }
.alt-contact { margin-top: 1rem; font-size: .9375rem; color: var(--muted); }
.section-base .alt-contact { color: var(--on-base-muted); }

/* Sections */
.section { position: relative; padding-block: clamp(3rem, 9vw, 5.5rem); }
.section-alt { background: var(--paper-2); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.section p + p, .section p + ul, .section ul + p, .section p + dl, .section dl + p { margin-top: 1rem; }
h2 { font: var(--h2-wght) clamp(1.7rem, 4vw + .6rem, 2.6rem)/1.08 var(--head); letter-spacing: var(--h2-track); color: var(--base); text-wrap: balance; }
h2::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: 1rem; background: rgba(22, 41, 63, .35); }
.center h2::before { margin-inline: auto; }
h2 + * { margin-top: 1.5rem; }
h3 { font: 700 1.125rem/1.3 var(--sans); color: var(--base); text-wrap: balance; }

/* Dark bands: a quieter surface, a very faint line pattern, small angled seams (static CSS, no motion). */
.section-base { z-index: 1; background-color: var(--base-quiet); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 22px); color: var(--on-base); padding-block: clamp(3.5rem, 10vw, 6.5rem); }
.section-base h2 { color: var(--on-base); }
.section-base h2::before { background: rgba(246, 244, 239, .4); }
.section-base h3 { color: var(--on-base); }
.section-base .narrow { max-width: 40rem; }
.section-base:not(.final)::before, .section-base:not(.final)::after { content: ""; position: absolute; left: 0; right: 0; height: var(--seam); background: var(--base-quiet); pointer-events: none; }
.section-base:not(.final)::before { bottom: 100%; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.section-base:not(.final)::after { top: 100%; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* The final band sits over the section above like a sheet. */
.final { margin-top: -1.5rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* Recognition: open (not yet done) boxes */
.open-list li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--hair); }
.open-list li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 1.05rem; height: 1.05rem; border: 2px solid var(--line-strong); border-radius: 4px; }
.close-note { margin-top: 1.5rem; }
.reserved { font: 800 1.35rem/1.25 var(--display); letter-spacing: -.02em; color: var(--base); text-wrap: balance; }

/* Handle: done (checked) items. The check is a completion state, so it keeps the accent. */

/* The $100 start timeline: a quiet rail that ends at "You decide", the one amber step. */
.steps { counter-reset: s; margin-left: 1.25rem; }
.section-base h2 + .steps { margin-top: 2.75rem; }
.steps li { position: relative; padding: 0 0 2.25rem 2.6rem; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: -1.3rem; top: -.2rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--base-quiet); color: var(--on-base); border: 1px solid rgba(196, 154, 76, .85); border-radius: 50%; font: 700 1.05rem var(--display); box-shadow: 0 0 0 5px var(--base-quiet); }
.steps li::after { content: ""; position: absolute; left: -1px; top: 2.6rem; bottom: -.2rem; width: 2px; background: rgba(196, 154, 76, .7); transform-origin: top; }
.steps li:nth-child(5)::after { width: 0; background: none; border-left: 2px dashed rgba(196, 154, 76, .7); }
.steps h3 { padding-top: .1rem; font-size: 1.1875rem; }
.steps p { margin-top: .3rem; color: var(--on-base-muted); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps li:last-child::before { left: -1.7rem; top: -.4rem; width: 3.4rem; height: 3.4rem; background: transparent; color: var(--accent); border: 2px solid var(--accent); font-size: 1.3rem; }
.steps li:last-child { padding-left: 3rem; }
.steps li:last-child h3 { padding-top: .2rem; font: 800 clamp(1.7rem, 6vw, 2.1rem)/1.1 var(--head); letter-spacing: var(--h2-track); }
/* The closing line: a brass rule that ends in a check, under the final message. */
.steps .callout { position: relative; margin-top: 1.4rem; padding: 1.15rem 2.2rem 0 0; font: 700 1.25rem/1.35 var(--display); letter-spacing: -.01em; color: var(--on-base); }
.steps .callout::before { content: ""; position: absolute; left: 0; right: 1.7rem; top: 0; height: 2px; background: var(--accent); }
.steps .callout::after { content: ""; position: absolute; right: .6rem; top: -.8rem; width: .5rem; height: .95rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.callout strong { font-weight: inherit; }
.wrap-wide { width: min(100%, 80rem); }
@media (min-width: 48rem) {
  .steps { max-width: 62rem; margin-left: 1.5rem; }
  .steps li { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; padding-bottom: 2.6rem; padding-left: 3.6rem; }
  .steps li:last-child { padding-left: 3.6rem; }
  .steps li p { margin-top: .15rem; }
  .steps .callout { grid-column: 2; margin-top: 1.6rem; }
}
/* Wide screens: one horizontal journey. A solid line for the included part, a dashed line into the final choice. */
@media (min-width: 75rem) {
  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.7fr); column-gap: 1.5rem; max-width: none; margin-left: 0; }
  .steps li, .steps li:last-child { display: block; padding: 4.3rem 0 0; }
  .steps li::before { left: 0; top: 0; }
  .steps li:last-child::before { left: 0; top: -.4rem; }
  .steps li::after { left: 3.4rem; right: -.7rem; top: 1.3rem; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .steps li:nth-child(5)::after { width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(196, 154, 76, .7); }
  .steps li p { margin-top: .4rem; }
  .steps li:last-child h3 { font-size: 2.25rem; }
  .steps .callout { margin-top: 1.75rem; }
}


/* Who */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .35rem .85rem; background: #fff; border: 1px solid var(--hair); border-radius: 999px; font-weight: 600; color: var(--base); box-shadow: var(--sh-1); }
.fit-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.fit-grid > div { padding-top: .9rem; border-top: 2px solid var(--base); }

/* Why */

/* Offer: one progression. $100 is the entry point. $500 a month is a later, optional choice (dashed, quieter). */
.offer { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.offer li { position: relative; padding: 0 0 2rem 1.7rem; border-left: 2px solid var(--brass); }
.offer li::before { content: ""; position: absolute; left: -.43rem; top: .6rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--brass); }
.offer .o-later { margin-top: .9rem; padding-bottom: 0; border-left: 2px dashed rgba(22, 41, 63, .4); }
.offer .o-later::before { background: var(--paper); border: 2px solid rgba(22, 41, 63, .5); }
.offer .o-days::after { content: ""; position: absolute; left: -.34rem; bottom: .2rem; width: .55rem; height: 1rem; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg); }
.o-num { font: 800 clamp(2.8rem, 13vw, 3.6rem)/1 var(--head); letter-spacing: -.03em; color: var(--base); }
.o-start .o-num { font-size: clamp(5rem, 27vw, 7.25rem); letter-spacing: -.05em; }
.o-num span { margin-left: .12em; font-size: .5em; letter-spacing: 0; }
.o-sub { margin-top: .55rem; font: 700 1.1875rem/1.3 var(--sans); color: var(--base); }
.o-later .o-num, .o-later .o-sub { color: var(--muted); }
.o-later .o-num { font-size: clamp(2.3rem, 10vw, 3rem); }
.o-note { margin-top: .9rem; font: 800 1.0625rem/1.3 var(--sans); color: var(--base); }
.offer .cta-row { align-items: flex-start; flex-direction: column; gap: .5rem; margin-top: 1.25rem; }
.cost-text { margin-top: 2.25rem; max-width: 40rem; }
/* Why owners pick Mainstreet: a quiet row of alternatives, with Mainstreet raised and emphasized between them. */
.compare { margin: 2.25rem 0 0; }
.compare > div { padding: 1.2rem 0 1.4rem 1.5rem; border-left: 2px solid rgba(22, 41, 63, .22); }
.compare dt { font: 800 1.125rem/1.25 var(--sans); color: var(--muted); }
.compare dd { margin-top: .4rem; color: var(--muted); }
.compare .c-us { margin-block: .5rem; padding-block: 1.4rem 1.6rem; border-left: 5px solid var(--base); }
.compare .c-us dt { font: 800 clamp(2.1rem, 9vw, 2.7rem)/1.05 var(--head); letter-spacing: var(--h2-track); color: var(--base); }
.compare .c-us dd { margin-top: .7rem; max-width: 30rem; font-size: 1.1875rem; font-weight: 600; color: var(--text); }
@media (min-width: 62rem) {
  .compare { display: grid; grid-template-columns: 1fr 1fr 1.7fr 1fr; margin-top: 3rem; }
  .compare > div { padding: 1.6rem 2rem 0 0; border-left: 0; border-top: 2px solid rgba(22, 41, 63, .22); }
  .compare .c-us { margin-block: 0; padding: 1.9rem 2rem 0 0; border-left: 0; border-top: 5px solid var(--base); }
}

/* Who is behind Mainstreet: a compact identity and trust strip, not a text block. */
#about { padding-block: clamp(2.5rem, 7vw, 4rem); }
.trust { display: grid; gap: 1.5rem; margin-top: 1.75rem; padding-block: 1.6rem; border-top: 2px solid var(--base); border-bottom: 1px solid var(--hair); }
.t-id { font: 700 1.25rem/1.35 var(--sans); color: var(--base); }
.t-label { font: 800 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.t-tel { display: inline-block; padding-block: .2rem; white-space: nowrap; font: 800 clamp(2rem, 9vw, 2.5rem)/1.1 var(--head); letter-spacing: -.02em; text-decoration: none; }
.t-pay p + p, .t-call .t-label + .t-tel { margin-top: .35rem; }
.t-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .9rem; }
@media (hover: hover) { .t-tel:hover { text-decoration: underline; } }
@media (min-width: 62rem) {
  .trust { grid-template-columns: 1fr 1.15fr 1.4fr; column-gap: 0; align-items: start; }
  .t-call, .t-pay { padding-left: 2.5rem; border-left: 1px solid var(--hair); }
  .t-id { padding-right: 2.5rem; }
  .t-tel { font-size: 1.95rem; }
}
@media (min-width: 60rem) {
  .offer { display: grid; grid-template-columns: 1.35fr 1.15fr 1fr; margin-top: 3.25rem; }
  .offer li { padding: 1.9rem 2rem 0 0; border-left: 0; border-top: 2px solid var(--brass); }
  .offer li::before { left: 0; top: -.4rem; }
  .offer .o-days { margin-right: 3rem; padding-right: 0; }
  .offer .o-days::after { left: auto; right: -2.55rem; bottom: auto; top: -.9rem; }
  .offer .o-later { margin-top: 0; padding-right: 0; border-top: 2px dashed rgba(22, 41, 63, .4); border-left: 0; }
  .o-start .o-num { font-size: clamp(7rem, 10.5vw, 9rem); }
  .o-num { font-size: clamp(3.4rem, 5vw, 4.5rem); }
  .o-later .o-num { font-size: clamp(2.6rem, 3.6vw, 3.2rem); }
  .o-sub { font-size: 1.3125rem; }
  .offer .cta-row { margin-top: 2rem; }
  .cost-text { margin-top: 3.25rem; }
}
/* About / contact */
.contact li { padding: .2rem 0; }
.section-alt a { font-weight: 600; }

/* FAQ (native details: works with no JavaScript) */
.faq { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding-inline: 1.25rem; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 3.5rem; padding: .5rem 0; font-weight: 700; color: var(--base); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .2rem; border-right: 2px solid var(--base); border-bottom: 2px solid var(--base); transform: rotate(45deg); transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: 1rem; margin: 0; }

/* Final */
.final .deal-line { font-size: 1.1875rem; color: var(--on-base-muted); }

/* Footer */
.site-footer { padding-block: 2rem; font-size: .9375rem; color: var(--muted); }
.site-footer p + p { margin-top: .5rem; }
.site-footer a { margin-right: 1rem; }

/* ---------- Hero stage (Stage 1): the website is the hero object. The scene scales with its own width (container units);
   the Google listing and review pieces are small supporting cards. Example content only. ---------- */
.stage { position: relative; isolation: isolate; padding: 1.4rem 1.4rem 1.5rem; color: var(--on-base); border-radius: 20px; background: radial-gradient(60% 55% at 36% 30%, rgba(96, 140, 196, .34) 0%, rgba(96, 140, 196, 0) 70%), radial-gradient(40% 35% at 90% 6%, rgba(240, 160, 32, .07) 0%, rgba(240, 160, 32, 0) 70%), linear-gradient(165deg, #1b3454 0%, #0e1d32 100%); box-shadow: var(--sh-3); }
.demo-label { display: block; margin: 0; padding: 0; font: 700 .6875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(219, 227, 238, .62); }
.scene { --k: 1; container-type: inline-size; position: relative; aspect-ratio: 100 / 74; margin-top: 1rem; }

/* The desktop website */
.site-frame { position: absolute; z-index: 1; left: 4cqw; top: 0; width: 84cqw; overflow: hidden; background: #fff; border-radius: 1.6cqw; box-shadow: 0 4cqw 8cqw -2cqw rgba(0, 0, 0, .55), 0 1.2cqw 2.6cqw rgba(0, 0, 0, .22), 0 0 0 .15cqw rgba(255, 255, 255, .08); }
.frame-bar { display: flex; align-items: center; gap: 1cqw; height: 4.4cqw; padding: 0 2cqw; background: #e8ecf1; }
.frame-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #c2c9d3; }
.url { flex: 0 1 38cqw; margin-left: 2cqw; padding: 0 1.4cqw; height: 2.5cqw; line-height: 2.5cqw; border-radius: 1.3cqw; background: #fff; font-size: 1.5cqw; color: #6a7683; white-space: nowrap; overflow: hidden; }
.site { font-family: var(--sans); color: var(--text); }
.s-nav, .s-hero, .s-services { position: relative; }
.s-nav { display: flex; align-items: center; justify-content: space-between; height: 6.8cqw; padding: 0 3cqw; border-bottom: 1px solid #e8ebef; }
.s-logo { display: inline-flex; align-items: center; gap: 1cqw; font: 800 2.4cqw var(--display); letter-spacing: -.01em; color: var(--base); }
.s-ico { width: 2.6cqw; height: 2.6cqw; fill: none; stroke: var(--base); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-links { display: inline-flex; gap: 2.6cqw; font-size: 1.7cqw; font-weight: 600; color: #5b6774; }
.s-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2cqw; align-items: center; padding: 3.6cqw 3cqw 3.2cqw; background: linear-gradient(180deg, #f6f8fb, #fff); }
.s-copy { display: grid; justify-items: start; }
.s-label { font-size: 1.45cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.s-h { margin: 1cqw 0 1.1cqw; font: 800 4.7cqw/1.06 var(--display); letter-spacing: -.03em; color: var(--base); }
.s-sub { font-size: 1.85cqw; line-height: 1.4; color: #55616d; }
.s-btns { display: flex; gap: 1.4cqw; margin-top: 2.3cqw; }
.s-b1, .s-b2 { display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 2.2cqw; border-radius: 1cqw; font-size: 1.8cqw; font-weight: 800; }
.s-b1 { background: var(--base); color: #fff; }
.s-b2 { border: 1px solid rgba(22, 41, 63, .25); color: var(--base); }
.s-ph { width: 1.8cqw; height: 1.8cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-art { display: block; padding: 1.6cqw; border-radius: 2cqw; background: #e9eff6; }
.s-art svg, .p-art svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--base); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.s-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 2.4cqw 3cqw; border-top: 1px solid #e8ebef; }
.s-svc { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; font-weight: 700; color: var(--base); }
.s-svc svg { box-sizing: content-box; width: 2.2cqw; height: 2.2cqw; padding: .8cqw; border-radius: 50%; background: #e9eff6; fill: none; stroke: var(--base); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The same site on a phone (its own container, so it scales with the phone) */
.phone { container-type: inline-size; position: absolute; z-index: 3; left: 0; top: 31cqw; width: 21cqw; aspect-ratio: 1 / 1.95; padding: 1cqw; border-radius: 3.6cqw; background: #0c1624; box-shadow: 0 2.2cqw 4cqw -1.4cqw rgba(0, 0, 0, .5), 0 .6cqw 1.4cqw rgba(0, 0, 0, .18), 0 0 0 .12cqw rgba(255, 255, 255, .1); }
.p-screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.8cqw; background: #fff; font-family: var(--sans); }
.p-nav { display: flex; align-items: center; justify-content: space-between; height: 15cqw; padding: 0 6cqw 0 7cqw; border-bottom: 1px solid #e8ebef; }
.p-logo { display: inline-flex; align-items: center; gap: 1.6cqw; white-space: nowrap; font: 800 6cqw var(--display); color: var(--base); }
.p-logo svg { width: 7.5cqw; height: 7.5cqw; fill: none; stroke: var(--base); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.p-menu { width: 8cqw; height: 8cqw; fill: none; stroke: var(--base); stroke-width: 2; stroke-linecap: round; }
.p-hero { display: grid; justify-items: start; padding: 8cqw 8cqw 5cqw; background: linear-gradient(180deg, #f6f8fb, #fff); }
.p-label { font-size: 4.6cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.p-h { margin: 2.4cqw 0 5cqw; font: 800 12cqw/1.06 var(--display); letter-spacing: -.03em; color: var(--base); }
.p-call { display: inline-flex; align-items: center; gap: 3cqw; padding: 4cqw 7cqw; border-radius: 4cqw; background: var(--base); color: #fff; font-size: 7.6cqw; font-weight: 800; }
.p-call svg { width: 7cqw; height: 7cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-art { display: block; margin: 0 8cqw; padding: 4cqw; border-radius: 5cqw; background: #e9eff6; }


/* Supporting pieces: smaller, positioned around the website */
.sat { position: absolute; z-index: 2; padding: 1.6cqw 1.8cqw; border-radius: 1.6cqw; background: #f3f6f9; color: var(--text); box-shadow: 0 1.4cqw 3cqw -1.2cqw rgba(0, 0, 0, .4); font-family: var(--sans); }
.sat-listing { right: 0; top: 40cqw; width: 29cqw; }
.sat-review { right: 5cqw; top: 57.5cqw; width: 28cqw; }
.sat-head { display: flex; align-items: center; gap: 1cqw; }
.sat-head svg { width: calc(2.2cqw * var(--k)); height: calc(2.2cqw * var(--k)); fill: none; stroke: var(--base); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sat-head b { font: 800 calc(1.9cqw * var(--k)) var(--display); color: var(--base); }

.sat-chips { display: flex; flex-wrap: wrap; gap: .7cqw; margin-top: 1cqw; }
.sat-chips span { padding: .5cqw 1.3cqw; border-radius: 99px; background: #dce8e1; font-size: calc(1.4cqw * var(--k)); font-weight: 600; }
.sat-bubble { margin-top: 1cqw; padding: 1cqw 1.4cqw; border-radius: 1.4cqw 1.4cqw 1.4cqw .4cqw; background: #dfe7f1; font-size: calc(1.45cqw * var(--k)); line-height: 1.35; }

/* The completion list: real text, always visible */
.rows { display: grid; gap: .6rem; margin-top: 1.1rem; }
.rows li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; font-size: .8125rem; line-height: 1.4; color: var(--on-base-muted); }
.rows b { margin-right: .4rem; font: 800 .9375rem var(--display); color: var(--on-base); }
.tick { position: relative; display: grid; place-items: center; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.tick .on { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--base); }
.tick svg { width: .9rem; height: .9rem; }

/* The seal and the small closing line */
.demo-end { position: absolute; right: 0; top: 2cqw; z-index: 5; display: flex; align-items: center; gap: .55rem; }
.closer-sm { position: relative; display: none; width: 2.4rem; height: 1rem; }
.closer-sm::before { content: ""; position: absolute; left: 0; right: .9rem; top: .55rem; height: 2px; background: var(--brass); transform-origin: left; }
.closer-sm::after { content: ""; position: absolute; right: .25rem; top: .02rem; width: .36rem; height: .66rem; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg); }
.seal { display: flex; align-items: center; gap: .5rem; width: fit-content; margin: 0; padding: .4rem 1rem .4rem .45rem; border-radius: 999px; background: var(--paper); color: var(--base); box-shadow: 0 .6rem 1.2rem -.5rem rgba(0, 0, 0, .6); font: 800 .8125rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.seal svg { width: 1.4rem; height: 1.4rem; padding: .28rem; border-radius: 50%; background: var(--accent); color: var(--base); }

/* Phones: the phone version of the site is the main object; the supporting pieces sit beside it. */
@media (max-width: 47.99rem) {
  .stage { padding: .9rem .9rem 1.1rem; border-radius: 18px; }
  .scene { --k: 2; aspect-ratio: 100 / 108; }
  .site-frame { display: none; }
  .phone { left: 2cqw; top: 0; width: 54cqw; }
  .sat-listing { right: 0; top: 6cqw; width: 42cqw; }
  .sat-review { right: 0; top: 46cqw; width: 42cqw; }
  .demo-end { top: auto; bottom: 3cqw; }
  .closer-sm { display: block; }
}
/* Tablet: a single strong column, centered under the call to action */
@media (min-width: 48rem) {
  .stage { max-width: 42rem; margin-inline: auto; padding: 1.8rem 1.9rem 1.8rem; }
}

/* ---------- Motion: each moment plays once. The FINISHED state is the default.
   main.js adds .armed (only when it can observe the element and motion is allowed), then .play.
   Animation is grouped by card, not by small piece. Opacity and transform only. ---------- */
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes veil { from { opacity: 1; } to { opacity: 0; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes growY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rev { from { opacity: 0; transform: translateY(var(--ry, 8px)); } to { opacity: 1; transform: none; } }
@keyframes lift { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes tickin { from { opacity: 0; transform: rotate(45deg) scale(.6); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes ring { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes node { from { opacity: .3; } to { opacity: 1; } }
@keyframes frame-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sat-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* Hero stage, phones first (about 2.8 s): the phone site completes, then the two supporting pieces fade in one at a time. No travel. */
.rows li:nth-child(1) { --kt: .55s; }
.rows li:nth-child(2) { --kt: 1.25s; }
.rows li:nth-child(3) { --kt: 1.95s; }
.stage.armed .tick .on, .stage.armed .seal, .stage.armed .sat { opacity: 0; }
.stage.armed .closer-sm::before { transform: scaleX(0); }
.stage.armed .closer-sm::after { opacity: 0; }
.stage.play .tick .on { animation: pop .25s ease-out var(--kt) both; }
.stage.play .sat-listing { animation: show .3s ease-out .9s both; }
.stage.play .sat-review { animation: show .3s ease-out 1.6s both; }
.stage.play .closer-sm::before { animation: grow .3s ease-out 2.1s both; }
.stage.play .closer-sm::after { animation: tickin .15s ease-out 2.35s both; }
.stage.play .seal { animation: pop .4s ease-out 2.4s both; }
@media (max-width: 47.99rem) {
  .p-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #eef1f5; opacity: 0; pointer-events: none; }
  .stage.armed .p-screen::after { opacity: 1; }
  .stage.play .p-screen::after { animation: veil .3s ease-out .2s both; }
}

/* Section reveal: heading first, then the content as one block (Recognition). */
[data-reveal] { --ry: 8px; }
@media (max-width: 47.99rem) { [data-reveal] { --ry: 6px; } }
[data-reveal].armed h2, [data-reveal].armed .rv-body { opacity: 0; }
[data-reveal].play h2 { animation: rev .4s ease-out both; }
[data-reveal].play .rv-body { animation: rev .4s ease-out .15s both; }

/* Final call to action: the closing line draws once, then the button settles once. */
.final.armed .closer::before { transform: scaleX(0); transform-origin: left; }
.final.armed .closer::after { opacity: 0; }
.final.play .closer::before { animation: grow .4s ease-out both; }
.final.play .closer::after { animation: tickin .2s ease-out .35s both; }
.final.play .btn { animation: lift .45s ease-out .95s; }

/* Tablet and desktop: cards take focus in turn (about 3.8 s); the headline line and check resolve; the seal lands. */
@media (min-width: 48rem) {
  .rows li:nth-child(1) { --kt: 1.25s; }
  .rows li:nth-child(2) { --kt: 1.95s; }
  .rows li:nth-child(3) { --kt: 2.75s; }
  .s-nav::after, .s-hero::after, .s-services::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #eef1f5; opacity: 0; pointer-events: none; }
  .stage.armed .s-nav::after, .stage.armed .s-hero::after, .stage.armed .s-services::after { opacity: 1; }
  .stage.armed .site-frame, .stage.armed .phone { opacity: 0; }
  .stage.play .site-frame { animation: frame-in .45s ease-out both; }
  .stage.play .s-nav::after { animation: veil .35s ease-out .35s both; }
  .stage.play .s-hero::after { animation: veil .35s ease-out .6s both; }
  .stage.play .s-services::after { animation: veil .35s ease-out .85s both; }
  .stage.play .phone { animation: phone-in .45s ease-out 1s both; }
  .stage.play .sat-listing { animation: sat-in .5s ease-out 1.4s both; }
  .stage.play .sat-review { animation: sat-in .5s ease-out 2.2s both; }
  .stage.play .seal { animation: pop .45s ease-out 3.4s both; }
  .hl::after { transform-origin: left; }
  .hero.armed .hl::after { transform: scaleX(0); }
  .hero.armed .hl::before { opacity: 0; }
  .hero.play .hl::after { animation: grow .4s ease-out 3s both; }
  .hero.play .hl::before { animation: tickin .2s ease-out 3.35s both; }
  .hero.play .cta-row .btn { animation: lift .45s ease-out 4s; }
  /* $100 timeline: the rail resolves through steps 1 to 5, stops at the hollow 6, then the message settles (about 2.2 s). */
  .steps.armed li::before { opacity: .3; }
  .steps.armed li:last-child::before { opacity: 0; transform: scale(.9); }
  .steps.armed li::after { transform: scaleY(0); }
  .steps.armed .callout { opacity: 0; }
  .steps.play li::before { animation: node .25s ease-out calc(var(--n, 0) * .25s) both; }
  .steps.play li:last-child::before { animation: ring .3s ease-out 1.45s both; }
  .steps.play li::after { animation: growY .2s ease-out calc(var(--n, 0) * .25s + .05s) both; }
  .steps.play .callout { --ry: 8px; animation: rev .4s ease-out 1.75s both; }
  @media (min-width: 75rem) { .steps.armed li::after { transform: scaleX(0); } .steps.play li::after { animation-name: grow; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Quiet middle sections: heading left, content right on desktop. Phones stay stacked. */
@media (min-width: 62rem) {
  .split { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 40rem); column-gap: 4rem; justify-content: start; }
  .split > h2 { font-size: 2.3rem; grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 2rem; align-self: start; }
  .split > :not(h2) { grid-column: 2; }
  .split > h2 + * { margin-top: 0; }
}

/* Larger screens */
@media (min-width: 30rem) {
  .short { display: none; }
  .long { display: inline; }
}
@media (min-width: 48rem) {
  .brand-sub { display: block; }
  .ph-num { display: inline; }
  .head-actions { gap: 1.25rem; }
  .head-phone { padding-inline: .25rem; }
  .fit-grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
@media (hover: hover) and (min-width: 48rem) { .head-phone:hover .ph-num { text-decoration: underline; } }
@media (min-width: 62rem) {
  /* Desktop headline: three lines. Phones keep their own balanced wrapping. */
  h1 { font-size: clamp(3rem, 2.7vw + 1.4rem, 3.6rem); text-wrap: wrap; }
  .br-d { display: inline; }
  .cta-row { flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .center .cta-row { justify-content: center; }
}


@media (min-width: 62rem) {
  .hero .lede { margin-top: 1.4rem; }
  .hero .deal { margin-top: 1.6rem; }
  .hero .cta-row { margin-top: 2.25rem; }
  .hero .alt-contact { margin-top: 1.4rem; }
}

/* Phones: the closing line reads a little clearer. */
@media (max-width: 47.99rem) {
  .hl { padding-right: .7em; }
  .hl::after { right: .5em; height: .08em; }
  .hl::before { right: .13em; width: .2em; height: .4em; border-right-width: .085em; border-bottom-width: .085em; }
}
/* Desktop: copy on the left, the website stage bleeds off the right edge (about 72 rem and up). */
@media (min-width: 72rem) {
  .hero { --bleed: calc((100vw - min(100vw, 72rem)) / 2 + var(--gutter)); }
  .hero-grid { grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr); column-gap: 3.5rem; align-items: center; }
  .stage { max-width: none; margin-left: -2.5rem; margin-right: calc(-1 * var(--bleed)); padding: 2rem calc(2.2rem + 1rem) 1.9rem 2.2rem; border-radius: 28px 0 0 28px; }
}

/* Hero polish: a soft floor shadow under the website, and one thin framing line with two end points (static). */
.scene::before { content: ""; position: absolute; z-index: 0; left: 12cqw; top: 46cqw; width: 76cqw; height: 16cqw; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); pointer-events: none; }
.frame-line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frame-line path { fill: none; stroke: rgba(196, 154, 76, .55); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fl-dot { position: absolute; z-index: 0; left: -3cqw; top: 22cqw; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #c49a4c; }
.fl-check { position: absolute; z-index: 0; right: -3cqw; top: 42cqw; width: .42rem; height: .8rem; margin: -.55rem -.2rem 0 0; border-right: 1.5px solid #c49a4c; border-bottom: 1.5px solid #c49a4c; transform: rotate(45deg); }
@media (max-width: 47.99rem) { .scene::before, .frame-line, .fl-dot, .fl-check { display: none; } }

/* ---------- Stage 2: real work proof. A light stage around one large dark screenshot. Static. ---------- */
.proof { position: relative; overflow-x: clip; padding-block: clamp(4rem, 11vw, 8.5rem); background: radial-gradient(75% 85% at 66% 46%, #fbf8f1 0%, var(--paper-2) 58%, #e1dacc 100%); border-top: 1px solid var(--hair); }
.proof-grid { display: grid; gap: 2.5rem; align-items: center; }
.proof .closer { margin: 0 0 1.1rem; }
.proof h2 { font-size: clamp(2.3rem, 5.2vw + .6rem, 4.4rem); line-height: 1.03; letter-spacing: var(--h1-track); }
.proof h2::before { display: none; }
.proof-copy > p { margin-top: 1.4rem; max-width: 27rem; font-size: 1.1875rem; }
.btn-line { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; margin-top: 1.8rem; padding: .7rem 1.4rem; border: 2px solid var(--base); border-radius: var(--r-md); color: var(--base); font: 800 1rem var(--display); text-decoration: none; transition: background-color .14s ease, color .14s ease; }
.btn-line svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .btn-line:hover { background: var(--base); color: var(--on-base); } }
.shot { position: relative; isolation: isolate; margin: 0; margin-inline: calc(-1 * var(--gutter)); }
.shot::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -5%; height: 14%; background: radial-gradient(closest-side, rgba(14, 29, 50, .35), rgba(14, 29, 50, 0)); pointer-events: none; }
.shot-frame { overflow: hidden; border-radius: 14px; background: #0b1320; box-shadow: 0 2.2rem 3.6rem -1.8rem rgba(10, 20, 35, .5), 0 .6rem 1.2rem -.6rem rgba(10, 20, 35, .3), 0 0 0 1px rgba(10, 20, 35, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
.shot-bar { display: flex; align-items: center; justify-content: center; height: 2.1rem; padding: 0 1rem; background: linear-gradient(180deg, #19222f, #121a27); border-bottom: 1px solid rgba(255, 255, 255, .06); }

.shot-url { min-width: 42%; padding: .12rem .9rem; border-radius: 99px; background: rgba(255, 255, 255, .05); text-align: center; font: 600 .72rem/1.3 var(--sans); letter-spacing: .02em; color: #8793a7; }
.shot img { display: block; width: 100%; height: auto; }
.shot-cap { margin-top: 1.2rem; padding-inline: var(--gutter); font: 600 .75rem/1.4 var(--sans); letter-spacing: .06em; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 61.99rem) { .shot::after { display: none; } }
@media (min-width: 62rem) {
  .proof { --bleed: calc((100vw - min(100vw, 72rem)) / 2 + var(--gutter)); }
  .proof-grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); column-gap: 3.5rem; }
  .proof h2 { text-wrap: balance; }
  .shot { margin-inline: 0 calc(2.5rem - var(--bleed)); }
  .shot-frame { border-radius: 16px; }
  .shot-cap { padding-inline: 0; }
}

@media (min-width: 72rem) { .proof-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); column-gap: 3rem; } }

/* ---------- Stage 3: What Mainstreet handles, one connected visual band ----------
   A light top with a sloped edge into a deep field. Five stations on one line:
   search, website, Google listing, review request, tracked call. Text is always visible. */
.band { position: relative; }
.band-top { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4rem); background: var(--paper); }
.band-top::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 100%; height: clamp(1.5rem, 5vw, 4.5rem); background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }
.band h2 { max-width: 15ch; font-size: clamp(2.2rem, 4.8vw + .6rem, 4rem); line-height: 1.03; letter-spacing: var(--h1-track); text-wrap: balance; }
.band h2::before { display: none; }
.band-intro { margin-top: 1.3rem; max-width: 36rem; font-size: 1.1875rem; }
.band-main { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 5.5rem); color: var(--on-base); background: radial-gradient(70% 90% at 72% 18%, rgba(48, 84, 128, .55) 0%, rgba(48, 84, 128, 0) 65%), linear-gradient(180deg, #14283f 0%, #0d1b2e 100%); }
.band-main .micro { color: var(--on-base-muted); }
.band-main .btn { box-shadow: inset 0 -2px 0 rgba(22, 41, 63, .18), 0 8px 18px -10px rgba(0, 0, 0, .6); }
.band-main :focus-visible { outline-color: var(--accent); }
.flow { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; }
.st { position: relative; display: grid; align-items: center; gap: 1rem 1.5rem; padding-left: 2.1rem; }
.st::before { content: ""; position: absolute; left: .45rem; top: 3.2rem; width: 2px; height: calc(100% + 2.2rem); background: rgba(196, 154, 76, .8); transform-origin: top; }
.st::after { content: ""; position: absolute; left: 0; top: 3.2rem; width: 10px; height: 10px; margin: -5px 0 0 -1px; border-radius: 50%; background: #c49a4c; }
.st-last::before { display: none; }
.st-text h3 { color: var(--on-base); }
.st-text p { margin-top: .35rem; color: var(--on-base-muted); font-size: 1rem; }
.frag { position: relative; z-index: 1; width: 100%; max-width: 15rem; font-family: var(--sans); color: var(--text); }
.frag svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-search { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-radius: 99px; background: #fff; box-shadow: 0 1rem 1.8rem -1rem rgba(0, 0, 0, .55); font-size: .78rem; color: #55616d; }
.f-search svg { flex: none; width: 1rem; height: 1rem; color: var(--base); }
.f-site { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1.2rem 2rem -1rem rgba(0, 0, 0, .6); }
.fs-bar { display: flex; align-items: center; gap: .25rem; height: 1rem; padding: 0 .5rem; background: #e8ecf1; }
.fs-bar i { width: .32rem; height: .32rem; border-radius: 50%; background: #c2c9d3; }
.fs-body { display: grid; gap: .45rem; padding: .75rem .85rem .85rem; }
.fs-logo { display: inline-flex; align-items: center; gap: .3rem; font: 800 .62rem var(--display); color: var(--base); }
.fs-logo svg { width: .7rem; height: .7rem; }
.fs-h { font: 800 .98rem/1.1 var(--display); letter-spacing: -.02em; color: var(--base); }
.fs-call { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .28rem .6rem; border-radius: .4rem; background: var(--base); color: #fff; font-size: .64rem; font-weight: 800; }
.fs-call svg { width: .64rem; height: .64rem; }
.f-list { padding: .85rem; border-radius: 10px; background: #fff; box-shadow: 0 1.2rem 2rem -1rem rgba(0, 0, 0, .6); }
.fl-head { display: flex; align-items: center; gap: .35rem; font: 800 .74rem var(--display); color: var(--base); }
.fl-head svg { width: .85rem; height: .85rem; }
.fl-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.fl-chips span { padding: .2rem .55rem; border-radius: 99px; background: #dce8e1; font-size: .62rem; font-weight: 600; }
.f-review { display: grid; justify-items: start; gap: .45rem; }
.fr-bubble { padding: .65rem .85rem; border-radius: .9rem .9rem .9rem .2rem; background: #e6edf6; box-shadow: 0 1rem 1.8rem -1rem rgba(0, 0, 0, .55); font-size: .72rem; line-height: 1.35; }
.fr-chip { padding: .22rem .6rem; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #dbe3ee; font-size: .62rem; font-weight: 700; }
.f-call { display: flex; align-items: center; gap: .35rem; }
.fc-node { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: var(--base); }
.fc-node svg { width: 1rem; height: 1rem; }
.fc-line { flex: 1; height: 2px; min-width: .6rem; background: #c49a4c; }
.fc-pill { padding: .35rem .7rem; border-radius: 99px; background: #fff; font-size: .64rem; font-weight: 800; color: var(--base); white-space: nowrap; }
@media (min-width: 48rem) { .st { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
@media (min-width: 72rem) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; }
  .st { grid-template-columns: minmax(0, 1fr); grid-template-rows: 9.5rem auto; align-content: start; align-items: center; justify-items: start; padding-left: 0; gap: 1.1rem; }
  .st::before { left: 50%; top: 4.75rem; width: calc(100% + 1.6rem); height: 2px; transform-origin: left; }
  .st::after { left: 50%; top: 4.75rem; margin: -5px 0 0 -5px; z-index: 0; }
  .st-last::before { display: block; width: 50%; }
  .st-last::after { left: auto; right: 0; width: .5rem; height: .95rem; margin: -.85rem 0 0; border-radius: 0; background: none; border-right: 2px solid #c49a4c; border-bottom: 2px solid #c49a4c; transform: rotate(45deg); }
  .frag { max-width: none; }
  .band-main .cta-row { margin-top: 3.2rem; }
}

/* Motion: one short sequence, played once. The finished state is the default. */
@keyframes frag { from { opacity: 0; transform: translateY(var(--fy, 0px)); } to { opacity: 1; transform: none; } }
.band.armed .frag { opacity: 0; }
.band.armed .st::before { transform: scaleY(0); }
.band.armed .st::after { opacity: 0; }
.band.play .frag { animation: frag .25s ease-out var(--d) both; }
.band.play .st::before { animation: growY .15s ease-out var(--s) both; }
.band.play .st::after { animation: show .15s ease-out var(--d) both; }
.st:nth-child(1) { --d: 0s; --s: .2s; }
.st:nth-child(2) { --d: .3s; --s: .5s; }
.st:nth-child(3) { --d: .6s; --s: .8s; }
.st:nth-child(4) { --d: .9s; --s: 1.1s; }
.st:nth-child(5) { --d: 1.2s; --s: 1.4s; }
/* Stacked layout: a short closing line and check after the last station. */
.st-last::before { display: block; height: 2.2rem; }
.st-last::after { top: 5.9rem; width: .5rem; height: .95rem; margin: -.95rem 0 0 .2rem; border-radius: 0; background: none; border-right: 2px solid #c49a4c; border-bottom: 2px solid #c49a4c; transform: rotate(45deg); }
.band.armed .st-last::after { opacity: 0; }
.band.play .st-last::after { animation: tickin .15s ease-out 1.5s both; }
@media (min-width: 72rem) {
  .band { --fy: 8px; }
  .band.armed .st::before { transform: scaleX(0); }
  .band.armed .st-last::after { opacity: 0; }
  .band.play .frag { animation-duration: .4s; }
  .band.play .st::before { animation: grow .25s ease-out var(--s) both; }
  .band.play .st-last::after { animation: tickin .25s ease-out 2.7s both; }
  .st:nth-child(1) { --d: 0s; --s: .25s; }
  .st:nth-child(2) { --d: .45s; --s: .9s; }
  .st:nth-child(3) { --d: 1.1s; --s: 1.5s; }
  .st:nth-child(4) { --d: 1.7s; --s: 2.1s; }
  .st:nth-child(5) { --d: 2.3s; --s: 2.45s; }
  .band.play .st-last::before { animation: grow .25s ease-out 2.45s both; }
}