/* Hallmark · shape: Bento Grid · genre: editorial · theme: Ink (deal 1/3, seed garage-door-repair-installation-ff81·65f8b290·2026-11-07·r0) · job: book · draw: 45019a
 * hero: Stage · nav: slab · footer: colophon block · imagery: photographs, the owner's own 1 (carried over from the live site), muted · signature: the week of opening hours under the hero's actions, every day 24 hours, today marked open by the clock · ink: paper
 * axes: light/grotesk-sans/chromatic-red · posture: restrained · brand: Advanced Door Pros (spec 2026-11-07), the logo red replaces Ink's teal · redesign: full, rebuilt from the live page · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V5 · weakest: S, one photograph only (the library holds no garage doors); the hours, the promises and the counties are set in type from the owner's own facts instead of borrowed pictures */
/* Hallmark · waive 22 · ink and greys at zero chroma · the Ink notice is printed in plain black, like the black of the Advanced Door Pros logo */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 unresolved (the photo is a showroom door, not the crew's work: needs the owner's own picture in the hero slot) */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: the old page let a scroller read all four services; the switcher keeps one per screen (58), and #repair, #installation, #opener and #commercial links open each tab */
/* Hallmark · dropped "Five-Star Service Quality" and "the leading garage door service provider in Maryland" · 46a and 19 name a rating and a superlative the live page never sources */
/* Hallmark · dropped the live page's long service paragraphs · 58 holds a screen to about 80 words; every fact in them is kept, condensed into the switcher panels */
/* Hallmark · owner request 2026-11-08: more colour · the logo red now fills the primary actions, the lead tiles, today in the week strip and the header rule; warm cream bands; the owner's own job photographs replace the stock hero and appear on every service page, in full colour */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper-2); color: var(--color-ink);
  font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); }

.tag {
  display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.tag--open { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }

.skip {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input);
  background: var(--color-ink); color: var(--color-paper); font-weight: 600;
}
.skip:focus-visible { top: var(--space-md); }

/* ---------- the slab ---------- */
.slab { position: relative; z-index: var(--z-dropdown); background: var(--color-paper-2); border-bottom: 3px solid var(--color-ink); }
.slab__row { display: flex; align-items: center; gap: var(--space-xl); min-height: calc(var(--nav-h) - 3px); }
.slab__logo { display: inline-flex; flex-shrink: 0; border-radius: var(--radius-input); }
.slab__logo img { height: 48px; width: auto; }
.slab__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.slab__nav { display: flex; gap: var(--space-lg); margin-right: auto; }
.slab__nav a, .slab__tel, .slab__drawer a {
  font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 4px;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.slab__nav a:hover, .slab__tel:hover, .slab__drawer a:hover { text-decoration-color: var(--color-accent); }
.slab__nav a:active, .slab__tel:active, .slab__drawer a:active { color: var(--color-ink-2); }
.slab__nav a:focus-visible, .slab__tel:focus-visible, .slab__drawer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.slab__act { display: flex; align-items: center; gap: var(--space-lg); }
.slab__tel { font-size: var(--text-lead); font-variant-numeric: tabular-nums; }
.slab__book { min-height: 44px; padding: 0 var(--space-md); }

.slab__menu { display: none; }
.slab__menu summary {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper); font-weight: 600; list-style: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.slab__menu summary::-webkit-details-marker { display: none; }
.slab__menu summary:hover { background: var(--color-paper-3); }
.slab__menu summary:active { background: var(--color-paper-3); }
.slab__menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slab__menu[open] summary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.slab__drawer {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: var(--space-xs) var(--gutter) var(--space-lg);
  background: var(--color-paper); box-shadow: var(--shadow-card);
}
.slab__menu:not([open]) .slab__drawer { display: none; }
.slab__drawer a { display: flex; align-items: center; min-height: 52px; border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-lg); }

