/* ==========================================================================
   Parker Masonry — design system
   Photo-led, high-contrast, hairline-precise. Built around real job
   photography: generous crops, confident scrims, no decorative texture.
   ========================================================================== */

:root {
  /* Ink — the charcoal of the Parker Masonry wordmark (#2d3131) */
  --ink:        #2d3131;
  --ink-2:      #383d3d;
  --ink-3:      #474d4d;
  --ink-4:      #5a6161;

  /* Accent — the warm taupe from the logo (#bbb1a6). That tone is far too
     light to carry white text (2.1:1), so the working accent is a deepened
     version of it at 4.9:1 on white, and the logo tone itself is reserved
     for type and rules on dark grounds, where it reaches 6.2:1 on --ink. */
  --accent:      #7a6f62;
  --accent-2:    #8d8073;
  --accent-dk:   #5f564c;
  --accent-light:#bbb1a6;
  --accent-tint: rgba(122, 111, 98, .08);

  /* Surface */
  --white:      #ffffff;
  --stone:      #f6f5f3;
  --stone-2:    #eceae6;

  /* Hairlines — thin and low-contrast is the whole look */
  --line:       rgba(45, 49, 49, .10);
  --line-2:     rgba(45, 49, 49, .17);
  --line-dark:  rgba(255, 255, 255, .13);
  --line-dark-2:rgba(255, 255, 255, .24);

  /* Text */
  --text:       #232726;
  --text-2:     #555b5a;
  /* Carries hints, labels and captions all over the site, so it has to clear
     4.5:1 on both white and --stone rather than just look quiet. */
  --text-3:     #6b716f;
  --on-dark:    #f3f2f0;
  --on-dark-2:  #b3b8b6;

  /* Type */
  --font-head: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Rhythm */
  --wrap: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --sec-y: clamp(4.5rem, 8vw, 8rem);

  /* Radii — tight. Crisp, not soft. */
  --r-xs: 3px;
  --r-sm: 5px;
  --r:    10px;
  --r-lg: 16px;

  /* Shadows — tight and low-alpha; borders do most of the separating */
  --shadow-xs: 0 1px 2px rgba(45, 49, 49, .05);
  --shadow-sm: 0 1px 2px rgba(45, 49, 49, .05), 0 4px 10px rgba(45, 49, 49, .05);
  --shadow:    0 2px 4px rgba(45, 49, 49, .05), 0 12px 28px rgba(45, 49, 49, .09);
  --shadow-lg: 0 4px 8px rgba(45, 49, 49, .06), 0 24px 56px rgba(45, 49, 49, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 72px;
}

/* On very large displays a 1240px column leaves the page looking like a
   ribbon. Widen the shell — but only the shell, since the prose inside is
   separately capped to a readable measure. */
@media (min-width: 1700px) {
  :root { --wrap: 1416px; --sec-y: clamp(5rem, 7vw, 9rem); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: var(--r-xs); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  /* Headings wrap to 3–4 lines on narrow screens, where 1.08 reads as a
     solid block. Tight leading is a display effect — it needs width to
     earn it, so it only kicks in once there is room. */
  line-height: 1.16;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 760px) {
  h1, h2, h3, h4 { line-height: 1.08; }
}
p { text-wrap: pretty; }

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 999; background: var(--ink); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--r) var(--r); font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); }
.section--tint { background: var(--stone); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.section__head { max-width: 60ch; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--split {
  max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem 3rem;
}
.section__head--split > div:first-child { max-width: 58ch; }
.section__title { font-size: clamp(1.95rem, 3.5vw, 3.1rem); }
/* Capped so the lead never runs past a comfortable measure in the wider
   split layouts, where it is not bounded by .section__head. */
.section__lead { margin-top: 1.1rem; font-size: 1.06rem; color: var(--text-2); max-width: 62ch; }
.section__head--center .section__lead { margin-inline: auto; }
.section--dark .section__lead { color: var(--on-dark-2); }

.eyebrow {
  font-family: var(--font-head);
  font-size: .79rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; flex: none;
  background: var(--accent); border-radius: 1px; transform: rotate(45deg);
}
.eyebrow--light { color: var(--accent-light); }
.eyebrow--light::before { background: var(--accent-light); }
.section__head--center .eyebrow { justify-content: center; }

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Photo wrapper: blur-up, no layout shift ---------- */
.ph {
  position: relative; overflow: hidden; background: var(--stone-2);
  background-size: cover; background-position: center;
}
.ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The blur-up fade only engages once main.js has confirmed it is running
   (see .js-anim below), so a failed script load leaves photos visible. */
.js-anim .ph > img { opacity: 0; transition: opacity .55s var(--ease); }
.js-anim .ph > img.is-loaded { opacity: 1; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.45rem; border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-head); font-weight: 600; font-size: .94rem;
  letter-spacing: -.005em; cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--outline:hover { --btn-bd: var(--ink); --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--outline-light { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: var(--line-dark-2); }
.btn--outline-light:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.14); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--line-dark-2); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--sm { padding: .58rem 1rem; font-size: .87rem; }
.btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Inline rather than inline-flex: as a flex container the label wrapped to a
   second line while the arrow stayed its own item, stranding it at the far
   right. Inline keeps the arrow tucked against the last word and underlines
   each line fragment instead of one full-width bar. */
.textlink {
  display: inline;
  font-family: var(--font-head); font-weight: 600; color: var(--accent);
  box-shadow: inset 0 -1px 0 rgba(122,111,98,.3);
  transition: box-shadow .2s var(--ease);
}
.textlink .icon {
  display: inline-block; vertical-align: -.16em; margin-left: .4rem;
  transition: margin-left .2s var(--ease);
}
.textlink:hover { box-shadow: inset 0 -1px 0 var(--accent); }
.textlink:hover .icon { margin-left: .7rem; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink); color: var(--on-dark-2);
  font-size: .82rem; border-bottom: 1px solid var(--line-dark);
}
.topbar__inner { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.topbar__item { display: flex; align-items: center; gap: .45rem; }
.topbar__item .icon { color: var(--accent-light); width: .95rem; height: .95rem; }
@media (max-width: 900px) { .topbar__item--right { display: none; } .topbar__inner { justify-content: center; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
/* The frosted backdrop lives on a pseudo-element, NOT on .header itself.
   backdrop-filter makes an element a containing block for fixed-position
   descendants, which would trap the off-canvas nav inside the header box
   instead of letting it cover the viewport. */
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: background .25s var(--ease);
}
.header.is-stuck::before { background: rgba(255,255,255,.96); }
.header.is-stuck { border-bottom-color: var(--line-2); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }

.logo { display: flex; align-items: center; flex: none; min-height: 44px; }
/* The lockup is 2.26:1, so 52px tall puts "PARKER" at ~16px — legible —
   while still leaving room inside the 72px header. */
.logo img { height: 52px; width: auto; }
@media (max-width: 640px) { .logo img { height: 42px; } }

/* Desktop: the wrapper vanishes so .nav is the header's flex item. */
.navdrawer { display: contents; }
.navdrawer__backdrop { display: none; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__link {
  position: relative; display: flex; align-items: center; gap: .3rem;
  padding: .55rem .78rem; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--text-2);
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
/* Between the drawer breakpoint and a comfortable desktop, the full nav plus
   phone and CTA is tight — tighten spacing rather than let items wrap. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .header__inner { gap: .85rem; }
  .nav__link { padding: .55rem .5rem; font-size: .855rem; }
  .header__actions { gap: .5rem; }
}
.nav__link:hover { color: var(--ink); background: rgba(45,49,49,.05); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after {
  content: ''; position: absolute; left: .78rem; right: .78rem; bottom: .18rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__caret { width: 9px; height: 6px; opacity: .55; transition: transform .2s var(--ease); }
.nav__item--has-menu { position: relative; }
.nav__item--has-menu:hover .nav__caret, .nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }

.megamenu {
  /* Anchored to the trigger's left edge rather than centred on it: a 600px
     panel centred on a ~97px link sits mostly to the left of what you are
     pointing at, so reaching the first column means travelling diagonally out
     of the hover area. */
  position: absolute; top: calc(100% + 6px); left: -1rem; transform: translateY(6px);
  width: min(600px, 84vw); opacity: 0; visibility: hidden; pointer-events: none;
  /* Closing is held for .3s so clipping a corner on the way down, or drifting
     off the panel for a moment, does not snap the menu shut. Visibility flips
     only after the fade has finished, so the panel stays hit-testable for the
     whole grace period. Opening is instant — see the hover rule below. */
  transition: opacity .18s var(--ease) .3s, transform .18s var(--ease) .3s, visibility 0s linear .48s;
  z-index: 50;
}
/* Invisible bridge over the gap between the trigger and the panel. It spans
   the panel's full width and inherits its pointer-events, so it is inert
   while the menu is closed and catches the pointer while it is open. */
.megamenu::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 3px); height: 20px;
}
.nav__item--has-menu:hover .megamenu, .nav__item--has-menu:focus-within .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  /* visibility 0s: clickable from the first frame rather than halfway through
     the fade, which is what a transitioned visibility would give. */
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
}
.megamenu__inner {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 1.15rem;
}
.megamenu__label {
  font-family: var(--font-head); font-size: .75rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: .7rem; padding-inline: .6rem;
}
.megamenu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; }
.megamenu__list a {
  display: flex; align-items: center; min-height: 44px;
  padding: .5rem .7rem; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 500; color: var(--text-2);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.megamenu__list a:hover { background: var(--stone); color: var(--accent); }
.megamenu__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  padding: .8rem .6rem 0; border-top: 1px solid var(--line); width: 100%;
  font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--accent);
}

