/* WAYPOINT · site.css
   A dispatch-board look for a mobile mechanic: white and navy, one signal colour, mono numbers, square corners, no circles.
   Three looks live on html[data-look]: Hi-Vis (default, white and navy with a safety-orange signal), Night Run (black with a yellow signal),
   Daylight (warm paper with an orange signal). Every pairing was checked for AA contrast.
   Sections wear a tone: .t-light, .t-alt, .t-dark, .t-sig. The signal colour is only ever text on a dark tone.
   Phone: a dark brand bar, a scrolling strip of pages, and a Call and Text dock at the bottom that steps aside while you type. */
:root {
  --font-head: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 0px;
  --wrap: 1200px;
  --rail: 0px;
  --bg: #ffffff; --bg2: #eef2f5; --panel: #ffffff; --line: #c8d0d8;
  --ink: #0f1e2c; --ink2: #3d4b59; --accent: #ff5a1f; --accent-ink: #0f1e2c; --link: #0f1e2c;
  --dark: #0f1e2c; --dark2: #172a3b; --dark-panel: #1d3349; --dark-ink: #f2f5f7; --dark-ink2: #c3ccd5; --dark-line: #34495c;
  --hero-a: #0f1e2c; --hero-b: #172a3b; --road: #0f1e2c; --road-ink: #ff5a1f;
  --foot: #0f1e2c; --foot-ink: #d5dce3;
  --yes: #0a7a3c; --few: #8a5a00; --full: #b3261e; --muted: #3d4b59;
}
html[data-look="nightrun"] {
  --bg: #111113; --bg2: #18181b; --panel: #1d1d21; --line: #34343a;
  --ink: #f4f4ef; --ink2: #c9c9c0; --accent: #ffd400; --accent-ink: #0c0c0d; --link: #ffd400;
  --dark: #08080a; --dark2: #121215; --dark-panel: #1f1f24; --dark-ink: #f4f4ef; --dark-ink2: #c9c9c0; --dark-line: #3a3a40; --road: #08080a; --road-ink: #ffd400;
  --yes: #5fd38a; --few: #f5b042; --full: #ff8a80; --muted: #c9c9c0;
}
html[data-look="daylight"] {
  --bg: #f7f3ea; --bg2: #ece6d6; --panel: #fffdf8; --line: #cfc6ae;
  --ink: #17140f; --ink2: #4a4538; --accent: #ff6a00; --accent-ink: #0c0c0d; --link: #17140f;
  --dark: #17140f; --dark2: #241f17; --dark-panel: #2b251c; --dark-ink: #f7f3ea; --dark-ink2: #d6cfbd; --dark-line: #4a4538;
  --road: #17140f; --road-ink: #ff8a2e; --muted: #4a4538;
}
html[data-font="bricolage"] { --font-head: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; }
html[data-font="instrument"] { --font-head: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-font="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-corners="round"] { --radius: 14px; }
html[data-corners="sharp"] { --radius: 0px; }

/* tones */
.t-light { background: var(--bg); color: var(--ink); }
.t-alt { background: var(--bg2); color: var(--ink); }
.t-dark, html[data-look="nightrun"] .top, .foot {
  --bg: var(--dark); --bg2: var(--dark2); --panel: var(--dark-panel); --line: var(--dark-line);
  --ink: var(--dark-ink); --ink2: var(--dark-ink2); --link: var(--accent);
  --yes: #5fd38a; --few: #f5b042; --full: #ff8a80;
  background: var(--dark); color: var(--dark-ink);
}
.t-sig { --ink: var(--accent-ink); --ink2: var(--accent-ink); --link: var(--accent-ink); --line: var(--accent-ink); background: var(--accent); color: var(--accent-ink); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
@media (min-width: 1240px) { html { scroll-padding-top: 76px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.04; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.025em; }
h1 { font-size: clamp(2.5rem, 7.4vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; z-index: 60; font-weight: 700; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); }
.t-dark :focus-visible, .top :focus-visible, .foot :focus-visible { outline-color: var(--accent); box-shadow: none; }
.t-sig :focus-visible { outline-color: var(--accent-ink); box-shadow: none; }
.tiny { font-size: .85rem; color: var(--ink2); }
.lead { font-size: 1.12rem; color: var(--ink2); max-width: 38em; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.mono, .kicker, .tag { font-family: var(--font-mono); letter-spacing: .02em; }

/* buttons: square, heavy, one signal colour */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--btn-line, var(--ink)); border-radius: var(--radius); padding: 11px 22px; min-height: 44px; font: 800 1rem/1.1 var(--font-body); text-decoration: none; cursor: pointer; }
.t-dark .btn, .top .btn { --btn-line: var(--accent); }
.t-sig .btn { --btn-line: var(--accent-ink); background: var(--accent-ink); color: var(--accent); }
.btn:hover { filter: brightness(1.08); }
.btn.big { padding: 15px 28px; font-size: 1.1rem; min-height: 52px; }
.btn.small { padding: 8px 16px; font-size: .92rem; min-height: 44px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.t-dark .btn.ghost { color: var(--dark-ink); border-color: var(--dark-ink); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.chip { display: inline-block; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; margin: 0 8px 8px 0; text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

/* ribbon (demo only) */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 1px solid #e2b23a; font-size: .85rem; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.yours label { display: flex; flex-direction: column; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.yours input, .yours select { font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1px solid #b89658; border-radius: 0; background: #fff; color: #222; min-width: 0; width: 150px; }
.yours-lead { font-weight: 700; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
@media (max-width: 899px) { .yours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }

/* ===== brand mark, kicker ===== */
.mark rect { fill: var(--accent); }
.mark path { fill: var(--accent-ink); }
.kicker { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); margin: 0 0 12px; }
.t-dark .kicker { color: var(--accent); }
.t-light .kicker, .t-alt .kicker { color: var(--ink); border-left: 6px solid var(--accent); padding-left: 10px; }
.t-sig .kicker { color: var(--accent-ink); }

/* ===== header: brand | pages | call, as a dispatch bar ===== */
.top { position: relative; z-index: 40; background: var(--bg); color: var(--ink); border-bottom: 4px solid var(--accent); }
.top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; align-items: center; column-gap: 12px; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 0; color: var(--ink); text-decoration: none; font: 800 1.15rem/1.05 var(--font-head); letter-spacing: -.02em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tools .btn { display: none; }
.nav { grid-area: nav; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-inline: -16px; padding-inline: 8px; border-top: 1px solid var(--line); }
.nav::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .nav { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); padding-right: 56px; } }
.nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink2); text-decoration: none; font: 700 .8rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (min-width: 900px) {
  .tools .btn { display: inline-flex; min-height: 44px; padding: 8px 16px; font-size: .95rem; }
  .tools .btn.call span { white-space: nowrap; }
  .nav { margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1240px) {
  .top { position: sticky; top: 0; }
  .top[data-chrome-static] { position: relative; } /* the owner turned off "stays at the top" (Builder M11) */
  .top-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav tools"; column-gap: 28px; }
  .nav { border-top: 0; justify-content: center; align-self: stretch; }
  .nav a { min-height: 64px; padding: 0 16px; margin-bottom: 0; }
  .tools { gap: 10px; }
}
.top .langpick-inline { border-color: var(--line); background: transparent; }
.top .langpick-inline .globe { color: var(--ink2); }
.top .langpick-inline a { color: var(--ink2); }
.top .langpick-inline a:hover { color: var(--ink); background: var(--bg2); }
.top .langpick-inline a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }

/* ===== sections ===== */
.band { padding: 52px 0; }
@media (min-width: 900px) { .band { padding: 84px 0; } }
.band > .wrap > h2, .band h2 { margin-bottom: .3em; }
.band .lead { margin-bottom: 0; }

/* ===== hero: ZIP first, mechanic at the car ===== */
.hero { position: relative; padding: 30px 0 44px; }
.hero-in { display: grid; gap: 26px; }
.hero-copy { min-width: 0; }
.hero h1 { margin: 0 0 .3em; font-size: clamp(2.5rem, 10.5vw, 4.7rem); line-height: .96; letter-spacing: -.04em; text-align: left; }
.hero .sub { font-size: 1.12rem; color: var(--ink2); max-width: 31em; margin: 0; }
.hero-fig { margin: 0; position: relative; }
.hero-fig picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg2); border-bottom: 6px solid var(--dark); }
.hero-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-fig figcaption { position: relative; margin: -22px 0 0 14px; max-width: calc(100% - 28px); background: var(--accent); color: var(--accent-ink); padding: 14px 16px 12px; }
.hero-quote { margin: 0 0 8px; font: 800 1.05rem/1.25 var(--font-head); letter-spacing: -.01em; }
.hero-by { margin: 0; font: 700 .74rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.hero-contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.hero-contact .btn:first-child { flex: 1 1 100%; }
.hero-contact .btn.call { flex: 1 1 auto; padding-inline: 12px; font-size: 1rem; gap: 8px; white-space: nowrap; }
.hero-contact .btn.textlink { flex: 0 0 auto; padding-inline: 16px; font-size: 1rem; gap: 8px; }
.hero.small { padding: 26px 0 32px; }
.hero.small h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); max-width: 14em; }
.hero.small .hero-in { gap: 22px; }
@media (min-width: 900px) {
  .hero { padding: 54px 0 72px; }
  .hero-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
  .hero-fig { order: -1; }
  .hero h1 { font-size: clamp(3.2rem, 5.4vw, 4.9rem); }
  .hero-fig picture { aspect-ratio: 4 / 5; }
  .hero-fig figcaption { margin: -34px -28px 0 auto; max-width: 86%; padding: 18px 20px 14px; }
  .hero-quote { font-size: 1.2rem; }
  .hero-contact .btn:first-child { flex: 0 1 auto; }
  .hero-contact .btn.call, .hero-contact .btn.textlink { flex: 0 1 auto; padding-inline: 28px; }
  .hero.small { padding: 44px 0 52px; }
  .hero.small .hero-in:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* ZIP card */
.zipcard { margin: 22px 0 16px; padding: 18px 18px 16px; }
.zipcard label { display: block; font: 800 1.45rem/1.1 var(--font-head); letter-spacing: -.02em; margin: 0 0 4px; }
.zc-hint { margin: 0 0 12px; font-size: .88rem; }
.zc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.zc-row input { flex: 1 1 170px; min-width: 0; margin: 0; background: #fff; color: #0f1e2c; border: 2px solid #0f1e2c; font: 700 1.15rem var(--font-mono); min-height: 52px; letter-spacing: .04em; }
.zc-row input::placeholder { color: #55554c; font-weight: 400; }
.zc-row .btn { min-height: 52px; flex: 1 1 auto; }
.zc-out { margin: 0; }
.zc-out.yes, .zc-out.no { margin-top: 12px; padding: 12px 14px; font-weight: 700; }
.zc-out.yes { background: var(--accent-ink); color: var(--accent); }
.zc-out.no { border: 2px dashed var(--accent-ink); color: var(--accent-ink); }
.zc-out .btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); margin: 8px 10px 0 0; }
.zc-out.no .btn { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.zc-t { display: none; }

/* ===== promise strip ===== */
.promise { padding: 6px 0; }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.promise-list li { display: grid; grid-template-columns: 36px 1fr; gap: 0 10px; padding: 18px 0; border-top: 3px solid var(--accent); }
.promise-list li:first-child { border-top: 0; }
.promise-list .n { font: 800 .95rem var(--font-mono); padding-top: 3px; color: var(--ink2); }
.promise-list h3 { margin: 0 0 .15em; font-size: 1.12rem; }
.promise-list p { margin: 0; font-size: .95rem; }
@media (min-width: 700px) and (max-width: 999px) {
  .promise-list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .promise-list li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1000px) {
  .promise-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
  .promise-list li { border-top: 0; padding: 26px 0; grid-template-columns: 1fr; gap: 6px; }
}

/* ===== booking timeline ===== */
.how-head { max-width: 40em; }
.track { list-style: none; margin: 30px 0 0; padding: 0; display: grid; }
.track li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; padding-bottom: 26px; }
.track li:last-child { padding-bottom: 0; }
.track li::before { content: ""; position: absolute; left: 22px; top: 48px; bottom: 0; width: 4px; background: var(--ink); }
.track li:last-child::before { display: none; }
.track .n { width: 48px; height: 48px; display: grid; place-items: center; background: var(--dark); color: var(--accent); font: 800 1.15rem var(--font-mono); position: relative; z-index: 1; }
html[data-look="nightrun"] .track .n { border: 2px solid var(--accent); }
.track h3 { margin: 10px 0 .2em; }
.track p { margin: 0; color: var(--ink2); }
@media (min-width: 900px) {
  .track { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; margin-top: 44px; }
  .track li { display: block; padding-bottom: 0; }
  .track li::before { left: 48px; right: -28px; top: 22px; bottom: auto; width: auto; height: 4px; }
  .track h3 { margin: 20px 0 .2em; font-size: 1.3rem; }
}

/* ===== price ledger ===== */
.menu-head { max-width: 42em; }
.menu-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--ink); }
.row-svc { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "photo main" "side side"; gap: 12px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row-svc .num { display: none; font: 700 .85rem var(--font-mono); color: var(--ink2); padding-top: 4px; }
.svc-photo { grid-area: photo; display: block; width: 88px; height: 88px; overflow: hidden; background: var(--dark); }
.svc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-photo.tile { display: grid; place-items: center; background: var(--dark); color: var(--accent); font: 800 1rem var(--font-mono); letter-spacing: .08em; }
html[data-look="nightrun"] .svc-photo.tile { border: 2px solid var(--accent); }
.svc-main { grid-area: main; min-width: 0; }
.svc-main h3 { margin: 0 0 .2em; font-size: 1.3rem; }
.svc-main p { margin: 0 0 .5em; color: var(--ink2); }
.bring { margin: .5em 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--ink2); }
.bring li { padding-left: 18px; position: relative; }
.bring li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 3px; background: var(--ink); }
.svc-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.svc-side .price { margin: 0; font: 800 1.9rem/1 var(--font-head); letter-spacing: -.03em; }
.svc-side .price small { font: 700 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; margin-right: 6px; color: var(--ink2); }
.svc-side .time { margin: 0; font: 400 .85rem var(--font-mono); color: var(--ink2); flex: 1 1 auto; }
.price-note { margin: 18px 0 18px; line-height: 1.55; font: 400 .85rem/1.55 var(--font-mono); color: var(--ink2); max-width: 52em; }
@media (min-width: 800px) {
  .row-svc { grid-template-columns: 44px 150px minmax(0, 1fr) 210px; grid-template-areas: "num photo main side"; gap: 0 24px; padding: 22px 0; align-items: center; }
  .row-svc .num { display: block; grid-area: num; }
  .svc-photo, .svc-photo.tile { width: 150px; height: 100px; }
  .svc-side { display: grid; justify-items: end; text-align: right; gap: 4px; }
  .svc-side .time { flex: none; }
}

