/* Self-hosted fonts — no external CDN. Files in theme/fonts/, copied to /assets/fonts/ at build. */
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/mulish-400-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:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/mulish-400-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:'Mulish';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/mulish-500-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:'Mulish';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/mulish-500-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:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/mulish-600-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:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/mulish-600-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:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/mulish-700-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:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/mulish-700-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:'Saira Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/saira condensed-400-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:'Saira Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/saira condensed-400-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:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/saira condensed-500-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:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/saira condensed-500-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:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/saira condensed-600-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:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/saira condensed-600-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:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/saira condensed-700-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:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/saira condensed-700-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}

/* ==========================================================================
   Summit Garage Door Pros — "ALPINE ASCENT" theme
   Direction: rugged expedition / outdoor-gear. Signature = angular mountain
   geometry: diagonal mountain-slope clip-path section edges, an ascending
   twin-peak chevron motif (eyebrows, headings, card tops, step markers), and
   an ascending staircase for the process steps. Type = Saira Condensed
   (condensed, uppercase display) + Mulish (humanist body).
   Palette = deep evergreen + sunrise orange on warm alpine stone.
   ==========================================================================*/

:root {
  /* brand core */
  --ever:        #0E4B3A;   /* evergreen primary */
  --ever-800:    #0C3A2C;   /* darker band */
  --ever-900:    #082A20;   /* deepest ink-green */
  --orange:      #E76A25;   /* sunrise orange — action/accent */
  --orange-600:  #cc571a;   /* orange hover */
  --orange-200:  #f6c8ab;   /* soft orange (borders/dots on dark) */
  --silver:      #BDC3C7;   /* accent silver */

  /* surfaces */
  --stone:       #F6F3EC;   /* warm page background */
  --stone-200:   #ECE7DA;   /* slightly deeper stone (chips, wells) */
  --paper:       #FFFFFF;   /* crisp paper band */
  --line:        #DED8C9;   /* hairline on stone */

  /* ink */
  --ink:         #17201C;   /* near-black, green-tinted */
  --ink-soft:    #40514A;   /* secondary text */
  --on-dark:     #EDEFEA;   /* body text on evergreen */
  --on-dark-dim: #b7c4bd;   /* muted text on evergreen */

  --wrap: 1180px;
  --gap:  clamp(1.15rem, 3.2vw, 2rem);
  --radius: 4px;            /* rugged: tight corners, not soft */

  --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ascending twin-peak chevron, orange — the recurring signature mark */
  --peak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='14' viewBox='0 0 46 14'%3E%3Cpath d='M1 12 L11 5 L21 12' fill='none' stroke='%23E76A25' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25 10 L35 3 L45 10' fill='none' stroke='%23E76A25' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* faint chevron contour texture for dark bands (topographic feel) */
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36' viewBox='0 0 64 36'%3E%3Cpath d='M0 32 L32 6 L64 32' fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
main { display: block; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ever); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0;
  color: var(--ink);
}

/* visually-hidden (crawlable) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* accessible focus */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5ch;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.05rem;
  line-height: 1.05;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  padding: .85em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 0 var(--orange-600), 0 10px 22px -12px rgba(231,106,37,.7);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover {
  background: var(--orange-600); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 0 #a8460f, 0 16px 26px -12px rgba(231,106,37,.75);
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--orange-600); }
.btn-lg { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); padding: 1em 1.8em; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ==========================================================================
   HEADER — plain solid background (NO filter/transform: fixed mobile nav)
   ==========================================================================*/
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ever);
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 6px 20px -14px rgba(0,0,0,.6);
}
.hdr-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: .55rem var(--gap);
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.site-logo { height: 52px; width: auto; aspect-ratio: 480 / 145; display: block; }
.brand-text {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.4rem; color: #fff;
}

