/* ==========================================================================
   Fenwick & Vale - Painting & Decorating
   Design system. One stylesheet, no framework, no build step.
   1 Tokens . 2 Reset . 3 Typography . 4 Layout . 5 Components
   6 Header . 7 Hero . 8 Sections . 9 Footer . 10 Motion/Print
   ========================================================================== */

/* --- 0. Fonts -------------------------------------------------------------
   The @font-face blocks are NOT here. They are generated into theme.css beside
   this file, from the pairing the client chose - see scripts/lib/themes.mjs -
   so that only the faces actually in use are declared and only those are ever
   fetched. Every build writes a theme.css, so there is no state in which this
   stylesheet is loaded without one.

   Self-hosted rather than loaded from Google. Three reasons, in order: it
   removes two cross-origin connections from the critical path; it removes a
   third-party dependency from a site we hand to a client; and it stops every
   visitor's IP being sent to Google, which EU regulators have taken a dim view
   of. Every file is the latin-subset woff2 Google serves, all of them SIL OFL
   and free to redistribute - see LICENSES.md.

   The unicode-range that goes with them is a single constant in themes.mjs,
   because getting it wrong is silent. All three faces here once carried the
   VIETNAMESE range while the files are byte-for-byte Google's LATIN subsets,
   so no @font-face matched an English page: every site built here downloaded
   115 kB of fonts and then rendered in Iowan Old Style/Georgia and the system
   sans. Nothing errors, the CSS validates, the page is just quietly not the
   design. document.fonts.check() cannot see it either - it returns true when
   NO face matches, because then there is nothing left to load. Measure a
   rendered string width against a deliberately different fallback instead.
   -------------------------------------------------------------------------- */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Palette: warm plaster + clay. Every text pair below is >= 4.5:1 on paper. */
  --paper:      #FBF9F5;   /* page ground                                    */
  --surface:    #F3EEE5;   /* subtle panels, alternating bands               */
  --surface-2:  #EAE3D6;   /* deeper panel, image placeholder ground         */
  --ink:        #16150F;   /* headings, primary text        17.4:1 on paper  */
  --ink-2:      #55503F;   /* body copy                      7.6:1 on paper  */
  --ink-3:      #736C5C;   /* meta, captions                 5.4:1 on paper  */
  --line:       #E1DACC;   /* hairlines                                      */
  --line-2:     #CFC5B2;   /* stronger hairlines                             */
  --accent:     #9C4221;   /* clay - CTAs, links             6.4:1 on paper  */
  --accent-dk:  #7A3319;   /* hover                                          */
  --accent-lt:  #F6E9E1;   /* accent wash                                    */
  --on-accent:  #FFF8F4;   /* text on clay                   6.9:1 on clay   */
  /* Type on the dark bands - the ink sections, the CTA band, the footer. These
     were literal warm greys, which is invisible until the palette stops being
     warm: a navy site with brown hairlines and brown footer text. Every value
     a palette has to move is a token, or theme.css can only ever change half
     the page. --ink-rgb is the same colour again as three numbers, because a
     shadow and a scrim need it inside rgba(). */
  --on-ink:     #C9C3B4;   /* body text on ink               8.0:1 on ink    */
  --on-ink-hi:  #D8D2C4;   /* footer links, lightbox caption                 */
  --on-ink-mid: #A9A395;   /* footer body                    5.4:1 on ink    */
  --on-ink-low: #8C8678;   /* eyebrows, credits              3.8:1 - meta    */
  --accent-ink: #D98A5F;   /* the accent, lifted to read on ink              */
  --ink-rgb:    22,21,15;  /* --ink again, for rgba() shadows and scrims     */

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Upright or italic headings - the client's choice, set in theme.css. The
     -em pair is the opposite of whichever is chosen, so the accented word in
     the hero heading stays distinct either way rather than disappearing into
     an italic line. */
  --display-style: normal;
  --display-style-em: italic;
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.40vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.70rem + 2.50vw, 3.75rem);
  --step-5:  clamp(2.60rem, 1.85rem + 3.60vw, 4.85rem);

  /* Space - 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Structure */
  --container: 74rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 9vw, 7.5rem);
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(var(--ink-rgb),.04), 0 8px 24px -12px rgba(var(--ink-rgb),.14);
  --shadow-lg: 0 2px 4px rgba(var(--ink-rgb),.05), 0 24px 48px -20px rgba(var(--ink-rgb),.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* --- 3. Typography ------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display); font-style: var(--display-style);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.18; }
