/* ==========================================================================
   Woodside Roofing Services — design system.

   Hand-written, self-contained. No external font requests: validate.mjs fails
   the build on any @import or src:url pointing off-origin, so the display face
   is a system serif stack and the body face a system sans stack.

   Palette: deep slate ink, terracotta copper, warm off-white paper.
   ========================================================================== */

:root {
  --ink:        #16212b;
  --slate:       #22303c;
  --slate-2:     #2f4150;
  --slate-3:     #405768;
  --copper:      #d2703f;   /* terracotta copper — the accent */
  --copper-dk:   #a04a20;
  --copper-lt:   #f2cdb8;
  --stone:      #f7f6f4;
  --stone-2:    #ebe8e4;
  --paper:      #ffffff;
  --line:       #e2ded8;
  --line-2:     #c9c3ba;
  --body:       #3c4650;
  /* 5f6a74, not 6b7681. The original clears 4.5:1 on white (4.63) and FAILS
     on --stone (4.29) — and .section--alt paints --stone on every other
     section of every page, so .deflist p failed on 704 elements across the
     live site. Passing on the page background you tested is not the same as
     passing on the background it is actually painted on. Now 5.53 on white,
     5.12 on stone. The dark surfaces override it separately, further down. */
  --muted:      #5f6a74;
  --muted-lt:   #8f98a2;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --r: 4px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(22, 33, 43, .04), 0 8px 24px -12px rgba(22, 33, 43, .18);
  --shadow-lg: 0 2px 4px rgba(22, 33, 43, .05), 0 24px 48px -20px rgba(22, 33, 43, .28);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--slate-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--copper-dk); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

/* `strong` darkens body copy on the light surfaces that make up most of the
   site, but a hard-coded ink here repaints it INVISIBLE on every dark surface —
   that is exactly how the topbar's "24-hour emergency line" ended up at a
   contrast ratio of 1.00, ink on ink. Dark components set --strong instead of
   each needing its own override, so a new one inherits the right behaviour. */
strong { color: var(--strong, var(--ink)); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--copper-lt); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--copper-dk);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
@media (max-width: 640px) { .wrap { padding-inline: 1.15rem; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  --strong: #fff; background: var(--slate); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .745rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  margin: 0 0 .85rem;
}
.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--body);
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 600; letter-spacing: .005em;
  padding: .78rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { --strong: #fff; background: var(--slate); color: #fff; border-color: var(--slate); }
.btn--primary:hover { background: var(--slate-2); border-color: var(--slate-2); color: #fff; }

.btn--ghost { background: transparent; color: var(--slate); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--stone-2); color: var(--slate); border-color: var(--slate-3); }

.btn--copper { background: var(--copper); color: var(--ink); border-color: var(--copper); }
.btn--copper:hover { background: var(--copper-lt); border-color: var(--copper-lt); color: var(--ink); }

.btn--light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--light:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.6); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .42rem;
  font-weight: 600; font-size: .93rem;
  color: var(--slate-2); text-decoration: none;
}
.link-more:hover { color: var(--copper-dk); }
.link-more svg { transition: transform .18s; }
.link-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- topbar */

.topbar {
  --strong: #fff;
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .795rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar-left { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.topbar-left li { display: flex; align-items: center; gap: .42rem; margin: 0; }
.topbar-left svg { color: var(--copper); flex: none; }
.topbar-note { display: flex; align-items: center; gap: .42rem; white-space: nowrap; }
.topbar-note svg { color: var(--copper); }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--copper-lt); }

@media (max-width: 900px) { .topbar-hide-sm { display: none; } }
@media (max-width: 560px) {
  .topbar-left li span { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar-left { display: none; }
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: .72rem; text-decoration: none; flex: none; }
.brand-mark { border-radius: 9px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.16; }
.brand-name {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.brand-sub {
  font-size: .705rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted); margin-top: .22rem;
}

.nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 550;
  color: var(--body); text-decoration: none;
  padding: .62rem .7rem; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; line-height: 1;
  /* the brand lockup is wide enough here that a two-word label wraps mid-item
     at 1440 without this — the nav must shrink before a label breaks */
  white-space: nowrap;
}
.nav > a:hover, .nav-drop > button:hover { color: var(--slate); background: var(--stone-2); }
.nav > a[aria-current="page"] { color: var(--slate); font-weight: 650; }

