/* -------------------------------------------------------------------------
   EDIT THIS FILE, NOT site.min.css
   The theme serves assets/css/site.min.css when it exists. Rebuild after editing:
       npm run build
   ------------------------------------------------------------------------- */
/* =========================================================================
   All Seasons Garage Door — redesign design system
   Vanilla CSS. Ported from the Next.js prototype; no build step required.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* brand — sampled from the four-season logo artwork */
  --ink:       #0b0b0d;
  --ink-soft:  #16161a;
  --ink-mute:  #6b6b76;
  --paper:     #ffffff;
  --bone:      #f4f2ef;
  --bone-deep: #e8e4df;
  --line:      #e2ded8;

  --brand:      #e11b22;
  --brand-dark: #b0141a;
  --brand-glow: #ff3b42;

  /* the logo's arc, used as a system: every service owns one season */
  --winter: #3ba0db;
  --spring: #5e9e31;
  --summer: #f2a71b;
  --fall:   #da5626;

  /* the hairline under the very top of every page */
  --season-bar: linear-gradient(90deg,
    var(--winter) 0%, var(--winter) 25%,
    var(--spring) 25%, var(--spring) 50%,
    var(--summer) 50%, var(--summer) 75%,
    var(--fall)   75%, var(--fall)  100%);

  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 84rem;          /* 1344px */
  --pad: 1.25rem;
  --strip-h: 2.25rem;      /* the utility strip above the header, lg+ only */
  --header-h: 6rem;

  --r-sm: 0.75rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 1.75rem;

  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --t: 0.3s var(--ease-out-expo);
}

@media (min-width: 768px) {
  :root { --pad: 2.5rem; }
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* html is the scrolling element, so the guard against sideways drift has to
     live here. `clip` rather than `hidden`: hidden would turn the viewport into
     a scroll container and break position:sticky. */
  overflow-x: clip;
  /* the fixed header + strip need to clear anchor targets */
  scroll-padding-top: calc(var(--header-h) + var(--strip-h));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

/* The UA rule for [hidden] is a bare `display: none` on the element selector, so
   any class here that sets `display` beats it — which silently leaves the
   lightbox and the mobile menu painted over the page. Make the attribute win. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

p, ul, ol, dl, figure, blockquote { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--brand); color: #fff; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- TYPE SCALE */
/* The logo's signature heavy italic condensed voice. Archivo carries a width
   axis, so the wordmark's compression is real rather than a transform. */
.font-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  line-height: 0.95;
}

.display-xl   { font-size: clamp(2.75rem, 8.5vw, 8.5rem); line-height: 0.87; }
.display-hero { font-size: clamp(2.35rem, 6.6vw, 6.4rem); line-height: 0.9; }
.display-lg   { font-size: clamp(2.25rem, 6vw, 5.5rem);   line-height: 0.9; }
.display-md   { font-size: clamp(1.85rem, 4vw, 3.5rem);   line-height: 0.95; }
.display-sm   { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--mute { color: var(--ink-mute); }
.eyebrow--onDark { color: var(--brand); }

.lead { font-size: 1.125rem; line-height: 1.7; color: var(--ink-mute); }
@media (min-width: 768px) { .lead { font-size: 1.25rem; } }

.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* ---------------------------------------------------------------- LAYOUT */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: 6rem; }
@media (min-width: 768px) { .section { padding-block: 8rem; } }

.section--tight { padding-block: 3.5rem; }
.section--bone  { background: var(--bone); }
.section--paper { background: var(--paper); }
.section--ink   { background: var(--ink); color: #fff; }

/* section heading block: eyebrow + big title, with an optional aside */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.sec-title { margin-top: 1.25rem; }
.sec-aside { max-width: 24rem; line-height: 1.7; color: var(--ink-mute); }
.section--ink .sec-aside { color: rgba(255,255,255,0.6); }

/* ---------------------------------------------------------------- MOTION */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero: each slat rolls up past its own top edge, so travel grows down the door. */
@keyframes door-up {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--door-travel, -110%)); }
}

@keyframes rise     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lift-in  { from { transform: translateY(106%); }             to { transform: none; } }
@keyframes reveal-up    { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(0.94); }      to { opacity: 1; transform: none; } }
@keyframes streak   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Entrance animations, time-based — only above the fold, where there is no
   scroll position to key off yet. */
.rise { animation: rise 0.9s var(--ease-out-expo) both; animation-delay: var(--d, 0s); }
.lift { animation: lift-in 1s var(--ease-out-expo) both; animation-delay: var(--d, 0s); }
.lift-mask { display: block; overflow: hidden; }

/* Scroll reveals.
   Content is styled VISIBLE at rest and animates only where the browser
   supports scroll-driven timelines. A reveal can therefore never leave text
   permanently invisible because a script was slow, blocked, or the tab was
   backgrounded — and it costs no main-thread work. */
.reveal, .reveal--left, .reveal--right, .reveal--scale { opacity: 1; }
.stagger > * { --i: 0; min-width: 0; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal, .reveal--left, .reveal--right, .reveal--scale {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 42%;
    }
    .reveal--scale { animation-name: reveal-scale; }

    /* Sideways reveals only where there is room. On a narrow screen the content
       box already fills the shell, so parking it 32px to the side before it
       animates would push the page into horizontal scroll. */
    @media (min-width: 768px) {
      .reveal--left  { animation-name: reveal-left; }
      .reveal--right { animation-name: reveal-right; }
    }

    /* children step in one after another as the group scrolls through */
    .stagger > * {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry calc(2% + var(--i, 0) * 5%) entry calc(44% + var(--i, 0) * 5%);
    }
  }
}

/* grain overlay used on the dark statement blocks */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Without this an icon's line-box can push the label to a second line. */
  white-space: nowrap;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:active { transform: scale(0.97); }

/* the sheen that sweeps across on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: transform 0.7s var(--ease-out-expo);
}
.btn:hover::before { transform: translateX(100%); }

/* svg children are display:block, so the label needs its own flex row */
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn__label { display: inline-flex; align-items: center; gap: 0.5rem; }