.header__actions { display: flex; align-items: center; gap: .7rem; flex: none; }
/* min-height keeps this a comfortable touch target on phones and tablets */
.header__phone {
  display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--ink);
  min-height: 44px; min-width: 44px; padding-inline: .15rem;
}
.header__phone .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.header__phone span { display: flex; flex-direction: column; line-height: 1.15; }
.header__phone small { font-size: .78rem; color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; font-weight: 500; }
.header__phone strong { font-family: var(--font-head); font-size: .97rem; letter-spacing: -.02em; }

.navtoggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.navtoggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1150px) { .header__phone small { display: none; } }
@media (max-width: 1023px) {
  .navtoggle { display: flex; }

  /* Below this width .nav is position:fixed inside .navdrawer, so it leaves
     the flow and its margin-left:auto no longer spreads the header. Without
     this the actions — and the hamburger with them — bunch up against the
     logo instead of sitting in the right corner. */
  .header__actions { margin-left: auto; }

  /* Fixed to the viewport and clipping its own overflow, so the panel below
     can sit at translateX(100%) without adding a single pixel of page width.
     This is why the site never scrolls sideways on a phone. */
  .navdrawer {
    display: block;
    position: fixed; inset: 0; z-index: 120;
    overflow: hidden;
    visibility: hidden; pointer-events: none;
    transition: visibility .3s var(--ease-out);
  }
  .navdrawer.is-open { visibility: visible; pointer-events: auto; }

  .navdrawer__backdrop {
    display: block; position: absolute; inset: 0;
    background: rgba(45,49,49,.42); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .3s var(--ease-out);
  }
  .navdrawer.is-open .navdrawer__backdrop { opacity: 1; }

  .nav {
    position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw);
    background: #fff; border-left: 1px solid var(--line);
    padding: calc(var(--header-h) + 1.5rem) 1.4rem 6rem;
    transform: translateX(100%); transition: transform .3s var(--ease-out);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg); margin-left: 0;
  }
  .navdrawer.is-open .nav { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { padding: .85rem .8rem; font-size: 1.02rem; justify-content: space-between; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { color: var(--accent); }
  .megamenu {
    position: static; transform: none; left: auto; width: auto; opacity: 1; visibility: visible;
    pointer-events: auto; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
    transition-delay: 0s;
  }
  .megamenu::before { display: none; }
  .nav__item--has-menu.is-open .megamenu { max-height: 640px; }
  .megamenu__inner { border: 0; box-shadow: none; padding: 0 0 .5rem .8rem; }
  .megamenu__label { display: none; }
  .megamenu__list { grid-template-columns: 1fr; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .header__phone span { display: none; }
  .header__phone { padding: .48rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
  .header__actions .btn { display: none; }
}

/* ==========================================================================
   Hero — full-bleed photograph, scrim, oversized type
   ========================================================================== */
.hero { position: relative; background: var(--ink); color: var(--on-dark); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .ph { width: 100%; height: 100%; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--ink) 8%, rgba(45,49,49,.92) 34%, rgba(45,49,49,.55) 62%, rgba(45,49,49,.35) 100%),
    linear-gradient(to top, rgba(45,49,49,.85), transparent 45%);
}
.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
  max-width: 60ch;
}
.hero__title {
  color: #fff; font-size: clamp(2.5rem, 6.2vw, 4.9rem); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.08;
}
/* Sub-one leading only once the type is large enough to carry it. */
@media (min-width: 760px) { .hero__title { line-height: 1.0; } }
.hero__title em { font-style: normal; color: var(--accent-light); }
.hero__lead {
  margin-top: 1.5rem; font-size: clamp(1.03rem, 1.5vw, 1.18rem);
  color: rgba(255,255,255,.8); max-width: 52ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.hero__rating { display: flex; align-items: center; gap: .65rem; margin-top: 1.9rem; }
.hero__stars { display: flex; gap: .1rem; color: var(--accent-light); }
.hero__stars .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.hero__rating p { font-size: .85rem; color: var(--on-dark-2); }
.hero__rating strong { color: #fff; font-weight: 600; }

/* Trust strip pinned under the hero */
.trustbar { position: relative; z-index: 1; background: var(--ink-2); border-top: 1px solid var(--line-dark); }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar__item {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.15rem 1.4rem; border-left: 1px solid var(--line-dark);
  font-size: .87rem; color: var(--on-dark-2);
}
.trustbar__item:first-child { border-left: 0; padding-left: 0; }
.trustbar__item .icon { width: 1.15rem; height: 1.15rem; color: var(--accent-light); stroke-width: 2; }
@media (max-width: 900px) {
  .trustbar__grid { grid-template-columns: 1fr 1fr; }
  .trustbar__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trustbar__item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 520px) {
  .trustbar__grid { grid-template-columns: 1fr; }
  .trustbar__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); }
  .trustbar__item:first-child { border-top: 0; }
}

/* ---------- Page hero (inner pages) ---------- */
.pagehero { position: relative; background: var(--ink); color: var(--on-dark); isolation: isolate; }
.pagehero__media { position: absolute; inset: 0; z-index: 0; }
.pagehero__media .ph { width: 100%; height: 100%; }
.pagehero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, var(--ink) 6%, rgba(45,49,49,.9) 38%, rgba(45,49,49,.6) 100%);
}
.pagehero__inner {
  position: relative; z-index: 1; max-width: 62ch;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.pagehero__title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.035em; }