.nav-drop { position: relative; }
.nav-drop > button svg { transition: transform .2s; }
.nav-drop[data-open="true"] > button { color: var(--slate); background: var(--stone-2); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(860px, calc(100vw - 3rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop[data-open="true"] .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-panel-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
.nav-col-h {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-dk); margin: 0 0 .7rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.nav-col a {
  display: block; font-size: .9rem; color: var(--body); text-decoration: none;
  padding: .34rem 0; border-radius: 2px;
}
.nav-col a:hover { color: var(--slate); }
.nav-col a[aria-current="page"] { color: var(--slate); font-weight: 650; }
.nav-panel-foot {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: 1.4rem -1.6rem 0; padding: 1rem 1.6rem;
  background: var(--stone); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.header-cta { display: flex; align-items: center; gap: .55rem; flex: none; }
.header-cta .btn { padding: .68rem 1.1rem; font-size: .89rem; }
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--slate); cursor: pointer;
}

@media (max-width: 1120px) { .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 780px) {
  .header-cta .btn--ghost, .header-cta .btn--primary { display: none; }
  .site-header .wrap { min-height: 66px; }
  .brand-sub { display: none; }
}

/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-veil {
  position: absolute; inset: 0; background: rgba(22, 33, 43,.5);
  opacity: 0; transition: opacity .25s;
}
.drawer[data-open="true"] .drawer-veil { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-close {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--slate); cursor: pointer;
}
.drawer nav { padding: 1rem 1.25rem; flex: 1; }
.drawer nav a {
  display: block; padding: .58rem 0; text-decoration: none;
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--stone-2);
}
.drawer nav a.sub { font-size: .93rem; font-weight: 500; color: var(--body); padding-left: .1rem; }
.drawer-sub {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-dk); margin: 1.25rem 0 .35rem;
}
.drawer-foot { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--stone); flex: none; }
.drawer-foot p { display: flex; align-items: center; gap: .4rem; margin: 0; }
.drawer-foot svg { color: var(--copper-dk); }

/* ------------------------------------------------------------------ hero */

.hero { --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(22, 33, 43,.94) 0%, rgba(22, 33, 43,.86) 38%, rgba(22, 33, 43,.42) 72%, rgba(22, 33, 43,.3) 100%),
    linear-gradient(to top, rgba(22, 33, 43,.7), transparent 45%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
  max-width: 660px;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero .eyebrow { color: var(--copper); }
.hero .lead { color: rgba(255,255,255,.84); margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 2.6rem; }

/* Default to an OPAQUE dark cell so the block is legible wherever it is used.
   The hero overrides to a translucent cell so the video shows through — the
   translucency only composites to something readable over a dark surface, and
   a stat block dropped onto a light section inherited it and went to 1.14:1
   before this was split. Any new usage now gets the safe version. */
.hero-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-2);
  border-top: 1px solid var(--line-2);
}
.hero-stats div { --strong: #fff; background: var(--ink); padding: 1.4rem 1.35rem; }
.hero .hero-stats { background: rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.14); }
.hero .hero-stats div { background: rgba(22, 33, 43,.55); }
.hero-stats dt {
  font-family: var(--serif); font-size: 1.75rem; color: var(--copper);
  line-height: 1; margin-bottom: .38rem;
}
.hero-stats dd {
  margin: 0; font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.42;
}
@media (max-width: 800px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- pagehead */

.pagehead {
  --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem);
}
.pagehead-media { position: absolute; inset: 0; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(22, 33, 43,.95) 0%, rgba(22, 33, 43,.88) 42%, rgba(22, 33, 43,.55) 100%);
}
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; max-width: 20ch; }
.pagehead .lead { color: rgba(255,255,255,.82); max-width: 62ch; }
.pagehead .eyebrow { color: var(--copper); }
.pagehead--plain { background: var(--slate); }

.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.crumbs li { margin: 0; color: rgba(255,255,255,.6); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(255,255,255,.34); }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover { color: var(--copper-lt); }