.btn--sm { padding: 0.5rem 1rem;    font-size: 0.82rem; }
.btn--lg { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
.btn--block { display: flex; width: 100%; }

.btn--solid {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(225,27,34,0.65);
}
.btn--solid:hover { background: var(--brand-dark); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-soft); }

.btn--ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.2); }
.btn--ghost.btn--hairline { border: 1px solid rgba(255,255,255,0.4); }

.btn--outline { border: 2px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--bone); }

.btn__arrow { transition: transform var(--t); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- SEASON HAIRLINE + STRIP */
.season-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 4px;
  background: var(--season-bar);
}

.utility {
  display: none;
  position: fixed;
  inset-inline: 0;
  top: 4px;
  z-index: 50;
  background: var(--ink);
  color: #fff;
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--strip-h);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.utility__left, .utility__right { display: flex; align-items: center; gap: 1.5rem; }
.utility__left { color: rgba(255,255,255,0.7); gap: 0.5rem; }
.utility__hours { color: rgba(255,255,255,0.7); }
.utility__tel { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; transition: color var(--t); }
.utility__tel:hover { color: var(--brand); }
.utility .ico { color: var(--brand); width: 0.875rem; height: 0.875rem; }

@media (min-width: 1024px) { .utility { display: block; } }

/* ---------------------------------------------------------------- HEADER */
.header {
  position: fixed;
  inset-inline: 0;
  top: 4px;
  z-index: 50;
  background: transparent;
  transition: background-color 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}
@media (min-width: 1024px) {
  .header { top: calc(4px + var(--strip-h)); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  transition: height 0.5s var(--ease-out-expo);
}
@media (min-width: 1024px) { .header__inner { height: 6rem; } }

/* Every page opens on a dark hero, so the bar rides light until you scroll. */
.header.is-stuck,
.header.is-panel {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 0 var(--line), 0 12px 40px -24px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
}
.header.is-stuck .header__inner { height: 4rem; }

/* brand lockup ---------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand__mark {
  height: 3rem;
  width: auto;
  flex: none;
  transition: height 0.5s var(--ease-out-expo);
}
@media (min-width: 1024px) { .brand__mark { height: 4rem; } }
.header.is-stuck .brand__mark { height: 2.75rem; }

.brand__text { display: none; flex-direction: column; line-height: 1; }
@media (min-width: 640px) { .brand__text { display: flex; } }

.brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: 1.25rem;
  color: #fff;
  transition: color 0.5s var(--ease-out-expo);
}
.brand__name em { font-style: inherit; color: var(--brand); }
.brand__sub {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.6);
  transition: color 0.5s var(--ease-out-expo);
}
@media (min-width: 1024px) {
  .brand__name { font-size: 1.5rem; }
  .brand__sub  { font-size: 0.68rem; }
}
.header.is-stuck .brand__name,
.header.is-panel .brand__name { color: var(--ink); }
.header.is-stuck .brand__sub,
.header.is-panel .brand__sub { color: var(--ink-mute); }

/* nav ------------------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 0.25rem; }
}

/* Deliberately NOT position:relative. The mega panels are DOM children of the
   nav item so that hovering one keeps it open, but they must size themselves
   against the HEADER, not against a 100px-wide nav item — otherwise the four
   service columns get 25px each and print on top of each other. `.header` is
   position:fixed, so it is the containing block they fall back to. */
.nav__item { position: static; }

.nav__link {
  /* the active underline anchors here, which is why the nav item above does
     not need to be a positioning context */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s ease;
}
.nav__link:hover { color: #fff; }
.header.is-stuck .nav__link,
.header.is-panel .nav__link { color: var(--ink); }
.header.is-stuck .nav__link:hover,
.header.is-panel .nav__link:hover { color: var(--brand); }
.nav__link.is-active { color: var(--brand); }

/* the active underline */
.nav__link.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 1rem;
  bottom: -0.125rem;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
}

.nav__caret { width: 0.875rem; height: 0.875rem; transition: transform var(--t); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 10px 30px -12px rgba(225,27,34,0.8);
  transition: background-color var(--t);
}
.nav__cta:hover { background: var(--ink); }
.nav__cta .btn__arrow { transition: transform var(--t); }
.nav__cta:hover .btn__arrow { transform: translate(2px, -2px); }

/* mega panels ----------------------------------------------------------- */
.panel {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  border-top: 1px solid var(--line);
  /* Opaque, not the 0.97 white the rest of the chrome uses. This panel drops
     over the hero, and at any transparency the headline behind it ghosts
     straight through the town names. */
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35);
  animation: panel-in 0.28s var(--ease-out-expo) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .nav__item.is-open > .panel { display: block; }
}
.panel__inner { padding-block: 2rem; }

.panel__services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0.5rem;
}
.panel__svc {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--r-lg);
  transition: background-color 0.2s ease;
}
.panel__svc:hover { background: var(--bone); }
.panel__svc-bar {
  height: 4px;
  width: 2rem;
  border-radius: 999px;
  background: var(--season, var(--winter));
  transition: width var(--t);
}
.panel__svc:hover .panel__svc-bar { width: 3.5rem; }
.panel__svc-name {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}
.panel__svc:hover .panel__svc-name { color: var(--brand); }
.panel__svc-blurb { font-size: 0.875rem; line-height: 1.4; color: var(--ink-mute); }

.panel__areas-label {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.panel__areas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}
.panel__area {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.panel__area:hover { background: var(--bone); color: var(--brand); }

/* mobile trigger -------------------------------------------------------- */
.header__mobile { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .header__mobile { display: none; } }

.header__tel-btn {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
}
.header__tel-btn .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }

.burger {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: border-color 0.5s var(--ease-out-expo), color 0.5s var(--ease-out-expo);
}
.header.is-stuck .burger { border-color: rgba(11,11,13,0.15); color: var(--ink); }
.burger .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }

/* mobile overlay -------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  background: var(--ink);
  color: #fff;
  animation: fade-in 0.25s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.2);
}
.mobile-nav__list { padding-top: 1rem; padding-bottom: 4rem; }
.mobile-nav__row { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav__link {
  display: block;
  padding-block: 1.25rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: 2.25rem;
}
.mobile-nav__link.is-active { color: var(--brand); }

/* sublists: the services and towns, folded away behind a toggle */
.mobile-nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.mobile-nav__sub { display: none; padding-bottom: 1rem; }
.mobile-nav__row.is-open .mobile-nav__sub { display: grid; gap: 0.125rem; }
.mobile-nav__row.is-open .mobile-nav__sub-toggle .ico { transform: rotate(180deg); }
.mobile-nav__sub a {
  padding: 0.5rem 0;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
}
.mobile-nav__sub a:hover { color: #fff; }

.mobile-nav__actions { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
.mobile-nav__hours { text-align: center; font-size: 0.875rem; color: rgba(255,255,255,0.5); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(11,11,13,0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nav-scrim.is-on { opacity: 1; }

/* ---------------------------------------------------------------- HERO */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  /* `clip` not `hidden`: hidden would make this a scroll container, which
     breaks the door-panel animation's overflow and any sticky child. */
  overflow: clip;
  background: var(--ink);
  padding-top: 7rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 1024px) { .hero { padding-top: 9rem; } }

.hero__media {
  position: absolute;
  inset: 0;
  bottom: -18%;
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.05);
}

/* Legibility scrims.
   Four of them stack, so their alphas multiply rather than add: at 0.8, 0.8 and
   0.7 the photo is already 96% gone. They are tuned as a set — weighted into
   the bottom-left where the copy sits, and nearly clear through the top right,
   which is where the house and the sky actually are. */
.hero__scrim,
.hero__scrim--side,
.hero__scrim--glow,
.hero__scrim--top { position: absolute; inset: 0; pointer-events: none; }
.hero__scrim       { background: linear-gradient(to top, var(--ink) 6%, rgba(11,11,13,0.55) 42%, rgba(11,11,13,0.06) 78%, transparent); }
.hero__scrim--side { background: linear-gradient(100deg, rgba(11,11,13,0.72) 0%, rgba(11,11,13,0.24) 42%, transparent 66%); }
.hero__scrim--glow { background: radial-gradient(110% 70% at 10% 92%, rgba(225,27,34,0.18), transparent 58%); }
/* keeps the header legible across the roofline, and nothing more */
.hero__scrim--top  { inset: 0 0 auto 0; height: 8rem; background: linear-gradient(to bottom, rgba(11,11,13,0.52), transparent); }

/* the door that lifts on load ------------------------------------------- */
.hero__door {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.hero__slat {
  position: absolute;
  inset-inline: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: var(--ink);
  animation: door-up 1.2s var(--ease-in-out-quint) var(--delay, 0s) forwards;
}

.hero__body { position: relative; z-index: 20; width: 100%; }

.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
.pill__dot { position: relative; display: flex; width: 0.5rem; height: 0.5rem; }
.pill__dot i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--brand);
  opacity: 0.75;
  animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.pill__dot b { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brand); }
.pill .stars { display: inline-flex; gap: 0.125rem; }
.pill .stars .ico { width: 0.875rem; height: 0.875rem; fill: var(--summer); stroke: var(--summer); }

.hero h1 { margin-top: 1.75rem; color: #fff; }
/* the last line of a headline, in the brand red */
.hero__accent { color: var(--brand); }
.hero__lead {
  margin-top: 1.75rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}
@media (min-width: 768px) { .hero__lead { font-size: 1.25rem; } }

.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* the logo motif, spelled out */
.hero__seasons {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 48rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.1);
  list-style: none;
  padding: 0;
}
@media (min-width: 640px) { .hero__seasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__season {
  background: rgba(11,11,13,0.72);
  backdrop-filter: blur(8px);
  padding: 1rem 1.25rem;
  transition: background-color var(--t);
}
.hero__season:hover { background: rgba(11,11,13,0.9); }
.hero__season i {
  display: block;
  height: 4px;
  width: 1.75rem;
  border-radius: 999px;
  background: var(--season, var(--winter));
  transition: width 0.5s var(--ease-out-expo);
}
.hero__season:hover i { width: 3rem; }
.hero__season b {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.hero__scroll {
  position: absolute;
  inset-inline: 0;
  bottom: 1.25rem;
  z-index: 20;
  display: none;
  justify-content: center;
}
@media (min-width: 1024px) { .hero__scroll { display: flex; } }
.hero__scroll span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: bounce 1.6s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(-20%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* ---------------------------------------------------------------- PAGE HERO */
.page-hero {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: #fff;
  padding-top: 9rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) { .page-hero { padding-top: 11rem; padding-bottom: 5rem; } }

.page-hero__img { position: absolute; inset: 0; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
/* dark where the copy sits, clearer up top so the photo reads */
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 15%, rgba(11,11,13,0.72) 55%, rgba(11,11,13,0.35));
}
.page-hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(100% 70% at 10% 100%, rgba(225,27,34,0.22), transparent 58%);
}
.page-hero__inner { position: relative; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.crumbs a { transition: color var(--t); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: rgba(255,255,255,0.8); }

.page-hero .eyebrow {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--season, var(--winter));
}
.page-hero .eyebrow i {
  height: 4px; width: 2rem;
  border-radius: 999px;
  background: var(--season, var(--winter));
}
.page-hero__title { margin-top: 1.25rem; max-width: 20ch; }
.page-hero__lead {
  margin-top: 1.75rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
}
.page-hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------------------------------------------------------------- MARQUEE */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__run {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  animation: marquee 38s linear infinite;
}
.marquee--slow .marquee__run { animation-duration: 70s; }
.marquee__item { display: flex; flex: none; align-items: center; gap: 2rem; }
.marquee__item > span:first-child { white-space: nowrap; }
.marquee__sep { color: rgba(225,27,34,0.7); }

.trust {
  position: relative;
  z-index: 10;
  border-block: 1px solid rgba(255,255,255,0.1);
  background: var(--ink);
  padding-block: 1rem;
  color: #fff;
}
.trust .marquee__run {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
@media (min-width: 768px) { .trust .marquee__run { font-size: 1rem; } }

/* ---------------------------------------------------------------- STATEMENT */
.statement {
  position: relative;
  overflow: clip;
  background: var(--bone);
  /* light bottom padding on purpose: the brands strip continues this block */
  padding-top: 6rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px) { .statement { padding-top: 8rem; padding-bottom: 4rem; } }

.statement h2 { margin-top: 1.75rem; max-width: 17ch; }
.statement h2 span { color: var(--ink-mute); }

.statement__grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .statement__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .statement__copy  { grid-column: span 7; }
  .statement__stats { grid-column: span 5; }
}
.statement__copy p { max-width: 42rem; }
.statement__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--line);
  margin: 0;
}
.stats > div { background: var(--bone); padding: 2rem 1.5rem; }
.stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
}
@media (min-width: 768px) { .stats dd { font-size: 3.75rem; } }
.stats dt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- BRANDS */
.brands { background: var(--bone); padding-bottom: 5rem; }
@media (min-width: 768px) { .brands { padding-bottom: 6rem; } }
.brands--dark {
  border-block: 1px solid rgba(255,255,255,0.1);
  background: var(--ink);
  color: #fff;
  padding-block: 4rem;
}
@media (min-width: 768px) { .brands--dark { padding-block: 5rem; } }

