/* Varied looks: the design directions (src/lib/site-content/look.ts).
   Loaded after theme.css, and only by sites whose brand uses a direction; sites made before keep
   theme.css alone and render exactly as they did. Every rule reads an attribute on <html>
   (data-palette, data-font, data-hero, data-services, data-cards, data-corners, data-buttons,
   data-headings, data-rhythm, data-about, data-footer), so each axis stays valid on its own. */

/* 1. Self-hosted type (SIL OFL 1.1, Latin subsets; licences beside the files). A page loads at
   most three files: its pair's heading face and body face(s). */
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("fonts/bitter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

/* 2. Type pairs: heading face, body face, label face and how headings are set. */
:root {
  --heading-weight: 700;
  --heading-tracking: -0.025em;
  --heading-leading: 1.08;
  --heading-scale: 1;
  --font-h3: var(--font-heading);
  --h3-weight: var(--heading-weight);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --card-bg: var(--bg);
  --block: var(--surface-2);
  --footer-bg: var(--ink);
  --footer-ink: var(--bg);
  --button-radius: var(--radius-sm);
  --chip-radius: 999px;
}

html[data-font="industrial"] {
  --font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-label: "Barlow", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 700;
  --heading-tracking: 0.005em;
  --heading-leading: 1;
  --heading-scale: 1.12;
  --font-h3: "Barlow", "Segoe UI", system-ui, sans-serif;
  --h3-weight: 600;
}
html[data-font="grotesk"] {
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --heading-weight: 800;
  --heading-tracking: -0.03em;
  --heading-leading: 1.02;
  --h3-weight: 700;
}
html[data-font="slab"] {
  --font-heading: "Bitter", Rockwell, Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-label: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  --heading-leading: 1.1;
  --h3-weight: 650;
}
html[data-font="humanist"] {
  --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-label: "Manrope", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 750;
  --heading-tracking: -0.035em;
  --heading-leading: 1.06;
  --h3-weight: 700;
}
html[data-font="editorial"] {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 600;
  --heading-tracking: -0.02em;
  --heading-leading: 1.06;
  --h3-weight: 600;
}
html[data-font="elegant"] {
  --font-heading: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
  --font-label: "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 600;
  --heading-tracking: -0.01em;
  --heading-leading: 1.02;
  --heading-scale: 1.18;
  --font-h3: "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
  --h3-weight: 500;
}
html[data-font="scholar"] {
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-label: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 650;
  --heading-tracking: -0.02em;
  --heading-leading: 1.1;
  --h3-weight: 650;
}
html[data-font="display"] {
  --font-heading: "Young Serif", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --heading-weight: 400;
  --heading-tracking: -0.02em;
  --heading-leading: 1.08;
  --font-h3: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --h3-weight: 650;
}

/* 3. Palettes: the whole colour set (page, surfaces, ink, accent, banner, colour block, footer).
   Each pair used for text clears WCAG AA (tests/varied-looks.test.mjs reads this file). The
   :root + two attributes outrank theme.css's palette rules. */
:root[data-palette="ember"][data-theme] {
  --bg: #ffffff; --surface: #f4f3f0; --surface-2: #e9e7e2; --ink: #17191c; --muted: #565a60; --line: #dedbd5;
  --accent: #b03f0c; --accent-ink: #ffffff; --ring: #b03f0c;
  --hero-scrim: #17191c; --hero-ink: #ffffff; --hero-button-bg: #f59e0b; --hero-button-ink: #17191c;
  --block: #f59e0b; --footer-bg: #17191c; --footer-ink: #ffffff;
  --shadow: 0 18px 40px -28px rgb(23 25 28 / 45%);
}
:root[data-palette="navy"][data-theme] {
  --bg: #ffffff; --surface: #f1f4f8; --surface-2: #e4eaf1; --ink: #0e2238; --muted: #4d5d70; --line: #d9e1ea;
  --accent: #1b4f8a; --accent-ink: #ffffff; --ring: #1b4f8a;
  --hero-scrim: #0e2238; --hero-ink: #ffffff; --hero-button-bg: #e8b04b; --hero-button-ink: #0e2238;
  --block: #e8b04b; --footer-bg: #0e2238; --footer-ink: #ffffff;
  --shadow: 0 22px 44px -30px rgb(14 34 56 / 50%);
}
:root[data-palette="voltage"][data-theme] {
  --bg: #ffffff; --surface: #f3f6fb; --surface-2: #e6ecf6; --ink: #0b1a2e; --muted: #4f5d6f; --line: #dbe3ef;
  --accent: #1f56c7; --accent-ink: #ffffff; --ring: #1f56c7;
  --hero-scrim: #0b1a2e; --hero-ink: #ffffff; --hero-button-bg: #ffd23f; --hero-button-ink: #0b1a2e;
  --block: #ffd23f; --footer-bg: #0b1a2e; --footer-ink: #ffffff;
  --shadow: 0 22px 44px -30px rgb(11 26 46 / 45%);
}
:root[data-palette="pine"][data-theme] {
  --bg: #f8f6f0; --surface: #efebe1; --surface-2: #e5dfd1; --ink: #1c2620; --muted: #56605a; --line: #ddd6c6;
  --accent: #2c6247; --accent-ink: #ffffff; --ring: #2c6247;
  --hero-scrim: #17231c; --hero-ink: #fbf8f1; --hero-button-bg: #fbf8f1; --hero-button-ink: #2c6247;
  --block: #c8d5b9; --footer-bg: #17231c; --footer-ink: #fbf8f1;
  --shadow: 0 20px 40px -30px rgb(28 38 32 / 45%);
}
:root[data-palette="redline"][data-theme] {
  --bg: #ffffff; --surface: #f4f4f5; --surface-2: #e7e7ea; --ink: #18191d; --muted: #55575e; --line: #dfdfe3;
  --accent: #b3201b; --accent-ink: #ffffff; --ring: #b3201b;
  --hero-scrim: #18191d; --hero-ink: #ffffff; --hero-button-bg: #ffffff; --hero-button-ink: #b3201b;
  --block: #b3201b; --footer-bg: #18191d; --footer-ink: #ffffff;
  --shadow: 0 18px 40px -28px rgb(24 25 29 / 45%);
}
:root[data-palette="copper"][data-theme] {
  --bg: #fbf9f5; --surface: #f3ede4; --surface-2: #eae1d4; --ink: #2a201b; --muted: #685a50; --line: #e3d9cb;
  --accent: #984a22; --accent-ink: #ffffff; --ring: #984a22;
  --hero-scrim: #2a201b; --hero-ink: #fbf6ef; --hero-button-bg: #fbf6ef; --hero-button-ink: #984a22;
  --block: #dcb58f; --footer-bg: #2a201b; --footer-ink: #fbf6ef;
  --shadow: 0 20px 40px -30px rgb(42 32 27 / 45%);
}
:root[data-palette="nightshift"][data-theme] {
  --bg: #131518; --surface: #1b1e22; --surface-2: #24282d; --ink: #f2ede4; --muted: #b3aa9d; --line: #30353b;
  --accent: #d8a74e; --accent-ink: #131518; --ring: #d8a74e;
  --hero-scrim: #0b0c0e; --hero-ink: #f7f2e9; --hero-button-bg: #d8a74e; --hero-button-ink: #131518;
  --block: #d8a74e; --footer-bg: #0b0c0e; --footer-ink: #f2ede4;
  --shadow: 0 24px 48px -30px rgb(0 0 0 / 70%);
  color-scheme: dark;
}
:root[data-palette="blush"][data-theme] {
  --bg: #fcf7f4; --surface: #f6ece7; --surface-2: #efe0d9; --ink: #2b1c22; --muted: #6c5860; --line: #ead9d1;
  --accent: #952d53; --accent-ink: #ffffff; --ring: #952d53;
  --hero-scrim: #2b1c22; --hero-ink: #fff8f5; --hero-button-bg: #fff8f5; --hero-button-ink: #952d53;
  --block: #ecc3c4; --footer-bg: #2b1c22; --footer-ink: #fff8f5;
  --shadow: 0 24px 48px -32px rgb(80 30 50 / 40%);
}
:root[data-palette="espresso"][data-theme] {
  --bg: #fdf9f3; --surface: #f5ede1; --surface-2: #ede1d0; --ink: #2b1e15; --muted: #6a5a4c; --line: #e6dac8;
  --accent: #ab4325; --accent-ink: #ffffff; --ring: #ab4325;
  --hero-scrim: #2b1e15; --hero-ink: #fff9f1; --hero-button-bg: #f1b84a; --hero-button-ink: #2b1e15;
  --block: #f1b84a; --footer-bg: #2b1e15; --footer-ink: #fff9f1;
  --shadow: 0 20px 40px -30px rgb(43 30 21 / 45%);
}
:root[data-palette="sage"][data-theme] {
  --bg: #f8f8f4; --surface: #eef0e8; --surface-2: #e3e7dc; --ink: #1f2823; --muted: #59645d; --line: #dde2d6;
  --accent: #3c6650; --accent-ink: #ffffff; --ring: #3c6650;
  --hero-scrim: #1f2823; --hero-ink: #f8f8f4; --hero-button-bg: #f8f8f4; --hero-button-ink: #3c6650;
  --block: #c9d6c4; --footer-bg: #1f2823; --footer-ink: #f8f8f4;
  --shadow: 0 20px 40px -30px rgb(31 40 35 / 40%);
}
:root[data-palette="tide"][data-theme] {
  --bg: #ffffff; --surface: #eff6f7; --surface-2: #e0eef0; --ink: #0f2c33; --muted: #4b656c; --line: #d6e6e9;
  --accent: #0b6e80; --accent-ink: #ffffff; --ring: #0b6e80;
  --hero-scrim: #0f2c33; --hero-ink: #ffffff; --hero-button-bg: #ffffff; --hero-button-ink: #0b6e80;
  --block: #a7dade; --footer-bg: #0f2c33; --footer-ink: #ffffff;
  --shadow: 0 22px 44px -30px rgb(15 44 51 / 40%);
}
:root[data-palette="granite"][data-theme] {
  --bg: #ffffff; --surface: #f4f4f1; --surface-2: #e9e9e4; --ink: #111111; --muted: #555552; --line: #dcdcd6;
  --accent: #a3161a; --accent-ink: #ffffff; --ring: #a3161a;
  --hero-scrim: #111111; --hero-ink: #ffffff; --hero-button-bg: #ffffff; --hero-button-ink: #111111;
  --block: #a3161a; --footer-bg: #111111; --footer-ink: #ffffff;
  --shadow: 0 18px 40px -28px rgb(17 17 17 / 45%);
}
:root[data-palette="meadow"][data-theme] {
  --bg: #fbfaf4; --surface: #f2f0e4; --surface-2: #e8e5d3; --ink: #22281c; --muted: #5c6252; --line: #e2dfcc;
  --accent: #4a6620; --accent-ink: #ffffff; --ring: #4a6620;
  --hero-scrim: #1f2618; --hero-ink: #fbfaf4; --hero-button-bg: #e3c565; --hero-button-ink: #22281c;
  --block: #e3c565; --footer-bg: #1f2618; --footer-ink: #fbfaf4;
  --shadow: 0 20px 40px -30px rgb(34 40 28 / 45%);
}
:root[data-palette="ledger"][data-theme] {
  --bg: #fdfdfb; --surface: #f3f3ee; --surface-2: #e8e8e1; --ink: #1b2330; --muted: #566070; --line: #dfe0d8;
  --accent: #284a7c; --accent-ink: #ffffff; --ring: #284a7c;
  --hero-scrim: #1b2330; --hero-ink: #ffffff; --hero-button-bg: #ffffff; --hero-button-ink: #284a7c;
  --block: #c9b37a; --footer-bg: #1b2330; --footer-ink: #ffffff;
  --shadow: 0 20px 40px -30px rgb(27 35 48 / 45%);
}
:root[data-palette="evergreen"][data-theme] {
  --bg: #ffffff; --surface: #eff6f2; --surface-2: #e0ede6; --ink: #0f2a20; --muted: #4c6358; --line: #d5e6dc;
  --accent: #15724b; --accent-ink: #ffffff; --ring: #15724b;
  --hero-scrim: #0f2a20; --hero-ink: #ffffff; --hero-button-bg: #9fe0b8; --hero-button-ink: #0f2a20;
  --block: #9fe0b8; --footer-bg: #0f2a20; --footer-ink: #ffffff;
  --shadow: 0 22px 44px -30px rgb(15 42 32 / 40%);
}

/* 4. Shape: corner scale, button shape, card style. */
html[data-corners="square"] { --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; --chip-radius: 0px; }
html[data-corners="soft"] { --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --chip-radius: 6px; }
html[data-corners="round"] { --radius: 14px; --radius-sm: 10px; --radius-lg: 24px; --chip-radius: 999px; }
html[data-buttons="square"] { --button-radius: 0px; }
html[data-buttons="rounded"] { --button-radius: 8px; }
html[data-buttons="pill"] { --button-radius: 999px; }
html[data-rhythm="rules"] { --card-bg: var(--surface); --space-section: clamp(3rem, 6vw, 4.75rem); }

.button,
.header-cta {
  border-radius: var(--button-radius);
}

.area-list li {
  border-radius: var(--chip-radius);
}

html[data-cards="flat"][data-services="cards"] .service-grid li,
html[data-cards="flat"] .testimonial-grid li,
html[data-cards="flat"] .contact-form {
  border-color: transparent;
  background: var(--card-bg);
  box-shadow: none;
}

html[data-cards="border"][data-services="cards"] .service-grid li,
html[data-cards="border"] .testimonial-grid li,
html[data-cards="border"] .contact-form {
  border-color: var(--line);
  background: var(--bg);
  box-shadow: none;
}

html[data-cards="shadow"][data-services="cards"] .service-grid li,
html[data-cards="shadow"] .testimonial-grid li,
html[data-cards="shadow"] .contact-form {
  border-color: transparent;
  background: var(--bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%), var(--shadow);
}

html[data-cards] .service-grid li:hover {
  transform: none;
}

/* 5. Type: every direction sets its headings, labels and text from the pair above; small print
   is 15px or more, labels 12px or more, on phones as on desktops. */
html[data-font] h1,
html[data-font] h2 {
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  overflow-wrap: break-word;
  font-synthesis: none;
}

html[data-font] h1 {
  font-size: calc(clamp(2.3rem, 5vw, 3.8rem) * var(--heading-scale));
}

html[data-font] h2 {
  font-size: calc(clamp(1.8rem, 3.4vw, 2.6rem) * var(--heading-scale));
}

/* Banner headlines by layout: the business name, often long, at a size its column carries. */
html[data-font][data-hero] .hero h1 {
  font-size: calc(clamp(2.3rem, 4.6vw, 3.6rem) * var(--heading-scale));
}

html[data-font][data-hero="overlay"] .hero h1 {
  font-size: calc(clamp(2.45rem, 5.4vw, 4.2rem) * var(--heading-scale));
}

html[data-font][data-hero="stacked"] .hero h1 {
  font-size: calc(clamp(2.45rem, 5.8vw, 4.4rem) * var(--heading-scale));
}

html[data-font][data-hero="panel"] .hero h1 {
  font-size: calc(clamp(2.3rem, 4vw, 3.4rem) * var(--heading-scale));
}

/* Capitals carry more weight: a size down, whatever the layout (long names run to three lines). */
html[data-font][data-headings="caps"][data-hero] .hero h1 {
  font-size: calc(clamp(2.1rem, 3.9vw, 3.2rem) * var(--heading-scale));
}

/* Narrow phones: the name, often long and sometimes in capitals, keeps to the screen width. */
@media (max-width: 420px) {
  html[data-font][data-hero] .hero h1 {
    font-size: calc(min(2.3rem, 9.2vw) * var(--heading-scale));
  }

  html[data-font][data-headings="caps"][data-hero] .hero h1 {
    font-size: calc(min(2.1rem, 8.2vw) * var(--heading-scale));
  }
}

html[data-font] h3 {
  font-family: var(--font-h3);
  font-weight: var(--h3-weight);
  font-synthesis: none;
}

html[data-font] .brand-name {
  font-weight: var(--heading-weight);
  font-synthesis: none;
}

html[data-font] .brand-meta,
html[data-font] .eyebrow,
html[data-font] .contact-details > li > span,
html[data-font] :is(.footer-contact, .footer-hours) h3 {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
}

html[data-font] .header-cta,
html[data-font] .site-header nav,
html[data-font] .footer-brand p,
html[data-font] :is(.footer-contact, .footer-hours) :is(a, p, ul),
html[data-font] .contact-form label,
html[data-font] .form-hint,
html[data-font] .form-status,
html[data-font] .form-note,
html[data-font] .form-notice,
html[data-font] .attribution,
html[data-font] .footer-bottom {
  font-size: 0.9375rem;
}

html[data-font] .button {
  font-size: 1rem;
}

/* Headings in capitals (sturdy directions), or plain with no label above the section headings. */
html[data-headings="caps"] :is(h1, h2) {
  text-transform: uppercase;
  letter-spacing: max(var(--heading-tracking), -0.01em);
}

html[data-headings="caps"] .button,
html[data-headings="caps"] .header-cta {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-headings="plain"] :is(.section-head, .about-copy, .contact-copy, .areas) > .eyebrow {
  display: none;
}

html[data-headings="plain"] .hero .eyebrow {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9375rem;
  font-weight: 600;
}

html[data-headings="plain"] .hero .eyebrow::before {
  width: 1.1rem;
  height: 2px;
}

/* 6. Section rhythm. `bands` is theme.css's own (services, reviews and contact on a tint). */
html[data-rhythm="rules"] main > :is(.services, .testimonials, .contact) {
  border-image: none;
}

html[data-rhythm="rules"] main > section:not(.hero) + section {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--container) - 2 * var(--gutter)));
  padding-inline: 0;
  padding-top: var(--space-section);
  border-top: 1px solid var(--line);
}