/* ===== dispatch board ===== */
.route-grid { display: grid; gap: 26px; }
.route-head h2 { margin-bottom: .3em; }
.board { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--accent); }
.day { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 10px 14px 14px; border-bottom: 1px solid var(--line); }
.day .d { font: 800 .95rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.day .where { min-width: 0; }
.day .st { display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.day .st::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.day.open .st { color: var(--yes); }
.day.few .st { color: var(--few); }
.day.full .st { color: var(--full); }
.day.today { background: var(--bg2); box-shadow: inset 6px 0 0 var(--accent); }
@media (min-width: 900px) {
  .route-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .day { grid-template-columns: 70px minmax(0, 1fr) auto; padding: 16px 14px 16px 18px; }
}

/* ===== where we drive ===== */
.zone-grid { display: grid; gap: 24px; }
.zone-head p { margin-bottom: 1em; }
.towns { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.towns li { display: grid; gap: 2px 16px; padding: 13px 10px; border-bottom: 1px solid var(--line); }
.towns b { font: 800 1.1rem var(--font-head); }
.towns .zips { font: 400 .85rem var(--font-mono); color: var(--ink2); }
.towns em { font-style: normal; font-size: .9rem; color: var(--ink2); }
.towns li.hit { background: var(--accent); box-shadow: inset 8px 0 0 var(--ink); padding-left: 22px; }
.towns li.hit :is(b, .zips, em) { color: var(--accent-ink); }
.zone-note { max-width: 44em; margin: 0 0 20px; }
@media (min-width: 560px) { .towns li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); align-items: baseline; } }
@media (min-width: 900px) { .zone-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } }

/* ===== what we do not fix ===== */
.scope-grid { display: grid; gap: 24px; }
.scope-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.scope-list li { position: relative; padding: 16px 0 16px 46px; border-bottom: 1px solid var(--line); }
.scope-list li::before { content: "\00D7"; position: absolute; left: 0; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--full); color: var(--full); font: 800 1.2rem/1 var(--font-mono); }
.scope-list h3 { margin: 0 0 .15em; font-size: 1.1rem; }
.scope-list p { margin: 0; color: var(--ink2); }
.scope-close { margin: 18px 0 0; font-weight: 700; }
@media (min-width: 900px) { .scope-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; } }

/* ===== questions ===== */
.faq-grid { display: grid; gap: 22px; }
.faq-list { border-bottom: 2px solid var(--ink); }
.qa { border-top: 2px solid var(--ink); }
.qa summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 44px; padding: 15px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font-size: 1.12rem; }
.qa summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 800 1.3rem/1 var(--font-mono); }
.qa[open] summary::after { content: "\2212"; }
.qa p { margin: 0; padding: 0 48px 18px 0; color: var(--ink2); }
.faq-aside p { margin: 0 0 .6em; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 72px; align-items: start; } }

/* ===== work order (booking form) ===== */
.visit-band { padding: 52px 0; scroll-margin-top: 12px; }
.visit-grid { display: grid; gap: 30px; }
.visit-side .lead { color: var(--ink2); }
.visit-routes { display: grid; gap: 10px; margin-top: 22px; justify-items: start; }
.visit-routes .row { gap: 10px; }
.visit-routes .mail { color: var(--link); font-weight: 600; }
.calendar-note { margin-top: 16px; color: var(--ink2); }
.sheet { --sheet: #ffffff; --ink: #0f1e2c; --ink2: #3d4b59; --line: #0f1e2c; --panel: #ffffff; --bg: #ffffff; --bg2: #eef2f5; --link: #0f1e2c; --yes: #0a7a3c; --few: #8a5a00; --full: #b3261e; --btn-line: #0f1e2c;
  background: var(--sheet); color: var(--ink); border-top: 10px solid var(--accent); padding: 22px 18px 16px; }