/* desktop nav */
.site-nav { display: flex; align-items: center; gap: .15rem; }
.site-nav > a, .dd-top {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 500; letter-spacing: .05em; font-size: 1.02rem;
  color: #eaf1ee; text-decoration: none;
  padding: .55rem .7rem; border-radius: 3px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.site-nav > a:hover, .dd-top:hover { color: #fff; background: rgba(255,255,255,.09); border-bottom-color: var(--orange); }

/* dropdowns */
.has-dd { position: relative; }
.dd {
  position: absolute; top: 100%; left: 0;
  min-width: 260px; max-height: 70vh; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 22px 40px -20px rgba(8,42,32,.55);
  padding: .4rem;
  display: none; z-index: 70;
}
.has-dd:hover .dd, .has-dd:focus-within .dd { display: block; }
.dd a {
  display: block; padding: .5rem .7rem; border-radius: 3px;
  color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.3;
}
.dd a:hover { background: var(--stone-200); color: var(--ever); }
.dd-group { display: block; }
.dd-head {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .09em; font-size: .74rem; font-weight: 600;
  color: var(--orange); padding: .5rem .7rem .25rem;
}

/* header call CTA */
.hdr-call {
  display: inline-flex; align-items: baseline; gap: .4ch;
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  background: var(--orange);
  padding: .5rem .95rem; border-radius: var(--radius);
  box-shadow: 0 3px 0 0 var(--orange-600);
}
.hdr-call:hover { background: var(--orange-600); color: #fff; }
.hdr-call span {
  text-transform: uppercase; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; opacity: 1;
}

/* hamburger */
.nav-toggle {
  display: none;
  background: transparent; border: 2px solid rgba(255,255,255,.5);
  color: #fff; font-size: 1.5rem; line-height: 1;
  padding: .2rem .55rem; border-radius: var(--radius); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- MOBILE NAV ---------- */
@media (max-width: 920px) {
  .nav-toggle { display: inline-block; order: 3; }
  .hdr-call { order: 2; padding: .45rem .7rem; font-size: 1.02rem; }
  .hdr-call span { display: none; }
  .site-logo { height: 44px; }

  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 360px);
    transform: translateX(100%);
    transition: transform .28s ease;
    background: var(--ever-800);
    border-left: 4px solid var(--orange);
    padding: 5rem 1.1rem 2rem;
    flex-direction: column; align-items: stretch; gap: .1rem;
    overflow-y: auto; z-index: 65;
    box-shadow: -20px 0 50px -20px rgba(0,0,0,.6);
  }
  body.nav-open .site-nav { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } }

  .site-nav > a, .dd-top {
    width: 100%; font-size: 1.1rem; padding: .75rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0;
  }
  .site-nav > a:hover, .dd-top:hover { background: rgba(255,255,255,.06); border-bottom-color: rgba(255,255,255,.09); }
  .dd-top::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--orange); }
  .has-dd { width: 100%; }
  .dd {
    position: static; display: none;
    box-shadow: none; border: none; border-radius: 0;
    max-height: none; background: transparent; padding: 0 0 .4rem;
  }
  .has-dd.open .dd { display: block; }
  .dd a { color: var(--on-dark-dim); padding-left: 1.1rem; }
  .dd a:hover { background: rgba(255,255,255,.06); color: #fff; }
  .dd-head { color: var(--orange-200); }
}

/* ==========================================================================
   BREADCRUMBS
   ==========================================================================*/
.crumbs {
  max-width: var(--wrap); margin: 0 auto;
  padding: .7rem var(--gap);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .12rem .5rem;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-size: .82rem; color: var(--ink-soft);
}
.crumbs a { color: var(--ever); text-decoration: none; }
.crumbs a:hover { color: var(--orange-600); text-decoration: underline; }
.crumbs .sep { color: var(--orange); margin: 0; letter-spacing: 0; }

/* ==========================================================================
   SECTION FRAME
   ==========================================================================*/
.blk { padding: clamp(2.9rem, 6vw, 5.2rem) 0; position: relative; }
.blk > * {
  max-width: var(--wrap); margin-left: auto; margin-right: auto;
  padding-left: var(--gap); padding-right: var(--gap);
}
.blk:nth-of-type(odd)  { background: var(--stone); }
.blk:nth-of-type(even) { background: var(--paper); }

/* Section heading with the ascending twin-peak mark */
.blk h2 {
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 2.85rem);
  text-transform: uppercase;
  letter-spacing: .012em;
  max-width: var(--wrap);
  padding-top: 1.15rem;
  margin-bottom: 1.4rem;
}
.blk h2::before {
  content: ""; display: block;
  width: 46px; height: 14px; margin-bottom: .55rem;
  background: var(--peak) left center / 46px 14px no-repeat;
}
.blk h3 {
  font-size: 1.28rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ever); line-height: 1.08;
}