/* ---------- hero: Stage ---------- */
.hero { display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-2xl) var(--space-3xl); }
/* the text column is sized to the head's widest line, "weekends and", so the picture stands one gap from the words */
.hero__grid { display: grid; grid-template-columns: minmax(0, 37rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; justify-items: start; gap: var(--space-lg); }
.hero h1 { max-width: none; line-height: 1; }
.hero .lead { max-width: 36ch; color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.hero__visual { align-self: stretch; display: grid; margin: 0; min-width: 0; }
.photo { margin: 0; border-radius: var(--radius-card); }
.photo > img { outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
/* the picture takes the height of the words beside it, head to week strip */
.hero__photo { height: 100%; min-height: 460px; }
/* the dusk sky and the red timber are turned down further, so the red of today's cell stays the one colour that means open */
.hero__photo > img { object-position: 8% 50%; filter: saturate(0.4) contrast(0.97); }
/* the hero photo arrives as <picture> (AVIF, WebP, then JPEG): the picture steps aside so its img fills the slot like a bare one */
[data-slot] > picture { display: contents; }
[data-slot] > picture > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.hero__photo > picture > img { object-position: 8% 50%; filter: saturate(0.4) contrast(0.97); }

/* the week strip: the live site's opening hours, as a row under the picture */
.week { justify-self: stretch; }
.week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.week__days li { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-xs); border-left: var(--rule-hair) solid var(--color-rule); line-height: 1.2; }
.week__days li:first-child { border-left: 0; }
.week__d { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; }
.week__h { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.week__days li.is-today { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); border-left-color: transparent; }
.week__days li.is-today + li { border-left-color: transparent; }
.week__days li.is-today .week__h { color: var(--color-accent-soft-ink); }

/* ---------- what every call comes with: the bento ---------- */
.promises { padding-block: var(--space-3xl) var(--section-gap); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md);
  grid-column: 8 / span 5; padding: var(--space-xl);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
}
.tile h3 { font-size: var(--text-2xl); line-height: 1.1; }
.tile p { max-width: 36ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; }
.tile--lead { grid-column: 1 / span 7; grid-row: 1 / span 2; background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.tile--lead p { color: var(--color-on-ink-muted); font-size: var(--text-lead); }
.tile .tile__big { max-width: none; font-size: var(--text-display); line-height: 1; }
.tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.tile--wide h3 { font-size: var(--text-section); max-width: 14ch; }
.tile--wide p { font-size: var(--text-lead); max-width: 34ch; }

/* ---------- the four jobs: a switcher on a paper band ---------- */
.services { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.services__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
.seg [role="tab"] {
  min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: 6px;
  background: transparent; color: var(--color-ink); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.seg [role="tab"]:hover { background: var(--color-paper-3); }
.seg [role="tab"]:active { background: var(--color-rule); }
.seg [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg [role="tab"][aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.seg [role="tab"]:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .seg { display: none; }

.panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; min-height: 320px; }
html:not(.js) .panel + .panel { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.panel__text { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-md); }
.panel__text h3 { font-size: var(--text-2xl); line-height: 1.1; max-width: 18ch; }
.panel__text p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; }
.panel__link, .about__link {
  font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.22em; border-radius: 4px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.panel__link:hover, .about__link:hover { text-decoration-color: var(--color-accent); }
.panel__link:active, .about__link:active { color: var(--color-ink-2); }
.panel__link:focus-visible, .about__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.panel__list { grid-column: 7 / -1; }
.ruled { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled span { font-size: var(--text-lead); line-height: 1.4; }
.ruled--names li { grid-template-columns: minmax(0, 1fr); }
.ruled b { text-wrap: balance; }
.ruled b { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ruled span { color: var(--color-ink-2); }

/* ---------- about: one statement ---------- */
.about { padding-block: var(--section-gap-l) var(--section-gap); }
.statement { max-width: 30ch; font: 700 var(--text-display-s)/1.05 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.about__link { display: inline-block; margin-top: var(--space-xl); font-size: var(--text-lead); }

/* ---------- the close: area, number and booking on an ink band ---------- */
.close { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-on-ink); }
.close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.close__call { grid-column: 1 / span 6; display: grid; justify-items: start; gap: var(--space-lg); }
.close__call h2 { font-size: var(--text-section); max-width: 18ch; }
.close__tel {
  font: 700 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--color-on-ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: var(--color-rule-on-ink);
  border-radius: 4px; transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.close__tel:hover { text-decoration-color: var(--color-accent); }
.close__tel:active { color: var(--color-on-ink-muted); }
.close__tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.close__addr { color: var(--color-on-ink-muted); font-size: var(--text-lead); }
.btn--on-ink { background: transparent; border-color: var(--color-rule-on-ink); color: var(--color-on-ink); }
.btn--on-ink:hover { background: var(--color-ink-raised); border-color: var(--color-on-ink-muted); }
.close__area { grid-column: 7 / -1; }
.counties { columns: 2; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-on-ink); }
.counties li { break-inside: avoid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-on-ink); font-size: var(--text-lg); font-weight: 600; }

/* ---------- colophon ---------- */
.colophon { padding-block: var(--space-2xl); }
.colophon__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: start; }
.colophon__logo { grid-column: 1 / span 2; height: 56px; width: auto; }
.colophon__text { grid-column: 3 / span 5; max-width: 52ch; color: var(--color-ink-2); }
.colophon__links { grid-column: 9 / -1; display: grid; gap: var(--space-xs); }
.colophon__links a { justify-self: start; font-weight: 600; text-decoration: none; border-radius: 4px; text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.colophon__links a:hover { text-decoration-color: var(--color-accent); }
.colophon__links a:active { color: var(--color-ink-2); }
.colophon__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.colophon__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- small screens ---------- */
@media (max-width: 75rem) {
  .slab__nav { display: none; }
  .slab__act { margin-left: auto; }
}
@media (max-width: 60rem) {
  .slab__row { gap: var(--space-md); }
  .slab__act .tag, .slab__book { display: none; }
  .slab__tel { font-size: var(--text-md); }
  .slab__menu { display: block; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .tile, .tile--lead, .tile--wide { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .tile--lead { min-height: 320px; }
  .tile--wide { flex-direction: column; align-items: start; }
  .panel__text, .panel__list, .close__call, .close__area { grid-column: 1 / -1; }
  .panel { row-gap: var(--space-xl); min-height: 0; }
  .close__grid { row-gap: var(--space-2xl); }
  .colophon__logo, .colophon__text, .colophon__links { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .slab__logo img { height: 40px; }
  .hero__actions { gap: var(--space-xs); }
  .hero__actions .btn { padding: 0 var(--space-md); }
  .week__days li { padding-inline: var(--space-2xs); }
  .week__d { font-size: var(--text-md); }
  .week__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week__days li:nth-child(4n + 1) { border-left: 0; }
  .week__days li:nth-child(n + 5) { border-top: var(--rule-hair) solid var(--color-rule); }
  .week__h { font-size: var(--text-xs); }
  .tile { padding: var(--space-lg); }
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ruled li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .counties { columns: 1; }
  .close__tel { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .slab__menu summary, .seg [role="tab"] { transition: background-color var(--dur-short) linear; }
  .btn:active { transform: none; }
}

/* ---------- the slab's Services item: a short list of the six service pages ---------- */
.slab__nav { align-items: center; }
.slab__sub { position: relative; }
.slab__sub summary {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; list-style: none; cursor: pointer; border-radius: 4px;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.slab__sub summary::-webkit-details-marker { display: none; }
.slab__sub summary:hover, .slab__sub[open] summary { text-decoration-color: var(--color-accent); }
.slab__sub summary:active { color: var(--color-ink-2); }
.slab__sub summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.slab__subpanel {
  position: absolute; left: calc(-1 * var(--space-lg)); top: calc(100% + var(--space-sm)); z-index: var(--z-dropdown);
  display: grid; min-width: 19rem; margin: 0; padding: var(--space-xs) var(--space-lg); list-style: none;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.slab__subpanel li + li { border-top: var(--rule-hair) solid var(--color-rule-2); }
.slab__nav .slab__subpanel a { display: flex; align-items: center; min-height: 48px; }
.slab__nav a[aria-current="page"], .slab__drawer a[aria-current="page"] { text-decoration-color: var(--color-ink); }

/* ---------- service pages: type-led, built from the home page's own parts ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-muted); }
.crumbs a { color: var(--color-ink-2); font-weight: 600; text-decoration-thickness: 1px; border-radius: 4px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.crumbs a:hover { text-decoration-color: var(--color-accent); }
.crumbs a:active { color: var(--color-ink); }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* the page head fills the first screen like the home hero: the promise on the left, the facts that answer "can you come?" ruled on the right, the week of hours across the foot */
.page-head { display: grid; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-xl) var(--space-2xl); }
.page-head > .container { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.page-head__grid { align-self: stretch; align-content: space-between; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: end; margin-top: var(--space-xl); }
.page-head__text { grid-column: 1 / span 7; display: grid; justify-items: start; gap: var(--space-lg); }
.page-head h1 { max-width: 14ch; font-size: var(--text-display); line-height: 1; }
.page-head .lead { max-width: 40ch; color: var(--color-ink-2); }
.page-head__facts { grid-column: 9 / -1; }
.page-head .week { grid-column: 1 / -1; }

/* a section: its head on the left five columns, its body on the right six, like the switcher's panels */
.part { padding-block: var(--section-gap); }
.part--band { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.part__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.part__head { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-md); }
.part__head h2 { font-size: var(--text-section); max-width: 14ch; }
.part__head p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; }
.part__body { grid-column: 7 / -1; display: grid; gap: var(--space-xl); }
.part__body > p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 44ch; }
.ruled a { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-decoration-thickness: 2px; text-underline-offset: 0.22em; border-radius: 4px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.ruled a:hover { text-decoration-color: var(--color-accent); }
.ruled a:active { color: var(--color-ink-2); }
.ruled a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* what every call comes with: three tiles from the home page's bento, in one row */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.trio .tile { grid-column: auto; }
.trio .tile h3 { font-size: var(--text-xl); }
.trio .tile p { font-size: var(--text-md); }
.trio .tile--lead { grid-row: auto; }
.trio .tile--lead h3 { font-size: var(--text-xl); }

@media (max-width: 60rem) {
  .page-head__text, .page-head__facts, .part__head, .part__body { grid-column: 1 / -1; }
  .page-head { min-height: 0; padding-block: var(--space-lg) var(--space-2xl); }
  .page-head__grid { margin-top: var(--space-xl); gap: var(--space-xl) var(--gap-columns); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio .tile--lead { min-height: 0; }
}

/* the home page's links out to the service pages: a second link beside each panel's booking link, one on the lead tile */
.panel__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.tile__link {
  display: table; margin-top: var(--space-md); color: var(--color-on-ink); font-weight: 600;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--color-rule-on-ink);
  border-radius: 4px; transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.tile__link:hover { text-decoration-color: var(--color-accent); }
.tile__link:active { color: var(--color-on-ink-muted); }
.tile__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- colour, by the owner's request: the logo red as a fill, warm bands, photographs in full colour ---------- */
.slab { border-bottom-color: var(--color-brand); }
.btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.btn--primary:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); }
.btn--on-ink { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.btn--on-ink:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); }
.btn--on-ink:focus-visible { outline-color: var(--color-on-ink); }
.tile--lead { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.tile--lead p, .trio .tile--lead p { color: var(--color-on-brand); }
.tile--lead .tile__link { color: var(--color-on-brand); text-decoration-color: var(--color-on-brand-muted); }
.tile--lead .tile__link:hover { text-decoration-color: var(--color-on-brand); }
.tile--lead a:focus-visible, .tile--lead .tile__link:focus-visible { outline-color: var(--color-on-brand); }
.tile--lead a { color: var(--color-on-brand); }
.seg [role="tab"][aria-selected="true"] { background: var(--color-brand); color: var(--color-on-brand); }
.week__days { border-top-color: var(--color-brand); }
.week__days li.is-today, .week__days li.is-today .week__h { background: var(--color-brand); color: var(--color-on-brand); }
.services, .part--band { background: var(--color-warm); border-color: var(--color-warm-rule); }
.close { border-top: 6px solid var(--color-brand); }
.close__tel { text-decoration-color: var(--color-brand); }
.counties { border-top-color: var(--color-brand); }
[data-slot] > img, [data-slot] > picture > img, .hero__photo > img, .hero__photo > picture > img { filter: none; }
.hero__photo > picture > img { object-position: 50% 60%; }

/* a job photograph: beside a section's head on the service pages, three across on the home page */
.shot { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; width: 100%; min-width: 0; }
.shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-3); }
.shot--tall img { aspect-ratio: 4 / 5; }
.shot figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.work { padding-block: var(--section-gap); }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.work__grid .shot { margin: 0; }

/* the towns: a ruled list of the city pages, two columns */
.towns { columns: 2; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-brand); }
.towns li { break-inside: avoid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.towns a { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--color-rule); border-radius: 4px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.towns a:hover { text-decoration-color: var(--color-brand); }
.towns a:active { color: var(--color-ink-2); }
.towns a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

@media (max-width: 60rem) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .shot--tall img { aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) { .towns { columns: 1; } }

/* the hours read "7am to 9pm": in the narrow hero columns they wrap onto two lines */
.week__h { white-space: normal; }

/* the owner's nine Google reviews, copied word for word (one opening trimmed, marked with an ellipsis): three on the home page, all nine on /reviews/ */
.reviews { padding-block: var(--section-gap); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-2xl); }
.reviews__link {
  font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--color-brand); border-radius: 4px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.reviews__link:hover { text-decoration-color: var(--color-ink); }
.reviews__link:active { color: var(--color-ink-2); }
.reviews__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
/* the reviews page: one review a row, in large type, between rules */
.quotes { display: grid; gap: var(--space-2xl); max-width: 68rem; margin: 0; padding: 0; list-style: none; }
.quotes .review { padding: var(--space-2xl); }
.quotes .review__text p { font-size: var(--text-2xl); line-height: 1.35; letter-spacing: -0.015em; }
.review { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); padding: var(--space-xl); background: var(--color-warm); border: var(--rule-hair) solid var(--color-warm-rule); border-radius: var(--radius-card); }
.review__stars { color: var(--color-brand); font-size: var(--text-lg); line-height: 1; }
.review__text { margin: 0; }
.review__text p { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
.review__by { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }

/* the map at the foot of the home page: the Google Business Profile listing, loaded only when scrolled to */
.find { padding-block: var(--section-gap-s); }
.find__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.find__text { grid-column: 1 / span 4; display: grid; justify-items: start; gap: var(--space-md); }
.find__text p { font-size: var(--text-lead); color: var(--color-ink-2); }
.find__map { grid-column: 5 / -1; width: 100%; height: 440px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
@media (max-width: 60rem) {
  .find__text, .find__map { grid-column: 1 / -1; }
  .find__map { height: 360px; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .quotes .review { padding: var(--space-lg); }
  .quotes .review__text p { font-size: var(--text-lg); }
}