html[data-rhythm="rules"] main > .hero + section {
  padding-top: var(--space-section);
}

html[data-rhythm="contrast"] main > .contact {
  border-image: conic-gradient(var(--hero-scrim) 0 0) fill 0 / / 0 100vw;
  color: var(--hero-ink);
}

html[data-rhythm="contrast"] main > .contact h2 {
  color: var(--hero-ink);
}

html[data-rhythm="contrast"] main > .contact .eyebrow {
  color: var(--hero-button-bg);
}

html[data-rhythm="contrast"] main > .contact .contact-details > li {
  border-bottom-color: color-mix(in srgb, var(--hero-ink) 22%, transparent);
}

html[data-rhythm="contrast"] main > .contact .contact-details > li > span {
  color: color-mix(in srgb, var(--hero-ink) 78%, transparent);
}

html[data-rhythm="contrast"] main > .contact .contact-details a:hover {
  color: var(--hero-button-bg);
}

html[data-rhythm="contrast"] main > .contact > .form-note {
  color: color-mix(in srgb, var(--hero-ink) 82%, transparent);
}

html[data-rhythm="contrast"] main > .contact .contact-form {
  color: var(--ink);
}

/* 7. Banners. A light banner (framed, stacked) sits on the page colour; the panel puts the copy on
   the deep banner colour. The copy never goes under the photo on phones (#82): the photo comes
   first in its own box (framed, panel) or after the copy (stacked). */