h4 { font-size: var(--step-1); line-height: 1.25; }
p  { text-wrap: pretty; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }
.muted { color: var(--ink-3); }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dk); }

/* Editorial section label: "01 - Services" */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: ""; width: clamp(1.5rem, 4vw, 3rem); height: 1px;
  background: var(--line-2); flex: none;
}
/* Numbered in CSS, not in the markup: a section can hide itself (no
   testimonials is the default state, not the exception) and a hardcoded 05
   would leave the running order at 04, 06. A counter renumbers whatever is
   actually in the DOM. */
body { counter-reset: section; }
.eyebrow__num { color: var(--accent); font-variant-numeric: tabular-nums; }
/* :empty matters — services.html puts the loop index {{@num}} in this same
   span, and an unscoped ::before counter prepended to it, rendering 0101. */
.eyebrow__num:empty::before { counter-increment: section; content: counter(section, decimal-leading-zero); }
.section--ink .eyebrow { color: var(--on-ink-low); }
.section--ink .eyebrow::before { background: rgba(255,255,255,.2); }

/* --- 4. Layout ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--paper); }
.section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head--split { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 56rem) {
  .section__head--split { grid-template-columns: 1fr auto; gap: var(--s-8); }
}
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-250%);
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  z-index: 200; text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); color: var(--paper); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--ink :where(a, button):focus-visible,
.footer :where(a, button):focus-visible,
.lightbox :where(button):focus-visible { outline-color: var(--paper); }

/* --- 5. Components ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 0.95em 1.7em;
  font-family: var(--font-text); font-size: var(--step-0);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dk); color: var(--on-accent); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--on-ink { background: var(--paper); color: var(--ink); }
.btn--on-ink:hover { background: var(--accent); color: var(--on-accent); }
.btn--ghost-ink { border-color: rgba(255,255,255,.28); color: var(--paper); background: transparent; }
.btn--ghost-ink:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn--lg { padding: 1.05em 1.85em; font-size: calc(var(--step-0) * 1.06); }
.btn__icon { width: 1.05em; height: 1.05em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none; color: var(--accent);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Card */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__body h3 { font-size: var(--step-1); min-height: 2.36em; }
.card__body p { font-size: var(--step-0); color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: var(--s-2); }

/* Feature list with clay ticks */
.ticks { display: grid; gap: var(--s-3); }
.ticks li { display: grid; grid-template-columns: 1.35em 1fr; gap: var(--s-3); align-items: start; }
.ticks svg { width: 1.15em; height: 1.15em; color: var(--accent); margin-top: .3em; }
.section--ink .ticks svg { color: var(--accent-ink); }

/* Trust strip */
.trust {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  border-block: 1px solid var(--line);
  padding-block: var(--s-6);
}
.trust__item { display: grid; gap: var(--s-1); }
.trust__num { font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-3); color: var(--ink); line-height: 1; }
.trust__label { font-size: var(--step--1); color: var(--ink-3); letter-spacing: .03em; }

/* Quote / testimonial */
.quote { display: grid; gap: var(--s-5); align-content: start; }
.quote__text { font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-2); line-height: 1.35; color: var(--ink); }
.section--ink .quote__text { color: var(--paper); }
.quote__by { font-size: var(--step--1); color: var(--ink-3); }
.quote__by strong { display: block; color: var(--ink-2); font-weight: 600; font-size: var(--step-0); }
.section--ink .quote__by strong { color: var(--paper); }

/* Steps / process */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step { counter-increment: step; display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-1); color: var(--accent); line-height: 1;
}
.section--ink .step { border-top-color: rgba(255,255,255,.14); }
.section--ink .step::before { color: var(--accent-ink); }