.pagehero__lead { margin-top: 1.15rem; color: rgba(255,255,255,.78); font-size: 1.06rem; }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs { background: var(--white); border-bottom: 1px solid var(--line); font-size: .82rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-block: .9rem; color: var(--text-3); }
.crumbs li + li::before { content: '/'; margin-right: .45rem; color: var(--line-2); }
.crumbs a { color: var(--text-2); transition: color .15s var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ---------- Stats ---------- */
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.stats__item { padding: clamp(1.6rem, 3vw, 2.4rem) 1.3rem; border-left: 1px solid var(--line); }
.stats__item:first-child { border-left: 0; }
.stats__value {
  font-family: var(--font-head); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800;
  letter-spacing: -.04em; color: var(--ink); line-height: 1;
}
.stats__value span:last-child { color: var(--accent); }
.stats__label { margin-top: .55rem; font-size: .84rem; color: var(--text-2); }
.section--dark .stats__grid { border-color: var(--line-dark); }
.section--dark .stats__item { border-left-color: var(--line-dark); }
.section--dark .stats__value { color: #fff; }
.section--dark .stats__value span:last-child { color: var(--accent-light); }
.section--dark .stats__label { color: var(--on-dark-2); }
@media (max-width: 780px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__item:nth-child(odd) { border-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .stats__item:nth-child(n+3) { border-top-color: var(--line-dark); }
}
/* Two columns on a small phone leaves ~140px a cell; give the labels their
   width back by trimming the padding rather than shrinking the type. */
@media (max-width: 480px) {
  .stats__item { padding: 1.45rem .9rem; }
  .stats__label { margin-top: .45rem; }
}

/* ==========================================================================
   Service cards — photo-led
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card__media { aspect-ratio: 16 / 10; position: relative; }
.card__media img { transition: transform .6s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__badge {
  position: absolute; left: .8rem; top: .8rem; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  background: rgba(45,49,49,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm); color: #fff;
}
.card__badge .icon { width: 19px; height: 19px; stroke-width: 1.6; }
.card__body { padding: 1.45rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.16rem; margin-bottom: .5rem; letter-spacing: -.024em; }
.card__text { color: var(--text-2); font-size: .93rem; flex: 1; }
.card__link {
  margin-top: 1.15rem; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--accent);
  transition: gap .2s var(--ease);
}
.card:hover .card__link { gap: .7rem; }
.card__link::after { content: ''; position: absolute; inset: 0; }
.card__link .icon { width: .95rem; height: .95rem; }

/* ---------- Split / feature ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.split--media-left { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split--media-right, .split--media-left { grid-template-columns: 1fr; } }

.figure { position: relative; }
.figure .ph { border-radius: var(--r); aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.figure--tall .ph { aspect-ratio: 3 / 4; }
.figure--square .ph { aspect-ratio: 1; }
.figure__badge {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .85rem 1.05rem; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: .8rem;
}
.figure__badge .icon { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }
.figure__badge strong { display: block; font-family: var(--font-head); font-size: .95rem; line-height: 1.25; }
.figure__badge span { font-size: .82rem; color: var(--text-2); }

/* Stacked/offset pair of photos */
.figstack { position: relative; padding-bottom: 3.5rem; padding-right: 3.5rem; }
.figstack__a .ph { border-radius: var(--r); aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.figstack__b {
  position: absolute; right: 0; bottom: 0; width: 46%;
  border-radius: var(--r); overflow: hidden;
  border: 5px solid #fff; box-shadow: var(--shadow);
}
.figstack__b .ph { aspect-ratio: 1; border-radius: var(--r-sm); }
@media (max-width: 560px) { .figstack { padding-bottom: 2.5rem; padding-right: 2rem; } }

.checklist { display: grid; gap: .8rem; margin-top: 1.7rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; }
.checklist .icon {
  width: 1.25rem; height: 1.25rem; color: var(--accent);
  stroke-width: 3; margin-top: .18rem;
}
.section--dark .checklist li { color: var(--on-dark-2); }
.section--dark .checklist .icon { color: var(--accent-light); }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.value { background: #fff; padding: 1.9rem 1.7rem; }
.value h3 { font-size: 1.1rem; margin-bottom: .6rem; letter-spacing: -.022em; }
.value p { color: var(--text-2); font-size: .93rem; }
.value__num {
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: .9rem;
}
.section--dark .values { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .value { background: var(--ink-2); }
.section--dark .value p { color: var(--on-dark-2); }
.section--dark .value__num { color: var(--accent-light); }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem 1.6rem; }
.process__step { position: relative; padding-top: 1.9rem; border-top: 2px solid var(--ink); }
.process__num {
  position: absolute; top: -.85rem; left: 0;
  font-family: var(--font-head); font-weight: 800; font-size: .75rem; letter-spacing: .09em;
  background: var(--ink); color: #fff; padding: .2rem .5rem; border-radius: var(--r-xs);
}
.process__step h3 { font-size: 1.08rem; margin-bottom: .5rem; letter-spacing: -.022em; }
.process__step p { color: var(--text-2); font-size: .92rem; }
.section--dark .process__step { border-top-color: var(--accent); }
.section--dark .process__num { background: var(--accent); }
.section--dark .process__step p { color: var(--on-dark-2); }

/* ---------- Testimonials ---------- */
.tcarousel { position: relative; }
.tcarousel__track {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: none; -ms-overflow-style: none;
}
.tcarousel__track::-webkit-scrollbar { display: none; }
.tcard {
  flex: 0 0 min(420px, 85vw); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column;
}
.section--dark .tcard { background: var(--ink-2); border-color: var(--line-dark); }
.tcard__stars { display: flex; gap: .1rem; color: var(--accent); margin-bottom: 1rem; }
.section--dark .tcard__stars { color: var(--accent-light); }
.tcard__stars .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.tcard__quote { font-size: 1rem; line-height: 1.6; flex: 1; color: var(--text); }
.section--dark .tcard__quote { color: var(--on-dark); }
.tcard__meta { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.section--dark .tcard__meta { border-color: var(--line-dark); }
.tcard__avatar {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--accent-tint); color: var(--accent);
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
}
.section--dark .tcard__avatar { background: rgba(255,255,255,.08); color: var(--accent-light); }
.tcard__name { font-family: var(--font-head); font-weight: 700; font-size: .94rem; }
.section--dark .tcard__name { color: #fff; }
.tcard__job { font-size: .83rem; color: var(--text-3); }
/* Was missed when the rest of the card got its dark-section treatment, so
   this line sat at 2.95:1 on the navy carousel. */
.section--dark .tcard__job { color: var(--on-dark-2); }
.tcarousel__nav { display: flex; gap: .5rem; margin-top: 1.1rem; }
.tcarousel__btn {
  width: 42px; height: 42px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: inherit;
  display: grid; place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.tcarousel__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.tcarousel__btn[disabled] { opacity: .3; cursor: not-allowed; }
.tcarousel__btn:first-child .icon { transform: rotate(180deg); }
.section--dark .tcarousel__btn { border-color: var(--line-dark-2); }
.section--dark .tcarousel__btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .58rem; margin-bottom: 2rem; }
.filters button {
  padding: .5rem 1rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--text-2);
  transition: all .18s var(--ease);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.grid-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.gitem {
  position: relative; border-radius: var(--r); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); padding: 0; display: block; width: 100%; background: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.gitem .ph { aspect-ratio: 4 / 3; }
.gitem img { transition: transform .6s var(--ease-out); }
.gitem:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gitem:hover img { transform: scale(1.05); }
.gitem__cap {
  position: absolute; inset: auto 0 0; padding: 3rem 1.1rem 1rem; text-align: left;
  background: linear-gradient(to top, rgba(45,49,49,.9), rgba(45,49,49,.35) 55%, transparent);
  color: #fff;
}
.gitem__cap strong { display: block; font-family: var(--font-head); font-size: 1rem; letter-spacing: -.02em; }
.gitem__cap span { font-size: .82rem; color: rgba(255,255,255,.72); }
.gitem[hidden] { display: none; }
/* Let the first tile run wide on larger screens for a less uniform grid */
@media (min-width: 900px) {
  .grid-gallery--feature > .gitem:first-child { grid-column: span 2; }
  .grid-gallery--feature > .gitem:first-child .ph { aspect-ratio: 16 / 9; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(18,20,20,.95); padding: 1.5rem; opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 78vh; border-radius: var(--r); }
.lightbox__cap { color: #fff; text-align: center; margin-top: 1rem; font-family: var(--font-head); }
.lightbox__cap span { display: block; font-family: var(--font-body); font-size: .84rem; color: var(--on-dark-2); margin-top: .2rem; font-weight: 400; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 46px; height: 46px; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; transition: background .18s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev .icon { transform: rotate(180deg); }

/* ---------- Accordion ---------- */
.accordion { max-width: 840px; border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 1.03rem; color: var(--ink);
  letter-spacing: -.022em; transition: color .18s var(--ease);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); transition: transform .28s var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { padding-bottom: 1.35rem; color: var(--text-2); max-width: 70ch; font-size: .96rem; }
.section--dark .accordion, .section--dark .accordion__item { border-color: var(--line-dark); }
.section--dark .accordion__trigger { color: #fff; }
.section--dark .accordion__icon { color: var(--accent-light); }
.section--dark .accordion__panel { color: var(--on-dark-2); }

/* ---------- CTA strip ----------
   Always the last block in <main>, and the footer below it shares the same
   ink background — the hairline is what keeps them from reading as one
   undifferentiated slab. */
.ctastrip {
  background: var(--ink); color: var(--on-dark-2);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--line-dark);
}
.ctastrip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
/* Let the copy grow but stop it crowding the buttons off onto their own row
   until there genuinely isn't space for both. Both stay shrinkable, or the
   buttons push the page sideways under ~430px. */
.ctastrip__inner > :first-child { flex: 1 1 30rem; min-width: 0; max-width: 60ch; }
.ctastrip h2 { font-size: clamp(1.55rem, 2.7vw, 2.3rem); color: #fff; letter-spacing: -.03em; }
.ctastrip p { margin-top: .7rem; max-width: 54ch; }
.ctastrip__actions { display: flex; flex-wrap: wrap; gap: .7rem; flex: 0 1 auto; min-width: 0; }

/* ---------- Areas ---------- */
.areagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1.1rem; }
.areacard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.5rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease);
}
.areacard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.areacard h3 { display: flex; align-items: center; gap: .45rem; font-size: 1.06rem; margin-bottom: .5rem; letter-spacing: -.022em; }
.areacard h3 .icon { color: var(--accent); width: 1.05rem; height: 1.05rem; }
.areacard p { font-size: .89rem; color: var(--text-2); }
.areacard a::after { content: ''; position: absolute; inset: 0; }
.areacard__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .95rem; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li, .chips a {
  display: inline-block; padding: .45rem .9rem; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line); font-size: .86rem; color: var(--text-2);
  transition: all .18s var(--ease);
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }
.section--dark .chips li, .section--dark .chips a { background: rgba(255,255,255,.05); border-color: var(--line-dark); color: var(--on-dark-2); }
.section--dark .chips a:hover { border-color: var(--accent-light); color: #fff; }

/* ---------- Prose + sidebar ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.45rem, 2.5vw, 1.95rem); margin-top: 2.6rem; letter-spacing: -.028em; }
.prose h3 { font-size: 1.18rem; margin-top: 2rem; }
.prose p { color: var(--text-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose__lead { font-size: 1.14rem; color: var(--text) !important; line-height: 1.55; }

.sidebar { position: sticky; top: calc(var(--header-h) + 1.25rem); display: grid; gap: 1rem; }
.sidebox { background: var(--stone); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.sidebox--dark { background: var(--ink); border-color: var(--ink); color: var(--on-dark-2); }
.sidebox--dark h3 { color: #fff; }
.sidebox h3 { font-size: 1.05rem; margin-bottom: .85rem; letter-spacing: -.022em; }
.sidebox ul { display: grid; gap: .05rem; }
.sidebox ul a {
  display: block; padding: .48rem .65rem; margin-inline: -.65rem; border-radius: var(--r-sm);
  font-size: .91rem; color: var(--text-2); transition: all .16s var(--ease);
}
.sidebox ul a:hover, .sidebox ul a.is-active { background: #fff; color: var(--accent); }
.sidebox ul a.is-active { font-weight: 600; box-shadow: var(--shadow-xs); }
.sidebox p { font-size: .91rem; margin-bottom: 1rem; }
.sidebox .btn { width: 100%; }
.sidebox__phone {
  display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .6rem;
  min-height: 44px; padding: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: #fff;
}
.sidebox__phone .icon { color: var(--accent-2); }

.hourslist { display: grid; }
.hourslist li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; font-size: .91rem; border-bottom: 1px solid var(--line);
}
.hourslist li:last-child { border-bottom: 0; }
.hourslist span:first-child { color: var(--text-2); }
.hourslist span:last-child { color: var(--ink); font-weight: 500; }

.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) {
  .layout-aside { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ---------- Forms ---------- */
.formcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm);
}
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .85rem; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: #fff; font-size: .95rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 135px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23545c67' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 10px; padding-right: 2.3rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,111,98,.13);
}
.field .error { font-size: .79rem; color: var(--accent-dk); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--accent); }
.field.has-error .error { display: block; }
.field__hint { font-size: .83rem; color: var(--text-3); }
.formcard__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.formcard__note { font-size: .83rem; color: var(--text-3); max-width: 40ch; }
.form-success { display: none; text-align: center; padding: 2.5rem 1rem; }
.form-success.is-visible { display: block; }
.form-success .icon, .form-success-icon {
  width: 3rem; height: 3rem; color: #fff; background: var(--accent);
  border-radius: 50%; padding: .75rem; margin: 0 auto 1.2rem; stroke-width: 3;
}
.form-success h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.form-success p { color: var(--text-2); max-width: 46ch; margin-inline: auto; }
/* Spam honeypot. Uses the clip pattern rather than a large negative offset,
   which would extend the page's scrollable area sideways. */
.hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }

.contactlist { display: grid; gap: 1.25rem; }
.contactlist li { display: flex; gap: .9rem; align-items: flex-start; }
.contactlist .icon {
  width: 2.5rem; height: 2.5rem; padding: .65rem; border-radius: var(--r-sm);
  background: var(--accent-tint); color: var(--accent); flex: none; stroke-width: 1.6;
}
.contactlist strong { display: block; font-family: var(--font-head); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .15rem; }
.contactlist a, .contactlist span { font-size: 1.02rem; font-weight: 500; }
.contactlist a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--on-dark-2); }

