/* ==========================================================================
   Arco Outdoors — Core stylesheet
   Design system extracted verbatim from the original bundled homepage.
   Token names are documented in PROJECT-SPEC.md; change values here only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin + latin-ext subsets, variable weight axes)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}



/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --sand-50:  #f6f1e8;   /* page ground */
  --sand-100: #efe6d6;   /* alternating section ground */
  --sand-200: #cdbfa6;   /* image placeholder while loading */
  --white:    #ffffff;

  /* Ink */
  --ink:      #241d15;   /* primary text, dark sections, nav bar */
  --ink-800:  #2b2318;   /* hero / CTA ground behind imagery */
  --ink-900:  #1a150f;   /* footer ground */
  --body:     #5f5544;   /* body copy on sand */
  --body-2:   #443c30;   /* dense list copy */
  --muted:    #746653;   /* labels, meta - AA on every sand ground (pass 16) */

  /* Gold accents
     --gold-link, --muted and --foot-dim were darkened (or, on the footer,
     lightened) in pass 16 to clear WCAG AA 4.5:1 against the WORST ground each
     one actually lands on -- measured from rendered text nodes, not assumed.
     Hue and saturation are unchanged; only HSL lightness moved, so the accent
     still reads as the same colour. --gold (#e0a94e) on --ink is 7.89:1 and was
     left exactly as it was, which is why buttons and dark-section accents look
     identical. See PROJECT-SPEC.md §15. */
  /* Gold accents */
  --gold:       #e0a94e; /* primary CTA fill, dark-section accents */
  --gold-deep:  #c69749; /* hairlines, marks - decorative rules, not text */
  --gold-figure: #a87d35; /* the same gold for large display numerals, dark
                             enough to clear 3:1 on every sand ground. Kept
                             separate so hairlines stay as light as they were. */
  --gold-link:  #86612b; /* links + eyebrows on light ground - AA (pass 16) */
  --gold-light: #e6b661; /* headings + accents on dark ground */

  /* On-dark text */
  --cream:      #fdfaf3;
  --cream-2:    #efe6d6;
  --foot-text:  #cabda6;
  --foot-muted: #9a8d76;
  --foot-dim:   #8b7d66;  /* AA on --ink-900 (pass 16) */

  /* Utility */
  --star:     #f5b400;
  --hairline: rgba(36, 29, 21, .08);
  --hairline-2: rgba(36, 29, 21, .14);
  --overlay:  rgba(20, 16, 10, .78);

  /* Type */
  /* Keep this stack as it is. Pass 16 traced the site's residual 0.0161 CLS to
     the swap of this face: the homepage h1 sets on two lines in Cormorant and
     three in the fallback, moving the hero 84px. The standard fix is a
     size-adjust'ed metric-matched fallback -- but the ratio has to be measured
     against the font the VISITOR falls back to, and Georgia is not installed in
     this build environment. Calibrating against the Times-metric serif that is
     installed produced 92.4%, which measurably made the shift WORSE on a box
     where DejaVu Serif (a far wider face) was picked up instead. So this is left
     alone deliberately: 0.0161 is already well inside Core Web Vitals' 0.1
     "good" threshold, and an uncalibrated size-adjust can only gamble with it.
     To finish the job, measure a string in Georgia on macOS or Windows against
     Cormorant at the same size, and use that ratio. See PROJECT-SPEC.md §16. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 40px;
  --section-y: 110px;

  /* Radius — the identity is predominantly square */
  --r-none: 0;
  --r-sm: 5px;
  --r-md: 12px;
  --r-pill: 60px;

  /* Elevation */
  --sh-card-hover: 0 26px 50px rgba(36, 29, 21, .16);
  --sh-image: 0 30px 60px rgba(36, 29, 21, .22);
  --sh-badge: 0 20px 40px rgba(36, 29, 21, .3);
  --sh-gold-sm: 0 8px 22px rgba(224, 169, 78, .4);
  --sh-gold-lg: 0 12px 30px rgba(224, 169, 78, .35);
  --sh-raised: 0 40px 60px -22px rgba(36, 29, 21, .4),
               0 12px 22px rgba(36, 29, 21, .1),
               inset 0 1px 0 rgba(255, 255, 255, .95);
  --sh-raised-hover: 0 54px 76px -22px rgba(36, 29, 21, .46),
               0 16px 28px rgba(36, 29, 21, .14),
               inset 0 1px 0 rgba(255, 255, 255, .95);
  --sh-panel: 0 44px 72px -20px rgba(36, 29, 21, .4),
              0 14px 28px rgba(36, 29, 21, .12),
              inset 0 1px 0 rgba(255, 255, 255, .95);
  --sh-pill: 0 24px 44px -14px rgba(36, 29, 21, .3),
             0 6px 14px rgba(36, 29, 21, .1),
             inset 0 1px 0 rgba(255, 255, 255, .9);
  --sh-input: inset 0 2px 5px rgba(36, 29, 21, .09);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .25s;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep anchor targets clear of the sticky header */
  scroll-padding-top: 130px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gold-link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ink); }

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