/* ==========================================================================
   HERO — full-bleed image, evergreen gradient overlay, mountain-slope base
   ==========================================================================*/
.blk.blk-hero {
  padding: 0; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--ever) 0%, var(--ever-900) 100%);
  /* mountain-slope bottom edge (a rising ridge — NOT a wave) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4.2vw));
}
.blk-hero > * { max-width: none; margin: 0; padding: 0; }

.hero-img {
  position: absolute; inset: 0; z-index: -2; margin: 0;
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img figcaption { display: none; }
/* evergreen wash for legibility */
.blk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,42,32,.94) 0%, rgba(12,58,44,.78) 45%, rgba(12,58,44,.28) 100%),
    linear-gradient(0deg, rgba(8,42,32,.85) 0%, rgba(8,42,32,0) 55%);
}
.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.4rem, 7vw, 6rem) var(--gap) clamp(5rem, 9vw, 7rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55ch;
  margin: 0;
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; letter-spacing: .13em; font-size: clamp(.78rem, .72rem + .3vw, .95rem);
  color: #fff;
  background: rgba(231,106,37,.18);
  border: 1px solid rgba(231,106,37,.55);
  padding: .45rem .85rem; border-radius: 100px;
}
.live-dot {
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--orange); flex: none;
  box-shadow: 0 0 0 0 rgba(231,106,37,.7);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,106,37,.6); }
  70%  { box-shadow: 0 0 0 .7rem rgba(231,106,37,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,106,37,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.hero-inner h1 {
  color: #fff;
  font-size: clamp(2.5rem, 1.6rem + 5vw, 5rem);
  text-transform: uppercase;
  letter-spacing: .005em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
  max-width: 15ch;
}
.hero-sub {
  color: var(--on-dark); font-size: clamp(1.05rem, 1rem + .5vw, 1.28rem);
  max-width: 54ch; margin: 0;
}
.blk-hero .btn { margin-top: .4rem; }

.hero-trust {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: .5ch;
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 500; letter-spacing: .06em; font-size: .88rem;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  padding: .4rem .8rem; border-radius: 100px;
}
.hero-trust li::before {
  content: ""; width: 16px; height: 8px; flex: none;
  background: var(--peak) left center / 32px 10px no-repeat;
}

/* ==========================================================================
   RICH TEXT
   ==========================================================================*/
.blk-rich .rich { max-width: var(--wrap); }
.blk-rich .rich > p, .blk-rich .rich > ul { max-width: 72ch; }
.blk-rich .rich p { margin: 0 0 1rem; }
.blk-rich .rich strong { color: var(--ever); font-weight: 700; }
.blk-rich .rich ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.blk-rich .rich li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.blk-rich .rich li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 18px; height: 9px;
  background: var(--peak) left center / 18px 9px no-repeat;
}

/* ==========================================================================
   MULTI-CHILD: SPLIT + ABOUT (grid on section, children into columns)
   ==========================================================================*/
.blk-split, .blk-about {
  display: grid; align-items: center;
  column-gap: clamp(1.6rem, 4vw, 3.4rem); row-gap: 1.6rem;
}
.blk-split {
  grid-template-columns:
    minmax(var(--gap),1fr) minmax(0, calc(var(--wrap)*.46)) minmax(0, calc(var(--wrap)*.54)) minmax(var(--gap),1fr);
}
.blk-about {
  grid-template-columns:
    minmax(var(--gap),1fr) minmax(0, calc(var(--wrap)*.44)) minmax(0, calc(var(--wrap)*.56)) minmax(var(--gap),1fr);
}
.blk-split > *, .blk-about > * { max-width: none; margin: 0; padding: 0; }
.blk-split > :first-child, .blk-about > :first-child { grid-column: 2; }
.blk-split > :last-child,  .blk-about > :last-child  { grid-column: 3; }

.split-img, .about-img { margin: 0; }
.split-img img, .about-img img {
  width: 100%; border-radius: var(--radius);
  /* angular expedition frame */
  border: 1px solid var(--line);
  box-shadow: -14px 14px 0 -2px var(--stone-200), 0 26px 46px -28px rgba(8,42,32,.5);
}
.split-b h2, .about-b h2 { margin-top: 0; }
.split-b p, .about-b p { margin: 0 0 1rem; max-width: 60ch; }

@media (max-width: 780px) {
  .blk-split, .blk-about { grid-template-columns: var(--gap) 1fr var(--gap); }
  .blk-split > :first-child, .blk-split > :last-child,
  .blk-about > :first-child, .blk-about > :last-child { grid-column: 2; }
  .split-img img, .about-img img { box-shadow: 0 20px 40px -26px rgba(8,42,32,.5); }
}

/* ==========================================================================
   FEATURES — cards with an ascending chevron top accent
   ==========================================================================*/
.feat-grid, .svc-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin-top: .5rem;
}
.feat, .svc-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.1rem 1.4rem 1.4rem;
  box-shadow: 0 18px 34px -26px rgba(8,42,32,.4);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.blk:nth-of-type(even) .feat, .blk:nth-of-type(even) .svc-card { background: var(--stone); }