html:is([data-hero="framed"], [data-hero="stacked"]) main > .hero-overlay {
  background: var(--bg);
  color: var(--ink);
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .hero-media::after,
html[data-hero="panel"] .hero-overlay .hero-media::after {
  content: none;
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay h1 {
  color: var(--ink);
  text-shadow: none;
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .eyebrow {
  color: var(--accent);
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .lede {
  color: var(--muted);
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .button-ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

html:is([data-hero="framed"], [data-hero="stacked"]) .hero-overlay .button-ghost:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

/* Framed: the photo in a frame on an offset colour block. */
html[data-hero="framed"] .hero-overlay .hero-media {
  margin: clamp(1rem, 4vw, 1.5rem) calc(var(--gutter) + 0.85rem) 0.85rem var(--gutter);
  border-radius: var(--radius-lg);
  box-shadow: 0.85rem 0.85rem 0 0 var(--block);
  overflow: hidden;
}

html[data-hero="framed"] .hero-overlay .hero-copy {
  padding-top: clamp(1.75rem, 6vw, 2.5rem);
}

/* Stacked: the headline first, then a wide photo band. */
html[data-hero="stacked"] main > .hero-overlay {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) 0;
}

html[data-hero="stacked"] .hero-overlay .hero-media {
  order: 0;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

html[data-hero="stacked"] .hero-overlay .hero-copy {
  padding: 0;
  max-width: none;
}

html[data-hero="stacked"] .hero-overlay .hero-copy > * {
  max-width: 46rem;
}

/* Panel: the copy on a solid colour panel, a band of the block colour under it. */
html[data-hero="panel"] main > .hero-overlay {
  border-bottom: 6px solid var(--block);
}

html[data-hero="panel"] .hero-overlay h1 {
  text-shadow: none;
}

@media (min-width: 720px) {
  /* Framed, stacked and panel keep the photo in its own box, not behind the copy. */
  html:is([data-hero="framed"], [data-hero="stacked"], [data-hero="panel"]) .hero-overlay .hero-media {
    position: relative;
    inset: auto;
    z-index: auto;
  }

  html:is([data-hero="framed"], [data-hero="stacked"], [data-hero="panel"]) .hero-overlay .hero-copy {
    min-height: 0;
  }

  html[data-hero="stacked"] .hero-overlay .hero-media img {
    aspect-ratio: 21 / 9;
  }

  html[data-hero="panel"] .hero-overlay .hero-media img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 880px) {
  html[data-hero="framed"] main > .hero-overlay {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
    overflow: visible;
  }

  html[data-hero="framed"] .hero-overlay .hero-media {
    order: 0;
    margin: 0 1.25rem 1.25rem 0;
    box-shadow: 1.25rem 1.25rem 0 0 var(--block);
  }

  html[data-hero="framed"] .hero-overlay .hero-media img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  html[data-hero="framed"] .hero-overlay .hero-copy {
    margin: 0;
    padding: 0;
  }

  html[data-hero="stacked"] .hero-overlay .hero-copy {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  html[data-hero="stacked"] .hero-overlay .hero-copy > .eyebrow {
    grid-column: 1 / -1;
  }

  html[data-hero="stacked"] .hero-overlay .hero-copy > h1 {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  html[data-hero="stacked"] .hero-overlay .hero-copy > .lede {
    grid-column: 2;
    grid-row: 2;
    margin: 0.4rem 0 0;
  }

  html[data-hero="stacked"] .hero-overlay .hero-copy > .hero-actions {
    grid-column: 2;
    grid-row: 3;
    margin-top: 1.4rem;
  }

  html[data-hero="panel"] main > .hero-overlay {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  html[data-hero="panel"] .hero-overlay .hero-media {
    order: 0;
    min-height: 100%;
  }

  html[data-hero="panel"] .hero-overlay .hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  html[data-hero="panel"] .hero-overlay .hero-copy {
    align-content: center;
    min-height: clamp(30rem, 66vh, 40rem);
    max-width: none;
    margin: 0;
    padding: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }

  html[data-hero="panel"] .hero-overlay .hero-copy > * {
    max-width: 34rem;
  }
}

/* 8. Services. Numbered columns: a large figure over a rule. Feature rows: number, name and
   description on one ruled line. */
html[data-services="numbered"] .service-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

html[data-services="numbered"] .service-grid li {
  gap: 0.45rem;
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-services="numbered"] .service-grid li:hover {
  transform: none;
  box-shadow: none;
}

html[data-services="numbered"] .service-index {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
  line-height: 1;
}

html[data-services="numbered"] .service-grid h3 {
  font-size: 1.2rem;
}

html[data-services="rows"] .service-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

html[data-services="rows"] .service-grid li {
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.35rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-services="rows"] .service-grid li:hover {
  transform: none;
  box-shadow: none;
}

html[data-services="rows"] .service-index {
  grid-column: 1;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

html[data-services="rows"] .service-grid h3 {
  grid-column: 2;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

html[data-services="rows"] .service-grid p {
  grid-column: 2;
}

@media (min-width: 720px) {
  html[data-services="rows"] .service-grid li {
    grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1.3fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: 1.7rem 0;
  }

  html[data-services="rows"] .service-grid p {
    grid-column: 3;
    grid-row: 1;
  }
}

/* 9. About: photo left (theme.css), right, or a wide photo over the copy and its proof. */
@media (min-width: 880px) {
  html[data-about="right"] .about:has(.about-media) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  html[data-about="right"] .about-media {
    order: 0;
  }

  html[data-about="wide"] .about:has(.about-media) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  html[data-about="wide"] .about-media {
    order: -1;
  }

  html[data-about="wide"] .about-media img {
    aspect-ratio: 21 / 9;
  }

  html[data-about="wide"] .about-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    max-width: none;
  }

  html[data-about="wide"] .about-copy > .eyebrow {
    grid-area: 1 / 1;
  }

  html[data-about="wide"] .about-copy > h2 {
    grid-area: 2 / 1;
  }

  html[data-about="wide"] .about-copy > .about-body {
    grid-area: 1 / 2 / 3 / 3;
    margin-top: 0;
  }

  html[data-about="wide"] .about-copy > .proof {
    grid-area: 3 / 2;
  }
}

/* 10. Footer: on the palette's deep colour (ink), on a light tint (paper), or centred. */
html[data-footer] .site-footer {
  background: var(--footer-bg);
  color: color-mix(in srgb, var(--footer-ink) 84%, transparent);
}

html[data-footer] :is(.footer-brand strong, .footer-contact h3, .footer-hours h3, .footer-contact a:hover) {
  color: var(--footer-ink);
}

html[data-footer] .footer-brand strong {
  font-weight: var(--heading-weight);
  font-synthesis: none;
}

html[data-footer] .footer-hours span {
  color: color-mix(in srgb, var(--footer-ink) 72%, transparent);
}

html[data-footer] .social-links a {
  border-color: color-mix(in srgb, var(--footer-ink) 28%, transparent);
}

html[data-footer] .footer-bottom {
  border-top-color: color-mix(in srgb, var(--footer-ink) 18%, transparent);
}

:root[data-footer="paper"][data-palette][data-theme] {
  --footer-bg: var(--surface);
  --footer-ink: var(--ink);
}

html[data-footer="paper"] .site-footer {
  color: var(--muted);
  border-top: 1px solid var(--line);
}

html[data-footer="paper"] .footer-hours span {
  color: var(--muted);
}

html[data-footer="centered"] .footer-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

html[data-footer="centered"] .footer-brand strong {
  font-size: 1.6rem;
}

html[data-footer="centered"] .footer-hours li {
  justify-content: center;
}

html[data-footer="centered"] .social-links {
  justify-content: center;
}

html[data-footer="centered"] .footer-bottom {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 11. Phones and touch screens: 44px targets for everything tappable, no sideways scroll. */
html[data-font] .brand {
  justify-content: center;
  min-height: 44px;
}

html[data-font] .header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (hover: none) and (pointer: coarse) {
  html[data-font] .site-header nav a,
  html[data-font] .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}