/* Visible focus for every interactive element (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-link);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On dark grounds the brown-gold ring is too low-contrast — use cream */
.nav a:focus-visible,
.nav button:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.cta a:focus-visible {
  outline-color: var(--cream);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
}
.skip-link:focus {
  left: 0;
  color: var(--cream);
}

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand-100); }
.section--fade { background: linear-gradient(180deg, var(--sand-50), var(--sand-100)); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
}

/* Eyebrow — the rule + tracked micro-label used above every section heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--gold-link);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-deep);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-deep);
  flex: none;
}
.eyebrow--onDark { color: var(--gold); }
.eyebrow--onDark::before, .eyebrow--onDark::after { background: var(--gold); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}
.section-head--wide { max-width: 820px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 20px; }

/* Headings */
.h1 {
  font-weight: 600;
  font-size: clamp(44px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 0 0 26px;
}
.h1 em { font-style: italic; color: var(--gold-light); }

.h2 {
  font-weight: 500;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}
.h2--onDark { color: var(--cream); font-size: clamp(32px, 4vw, 50px); line-height: 1.1; }
.h2--sm { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }

.lead { font-size: 17px; line-height: 1.8; color: var(--body); }
.lead--lg { font-size: 18px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
/* `display` here is an author rule, so it beats the user-agent's
   `[hidden] { display: none }`. Without this, `hidden` on a button silently
   does nothing — which is how the Load More control shipped visible to
   visitors with JavaScript disabled. */
.btn[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 38px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--r-none);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--sh-gold-lg); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--cream); color: var(--ink); }

.btn--ghostLight { border: 1.5px solid rgba(253, 250, 243, .5); color: var(--cream); }
.btn--ghostLight:hover, .btn--ghostLight:focus-visible {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}

.btn--ghostDark { border: 1.5px solid var(--ink); color: var(--ink); padding: 16px 40px; font-size: 12.5px; }
.btn--ghostDark:hover, .btn--ghostDark:focus-visible { background: var(--ink); color: var(--sand-50); }

.btn--sm { padding: 15px 26px; font-size: 12.5px; box-shadow: var(--sh-gold-sm); }
.btn--block { width: 100%; padding: 17px; }

/* Inline "EXPLORE →" text action */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-link);
  text-transform: uppercase;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-action:hover, .link-action:focus-visible { gap: 14px; color: var(--ink); }

/* Decorative gold diamond used as a list marker */
.mark {
  color: var(--gold-link);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  flex: none;
}
.mark--onDark { color: var(--gold); font-size: 26px; }

/* --------------------------------------------------------------------------
   6. Header + navigation
   Desktop: two-tier sticky header with hover/keyboard dropdown panels.
   Mobile (<=860px): the ink bar becomes a slide-in drawer with accordions.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--sand-50);
  box-shadow: 0 1px 0 var(--hairline);
}

.header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
}

.brand { display: flex; align-items: center; gap: 16px; color: inherit; }
.brand:hover { color: inherit; }
.brand__mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #f6e6c4, #d7ab5a);
  box-shadow: 0 6px 18px rgba(198, 151, 73, .28);
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink);
}
.brand__tag {
  font-size: 10.5px;
  letter-spacing: .42em;
  color: var(--gold-link);
  margin-top: 5px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.header-phone { text-align: right; }
.header-phone__label {
  font-size: 10.5px;
  letter-spacing: .26em;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}
.header-phone__num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.header-phone__num:hover { color: var(--gold-link); }

.header-call-icon {
  display: none;
  width: 42px; height: 42px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: 1.5px solid var(--ink);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle span[aria-hidden] {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) ease, opacity var(--dur) ease;
}
.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- The ink bar ---- */
.nav { background: var(--ink); }
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.nav__links { display: flex; flex-wrap: wrap; align-items: center; }
.nav__item { position: relative; }