.feat::before, .svc-card::before {
  content: ""; position: absolute; top: 1.1rem; left: 1.4rem;
  width: 40px; height: 12px;
  background: var(--peak) left center / 40px 12px no-repeat;
}
.feat:hover, .svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 26px 40px -26px rgba(8,42,32,.55);
}
@media (prefers-reduced-motion: reduce) { .feat, .svc-card { transition: none; } .feat:hover, .svc-card:hover { transform: none; } }
.feat h3 { margin: 0 0 .5rem; }
.feat p { margin: 0; color: var(--ink-soft); }

/* ==========================================================================
   SERVICES
   ==========================================================================*/
.svc-card { display: flex; flex-direction: column; }
.svc-card h3 { margin: 0 0 .5rem; }
.svc-card h3 a { color: var(--ever); text-decoration: none; }
.svc-card h3 a:hover { color: var(--orange-600); }
.svc-card p { margin: 0 0 1rem; color: var(--ink-soft); }
.svc-more {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; letter-spacing: .06em; font-size: .9rem;
  color: var(--orange-600); text-decoration: none;
}
.svc-more::after { content: " \2192"; transition: margin-left .15s ease; }
.svc-card:hover .svc-more::after { margin-left: .3rem; }
@media (prefers-reduced-motion: reduce) { .svc-more::after { transition: none; } }

/* ==========================================================================
   STEPS — ASCENDING STAIRCASE with orange elevation markers
   ==========================================================================*/
.blk-steps ol {
  list-style: none; padding-left: var(--gap); padding-right: var(--gap);
  margin: 1.8rem auto 0; max-width: var(--wrap);
  display: flex; flex-direction: column; gap: 1rem;
}
.blk-steps li {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 1.1rem;
  width: min(100%, 660px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 1.05rem 1.3rem;
  box-shadow: 0 16px 30px -26px rgba(8,42,32,.4);
}
.blk:nth-of-type(odd) .blk-steps li { background: var(--paper); }
/* each step literally climbs to the right */
.blk-steps li:nth-child(2) { margin-left: clamp(0px, 5vw, 4.5rem); }
.blk-steps li:nth-child(3) { margin-left: clamp(0px, 10vw, 9rem); }
.blk-steps li:nth-child(4) { margin-left: clamp(0px, 15vw, 13.5rem); }
.blk-steps li:nth-child(5) { margin-left: clamp(0px, 20vw, 18rem); }
.blk-steps li:nth-child(6) { margin-left: clamp(0px, 25vw, 22.5rem); }

.step-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1;
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  color: #fff; background: var(--orange);
  /* upward-peak elevation marker (angular, not a circle) */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: .55rem;
}
.step-b h3 { margin: 0 0 .25rem; }
.step-b p { margin: 0; color: var(--ink-soft); }

@media (max-width: 720px) {
  .blk-steps li { width: 100%; }
  .blk-steps li:nth-child(n) { margin-left: 0; }
}

/* ==========================================================================
   STAT BAND — deep evergreen, orange numerals, faint chevron contour
   ==========================================================================*/