.brands__label { text-align: center; color: var(--ink-mute); }
.brands--dark .brands__label { color: rgba(255,255,255,0.45); }

.brands .marquee { margin-top: 2rem; align-items: center; }
.brands__tile {
  display: grid;
  place-items: center;
  height: 6rem;
  width: 13rem;
  padding-inline: 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform var(--t);
}
/* white plates on the dark band: the real manufacturer marks carry their own
   colours and a baked-in white background, so a plate is the honest way to
   show them rather than knocking them out. */
.brands--dark .brands__tile { border-color: transparent; background: #fff; }
.brands__tile:hover { transform: translateY(-4px); }
.brands__tile img { max-height: 2.25rem; width: auto; max-width: 8.5rem; object-fit: contain; }

.brands__note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.brands--dark .brands__note { color: rgba(255,255,255,0.5); }

/* ---------------------------------------------------------------- SERVICE CARDS */
.svc-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the first card runs wide so the grid doesn't read as a plain list */
  .svc-grid > .is-wide { grid-column: span 2; }
}

.svc-card {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 19rem;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  padding: 1.75rem;
  color: #fff;
}
.svc-card__img { position: absolute; inset: 0; }
.svc-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: transform 0.7s var(--ease-out-expo), opacity 0.7s ease;
}
.svc-card:hover .svc-card__img img { transform: scale(1.05); opacity: 0.85; }
.svc-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink), rgba(11,11,13,0.6), rgba(11,11,13,0.05));
}
.svc-card__accent {
  position: absolute;
  top: 0; left: 0;
  height: 6px;
  width: 4rem;
  background: var(--season, var(--winter));
  transition: width 0.5s var(--ease-out-expo);
}
.svc-card:hover .svc-card__accent { width: 100%; }
.svc-card__body { position: relative; }
.svc-card__body h3 { font-size: 1.875rem; }
@media (min-width: 768px) { .svc-card__body h3 { font-size: 2.25rem; } }
.svc-card__body p {
  margin-top: 0.75rem;
  max-width: 24rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
}
.svc-card__more {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.svc-card__more .ico { transition: transform var(--t); }
.svc-card:hover .svc-card__more .ico { transform: translate(4px, -4px); }

/* compact list used on 404 and the services index sidebar */
.svc-mini-grid { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .svc-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-mini {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.svc-mini:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(0,0,0,0.5);
}
.svc-mini__ico {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--bone);
  color: var(--season, var(--winter));
}
.svc-mini__ico .ico { width: 1.25rem; height: 1.25rem; }
.svc-mini b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; }
.svc-mini small { display: block; margin-top: 0.25rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-mute); }

/* ---------------------------------------------------------------- SEASON SWEEP */
/* Four full-bleed bands in the logo's colours, stacked flush so they fill the
   whole divider, all four sweeping open together.

   Deliberately NOT on a scroll timeline: those are tied to scroll position, so
   the bands collapse again the moment you scroll back above them. This plays
   once, when the divider first comes into view, and stays put. */
.sweep { display: flex; flex-direction: column; background: var(--ink); }
.sweep--light { background: var(--bone); }
.sweep__band {
  display: block;
  height: 2rem;
  width: 100%;
  background: var(--season, var(--winter));
  transform-origin: left;
}
@media (min-width: 768px) { .sweep__band { height: 2.75rem; } }

/* `scripting: enabled` arms the bands at zero width only when JS can actually
   run them, so with JavaScript off they render as a solid block instead of
   never appearing at all. */
@media (scripting: enabled) {
  @media (prefers-reduced-motion: no-preference) {
    [data-sweep] .sweep__band { transform: scaleX(0); }
    /* slow out of the left edge, a burst across the middle, a soft landing */
    [data-sweep][data-played="true"] .sweep__band {
      animation: streak 1.05s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    }
  }
}

/* ---------------------------------------------------------------- WHY US */
.why {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: #fff;
  padding-block: 6rem;
}
@media (min-width: 768px) { .why { padding-block: 8rem; } }

/* soft seasonal glow in the corner */
.why__glow {
  position: absolute;
  top: -10rem; right: -10rem;
  width: 36rem; height: 36rem;
  border-radius: 999px;
  opacity: 0.2;
  filter: blur(64px);
  background: conic-gradient(var(--winter), var(--spring), var(--summer), var(--fall), var(--winter));
  pointer-events: none;
}
.why__inner { position: relative; }
.why h2 { margin-top: 1.25rem; max-width: 16ch; }

.why__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.why__card {
  height: 100%;
  background: var(--ink);
  padding: 2rem;
  transition: background-color 0.5s ease;
}
@media (min-width: 768px) { .why__card { padding: 2.5rem; } }
.why__card:hover { background: var(--ink-soft); }
.why__card-head { display: flex; align-items: baseline; gap: 1rem; }
.why__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--season, var(--winter));
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
.why__card:hover .why__n { opacity: 1; }
.why__card h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .why__card h3 { font-size: 1.5rem; } }
.why__card p { margin-top: 1rem; line-height: 1.7; color: rgba(255,255,255,0.6); }