/* Top-level links and dropdown triggers must be pixel-identical. */
.nav__links > .nav__item > a,
.nav__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 18px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__links > .nav__item > a:hover,
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] { color: var(--gold); }
.nav__links > .nav__item > a[aria-current="page"],
.nav__trigger[aria-current="page"] { color: var(--gold); font-weight: 700; }

.nav__chevron { transition: transform var(--dur) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* ---- Dropdown panel ---- */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  min-width: 240px;
  padding: 22px 26px;
  background: var(--ink);
  border-top: 2px solid var(--gold);
  box-shadow: 0 26px 50px rgba(20, 16, 10, .45);
}
.nav__panel--end { left: auto; right: 0; }
.nav__panelList { display: grid; gap: 2px; }
.nav__panel--two .nav__panelList {
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 2px 30px;
}
.nav__panelList a {
  display: block;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cream-2);
  white-space: nowrap;
}
.nav__panelList a:hover,
.nav__panelList a:focus-visible { color: var(--gold); }
.nav__panelList a[aria-current="page"] { color: var(--gold); font-weight: 700; }

.nav__panelFoot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(224, 169, 78, .28);
}
.nav__panelFoot a {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav__panelFoot a:hover { color: var(--cream); }

/* Drawer-only actions — desktop hides them entirely. */
.nav__actions { display: none; }

/* --------------------------------------------------------------------------
   6b. Mobile drawer
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .header-phone,
  .header-quote-btn { display: none; }
  .header-call-icon { display: flex; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: var(--header-h, 92px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s var(--ease), visibility 0s;
  }

  .nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 40px;
    min-height: 100%;
  }
  .nav__links { flex-direction: column; align-items: stretch; width: 100%; }
  .nav__item { border-bottom: 1px solid rgba(255, 255, 255, .09); }

  .nav__links > .nav__item > a,
  .nav__trigger {
    width: 100%;
    padding: 17px 4px;
    font-size: 13px;
    justify-content: space-between;
  }

  /* Accordion, not a floating panel. */
  .nav__panel {
    position: static;
    min-width: 0;
    padding: 4px 0 16px 14px;
    border-top: none;
    box-shadow: none;
    background: transparent;
    border-left: 1px solid rgba(224, 169, 78, .3);
    margin: 0 0 14px 4px;
  }
  .nav__panel--two .nav__panelList { grid-template-columns: 1fr; gap: 0; }
  .nav__panelList a { padding: 11px 0; font-size: 14.5px; white-space: normal; }
  .nav__panelFoot { margin-top: 10px; padding-top: 12px; }

  .nav__actions { display: block; padding-top: 28px; }

  .nav__call {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border: 1.5px solid var(--gold);
    color: var(--gold);
  }
  .nav__call:hover, .nav__call:focus-visible { background: var(--gold); color: var(--ink); }
  .nav__call > span { display: flex; flex-direction: column; }
  .nav__callLabel {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .8;
  }
  .nav__callNum {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
  }
  .nav__license {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--foot-muted);
  }
}

/* ---- No-JavaScript fallback --------------------------------------------
   main.js adds `.js` to <html> before first paint, so these rules apply only
   when scripting is off. Desktop panels open on hover/focus; the mobile drawer
   becomes a static, fully expanded list and the toggle disappears. */
html:not(.js) .nav__group:hover > .nav__panel[hidden],
html:not(.js) .nav__group:focus-within > .nav__panel[hidden] { display: block; }

@media (max-width: 860px) {
  html:not(.js) .nav {
    position: static;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav__panel[hidden] { display: block; }
  html:not(.js) .nav__chevron { display: none; }
  html:not(.js) .nav__trigger { cursor: default; }
}

/* Body scroll lock while the drawer is open (set by main.js). */
.is-nav-locked { position: fixed; width: 100%; overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--ink-800);
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: arcoZoom 12s ease-out forwards;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(20, 16, 10, .82) 0%,
    rgba(20, 16, 10, .55) 45%,
    rgba(20, 16, 10, .25) 100%);
}
.hero__inner { position: relative; }
.hero__content { max-width: 720px; animation: arcoUp .9s ease-out both; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.hero__eyebrow::before {
  content: "";
  width: 52px; height: 1px;
  background: var(--gold);
  flex: none;
}
.hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(253, 250, 243, .82);
  max-width: 560px;
  margin: 0 0 38px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(253, 250, 243, .6);
  font-size: 10px;
  letter-spacing: .3em;
  animation: arcoFloat 2.6s ease-in-out infinite;
}
.hero__scroll:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust { background: var(--ink); color: var(--cream-2); }
.trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 26px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .06em;
}
.trust__divider {
  width: 1px; height: 26px;
  background: rgba(255, 255, 255, .14);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 72px;
  align-items: center;
}
.about__body p { margin: 0 0 22px; }
.about__body p:last-of-type { margin-bottom: 36px; }

