/* ITBrew, v.1, the skyline build. One stylesheet, no build step. Tokens at the top, both themes. */

/* Tokens. Light is the painted dusk; dark is the same valley after sundown. */
:root {
  color-scheme: light;
  --sky1: #c7c1ea;
  --sky2: #ebcfd9;
  --sky3: #fbdcbf;
  --glow: #fff1d6;
  --sun: #fff3d9;
  --cloud: rgba(255,255,255,.42);
  --stars: 0;
  --m1: #bfb4dd; --m1b: #dcd3ea;
  --m2: #a396c9; --m2b: #c2b7dd;
  --m3: #8072b1; --m3b: #a094c6;
  --m4: #5b5093; --m4b: #7f74b3;
  --rim: rgba(255,240,220,.7);
  --lake1: #d9c9e6; --lake2: #f4d9c6;
  --h1: #aabf97; --h1b: #c3d2b1;
  --h2: #93ac7f; --h2b: #a9bd97;
  --h3: #7f9a6d;
  --ground: #ffffff;
  --ground-2: #f8f6fb;
  --ink: #1a1926;
  --ink-2: #4b4959;
  --muted: #585565;
  --hair: #e6e3ef;
  --hair-2: #d5d1e2;
  --pill: #14131f;
  --pill-ink: #ffffff;
  --pill-2: #ffffff;
  --pill-2-ink: #14131f;
  --link: #4e43a6;
  --wash-a: #fbe7dc;
  --wash-b: #e6e2f7;
  --wash-c: #fdf3e6;
  --shadow: 0 40px 90px -30px rgba(52,38,96,.45), 0 12px 30px -14px rgba(52,38,96,.25);
  --shadow-2: 0 24px 60px -24px rgba(52,38,96,.35);
  --hero-ink: #1a1926;
  --hero-muted: #3f3c55;
  --hero-hair: rgba(26,25,38,.18);
  --ok: #2f6b45;
  --err: #a13c3c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky1: #0d0e2c;
    --sky2: #221a40;
    --sky3: #4a2d4f;
    --glow: #8a4e60;
    --sun: #ece4d2;
    --cloud: rgba(255,255,255,.07);
    --stars: 1;
    --m1: #3b3266; --m1b: #4d4374;
    --m2: #2d2756; --m2b: #3c3466;
    --m3: #221d48; --m3b: #2e2856;
    --m4: #181538; --m4b: #221e46;
    --rim: rgba(235,210,220,.28);
    --lake1: #3a2f5a; --lake2: #5c3d55;
    --h1: #22302f; --h1b: #2c3a38;
    --h2: #1b2726; --h2b: #223030;
    --h3: #151f1e;
    --ground: #0e0e16;
    --ground-2: #13131d;
    --ink: #eceaf4;
    --ink-2: #c7c4d6;
    --muted: #bdb9cf;
    --hair: #24233a;
    --hair-2: #34324c;
    --pill: #f2eff8;
    --pill-ink: #14131f;
    --pill-2: #1e1d2c;
    --pill-2-ink: #eceaf4;
    --link: #b9b0f0;
    --wash-a: #2a1c33;
    --wash-b: #1c1b38;
    --wash-c: #241a2c;
    --shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 12px 30px -14px rgba(0,0,0,.6);
    --shadow-2: 0 24px 60px -24px rgba(0,0,0,.7);
    --hero-ink: #f1eef8;
    --hero-muted: #cbc5dd;
    --hero-hair: rgba(241,238,248,.2);
    --ok: #8fd3a5;
    --err: #f0a3a3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sky1: #0d0e2c;
  --sky2: #221a40;
  --sky3: #4a2d4f;
  --glow: #8a4e60;
  --sun: #ece4d2;
  --cloud: rgba(255,255,255,.07);
  --stars: 1;
  --m1: #3b3266; --m1b: #4d4374;
  --m2: #2d2756; --m2b: #3c3466;
  --m3: #221d48; --m3b: #2e2856;
  --m4: #181538; --m4b: #221e46;
  --rim: rgba(235,210,220,.28);
  --lake1: #3a2f5a; --lake2: #5c3d55;
  --h1: #22302f; --h1b: #2c3a38;
  --h2: #1b2726; --h2b: #223030;
  --h3: #151f1e;
  --ground: #0e0e16;
  --ground-2: #13131d;
  --ink: #eceaf4;
  --ink-2: #c7c4d6;
  --muted: #bdb9cf;
  --hair: #24233a;
  --hair-2: #34324c;
  --pill: #f2eff8;
  --pill-ink: #14131f;
  --pill-2: #1e1d2c;
  --pill-2-ink: #eceaf4;
  --link: #b9b0f0;
  --wash-a: #2a1c33;
  --wash-b: #1c1b38;
  --wash-c: #241a2c;
  --shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-2: 0 24px 60px -24px rgba(0,0,0,.7);
  --hero-ink: #f1eef8;
  --hero-muted: #cbc5dd;
  --hero-hair: rgba(241,238,248,.2);
  --ok: #8fd3a5;
  --err: #f0a3a3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > * { flex: none; width: 100%; }
.foot { margin-top: auto; }
img, video, svg { max-width: 100%; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, .display { font-family: "Funnel Display", "Segoe UI", system-ui, sans-serif; font-weight: 300; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.12; text-wrap: balance; }
h3 { font-size: 24px; font-weight: 400; line-height: 1.25; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
/* A select with a transparent background makes Chrome paint its dropdown in the OS colours, so a dark page
   got a white list. Give the select and its options the page ground and ink; color-scheme on :root does the rest. */
select { background-color: var(--ground); color: var(--ink); }
select option { background-color: var(--ground); color: var(--ink); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--pill); color: var(--pill-ink); padding: 10px 16px; border-radius: 999px; z-index: 50; }
.skip:focus { left: 16px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 6vw, 96px); }
.wrap-n { max-width: 880px; }

/* Buttons: one black pill, and a quiet second one */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--pill); color: var(--pill-ink); font-weight: 500; text-decoration: none;
  font-size: 16px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.pill-2 { background: var(--pill-2); color: var(--pill-2-ink); border: 1px solid var(--hair-2); }