/* ---------------------------------------------------------------- PROCESS */
.steps { margin-top: 4rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

.step { position: relative; }
.step__rail {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--bone-deep);
  overflow: hidden;
}
.step__rail i {
  display: block;
  height: 4px;
  width: 25%;
  border-radius: 999px;
  background: var(--season, var(--winter));
  transition: width 0.7s var(--ease-out-expo);
}
.step:hover .step__rail i { width: 100%; }
.step__n {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(11,11,13,0.12);
  transition: color 0.5s ease;
}
.step:hover .step__n { color: rgba(11,11,13,0.25); }
.step h3 {
  margin-top: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.step p { margin-top: 0.75rem; line-height: 1.7; color: var(--ink-mute); }

/* ---------------------------------------------------------------- CREDENTIALS */
.creds {
  border-block: 1px solid var(--line);
  background: var(--bone);
  padding-block: 3.5rem;
}
.creds__label { text-align: center; color: var(--ink-mute); }
.creds__list {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) { .creds__list { gap: 1rem; } }
.creds__list li {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 1rem 1.5rem;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.creds__list li:hover {
  border-color: rgba(11,11,13,0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -22px rgba(0,0,0,0.5);
}
.creds__list img { height: 3.5rem; width: auto; object-fit: contain; }
@media (min-width: 768px) { .creds__list img { height: 4rem; } }

/* ---------------------------------------------------------------- AREAS */
.areas__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .areas__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .areas__copy { grid-column: span 5; }
  .areas__list { grid-column: span 7; }
}
.areas__copy h2 { margin-top: 1.25rem; }
.areas__copy p { margin-top: 1.5rem; max-width: 28rem; line-height: 1.7; color: var(--ink-mute); }
.areas__copy .btn { margin-top: 2rem; }

.areas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 640px) { .areas__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.area-chip {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bone);
  padding: 1rem;
  transition: border-color var(--t), background-color var(--t), color var(--t), transform var(--t);
}
.area-chip:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}
.area-chip span { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.area-chip b { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.area-chip .ico--pin { width: 0.875rem; height: 0.875rem; flex: none; color: var(--brand); }
.area-chip .ico--go { width: 1rem; height: 1rem; flex: none; opacity: 0; transition: opacity var(--t); }
.area-chip:hover .ico--go { opacity: 1; }

/* the service-areas page's photo tiles */
.area-tiles { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .area-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.area-tile {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 15rem;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  padding: 1.5rem;
  color: #fff;
  transition: transform var(--t);
}
.area-tile:hover { transform: translateY(-4px); }
.area-tile__img { position: absolute; inset: 0; }
.area-tile__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
  transition: transform 0.7s var(--ease-out-expo), opacity 0.7s ease;
}
.area-tile:hover .area-tile__img img { transform: scale(1.05); opacity: 0.8; }
.area-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink), rgba(11,11,13,0.6), rgba(11,11,13,0.1));
}
.area-tile__accent {
  position: absolute;
  top: 0; left: 0;
  height: 6px;
  width: 3.5rem;
  background: var(--season, var(--winter));
  transition: width 0.5s var(--ease-out-expo);
}
.area-tile:hover .area-tile__accent { width: 100%; }
.area-tile__body { position: relative; }
.area-tile__body .ico--pin { color: var(--brand); width: 1.25rem; height: 1.25rem; }
.area-tile__body h3 { margin-top: 0.75rem; font-size: 1.875rem; }
.area-tile__meta {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.area-tile__meta p { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.55); }
.area-tile__meta .ico { transition: transform var(--t); }
.area-tile:hover .area-tile__meta .ico { transform: translate(4px, -4px); }

/* ---------------------------------------------------------------- ACCORDION */
.acc { border-block: 1px solid var(--line); }
.acc__item + .acc__item { border-top: 1px solid var(--line); }
.acc__q {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
}
.acc__q > span:first-child {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--t);
}
@media (min-width: 768px) { .acc__q > span:first-child { font-size: 1.5rem; } }
.acc__q:hover > span:first-child { color: var(--brand); }
.acc__item.is-open .acc__q > span:first-child { color: var(--brand); }