.blk.blk-stats {
  background: var(--ever-800);
  background-image: var(--contour);
  background-size: 64px 36px;
  color: var(--on-dark);
  border-top: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
}
.stat-row {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
}
.stat { padding: .5rem .3rem; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.12); }
.stat-v {
  display: block;
  font-family: var(--font-display); font-weight: 700; line-height: 1.02;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
  color: var(--orange);
}
.stat-l {
  display: block; margin-top: .5rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-dim); font-weight: 600;
}
@media (max-width: 560px) { .stat + .stat { border-left: none; } }

/* ==========================================================================
   SERVICE AREA
   ==========================================================================*/
/* full wrap width so its left edge matches the left-aligned h2 (it is a .blk
   direct child; a small max-width + inherited auto margins would center it) */
.blk-area > p {
  max-width: 66ch; margin-left: auto; margin-right: auto;
  text-align: center; color: var(--ink-soft);
}
.area-list {
  list-style: none; padding: 0; margin: 2.2rem auto 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.area-list > li {
  position: relative; padding: 1.15rem 1.2rem 1.15rem 2.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  font-size: .95rem; line-height: 1.55; color: var(--ink);
  box-shadow: 0 1px 2px rgba(12, 58, 44, .05);
  transition: transform .16s ease, box-shadow .16s ease;
}
.blk:nth-of-type(odd) .area-list > li { background: #fff; }
.area-list > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 58, 44, .11);
}
.area-list > li::before {
  content: ""; position: absolute; left: 1rem; top: 1.35em;
  width: 20px; height: 10px;
  background: var(--peak) left center / 20px 10px no-repeat;
}

/* ==========================================================================
   FAQ
   ==========================================================================*/
.blk-faq details {
  max-width: var(--wrap);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ever);
  border-radius: var(--radius);
  margin-bottom: .8rem;
  overflow: hidden;
}
.blk:nth-of-type(odd) .blk-faq details { background: var(--paper); }
.blk-faq summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.3rem; position: relative;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .015em; font-weight: 600; font-size: 1.12rem;
  color: var(--ever);
}
.blk-faq summary::-webkit-details-marker { display: none; }
.blk-faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  color: var(--orange); transition: transform .2s ease;
}
.blk-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .blk-faq summary::after { transition: none; } }
.blk-faq summary:hover { color: var(--orange-600); }
.faq-a { padding: 0 1.3rem 1.15rem; }
.faq-a p { margin: 0; color: var(--ink-soft); max-width: 74ch; }

/* ==========================================================================
   TESTIMONIALS — multi-child (blockquotes are direct children)
   ==========================================================================*/
.blk-tests {
  display: grid; gap: clamp(1rem, 3vw, 1.8rem);
  grid-template-columns:
    minmax(var(--gap),1fr)
    repeat(2, minmax(0, calc((var(--wrap) - 2rem)/2)))
    minmax(var(--gap),1fr);
}
.blk-tests > * { max-width: none; margin: 0; padding: 0; }
.blk-tests > blockquote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 2.4rem 1.6rem 1.4rem; position: relative;
  font-size: 1.08rem; line-height: 1.6; color: var(--ink);
}
.blk:nth-of-type(odd) .blk-tests > blockquote { background: var(--paper); }
.blk-tests > blockquote:nth-child(odd)  { grid-column: 2; }
.blk-tests > blockquote:nth-child(even) { grid-column: 3; }
.blk-tests blockquote::before {
  content: ""; position: absolute; top: 1.15rem; left: 1.6rem;
  width: 44px; height: 13px;
  background: var(--peak) left center / 44px 13px no-repeat;
}
.blk-tests cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; color: var(--ever);
}
@media (max-width: 760px) {
  .blk-tests { grid-template-columns: var(--gap) 1fr var(--gap); }
  .blk-tests > blockquote:nth-child(odd),
  .blk-tests > blockquote:nth-child(even) { grid-column: 2; }
}

/* ==========================================================================
   CTA BAND + CLOSING BAND — evergreen summit bands
   ==========================================================================*/