.textlink { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Header, sitting on the sky */
.hdr { position: relative; z-index: 5; }
.hdr .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; padding-block: 8px; color: var(--hero-ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: inherit; margin-right: auto; }
.brand svg { width: 30px; height: 30px; }
.brand b { font-family: "Funnel Display", sans-serif; font-weight: 500; font-size: 21px; letter-spacing: -.005em; line-height: 1; }
.nav { display: flex; gap: 18px; font-size: 15px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; padding: 0 3px; border-bottom: 1px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }
.nav a:hover { border-bottom-color: currentColor; }
.hdr .phone { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 500; font-size: 15px; }
.theme-btn { background: transparent; border: 1px solid var(--hero-hair); color: inherit; border-radius: 999px; padding: 4px 14px; font-size: 14px; min-height: 44px; }

/* Hero: the painted valley */
.hero { position: relative; overflow: hidden; color: var(--hero-ink); isolation: isolate;
  background:
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 52%, var(--sky3) 100%);
}
.hero .stars { position: absolute; inset: 0 0 40% 0; width: 100%; height: 60%; opacity: var(--stars); z-index: 0; pointer-events: none; transition: opacity .4s;
  -webkit-mask-image: radial-gradient(ellipse 42% 70% at 50% 50%, transparent 60%, #000 100%); mask-image: radial-gradient(ellipse 42% 70% at 50% 50%, transparent 60%, #000 100%); }
.hero .land { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 58%; min-height: 340px; max-height: 660px; z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 64px; text-align: center; }
.hero h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; max-width: 1080px; margin: 0 auto; letter-spacing: -.015em; }
.hero h1 .br { display: block; text-wrap: balance; }
.hero h1 .br-m { display: inline; }
.lede { max-width: 52ch; margin: 18px auto 0; text-wrap: balance; font-size: 1rem; line-height: 1.55; color: var(--hero-muted); }
.hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; }
.hero-cta .quiet { display: inline-block; padding: 10px 0; color: var(--hero-ink); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hero-hair); }

/* The clip, a window floating in the sky */
.clip { width: 100%; max-width: 1040px; margin: 36px auto 0; position: relative; }
.frame { position: relative; border-radius: 24px; overflow: hidden; background: #0b0b12; box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.frame video { width: 100%; height: 100%; object-fit: cover; }
.frame .ctrl {
  position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); color: #14131f; border: 0; border-radius: 999px; padding: 10px 18px 10px 14px; min-height: 44px; font-weight: 500; font-size: 15px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.6);
}
.frame .ctrl svg { width: 16px; height: 16px; }
.frame .ctrl .ic-pause { display: none; }
.frame.playing .ctrl .ic-play { display: none; }
.frame.playing .ctrl .ic-pause { display: block; }
.clip-cap { margin: 16px auto 0; font-size: 15px; color: var(--hero-ink); max-width: 720px; text-align: center; line-height: 1.5; }

/* Sections on white, with wide gutters and thin dividers */
.sec { padding-block: clamp(64px, 8vw, 112px); }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head p { color: var(--ink-2); font-size: 18px; margin-top: 18px; }
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* Audit */
.audit { padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--hair); }
.audit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 64px; align-items: start; }
.audit h2 { font-size: clamp(26px, 2.6vw, 34px); }
.audit form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.field { flex: 1 1 220px; min-height: 52px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: transparent; font-size: 16px; }
.field:focus { outline: none; border-bottom-color: var(--link); box-shadow: 0 1px 0 var(--link); }
.audit-out { margin-top: 16px; font-size: 15px; color: var(--muted); }
.audit-out.err { color: var(--err); }
.audit-out.ok { color: var(--ink-2); }

/* What I do */
.work-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.priceline { font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 20px; margin: 6px 0 16px; }
.checks { list-style: none; padding: 0; margin: 22px 0 0; }
.checks li { padding: 12px 0 12px 30px; border-top: 1px solid var(--hair); position: relative; }
.checks li:last-child { border-bottom: 1px solid var(--hair); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--sky1), var(--sky3)); }
.closing { margin-top: 20px; color: var(--ink-2); }