html[data-look="daylight"] .sheet { --sheet: #fffdf8; --panel: #fffdf8; --bg: #fffdf8; }
.t-dark .sheet :focus-visible { outline: 3px solid #0f1e2c; box-shadow: 0 0 0 6px var(--accent); }
.t-dark .sheet .btn { --btn-line: #0f1e2c; }
.t-dark .sheet .btn.ghost { color: #0f1e2c; border-color: #0f1e2c; }
.t-dark .sheet a { color: #0f1e2c; }
.sheet .visit { background: transparent; border: 0; padding: 0; }
.sheet label { font: 700 .76rem var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.sheet input, .sheet select, .sheet textarea { background: #fff; color: #0f1e2c; border: 2px solid #0f1e2c; font: 400 1rem var(--font-body); text-transform: none; letter-spacing: 0; }
.sheet legend { font: 800 .8rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; padding: 0 0 8px; width: 100%; border-bottom: 3px solid #0f1e2c; margin-bottom: 14px; }
.sheet fieldset label + label { margin-top: 16px; }
.sheet fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.sheet .book-head { margin: 0 0 18px; }
.sheet .book-head h3 { margin: 0 0 .15em; font-size: 1.5rem; }
.sheet .book-head p { margin: 0; color: var(--ink2); font-size: .92rem; }
.sheet .receipt { background: #fff; border: 2px solid #0f1e2c; padding: 16px 18px; }
.sheet .fallback { background: #eef2f5; border: 2px dashed #0f1e2c; }
@media (min-width: 900px) {
  .visit-band { padding: 84px 0; }
  .visit-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 64px; align-items: start; }
  .sheet { padding: 30px 32px 18px; }
}
label { display: block; font-weight: 600; font-size: .95rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius); padding: 10px 12px; width: 100%; margin-top: 4px; }
html[data-look="nightrun"] :is(input, select, textarea) { border-color: var(--line); }
input[type="color"] { width: 48px; height: 36px; padding: 2px; vertical-align: middle; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 600px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.block { margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 600; }
.receipt { background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; }
.fallback { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--radius); }

/* ===== signup strip ===== */
.signup { padding: 30px 0; }
.signup-in { display: grid; gap: 14px; }
.signup h2 { font-size: 1.6rem; margin: 0 0 .2em; }
.signup p { margin: 0; }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.signup-form input { flex: 1 1 220px; margin: 0; background: #fff; color: #0f1e2c; border: 2px solid #0f1e2c; }
.signup-form input::placeholder { color: #3d4b59; }
.signup .form-status, .signup .fallback { flex: 1 1 100%; }
.signup .fallback { background: #fff; border: 2px solid #0f1e2c; color: #0f1e2c; }
.signup .fallback a { color: #0f1e2c; }
@media (min-width: 900px) { .signup-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } }

/* ===== inner pages ===== */
.routes-list { margin: 24px 0 0; border-top: 3px solid var(--ink); }
.routes-list > div { display: grid; gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.routes-list dt { font: 700 .8rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; padding-top: 3px; }
.routes-list dd { margin: 0; }
.routes-list dd p { margin: 0 0 .5em; }
@media (min-width: 700px) { .routes-list > div { grid-template-columns: 220px minmax(0, 1fr); } }
.rules { list-style: none; margin: 26px 0 0; padding: 0; border-top: 3px solid var(--ink); counter-reset: none; }
.rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rules .n { font: 800 1.25rem var(--font-mono); }
.rules h3 { margin: 0 0 .2em; }
.rules p { margin: 0; color: var(--ink2); }
.story-grid { display: grid; gap: 20px; }
.story p { max-width: 40em; }
.hours { width: 100%; max-width: 520px; border-collapse: collapse; margin-top: 18px; font-family: var(--font-mono); font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { font-weight: 700; }
.prose h2 { margin-top: 1.4em; font-size: 1.5rem; }
.prose { max-width: 46em; }

/* ===== footer ===== */
.foot { background: var(--foot); color: var(--foot-ink); padding: 46px 0 36px; border-top: 4px solid var(--accent); }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
.foot-brand { font: 800 1.3rem/1 var(--font-head); color: #fff; }
.foot-head { font: 700 .78rem var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-line { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; font-size: .9rem; }
.foot .linkish { color: var(--foot-ink); min-height: 44px; }
.foot .tiny { color: var(--foot-ink); opacity: .85; }
.noscript { margin: 0; padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }

/* ===== phone dock: Call and Text, square and always there ===== */
@media (max-width: 899px) {
  .callbar, .textbar { position: fixed; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)); font-weight: 800; text-decoration: none; border-top: 3px solid #0f1e2c; }
  .callbar { left: 0; right: 38%; background: var(--accent); color: var(--accent-ink); }
  .textbar { left: 62%; right: 0; background: var(--dark); color: var(--accent); border-top-color: var(--accent); }
  .callbar[hidden] { display: none; }
  .callbar svg, .textbar svg { width: 20px; height: 20px; fill: currentColor; }
  body.typing .callbar, body.typing .textbar { display: none; }
  body.typing { padding-bottom: 0; }
}
@media (max-width: 380px) { .callbar b, .callbar [data-biz="phone"] { display: none; } .callbar { right: 50%; } .textbar { left: 50%; } }
@media (max-width: 899px) { .foot { padding-bottom: 112px; } .day { grid-template-columns: 48px minmax(0, 1fr); } .day .st { grid-column: 2; } }
@media (min-width: 900px) { .callbar, .textbar { display: none; } }
html[data-demo] .callbar, html[data-demo] .textbar { bottom: 0; }

/* ===== accessibility layer ===== */
.skip { padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; }
.btn, .btn.small { min-height: 44px; }
#owner-open, .desk-open { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select { min-height: 44px; }
::placeholder { color: var(--ink2); opacity: 1; }
a[href^="tel:"]:not(.btn, .callbar), a[href^="mailto:"]:not(.btn) { display: inline-block; padding-block: 4px; }
.req { color: var(--full); font-weight: 700; margin-left: 2px; }
[data-biz="phone"] { white-space: nowrap; }
.wrap.hero-in { max-width: none; }

@media print {
  .top, .callbar, .textbar, .ribbon, .desk-open, #owner, .zipcard, .signup { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .t-dark, .t-sig, .foot { background: #fff !important; color: #000 !important; }
}

/* booking band sits under a signal rule */
.hero + .visit-band { border-top: 3px solid var(--accent); }

/* header fits one row at 1240 and up; the dispatcher tab waits until the hero is behind you */
@media (min-width: 1240px) {
  .top-in { column-gap: 20px; }
  .nav a { padding: 0 11px; font-size: .74rem; letter-spacing: .05em; }
  .brand { font-size: 1.05rem; }
  .tools .btn { padding: 8px 14px; }
}
body:not([data-past-hero]) .desk-open { display: none; }

/* tap sizes */
.visit-routes .mail, .routes-list dd a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.price-note a { display: inline-block; padding: 4px 0; }

/* coverage page: a pointer to the booking form, not a second copy of it */
.visit-link-band { padding: 44px 0; }
.visit-link { display: grid; gap: 22px; align-items: center; }
.visit-link .lead { color: var(--ink2); max-width: 34em; }
.visit-link .row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.visit-link .row .btn:first-child { flex: 1 1 100%; }
.visit-link .row .btn.call, .visit-link .row .btn.textlink { flex: 1 1 calc(50% - 5px); padding-inline: 12px; }
@media (min-width: 900px) {
  .visit-link-band { padding: 64px 0; }
  .visit-link { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
  .visit-link .row .btn:first-child { flex: 0 1 auto; }
  .visit-link .row .btn.call, .visit-link .row .btn.textlink { flex: 0 1 auto; padding-inline: 28px; }
}

/* ribbon fold (demo only): one slim line on the first screen; the form unfolds below it */
.ribbon { font-size: .85rem; border-bottom-width: 1px; }
.ribbon .wrap.ribbon-line { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; padding: 3px 0; }
.ribbon-fold { flex: 1 1 auto; min-width: 0; }
.ribbon-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; }
.ribbon-fold > summary::-webkit-details-marker { display: none; }
.ribbon-fold > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.ribbon-fold[open] > summary::after { transform: rotate(180deg); }
.ribbon-cta { text-decoration: underline; text-underline-offset: 3px; }
.ribbon-note { margin: 4px 0 8px; }
.ribbon-fold .yours { padding-bottom: 8px; }
.ribbon-back { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .ribbon-fold > summary::after { transition: none; } }

/* language picker (from lib/i18n) */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: .9rem; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick .globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.langmenu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.langmenu a:hover, .langmenu a[aria-current] { background: var(--bg2); }
.langpick-inline { display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.langpick-inline .globe { width: 16px; height: 16px; margin: 0 2px 0 8px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--ink2); flex: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--radius); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; color: var(--ink2); }
.langpick-inline a:hover { color: var(--ink); background: var(--bg2); }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.langpick-inline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ===== engine + owner toolbar + Customize ===== */
/* owner toolbar */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.3); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: 0; background: var(--panel); }
.owner-title { margin: 0; font: 700 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { background: none; border: 1px solid var(--line); color: inherit; border-radius: 0; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 11px; font: 600 .8rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pane .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; font: inherit; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look .swatch { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 0; border: 2px solid var(--line); }
.look small { color: var(--ink2); }
.swatch-daylight { background: linear-gradient(135deg, #f7f3ea 50%, #ff6a00 50%); }
.swatch-nightrun { background: linear-gradient(135deg, #111113 50%, #ffd400 50%); }
.swatch-hivis { background: linear-gradient(135deg, #ffffff 50%, #ff5a1f 50%); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.sections li b { flex: 1; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.sections select { font: inherit; font-size: .85rem; max-width: 40%; }
.sections li[data-sec] { flex-wrap: wrap; }
.sections li small[data-diff] { flex-basis: 100%; font-size: .8rem; color: var(--ink2); }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.checks li { padding: 6px 10px; border-radius: var(--radius); background: var(--bg2); border-left: 4px solid #4caf50; }
.checks li.warn { border-left-color: #e2b23a; }
.checks li.bad { border-left-color: #d13b2c; }
.ld { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team a { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.ai-team a span { display: block; font-size: .85rem; color: var(--ink2); }
.url { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; word-break: break-all; font-size: .85rem; flex: 1 1 200px; }
.answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 40px; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.nums div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.nums dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.nums dd { margin: 0; font: 700 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
.pane .steps { padding-left: 20px; }
.pane .steps li { margin-bottom: 6px; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; cursor: text; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }

/* front desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
@media (min-width: 721px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: 96px; } }
.desk-open[hidden] { display: none; }
@media (max-width: 899px) { .desk-open { bottom: 76px; } }
@media (min-width: 900px) { .desk-open, .desk-panel { left: calc(var(--rail) + 16px); } }
/* the floating desk button sits above the call bar on phones; the footer ends clear of both so the Owner link stays tappable */
@media (max-width: 899px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.35); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin-bottom: 10px; }
.desk-log p { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--bg2); max-width: 92%; }
.desk-log p.you { background: var(--accent); color: var(--accent-ink); margin-left: auto; }
.starters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.starters .chip { margin: 0; font-size: .85rem; padding: 4px 10px; }
.desk-form { display: flex; gap: 6px; }
.desk-form input { margin: 0; }

/* The look peek in the demo ribbon: three swatch buttons, each a whole look, pressed one outlined */
.peek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peek-cap { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.peek-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #3a2a00; border: 2px solid #d9c08a; border-radius: var(--radius); padding: 4px 12px 4px 5px; font-size: .82rem; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.peek-btn .swatch { width: 18px; height: 18px; border-radius: 0; border: 1px solid rgba(0,0,0,.2); }
.peek-btn:hover { border-color: #7a4a00; }
.peek-btn[aria-pressed="true"] { border-color: #3a2a00; background: #3a2a00; color: #fff; }
@media (max-width: 720px) { .peek { grid-column: 1 / -1; } }

/* ---------- v6.6 Point and change: the Customize button and the editor ---------- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.q-cz { display: grid; gap: 2px; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.q-cz b { font: 600 .95rem var(--font-head); }
.q-cz small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
.q-cz[aria-pressed="true"] { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.q-cz:focus-visible { outline: 2px solid #1D67CD; outline-offset: 2px; }
#cz { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.cz-box, .cz-sec-box { position: fixed; border-radius: 6px; pointer-events: none; transition: all .08s ease-out; }
.cz-box { outline: 3px solid #1D67CD; outline-offset: 2px; background: rgba(29,103,205,.08); }
.cz-sec-box { outline: 2px dashed rgba(29,103,205,.75); outline-offset: -2px; }
.cz-sec-box.whole { outline-style: solid; outline-width: 3px; background: rgba(29,103,205,.06); }
.cz-chip { position: absolute; left: 0; top: -30px; background: #1D67CD; color: #fff; font: 600 .78rem/1 var(--font-body); padding: 7px 10px; border-radius: 6px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cz-sec-chip { top: 6px; left: 6px; background: rgba(20,40,90,.88); }
.cz-box[hidden], .cz-sec-box[hidden] { display: none; }
.cz-pop { position: fixed; z-index: 48; width: min(380px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(10,20,50,.3); padding: 12px 16px 16px; font-size: .95rem; }
.cz-pop[hidden] { display: none; }
.cz-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82vh; max-height: 82dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cz-pop-head h2 { margin: 0; font: 600 1.05rem var(--font-head); outline: none; }
.cz-pop label { display: block; font-weight: 600; font-size: .88rem; margin: 10px 0 4px; }
.cz-pop textarea { min-height: 90px; }
.cz-acts { display: grid; gap: 6px; }
.cz-act { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.cz-act b { font-size: .95rem; }
.cz-act small { font-size: .8rem; color: var(--ink2); line-height: 1.3; }
.cz-act:hover, .cz-act:focus-visible { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.cz-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cz-hint { font-size: .82rem; color: var(--ink2); margin: 6px 0 0; }
.cz-msg { font-size: .88rem; margin: 8px 0 0; min-height: 0; }
.cz-msg:empty, .cz-answer:empty { display: none; }
.cz-answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: .88rem; margin: 10px 0 0; max-height: 240px; overflow: auto; }
.cz-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 46; width: min(620px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(10,20,50,.28); padding: 10px 14px; font-size: .92rem; }
.cz-bar[hidden] { display: none; }
.cz-bar p { margin: 0; }
.cz-bar .cz-note:empty { display: none; }
.cz-bar .cz-note { margin-top: 4px; font-size: .85rem; color: var(--ink2); }
.cz-bar .cz-row { margin-top: 8px; }
@media (max-width: 720px) { .cz-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
body.customizing main * { cursor: pointer; }
@media (max-width: 899px) { body.customizing :is(.callbar, .textbar) { display: none; } }
.cz-added { margin-top: 18px; }
.cz-added.cz-text p { max-width: 42rem; }
.cz-pic { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.cz-sec .wrap > :first-child { margin-top: 0; }
.cz-sec .wrap > h2 + p { margin-inline: auto; text-align: center; max-width: 42rem; }
[data-layout="center"] { text-align: center; }
[data-layout="center"] .cz-pic { margin-inline: auto; }
[data-layout="narrow"] > .wrap { max-width: 760px; }
[data-layout="shade"] { background: var(--bg2); }
.cz-flash { animation: cz-flash 1.2s ease-out; }
@keyframes cz-flash { 0% { box-shadow: inset 0 0 0 4px #1D67CD, 0 0 0 4px rgba(29,103,205,.35); } 100% { box-shadow: inset 0 0 0 4px rgba(29,103,205,0), 0 0 0 4px rgba(29,103,205,0); } }
@media (prefers-reduced-motion: reduce) { .cz-flash { animation: none; box-shadow: inset 0 0 0 4px #1D67CD; } }
.cz-peek { box-shadow: inset 0 0 0 4px rgba(29,103,205,.7); }

/* A section's own look, set in Customize, whole section, Look (lib/added.cjs look() writes the --s-* values).
   Panels inside the section (cards, forms, tables) keep the site's own ink, so words on white stay dark. */
html { --pink: var(--ink); --pink2: var(--ink2); --pmuted: var(--muted); }
main > section[data-s-fg] { color: var(--s-fg); --ink: var(--s-fg); --ink2: var(--s-fg); --muted: var(--s-fg); --hero-ink: var(--s-fg); }
main > section[data-s-fg] :is(.sub, .kicker, .lead, .tiny, .btn.ghost) { color: var(--s-fg); }
main > section[data-s-fg] .btn.ghost { border-color: var(--s-fg); }
main > section[data-s-fg] :is(.card, .hours, .receipt, .fallback, .zc, .visit, .day, .cz-card:not([data-s-card]), input, select, textarea) { --ink: var(--pink); --ink2: var(--pink2); --muted: var(--pmuted); color: var(--pink); }
main > section[data-s-head] :is(h1, h2, h3):not(:is(.card, .hours, .receipt, .fallback, .zc, .visit, .day, .cz-card) *) { color: var(--s-head); }
main > section[data-s-bg]:not([data-s-pic]) { background: var(--s-bg); }
main > section[data-s-bg]:not([data-s-pic])::before, main > section[data-s-pic]::before { display: none; }
main > section[data-s-pic] { background-image: linear-gradient(rgba(10,16,20,.62), rgba(10,16,20,.72)), var(--hero-photo); background-size: cover; background-position: center; }
main > section[data-s-pic][data-s-bg] { background-image: linear-gradient(color-mix(in srgb, var(--s-bg) 72%, transparent), color-mix(in srgb, var(--s-bg) 80%, transparent)), var(--hero-photo); }
main > section[data-s-pic] :is(h1, h2, .sub, .lead) { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
main > section[data-s-pic][data-s-bg] :is(h1, h2, .sub, .lead) { text-shadow: none; }
main > section[data-s-pic]:not(#_) { background-size: cover; background-position: center; background-repeat: no-repeat; }
main > section[data-s-btn] { --accent: var(--s-btn); --accent-ink: var(--s-btn-ink); }
main > section[data-s-font="bricolage"] { --font-body: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; }
main > section[data-s-font="instrument"] { --font-body: "Instrument Sans", system-ui, sans-serif; }
main > section[data-s-font="serif"] { --font-body: Georgia, "Times New Roman", serif; }
main > section[data-s-font="system"] { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-font] { font-family: var(--font-body); }
main > section[data-s-hfont="bricolage"] { --font-head: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; }
main > section[data-s-hfont="instrument"] { --font-head: "Instrument Sans", system-ui, sans-serif; }
main > section[data-s-hfont="serif"] { --font-head: Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-size="s"] { --s-k: .88; }
main > section[data-s-size="l"] { --s-k: 1.14; }
main > section[data-s-size="xl"] { --s-k: 1.3; }
main > section[data-s-size] { font-size: calc(17px * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(clamp(2.1rem, 5vw, 3.4rem) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(clamp(1.7rem, 3.4vw, 2.4rem) * var(--s-k)); }
main > section[data-s-size] :is(h3, h2.h3) { font-size: calc(1.25rem * var(--s-k)); }
main > section[data-s-size] :is(.lead, .sub) { font-size: calc(1.1rem * var(--s-k)); }
main > section[data-s-space="tight"] { padding-block: clamp(24px, 3.5vw, 44px); }
main > section[data-s-space="roomy"] { padding-block: clamp(72px, 11vw, 150px); }
main > section[data-s-align="left"], main > section[data-s-align="left"] :is(h1, h2, .hero-in, .lead, .sub, p.center) { text-align: left; }
main > section[data-s-align="left"] :is(.lead, .sub) { margin-inline: 0; }
main > section[data-s-align="left"] .hero .ctas, main > section[data-s-align="left"].hero .ctas { justify-content: flex-start; }
main > section[data-s-align="center"], main > section[data-s-align="center"] :is(h1, h2, h3, p, .hero-in) { text-align: center; }
main > section[data-s-align="center"] :is(.lead, .sub, .cz-pic) { margin-inline: auto; }

/* Boxes the owner added: side by side cards, each with its own color if chosen */
.cz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.cz-cards > .cz-card { margin: 0; }
.cz-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 14px; }
.cz-card h3 { color: inherit; }
.cz-card[data-s-card] { background: var(--s-card); color: var(--s-card-ink); border-color: transparent; --ink: var(--s-card-ink); --ink2: var(--s-card-ink); }
.cz-picture[data-size="s"] .cz-pic { max-width: min(320px, 100%); }
.cz-picture[data-size="l"] .cz-pic { width: 100%; }

/* The whole-section editor: tabs, the parts list and color rows */
.cz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; padding: 3px; background: var(--bg2); border-radius: var(--radius); }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); cursor: pointer; }
.cz-tab[aria-selected="true"] { background: var(--panel); color: #1D67CD; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cz-tab:focus-visible { outline: 2px solid #1D67CD; outline-offset: 1px; }
.cz-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cz-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; line-height: 1.35; }
.cz-part b { font-weight: 700; }
.cz-part.gone { opacity: .7; border-style: dashed; }
.cz-part-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-part-btns .btn.small { padding: 5px 10px; font-size: .8rem; }
.cz-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cz-pop .cz-color-row label { margin: 0; flex: 1; }
.cz-pop .cz-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.cz-check input { width: auto; margin: 0; }



/* ===== overrides that must come after the engine and owner styles ===== */
.wrap.hero-in > * { margin-inline: 0 !important; }
html[data-zone="center"] .hero-copy { text-align: center; }
html[data-zone="center"] .hero-copy .hero-contact { justify-content: center; }
html[data-zone="right"] .hero-copy { text-align: right; }
html[data-zone="right"] .hero-copy .hero-contact { justify-content: flex-end; }
html[data-zone="center"] .hero-copy .sub, html[data-zone="right"] .hero-copy .sub { margin-inline: auto 0; }
html[data-zone="center"] .hero-copy .sub { margin-inline: auto; }
main > section[data-s-align="left"] .hero-copy { text-align: left; }
main > section[data-s-align="center"] .hero-copy { text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Ask button: a dispatch ticket strip pinned flush to the bottom edge, not a floating pill */
.btn.desk-open { left: 0; bottom: 0; border: 0; border-left: 6px solid var(--accent); border-radius: 0; box-shadow: none; background: var(--dark); color: var(--dark-ink); justify-content: flex-start; text-align: left; gap: 10px; padding: 12px 22px; min-height: 52px; font-weight: 800; letter-spacing: .02em; }
.btn.desk-open::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
@media (min-width: 900px) { .btn.desk-open { left: var(--rail); } .desk-panel { left: var(--rail); bottom: 52px; border-radius: 0; } }
@media (max-width: 899px) { .btn.desk-open { right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.14); } }

/* The demo ribbon is FireForge chrome, not the demo design: set in the system font so it never rewraps when the web font arrives (phone CLS). */
.ribbon { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Builder M13: advanced typography and theme. Every rule hangs off a data- attribute on <html> that the owner's
   theme sets (served page and preview alike), so an absent key leaves the model's own style untouched. Heading
   rules reach every h1, h2 and h3 on the page, small label headings included. */
html[data-hweight="light"] :is(h1, h2, h3) { font-weight: 300; }
html[data-hweight="normal"] :is(h1, h2, h3) { font-weight: 400; }
html[data-hweight="bold"] :is(h1, h2, h3) { font-weight: 700; }
html[data-hweight="black"] :is(h1, h2, h3) { font-weight: 800; }
html[data-hcase="upper"] :is(h1, h2, h3) { text-transform: uppercase; }
html[data-hcase="caps"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: small-caps; }
html[data-hcase="normal"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: normal; }
html[data-htrack="tight"] :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-htrack="normal"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-htrack="wide"] :is(h1, h2, h3) { letter-spacing: .08em; }
html[data-lead="snug"] body { line-height: 1.4; }
html[data-lead="normal"] body { line-height: 1.6; }
html[data-lead="airy"] body { line-height: 1.85; }
html[data-btnshape="pill"] .btn { border-radius: 999px; }
html[data-btnshape="square"] .btn { border-radius: 0; }
html[data-btnshape="soft"] .btn { border-radius: 8px; }
html[data-links="underline"] main a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
html[data-links="plain"] main a:not(.btn) { text-decoration: none; }

/* Composed sections (lib/compose.cjs): a 12 column grid; every part spans 1 to 12 columns and 1 to 6 rows */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 24px; align-items: start; }
.fc-grid[data-gap="s"] { gap: 12px; }
.fc-grid[data-gap="l"] { gap: 40px; }
.fc-sec[data-pad="s"] { padding-block: clamp(20px, 3vw, 36px); }
.fc-sec[data-pad="l"] { padding-block: clamp(72px, 10vw, 140px); }
.fc-b { --fc-c: var(--fc-span, 12); --fc-r: var(--fc-rows, 1); grid-column: span var(--fc-c); grid-row: span var(--fc-r); min-width: 0; }
.fc-b[data-fc-bg] { background: var(--fc-bg); padding: 18px; border-radius: var(--radius); }
.fc-b[data-fc-fg] { color: var(--fc-fg); --ink: var(--fc-fg); }
.fc-b[data-fc-fg] :is(h2, h3, p) { color: var(--fc-fg); }
.fc-b[data-fc-dayoff] { display: none; }
body.customizing .fc-b[data-fc-dayoff] { display: block; opacity: .4; }
.fc-b > :first-child { margin-top: 0; }
.fc-b > :last-child { margin-bottom: 0; }
.fc-box { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.fc-box[data-fc-bg] { background: var(--fc-bg); border-color: transparent; }
.fc-inner { margin-top: 16px; grid-auto-rows: minmax(32px, auto); }
.fc-inner .fc-image img { min-height: calc(var(--fc-r, 1) * 56px); }
.fc-image { align-self: stretch; }
.fc-image img { display: block; width: 100%; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); object-fit: cover; border-radius: var(--radius); }
.fc-image img[data-fc-fit="contain"] { object-fit: contain; }
.fc-empty { display: none; }
body.customizing .fc-empty { display: grid; place-items: center; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fc-pic { display: block; height: 100%; }
.fc-cap { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.fc-video { align-self: stretch; }
.fc-mail, .fc-form .receipt { max-width: 44rem; }
.fc-mail { display: grid; gap: 12px; }
.fc-mail label { display: grid; gap: 4px; font-weight: 600; }
.fc-mail input, .fc-mail select, .fc-mail textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-mail p { margin: 0; }
.fc-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-mail .form-status:empty { display: none; }
.fc-form [hidden] { display: none !important; }
.fc-joinform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; max-width: 36rem; }
.fc-joinform label { display: grid; gap: 4px; font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.fc-joinform input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-joinform p { margin: 0; }
.fc-joinform .form-status, .fc-joinform .fallback { flex-basis: 100%; }
.fc-joinform .form-status:empty { display: none; }
.fc-joinform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-join [hidden] { display: none !important; }
.fc-joined { font-weight: 600; margin: 0; }
.fc-form .receipt { padding: 16px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); }
.fc-frame { position: relative; aspect-ratio: 16 / 9; min-width: 0; max-width: 100%; min-height: calc(var(--fc-r, 1) * 72px); border-radius: var(--radius); overflow: hidden; background: #000; }
.fc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-clip { display: block; width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.fc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fc-pics[data-fc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-pics[data-fc-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel, #fff); }
.fc-pics[data-fc-fit="contain"] img { object-fit: contain; }
.fc-pics[data-fc-mode="slide"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.fc-pics[data-fc-mode="slide"] img { flex: 0 0 min(100%, 420px); scroll-snap-align: start; }
.fc-pics[data-fc-mode="slide"][data-fc-cols="2"] img { flex-basis: min(100%, 560px); }
.fc-pics[data-fc-mode="slide"][data-fc-cols="4"] img { flex-basis: min(100%, 300px); }
.fc-space[data-fc-h="s"] { height: 16px; }
.fc-space[data-fc-h="m"] { height: 40px; }
.fc-space[data-fc-h="l"] { height: 88px; }
[data-fc-w="400"] { font-weight: 400; } [data-fc-w="500"] { font-weight: 500; } [data-fc-w="600"] { font-weight: 600; } [data-fc-w="700"] { font-weight: 700; } [data-fc-w="800"] { font-weight: 800; }
[data-fc-hw="400"] :is(h1, h2, h3) { font-weight: 400; } [data-fc-hw="500"] :is(h1, h2, h3) { font-weight: 500; } [data-fc-hw="600"] :is(h1, h2, h3) { font-weight: 600; } [data-fc-hw="700"] :is(h1, h2, h3) { font-weight: 700; } [data-fc-hw="800"] :is(h1, h2, h3) { font-weight: 800; }
[data-fc-w] :is(p, .lead, .sub) { font-weight: inherit; }
.fc-b[data-fc-size="s"] { font-size: .88em; } .fc-b[data-fc-size="l"] { font-size: 1.14em; } .fc-b[data-fc-size="xl"] { font-size: 1.3em; }
[data-fc-align="left"] { text-align: left; } [data-fc-align="center"] { text-align: center; } [data-fc-align="right"] { text-align: right; }
/* Tablets (721 to 1024px): a part's tablet size wins over its desk size; a tablet-hidden part goes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fc-b { --fc-c: var(--fc-tspan, var(--fc-span, 12)); --fc-r: var(--fc-trows, var(--fc-rows, 1)); }
  .fc-sec[data-tpad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-tpad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-tpad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-tgap="s"] { gap: 12px; } .fc-grid[data-tgap="m"] { gap: 24px; } .fc-grid[data-tgap="l"] { gap: 40px; }
  [data-fc-thide] { display: none; }
  body.customizing [data-fc-thide] { display: block; opacity: .4; }
}
/* Phones (up to 720px): the grid keeps its 12 columns so a phone size can be set; a part with no phone
   size takes the full width, which is the stacked look the page had before phone sizes existed. */
@media (max-width: 720px) {
  .fc-b { --fc-c: var(--fc-pspan, 12); --fc-r: var(--fc-prows, var(--fc-rows, 1)); }
  .fc-sec[data-ppad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-ppad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-ppad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-pgap="s"] { gap: 12px; } .fc-grid[data-pgap="m"] { gap: 24px; } .fc-grid[data-pgap="l"] { gap: 40px; }
  [data-fc-phide] { display: none; }
  body.customizing [data-fc-phide] { display: block; opacity: .4; }
  .fc-pics[data-fc-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Motion (builder M9). Entrances ride the scroll itself: a part fades, rises, slides or zooms in over the
   stretch where it enters the screen, with no script. Browsers without scroll-driven animations skip
   the @supports block and show every part at rest. */
@supports (animation-timeline: view()) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in] { animation: fc-fade linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  [data-fx-in="rise"] { animation-name: fc-rise; } [data-fx-in="slide"] { animation-name: fc-slide; } [data-fx-in="zoom"] { animation-name: fc-zoom; }
  [data-fx-in][data-fx-speed="slow"] { animation-range: entry 5% entry 95%; } [data-fx-in][data-fx-speed="fast"] { animation-range: entry 5% entry 30%; }
  .fc-image[data-fx-scroll="drift"] .fc-shot { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: 1.18; animation: fc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; border-radius: 0; }
}
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fc-slide { from { opacity: 0; translate: -32px 0; } }
@keyframes fc-zoom { from { opacity: 0; scale: .92; } }
@keyframes fc-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
/* Hover answers only a real pointer; a finger on a phone gets no half-state. */
@media (hover: hover) {
  .fc-b[data-fx-hover] { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .fc-b[data-fx-hover][data-fx-speed="slow"] { transition-duration: .5s; } .fc-b[data-fx-hover][data-fx-speed="fast"] { transition-duration: .12s; }
  .fc-b[data-fx-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35); }
  .fc-b[data-fx-hover="grow"]:hover { transform: scale(1.03); }
  .fc-b[data-fx-hover="glow"]:hover { box-shadow: 0 0 0 3px var(--accent, #8ab4f8), 0 10px 30px -10px var(--accent, #8ab4f8); }
  .fc-b[data-fx-hover="dim"]:hover { opacity: .75; }
}
/* At rest: a visitor who asks their device for less motion, or the design's Still switch, sees no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in], .fc-image[data-fx-scroll] img { animation: none; }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
  .fc-b[data-fx-hover] { transition: none; } .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
}
html[data-still] .fc-b[data-fx-in], html[data-still] .fc-sec[data-fx-in], html[data-still] .fc-image[data-fx-scroll] img { animation: none; }
html[data-still] .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
html[data-still] .fc-b[data-fx-hover] { transition: none; } html[data-still] .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
/* Builder M11: the header and footer as the owner set them (compose.chrome). */
[data-chrome-hid] { display: none !important; }
img.mark[data-chrome-logo] { width: auto; max-width: 180px; height: 36px; object-fit: contain; }
.top[data-chrome-static] { position: static; }
.top[data-chrome-layout="center"] .bar { flex-direction: column; justify-content: center; text-align: center; }
.top[data-chrome-layout="center"] .tools { margin-left: 0; }
.foot[data-chrome-layout="center"] .foot-grid { grid-template-columns: 1fr; text-align: center; }
.foot[data-chrome-layout="center"] .foot-links { justify-content: center; }
.foot[data-chrome-hide] { padding-top: 10px; } .foot[data-chrome-hide] .foot-line { border: 0; padding-top: 0; }