.blk.blk-cta, .blk.blk-closing {
  background-color: var(--ever);
  background-image: var(--contour), linear-gradient(160deg, var(--ever) 0%, var(--ever-900) 100%);
  background-size: 64px 36px, auto;
  color: var(--on-dark);
  text-align: center;
  border-top: 3px solid var(--orange);
}
.blk.blk-cta > *, .blk.blk-closing > * { text-align: center; }
.blk-cta h2, .blk-closing h2 { color: #fff; margin-left: auto; margin-right: auto; }
.blk-cta h2::before, .blk-closing h2::before { margin-left: auto; margin-right: auto; }
.blk-cta p, .blk-closing p {
  color: var(--on-dark); max-width: 60ch; margin: 0 auto 1.6rem;
  font-size: 1.1rem;
}

/* ==========================================================================
   GALLERY
   ==========================================================================*/
.gal-grid {
  display: grid; gap: 1rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gal-img { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gal-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal-img figcaption {
  padding: .7rem .9rem;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .04em; font-size: .82rem; color: var(--ink-soft);
  background: var(--paper);
}

/* ==========================================================================
   GENERIC IMAGE FIGURES + PLACEHOLDERS
   ==========================================================================*/
.ph-fig { margin: 0; }
.ph-fig img { border-radius: var(--radius); }
.ph-box {
  display: grid; place-content: center; gap: .5rem; text-align: center;
  min-height: 240px; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, var(--stone-200) 0 14px, var(--stone) 14px 28px);
  border: 2px dashed var(--silver); border-radius: var(--radius);
  color: var(--ink-soft);
}
.ph-role {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--ever);
}
.ph-brief { font-size: .85rem; max-width: 40ch; }

/* ==========================================================================
   FOOTER — deep evergreen
   ==========================================================================*/
.site-footer {
  background: var(--ever-900);
  background-image: var(--contour);
  background-size: 64px 36px;
  color: var(--on-dark-dim);
  border-top: 4px solid var(--orange);
}
.foot-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--gap) 2rem;
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
}
/* footer headings — MUST be light on the dark band (markup uses h3 here) */
.f-col h4, .f-col h3 {
  color: #fff; text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.15rem; margin: 0 0 .9rem;
}
.f-col h3.f-svc-h2, .f-svc-head {
  margin-top: 1.6rem; font-size: 1rem; color: var(--orange);
  letter-spacing: .08em;
}
.f-col a { color: var(--on-dark-dim); text-decoration: none; }
.f-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); }
.f-about p { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.6; }
.f-phone { font-family: var(--font-display); }
.f-phone a { color: var(--orange) !important; font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
.f-phone a:hover { color: #fff !important; }
.f-map { margin-top: 1rem; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.map { width: 100%; height: 220px; border: 0; display: block; filter: saturate(.9); }

.area-cols {
  list-style: none; padding: 0; margin: 0 0 .5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .35rem .9rem;
}
.area-cols a, .f-svc-list a { font-size: .9rem; line-height: 1.5; }
.f-svc-list { list-style: none; padding: 0; margin: 0 0 .5rem; columns: 2; column-gap: 1.4rem; }
.f-svc-list li { break-inside: avoid; margin-bottom: .3rem; }

.foot-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.3rem var(--gap);
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-direction: column; gap: .7rem;
}
.legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.legal-links a {
  color: var(--on-dark-dim); text-decoration: none; font-size: .88rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
}
.legal-links a:hover { color: var(--orange); }
.legal-copy { font-size: .8rem; line-height: 1.6; color: #8ea198; max-width: 90ch; }

@media (max-width: 720px) {
  .foot-in { grid-template-columns: 1fr; }
  .f-svc-list { columns: 1; }
}

/* ==========================================================================
   STICKY MOBILE CALL BAR (must fit 320px)
   ==========================================================================*/
.call-bar { display: none; }
@media (max-width: 920px) {
  .call-bar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: .85rem .6rem;
    background: var(--orange);
    color: var(--ink); text-decoration: none;
    font-family: var(--font-display); text-transform: uppercase;
    font-weight: 700; letter-spacing: .03em;
    font-size: clamp(.82rem, .72rem + 1.2vw, 1.05rem);
    white-space: nowrap;
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5);
    border-top: 2px solid var(--orange-600);
  }
  .call-bar:hover { background: var(--orange-600); color: #fff; }
  /* keep content clear of the fixed bar */
  body { padding-bottom: 3.4rem; }
}

/* ==========================================================================
   SCROLL REVEAL — no-JS safe (only hides when html.js is present)
   ==========================================================================*/
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}