/* Echo South homepage only: the restaurant site that fixes itself, the four steps, the package, the scoreboard and the banner. Shared styles are in brand.css. */
/* lead: the opening promise, a "near me" search the restaurant wins, then busy and slow seasons */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 5vw, 88px); min-height: 100vh; min-height: 100svh; padding: calc(104px + env(safe-area-inset-top, 0px)) var(--gutter) clamp(56px, 7vw, 96px); }
.lead-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lead-copy h1 { font-size: clamp(52px, 6.6vw, 116px); }
.lead-copy .lede { max-width: 46ch; }
.lead-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-line { border: 1px solid var(--line); background: transparent; color: var(--text); }
.btn-line:hover { border-color: var(--text-3); }
.lead-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 12px 0 0; padding: 0; }
.lead-pillars li { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); color: var(--text-2); font-size: 15px; line-height: 1.45; }
.lead-pillars .mono { color: var(--red-hi); }
.lead-visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lead-visual figcaption { color: var(--text-3); font-size: 13px; }
.phone { width: min(100%, 380px); padding: 16px; border-radius: 34px; background: #FFFFFF; color: #202124; font-family: Arial, sans-serif; box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 8px #1E1B1C, 0 0 0 9px rgba(255, 255, 255, .08); }
:root[data-theme="light"] .phone { box-shadow: 0 30px 70px rgba(22, 19, 20, .18), 0 0 0 8px #161314; }
.ph-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; background: #F1F3F4; font-size: 15px; }
.ph-search svg { width: 18px; height: 18px; color: #5F6368; }
.ph-map { position: relative; height: 150px; margin: 12px 0; border-radius: 16px; overflow: hidden; background: #E8EFE9; }
.ph-map .road { position: absolute; background: #FFFFFF; }
.ph-map .r1 { left: -10%; right: -10%; top: 46%; height: 10px; transform: rotate(-8deg); }
.ph-map .r2 { top: -10%; bottom: -10%; left: 38%; width: 9px; transform: rotate(12deg); }
.ph-map .r3 { top: -10%; bottom: -10%; left: 76%; width: 7px; }
.mpin { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #9AA0A6; }
.mpin.p2 { left: 64%; top: 22%; }
.mpin.p3 { left: 18%; top: 66%; }
.mpin.win { left: 44%; top: 26%; width: 34px; height: 34px; display: grid; place-items: center; background: var(--red); color: #FFFFFF; font: 700 14px/1 var(--body); box-shadow: 0 0 0 6px rgba(224, 38, 44, .2); }
.mpin.win b { transform: rotate(45deg); }
.ph-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ph-results li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid #E3E3E3; font-size: 12.5px; color: #4D5156; }
.ph-results b { font-size: 15px; color: #1A0DAB; font-weight: 400; }
.ph-results em { font-style: normal; color: #B06A00; font-weight: 700; }
.ph-results .win { border-color: #1E5B47; box-shadow: 0 0 0 1px #1E5B47; }
.ph-results .ok { color: #1E5B47; font-weight: 700; }
.ph-results .meh { color: #A33A2E; }
.ph-ai { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #EEF3FD; }
.ph-ai .mono { font-size: 10px; color: #3C5A99; }
.ph-ai p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #202124; }
.seasons { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--ink-2); }
.seasons-head { display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin-bottom: clamp(32px, 4vw, 56px); }
.seasons-head h2 { font-size: clamp(40px, 5.4vw, 88px); }
.season-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.season { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--ink); }
.season .mono { color: var(--red-hi); }
.season h3 { margin: 0; font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); font-stretch: 70%; font-weight: 800; line-height: .95; }
.season ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.season li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.season li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .62em; border-radius: 50%; background: var(--red); }
.seasons-note { margin: 20px 0 0; max-width: 62ch; color: var(--text-3); }

/* stage: the site that fixes itself */
.stage { position: relative; height: 560vh; }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 72px); padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 32px; overflow: hidden; }
.stage-copy { position: relative; height: min(560px, 70vh); }
.hero-copy, .cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.hero-copy { opacity: var(--hero, 1); transform: translateY(calc((1 - var(--hero, 1)) * -28px)); }
.hero-copy .display { font-size: clamp(56px, 7.4vw, 128px); }
.hero-copy .lede { max-width: 30ch; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; color: var(--text-3); }
.scroll-cue i { position: relative; width: 56px; height: 1px; background: var(--line); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--red-hi); transform: translateX(-100%); animation: cue 1.8s cubic-bezier(.6, 0, .2, 1) 2; }
@keyframes cue { to { transform: translateX(100%); } }
.captions { list-style: none; margin: 0; padding: 0; }
.cap { opacity: 0; pointer-events: none; }
.cap.on { pointer-events: auto; }
.cap[data-i="1"] { opacity: var(--c1, 0); transform: translateY(calc((1 - var(--c1, 0)) * 18px)); }
.cap[data-i="2"] { opacity: var(--c2, 0); transform: translateY(calc((1 - var(--c2, 0)) * 18px)); }
.cap[data-i="3"] { opacity: var(--c3, 0); transform: translateY(calc((1 - var(--c3, 0)) * 18px)); }
.cap[data-i="4"] { opacity: var(--c4, 0); transform: translateY(calc((1 - var(--c4, 0)) * 18px)); }
.cap[data-i="5"] { opacity: var(--c5, 0); transform: translateY(calc((1 - var(--c5, 0)) * 18px)); }
.cap .step { color: var(--red-hi); }
.cap h2 { font-size: clamp(44px, 5.4vw, 92px); }
.cap p { margin: 0; max-width: 34ch; color: var(--text-2); font-size: clamp(16px, 1.3vw, 19px); }
.progress { position: absolute; left: 0; right: 18%; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; opacity: calc(1 - var(--hero, 1)); }
.progress span { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; }

.stage-demo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 1600px; --rs: min(900px, max(440px, 56vw)); }
.stage-demo::before { content: ""; position: absolute; left: 50%; top: calc(50% - 24px); width: calc(var(--rs) * 1.3); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 38, 44, .3), rgba(224, 38, 44, 0)); opacity: var(--glow, 0); pointer-events: none; }
.stage-rings { position: absolute; left: 50%; top: calc(50% - 24px); width: 0; height: 0; pointer-events: none; }
.stage-rings i { position: absolute; left: calc(var(--rs) / -2); top: calc(var(--rs) / -2); width: var(--rs); height: var(--rs); border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.ringing .stage-rings i { animation: bigring 2.6s cubic-bezier(.2, .6, .3, 1) 2; }
.ringing .stage-rings i:nth-child(2) { animation-delay: .45s; }
.ringing .stage-rings i:nth-child(3) { animation-delay: .9s; }
@keyframes bigring { from { transform: scale(.5); opacity: .75; } to { transform: scale(1.9); opacity: 0; } }
.window { position: relative; width: min(100%, calc((100svh - 190px) * 1.42)); aspect-ratio: 1.42; border-radius: 14px; background: #FFFFFF; color: #222; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07); transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); container-type: inline-size; }
.chrome { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #ECE8E4; border-bottom: 1px solid #D9D3CD; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D2CBC3; }
.chrome .url { margin-left: 10px; flex: 1; height: 22px; display: flex; align-items: center; padding: 0 10px; border-radius: 6px; background: #FFFFFF; font: 500 11px/1 var(--mono); color: #6E6863; }
.site { position: absolute; inset: 34px 0 0 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.s-head { position: relative; height: max(44px, 9cqi); }
.s-head-bad, .s-head-good { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4.5cqi; }
.s-head-bad { background: #F1F1F1; border-bottom: 1px solid #DDDDDD; font-family: Georgia, "Times New Roman", serif; color: #333; opacity: calc(1 - var(--hdr, 0)); }
.bad-name { font-size: max(9px, 1.35cqi); font-weight: 700; letter-spacing: .04em; }
.bad-nav { margin-right: 5cqi; font-size: max(9px, 1.45cqi); color: #1B4F9C; text-decoration: underline; }
.s-head-good { background: #FFFFFF; border-bottom: 1px solid #EEF1EF; color: #1C2A24; font-family: var(--body); opacity: var(--hdr, 0); }
.good-name { display: flex; align-items: center; gap: 1.2cqi; font-size: max(11px, 2cqi); font-weight: 700; }
.good-logo { width: max(16px, 3.4cqi); height: max(16px, 3.4cqi); border-radius: .9cqi; background: #1E5B47; }
.good-call { display: inline-flex; align-items: center; gap: 1cqi; min-height: 26px; height: 5.4cqi; padding: 0 2.2cqi; border-radius: 999px; background: #1E5B47; color: #FFFFFF; font-size: max(10px, 1.7cqi); font-weight: 700; transform: translateX(calc((1 - var(--hdr, 0)) * 3cqi)); }
.good-call svg { width: max(11px, 1.8cqi); height: max(11px, 1.8cqi); }

.s-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4cqi; min-height: 0; padding: 4.5cqi 4.5cqi 0; }
.s-text { display: flex; flex-direction: column; gap: 2.4cqi; min-width: 0; }
.a-slot, .b-slot { position: relative; display: grid; }
.a-slot > *, .b-slot > * { grid-area: 1 / 1; margin: 0; }
.h-bad { font-family: Georgia, "Times New Roman", serif; font-size: max(15px, 3.9cqi); line-height: 1.15; color: #333; opacity: calc(1 - var(--h1out, 0)); }
.strike-wrap { position: relative; display: inline-block; }
.strike { position: absolute; left: -2%; right: -2%; top: 54%; height: max(2px, .5cqi); border-radius: 2px; background: var(--red); transform: scaleX(var(--strike, 0)); transform-origin: 0 50%; }
.h-good { font-family: var(--body); font-size: max(17px, 4.6cqi); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: #1C2A24; opacity: var(--h1in, 0); transform: translateY(calc((1 - var(--h1in, 0)) * 2cqi)); }
.p-bad { font-family: Georgia, "Times New Roman", serif; font-size: max(10px, 1.5cqi); line-height: 1.6; color: #444; opacity: calc(1 - var(--para, 0)); }
.p-bad p { margin: 0 0 1cqi; }
.bad-link { color: #1B4F9C; text-decoration: underline; }
.p-good { font-family: var(--body); font-size: max(11px, 1.8cqi); line-height: 1.5; color: #4F5E57; opacity: var(--btns, 0); transform: translateY(calc((1 - var(--btns, 0)) * 2cqi)); }
.p-good p { margin: 0 0 2cqi; }
.good-btns { display: flex; flex-wrap: wrap; gap: 1.4cqi; }
.gb { display: inline-flex; align-items: center; min-height: 28px; height: 5.6cqi; padding: 0 2.6cqi; border-radius: 999px; font-size: max(10px, 1.7cqi); font-weight: 700; }
.gb-fill { background: #1E5B47; color: #FFFFFF; }
.gb-line { border: 1px solid #1E5B47; color: #1E5B47; }
.img-slot { position: relative; display: grid; min-height: 0; }
.img-slot > div { grid-area: 1 / 1; min-height: 22cqi; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqi; border-radius: 1.6cqi; }
.img-bad { background: repeating-linear-gradient(135deg, #D3D3D3 0 1.2cqi, #CBCBCB 1.2cqi 2.4cqi); color: #6A6A6A; font-family: Arial, sans-serif; font-size: max(10px, 1.5cqi); opacity: calc(1 - var(--photo, 0)); }
.img-good { background: #E4EDE7; color: #4E6E60; font-family: var(--body); font-size: max(10px, 1.5cqi); font-weight: 600; opacity: var(--photo, 0); transform: scale(calc(.95 + var(--photo, 0) * .05)); }
.img-good, .img-bad { position: relative; overflow: hidden; }
.img-bad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.img-good img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

.s-foot { display: flex; align-items: flex-end; gap: 2.6cqi; padding: 3cqi 4.5cqi 4cqi; }
.speed { flex: none; display: flex; flex-direction: column; gap: .5cqi; padding: 1.5cqi 2cqi; border-radius: 1.4cqi; border: 1px solid #EFC9C9; background: #FBECEC; color: #8E1B1B; transition: background-color .35s, border-color .35s, color .35s; }
.speed .lbl { font: 500 max(8px, 1.2cqi)/1 var(--mono); letter-spacing: .02em; }
.speed .val { font: 700 max(13px, 2.5cqi)/1.1 var(--body); font-variant-numeric: tabular-nums; }
.speed.fast { border-color: #CBE2CB; background: #EEF7EE; color: #1F5A1F; }
.serp { position: relative; flex: 1 1 auto; min-width: 0; height: max(62px, 12.5cqi); perspective: 700px; }
.serp-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .3cqi; padding: 1.2cqi 2cqi; border-radius: 1.4cqi; border: 1px solid #E6E9EE; background: #FFFFFF; font-family: var(--body); backface-visibility: hidden; }
.serp .u { font-size: max(8px, 1.2cqi); color: #4F5E57; }
.serp .t { font-size: max(11px, 1.95cqi); line-height: 1.25; color: #1A0DAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp .d { font-size: max(9px, 1.35cqi); line-height: 1.4; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-bad { transform: rotateX(calc(min(var(--serp, 0), .5) * 180deg)); }
.serp-good { transform: rotateX(calc((max(var(--serp, 0), .5) - 1) * 180deg)); }
.serp .stars { color: #B06A00; font-weight: 700; }

.toast { position: absolute; right: 3.5cqi; top: 21cqi; z-index: 4; display: flex; align-items: center; gap: 1.6cqi; width: max(40cqi, 230px); padding: 1.6cqi 2cqi; border-radius: 1.6cqi; background: #0B0A0A; color: #FFFFFF; box-shadow: 0 1.8cqi 4cqi rgba(0, 0, 0, .35); font-family: var(--body); opacity: var(--toast, 0); transform: translateY(calc((1 - var(--toast, 0)) * -2.4cqi)); }
.toast .ph { position: relative; flex: none; width: max(28px, 4.6cqi); height: max(28px, 4.6cqi); border-radius: 50%; background: var(--red); display: grid; place-items: center; }
.toast .ph svg { width: 45%; height: 45%; }
.toast .ph::before, .toast .ph::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.ringing .toast .ph::before { animation: ring 1.4s ease-out 3; }
.ringing .toast .ph::after { animation: ring 1.4s ease-out .45s 3; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.toast-t { display: flex; flex-direction: column; gap: .4cqi; min-width: 0; }
.toast-t .mono { font-size: max(8px, 1.2cqi); letter-spacing: .04em; color: #A59D99; }
.toast-t .msg { font-size: max(11px, 1.7cqi); line-height: 1.35; }

.pin { position: absolute; z-index: 5; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: #FFFFFF; font: 600 12px/1 var(--mono); display: grid; place-items: center; cursor: help; box-shadow: 0 0 0 5px rgba(224, 38, 44, .22); }
.pin .note { position: absolute; right: -8px; bottom: calc(100% + 10px); width: max-content; max-width: 230px; padding: 8px 10px; border-radius: 8px; background: #0B0A0A; color: #FFFFFF; font: 500 12.5px/1.4 var(--body); text-align: left; letter-spacing: 0; text-transform: none; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.pin.below .note { bottom: auto; top: calc(100% + 10px); }
.pin:hover .note, .pin:focus-visible .note, .pin.open .note { opacity: 1; transform: none; }

.window-fit { display: contents; }
.demo-controls { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; color: var(--text-3); font-size: 13px; }
.demo-controls .jump { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); }
.demo-controls button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 13px/1 var(--body); cursor: pointer; }
.demo-controls button:hover, .demo-controls button[aria-pressed="true"] { background: var(--text); color: var(--ink); }

/* what we do */
.intro { position: relative; padding: clamp(96px, 12vw, 176px) var(--gutter); background: var(--ink); }
.intro-copy { display: flex; flex-direction: column; gap: 24px; max-width: 1040px; }
.intro-copy h2 { font-size: clamp(52px, 8.4vw, 148px); }
.intro-copy .lede { max-width: 44ch; }

/* services: attention in three steps */
.attention { padding: clamp(96px, 12vw, 160px) var(--gutter); background: var(--ink-2); }
.attention-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: clamp(32px, 4vw, 56px); }
.attention-head h2 { font-size: clamp(44px, 6vw, 96px); max-width: 11ch; }
.attention-head p { margin: 0; max-width: 42ch; color: var(--text-2); }
.words { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.word-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 16px 40px; padding: clamp(20px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.word { font-family: var(--display); font-size: clamp(48px, 6.4vw, 104px); font-stretch: 66%; font-weight: 800; line-height: .9; letter-spacing: -.01em; transition: font-stretch .55s cubic-bezier(.2, .7, .2, 1); }
.word b { color: var(--red); }
.word-row:hover .word { font-stretch: 86%; }
.word-meta { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.word-meta .mono { color: var(--red-hi); }

/* the package: the build, then the retainer */
.package { padding: clamp(96px, 12vw, 160px) var(--gutter); background: var(--ink); }
.package-head { display: flex; flex-direction: column; gap: 18px; max-width: 920px; margin-bottom: clamp(32px, 4vw, 56px); }
.package-head h2 { font-size: clamp(44px, 6vw, 96px); }
.package-head .lede { max-width: 50ch; }
.phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.phase { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--ink-2); }
.phase .mono { color: var(--red-hi); }
.phase h3 { margin: 0; font-family: var(--display); font-size: clamp(36px, 4vw, 60px); font-stretch: 70%; font-weight: 800; line-height: .95; }
.phase > p { margin: 0; color: var(--text-2); }
.phase ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.phase li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.phase li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .62em; border-radius: 50%; background: var(--red); }
.package-note { margin: 20px 0 0; max-width: 62ch; color: var(--text-3); }

/* proof */
.proof { padding: clamp(96px, 12vw, 160px) var(--gutter); }
.proof-head { display: flex; flex-direction: column; gap: 18px; max-width: 920px; margin-bottom: clamp(32px, 4vw, 56px); }
.proof-head h2 { font-size: clamp(44px, 6vw, 96px); }
.proof-head .lede { max-width: 46ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); overflow: hidden; }
.tile { display: flex; flex-direction: column; gap: 10px; min-height: 176px; padding: 28px; background: var(--ink-2); }
.tile .mono { color: var(--text-3); }
.tile .v { font: 600 clamp(40px, 4vw, 56px)/1 var(--body); }
.tile p { margin: 0; color: var(--text-3); font-size: 14px; }
.tiles-note { margin: 14px 0 0; color: var(--text-3); }

/* the closing banner */
/* the approved banner (assets/branding/echo-south-hero-no-services.png, services line already removed), shown whole;
   on phones it is zoomed to the logo and taglines, approved by the owner on 2026-09-27 */
.cta-banner { position: relative; height: max(calc(100vw * 355 / 2172), min(36.3vw, 160px)); overflow: hidden; }
.banner-frame { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 2172 / 355; transform: translateX(-50%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%); mask-image: linear-gradient(to bottom, transparent, #000 10%); }
.banner-img { display: block; width: 100%; height: 100%; }
/* a patch of sky with the banner's still O painted out (banner px 857-1091 x 21-222), feathered at the edges */
.banner-patch { position: absolute; left: 39.457%; top: 5.915%; width: 10.773%; height: 56.62%; -webkit-mask-image: radial-gradient(closest-side at 50.59% 49.82%, #000 92%, transparent 100%); mask-image: radial-gradient(closest-side at 50.59% 49.82%, #000 92%, transparent 100%); }
/* the rebuilt O, placed exactly over the original (banner px 888.5-1062.3 x 34.3-208), turning slowly while on screen */
.banner-o { position: absolute; left: 40.907%; top: 9.651%; width: 8%; height: auto; aspect-ratio: 1; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 0 2px rgba(235, 25, 25, .5)); animation: o-turn 20s linear infinite paused; }
.cta-banner.turning .banner-o { animation-play-state: running; }
@keyframes o-turn { to { transform: rotate(1turn); } }

/* before and after: one made-up restaurant site, old and rebuilt, compared with a drag handle */
.ba { padding: clamp(96px, 12vw, 160px) var(--gutter); background: var(--ink-2); }
.ba-head { display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin-bottom: clamp(32px, 4vw, 56px); }
.ba-head h2 { font-size: clamp(44px, 6vw, 96px); }
.ba-head .lede { max-width: 52ch; }
.ba-figure { margin: 0; }
.ba-frame { --pos: 50%; position: relative; max-width: 1200px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #FFFFFF; box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
.ba-chrome { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #ECE8E4; border-bottom: 1px solid #D9D3CD; }
.ba-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D2CBC3; }
.ba-chrome .url { margin-left: 10px; flex: 1; max-width: 420px; height: 22px; display: flex; align-items: center; padding: 0 10px; border-radius: 6px; background: #FFFFFF; font: 500 11px/1 var(--mono); color: #6E6863; }
.ba-view { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-site { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ba-new { clip-path: inset(0 0 0 var(--pos)); grid-template-rows: auto minmax(0, 1fr) auto auto; }

.o-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; padding: 2.2cqi 3cqi; background: #F1F1F1; border-bottom: 1px solid #DDDDDD; font-family: Georgia, "Times New Roman", serif; color: #333; }
.o-name { font-size: 1.5cqi; font-weight: 700; letter-spacing: .04em; }
.o-nav { font-size: 1.5cqi; color: #1B4F9C; text-decoration: underline; }
.o-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; padding: 3cqi; min-height: 0; background: #FFFFFF; }
.o-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.o-slide { overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #C8C8C8; background: repeating-linear-gradient(135deg, #D6D6D6 0 1.2cqi, #CDCDCD 1.2cqi 2.4cqi); color: #6A6A6A; font: 1.6cqi Arial, sans-serif; }
.o-text { font-family: Georgia, "Times New Roman", serif; color: #444; font-size: 1.6cqi; line-height: 1.6; }
.o-text p { margin: 0 0 1.4cqi; }
.o-text .o-h { font-size: 3.6cqi; line-height: 1.15; color: #333; }
.o-link { color: #1B4F9C; text-decoration: underline; }
.o-small { font-size: 1.15cqi; color: #888; }
.o-foot, .n-foot { display: flex; align-items: flex-end; gap: 2cqi; padding: 2cqi 3cqi 2.6cqi; }
.o-foot { background: #FFFFFF; }

.ba-speed { flex: none; display: flex; flex-direction: column; gap: .5cqi; padding: 1.3cqi 1.8cqi; border-radius: 1.2cqi; }
.ba-speed .lbl { font: 500 1.15cqi/1 var(--mono); letter-spacing: .02em; }
.ba-speed .val { font: 700 2.4cqi/1.1 var(--body); font-variant-numeric: tabular-nums; }
.ba-speed.bad { border: 1px solid #EFC9C9; background: #FBECEC; color: #8E1B1B; }
.ba-speed.good { border: 1px solid #C5DDCF; background: #E9F3EC; color: #1E5B47; }
.ba-serp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4cqi; padding: 1.3cqi 1.8cqi; border-radius: 1.2cqi; border: 1px solid #E3E3E3; background: #FFFFFF; font-family: Arial, sans-serif; box-shadow: 0 .4cqi 1.6cqi rgba(0, 0, 0, .06); }
.ba-serp .u { font-size: 1.15cqi; color: #5F6368; }
.ba-serp .t { font-size: 1.8cqi; color: #1A0DAB; }
.ba-serp .d { font-size: 1.3cqi; color: #4D5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-serp.bad .d { color: #A33A2E; }
.ba-serp .stars { color: #B06A00; font-weight: 700; }

.ba-new { background: #FFFFFF; color: #1C2A24; font-family: var(--body); }
.n-head { display: flex; align-items: center; gap: 3cqi; padding: 1.6cqi 3cqi; border-bottom: 1px solid #EEF1EF; }
.n-name { display: flex; align-items: center; gap: 1cqi; font-size: 1.9cqi; font-weight: 700; }
.n-logo { width: 3cqi; height: 3cqi; border-radius: .8cqi; background: #1E5B47; }
.n-nav { display: flex; gap: 2.4cqi; margin-left: auto; font-size: 1.5cqi; font-weight: 600; color: #4F5E57; }
.n-btn, .n-fill, .n-line { display: inline-flex; align-items: center; height: 4.4cqi; padding: 0 2.2cqi; border-radius: 999px; font-size: 1.5cqi; font-weight: 700; white-space: nowrap; }
.n-btn, .n-fill { background: #1E5B47; color: #FFFFFF; }
.n-line { border: 1px solid rgba(255, 255, 255, .7); color: #FFFFFF; }
.n-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 0; padding: 0 3cqi 0 0; background: #15110E; color: #FFFFFF; overflow: hidden; }
.n-photo { position: absolute; top: 0; left: 0; width: 64%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.n-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 17, 14, 0) 34%, rgba(21, 17, 14, .7) 52%, #15110E 64%); }
.n-copy { position: relative; z-index: 1; grid-column: 2; display: flex; flex-direction: column; gap: 1.8cqi; }
.n-toast { z-index: 1; }
.n-open { align-self: flex-start; padding: .7cqi 1.4cqi; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 1.3cqi; font-weight: 600; color: #F3E6D8; }
.n-h { margin: 0; font-size: 4.6cqi; font-weight: 700; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.n-btns { display: flex; flex-wrap: wrap; gap: 1cqi; }
.n-toast { position: absolute; right: 2.4cqi; top: 2.4cqi; display: flex; align-items: center; gap: 1.2cqi; padding: 1.2cqi 1.8cqi; border-radius: 1.4cqi; background: #FFFFFF; color: #1C2A24; font-size: 1.3cqi; line-height: 1.35; box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .35); }
.n-toast .dot { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 .5cqi rgba(47, 163, 107, .2); }
.n-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqi; padding: 2cqi 3cqi 0; }
.n-menu span { display: flex; justify-content: space-between; gap: 1cqi; padding: 1.2cqi 1.6cqi; border-radius: 1cqi; background: #F3F6F4; font-size: 1.5cqi; }
.n-menu i { font-style: normal; font-weight: 700; color: #1E5B47; }

.ba-labels { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto 12px; color: var(--text-2); }
.ba-labels span:last-child { color: var(--red-hi); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; pointer-events: none; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 0 18px rgba(0, 0, 0, .35); }
.ba-handle span { position: absolute; left: -24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 255, 255, .9); transition: transform .2s; }
.ba-handle svg { width: 22px; height: 22px; }
.ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; pointer-events: none; }
.ba-view { cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-handle span, .ba-view:hover .ba-handle span { transform: scale(1.08); }
.ba-range:focus-visible ~ .ba-handle span { outline: 3px solid var(--red-hi); outline-offset: 5px; }
.ba-frame.nudge .ba-new, .ba-frame.nudge .ba-handle { transition: clip-path .9s cubic-bezier(.6, 0, .2, 1), left .9s cubic-bezier(.6, 0, .2, 1); }
.ba figcaption { max-width: 1200px; margin: clamp(24px, 3vw, 40px) auto 0; }
.ba-list { list-style: none; counter-reset: ba; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ba-list li { counter-increment: ba; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); color: var(--text-2); font-size: 15px; line-height: 1.45; }
.ba-list li::before { content: "0" counter(ba); font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--red-hi); }
.ba-list b { color: var(--text); font-weight: 700; }
.ba-note { margin: 16px 0 0; color: var(--text-3); font-size: 14px; }

/* phones: the site mockups stack like a phone browser would show them */
@container (max-width: 600px) {
  .o-name { font-size: 3.4cqi; } .o-nav { display: none; }
  .o-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 4cqi; padding: 4cqi; }
  .o-slide { font-size: 3.4cqi; }
  .o-text { font-size: 3.4cqi; } .o-text .o-h { font-size: 6.6cqi; } .o-small { font-size: 2.6cqi; }
  .o-foot, .n-foot { flex-direction: column; align-items: stretch; gap: 2.4cqi; padding: 3cqi 4cqi 4cqi; }
  .ba-speed { flex-direction: row; justify-content: space-between; align-items: center; padding: 2cqi 3cqi; border-radius: 2.4cqi; }
  .ba-speed .lbl { font-size: 2.6cqi; } .ba-speed .val { font-size: 4.2cqi; }
  .ba-serp { padding: 2.2cqi 3cqi; border-radius: 2.4cqi; gap: .8cqi; } .ba-serp .u { font-size: 2.6cqi; } .ba-serp .t { font-size: 3.8cqi; } .ba-serp .d { font-size: 2.9cqi; white-space: normal; }
  .n-head { padding: 3cqi 4cqi; } .n-name { font-size: 4cqi; gap: 2cqi; } .n-logo { width: 5.6cqi; height: 5.6cqi; border-radius: 1.4cqi; } .n-nav { display: none; }
  .n-btn, .n-fill, .n-line { height: 8cqi; padding: 0 3.6cqi; font-size: 3.1cqi; } .n-btn { margin-left: auto; }
  .n-hero { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 0 4cqi 5cqi; }
  .n-photo { width: 100%; height: 62%; object-position: 70% 50%; }
  .n-hero::after { background: linear-gradient(180deg, rgba(21, 17, 14, 0) 40%, rgba(21, 17, 14, .85) 60%, #15110E 66%); }
  .n-copy { grid-column: 1; grid-row: 2; }
  .n-copy { gap: 3cqi; } .n-open { font-size: 2.8cqi; padding: 1.4cqi 2.6cqi; } .n-h { font-size: 8.4cqi; } .n-btns { gap: 2cqi; }
  .n-btns .n-line:last-child { display: none; }
  .n-toast { right: 3cqi; top: 3cqi; font-size: 2.8cqi; padding: 2cqi 3cqi; gap: 2cqi; border-radius: 2.4cqi; } .n-toast .dot { width: 2.4cqi; height: 2.4cqi; }
  .n-menu { grid-template-columns: 1fr; gap: 1.6cqi; padding: 3cqi 4cqi 0; } .n-menu span { font-size: 3.1cqi; padding: 2cqi 3cqi; border-radius: 2cqi; }
  .n-menu span:nth-child(3) { display: none; }
}

/* narrow screens */
@media (max-width: 860px) {
  .stage-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 12px; padding: calc(80px + env(safe-area-inset-top, 0px)) var(--gutter) 12px; }
  .stage-copy { height: auto; display: grid; padding-bottom: 16px; }
  .stage-copy > .hero-copy, .stage-copy > .captions, .cap { grid-area: 1 / 1; }
  .captions { display: grid; }
  .hero-copy, .cap { position: relative; inset: auto; justify-content: flex-end; gap: 8px; }
  .hero-copy .display { font-size: clamp(34px, 9.4vw, 50px); }
  .hero-copy .lede, .cap p { font-size: 14.5px; line-height: 1.45; max-width: none; }
  .scroll-cue, .cap .btn { display: none; }
  .cap h2 { font-size: clamp(26px, 7.4vw, 40px); }
  .progress { right: 0; }
  .stage-demo { min-height: 0; gap: 8px; justify-content: center; }
  .window-fit { display: block; position: relative; flex: none; width: 100%; height: var(--fit-h, calc(100vw - 2 * var(--gutter))); }
  .window { position: absolute; left: 50%; top: 0; width: 100%; height: var(--win-h, auto); aspect-ratio: 1; transform-origin: 50% 0; transform: translateX(-50%) scale(var(--fit, 1)); }
  .demo-controls { gap: 6px 10px; font-size: 12px; }
  .s-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 3.5cqi; }
  .img-slot > div { min-height: 0; }
  .toast { top: auto; bottom: calc(max(62px, 12.5cqi) + 10cqi); }
  .word-row { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .lead { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
  .lead-pillars, .season-cards { grid-template-columns: minmax(0, 1fr); }
  .ba-view { aspect-ratio: 9 / 16; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .tile { min-height: 150px; padding: 20px; }
}

/* reduced motion: no pinned scroll, the fixed site shows with a Before/After switch */
.rm .stage { height: auto; }
.rm .stage-pin { position: relative; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 48px; padding-bottom: 96px; }
.rm .stage-copy { display: contents; }
.rm .hero-copy { order: 1; }
.rm .stage-demo { order: 2; }
.rm .captions { order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.rm .hero-copy, .rm .cap { position: relative; inset: auto; justify-content: flex-start; opacity: 1 !important; transform: none !important; pointer-events: auto; }
.rm .window { width: min(100%, 1000px, calc((100svh - 190px) * 1.42)); }
.rm .cap h2 { font-size: clamp(32px, 3.4vw, 48px); }
.rm .progress, .rm .scroll-cue { display: none; }
@media (max-width: 860px) {
  .rm .window-fit { display: contents; }
  .rm .window { position: relative; left: auto; top: auto; transform: none; }
  .rm .cap { grid-area: auto; }
}