/* White theme: Matt's preference, a white background with blue text (2026-09-27).
   Tony's logo and blue #0057FF (5.52:1 on white; white on it 5.52:1; black on it only 3.28:1,
   so black text never sits on the blue). Black stays the accent. Loaded after motion.css. */
:root {
  --blue: #0057FF;
  --blue-text: #0057FF;
  --ink: #161616;
  --white: #FFFFFF;
  --muted: #3E4652;         /* 9.9:1 on white */
  --line: #D5DCEA;
  --tint: #F2F6FF;
  color-scheme: light;
}
html, body { background: #FFFFFF; }
body { color: var(--blue); }

/* header: Tony's logo, still */
.site-head { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.brand img { display: block; height: 44px; width: auto; }
.tagline { color: var(--muted); }
.call { background: var(--blue); color: #FFFFFF; }
.pass-line { background: var(--blue); }

/* hero */
.hero-stage, .s-hero2 .stage { background: #FFFFFF; }
.h1, .hero-copy2 h1 { color: var(--blue); }
.btn { background: var(--blue); color: #FFFFFF; }
.btn-line { color: var(--ink); }
.film { background: #D9D4C8; }
.wet { background: var(--blue); }
.quote .ql, .say .sl { background: #FFFFFF; color: var(--blue); }
.quote .by, .say .by { background: #FFFFFF; color: var(--ink); }

/* direction 2: the headline is a window into the footage; on white the letters are cut from a white sheet */
.knock { background: #FFFFFF; color: #000000; mix-blend-mode: screen; }

/* towns */
.s-towns, .s-ticker { background: #FFFFFF; }
.band-a { background: var(--blue); color: #FFFFFF; }
.band-b { background: #FFFFFF; color: var(--blue); border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink); }
.towns-lede, .tick-lede { color: var(--blue); }
.tick .solid span { color: var(--blue); }
.tick .ghost span { color: transparent; -webkit-text-stroke: 1.5px rgba(0, 87, 255, .45); }
.tick-line { background: var(--blue); }

/* services, direction 1 */
.s-svc { background: #FFFFFF; border-top-color: var(--blue); }
.s-svc .name, .s-svc .lead { color: var(--blue); }
.s-svc .more-btn { color: var(--ink); }
.s-roof .lead, .s-roof .more-btn { background: #FFFFFF; }
.s-roof .lead { box-shadow: 0 0 0 1px var(--line); }
.s-gutter .num { color: var(--blue); }
.s-gutter .figure p { color: var(--blue); }
.s-fence .tag { background: var(--ink); color: #FFFFFF; }
.chip { border-color: var(--blue); color: var(--blue); }

/* services, direction 2: the track */
.s-track, .tp-roof, .tp-gutter, .tp-fence { background: #FFFFFF; }
.tp-concrete { background: var(--blue); }
.tp .name, .tp .lead, .tp .fig { color: var(--blue); }
.tp .big30 { color: var(--blue); }
.tp .more-btn { color: var(--ink); }
.tp-concrete .name, .tp-concrete .lead, .tp-concrete .more-btn { color: #FFFFFF; }
.tp-concrete .chip { border-color: #FFFFFF; color: #FFFFFF; }
.tp-fence .tag { background: var(--ink); color: #FFFFFF; }
.track-bar { background: rgba(0, 87, 255, .16); }
.track-bar span { background: var(--blue); }

/* Matt */
.s-matt { background: #FFFFFF; }
.s-matt .big { color: var(--blue); }
.s-matt .who { color: var(--ink); }
.s-matt .gen h2 { color: var(--blue); }
.s-matt .gen .chip { background: #FFFFFF; border-color: var(--blue); color: var(--blue); }
.s-matt2 { background: #FFFFFF; }
.s-matt2 .side span { background: var(--blue); color: #FFFFFF; }
.s-matt2 .who { background: var(--ink); color: #FFFFFF; }
.s-matt2 .gen h2 { color: var(--blue); }

/* quote */
.s-quote { background: #FFFFFF; border-top: 4px solid var(--blue); }
.s-quote h2 { color: var(--blue); }
.rating .txt { color: var(--ink); }
.field label, .field legend { color: var(--muted); }
.field input, .field textarea, .field select { background: #FFFFFF; color: var(--ink); border-color: var(--line); }
.field input:focus, .field textarea:focus { border-color: var(--blue); }
.svc-pick span { border-color: var(--line); color: var(--blue); }
.svc-pick input:checked + span { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.form .status { color: var(--muted); }
.textus a { color: var(--blue); }
.textus a .k { color: var(--ink); }

/* foot: the logo, still */
.s-foot { background: #FFFFFF; border-top: 4px solid var(--blue); }
.s-foot .footlogo { display: block; width: 100%; max-width: 520px; height: auto; }
.s-foot .phone { color: var(--blue); }
.s-foot .meta { color: var(--muted); }
.s-foot .meta a { color: var(--ink); }
.s-foot .legal { color: var(--muted); }

/* detail sheet */
.sheet { background: #FFFFFF; color: var(--ink); box-shadow: 0 -1px 0 var(--line); }
.sheet h3 { color: var(--blue); }
.sheet .close { background: var(--blue); color: #FFFFFF; }

@media (min-width: 900px) {
  .brand img { height: 50px; }
}

/* direction 2 on desktop: the right half shows Matt's clip in full while the letters carry it too */

@media (max-width: 899px) { .theme-white .deskfilm { display: none; } }

/* reduced motion: the headline is plain type, in the blue */
.reduce .knock { color: var(--blue); background: none; mix-blend-mode: normal; }

/* the service names cross the photos' edge; a crisp white keyline painted behind each letter keeps
   the blue legible on dark photos and vanishes on the white ground (not a blur, not a glow) */
.theme-white .s-svc .name, .theme-white .tp .name, .theme-white .s-matt .big {
  -webkit-text-stroke: 0.09em #FFFFFF; paint-order: stroke fill;
}
/* the concrete panel's name is white on the blue field: no keyline there */
.theme-white .tp-concrete .name { -webkit-text-stroke: 0; }

/* round 3: GUTTER, a window into the gutter footage, cut from a white sheet like the hero's letters */
.tp-gutter .gk { background: #FFFFFF; color: #000000; mix-blend-mode: screen; }