.pagehead-meta {
  display: flex; flex-wrap: wrap; gap: .55rem 1.5rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.pagehead-meta li {
  display: flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .875rem; color: rgba(255,255,255,.84);
}
.pagehead-meta svg { color: var(--copper); flex: none; }

/* -------------------------------------------------------------- sections */

.section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }
.section--alt { background: var(--stone); }
.section--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }
/* ------------------------------------------------- contrast on dark ground

   INHERITED FROM THE ENGLISH ORIGINAL, and present on every sibling forked
   from it. Two tokens are tuned for a light background and are re-used
   unchanged on the dark surfaces, where they fall under 4.5:1:

     .eyebrow   --copper #d2703f on --slate  = 3.94:1   (cta-band, pagehead--plain)
     .numbered p --muted  #6b7681 on --ink   = 3.52:1
                          #6b7681 on --slate = 2.91:1

   Fixed BY TOKEN rather than by rule, so the next dark block added inherits
   the corrected behaviour instead of the defect. All FOUR dark surfaces are
   listed: demo 8's first pass missed .pagehead and the live audit found it.

   Measured against THIS site's own --ink/--slate, not copied from a sibling —
   the palettes differ (plumbing's --muted is #5e7178, roofing's is #6b7681).
   New values clear 4.5 on both grounds with margin:
     --copper #e08b5e  ink 6.24  slate 5.16
     --muted  #9aa4ae  ink 6.45  slate 5.33                                  */

.section--ink,
.cta-band,
.site-footer,
.pagehead {
  --copper: #e08b5e;
  --muted:  #9aa4ae;
}

.section--ink { --strong: #fff; background: var(--ink); color: rgba(255,255,255,.78); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .eyebrow { color: var(--copper); }
.section--ink .lead { color: rgba(255,255,255,.8); }

.section-head { max-width: 68ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem;
}
.section--alt .card { background: var(--paper); }

.svc-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.svc-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .45rem; font-size: 1.14rem; }
.svc-card p { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }
.svc-card .link-more { margin-top: auto; }
.svc-card-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--copper-dk); margin-bottom: .55rem;
}

.promise {
  display: flex; flex-direction: column; gap: .85rem;
}
.promise-ic {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--stone-2); color: var(--slate); flex: none;
  border: 1px solid var(--line);
}
.section--ink .promise-ic { background: rgba(210,112,63,.14); border-color: rgba(210,112,63,.3); color: var(--copper); }
.promise h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.promise p { font-size: .92rem; color: var(--muted); margin: 0; }
.section--ink .promise p { color: rgba(255,255,255,.68); }

.ind-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
}
.ind-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ind-card-body { padding: 1.3rem 1.4rem 1.5rem; }
.ind-card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.ind-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ team */

.team-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.team-card-body { padding: 1.35rem 1.45rem 1.6rem; }
.team-card h3 { font-size: 1.1rem; margin-bottom: .18rem; }
.team-role { font-size: .875rem; color: var(--slate-2); font-weight: 600; margin: 0 0 .1rem; }
.team-creds {
  font-size: .715rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper-dk); font-weight: 700; margin: 0 0 .9rem;
}
.team-card p.bio { font-size: .91rem; color: var(--muted); margin-bottom: 1rem; }
.team-focus { list-style: none; margin: 0 0 .9rem; padding: 0; }
.team-focus li {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .855rem; color: var(--body); margin-bottom: .3rem;
}
.team-focus svg { color: var(--copper-dk); flex: none; margin-top: .28em; }
.team-langs {
  font-size: .8rem; color: var(--muted); padding-top: .85rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: .42rem; margin: 0;
}
.team-langs svg { color: var(--copper-dk); flex: none; }

/* ----------------------------------------------------------------- split */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--rev .split-media { order: 2; }
.split-media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.split-copy h2 { margin-bottom: .6em; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--rev .split-media { order: 0; }
}

/* ----------------------------------------------------------------- lists */

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: .6rem; font-size: .96rem;
}
.checklist svg { color: var(--copper-dk); flex: none; margin-top: .3em; }
.section--ink .checklist svg { color: var(--copper); }