/* Gallery */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.gallery__item {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--surface-2);
  border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; display: block; width: 100%;
  font: inherit; text-align: left; color: inherit;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .5s var(--ease); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-8) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(var(--ink-rgb),.82), rgba(var(--ink-rgb),.35) 55%, transparent);
  color: #fff; font-size: var(--step--1);
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.gallery__cap strong { display: block; font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-1); font-weight: 600; }
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap { opacity: 1; transform: none; }
@media (hover: none) {
  .gallery__cap { opacity: 1; transform: none; }
}

/* Lightbox */
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  padding: var(--gutter);
  background: rgba(var(--ink-rgb),.94);
  border: 0;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(var(--ink-rgb),.94); }
.lightbox__inner { display: grid; place-content: center; justify-items: center; height: 100%; gap: var(--s-4); }
.lightbox img { max-width: min(100%, 68rem); max-height: 78vh; border-radius: var(--radius); object-fit: contain; }
.lightbox__cap { color: var(--on-ink-hi); font-size: var(--step--1); text-align: center; max-width: 48ch; }
.lightbox__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__close svg { width: 1.15rem; height: 1.15rem; }

/* Forms */
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.field .hint { font-size: var(--step--1); color: var(--ink-3); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.8em 0.95em;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt);
}
.field textarea { min-height: 8rem; resize: vertical; }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius); font-size: var(--step-0); }
.form-status[data-state="ok"]  { background: #E7F0EA; color: #204A34; }
.form-status[data-state="err"] { background: #FAE8E2; color: #8A3116; }

/* Definition rows */
.deflist { display: grid; }
.deflist > div { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 34rem) { .deflist > div { grid-template-columns: 8.5rem 1fr; gap: var(--s-4); align-items: baseline; } }
.deflist dt { font-size: var(--step--1); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.deflist dd { margin: 0; color: var(--ink); }
.deflist a { text-decoration: none; font-weight: 600; }
.deflist a:hover { text-decoration: underline; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pills li, .pill {
  font-size: var(--step--1); padding: .4em .9em;
  border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink-2);
}
.pill--accent { background: var(--accent-lt); border-color: transparent; color: var(--accent-dk); font-weight: 600; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-1); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-text); font-size: var(--step-2);
  color: var(--accent); line-height: 1; flex: none; transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s-5); max-width: 62ch; }

/* --- 6. Header / nav ----------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.header[data-scrolled="true"] { border-bottom-color: var(--line); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 4.75rem; }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand__mark { width: 2.15rem; height: 2.15rem; flex: none; }
.brand__name { font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-1); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand__sub { display: block; font-family: var(--font-text); font-size: 0.6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: .35em; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link { text-decoration: none; color: var(--ink-2); font-size: var(--step-0); font-weight: 500; padding-block: .4em; position: relative; }
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.header__actions { display: flex; align-items: center; gap: var(--s-4); }
/* Not a link, ever: see the .tel-tap / .tel-desk pair below. It is shown at the
   desktop breakpoint, and on a computer below it as well - the call icon it
   used to sit beside is gone there, because a computer cannot dial, and this is
   the number itself rather than a button that pretends to ring one. 34rem is
   where the header stops having room for it beside the wordmark, which is a
   question about space and so is asked of the width, not the device. */
.header__tel { display: none; color: var(--ink); font-weight: 600; white-space: nowrap; line-height: 1.2; }
@media (min-width: 34rem) and (hover: hover) { .header__tel { display: block; } }
.header__tel span { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.header .btn { display: none; }

.nav-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav { display: none; border-top: 1px solid var(--line); padding-block: var(--s-5) var(--s-6); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { display: grid; }
.mobile-nav a { display: block; padding: var(--s-4) 0; text-decoration: none;
  font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-2); color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--accent); }
.mobile-nav .btn-row { margin-top: var(--s-6); }
.mobile-nav .btn { flex: 1 1 12rem; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .header__tel { display: block; }
  .header .btn { display: inline-flex; }
}

/* Mobile call button in the header, and the sticky action bar.
   On a trades site the phone is the conversion, so it is never more than a
   thumb away on a handset. Both disappear at the desktop breakpoint, where the
   header already carries the number.
   The icon dials, so it is off unless the device can dial - see the tel-tap
   pair below. A narrow desktop window is still a desktop, and a phone icon that
   opens an "how do you want to open this?" dialog is not a call button. */
