:root {
  --ink: #0d1222;
  --navy: #141a2e;
  --sun: #f5b83d;
  --sun-hot: #ff8a3d;
  --cream: #f6f1e7;
  --muted: #a7adc2;
  --line: rgba(255,255,255,.1);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-variant-numeric: lining-nums; background: var(--ink); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .98rem; transition: translate .25s ease-out, transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); }
.btn--sun:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); }
.btn--glass { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); transition: opacity .45s .1s, visibility .45s .1s; }
.loader__sun { width: 64px; fill: var(--sun); opacity: .15; transform: scale(.7) rotate(-30deg); }
.loaded .loader { opacity: 0; visibility: hidden; }
.lit .loader__sun { animation: lightup .7s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes lightup { to { opacity: 1; transform: scale(1) rotate(0); } }
.no-loader .loader { display: none; }

/* Header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 2rem; padding: .85rem clamp(1rem, 4vw, 3rem); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(13,18,34,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.brand__sun { width: 26px; fill: var(--sun); animation: spin 40s linear infinite; }
.top__nav { display: flex; gap: 1.8rem; margin-left: auto; font-size: .92rem; color: var(--muted); }
.top__nav a:hover { color: var(--cream); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 6.5rem clamp(1rem, 4vw, 3rem) 8.5rem; isolation: isolate; }
.hero { --p: 0; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 75% 110%, #2a2340 0%, var(--navy) 45%, var(--ink) 100%); }
.rays { position: absolute; width: 170vmax; height: 170vmax; left: 72%; top: calc(108% - var(--p) * 30vh); translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(245,184,61,.07) 0deg 4deg, transparent 4deg 15deg); mask: radial-gradient(circle, #000 8%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); animation: spin 120s linear infinite; }
.horizon { position: absolute; left: 72%; top: 108%; width: 70vmax; height: 70vmax; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,60,.55) 0%, rgba(245,140,50,.18) 35%, transparent 65%); transform: translateY(calc(var(--p) * -30vh)) scale(calc(1 + var(--p) * .35)); opacity: calc(1 - var(--p) * .2); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.blob--a { width: 38vmax; height: 38vmax; background: #3a2f6b; left: -10%; top: -15%; animation: drift 24s ease-in-out infinite alternate, dawn-a 34s ease-in-out infinite; }
.blob--b { width: 30vmax; height: 30vmax; background: #6b3a2a; right: -8%; top: 10%; animation: drift 21s ease-in-out infinite alternate-reverse, dawn-b 28s ease-in-out infinite; }
.blob--c { width: 26vmax; height: 26vmax; background: #7a2f62; left: 30%; bottom: -12%; opacity: .35; animation: drift 27s ease-in-out infinite alternate, dawn-c 40s ease-in-out infinite; }
@keyframes dawn-a { 33% { background: #5a2f6b; } 66% { background: #2f3f7a; } }
@keyframes dawn-b { 50% { background: #8a4a1f; } }
@keyframes dawn-c { 33% { background: #a3452f; } 66% { background: #5a2f7a; } }
.spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--cx, 70%) var(--cy, 70%), rgba(255,196,110,.11), transparent 65%); transition: opacity .4s; }
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; background: linear-gradient(90deg, var(--sun), var(--sun-hot)); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes drift { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .85; } }

.hero__inner { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.kicker { color: var(--sun); font-weight: 600; font-size: .9rem; letter-spacing: .02em; margin-bottom: 1.2rem; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; }
h1 em { font-style: italic; color: var(--sun); }
.js-anim h1 .w { opacity: .18; transition: opacity .5s ease-out, text-shadow .5s; transition-delay: calc(.35s + var(--i) * 55ms); }
.js-anim.loaded h1 .w { opacity: 1; }
.lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 33rem; line-height: 1.55; }
.cta { margin-top: 2.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.link-arrow { font-weight: 700; padding: .5rem .2rem; border-bottom: 1px solid rgba(245,184,61,.5); }
.link-arrow span { display: inline-block; transition: transform .2s; }
.link-arrow:hover span { transform: translateX(4px); }
.facts { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; list-style: none; font-size: .92rem; color: var(--muted); }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }
.facts strong { color: var(--cream); }
.facts s { opacity: .8; }

/* Phone mockup */
.hero__phone { --mx: 0; --my: 0; perspective: 1200px; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.phone-tilt { transform: rotateY(calc(var(--mx) * 14deg - var(--p) * 10deg)) rotateX(calc(var(--my) * -10deg + var(--p) * 22deg)) translateY(calc(var(--p) * -40px)) scale(calc(1 - var(--p) * .08)); transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.phone { position: relative; width: 260px; aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 12px; background: linear-gradient(145deg, #2a3150, #0b0f1c); box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow .6s; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(.6deg); } }
.phone__notch { position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 84px; height: 22px; border-radius: 20px; background: #05070d; z-index: 2; }
.mini { height: 100%; border-radius: 31px; overflow: hidden; background: #fbfaf7; color: #161a24; padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mini__bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mini__logo { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--acc); transition: background .5s; }
.mini__logo svg, .br__card i svg { width: 15px; height: 15px; fill: none; stroke: #161a24; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini__menu { margin-left: auto; width: 16px; height: 10px; border-block: 2px solid #161a24; position: relative; }
.mini__photo { height: 38%; border-radius: 16px; background: #d9d4c8 center / cover no-repeat; position: relative; overflow: hidden; box-shadow: inset 0 -40px 40px -20px rgba(0,0,0,.25); }
.mini__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); translate: -100% 0; animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { translate: 100% 0; } }
.mini__tag { font-size: 11px; color: #6a7080; font-weight: 600; }
.mini__head { font-family: var(--serif); font-size: 23px; line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
.mini__btns { display: flex; gap: 8px; }
.mini__btn { flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--acc); color: #161a24; transition: background .5s; }
.mini__btn--ghost { background: transparent; border: 1.5px solid #161a24; }
.mini__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.mini__chips span { font-size: 10.5px; padding: 5px 9px; border-radius: 999px; background: #eeebe4; font-weight: 600; }
.stage .swap { transition: opacity .35s, transform .35s; }
.stage.out .swap { opacity: 0; transform: translateY(8px); }
.trades { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.trades button { font: 600 .8rem var(--sans); color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .85rem; cursor: pointer; transition: all .25s; }
.trades button[aria-selected="true"] { color: var(--ink); background: var(--sun); border-color: var(--sun); }
.phone__note { font-size: .8rem; color: var(--muted); }

/* Stage: desktop window + phone + perks */
.stage { --acc: #f5b83d; position: relative; width: 640px; height: 560px; transform-style: preserve-3d; }
.browser-wrap { position: absolute; left: 0; top: 30px; transform: translateZ(-40px); }
.browser { width: 540px; border-radius: 14px; overflow: hidden; background: #fbfaf7; box-shadow: 0 40px 90px -25px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e9e5dc; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8ba; }
.browser__url { margin: 0 auto; padding: 4px 40px; border-radius: 6px; background: #fbfaf7; font-size: 11px; color: #6a7080; font-weight: 600; }
.br { position: relative; height: 330px; color: #fff; overflow: hidden; background: #fbfaf7; }
.br__hero { position: relative; height: 330px; overflow: hidden; }
.br__page.run { animation: peek 5.2s cubic-bezier(.6,0,.3,1) both; }
@keyframes peek { 0%, 40% { transform: none; } 62%, 100% { transform: translateY(-192px); } }
.br__more { padding: 20px 22px 22px; background: #fbfaf7; color: #161a24; }
.br__label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.br__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br__card { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px; background: #f0ece3; }
.br__card i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--acc); margin-bottom: 6px; }
.br__card b { font-size: 12.5px; }
.br__card span { font-size: 10.5px; opacity: .65; }
.br__trust { margin-top: 12px; font-size: 10.5px; font-weight: 600; opacity: .7; }
.br__name { white-space: nowrap; }
.br__photo { position: absolute; inset: 0; background: #2a2f3e center / cover no-repeat; }
.br__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,20,.85) 0%, rgba(10,12,20,.45) 60%, rgba(10,12,20,.15)); }
.br__nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 16px 22px; font-size: 13px; }
.br__links { margin-left: auto; display: flex; gap: 12px; white-space: nowrap; font-size: 11.5px; opacity: .8; }
.br__call { white-space: nowrap; margin-left: 12px; padding: 6px 12px; border-radius: 999px; background: var(--acc); color: #161a24; font-size: 11px; font-weight: 700; transition: background .5s; }
.br__body { position: relative; padding: 34px 22px 0; max-width: 330px; }
.br__tag { font-size: 11.5px; font-weight: 600; color: var(--acc); transition: color .5s; }
.br__head { margin-top: 8px; font-family: var(--serif); font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -.01em; }
.br__btns { margin-top: 18px; display: flex; gap: 8px; }
.br__btns .mini__btn { flex: 0 0 auto; padding: 9px 16px; }
.br__btns .mini__btn--ghost { border-color: #fff; color: #fff; }
.phone-wrap { position: absolute; right: 0; bottom: 0; transform: translateZ(60px) scale(.9); transform-origin: bottom right; }
.perk { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 14px; background: rgba(20,26,46,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); font-size: .78rem; color: var(--muted); line-height: 1.3; white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.perk svg { width: 22px; flex: none; fill: var(--sun); }
.perk b { display: block; color: var(--cream); font-size: .86rem; }
.perk--a { left: -30px; bottom: 150px; transform: translateZ(90px); }
.perk--b { right: 170px; top: 4px; transform: translateZ(70px); animation-delay: -2s; }
.perk--c { left: 230px; bottom: 96px; transform: translateZ(110px); animation-delay: -4s; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* Each demo gets its own design so none look like a template */
.mini, .br { transition: opacity .35s, transform .35s; }
.stage { --disp: "Archivo", sans-serif; }

/* Roofing: dark slate, heavy caps, square corners */
.stage[data-t="roof"] .mini { background: #1b2028; color: #fff; }
.stage[data-t="roof"] .mini__menu { border-color: #fff; }
.stage[data-t="roof"] .mini__photo { margin: 0 -16px; border-radius: 0; }
.stage[data-t="roof"] .mini__tag { color: var(--acc); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.stage[data-t="roof"] :is(.mini__head, .br__head) { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.stage[data-t="roof"] .mini__head { font-size: 21px; }
.stage[data-t="roof"] .br__head { font-size: 32px; }
.stage[data-t="roof"] :is(.mini__btn, .br__call, .mini__chips span) { border-radius: 3px; }
.stage[data-t="roof"] .mini__btn--ghost { border-color: #fff; color: #fff; }
.stage[data-t="roof"] .mini__chips span { background: rgba(255,255,255,.08); color: #fff; }
.stage[data-t="roof"] .br__tag { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }

/* Tree care: cream + forest, serif italic, arched photo */
.stage[data-t="tree"] .mini { background: #f2ede0; color: #1f3326; text-align: center; }
.stage[data-t="tree"] .mini__photo { border-radius: 120px 120px 14px 14px; height: 40%; }
.stage[data-t="tree"] :is(.mini__head, .br__head) { font-family: var(--serif); font-style: italic; font-weight: 500; }
.stage[data-t="tree"] .mini__head { font-size: 25px; }
.stage[data-t="tree"] .mini__tag { color: #6b7d5c; }
.stage[data-t="tree"] .mini__btn { background: #1f3326; color: #f2ede0; }
.stage[data-t="tree"] .mini__btn--ghost { background: transparent; color: #1f3326; border-color: #1f3326; }
.stage[data-t="tree"] .mini__chips { justify-content: center; }
.stage[data-t="tree"] .mini__chips span { background: transparent; border: 1px solid #c9c0aa; }
.stage[data-t="tree"] .br { background: #f2ede0; color: #1f3326; }
.stage[data-t="tree"] .br__photo { left: 54%; top: 58px; right: 22px; bottom: 0; border-radius: 140px 140px 0 0; }
.stage[data-t="tree"] .br__photo::after { display: none; }
.stage[data-t="tree"] .br__body { max-width: 290px; }
.stage[data-t="tree"] .br__head { font-size: 38px; }
.stage[data-t="tree"] .br__tag { color: #6b7d5c; }
.stage[data-t="tree"] .br__call, .stage[data-t="tree"] .br__btns .mini__btn { background: #1f3326; color: #f2ede0; }
.stage[data-t="tree"] .br__btns .mini__btn--ghost { background: transparent; color: #1f3326; border-color: #1f3326; }

/* Barber: black + red poster, condensed caps, centred over the photo */
.stage[data-t="barber"] .mini { position: relative; background: #0b0b0b; color: #fff; justify-content: flex-end; text-align: center; }
.stage[data-t="barber"] .mini__bar { position: absolute; top: 46px; left: 16px; right: 16px; z-index: 1; }
.stage[data-t="barber"] .mini__menu { border-color: #fff; }
.stage[data-t="barber"] .mini__photo { position: absolute; inset: 0; height: auto; border-radius: 0; opacity: .5; }
.stage[data-t="barber"] .mini > :not(.mini__photo) { position: relative; }
.stage[data-t="barber"] :is(.mini__head, .br__head) { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .98; }
.stage[data-t="barber"] .mini__head { font-size: 34px; }
.stage[data-t="barber"] .mini__tag { color: #ccc; }
.stage[data-t="barber"] :is(.mini__btn, .br__call) { border-radius: 0; color: #fff; }
.stage[data-t="barber"] .mini__btn--ghost { border-color: #fff; }
.stage[data-t="barber"] .mini__chips { margin-top: 4px; justify-content: center; }
.stage[data-t="barber"] .mini__chips span { background: transparent; color: #fff; border-bottom: 2px solid var(--acc); border-radius: 0; }
.stage[data-t="barber"] .br__photo::after { background: rgba(0,0,0,.6); }
.stage[data-t="barber"] .br__body { max-width: none; text-align: center; padding-top: 44px; }
.stage[data-t="barber"] .br__head { font-size: 52px; }
.stage[data-t="barber"] .br__tag { color: #ddd; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; }
.stage[data-t="barber"] .br__btns { justify-content: center; }

/* Landscaping: bright white, friendly bold sans, photo as a wide strip below */
.stage[data-t="lawn"] .mini { background: #fff; color: #16301c; }
.stage[data-t="lawn"] .mini__tag { order: 1; display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #e8f5ea; color: #2c7a3f; }
.stage[data-t="lawn"] .mini__head { order: 2; font-family: var(--sans); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.stage[data-t="lawn"] .mini__btns { order: 3; }
.stage[data-t="lawn"] .mini__photo { order: 4; border-radius: 22px; height: 34%; }
.stage[data-t="lawn"] .mini__chips { order: 5; margin-top: 0; }
.stage[data-t="lawn"] .mini__chips span { background: #e8f5ea; color: #2c7a3f; }
.stage[data-t="lawn"] .mini__btn { color: #fff; }
.stage[data-t="lawn"] .mini__btn--ghost { color: #16301c; border-color: #16301c; }
.stage[data-t="lawn"] .br { background: #fff; color: #16301c; }
.stage[data-t="lawn"] .br__photo { top: auto; left: 22px; right: 22px; height: 112px; border-radius: 18px 18px 0 0; }
.stage[data-t="lawn"] .br__photo::after { display: none; }
.stage[data-t="lawn"] .br__body { max-width: none; text-align: center; padding-top: 10px; }
.stage[data-t="lawn"] .br__head { font-family: var(--sans); font-weight: 800; font-size: 30px; letter-spacing: -.02em; max-width: 400px; margin-inline: auto; }
.stage[data-t="lawn"] .br__tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8f5ea; color: #2c7a3f; }
.stage[data-t="lawn"] .br__btns { justify-content: center; }
.stage[data-t="lawn"] :is(.br__btns .mini__btn, .br__call) { color: #fff; }
.stage[data-t="lawn"] .br__btns .mini__btn--ghost { color: #16301c; border-color: #16301c; }

/* Theme details: logos, names, services section */
.stage[data-t="roof"] :is(.mini__name, .br__name) { font-family: "Archivo", sans-serif; text-transform: uppercase; letter-spacing: 0; font-size: 12px; }
.stage[data-t="roof"] :is(.mini__logo, .br__card i) { border-radius: 3px; }
.stage[data-t="roof"] .br__more { background: #1b2028; color: #fff; }
.stage[data-t="roof"] .br__card { background: rgba(255,255,255,.06); border-radius: 3px; border: 1px solid rgba(255,255,255,.12); }

.stage[data-t="tree"] :is(.mini__name, .br__name) { font-family: var(--serif); font-style: italic; font-size: 1.1em; }
.stage[data-t="tree"] :is(.mini__logo, .br__card i) { border-radius: 50%; background: #1f3326; }
.stage[data-t="tree"] :is(.mini__logo, .br__card i) svg { stroke: #f2ede0; }
.stage[data-t="tree"] .br__more { background: #f2ede0; color: #1f3326; }
.stage[data-t="tree"] .br__label { color: #6b7d5c; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }
.stage[data-t="tree"] .br__card { background: transparent; border: 1px solid #c9c0aa; border-radius: 16px; }

.stage[data-t="barber"] :is(.mini__name, .br__name) { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.stage[data-t="barber"] :is(.mini__logo, .br__card i) { background: transparent; border: 1.5px solid var(--acc); border-radius: 0; }
.stage[data-t="barber"] :is(.mini__logo, .br__card i) svg { stroke: var(--acc); }
.stage[data-t="barber"] .br__more { background: #0b0b0b; color: #fff; text-align: center; }
.stage[data-t="barber"] .br__label { font-family: "Anton", sans-serif; font-weight: 400; font-size: 13px; }
.stage[data-t="barber"] .br__card { background: #161616; border-radius: 0; border: 1px solid #2a2a2a; border-top-color: var(--acc); align-items: center; }

.stage[data-t="lawn"] :is(.mini__name, .br__name) { font-weight: 800; letter-spacing: -.02em; }
.stage[data-t="lawn"] :is(.mini__logo, .br__card i) { border-radius: 50%; }
.stage[data-t="lawn"] :is(.mini__logo, .br__card i) svg { stroke: #fff; }
.stage[data-t="lawn"] .br__more { background: #fff; color: #16301c; text-align: center; }
.stage[data-t="lawn"] .br__label { color: #2c7a3f; }
.stage[data-t="lawn"] .br__card { background: #e8f5ea; border-radius: 18px; align-items: center; }

/* Trades marquee along the horizon */
.marquee { position: absolute; left: 0; right: 0; bottom: 1.4rem; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: slide 45s linear infinite; }
.marquee__track span { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: rgba(246,241,231,.6); white-space: nowrap; }
.marquee__track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); opacity: .7; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Scroll cue */
.scroll-cue { position: absolute; bottom: 5rem; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; }
.scroll-cue__mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-cue__mouse span { width: 3px; height: 7px; border-radius: 2px; background: var(--sun); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }
.scrolled-away .scroll-cue { opacity: 0; pointer-events: none; }

/* Mobile action bar */
.mbar { display: none; }

/* Load-in */
.js-anim .rise { opacity: 0; transform: translateY(22px); }
.js-anim.loaded .rise { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-anim.loaded .rise:nth-child(2) { transition-delay: .08s; }
.js-anim.loaded .rise:nth-child(3) { transition-delay: .16s; }
.js-anim.loaded .rise:nth-child(4) { transition-delay: .24s; }
.js-anim.loaded .rise:nth-child(5) { transition-delay: .32s; }
.js-anim.loaded .hero__phone { transition-delay: .2s; }

/* ---------- Sunrise warp ---------- */
.warp { --r: 0; --g: 0; --f: 0; --d: 0; position: relative; height: 420vh; background: var(--ink); }
.warp__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.warp__stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp__beats { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0 1rem; text-align: center; text-shadow: 0 2px 30px rgba(13,18,34,.6); margin-top: -28vh; }
.beat { --o: 0; --x: 0; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; will-change: opacity, transform;
  opacity: var(--o); filter: blur(calc((1 - var(--o)) * 8px)); transform: translateY(calc((1 - var(--o)) * 30px)) scale(calc(.94 + var(--o) * .06 + var(--x) * .6)); }
.beat__txt { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.03em; }
.beat__txt--sm { font-size: clamp(1.6rem, 3.6vw, 3rem); color: var(--muted); }
.beat__txt--big { font-size: clamp(3.4rem, 11vw, 9.5rem); }
.beat__txt em { font-style: italic; color: var(--sun); }
.search { display: flex; align-items: center; gap: .8rem; width: min(560px, 88vw); padding: 1.05rem 1.4rem; border-radius: 999px; text-shadow: none;
  background: #fff; color: #1b1f2a; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); font: 500 clamp(1.05rem, 2.2vw, 1.4rem) var(--sans); text-align: left; }
.search svg { width: 22px; flex: none; fill: none; stroke: #6a7080; stroke-width: 2.2; stroke-linecap: round; }
.search__q { white-space: nowrap; overflow: hidden; }
.search__caret { width: 2px; height: 1.3em; background: #1b1f2a; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.beat__txt--lead { font-size: clamp(1.9rem, 4.8vw, 4rem); }
.timer { --t: 0; position: relative; width: clamp(190px, 30vmin, 290px); aspect-ratio: 1; display: grid; place-items: center; }
.timer__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer__track { fill: rgba(13,18,34,.6); stroke: rgba(255,255,255,.22); stroke-width: 3; }
.timer__ticks line { stroke: rgba(255,255,255,.55); stroke-width: 2.5; stroke-linecap: round; }
.timer__bar { fill: none; stroke: var(--sun); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 553; stroke-dashoffset: calc(553 * var(--t)); }
.count { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--sun); line-height: .8; }
.count__n { display: inline-block; font-size: clamp(5rem, 13vmin, 8.5rem); }
.count__unit { font-family: var(--sans); font-style: normal; font-size: clamp(.72rem, 1.4vmin, .9rem); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.count__n.pop { animation: pop .45s cubic-bezier(.16,1,.3,1); }
@keyframes pop { from { transform: translateY(-14px); opacity: 0; } }
.warp__flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--f);
  background: radial-gradient(circle at 50% 50%, #fffaf0 0%, #ffd27a 45%, #ff9a3d 100%); }
@media (prefers-reduced-motion: reduce) { .warp { display: none; } .build { margin-top: 0; } }

/* ---------- Live preview builder ---------- */
.build { position: relative; z-index: 2; margin-top: -45vh; padding: clamp(5rem, 10vw, 8rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); background: linear-gradient(to bottom, transparent 12vw, var(--ink) 12vw); overflow: clip; }
.build__inner { max-width: 1320px; margin: 0 auto; }
.build__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.build h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.04; letter-spacing: -.02em; }
.build h2 em { font-style: italic; color: var(--sun); }
.build__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.build__preview { position: sticky; top: 90px; display: flex; justify-content: center; }
.build .br__page.run { animation: none; }

.panel { display: flex; flex-direction: column; gap: 1.4rem; padding: clamp(1.2rem, 2.5vw, 2rem); border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: .6rem; border: 0; min-width: 0; }
.field__label { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem; padding: 0; }
.step { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sun); color: var(--sun); font-size: .75rem; font-weight: 700; }
.field input { width: 100%; padding: .95rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(13,18,34,.7); color: var(--cream); font: 600 1.05rem var(--sans); transition: border-color .2s, background .2s; }
.field input::placeholder { color: #8a90a6; font-weight: 500; }
.field input:focus { outline: none; border-color: var(--sun); background: rgba(13,18,34,.95); }
.opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.opts button, .styles button { font: 600 .88rem var(--sans); color: var(--cream); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .6rem .95rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.opts button:hover, .styles button:hover { border-color: rgba(245,184,61,.6); }
.opts button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.styles button { display: flex; flex-direction: column; align-items: center; gap: .3rem; border-radius: 14px; padding: .75rem .4rem .65rem; }
.styles button[aria-pressed="true"] { border-color: var(--sun); background: rgba(245,184,61,.12); }
.sty { font-size: 1.6rem; line-height: 1; color: var(--cream); }
.sty--roof { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; }
.sty--tree { font-family: var(--serif); font-style: italic; }
.sty--barber { font-family: "Anton", sans-serif; text-transform: uppercase; }
.sty--lawn { font-family: var(--sans); font-weight: 800; }
.swatches { display: flex; gap: .7rem; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cream); transform: scale(1.08); }
.panel__go { margin-top: .4rem; white-space: normal; text-align: center; }
.panel__note { font-size: .82rem; color: var(--muted); text-align: center; margin-top: -.6rem; }
.opts button:focus-visible, .styles button:focus-visible, .swatches button:focus-visible, .btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* Hero -> builder transition, scrubbed by --q (0 to 1) */
.build { --q: 1; }
.build__inner { position: relative; }
.horizon-arc { position: absolute; left: 50%; top: 0; width: 170vw; height: 90vw; translate: -50% 0; border-radius: 50%; pointer-events: none;
  border-top: 2px solid rgba(255,236,200,.95);
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(245,170,70,.30), rgba(170,60,120,.12) 45%, transparent 70%), var(--ink); }
.horizon-arc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border-top: 10px solid rgba(255,196,110,.55); filter: blur(10px); }
.horizon-arc__flare { position: absolute; left: 50%; top: -1px; width: 46vw; height: 3px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff6e0, rgba(255,200,110,.6) 40%, transparent); filter: blur(1px); transform: scaleX(calc(.3 + var(--q) * .7)); }
.js-anim .build h2 .w { opacity: clamp(.12, calc(var(--q) * 1.5 * var(--n) - var(--i)), 1); transition: none; }
.js-anim .build__head .kicker, .js-anim .build__head .lede { opacity: clamp(0, calc(var(--q) * 1.6 - .4), 1); transform: translateY(calc((1 - var(--q)) * 30px)); }
.js-anim .panel { opacity: clamp(0, calc(var(--q) * 1.8 - .6), 1); transform: translateX(calc((1 - var(--q)) * -70px)); }
.js-anim .build__preview { perspective: 1400px; }
.js-anim .build__preview .stage { opacity: clamp(0, calc(var(--q) * 1.6 - .3), 1); transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--q)) * 160px)) rotateX(calc((1 - var(--q)) * 38deg)) scale(calc(.82 + var(--q) * .18)); }

/* the text you type lights up in the preview */
.flash { animation: flash .6s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--acc) 45%, transparent); } 100% { background: transparent; } }

@media (max-width: 1240px) and (min-width: 961px) {
  .stage { zoom: .82; }
}
@media (max-width: 960px) {
  .stage { width: 640px; zoom: .62; margin: 0 auto; }
  .perk--a { left: 0; }
  .top__nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero { padding-top: 6rem; padding-bottom: 6.5rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rays { left: 50%; top: calc(100% - var(--p) * 30vh); }
  .horizon { left: 50%; top: 100%; }
  .scroll-cue { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  .top .btn { display: none; }
  .cta .btn--sun { width: 100%; }
  .cta .btn--glass { flex: 1; }
  .facts { gap: .5rem 1.2rem; font-size: .85rem; }
  .stage { zoom: .52; }
  .perk { display: none; }
  .mbar { display: flex; gap: .6rem; position: fixed; inset: auto 0 0; z-index: 40; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(13,18,34,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .mbar .btn { flex: 1; padding: .8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Daytime sections ---------- */
.day { --paper: #f6efe2; --ink2: #1d2233; --soft: #5f6577; position: relative; color: var(--ink2);
  background: linear-gradient(to bottom, var(--ink) 0, #3b2a48 70px, #c9774f 150px, #f2c68a 210px, var(--paper) 300px); }
.kicker--day { color: #8f4d10; }
.day__h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.03; letter-spacing: -.02em; }
.day__h2 em { font-style: italic; color: #c2621a; }
.day__link { color: #8f4d10; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.day__lede { margin-top: 1rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--soft); max-width: 34rem; line-height: 1.55; }

/* Calculator */
.calc { padding: clamp(7rem, 12vw, 9rem) clamp(1rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem); }
.calc__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.calc__card { background: #fffaf2; border: 1px solid #eadfcb; border-radius: 26px; padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 30px 60px -36px rgba(80,50,20,.35); }
.calc__label { display: block; font-weight: 700; font-size: .95rem; color: var(--soft); }
.calc__value { display: block; margin-top: .3rem; font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.calc__range { --t: .52; --v: calc(15px + (100% - 30px) * var(--t)); width: 100%; margin-top: 1.4rem; height: 34px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #f5b83d var(--v), #eadfcb var(--v)); }
.calc__range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #f5b83d var(--v), #eadfcb var(--v)); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid #f5b83d; box-shadow: 0 4px 12px rgba(80,50,20,.3); transition: transform .15s; }
.calc__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #f5b83d; box-shadow: 0 4px 12px rgba(80,50,20,.3); }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc__range:focus-visible { outline: 2px solid #c2621a; outline-offset: 4px; border-radius: 8px; }
.calc__ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--soft); margin-top: .2rem; }
.bars { margin-top: 1.6rem; display: grid; gap: 1rem; }
.bar { display: grid; gap: .45rem; }
.bar__label { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; font-weight: 600; color: var(--ink2); }
.bar__label b { font-variant-numeric: lining-nums tabular-nums; }
.bar__track { position: relative; height: 14px; border-radius: 99px; background: #efe5d3; overflow: hidden; }
.bar__fill { position: absolute; inset: 0; border-radius: 99px; transform-origin: left; transform: scaleX(var(--w, .5)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.bar--job .bar__fill { background: linear-gradient(90deg, #f5b83d, #ff9a3d); }
.bar--site .bar__fill { background: var(--ink2); }
.calc__results { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.res { padding: 1.1rem 1.2rem; border-radius: 18px; background: #f6efe2; }
.res__num { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: #c2621a; font-variant-numeric: lining-nums tabular-nums; }
.res__txt { margin-top: .4rem; font-size: .9rem; color: var(--soft); line-height: 1.4; }
.calc__note { margin-top: 1.2rem; font-size: .85rem; color: var(--soft); }

/* Before / after */
.ba { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem); }
.ba__head { max-width: 1180px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.ba__frame { --pos: 50%; position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(60,40,20,.5); border: 1px solid #e3d6bf; user-select: none; touch-action: pan-y; }
.ba__pane { position: absolute; inset: 0; }
.ba__before { clip-path: inset(0 0 0 var(--pos)); }
.ab__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #e9e5dc; }
.ab__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8ba; }
.ab__bar span { margin: 0 auto; padding: 3px 40px; border-radius: 6px; background: #fbfaf7; font-size: 12px; color: #6a7080; font-weight: 600; }
.ab { position: relative; height: calc(100% - 34px); color: #fff; background: #1b2028 url(images/roof.jpg) center / cover; }
.ab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,14,22,.9), rgba(12,14,22,.55) 55%, rgba(12,14,22,.1)); }
.ab__nav { position: relative; display: flex; align-items: center; gap: .6rem; padding: clamp(.8rem, 2vw, 1.4rem) clamp(1rem, 3vw, 2.4rem); font-size: clamp(.8rem, 1.3vw, 1rem); }
.ab__logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; background: #f5b83d; }
.ab__logo svg { width: 17px; fill: none; stroke: #161a24; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab__nav b { font-family: "Archivo", sans-serif; text-transform: uppercase; }
.ab__links { margin-left: auto; display: flex; gap: 1.4rem; opacity: .85; }
.ab__call { margin-left: 1.2rem; padding: .5rem .9rem; border-radius: 4px; background: #f5b83d; color: #161a24; font-weight: 700; }
.ab__body { position: relative; padding: clamp(1.4rem, 5vw, 4rem) clamp(1rem, 3vw, 2.4rem) 0; max-width: 620px; }
.ab__tag { color: #f5b83d; font-size: clamp(.68rem, 1vw, .82rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ab__head { margin-top: .6rem; font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 4.2vw, 3.6rem); line-height: .98; }
.ab__btns { margin-top: clamp(1rem, 2.4vw, 1.8rem); display: flex; gap: .6rem; flex-wrap: wrap; }
.ab__btn { padding: .75rem 1.2rem; border-radius: 4px; background: #f5b83d; color: #161a24; font-weight: 700; font-size: clamp(.75rem, 1.2vw, .95rem); }
.ab__btn--ghost { background: transparent; border: 1.5px solid #fff; color: #fff; }
.ab__ticks { margin-top: clamp(1rem, 2.4vw, 1.8rem); display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; font-size: clamp(.72rem, 1.1vw, .9rem); opacity: .9; }
.ab__ticks li::before { content: "✓ "; color: #f5b83d; font-weight: 700; }
.listing { position: absolute; inset: 0; background: #eceae6; display: grid; grid-template-columns: 1fr; color: #3c4043; font-family: Arial, Helvetica, sans-serif; }
.listing__map { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 49%, #fff 49% 51%, transparent 51%) 0 0 / 180px 180px,
  linear-gradient(0deg, transparent 49%, #fff 49% 51%, transparent 51%) 0 0 / 180px 180px, #e5e3df; opacity: .9; }
.listing__pin { position: absolute; left: 68%; top: 42%; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #d93025; transform: rotate(-45deg); }
.listing__body { position: relative; justify-self: end; margin: clamp(1rem, 3vw, 2rem); width: min(380px, 70%); background: #fff; border-radius: 10px; padding: clamp(1rem, 2vw, 1.4rem); box-shadow: 0 2px 8px rgba(0,0,0,.15); align-self: start; }
.listing__name { font-size: clamp(1.1rem, 2vw, 1.5rem); color: #202124; }
.listing__meta { margin-top: .3rem; font-size: clamp(.75rem, 1.1vw, .9rem); color: #70757a; }
.listing__rows { margin-top: 1rem; display: grid; gap: .5rem; font-size: clamp(.75rem, 1.1vw, .9rem); }
.listing__rows p { display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top: .5rem; }
.listing__rows i { color: #9aa0a6; }
.listing__btns { margin-top: 1rem; display: flex; gap: .5rem; }
.listing__btns span { padding: .45rem .9rem; border: 1px solid #dadce0; border-radius: 99px; font-size: clamp(.72rem, 1vw, .85rem); color: #1a73e8; }
.ba__tag { position: absolute; bottom: 1rem; padding: .45rem .8rem; border-radius: 99px; font-size: .8rem; font-weight: 700; pointer-events: none; }
.ba__tag--before { right: 1rem; background: rgba(255,255,255,.92); color: #3c4043; }
.ba__tag--after { left: 1rem; background: rgba(13,18,34,.85); color: #fff; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; translate: -50% 0; background: #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ba__grip { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ba__grip svg { width: 24px; fill: none; stroke: #c2621a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba__hint { position: absolute; top: calc(50% + 40px); left: var(--pos); translate: -50% 0; padding: .3rem .7rem; border-radius: 99px; background: #fff; color: #c2621a; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; animation: nudge 1.6s ease-in-out infinite; transition: opacity .4s; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.ba__frame.touched .ba__hint { opacity: 0; }
.ba__frame { cursor: ew-resize; }
.ba__frame.dragging .ba__grip { transform: scale(1.1); }
.ba__grip { transition: transform .2s; }
/* keyboard-only control, visually hidden */
.ba__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.ba__range:focus-visible + * , .ba__frame:has(.ba__range:focus-visible) .ba__grip { outline: 3px solid #c2621a; outline-offset: 3px; }

@media (max-width: 960px) {
  .calc__inner { grid-template-columns: 1fr; }
  .ab__links { display: none; }
}
@media (max-width: 600px) {
  .calc__results { grid-template-columns: 1fr; }
  .ba__frame { aspect-ratio: 3 / 4; }
  .ab::before { background: linear-gradient(180deg, rgba(12,14,22,.4), rgba(12,14,22,.9) 70%); }
  .ab__body { padding-top: 30%; }
  .listing__body { width: auto; }
  .ba__long { display: none; }
  .ab__call { display: none; }
}

/* ---------- Pricing ---------- */
.price { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem); }
.price__head { max-width: 1180px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.price__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: stretch; }
.plan { position: relative; overflow: hidden; padding: clamp(1.6rem, 3.5vw, 2.8rem); border-radius: 28px; color: var(--cream);
  background: radial-gradient(120% 70% at 100% 0%, #3a2a4a 0%, transparent 60%), var(--ink); box-shadow: 0 40px 80px -40px rgba(30,20,40,.6); }
.plan__badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--sun); }
.plan__badge svg { width: 20px; fill: var(--sun); }
.plan__price { margin-top: 1.2rem; font-family: var(--serif); font-size: clamp(4.4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.03em; color: var(--cream); }
.plan__cur { font-size: .45em; vertical-align: .9em; margin-right: .05em; color: var(--sun); }
.plan__cents { font-size: .4em; vertical-align: 1em; }
.plan__was { margin-top: .8rem; color: var(--muted); font-size: .95rem; }
.plan__was s { color: #c9cdda; }
.plan__list { margin-top: 1.6rem; display: grid; gap: .75rem; list-style: none; }
.plan__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; line-height: 1.4; }
.plan__list svg, .go__points svg { width: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--sun); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.plan__fine { margin-top: 1.2rem; font-size: .82rem; color: var(--muted); }
.price__side { display: grid; grid-template-rows: auto 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.care { padding: 1.6rem 1.7rem; border-radius: 24px; background: #fffaf2; border: 1px solid #eadfcb; }
.care__name { font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.care__name span { font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; background: #f1e8d8; color: #6b5a3e; }
.care__price { margin-top: .5rem; font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.care__price span { font-family: var(--sans); font-size: .95rem; color: var(--soft); margin-left: .2rem; }
.care__txt { margin-top: .6rem; color: var(--soft); font-size: .95rem; line-height: 1.5; }
.how { list-style: none; padding: 1.6rem 1.7rem; border-radius: 24px; background: #fffaf2; border: 1px solid #eadfcb; display: grid; gap: 1.2rem; align-content: space-evenly; scroll-margin-top: 90px; }
.how li { display: flex; gap: 1rem; align-items: flex-start; }
.how__n { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink2); color: var(--sun); font-family: var(--serif); font-size: 1.15rem; }
.how b { display: block; font-size: 1.02rem; }
.how p { margin-top: .2rem; color: var(--soft); font-size: .93rem; line-height: 1.45; }

/* ---------- FAQ ---------- */
.faq { padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(8rem, 14vw, 11rem); }
.faq__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: 100px; }
.faq__list { display: grid; gap: .6rem; }
.faq details { border-radius: 18px; background: #fffaf2; border: 1px solid #eadfcb; transition: background .2s; }
.faq details[open] { background: #fff; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; font-weight: 700; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #f1e8d8; color: #8f4d10; font-size: 1.2rem; font-weight: 500; transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--sun); color: var(--ink2); }
.faq summary:focus-visible { outline: 2px solid #c2621a; outline-offset: -2px; border-radius: 18px; }
.faq details p { padding: 0 1.3rem 1.2rem; color: var(--soft); line-height: 1.6; }

/* ---------- Sunset: Get Started ---------- */
.go { position: relative; color: var(--cream); background: var(--ink); scroll-margin-top: 0; }
.go__sky { position: absolute; inset: 0 0 auto; height: 520px; pointer-events: none;
  background: linear-gradient(to bottom, #f6efe2 0, #f2c68a 90px, #d8834f 190px, #8a3f5c 290px, #3b2a48 380px, var(--ink) 520px); }
.go__sky::after { content: ""; position: absolute; inset: 300px 0 -200px; opacity: .7;
  background-image: radial-gradient(1.2px 1.2px at 12% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 30%, #ffe8b8 50%, transparent 51%), radial-gradient(1px 1px at 63% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 79% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 72%, #ffe8b8 50%, transparent 51%);
  background-size: 420px 260px; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .35; } }
.go__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(18rem, 30vw, 22rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.go h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.025em; }
.go h2 em { font-style: italic; color: var(--sun); }
.go__points { margin-top: 1.8rem; display: grid; gap: .8rem; list-style: none; color: var(--cream); }
.go__points li { display: flex; gap: .7rem; align-items: center; }
.go__points a { color: var(--sun); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f { display: grid; gap: .45rem; font-weight: 600; font-size: .9rem; }
.f i { font-style: normal; font-weight: 500; color: var(--muted); }
.f input, .f select, .f textarea { width: 100%; padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(13,18,34,.75); color: var(--cream); font: 500 1rem var(--sans); transition: border-color .2s; }
.f textarea { resize: vertical; min-height: 96px; }
.f select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sun) 50%), linear-gradient(135deg, var(--sun) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.f select option { color: #161a24; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--sun); }
.f ::placeholder { color: #8a90a6; }
.form__hp { position: absolute; left: -9999px; }
.human { padding: 1rem 1.1rem; border-radius: 16px; background: rgba(13,18,34,.6); border: 1px dashed rgba(245,184,61,.45); }
.human__label { font-weight: 700; font-size: .92rem; margin-bottom: .6rem; }
.human.ok { border-style: solid; border-color: var(--sun); }
.human__range { --t: 0; width: 100%; height: 30px; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; }
.human__range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--sun) calc(15px + (100% - 30px) * var(--t)), rgba(255,255,255,.15) 0); }
.human__range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--sun) calc(15px + (100% - 30px) * var(--t)), rgba(255,255,255,.15) 0); }
.human__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='12' fill='%230d1222'/%3E%3C/svg%3E") center / 60% no-repeat; }
.human__range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sun); }
.human__range:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; border-radius: 8px; }
.form__send { justify-self: start; }
.form__send:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.form__msg { min-height: 1.2em; font-size: .92rem; color: #ffb4a3; }
.form__done { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.form__done-sun svg { width: 60px; fill: var(--sun); animation: spin 20s linear infinite; }
.form__done h3 { margin-top: 1rem; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.8rem); }
.form__done p { margin-top: .8rem; color: var(--muted); }
.form__done a { color: var(--sun); font-weight: 700; }

/* Footer: the grand finale */
.foot { --e: 0; position: relative; max-width: none; margin: 0; padding: 0; border-top: 1px solid var(--line); overflow: hidden; }
.foot__grid { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 0;
  display: grid; grid-template-columns: 1.4fr 1fr 1.3fr auto; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.foot__tag { margin: 1rem 0 1.4rem; max-width: 22rem; color: var(--muted); line-height: 1.55; }
.foot__col { display: grid; gap: .7rem; justify-items: start; font-size: .95rem; }
.foot__col a { color: var(--cream); opacity: .85; transition: opacity .2s, color .2s; }
.foot__col a:hover { opacity: 1; color: var(--sun); }
.foot__h { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); margin-bottom: .3rem; }
.foot__note { color: var(--muted); font-size: .88rem; }
.foot__top { display: grid; justify-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.foot__top svg { width: 58px; height: 58px; padding: 14px; border-radius: 50%; fill: var(--sun); border: 1px solid rgba(245,184,61,.4); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s; }
.foot__top:hover svg { transform: translateY(-6px) rotate(45deg); background: rgba(245,184,61,.12); }
.foot__top:hover { color: var(--cream); }
.foot__finale { position: relative; margin-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(1rem, 3vw, 2.4rem); overflow: hidden; }
.foot__glow { position: absolute; left: 50%; bottom: -60%; width: 90vw; height: 70vw; max-height: 120%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,170,70,.65), rgba(200,80,90,.25) 55%, transparent);
  opacity: calc(.3 + var(--e) * .7); transform: translateY(calc((1 - var(--e)) * 25%)); }
.foot__mark { position: relative; display: block; text-align: center; white-space: nowrap; font-family: var(--serif); font-weight: 500;
  font-size: clamp(4.5rem, 19vw, 19rem); line-height: 1; padding-bottom: .1em; letter-spacing: -.045em; color: var(--cream);
  transform: translateY(calc((1 - var(--e)) * 45%)); opacity: calc(.2 + var(--e) * .8); }
.foot__mark em { font-style: italic; color: var(--sun); }
.foot__bar { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 1180px; margin: 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 3rem) calc(1.3rem + env(safe-area-inset-bottom)); font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--ink); }

/* Phone action bar slides away once the form is on screen */
.mbar { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.mbar-off .mbar { transform: translateY(110%); }

@media (max-width: 960px) {
  .price__grid, .faq__inner, .go__inner { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__top { grid-column: 1 / -1; justify-self: start; grid-auto-flow: column; align-items: center; }
  .faq__head { position: static; }
}
@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
  .form__send { justify-self: stretch; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__top { grid-column: 1 / -1; justify-self: start; grid-auto-flow: column; align-items: center; }
  .foot__bar { flex-direction: column; gap: .2rem; }
}

/* Builder on smaller screens */
@media (max-width: 960px) {
  .build__grid { grid-template-columns: 1fr; }
  .build__preview { order: -1; top: 58px; z-index: 5; margin: 0 -1rem; padding: .6rem 0 .8rem; background: linear-gradient(var(--ink) 85%, transparent); }
}
@media (max-width: 600px) {
  .build .browser-wrap { display: none; }
  .build .stage { width: 240px; height: 486px; zoom: .6; }
  .styles { grid-template-columns: repeat(2, 1fr); }
}

/* Big numbers: a serif whose digits all sit on the line (the headline font drops its 9s) */
:root { --num: "DM Serif Display", var(--serif); }
.plan__price, .care__price, .calc__value, .res__num, .count__n, .how__n { font-family: var(--num); font-weight: 400; letter-spacing: -.01em; }