.deflist { list-style: none; margin: 0; padding: 0; }
.deflist > li {
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.deflist > li:first-child { padding-top: 0; }
.deflist > li:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist h3 {
  font-family: var(--sans); font-size: 1rem; font-weight: 650;
  color: var(--ink); margin-bottom: .3rem;
}
.deflist p { font-size: .93rem; color: var(--muted); margin: 0; }

.numbered { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.numbered > li {
  counter-increment: step;
  position: relative; padding-left: 3.4rem; margin-bottom: 1.7rem;
}
.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--copper-dk);
  border-right: 1px solid var(--line); padding-right: .85rem; width: 2.55rem; text-align: right;
}
.numbered h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.numbered p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ menu */

.menu { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.menu-head { padding: 1.6rem 1.8rem; background: var(--stone); border-bottom: 1px solid var(--line); }
.menu-head h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.menu-head p { font-size: .875rem; color: var(--muted); margin: 0; }
.menu-list { list-style: none; margin: 0; padding: 0 1.8rem; }
.menu-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--stone-2); margin: 0;
}
.menu-list li:last-child { border-bottom: 0; }
.menu-item h3 { font-family: var(--sans); font-size: .99rem; font-weight: 650; margin-bottom: .18rem; }
.menu-item p { font-size: .875rem; color: var(--muted); margin: 0; }
.menu-price {
  font-family: var(--serif); font-size: 1.06rem; color: var(--slate); font-weight: 600;
  white-space: nowrap; flex: none;
}
@media (max-width: 560px) {
  .menu-head, .menu-list { padding-inline: 1.25rem; }
  .menu-list li { flex-direction: column; gap: .3rem; }
}

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink);
  line-height: 1.34;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: .42em;
  border-right: 1.5px solid var(--copper-dk); border-bottom: 1.5px solid var(--copper-dk);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--slate-2); }
.faq-body { padding: 0 0 1.35rem; max-width: 78ch; }
.faq-body p { font-size: .96rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------- voices */

.voice {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem 2rem;
  display: flex; flex-direction: column;
}
.voice-ic { color: var(--copper); margin-bottom: .85rem; }
/* the takeaway line, then the quote itself set off by a brass rule — a heading
   here competed with the quote for the same job */
.voice-what {
  font-family: var(--serif); font-size: 1.17rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); margin: 0 0 1rem;
}
.voice blockquote { margin: 0 0 1.4rem; padding-left: 1.15rem; border-left: 2px solid var(--copper-lt); }
.voice blockquote p { font-size: .965rem; color: var(--muted); margin: 0; }
.voice figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.voice cite {
  font-style: normal; font-size: .81rem; font-weight: 650;
  letter-spacing: .045em; color: var(--slate-2);
}
@media (max-width: 560px) { .voice { padding: 1.5rem 1.4rem; } }

/* -------------------------------------------------------------- calendar */

.cal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cal li {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.cal .cal-when {
  font-family: var(--serif); font-size: 1.1rem; color: var(--slate); font-weight: 600;
}
.cal p { font-size: .95rem; color: var(--muted); margin: 0; }
@media (max-width: 700px) { .cal li { grid-template-columns: 1fr; gap: .3rem; } }

/* --------------------------------------------------------------- gallery */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: .5rem; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- areas */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  margin: 0; font-size: .85rem; color: var(--body);
  padding: .38rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper);
}
.section--ink .chips li { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); background: rgba(255,255,255,.05); }

/* ------------------------------------------------------------------ cta */

.cta-band { --strong: #fff; background: var(--slate); color: rgba(255,255,255,.82); padding: clamp(2.8rem, 5vw, 4rem) 0; }
.cta-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .5em; }
.cta-band .eyebrow { color: var(--copper); }
.cta-band .lead { color: rgba(255,255,255,.8); max-width: 62ch; margin: 0; }
.cta-band .btn--primary { background: var(--copper); color: var(--ink); border-color: var(--copper); }
.cta-band .btn--primary:hover { background: var(--copper-lt); border-color: var(--copper-lt); }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.36); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- advice note */

.advice-note {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--stone); border: 1px solid var(--line); border-left: 3px solid var(--copper);
  border-radius: var(--r); padding: 1rem 1.2rem;
  font-size: .855rem; color: var(--muted); line-height: 1.58;
  margin: 2.4rem 0 0;
}
.advice-note svg { color: var(--copper-dk); flex: none; margin-top: .2em; }