.stats { display: flex; flex-wrap: wrap; gap: 44px; }
.stats__value {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.stats__value span { color: var(--gold-figure); }
.stats__label {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
}

.about__figure { position: relative; margin: 0; }
.about__figure img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  background: var(--sand-200);
  box-shadow: var(--sh-image);
}
.about__badge {
  position: absolute;
  bottom: -34px;
  left: -34px;
  background: var(--ink);
  color: var(--cream);
  padding: 28px 32px;
  box-shadow: var(--sh-badge);
  max-width: 230px;
}
.about__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.2;
}
.about__badge p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(253, 250, 243, .75);
  margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   10. Cards (services + journal share the frame)
   -------------------------------------------------------------------------- */
.card {
  background: var(--sand-50);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover, .card:focus-within { box-shadow: var(--sh-card-hover); }

.card__media { position: relative; background: var(--sand-200); }
.card__media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.card__num {
  position: absolute;
  top: 4px; left: -4px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--cream);
  /* Over a pale sky the cream numeral measured 1.32:1 -- effectively invisible,
     and a text-shadow alone does not carry it. A closest-side radial fades from
     a dark centre to nothing, so it reads as a soft vignette rather than a chip
     and the numeral keeps its position and weight. Padding is offset against
     top/left so the glyph does not move. */
  padding: 14px 22px 16px;
  background: radial-gradient(closest-side,
              rgba(20, 16, 10, .80) 0%, rgba(20, 16, 10, .66) 42%,
              rgba(20, 16, 10, .28) 74%, rgba(20, 16, 10, 0) 100%);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.card__body {
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__title {
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: .01em;
}
.card__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--body);
  margin: 0 0 22px;
  flex: 1;
}

/* Journal variant */
.card--post .card__media img { height: 220px; }
.card--post .card__body { padding: 28px 28px 32px; }
.card--post .card__title { font-size: 23px; line-height: 1.25; margin-bottom: 14px; }
.card__date {
  position: absolute;
  top: 0; left: 22px;
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  padding: 10px 14px 12px;
}
.card__date .m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.card__date .d {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. Why Arco (dark band with texture)
   -------------------------------------------------------------------------- */
.why {
  position: relative;
  background-color: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.why__texture,
.cta__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.why__texture { opacity: .14; }
.why__inner { position: relative; padding-block: 100px; }
.why__head { max-width: 620px; margin-bottom: 60px; }
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 48px;
}
.why__item { border-top: 1px solid rgba(224, 169, 78, .35); padding-top: 26px; }
.why__item h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--gold-light);
  margin: 0 0 12px;
}
.why__item p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(253, 250, 243, .72);
}

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 210px;
  gap: 18px;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--sand-200);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item--xl { grid-column: span 2; grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  /* Measured from rendered pixels, not from the DOM: the old single-stop ramp
     left the .cat eyebrow -- the top line of the caption -- sitting at 3.14:1,
     because the gradient had barely started by the time it reached that row.
     Holding it near full strength through the text and only then fading keeps
     both caption lines legible over any photograph, including a pale sky. */
  background: linear-gradient(0deg,
              var(--overlay) 0%,
              rgba(20, 16, 10, .74) 62%,
              transparent 100%);
  color: var(--cream);
}
.gallery-item--xl figcaption { padding: 22px; }
.gallery-item figcaption .cat {
  display: block;
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--gold-light);
  text-transform: uppercase;
}
.gallery-item--xl figcaption .cat { font-size: 10.5px; }
.gallery-item figcaption .name { display: block; font-family: var(--font-display); font-size: 18px; }
.gallery-item--wide figcaption .name { font-size: 20px; }
.gallery-item--xl figcaption .name { font-size: 24px; }

.gallery-cta { text-align: center; margin-top: 48px; }
/* A second .gallery-cta stacked directly under the first (services hub: "View
   All Service Areas" then the gallery link) only needs the gap between two
   buttons, not the full 48px that separates the pair from the section above. */