.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.15fr; gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__col h3 {
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer__col ul { display: grid; gap: .55rem; }
.footer__col a { font-size: .9rem; transition: color .16s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer .logo img { height: 58px; }
.footer__blurb { font-size: .9rem; margin-top: 1.1rem; max-width: 40ch; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark); display: grid; place-items: center;
  transition: all .18s var(--ease);
}
.footer__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer__contact li { display: flex; align-items: center; gap: .6rem; }
.footer__contact .icon { color: var(--accent-light); }
.footer__hours-title { margin-top: 1.7rem; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.footer__hours span:last-child { color: rgba(255,255,255,.55); }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .82rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__legal a:hover { color: #fff; }
/* Four columns get squeezed to ~170px between 960 and 1100, which breaks the
   longer service and neighbourhood names onto awkward lines. */
@media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink); border-top: 1px solid var(--line-dark);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .9rem .5rem; color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  }
  .callbar a:first-child { background: var(--accent); }
  .callbar .icon { width: 1rem; height: 1rem; }
  .footer__bottom { padding-bottom: 4.75rem; }
}

/* ---------- Reveal on scroll ----------
   Scoped to .js-anim, which the inline head script sets and then removes
   again if main.js never arrives. Without it nothing is hidden, so a broken
   or blocked script degrades to a fully visible, unanimated page rather
   than a blank one. */
.js-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .reveal[data-delay="1"] { transition-delay: .07s; }
.js-anim .reveal[data-delay="2"] { transition-delay: .14s; }
.js-anim .reveal[data-delay="3"] { transition-delay: .21s; }

@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;
  }
  .js-anim .reveal { opacity: 1; transform: none; }
  .js-anim .ph > img { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .header, .topbar, .callbar, .ctastrip__actions, .navtoggle, .filters { display: none !important; }
  body { font-size: 12pt; }
  .hero, .pagehero, .ctastrip, .footer { background: #fff; color: #000; }
  .hero__media, .pagehero__media { display: none; }
  .hero__title, .pagehero__title, .ctastrip h2 { color: #000; }
}