.header__call {
  display: none; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.header__call svg { width: 1.15rem; height: 1.15rem; }
.header__call:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: none) and (pointer: coarse) { .header__call { display: grid; } }

/* The bar itself is layout and stays on the width breakpoint: below it the
   header has no room for the primary CTA, so this is where that button lives.
   Its "Call us" half carries tel-tap and goes on a computer, and the columns
   are auto rather than a fixed 1fr 1fr so the CTA then fills the bar instead of
   sitting in half of it beside a gap. */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.callbar .btn { width: 100%; padding: 0.85em 1em; }
body { padding-bottom: 5.25rem; }

@media (min-width: 62rem) {
  .callbar, .header__call { display: none; }
  body { padding-bottom: 0; }
}

/* A phone number is a link only on a device that can dial one. On a desktop
   browser a tel: link hands the number to whatever handler happens to be
   registered - Skype, an "open with" dialog, nothing at all - so there the
   number is plain text and the anchor is not in the page, rather than being a
   link that visibly does nothing.

   The question is asked of the DEVICE, not of the window. It was a width
   breakpoint first, to keep one rule instead of two, and that was wrong for the
   reason a width breakpoint is always wrong about hardware: dragging a desktop
   window narrower turned the number back into a link on a machine that still
   could not ring it. `hover: none` and `pointer: coarse` together are the
   ordinary test for a touch device - a laptop with a touchscreen still reports
   a fine pointer, because the media feature describes the PRIMARY input.

   Everything else that dials is gated on the same query, below and above, so
   there is still one answer to "can this thing ring a phone?". What stays on
   the width breakpoint is layout: which element the header shows, and whether
   there is a sticky bar. Being able to tap and being narrow are two different
   questions and they are now asked separately.

   .header__tel is in neither pair - it is desktop layout to begin with, and it
   is simply not a link. */
.tel-tap, .btn.tel-tap { display: none; }
.tel-desk { display: inline; }
@media (hover: none) and (pointer: coarse) {
  .tel-tap { display: inline; }
  .btn.tel-tap { display: inline-flex; }
  .tel-desk { display: none; }
}
/* Each de-linked number keeps the look of the link it replaces, so it reads as
   the same piece of information as the email beside it rather than as a style
   that failed to apply. */
.footer .tel-desk { color: var(--on-ink-hi); }
.deflist .tel-desk { font-weight: 600; }
/* The same question asked of email, and for the same reason the phone pair exists.
   A mailto: link hands the address to whatever handler is registered, and on a
   computer with no mail client that is not "nothing" - Windows routes it to the
   default browser, which lands the visitor on a Bing search where their mail
   should have been. That looks broken, and on this site it is the only contact
   route besides a form. Reported by the user clicking it.

   So a touch device gets the link, because a handset always has a mail app; a
   computer gets a button that copies the address instead, which needs no handler
   and cannot fail. Same device query as the phone pair - the primary input, not
   the window width, so dragging a window narrow does not change the answer.

   Both halves ship and one is shown. Deleting either is the bug. */