.gallery-cta--stacked { margin-top: 14px; }
/* Two buttons in one .gallery-cta (Gallery / Projects on the homepage) must not
   sit border-to-border; the inline whitespace between them collapses to nothing
   at these font settings. */
.gallery-cta .btn + .btn { margin-left: 14px; }
@media (max-width: 520px) {
  .gallery-cta .btn { display: block; }
  .gallery-cta .btn + .btn { margin-left: 0; margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   13. Reviews — Google review cards, raised

   Depth is layered rather than a single drop shadow: an ambient shadow for the
   soft spread, a tighter contact shadow beneath, a 1px light top edge where the
   light would catch, and a diagonal gradient so the face is not flat. The lift
   on hover deepens all three together, which is what reads as physical rather
   than as a card that merely moved.

   ONLY REAL REVIEWS BELONG HERE. Every card must correspond to a review that
   exists at a source a visitor can check, and the figures in .rating must be the
   real average and count from that source. The three published in pass 20 are
   attested by the client as genuine Google reviews. See PROJECT-SPEC.md §11.2.
   -------------------------------------------------------------------------- */
.reviews__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 60px; }
.reviews__head .eyebrow { margin-bottom: 18px; }

.google-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  padding: 18px 30px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-pill);
}
.google-pill span {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
}

.rating { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.rating__score {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.rating__meta { text-align: left; }
.stars { display: flex; gap: 3px; }
.rating__count { font-size: 13.5px; color: var(--body); margin-top: 6px; }
.rating__count strong { color: var(--ink); }
.rating__count a { color: var(--gold-link); }

.review {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--white), #f4eee2);
  border-radius: var(--r-md);
  padding: 34px 32px 30px;
  border-top: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--sh-raised);
  transition: transform .3s cubic-bezier(.22, .8, .3, 1),
              box-shadow .3s cubic-bezier(.22, .8, .3, 1);
  margin: 0;
  display: flex;
  flex-direction: column;
}
.review:hover,
.review:focus-within { transform: translateY(-8px); box-shadow: var(--sh-raised-hover); }
.review__source { position: absolute; top: 28px; right: 30px; }
.review .stars { gap: 2px; margin-bottom: 18px; }
.review blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: #332b20;
  margin: 0 0 26px;
}
.review figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  margin-top: auto;
}
.review__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex: none;
}
/* Each avatar ground is the darkest form of its hue that still clears 4.5:1
   against the white initials on it. The initials are aria-hidden -- the
   reviewer's name sits beside them in real text -- but a sighted reader still
   has to make them out. */
.review__avatar--a { background: #966f2f; }
.review__avatar--b { background: #2170f2; }
.review__avatar--c { background: #2a8743; }
.review__name { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.review__place { display: block; font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .review { transition: none; }
  .review:hover, .review:focus-within { transform: none; }
}

/* --------------------------------------------------------------------------
   14. Service areas
   -------------------------------------------------------------------------- */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 40px;
}
.areas-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(36, 29, 21, .07);
  font-size: 14px;
  color: var(--body-2);
}
.areas-grid svg { flex: none; }
/* Markets with their own page read as links; the rest are coverage only. */
.areas-grid__linked a { color: var(--gold-link); font-weight: 600; }
.areas-grid__linked a:hover,
.areas-grid__linked a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   15. Consultation form
   -------------------------------------------------------------------------- */
.consult {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: center;
  max-width: 1200px;
}
.consult__intro h2 { margin-bottom: 22px; }
.consult__intro > p { margin: 0 0 32px; }
.consult__points { display: flex; flex-direction: column; gap: 18px; }
.consult__points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--body-2);
}

.form-panel {
  background: linear-gradient(160deg, var(--white), #efe7d8);
  border: 1px solid rgba(255, 255, 255, .85);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 46px;
  box-shadow: var(--sh-panel);
}
.form-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(224, 169, 78, .16);
  border: 1px solid rgba(224, 169, 78, .4);
  padding: 6px 14px;
  margin-bottom: 18px;
  color: var(--gold-link);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.form-flag .mark { font-size: 16px; }
.form-panel h2, .form-panel h3 {
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--ink);
}
.form-note { font-size: 13.5px; color: var(--muted); margin: 0 0 26px; }

.field { margin-bottom: 16px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.field-row .field { margin-bottom: 0; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--body);
  margin-bottom: 7px;
  text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hairline-2);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  box-shadow: var(--sh-input);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
