/* Barlow Condensed — SIL OFL 1.1 (barlow-condensed-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Barlow — SIL OFL 1.1 (barlow-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Look: Trade Crisp. A working trade: plumber, electrician, HVAC, detailer, roofer.
   One idea: a work order. Navy and safety orange, condensed capitals, square corners, the call
   to action and the proof first, solid blocks instead of soft cards, and the hours set as big
   as the phone number on a truck door.
   Grown from B64's sturdy (its Barlow pair, its orange proof strip, its dark photo wash) with
   the prototype's navy, hazard stripe and work-order card.
   Tokens first; the rules after them are this look's bounded set: the stripe, the hero label
   and hours, the proof strip, the buttons, the kicker bar, the blocks, the form card. */

:root {
  --bg: #f3f4f6;
  --bg-raised: #ffffff;
  --bg-alt: #e4e7ed;
  --bg-line: #c9ced8;
  --ink: #0e1b33;
  --ink-dim: #45526a;
  --accent: #ff6b1a;          /* safety orange: fills, bars, the proof strip */
  --accent-strong: #ff8740;
  --accent-ink: #0e1b33;      /* navy on orange; white on this orange would fail AA */
  --accent-text: #a8410a;     /* orange as small text on the light grounds */
  --band: #0e1b33;
  --band-ink: #ffffff;
  --band-dim: #b7c1d4;
  --band-accent: #ff8a47;
  /* the hero's own pair, as literals so a checker reads the pair the page shows: white on navy */
  --hero-ground: #0e1b33;
  --hero-ink: #ffffff;
  --hero-dim: #b7c1d4;
  --hero-accent: #ff8a47;
  --hero-scrim: #0b1528;
  --proof-bg: var(--accent);
  --proof-ink: var(--ink);
  --proof-mark: var(--ink);
  --proof-glyph: "◆";
  --footer-bg: var(--band);
  --footer-ink: #c9d1de;
  --rule-strong: 2px solid var(--ink);
  --texture: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 16px);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;
  --font-kicker: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-button: "Barlow Condensed", "Arial Narrow", sans-serif;
  --display-weight: 700;
  --heading-weight: 700;
  --display-tracking: 0;
  --display-leading: 0.9;
  --display-case: uppercase;
  --kicker-size: var(--step-0);
  --kicker-tracking: 0.08em;
  --kicker-weight: 700;
  --button-weight: 700;
  --button-case: uppercase;
  --button-tracking: 0.04em;
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 4.75rem);
  --step-5: clamp(3.4rem, 1.9rem + 6.4vw, 7rem);

  --radius: 0;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-media: 0;
  --shadow-2: none;
  --lift: -2px;
}

/* The header: white, a heavy rule, an orange diamond before the name. */
.site-header { background: #ffffff; border-bottom: 3px solid var(--ink); }
.wordmark { gap: 0.55rem; }
.wordmark::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; background: var(--accent); transform: rotate(45deg); }
.site-nav a { text-transform: uppercase; letter-spacing: 0.06em; }

/* Hero: a hazard stripe along the top, the kicker as an orange label, the hours set big. */
.hero-block::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px; z-index: 3;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--band) 14px 28px);
}
.hero-kicker { justify-self: start; width: fit-content; padding: 0.2rem 0.55rem; background: var(--accent); color: var(--accent-ink); }
.hero-heading em { font-style: normal; }
.hero-note { font: 700 var(--step-1)/1.15 var(--font-display); text-transform: uppercase; color: var(--ink); }   /* the hours, a line under the buttons: two steps below the old size, which competed with them (the B256 judge) */
.hero--band-card .hero-copy { border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
@media (min-width: 56em) { .hero--split .hero-media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } }

/* Proof: the orange work-order strip, straight after the hero. */
.proof--strip .proof-list { font: 700 var(--step-1)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.proof--strip li::before { border-radius: 0; transform: rotate(45deg); }
.proof--inline .proof-list { font-weight: 600; }

/* Buttons: square, heavy, condensed. */
.btn, .button { font-size: var(--step-1); min-height: 3.5rem; }
.header-cta { font-size: var(--step-0); }
.btn-secondary { border-color: currentColor; }

/* Kickers carry an orange bar. */
.kicker { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.kicker::before { content: ""; flex: none; width: 2rem; height: 4px; background: var(--accent); }

/* Services: a big navy number; the blocks get an orange edge. */
.service-n { color: var(--ink); }
.services--blocks .service-list li { border-left: 6px solid var(--accent); }
.services--blocks .service-list h3 { font-size: var(--step-2); }

/* The band: navy plate. Its picture stands on an orange line. */
.band .about-media img { border-bottom: 8px solid var(--accent); }

/* Forms: a heavy outline and a hard shadow, like a clipboard; a picked time goes orange. */
.form-card { border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.site-form input:not([type=radio]):not([type=checkbox]), .site-form textarea { border-width: 2px; background: var(--bg-raised); }
.slot-time { font-size: var(--step-2); }
.slot-tile:has(input:checked) { background: var(--accent); border-color: var(--ink); }
.slot-tile:has(input:checked) :is(.slot-day, .slot-note) { color: var(--ink); }
.contact-card { box-shadow: 10px 10px 0 var(--ink); }

/* The footer stands on an orange line. */
.site-footer { border-top: 6px solid var(--accent); }