/* ----------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: block; font-size: .85rem; font-weight: 650; color: var(--ink); margin-bottom: .38rem; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--sans); font-size: .96rem; color: var(--body);
  padding: .72rem .85rem;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--slate-3); box-shadow: 0 0 0 3px rgba(47,65,80,.12);
}
.form .check { display: flex; align-items: flex-start; gap: .6rem; font-size: .87rem; color: var(--muted); }
.form .check input { width: auto; margin-top: .25em; flex: none; }
.form .hint { font-size: .81rem; color: var(--muted); margin: 0; }

.info-card {
  background: var(--stone); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem;
}
.info-card + .info-card { margin-top: 1.25rem; }
.info-card h3 { font-size: 1.1rem; margin-bottom: .9rem; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .8rem; font-size: .93rem;
}
.info-list li:last-child { margin-bottom: 0; }
.info-list svg { color: var(--copper-dk); flex: none; margin-top: .22em; }
.info-list a { color: var(--slate-2); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.hours-table th, .hours-table td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--ink); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------- prose page */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.6rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.9rem; font-size: 1.13rem; font-family: var(--sans); font-weight: 650; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }

/* ---------------------------------------------------------------- error */

.err { text-align: center; padding: clamp(4rem, 10vw, 8rem) 0; }
.err-code {
  font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
  color: var(--copper); margin-bottom: .3rem;
}

/* --------------------------------------------------------------- footer */

.site-footer { --strong: #fff; background: var(--ink); color: rgba(255,255,255,.68); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,.5); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: .89rem; color: rgba(255,255,255,.6); max-width: 42ch; }
.footer-langs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.footer-langs li {
  margin: 0; font-size: .74rem; letter-spacing: .04em;
  padding: .22rem .6rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.62);
}
.site-footer h4 {
  color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .48rem; font-size: .875rem; }
.site-footer a { color: rgba(255,255,255,.68); text-decoration: none; }
.site-footer a:hover { color: var(--copper); }
.footer-contact li { display: flex; align-items: flex-start; gap: .55rem; }
.footer-contact svg { color: var(--copper); flex: none; margin-top: .2em; }

.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 0 1.2rem; font-size: .8rem; color: rgba(255,255,255,.5);
}
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bar li { margin: 0; font-size: .8rem; }

.footer-disclaimer {
  font-size: .785rem; line-height: 1.6; color: rgba(255,255,255,.44);
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; margin: 0; max-width: 100ch;
}
.footer-disclaimer strong { color: rgba(255,255,255,.72); }

/* ----------------------------------------------- maintenance plan cards */

.plans {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.plan {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.7rem 1.8rem; box-shadow: var(--shadow);
}
.plan--featured {
  /* the flag floats above the top edge, so no extra padding is needed here —
     matching padding keeps the three price baselines on one line */
  border-color: var(--slate); box-shadow: var(--shadow-lg);
}
.plan-flag {
  position: absolute; top: -.75rem; left: 1.7rem;
  background: var(--copper); color: var(--ink);
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 2px; margin: 0;
}
.plan h3 { font-size: 1.42rem; margin-bottom: .35rem; }

.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .9rem; }
.plan-price strong {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; line-height: 1;
}
.plan-price span { font-size: .84rem; color: var(--muted); }

.plan-blurb { font-size: .93rem; color: var(--body); margin: 0 0 1.3rem; }

.plan-list { list-style: none; margin: 0 0 1.3rem; padding: 0; border-top: 1px solid var(--line); }
.plan-list li {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0;
  padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .89rem; line-height: 1.5;
}
.plan-list svg { color: var(--copper-dk); flex: none; margin-top: .18em; }

.plan-best { font-size: .82rem; color: var(--muted); margin: 0 0 1.3rem; }
.plan-best strong { color: var(--body); }
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ------------------------------------------------------- emergency strip */

.emerg {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fdf3ea; border: 1px solid var(--copper-lt); border-left: 3px solid var(--copper);
  border-radius: var(--r); padding: .95rem 1.15rem; margin: 0 0 2rem;
}
.emerg svg { color: var(--copper-dk); flex: none; margin-top: .18em; }
.emerg p { margin: 0; font-size: .93rem; line-height: 1.55; }
.emerg strong { color: var(--ink); }
.emerg a { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------- printing */

@media print {
  .topbar, .site-header, .drawer, .cta-band, .site-footer, .hero-media { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: none; color: #000; }
}