.acc__ico {
  margin-top: 0.25rem;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 999px;
  border: 2px solid rgba(11,11,13,0.2);
  color: var(--ink);
  transition: transform var(--t), background-color var(--t), border-color var(--t), color var(--t);
}
.acc__q:hover .acc__ico { border-color: var(--brand); color: var(--brand); }
.acc__item.is-open .acc__ico {
  transform: rotate(45deg);
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.acc__ico .ico { width: 1rem; height: 1rem; stroke-width: 3; }

.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out-expo);
}
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p {
  max-width: 48rem;
  padding-bottom: 1.75rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.acc__src {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
}

/* dark variant, used inside the ink sections */
.acc--dark { border-color: rgba(255,255,255,0.12); }
.acc--dark .acc__item + .acc__item { border-color: rgba(255,255,255,0.12); }
.acc--dark .acc__q > span:first-child { color: #fff; }
.acc--dark .acc__ico { border-color: rgba(255,255,255,0.25); color: #fff; }
.acc--dark .acc__a p { color: rgba(255,255,255,0.65); }

/* FAQ section layout */
.faq__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .faq__aside { grid-column: span 4; }
  .faq__body  { grid-column: span 8; }
}
.faq__aside h2 { margin-top: 1.25rem; }
.faq__aside p { margin-top: 1.5rem; line-height: 1.7; color: var(--ink-mute); }
.faq__aside .btn { margin-top: 1.75rem; }

/* the FAQs page: topic filter pills + grouped lists */
.topics {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.topic-pill:hover { border-color: var(--ink); }
.topic-pill.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.topic-pill b { font-variant-numeric: tabular-nums; opacity: 0.55; font-weight: 600; }

.topic-group + .topic-group { margin-top: 4rem; }
.topic-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.topic-group__head h2 { font-size: 2rem; }
.topic-group__head span { font-size: 0.875rem; font-weight: 600; color: var(--ink-mute); }
.topic-group > p { margin-top: 0.5rem; color: var(--ink-mute); }
.topic-group .acc { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- CTA BAND */
.cta-band {
  position: relative;
  overflow: clip;
  background: var(--brand);
  color: #fff;
  padding-block: 5rem;
}
@media (min-width: 768px) { .cta-band { padding-block: 7rem; } }

/* faint oversized mark, bleeding off the edge */
.cta-band__mark {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  height: 28rem;
  width: auto;
  opacity: 0.07;
  pointer-events: none;
}
.cta-band__shade {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 80% 20%, rgba(0,0,0,0.28), transparent 60%);
}
.cta-band__inner { position: relative; }
.cta-band h2 { max-width: 15ch; }
.cta-band p {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}
.cta-band__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.cta-band__hours {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

/* ---------------------------------------------------------------- ARTICLE / ENTRY */
.article { max-width: 52rem; }
.article__hero {
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.article__hero img { width: 100%; height: auto; }

/* Long-form copy: the editor's output and the ported section arrays both land
   here, so every element a WordPress editor can emit needs a rule. */
.entry { font-size: 1.05rem; line-height: 1.8; color: #2a2a31; }
.entry > * + * { margin-top: 1.5rem; }
.entry h2 {
  margin-top: 3rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--ink);
}
.entry h3 {
  margin-top: 2.5rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.entry h4 { margin-top: 2rem; font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.entry a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.entry a:hover { color: var(--brand-dark); }
.entry ul, .entry ol { padding-left: 1.25rem; }
.entry li + li { margin-top: 0.5rem; }
.entry ul { list-style: none; padding-left: 0; }
.entry ul > li {
  position: relative;
  padding-left: 1.75rem;
}
.entry ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 0.65rem; height: 2px;
  border-radius: 999px;
  background: var(--brand);
}
.entry ol { list-style: decimal; }
.entry blockquote {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--brand);
  background: var(--bone);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.125rem;
}
.entry blockquote p + p { margin-top: 1rem; }
.entry img, .entry figure { border-radius: var(--r-lg); overflow: hidden; }
.entry figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-mute); }
.entry table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry th, .entry td { padding: 0.75rem; border: 1px solid var(--line); text-align: left; }
.entry th { background: var(--bone); font-family: var(--font-display); }
.entry hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }
.entry code {
  padding: 0.15em 0.4em;
  border-radius: 0.35rem;
  background: var(--bone);
  font-size: 0.9em;
}

/* value props — the six short promises pulled out of the page copy */
.props { margin-top: 3rem; display: grid; gap: 1px; overflow: hidden; border-radius: var(--r-xl); background: var(--line); }
@media (min-width: 640px) { .props { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .props { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prop { background: var(--paper); padding: 1.75rem; }
.prop__ico {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--season, var(--winter));
}
.prop__ico .ico { width: 1.25rem; height: 1.25rem; }
.prop h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.prop p { margin-top: 0.625rem; font-size: 0.95rem; line-height: 1.7; color: var(--ink-mute); }

/* service page: sticky contents rail beside the body copy */
.svc-layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .svc-layout { grid-template-columns: 21rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .svc-layout__aside { position: sticky; top: calc(var(--header-h) + var(--strip-h) + 1.5rem); }
}
.svc-layout__body { min-width: 0; }

/* contents rail */
.toc ul {
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
  border-left: 2px solid var(--line);
}
.toc li + li { margin-top: 0.125rem; }
.toc a {
  display: block;
  margin-left: -2px;
  padding: 0.375rem 0 0.375rem 1rem;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-mute);
  transition: border-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
}
.toc a:hover { border-color: var(--brand); padding-left: 1.25rem; color: var(--ink); }

.aside-cta {
  margin-top: 2.5rem;
  border-radius: var(--r-xl);
  background: var(--ink);
  padding: 1.75rem;
  color: #fff;
}
.aside-cta .font-logo { font-size: 1.5rem; }
.aside-cta__note { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.6); }
.aside-cta__tel {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.875rem;
  border-radius: 999px;
  background: var(--brand);
  font-weight: 700;
  transition: background-color var(--t), color var(--t);
}
.aside-cta__tel:hover { background: #fff; color: var(--ink); }
.aside-cta__alt {
  margin-top: 0.75rem;
  display: block;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: color var(--t);
}
.aside-cta__alt:hover { color: #fff; }

/* the ported article body */
.article__intro { margin-bottom: 1.25rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-mute); }
.article__block { margin-top: 3.5rem; }
.article__h2 {
  /* the fixed header would otherwise sit over a jumped-to heading */
  scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 1rem);
  font-size: clamp(1.85rem, 4vw, 3.5rem);
  line-height: 0.95;
}
.article__h2--sm { font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.05; }
.article__rule {
  display: block;
  margin-top: 1rem;
  height: 4px;
  width: 3rem;
  border-radius: 999px;
  background: var(--brand);
}
.article__p { margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.75; color: var(--ink-mute); }

/* a run of label-only headings, rendered as a labelled grid rather than as
   several bare headings with nothing underneath them */
.chip-grid { margin-top: 1.5rem; display: grid; gap: 0.75rem; list-style: none; padding: 0; }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip-grid li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bone);
  padding: 1rem 1.25rem;
  transition: border-color var(--t), background-color var(--t);
}
.chip-grid li:hover { border-color: rgba(11,11,13,0.25); background: var(--paper); }
.chip-grid__bar {
  height: 6px;
  width: 1.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--season, var(--winter));
  transition: width 0.5s var(--ease-out-expo);
}
.chip-grid li:hover .chip-grid__bar { width: 2.5rem; }
.chip-grid li > span:last-child {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ticks { margin-top: 1.5rem; display: grid; gap: 0.75rem; list-style: none; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: 0.75rem; }
.ticks .ico { margin-top: 0.35rem; width: 1rem; height: 1rem; flex: none; stroke-width: 3; color: var(--brand); }
.ticks span { line-height: 1.7; color: var(--ink-mute); }
.svc-aside-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bone);
  padding: 1.75rem;
}
.svc-aside-card h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.svc-aside-card p { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.7; color: var(--ink-mute); }
.svc-aside-card .btn { margin-top: 1.25rem; }
.svc-aside-list { margin-top: 1.5rem; display: grid; gap: 0.25rem; list-style: none; padding: 0; }
.svc-aside-list a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background-color var(--t), color var(--t);
}
.svc-aside-list a:hover { background: var(--paper); color: var(--brand); }
.svc-aside-list a.is-active { background: var(--ink); color: #fff; }
.svc-aside-list i { height: 2px; width: 1rem; flex: none; border-radius: 999px; background: var(--season, var(--winter)); }

/* ---------------------------------------------------------------- POSTS */
.posts {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.post {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.post:hover {
  border-color: rgba(11,11,13,0.25);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.45);
}
.post__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bone);
}
/* Same reasoning as the featured card: most of these are titled banner graphics
   rather than photographs. The box is already 16:9 and so are the banners, so
   `contain` is identical to `cover` for them and only rescues the odd 2:1 one.
   The hover zoom is gone for the same reason — at any scale it eats the first
   and last words of a banner that fits exactly. The card still lifts and the
   title still turns red, so the hover is not lost. */