.mail-tap { display: none; }
.mail-desk { display: inline; }
@media (hover: none) and (pointer: coarse) {
  .mail-tap { display: inline; }
  .mail-desk, .mail-copied { display: none; }
}
.mail-copy { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-align: left; text-underline-offset: 0.18em; }
.mail-copy:hover { color: var(--accent-dk); text-decoration: underline; }
.deflist .mail-copy { font-weight: 600; color: var(--ink); }
.deflist .mail-copy:hover { text-decoration: underline; }
.footer .mail-copy { color: var(--on-ink-hi); }
.footer .mail-copy:hover { color: #fff; text-decoration: underline; }
.mail-copied { margin-left: .5em; font-size: var(--step--1); color: var(--ink-3); }
.footer .mail-copied { color: var(--on-ink-mid); }

.cta-band__tel { color: var(--paper); font-weight: 600; font-size: calc(var(--step-0) * 1.06); white-space: nowrap; }

/* Full-width CTAs on the narrowest handsets - bigger targets, tidier stack. */
@media (max-width: 30rem) {
  .hero__cta .btn, .cta-band .btn-row .btn { width: 100%; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .hero__media { display: flex; }
}
.hero__title em { font-style: var(--display-style-em); color: var(--accent); }
.hero__lede { margin-top: var(--s-5); font-size: var(--step-1); color: var(--ink-2); max-width: 36ch; line-height: 1.5; }
.hero__cta { margin-top: var(--s-7); }
.hero__note { margin-top: var(--s-5); font-size: var(--step--1); color: var(--ink-3); }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); }
@media (min-width: 60rem) {
  .hero__media img { aspect-ratio: auto; height: 100%; min-height: 30rem; }
}
.hero__badge {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); max-width: 14rem;
}
@media (min-width: 60rem) { .hero__badge { left: calc(-1 * var(--s-6)); bottom: var(--s-7); } }
.hero__badge strong { font-family: var(--font-display); font-style: var(--display-style); font-size: var(--step-2); color: var(--ink); line-height: 1; }
.hero__badge span { font-size: var(--step--1); color: var(--ink-3); line-height: 1.35; }
.hero__strip { margin-top: clamp(3rem, 7vw, 5rem); }

.swatches { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.swatches span { width: 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.09); }
.swatches .swatch-1 { background: var(--swatch-1); }
.swatches .swatch-2 { background: var(--swatch-2); }
.swatches .swatch-3 { background: var(--swatch-3); }
.swatches .swatch-4 { background: var(--swatch-4); }
.swatches .swatch-5 { background: var(--swatch-5); }

/* Page header (interior pages) */
.pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.pagehead__grid { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 56rem) { .pagehead__grid { grid-template-columns: 1fr 22rem; gap: var(--s-8); } }
.pagehead h1 { font-size: var(--step-4); }

/* --- 8. Section blocks --------------------------------------------------- */
.feature { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 58rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: 2; }
  .feature--stretch { align-items: stretch; }
  .feature--stretch .feature__media img { height: 100%; aspect-ratio: auto; min-height: 28rem; }
}
.feature__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); }
.feature__media--tall img { aspect-ratio: 3/4; }

.cta-band { background: var(--ink); color: var(--on-ink); }
.cta-band__inner { display: grid; gap: var(--s-6); align-items: center; padding-block: clamp(3rem, 7vw, 4.5rem); }
@media (min-width: 56rem) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--s-8); } }
.cta-band h2 { color: var(--paper); font-size: var(--step-3); }
.cta-band p { margin-top: var(--s-3); max-width: 48ch; }

.service-block { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
@media (min-width: 58rem) { .service-block { grid-template-columns: 1fr 1.15fr; } }
.service-block__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); }
@media (min-width: 58rem) { .service-block__media { position: sticky; top: 6.5rem; } }
.service-block__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.areas { columns: 2; column-gap: var(--s-6); }
@media (min-width: 44rem) { .areas { columns: 3; } }
.areas li { break-inside: avoid; padding-block: var(--s-3); border-bottom: 1px solid var(--line); color: var(--ink-2); }

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 58rem) { .contact-grid { grid-template-columns: 1.15fr 1fr; } }
.contact-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
.contact-card .deflist > div:first-child { border-top: 0; padding-top: 0; }
.contact-card .deflist > div:last-child { border-bottom: 0; }

/* --- 9. Footer ----------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-ink-mid); padding-block: clamp(3rem, 8vw, 5rem) var(--s-6); }
.footer a { color: var(--on-ink-hi); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 50rem) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: var(--s-8); } }
.footer .brand { color: var(--paper); }
.footer .brand__sub { color: var(--on-ink-low); }
.footer h2 { color: var(--paper); font-family: var(--font-text); font-size: var(--step--1);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s-4);
  line-height: 1.2; }
.footer ul { display: grid; gap: var(--s-3); font-size: var(--step-0);
  list-style: none; padding: 0; margin: 0; }
.footer__bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--step--1); color: var(--on-ink-low);
}
.footer__bottom a { color: var(--on-ink-low); text-decoration: underline; }
.footer__bottom a:hover { color: #fff; }

/* --- 10. Motion & print -------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .footer, .cta-band, .nav-toggle, .mobile-nav, .btn, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}