.field select { appearance: auto; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(36, 29, 21, .4); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(198, 151, 73, .18);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--gold-link);
  outline-offset: 2px;
}
.field [aria-invalid="true"] { border-color: #a4342c; }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8e2f27;
}
.field-error:empty { display: none; }

/* Anti-spam honeypot — hidden from people, reachable by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 18px; font-size: 14px; line-height: 1.6; }
.form-status:empty { display: none; }

.form-success { text-align: center; padding: 40px 10px; }
.form-success__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.form-success h3 { font-size: 30px; margin: 0 0 12px; }
.form-success p { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   16. Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-800);
}
.cta__texture { opacity: .22; }
.cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, .85), rgba(20, 16, 10, .7));
}
.cta__inner {
  position: relative;
  max-width: 900px;
  padding-block: var(--section-y);
  text-align: center;
  color: var(--cream);
}
.cta__inner .eyebrow { justify-content: center; margin-bottom: 22px; }
.cta__inner .eyebrow::before,
.cta__inner .eyebrow::after { width: 40px; }
.cta__inner h2 {
  font-weight: 500;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
  margin: 0 0 24px;
}
.cta__inner p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(253, 250, 243, .8);
  max-width: 600px;
  margin: 0 auto 38px;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

/* --------------------------------------------------------------------------
   17. Footer
   Five columns: brand + services + areas + company + contact, over a legal bar.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--foot-text); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.15fr;
  gap: 48px 40px;
  padding-block: 80px 48px;
}
.site-footer a { color: var(--foot-text); }
.site-footer a:hover { color: var(--gold); }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}

.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer-brand__mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #f6e6c4, #d7ab5a);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  flex: none;
}
.footer-brand__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cream);
}
.site-footer__about {
  font-size: 14px;
  line-height: 1.75;
  color: var(--foot-muted);
  margin: 0 0 24px;
  max-width: 38ch;
}
.site-footer__license {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid rgba(224, 169, 78, .3);
}
.site-footer__licenseLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__licenseNum {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--cream);
}

.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer-links__more {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer__contact .footer-phone {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-light);
  display: block;
  margin-bottom: 8px;
}
.footer-email { display: block; font-size: 14px; margin-bottom: 18px; word-break: break-word; }
.site-footer address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--foot-muted);
  margin-bottom: 10px;
}
.site-footer__hours {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--foot-muted);
  margin-bottom: 22px;
}
.site-footer__cta { color: var(--ink) !important; }
.site-footer__cta:hover { color: var(--ink) !important; }

.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer__bar > .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 28px;
  padding-block: 24px;
  font-size: 12.5px;
  color: var(--foot-dim);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__legal a { color: var(--foot-dim); }
.site-footer__legal a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   18. Animation
   -------------------------------------------------------------------------- */
@keyframes arcoUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes arcoZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
@keyframes arcoFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}

/* Scroll-reveal.
   Gated on `.reveal-on`, which main.js adds itself immediately before it starts
   observing — NOT on `.js`, which the inline head script sets. If main.js fails
   to load or throws, nothing is ever hidden. Content visible by default is the
   only safe default when most of a page carries this class. */
.reveal-on .reveal { opacity: 0; transform: translateY(22px); }
.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
/* Tablet / small laptop: the five footer columns and the six nav items both
   need relief before the mobile drawer takes over at 860px. */
@media (max-width: 1180px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
  .site-footer__brandCol { grid-column: 1 / -1; }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .nav__links > .nav__item > a,
  .nav__trigger { padding-inline: 12px; font-size: 12px; letter-spacing: .12em; }
  .header-actions { gap: 18px; }
  .header-phone__num { font-size: 21px; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; --section-y: 56px; }

  html { scroll-padding-top: 96px; }

  .trust__list { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trust__divider { display: none; }

  .why__inner { padding-block: var(--section-y); }

  /* The badge overhangs the image by -34px on desktop; on a phone that pushes
     it past the viewport edge, where overflow-x:hidden clips the text. */
  .about__badge { left: 0; bottom: -24px; max-width: none; }

  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item--xl, .gallery-item--wide { grid-column: span 1; grid-row: span 1; }

  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 40px 32px;
    padding-block: var(--section-y) 40px;
  }
}

@media (max-width: 480px) {
  h1, .h1 { word-break: break-word; }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@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;
  }
  .hero__scroll { transform: translateX(-50%); }
  .reveal-on .reveal { opacity: 1; transform: none; }
  .review:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .hero__scroll, .nav, .cta, .form-panel { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}