.post__img img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.post__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.post__tag {
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--bone);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.post__body h3 {
  margin-top: 0.875rem;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color var(--t);
}
.post:hover .post__body h3 { color: var(--brand); }
.post__body p { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.7; color: var(--ink-mute); }
.post__meta {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-mute);
}
.post__more {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
}
.post__more .ico { transition: transform var(--t); }
.post:hover .post__more .ico { transform: translate(3px, -3px); }

/* placeholder when an article has no featured image */
.post__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  font-size: 2rem;
  color: rgba(255,255,255,0.25);
}

/* featured post — the wide card at the top of the blog index */
.feature {
  display: grid;
  gap: 0;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t);
}
.feature:hover {
  border-color: rgba(11,11,13,0.25);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.45);
}
/* Stack early. Below roughly 1080px the text column gets narrow enough that
   the headline starts breaking mid-word. */
@media (min-width: 1080px) {
  /* The image column is the wider one: the closer its box is to 16:9, the less
     of the banner gets cropped away. */
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.feature__body { display: flex; flex-direction: column; padding: 2rem; }
@media (min-width: 768px) { .feature__body { padding: 2.5rem; } }
.feature__body h2 {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  transition: color var(--t);
}
.feature:hover .feature__body h2 { color: var(--brand); }
.feature__body p { margin-top: 1rem; line-height: 1.7; color: var(--ink-mute); }
/* These featured images are designed banners with the post title and the logo
   baked into the artwork, not photographs. So the box is pinned to their 16:9
   and the image is CONTAINed, never cropped.

   It used to stretch to match the text column's height. At a 1264px card that
   made the box 736x485 — ratio 1.52 against the banner's 1.78 — and `cover`
   then shaved 126px off the width, 63px from each side, taking the logo with
   it. Centring a correctly-proportioned box costs a little whitespace when the
   headline runs long, which is the cheaper mistake. */
.feature__img {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: center;
  background: var(--paper);
  order: -1;
}
@media (min-width: 1080px) { .feature__img { order: 0; } }
/* No hover zoom either: any scale crops the banner this image exists to show. */
.feature__img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* horizontal rail of posts */
.post-rail { position: relative; margin-top: 2rem; }
.post-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.post-rail__track::-webkit-scrollbar { display: none; }
.post-rail__track > * { scroll-snap-align: start; }
@media (min-width: 768px) { .post-rail__track { grid-auto-columns: minmax(20rem, 1fr); } }
.post-rail__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.4);
  transition: background-color var(--t), color var(--t);
}
.post-rail__nav:hover { background: var(--ink); color: #fff; }
.post-rail__nav--prev { left: -0.75rem; }
.post-rail__nav--next { right: -0.75rem; }
.post-rail__nav--prev .ico { transform: rotate(180deg); }

.blog-empty { text-align: center; padding-block: 3rem; }
.blog-empty h2 { margin-top: 1.25rem; }
.blog-empty p { margin-top: 1rem; color: var(--ink-mute); }

/* category chips on the blog index */
.chips { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.chip:hover { border-color: #fff; color: #fff; }
.chip.is-active { background: #fff; border-color: #fff; color: var(--ink); }

/* share row appended to single posts */
.share {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.share__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 0.25rem;
}
.share a, .share button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.share a:hover, .share button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.share .ico { width: 0.95rem; height: 0.95rem; }

/* ---------------------------------------------------------------- FORM */
.formwrap {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  padding: 1.75rem;
  box-shadow: 0 30px 70px -50px rgba(0,0,0,0.4);
}
@media (min-width: 768px) { .formwrap { padding: 2.25rem; } }
.form__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 1.4rem 1rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bone);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--t), background-color var(--t);
  appearance: none;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.field label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 0.95rem;
  color: var(--ink-mute);
  pointer-events: none;
  transition: transform 0.2s var(--ease-out-expo), font-size 0.2s var(--ease-out-expo), color 0.2s ease;
}
/* the floating label: `placeholder=" "` is what makes :placeholder-shown work */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  transform: translateY(-0.7rem);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.field--select::after {
  content: "";
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--brand); }

.form__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-mute);
}
.form__alert {
  padding: 0.875rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(225,27,34,0.35);
  background: rgba(225,27,34,0.06);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.form__done { text-align: center; padding-block: 1.5rem; }
.form__done-ico {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(94,158,49,0.12);
  color: var(--spring);
}
.form__done-ico .ico { width: 1.75rem; height: 1.75rem; stroke-width: 2.6; }
.form__done h3 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 800; }
.form__done p { margin-top: 0.75rem; color: var(--ink-mute); }

/* the honeypot: present in the DOM, never visible, never announced */
.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* contact page layout */
.contact__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; align-items: start; }
  .contact__info { grid-column: span 5; }
  .contact__form { grid-column: span 7; }
}
.contact__rows { margin-top: 2rem; display: grid; gap: 1.25rem; }
.contact__row { display: flex; align-items: flex-start; gap: 1rem; }
.contact__row-ico {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: 999px;
  background: var(--bone);
  color: var(--brand);
}
.contact__row b { display: block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.contact__row span, .contact__row a { display: block; margin-top: 0.25rem; font-size: 1.05rem; font-weight: 600; }
.contact__row a:hover { color: var(--brand); }
.contact__map {
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  aspect-ratio: 16 / 10;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------- ABOUT */
.about__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.gtile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  background: var(--bone);
  cursor: zoom-in;
}
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-expo); }
.gtile:hover img { transform: scale(1.06); }
.gtile:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------- FOOTER */
.footer { position: relative; overflow: clip; background: var(--ink); color: #fff; }

.footer__ticker { border-bottom: 1px solid rgba(255,255,255,0.1); padding-block: 1.25rem; }
.footer__ticker .marquee__run {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.9);
}
@media (min-width: 768px) { .footer__ticker .marquee__run { font-size: 2.25rem; } }
.footer__ticker .marquee__item > span:first-child { display: flex; align-items: center; gap: 0.75rem; }
.footer__ticker i { width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--season, var(--winter)); }