.sample { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--hair); }
/* Straight after the checklist, whose last row already draws the rule. */
.checks + .sample { margin-top: 0; border-top: 0; }
.sample h3 { font-size: 22px; }
.sample .cap { color: var(--muted); font-size: 15px; margin-top: 6px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 20px; }
.controls label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.controls input, .controls select { width: 100%; min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: transparent; font-size: 15px; }
.controls input:focus, .controls select:focus { outline: none; border-bottom-color: var(--link); box-shadow: 0 1px 0 var(--link); }
.controls .hours { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.controls .span2 { grid-column: 1 / -1; }

/* Phone: the modern preview */
.phone-col { display: flex; flex-direction: column; align-items: center; position: relative; }
.phone-col::before { content: ""; position: absolute; inset: 40px 0 40px 0; margin: auto; width: 100%; max-width: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wash-b), transparent 72%); filter: blur(24px); z-index: 0; }
.device { position: relative; z-index: 1; width: 308px; max-width: 100%; aspect-ratio: 308 / 664; border-radius: 48px; background: #101017; padding: 11px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.12); }
.device::after { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; border-radius: 999px; background: #101017; z-index: 3; }
.screen { position: absolute; inset: 11px; border-radius: 38px; overflow: hidden; background: #f6f5f9; color: #191a22; font-family: "Instrument Sans", sans-serif; display: flex; flex-direction: column; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 0 26px; font-size: 12.5px; font-weight: 600; height: 46px; }
.ph-status .sig { display: flex; gap: 3px; align-items: flex-end; }
.ph-status .sig i { width: 3px; background: #191a22; border-radius: 1px; display: block; }
.ph-status .bat { width: 22px; height: 11px; border: 1.5px solid #191a22; border-radius: 3px; position: relative; margin-left: 6px; }
.ph-status .bat::after { content: ""; position: absolute; inset: 1.5px; right: 3px; background: #191a22; border-radius: 1px; }
.ph-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.ph-hdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; }
.ph-hdr b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph-hdr .ph-call { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 999px; color: #fff; background: var(--tA, #1f4e8a); }
.ph-hero { margin: 0; border-radius: 0; padding: 20px 16px 18px; color: #fff; background: linear-gradient(150deg, var(--tA, #1f4e8a), var(--tB, #2aa5a0)); }
.ph-hero .kick { font-size: 11px; opacity: .85; font-weight: 600; letter-spacing: .02em; margin-bottom: 8px; }
.ph-hero h4 { margin: 0; font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.22; letter-spacing: -.005em; }
.ph-hero .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ph-hero .b1 { background: #fff; color: #191a22; font-weight: 600; font-size: 12.5px; padding: 9px 14px; border-radius: 999px; }
.ph-hero .b2 { border: 1px solid rgba(255,255,255,.65); color: #fff; font-weight: 600; font-size: 12.5px; padding: 8px 13px; border-radius: 999px; }
.ph-row { margin: 0 16px; padding: 12px 0 10px; border-top: 1px solid #e3e2ea; }
.ph-row:first-of-type { border-top: 0; padding-top: 14px; }
.ph-row h5 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: #6c6d7c; letter-spacing: .01em; }
.ph-row p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.ph-row ul { list-style: none; margin: 0; padding: 0; }
.ph-row li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; border-top: 1px solid #ecebf1; }
.ph-row li:first-child { border-top: 0; padding-top: 2px; }
.ph-row li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--tA, #1f4e8a), var(--tB, #2aa5a0)); flex: none; }
.ph-foot { flex: none; padding: 10px 18px 20px; font-size: 11.5px; color: #6c6d7c; line-height: 1.4; }
.ph-foot b { color: #191a22; font-weight: 600; }
.ph-live { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
.ph-cap { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; max-width: 340px; }

/* A finished sample site, framed in brushed metal. Trade colors remain live. */
.device { background: linear-gradient(115deg,#8b8796 0%,#302e3b 13%,#14131d 43%,#56515f 77%,#201e29 100%); box-shadow: 0 32px 60px -24px rgba(16,13,35,.55),0 8px 16px -8px rgba(16,13,35,.35),inset 0 0 0 1px rgba(255,255,255,.4); }
.device .screen { background:#f5f3ef; }
.ph-hdr { padding-bottom:14px; }
.ph-hdr .ph-call { box-shadow:0 4px 10px -5px var(--tA); }
.ph-hero { position:relative; isolation:isolate; margin:0 9px; border-radius:22px; padding:22px 16px 28px; background:radial-gradient(ellipse at 100% 0%,var(--tB),transparent 65%),linear-gradient(145deg,var(--tA),#101c30); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 22px -16px var(--tA); }
.ph-hero .kick { display:inline-block; padding:5px 9px; border:1px solid rgba(255,255,255,.3); border-radius:999px; margin-bottom:13px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.ph-hero h4 { font-size:27px; line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.ph-hero .btns { gap:6px; margin-top:18px; }
.ph-hero .b1,.ph-hero .b2 { font-size:11px; padding:8px 10px; }
.ph-hero .b1 { box-shadow:0 5px 12px -6px #071222; }
.ph-hero .b2 { background:rgba(255,255,255,.08); }
.ph-hero + .ph-row { position:relative; margin:-12px 20px 5px; padding:12px 14px; border:1px solid #fff; border-radius:14px; background:#fffdf9; box-shadow:0 8px 20px -13px #373747; }
.ph-row h5 { font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.ph-row p { font-size:12px; }
.ph-row ul { counter-reset:sample-service; }
.ph-row li { counter-increment:sample-service; font-size:12px; padding:9px 0; }
.ph-row li::before { content:counter(sample-service,decimal-leading-zero); width:23px; height:auto; border-radius:0; background:none; color:var(--tA); font-size:10px; font-weight:600; letter-spacing:.04em; }
.ph-row li::after { content:'\2197'; margin-left:auto; color:var(--tA); }
.ph-foot { background:#eeece7; border-top:1px solid #e4e1da; font-size:10px; padding:10px 16px 15px; }

.side-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair); }
.side-jobs > div { padding: 32px 32px 8px 0; }
.side-jobs > div + div { border-left: 1px solid var(--hair); padding-left: 32px; }
.side-jobs .priceline { font-size: 18px; }
.side-jobs p { color: var(--ink-2); font-size: 16px; }

/* The pitch, on a wash that runs to the page edge. The wash starts in
   wash-b and ends in wash-a, so the ridge strips at each edge match it. */
.sec-wash { --ridge-h: clamp(48px, 4.5vw, 80px); position: relative; background: linear-gradient(180deg, var(--wash-b) 0%, var(--wash-c) 55%, var(--wash-a) 100%); margin-top: var(--ridge-h); padding-bottom: calc(clamp(64px, 8vw, 112px) + var(--ridge-h)); }
.sec-wash::before, .sec-wash + .sec::before { display: none; }
.pitch h2 { max-width: 760px; }
.pitch .sub { max-width: 640px; color: var(--ink-2); font-size: 18px; margin: 18px 0 0; }
/* Ridge strips: the hero's third and nearest ranges, refitted, where a section changes ground.
   The top strip rises out of the section into the ground above it; the bottom strip is the
   ground below rising into the section. */
.ridge { position: absolute; left: 0; right: 0; width: 100%; height: var(--ridge-h, 64px); pointer-events: none; display: block; }
.ridge-top { bottom: 100%; }
.ridge-bottom { bottom: 0; }
.ridge .rim { stroke: none; }
.sec-wash .ridge-top .far { fill: color-mix(in srgb, var(--wash-b) 55%, var(--ground)); }
.sec-wash .ridge-top .near { fill: var(--wash-b); }
.sec-wash .ridge-bottom .far { fill: color-mix(in srgb, var(--ground) 55%, var(--wash-a)); }
.sec-wash .ridge-bottom .near { fill: var(--ground); }
.pitch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--hair-2); }
.pitch-grid > div { padding: 28px 28px 0 0; }
.pitch-grid > div + div { border-left: 1px solid var(--hair-2); padding-left: 28px; }
.pitch-grid > div:last-child { padding-right: 0; }
.pitch-grid h3 { font-size: 22px; margin-bottom: 10px; }
.pitch-grid p { color: var(--ink-2); font-size: 16px; }
.pitch-grid a { color: inherit; font-weight: 500; }

/* Prices, as a list with thin dividers and big light numerals */
.price-rows { border-top: 1px solid var(--hair); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.7fr); gap: 20px 40px; padding: 30px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.price-row .svc { font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 22px; }
.price-row .num { font-family: "Funnel Display", sans-serif; font-weight: 300; font-size: clamp(40px, 4vw, 54px); line-height: 1; letter-spacing: -.01em; }
.price-row .unit { font-size: 15px; color: var(--muted); margin-top: 8px; }
/* The website row shows both of its figures at the same size: the owner will not have one price large and the other in the small print. */
.lede-2 { margin-top: 6px; }
.hero h1 .ast { font-size: .5em; vertical-align: top; line-height: 1; position: relative; top: .1em; }
.lede.fine { margin-top: 14px; font-size: 13.5px; opacity: .85; }
.price-row .terms.fine { font-size: 14px; margin-top: 6px; color: var(--ink-2); }
.price-row .nums { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.price-row .nums .num { font-size: clamp(36px, 3.2vw, 46px); }
.price-row .terms { color: var(--ink-2); font-size: 16px; margin: 0; }
.quote-line { margin-top: 24px; color: var(--ink-2); }

/* Behind the scenes */
.bts-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.bts p { color: var(--ink-2); }
.chain { list-style: none; padding: 0; margin: 28px 0 0; position: relative; }
.chain::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: var(--hair-2); }
.chain li { position: relative; padding: 0 0 18px 40px; font-size: 16px; }
.chain li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, var(--sky1), var(--sky3)); box-shadow: 0 0 0 4px var(--ground); }
.chain li:last-child { padding-bottom: 0; }
.chain-cap { color: var(--muted); font-size: 15px; margin-top: 14px; }
.still { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--hair); }
.still img { width: 100%; height: auto; }
.cap { color: var(--muted); font-size: 14.5px; margin-top: 12px; line-height: 1.5; }
.legend { margin-top: 32px; }
.legend h3 { font-size: 20px; margin-bottom: 8px; }
.legend ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; }
.legend li { margin-bottom: 6px; }
details.board { margin-top: 36px; border-top: 1px solid var(--hair); padding-top: 18px; }
details.board summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
details.board summary::-webkit-details-marker { display: none; }
details.board summary::before { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin-left: 2px; }
details.board[open] summary::before { transform: rotate(45deg); }
details.board .still { margin-top: 18px; }

/* Steps and questions */
.steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.steps li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 40px; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.steps li b { font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 22px; line-height: 1.3; }
.steps li p { margin: 0; color: var(--ink-2); }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 21px; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 300; color: var(--muted); flex: none; width: 28px; text-align: center; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 44px 24px 0; color: var(--ink-2); }
.faq .a p { margin: 0; }
.aside { margin-top: 24px; color: var(--muted); font-size: 15.5px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px 80px; align-items: start; }
.reach { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 18px; }
.reach .pill { min-width: 128px; justify-content: center; }
.reach-num { margin: 22px 0 0; font-family: "Funnel Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(28px, 3vw, 34px); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.reach-num a { color: inherit; text-decoration: none; }
.reach-num a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.other-wrap p, .other-wrap .other-list { max-width: 640px; }
.cform select { color: var(--ink); background-color: var(--ground); padding-left: 0; margin-left: -4px; width: calc(100% + 4px); }
.other-list { list-style: none; margin: 14px 0 20px; padding: 0; }
.other-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.other-list strong { font-weight: 500; font-size: 17px; }
.other-list span { color: var(--ink-2); font-size: 15.5px; }
.other-list li:first-child { border-top: 1px solid var(--hair); }
.mail { font-size: 18px; }
.cform { display: grid; gap: 16px; }
.cform label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.cform input, .cform select, .cform textarea { width: 100%; min-height: 48px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: transparent; font-size: 16px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--link); box-shadow: 0 1px 0 var(--link); }
.cform textarea { min-height: 120px; resize: vertical; }
.cform .note { font-size: 14px; color: var(--muted); margin: 0; }
.cform .err-line { font-size: 14px; color: var(--err); margin: 4px 0 0; }
.cform .err-line:empty { display: none; }
.cform [aria-invalid="true"] { border-bottom-color: var(--err); }
.cform .hp { position: absolute; left: -9999px; }
.sent { margin-top: 16px; padding: 18px 0 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); }

/* Footer, one column of quiet rows */
.foot { --ridge-h: clamp(48px, 4.5vw, 80px); position: relative; margin-top: var(--ridge-h); padding-block: 40px 40px; background: var(--ground-2); }
.foot .ridge-top .far { fill: color-mix(in srgb, var(--ground-2) 60%, var(--ground)); }
.foot .ridge-top .near { fill: var(--ground-2); }
.foot .ridge-top .rim { stroke: var(--hair-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; }
.foot .legal { font-family: "Funnel Display", sans-serif; font-weight: 500; font-size: 22px; }
.foot dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; font-size: 15px; }
.foot dt { color: var(--muted); }
.foot dd { margin: 0; color: var(--ink-2); }
.foot a { color: inherit; }
.theme-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.theme-picks button { border: 1px solid var(--hair-2); background: transparent; border-radius: 999px; padding: 7px 14px; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.theme-picks button[aria-pressed="true"] { background: var(--pill); color: var(--pill-ink); border-color: var(--pill); }

/* Widths */
@media (max-width: 1100px) {
  .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
}
@media (max-width: 900px) {
  .hdr .wrap { gap: 0 14px; padding-block: 6px 2px; }
  .nav { order: 3; flex: 1 1 100%; gap: 0 22px; font-size: 14px; }
  .nav a { padding: 0 2px; min-width: 46px; justify-content: center; }
  .hero-in { padding-top: 28px; }
  .hero .land { height: 52%; }
  .work-grid, .bts-grid, .contact-grid, .audit-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .phone-col { order: 2; margin-top: 8px; }
  .side-jobs { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .side-jobs > div { padding: 26px 0 8px 0 !important; border-top: 1px solid var(--hair); border-left: 0 !important; }
  .pitch-grid { grid-template-columns: minmax(0, 1fr); }
  .pitch-grid > div { padding: 24px 0 8px 0 !important; border-left: 0 !important; }
  .pitch-grid > div + div { border-top: 1px solid var(--hair-2); }
  .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .price-row .terms { grid-column: 1 / -1; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hdr .wrap { gap: 0 12px; }
  .nav { font-size: 13.5px; gap: 0; justify-content: space-between; }
  .nav a { flex: 1 1 auto; justify-content: center; }
  .hdr .phone { font-size: 14px; }
  .theme-btn { padding: 4px 11px; font-size: 13px; }
  .hero-in { padding-top: 22px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 40px); line-height: 1.08; }
  .hero h1 .br-m { display: block; }
  .lede { font-size: 16px; margin-top: 14px; }
  .hero-cta { margin-top: 18px; }
  .hero-cta .pill { width: 100%; }
  .clip { margin-top: 28px; }
  .frame { border-radius: 18px; }
  .frame .ctrl { left: 12px; bottom: 12px; padding: 8px 14px 8px 11px; font-size: 14px; }
  .hero .land { height: 44%; min-height: 300px; }
  .audit form .pill { width: 100%; }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .price-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  .price-row .num { font-size: 40px; }
  .faq summary { font-size: 18.5px; }
  .faq .a { padding-right: 0; }
  .foot dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .foot dt { margin-top: 12px; }
}

/* Contact page and not-found page: a shorter sky with the same ranges under the heading */
.hero-s { --land-s: clamp(230px, 24vw, 330px); }
.hero-s .hero-in { padding-top: 40px; padding-bottom: calc(var(--land-s) + 28px); }
.hero-s h1 { font-size: clamp(36px, 4.2vw, 56px); }
.hero-s .land { height: var(--land-s); min-height: 0; max-height: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px); mask-image: linear-gradient(180deg, transparent 0, #000 110px); }
.hero-s .hero-cta { margin-top: 26px; }
.contact-page { padding-block: clamp(48px, 6vw, 88px); }
.contact-page .lede-2 { font-size: 18px; color: var(--ink-2); margin: 0; }
.contact-page .reach-label { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.contact-page .reach { margin-top: 10px; }
.why { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--hair); }
.why h2 { font-size: 24px; font-weight: 400; line-height: 1.25; }
.why .cap { margin: 6px 0 12px; font-size: 15px; }
.why ul { margin: 0; padding-left: 20px; color: var(--ink); font-size: 15.5px; }
.why li { margin-bottom: 6px; }
.cform h2 { font-size: 24px; font-weight: 400; line-height: 1.25; margin-bottom: 4px; }
.cform .msg { font-size: 15px; color: var(--ink-2); margin: 0; min-height: 1.5em; }
.cform .msg.error { color: var(--err); }
.sent h3 { font-size: 22px; margin-bottom: 6px; }
.sent p { margin: 0; }
/* With JavaScript off the form posts to FormSubmit directly and comes back to
   #form-sent, so the sent panel shows when it is the target. */
.sent:target { display: block; }
body:has(#form-sent:target) #form-live { display: none; }
@media (max-width: 600px) {
  .hero-s { --land-s: 190px; }
  .hero-s .hero-in { padding-top: 22px; }
  .reach .pill { flex: 1 1 0; }
}

/* Links inside running text get a 44px tap height without moving the text around them */
.foot dd a, .mail a, .aside a, .audit-out a, .bts p a, .pitch-grid p a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* Without JavaScript the controls that need it stay out of the way; the page still reads. */
html.no-js .theme-btn, html.no-js .theme-picks, html.no-js .frame .ctrl, html.no-js .cform .note,
html.no-js .audit form, html.no-js .sample .controls, html.no-js .sample .cap, html.no-js .ph-live { display: none; }

/* Motion: nothing moves for a visitor who asked it not to */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pill:hover { transform: none; }
}

@media print {
  .skip, .theme-btn, .theme-picks, .frame .ctrl, .stars, .ridge { display: none; }
  .hero { background: none; color: #000; }
  .hero .land { display: none; }
  .faq details::details-content { content-visibility: visible; }
}

/* =====================================================================
   The visual pieces, folded in from docs/design/visual. Four of them:
   a living sky, ranges that recede on scroll, sections that arrive, and
   hover, focus and pressed states for pills, quiet links and price rows.
   Colors come from the tokens at the top. One reduced-motion rule at the
   end turns all of it off.
   ===================================================================== */

/* A little life in the sky: the low light breathes, a band of haze drifts,
   and the stars (only shown after dark, by the --stars token) twinkle. The
   hero already paints the sky gradient, so this only adds the layers. */
.living-sky{position:relative;isolation:isolate;overflow:hidden}
.sky-glow{position:absolute;inset:22% -10% 0;background:radial-gradient(ellipse at 70% 65%,var(--glow),transparent 58%);animation:breathe 24s ease-in-out infinite alternate;pointer-events:none}
.living-stars{position:absolute;inset:0;width:100%;height:65%;opacity:var(--stars);fill:var(--sun);pointer-events:none}
.star{animation:twinkle 8s ease-in-out infinite alternate}
.s1{animation-delay:-3s}
.s2{animation-delay:-6s}
.sky-haze{position:absolute;left:-15%;right:-15%;bottom:27%;height:110px;pointer-events:none;background:radial-gradient(ellipse at 30% 50%,var(--cloud),transparent 60%),radial-gradient(ellipse at 75% 60%,var(--cloud),transparent 55%);animation:haze-drift 32s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.45;transform:scale(.96)}to{opacity:.8;transform:scale(1.04)}}
@keyframes haze-drift{from{transform:translateX(-3%);opacity:.45}to{transform:translateX(3%);opacity:.8}}
@keyframes twinkle{from{opacity:.3}to{opacity:.95}}

/* Distance you can feel: each g.range in the land moves at its own rate on
   scroll. The script writes the transforms; this only prepares the groups. */
.parallax-hero{position:relative;overflow:hidden;isolation:isolate}
.range{transform-box:view-box;transform-origin:center}
.parallax-hero .land{overflow:visible}

/* An easy arrival: a hairline draws across the top of a section and its
   heading settles as the section comes into view. The hairline replaces the
   section's border, so it is there at rest, with scripts off, and under
   reduced motion; the heading starts at 72% and is never hidden. The
   section's own padding stays as it is. */
.visual-section{position:relative}
.visual-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2);transform-origin:left;transform:scaleX(1)}
.visual-section.entered::before{animation:draw-rule 900ms cubic-bezier(.2,.7,.2,1) both}
.visual-section.entered .visual-heading{animation:settle-heading 700ms cubic-bezier(.2,.7,.2,1) both}
@keyframes draw-rule{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes settle-heading{from{transform:translateY(12px);opacity:.72}to{transform:translateY(0);opacity:1}}
.sec.visual-section{border-top:0}
/* The audit block's bottom border would sit right on the first section's hairline */
.audit:has(+ .sec.visual-section){border-bottom:0}

/* Small gestures, clear feedback: pills lift and press, quiet links drop
   their underline a touch, and a price row lifts on a soft wash. The price
   row keeps its grid (that is the .price-row rule above); this adds the
   states only. */
.depth-pill{position:relative;gap:20px;box-shadow:inset 0 1px 0 #ffffff26,0 3px 4px #0000000c,0 12px 26px -18px #0009;transition:transform .18s,box-shadow .18s}
.depth-pill:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff40,0 6px 8px #00000012,0 18px 30px -15px #0007}
.depth-pill:active{transform:translateY(1px);box-shadow:inset 0 3px 6px #0004,0 2px 4px #0001}
.depth-link{position:relative;display:inline-block;padding:12px 0;text-decoration:none;color:var(--link);transition:transform .18s}
.depth-link::after{content:"";position:absolute;bottom:8px;left:0;right:0;height:1px;background:currentColor;transform-origin:left;transition:transform .2s,box-shadow .2s}
.depth-link:hover::after,.depth-link:focus-visible::after{transform:translateY(2px);box-shadow:0 3px 0 color-mix(in srgb,currentColor 20%,transparent)}
.depth-link:active{transform:translateY(1px)}
/* The hero's quiet link keeps its ink color on the sky; the drawn line stands in for the underline */
.hero-cta .depth-link{text-decoration:none}
.depth-price{position:relative;isolation:isolate;color:var(--ink);text-decoration:none;transition:transform .2s}
.depth-price::before{content:"";position:absolute;inset:0 -14px;z-index:-1;background:linear-gradient(120deg,var(--ground-2),var(--wash-b));opacity:0;transition:opacity .2s}
.depth-price:hover,.depth-price:focus-visible{transform:translateY(-2px)}
.depth-price:hover::before,.depth-price:focus-visible::before{opacity:.7}
.depth-price:active{transform:translateY(1px)}
.depth-pill:focus-visible,.depth-link:focus-visible,.depth-price:focus-visible{outline:3px solid var(--link);outline-offset:6px}
@media(max-width:600px){.depth-pill{white-space:normal;text-align:center}}

/* Motion off, for all four pieces at once (the pieces share this rule) */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.range,.phone-device{transform:none!important}}
/* and the hover and pressed lifts stay put too */
@media(prefers-reduced-motion:reduce){.depth-pill:hover,.depth-pill:active,.depth-link:active,.depth-price:hover,.depth-price:focus-visible,.depth-price:active{transform:none}}
@media print{.sky-glow,.living-stars,.sky-haze{display:none}}
/* Last so it wins over the transparent field backgrounds above: the dropdown list takes its colours from these. */
.controls select, .cform select { background-color: var(--ground); color: var(--ink); }

/* Sample phone: four styles picked with one radio group. Each style is its own site markup inside the phone. */
.sample .cap { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.st { position: relative; display: flex; }
.st input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.st span { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.st b { font-weight: 600; font-size: 15px; }
.st small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.st input:checked + span { border-color: var(--ink); background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--ink); }
.st input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.feat-h { margin: 26px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feat li { font-size: 13.5px; padding: 6px 11px; border: 1px solid var(--hair-2); border-radius: 999px; color: var(--ink-2); }
.feat-more { margin-top: 8px; }
.feat-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 6px 12px; min-height: 32px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--ground); }
.feat-more summary::-webkit-details-marker { display: none; }
.feat-more summary::after { content: "+"; font-size: 16px; line-height: 1; }
.feat-more[open] summary::after { content: "−"; }
.feat-more summary:hover { background: var(--ground-2); }
.feat-more summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.feat-more[open] summary { margin-bottom: 8px; }
.feat-more .s-less, .feat-more[open] .s-more { display: none; }
.feat-more[open] .s-less { display: inline; }
.feat-more .cap { margin-top: 10px; }
.feat-close { font-size: inherit; margin-left: 4px; }
html.no-js .feat-close { display: none; }
.feat-more .feat-h { margin-top: 16px; }
.feat-more .feat-h:first-of-type { margin-top: 4px; }

/* The phone: the status bar takes the site's ink; one .site shows at a time. */
.ph-status .sig i { background: currentColor; }
.ph-status .bat { border-color: currentColor; }
.ph-status .bat::after { background: currentColor; }
.device .site { display: none; flex: 1; min-height: 0; flex-direction: column; }
.device.t-bold .site-bold, .device.t-clean .site-clean, .device.t-warm .site-warm, .device.t-night .site-night { display: flex; }
.device.t-clean .screen { background: #ffffff; color: #16202a; }
.device.t-warm .screen { background: #f6ecd9; color: #3b2a1e; }
.device.t-night .screen { background: #0f1411; color: #eef3ea; }
.ph-hero .ph-ico { position: absolute; right: 14px; top: 14px; width: 60px; height: 60px; color: #fff; opacity: .18; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@keyframes ph-swap { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.device.swap .site { animation: ph-swap .38s ease; }
@media (prefers-reduced-motion: reduce) { .device.swap .site { animation: none; } }

/* Clean: Cherry Creek Dental */
.site-clean { padding: 6px 18px 16px; font-family: "Instrument Sans", sans-serif; }
.c-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 20px; }
.c-mark { width: 34px; height: 34px; border-radius: 50%; background: #e6f2ee; color: #1f6b57; font-size: 12px; font-weight: 600; line-height: 34px; text-align: center; letter-spacing: .04em; }
.c-menu { display: flex; flex-direction: column; gap: 5px; }
.c-menu i { display: block; width: 20px; height: 1.5px; background: #16202a; }
.c-eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #1f6b57; }
.c-hero h4 { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; }
.c-sub { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.5; color: #5a6670; }
.c-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; background: #1f6b57; color: #fff; font-size: 12.5px; font-weight: 600; }
.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.c-grid div { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 10px; border: 1px solid #e3e8ea; border-radius: 10px; }
.c-grid b { font-size: 13px; font-weight: 600; }
.c-grid span { font-size: 11px; color: #5a6670; }
.c-foot { margin-top: auto; padding-top: 14px; font-size: 11px; color: #5a6670; text-align: center; }

/* Warm: Blue Spruce Cafe */
.site-warm { font-family: "Instrument Sans", sans-serif; }
.w-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 12px; }
.w-mark { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 19px; line-height: 1; color: #3b2a1e; }
.w-pill { font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: #2f5d3a; color: #fff; }
.w-band { margin: 0 12px; padding: 24px 18px 22px; border-radius: 14px; color: #fbe9d8; background: #c8542e; background-image: radial-gradient(circle at 85% 20%, #e07a4b 0, transparent 45%); }
.w-band h4 { margin: 0 0 16px; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.1; }
.w-btn { display: inline-block; padding: 9px 14px; border-radius: 999px; background: #3b2a1e; color: #fbe9d8; font-size: 12px; font-weight: 600; }
.w-menu { list-style: none; margin: 18px 18px 0; padding: 0; }
.w-menu li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 12.5px; }
.w-menu b { font-weight: 600; }
.w-menu i { flex: 1; border-bottom: 1px dotted #b59b83; transform: translateY(-3px); }
.w-menu span { font-size: 11px; color: #7a6350; }
.w-foot { margin-top: auto; padding: 14px 18px 18px; border-top: 1px solid #e6d7c0; font-size: 11px; color: #7a6350; text-align: center; }

/* Night: Summit Landscaping */
.site-night { padding: 4px 18px 16px; font-family: "Funnel Display", sans-serif; }
.n-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 22px; font-size: 12px; letter-spacing: .16em; }
.n-top b { font-weight: 500; color: #b6f26b; }
.n-top span { font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: .04em; color: #9aa596; }
.n-hero h4 { margin: 0; font-weight: 400; font-size: 31px; line-height: .98; letter-spacing: -.03em; }
.n-hero p { margin: 12px 0 16px; font-family: "Instrument Sans", sans-serif; font-size: 12.5px; line-height: 1.5; color: #9aa596; }
.n-btn { display: inline-block; padding: 10px 16px; border: 1px solid #b6f26b; border-radius: 4px; color: #b6f26b; font-family: "Instrument Sans", sans-serif; font-size: 12px; font-weight: 600; }
.n-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 22px; }
.n-tiles div { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 9px; border-radius: 6px; background: #161d18; }
.n-tiles em { font-style: normal; font-family: "Instrument Sans", sans-serif; font-size: 10px; letter-spacing: .1em; color: #b6f26b; }
.n-tiles b { font-weight: 400; font-size: 15px; }
.n-foot { margin-top: auto; padding-top: 14px; font-family: "Instrument Sans", sans-serif; font-size: 11px; color: #9aa596; }
/* Supporting information beneath the sample heroes. */
.c-hours { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; padding: 12px; border-radius: 10px; background: #f1f7f4; }
.c-hours div { display: flex; flex-direction: column; gap: 2px; }
.c-hours b { font-size: 11px; font-weight: 600; color: #1f6b57; }
.c-hours span { font-size: 11px; color: #5a6670; }
.n-work { margin-top: 18px; }
.n-work > span { display: block; font-family: "Instrument Sans", sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9aa596; margin-bottom: 8px; }
.device.t-night::after { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
svg[hidden] { display: none; }

/* Locally hosted imagery for the fictional phone previews. */
.site-bold .ph-hero {
  background: linear-gradient(90deg, rgba(7,25,43,.94), rgba(7,25,43,.55)), url('media/previews/plumbing.webp') center / cover;
  min-height: 225px;
}
.site-bold .ph-ico { display: none; }
.c-photo, .w-photo, .n-photo { display: block; width: 100%; object-fit: cover; flex: none; }
.c-photo { height: 92px; border-radius: 10px; margin-top: 14px; object-position: center 55%; }
.site-clean .c-top { padding-bottom: 12px; }
.site-clean .c-grid { margin-top: 12px; gap: 6px; }
.site-clean .c-grid div { padding: 8px 10px; }
.site-clean .c-sub { margin: 8px 0 12px; }
.site-clean .c-hours { padding: 9px; }
.w-photo { width: calc(100% - 36px); height: 128px; margin: 14px 18px; border-radius: 12px; }
.n-photo { height: 108px; border-radius: 8px; object-position: center 60%; }

/* Review v52: clear form boundaries, captions and aligned section edges. */
.hero h1 .hero-price { font-size: .76em; margin-top: 12px; color: var(--ink-2); }
.clip-cap { width: fit-content; max-width: 100%; padding: 10px 18px; border-radius: 12px; background: var(--ground); color: var(--ink-2); }
.checks li::before { background: var(--link); }
.cform label { color: var(--ink-2); font-weight: 500; }
.cform input, .cform select, .cform textarea { margin-left: 0; width: 100%; padding: 12px 14px; border: 1px solid var(--muted); border-radius: 10px; background: var(--ground); color: var(--ink); }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--link); outline-offset: 3px; border-color: var(--link); box-shadow: none; }
.cform [aria-invalid="true"] { border-color: var(--err); }
.other-wrap p, .other-wrap .other-list { max-width: none; }
.price-row .num, .price-row .nums .num { font-size: clamp(36px, 3.2vw, 46px); }
.price-description { min-width: 0; }
.price-description .terms.fine { margin-top: 12px; }
.contact-page .why { margin-top: 48px; padding-top: 36px; }
@media (max-width: 940px) { .price-description { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cform .send { width: 100%; justify-content: center; } }