.footer__top { display: grid; gap: 3.5rem; padding-block: 4rem; }
@media (min-width: 768px) { .footer__top { padding-block: 5rem; } }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .footer__brand   { grid-column: span 4; }
  .footer__svc     { grid-column: span 3; }
  .footer__areas   { grid-column: span 3; }
  .footer__company { grid-column: span 2; }
}

.footer__lockup { display: flex; align-items: center; gap: 0.75rem; }
.footer__lockup img { height: 4rem; width: auto; }
.footer__lockup span { display: flex; flex-direction: column; line-height: 1; }
.footer__lockup .brand__name { color: #fff; }
.footer__lockup .brand__sub { color: rgba(255,255,255,0.6); }
.footer__tagline { margin-top: 1.5rem; max-width: 24rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.6); }

.footer__contact { margin-top: 2rem; display: grid; gap: 1rem; font-size: 0.95rem; }
.footer__contact a, .footer__contact p { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255,255,255,0.6); transition: color var(--t); }
.footer__contact a:hover { color: #fff; }
.footer__contact .footer__tel { font-weight: 600; color: #fff; }
.footer__contact .footer__tel:hover { color: var(--brand); }
.footer__ico {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  transition: background-color var(--t), color var(--t);
}
.footer__tel .footer__ico { background: rgba(225,27,34,0.15); color: var(--brand); }
.footer__tel:hover .footer__ico { background: var(--brand); color: #fff; }
.footer__contact span.pad { padding-top: 0.6rem; }

.footer h2 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer ul { margin-top: 1.5rem; list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.footer__areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 0.625rem; }
.footer a { color: rgba(255,255,255,0.7); transition: color var(--t); }
.footer li a { font-size: 0.95rem; }
.footer li a:hover { color: #fff; }
.footer__svc li a { display: flex; align-items: center; gap: 0.5rem; }
.footer__svc li i {
  height: 1px; width: 1rem;
  flex: none;
  background: var(--season, var(--winter));
  transition: width var(--t);
}
.footer__svc li a:hover i { width: 1.75rem; }
.footer__areas li a { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.footer__areas li a:hover { color: var(--brand); }

.footer__book {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--brand);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  transition: background-color var(--t), color var(--t);
}
.footer__book:hover { background: #fff; color: var(--ink); }

/* oversized wordmark, Huel-style */
.footer__wordmark {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  padding-bottom: 1rem;
}
.footer__wordmark div {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  font-size: 15vw;
  line-height: 0.8;
  white-space: nowrap;
  color: rgba(255,255,255,0.05);
}

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer__bottom .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}
@media (min-width: 768px) { .footer__bottom .shell { flex-direction: row; } }

/* ---------------------------------------------------------------- FLOATERS */
/* Sticky quote CTA that appears on mobile once the hero is behind you.
   Named for what it does: it used to be a call button, which duplicated the
   phone button sitting permanently in the fixed header. */
.cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.4s ease;
}
.cta-bar.is-on { transform: none; opacity: 1; }
@media (min-width: 1024px) { .cta-bar { display: none; } }
.cta-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding-block: 1rem;
  border-radius: 999px;
  background: var(--brand);
  font-weight: 700;
  color: #fff;
  box-shadow: 0 16px 40px -12px rgba(225,27,34,0.8);
}

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), background-color var(--t);
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--brand); }
.to-top .ico { transform: rotate(-90deg); }
/* the mobile CTA bar owns the bottom edge below 1024px */
@media (max-width: 1023px) { .to-top { bottom: 5.25rem; } }

.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 61;
  height: 4px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------------------------------------------------------------- LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(11,11,13,0.92);
}
.lightbox figure { margin: 0; max-width: min(64rem, 100%); }
.lightbox img { width: 100%; height: auto; border-radius: var(--r-lg); }
.lightbox figcaption { margin-top: 1rem; text-align: center; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

/* ---------------------------------------------------------------- WORDPRESS */
/* Rules that only exist once the design runs inside WordPress: editor output,
   search, pagination and the shell for unmanaged legacy pages. */

.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
}
.search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }
.search-form input[type="search"]:focus { outline: none; border-color: #fff; }
/* on a light section the same form has to invert */
.section .search-form input[type="search"] {
  border-color: var(--line);
  background: var(--bone);
  color: var(--ink);
}
.section .search-form input[type="search"]::placeholder { color: var(--ink-mute); }

.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.pagination .page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

/* WordPress core alignment and caption classes, for editor content */
.entry .alignleft  { float: left;  margin: 0.5rem 1.5rem 1rem 0; }
.entry .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.entry .aligncenter { margin-inline: auto; }
.entry .wp-caption { max-width: 100%; }
.entry .wp-caption-text { margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-mute); }
.entry .wp-block-image { margin-block: 2rem; }
.entry .screen-reader-text { position: absolute !important; }

/* Elementor leaves stray wrappers in the_content on legacy pages; keep them
   from imposing their own widths inside the article column. */
.entry .elementor-widget-container,
.entry .elementor-text-editor { max-width: none; }

/* ---------------------------------------------------------------- REDUCED MOTION */
/* Respect users who would rather not be moved. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------- PRINT */
@media print {
  .season-bar, .utility, .header, .mobile-nav, .cta-bar, .to-top,
  .scroll-progress, .hero__door, .footer__wordmark, .footer__ticker { display: none !important; }
  .hero, .page-hero { min-height: 0; padding-block: 2rem; background: #fff; color: #000; }
  .hero__media, .page-hero__img, .hero__scrim, .hero__scrim--side,
  .hero__scrim--glow, .hero__scrim--top, .page-hero__scrim, .page-hero__glow { display: none !important; }
  .footer { background: #fff; color: #000; }
  a { text-decoration: underline; }
}