@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Figtree:wght@400;500;600;800&family=DM+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Eagle Valley Autos — stylesheet
   Direction: warm & local. Manila paper, spruce green, shop rust.
   Motif: the service ticket — mono labels, dashed perforated rules.
   Structure: same HTML/classes as before. Drop-in replacement for style.css.
   ========================================================================== */

:root{
  /* Surfaces */
  --chalk:#fffdf8;          /* cards, header */
  --manila:#f3ead8;         /* the paper this shop runs on */
  --manila-deep:#eaddc2;
  /* Ink */
  --ink:#22201c;
  --ink-soft:#5a5248;
  --ink-faint:#8a8073;
  /* Spruce — replaces the old near-black */
  --spruce:#1e3a32;
  --spruce-deep:#152a24;
  --spruce-line:#2f5347;
  /* Action */
  --rust:#b14328;
  --rust-deep:#8e3320;
  --ember:#e4a33a;          /* highlight only — used sparingly */
  /* Rules */
  --line:#ded0b3;
  --line-soft:#ebe1cd;
  --line-dark:#2f5347;
  /* Type */
  --display:"Zilla Slab",Rockwell,Georgia,serif;
  --body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Shape */
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --pill:999px;
  --shadow-sm:0 2px 6px rgba(43,32,20,.06);
  --shadow:0 10px 28px rgba(43,32,20,.10);
  --shadow-lg:0 22px 55px rgba(43,32,20,.16);
  /* Layout */
  --max:1180px;
  /* Legacy aliases so nothing orphans */
  --black:var(--spruce);
  --charcoal:var(--spruce-deep);
  --text:var(--ink);
  --muted:var(--ink-soft);
  --paper:var(--manila);
  --white:var(--chalk);
  --accent:var(--rust);
  --accent-dark:var(--rust-deep);
}

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

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:1.0625rem;      /* 17px — easier on the eyes than 16 */
  line-height:1.7;
  color:var(--ink);
  background:var(--chalk);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.1}
strong{font-weight:800}

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

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

.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.narrow{max-width:850px}
.narrow-copy{max-width:850px}
.center{text-align:center;margin-top:32px}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:16px;top:16px;z-index:1000;
  background:var(--chalk);color:var(--ink);
  padding:12px 18px;border-radius:var(--pill);
  box-shadow:var(--shadow);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The work-order label. Used for every eyebrow on the site. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--rust);
  margin:0 0 14px;
}
.eyebrow::before{content:"";width:16px;height:2px;background:currentColor;flex:0 0 auto}
.hero .eyebrow,.section-dark .eyebrow,.cta-band .eyebrow,.mountain-section .eyebrow{color:var(--ember)}
.cta-band .eyebrow{color:#ffe0c9}

.text-link{
  font-weight:800;color:var(--rust);text-decoration:none;
  border-bottom:2px solid rgba(177,67,40,.28);
  transition:border-color .18s ease,color .18s ease;
}
.text-link:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}
.block-link{display:inline-block;margin-top:14px}

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

.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  border:2px solid var(--rust);border-radius:var(--pill);
  background:var(--rust);color:#fff;
  font-family:var(--body);font-size:1rem;font-weight:800;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.button:hover{background:var(--rust-deep);border-color:var(--rust-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.button:active{transform:translateY(0)}
.button-small{min-height:44px;padding:0 20px;font-size:.92rem}
.button-secondary{background:var(--spruce);border-color:var(--spruce);color:#fff}
.button-secondary:hover{background:var(--spruce-deep);border-color:var(--spruce-deep)}
.button-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.button-ghost:hover{background:#fff;color:var(--spruce);border-color:#fff}
.button-light{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.button-light:hover{background:#fff;border-color:#fff;color:var(--rust)}
.button-outline-light{background:transparent;color:#fff;border-color:#fff}
.button-outline-light:hover{background:#fff;color:var(--rust)}

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

.topbar{background:var(--spruce-deep);color:#d8e4df;font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.topbar-inner{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar-links{display:flex;gap:26px}
.topbar a{text-decoration:none;transition:color .16s ease}
.topbar a:hover{color:var(--ember)}

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,253,248,.94);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px);
}
.header-inner{display:flex;align-items:center;min-height:92px;gap:24px}
.brand{flex:0 1 250px;min-width:0}
.brand img{width:250px;height:auto}

.primary-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:8px;margin-left:auto}

/* Works whether the links are direct children of .primary-nav or wrapped
   in the usual <ul><li> list. Both are laid out on one row. */
.primary-nav ul{
  display:flex;align-items:center;flex-wrap:nowrap;gap:8px;
  list-style:none;margin:0;padding:0;
}
.primary-nav li{margin:0}

.primary-nav>a,
.primary-nav li>a{
  display:inline-block;white-space:nowrap;
  text-decoration:none;font-weight:600;font-size:.98rem;
  padding:10px 14px;border-radius:var(--pill);
  transition:background .16s ease,color .16s ease;
}
.primary-nav>a:hover,
.primary-nav li>a:hover{background:var(--manila);color:var(--rust)}
.header-cta{margin-left:10px}
.nav-toggle{display:none}

/* ---------------------------------------------- header dropdown menus --- */

/* Attribute selectors so this covers the Services mega menu and the
   Service Areas menu alike, whatever their exact class names are. */
.nav-dropdown,
.site-header [class*="nav-dropdown"]{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 14px;border:0;border-radius:var(--pill);
  background:transparent;color:var(--ink);
  font-family:var(--body);font-size:.98rem;font-weight:600;line-height:1;
  cursor:pointer;transition:background .16s ease,color .16s ease;
}
.nav-dropdown-toggle:hover,.nav-dropdown.is-open .nav-dropdown-toggle{background:var(--manila);color:var(--rust)}
.nav-chevron{width:11px;height:8px;flex:0 0 auto;transition:transform .2s ease}
.nav-dropdown.is-open .nav-chevron{transform:rotate(180deg)}

/* The panel itself. Matched structurally — the first div inside any
   dropdown wrapper — so an unrecognized menu still gets hidden and
   positioned instead of dumping its contents into the header. */
.services-mega-menu,
.site-header [class*="nav-dropdown"]>div{
  position:absolute;top:calc(100% + 18px);left:50%;
  width:min(820px,calc(100vw - 40px));
  transform:translate(-50%,10px);
  background:var(--chalk);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:100;
}
.services-mega-menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.nav-dropdown.is-open .services-mega-menu,
.site-header [class*="nav-dropdown"].is-open>div,
.site-header [class*="nav-dropdown"][aria-expanded="true"]>div{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}

/* Interior styling for a dropdown panel whose inner classes aren't known.
   Scoped away from the Services mega menu so it can't disturb it. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu){
  padding:24px 26px 22px;
  width:min(760px,calc(100vw - 40px));
  font-family:var(--body);font-size:.9rem;line-height:1.6;
}

/* --- Spruce head band, to match the Services mega menu. -----------------
   The :has(strong) guard is deliberate: the band only paints if the first
   child actually contains a heading. If the structure isn't what I expect,
   nothing here applies and the panel falls back to the plain layout below
   rather than wrapping spruce around the wrong sentence. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu):has(>*:first-child:has(strong)){
  padding:0 26px 22px;background-image:none;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong){
  position:relative;
  margin:0 -26px 20px;padding:24px 30px 22px;
  background:var(--spruce);color:#cfdcd7;
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.16em;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) strong{
  display:block;margin-top:7px;
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  line-height:1.1;letter-spacing:-.015em;color:#fff;
  text-transform:none;letter-spacing:-.015em;
}
/* Perforation along the bottom of the band — the tear line. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--spruce-line) 0 7px,transparent 7px 14px);
}

.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) p{
  margin:0 0 14px;color:var(--ink-soft);
}
/* Section headings further down the panel get the mono kicker treatment. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:not(:first-child):has(>strong){
  margin:18px 0 12px;padding:0 0 9px;
  border-bottom:1px dashed var(--line);
  font-family:var(--mono);font-size:.66rem;color:var(--rust);
  text-transform:uppercase;letter-spacing:.12em;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:not(:first-child) strong{
  display:block;margin-top:6px;
  font-family:var(--display);font-size:1.05rem;color:var(--ink);
  text-transform:none;letter-spacing:-.01em;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) p:last-child{
  margin:14px 0 0;padding-top:14px;
  border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) strong{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  line-height:1.2;color:var(--ink);
}
/* Each link becomes a tile: name on top, description beneath, three per row. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a{
  display:inline-grid;align-content:start;gap:2px;vertical-align:top;
  width:calc(33.333% - 10px);margin:0 6px 4px 0;
  padding:9px 11px;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;
  transition:background .16s ease,color .16s ease;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:hover{
  background:var(--manila);color:var(--rust);
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a>*{
  display:block;font-weight:700;font-size:.92rem;line-height:1.3;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a>*+*{
  font-family:var(--mono);font-weight:400;font-size:.72rem;
  line-height:1.4;color:var(--ink-faint);
}

/* --- Head-band content, relit ------------------------------------------
   The generic panel rules above are written for a manila panel: they set
   p to --ink-soft and links to --ink. Those same rules also reach INTO the
   spruce head band, where dark ink on dark green renders as nothing. The
   Locations panel lost its address line and both shop links this way.
   Re-colour anything sitting inside the band. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) p{
  color:#cfdcd7;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) a{
  width:auto;margin:0 8px 8px 0;padding:9px 15px;
  border:1.5px solid var(--spruce-line);border-radius:var(--pill);
  color:#fff;
  font-family:var(--body);font-size:.78rem;
  text-transform:none;letter-spacing:normal;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) a:hover,
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) a:focus-visible{
  background:#fff;border-color:#fff;color:var(--spruce);
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong) a>*{
  font-family:var(--body);font-size:.78rem;font-weight:700;color:inherit;
}

/* Decorative arrows are element children, so the tile rule above turns them
   into their own block and drops them onto a second line. Keep them inline
   and keep their link on one line. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a>span[aria-hidden="true"]{
  display:inline;margin-left:6px;
  font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:has(>span[aria-hidden="true"]){
  width:auto;white-space:nowrap;
}

.services-menu-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:35px;
  padding:26px 30px 24px;background:var(--spruce);color:#fff;
}
.services-menu-head>div{max-width:520px}
.services-menu-kicker{
  display:block;font-family:var(--mono);color:var(--ember);
  text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;margin-bottom:6px;
}
.services-menu-head strong{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.1}
.services-menu-head p{margin:8px 0 0;color:#cfdcd7;font-size:.84rem;line-height:1.5}
.services-all-link{
  flex:0 0 auto;align-self:center;
  color:#fff!important;border:1.5px solid var(--spruce-line);border-radius:var(--pill);
  padding:10px 16px!important;font-size:.78rem!important;font-weight:700;text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.services-all-link:hover{border-color:#fff;background:#fff;color:var(--spruce)!important}

.services-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 16px 18px}
.services-menu-group{padding:14px}
.services-menu-label{
  display:block;margin:0 0 8px;padding:0 8px 9px;
  border-bottom:1px dashed var(--line);
  font-family:var(--mono);color:var(--rust);
  text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;
}
.services-menu-group>a{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;padding:10px!important;border:0!important;border-radius:var(--r-sm);
  color:var(--ink)!important;text-decoration:none!important;
  font-size:.86rem!important;font-weight:700!important;line-height:1.25;
  transition:background .16s ease,color .16s ease;
}
.services-menu-group>a::after{
  content:"→";grid-column:2;grid-row:1 / span 2;
  color:var(--ink-faint);font-size:.95rem;line-height:1;
  transition:transform .18s ease,color .18s ease;
}
.services-menu-group>a span{grid-column:1;min-width:0}
.services-menu-group>a small{grid-column:1;color:var(--ink-faint);font-size:.72rem;font-weight:400;line-height:1.3}
.services-menu-group>a:hover,.services-menu-group>a:focus-visible{background:var(--manila);color:var(--rust)!important;outline:none}
.services-menu-group>a:hover::after,.services-menu-group>a:focus-visible::after{transform:translateX(3px);color:var(--rust)}

/* ---------------------------------------------------- dropdown polish --- */

/* Paper notch pointing up at the toggle. Colored to match whichever panel
   it belongs to — spruce for the mega menu's dark head, chalk otherwise. */
[class*="nav-dropdown"]::after{
  content:"";position:absolute;left:50%;top:calc(100% + 11px);
  width:15px;height:15px;margin-left:-7px;
  border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);
  transform:rotate(45deg) scale(.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.9,.3,1.2),visibility .18s;
  z-index:101;
}
[class*="nav-dropdown"]:has(>.services-mega-menu)::after{background:var(--spruce);border-color:var(--spruce)}
[class*="nav-dropdown"]:has(>div:not(.services-mega-menu))::after{background:var(--chalk)}
[class*="nav-dropdown"].is-open::after,
[class*="nav-dropdown"][aria-expanded="true"]::after{
  opacity:1;visibility:visible;transform:rotate(45deg) scale(1);
}

/* Hover bridge so the pointer can cross the gap without the panel closing. */
.site-header [class*="nav-dropdown"]>div::before{
  content:"";position:absolute;left:0;right:0;top:-22px;height:22px;
}

/* Perforated top edge — the tear-off line of a service ticket. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu){
  background-image:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 0;
  padding-top:30px;
}

/* Toggle gets a rust underline that grows from the middle when open. */
.nav-dropdown-toggle{position:relative}
.nav-dropdown-toggle::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--rust);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
[class*="nav-dropdown"].is-open .nav-dropdown-toggle::after{transform:scaleX(1)}

/* Panels lift in rather than just fading. */
.services-mega-menu,
.site-header [class*="nav-dropdown"]>div{transform:translate(-50%,10px) scale(.985)}
.nav-dropdown.is-open .services-mega-menu,
.site-header [class*="nav-dropdown"].is-open>div,
.site-header [class*="nav-dropdown"][aria-expanded="true"]>div{
  transform:translate(-50%,0) scale(1);
}

/* Tiles: rust rule slides in from the left, arrow nudges right. */
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a{
  position:relative;overflow:hidden;
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--rust);border-radius:2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .2s cubic-bezier(.2,.9,.3,1);
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:hover::before,
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:focus-visible::before{
  transform:scaleY(1);
}
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:hover,
.site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a:focus-visible{
  background:var(--manila);color:var(--rust);outline:none;
}

/* Contents stagger in behind the panel. */
@keyframes nav-tile-in{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}
.site-header [class*="nav-dropdown"].is-open>div>*{
  animation:nav-tile-in .3s ease both;
}
.site-header [class*="nav-dropdown"].is-open>div>*:nth-child(1){animation-delay:.04s}
.site-header [class*="nav-dropdown"].is-open>div>*:nth-child(2){animation-delay:.07s}
.site-header [class*="nav-dropdown"].is-open>div>*:nth-child(3){animation-delay:.10s}
.site-header [class*="nav-dropdown"].is-open>div>*:nth-child(4){animation-delay:.13s}
.site-header [class*="nav-dropdown"].is-open>div>*:nth-child(n+5){animation-delay:.16s}

@media(prefers-reduced-motion:reduce){
  .site-header [class*="nav-dropdown"] *,
  [class*="nav-dropdown"]::after{animation:none!important;transition-duration:.01ms!important}
}

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

.section{padding:96px 0}
.section-muted{background:var(--manila)}
.section-dark{background:var(--spruce);color:#f2f6f4}
.section-dark p{color:#cfdcd7}
.section-dark h2,.section-dark h3,.section-dark strong{color:#fff}
.section-dark .button{margin-top:18px}

.section-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;margin-bottom:48px}
.section-heading h2,.split h2,.cta-band h2,.faq-layout h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.06;letter-spacing:-.02em;
  margin:.1em 0;
}
.section-heading>p{color:var(--ink-soft);margin:0}
.section-lead{color:var(--ink-soft)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.align-center{align-items:center}
.readable-copy{font-size:1.08rem;max-width:740px}
.readable-copy p:first-child{margin-top:0}
.readable-copy p:last-child{margin-bottom:0}

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

.hero{
  position:relative;overflow:hidden;
  background:var(--spruce);
  color:#fff;padding:100px 0;
}
/* Warm paper grain — the one bit of texture on the page. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::after{
  content:"";position:absolute;right:-10%;top:-30%;width:60%;height:160%;
  background:radial-gradient(closest-side,rgba(228,163,58,.16),transparent 70%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.45fr .75fr;gap:70px;align-items:center}
.hero h1,.page-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.022em;
  margin:.06em 0 .3em;
}
.hero-lead{font-size:1.2rem;max-width:720px;color:#d6e3de}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero-points span{
  font-family:var(--mono);font-size:.8rem;color:#cfdcd7;
  border:1px solid var(--spruce-line);border-radius:var(--pill);
  padding:9px 16px;
}
.hero-local{
  margin:26px 0 0;color:#a9c0b8;
  font-family:var(--mono);font-size:.84rem;letter-spacing:.01em;
}
.hero-local strong{color:#fff;font-weight:500}

.hero-card{
  background:var(--chalk);color:var(--ink);
  padding:38px;border-radius:var(--r-lg);
  border:1px solid var(--line-soft);border-top:5px solid var(--rust);
  box-shadow:var(--shadow-lg);
}
.hero-card h2{font-size:1.9rem;line-height:1.1;margin:.15em 0 .6em}

.home-hero{padding:96px 0 88px}
.home-hero .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:58px}
.home-hero h1{max-width:820px}

/* --------------------------------------------------------- trust strip --- */

.trust-strip{background:var(--manila);border-bottom:1px dashed var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.trust-grid>div{padding:26px 28px;position:relative}
.trust-grid>div+div::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;
  border-left:1px dashed var(--line);
}
.trust-grid strong,.trust-grid span{display:block}
.trust-grid strong{font-family:var(--display);font-size:1.1rem;font-weight:700}
.trust-grid span{font-size:.86rem;color:var(--ink-soft);margin-top:2px}

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

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{
  position:relative;padding:34px;
  background:var(--chalk);
  border:1px solid var(--line-soft);border-radius:var(--r);
  min-height:260px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.service-card>span{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.service-card h2,.service-card h3{font-size:1.4rem;line-height:1.18;margin:.6em 0 .45em}
.service-card p{color:var(--ink-soft)}
.service-card a{font-weight:800;color:var(--rust);text-decoration:none}
.service-card a:hover{color:var(--rust-deep)}
.home-service-grid .service-card{min-height:285px}

.service-more{
  margin-top:22px;padding:26px 30px;
  background:var(--chalk);border:1px dashed var(--line);border-radius:var(--r);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
}
.service-more strong{font-size:1.02rem}
.service-more span{color:var(--ink-soft);font-size:.94rem}

.location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.location-grid.large{grid-template-columns:repeat(4,1fr)}
.location-card{
  min-height:130px;padding:28px;
  background:var(--chalk);
  border:1px solid var(--line-soft);border-radius:var(--r);
  text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.location-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.location-card strong{font-family:var(--display);font-size:1.45rem;font-weight:700}
.location-card span{font-family:var(--mono);color:var(--ink-faint);font-size:.76rem;letter-spacing:.06em;margin-top:4px}
.location-card.featured{background:var(--spruce);color:#fff;border-color:var(--spruce)}
.location-card.featured span{color:#a9c0b8}

/* --- Locations index page — this file's actual class names never had
   rules. Reuses the same card language as .location-card above (chalk
   surface, dashed-free hairline border, rust badge, spruce featured
   state) but sized for the extra <p> tagline and <em> link this
   page's cards carry. */
.locations-directory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.locations-directory-card{
  position:relative;display:flex;flex-direction:column;min-height:190px;
  padding:26px 24px 24px;
  background:var(--chalk);
  border:1px solid var(--line-soft);border-radius:var(--r);
  text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.locations-directory-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.locations-directory-card>span{
  align-self:flex-start;margin-bottom:10px;
  padding:3px 10px;border-radius:var(--pill);
  background:var(--manila);color:var(--rust);
  font-family:var(--mono);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.locations-directory-card>strong{font-family:var(--display);font-size:1.35rem;font-weight:700;line-height:1.15}
.locations-directory-card>p{margin:6px 0 16px;color:var(--ink-soft);font-size:.88rem;line-height:1.45}
.locations-directory-card>em{margin-top:auto;font-style:normal;font-weight:700;color:var(--rust);font-size:.82rem}
.locations-directory-card.featured{background:var(--spruce);border-color:var(--spruce);color:#fff}
.locations-directory-card.featured>span{background:rgba(255,255,255,.14);color:#ffe9df}
.locations-directory-card.featured>strong{color:#fff}
.locations-directory-card.featured>p{color:#cfdcd7}
.locations-directory-card.featured>em{color:#fff}

@media(max-width:980px){.locations-directory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.locations-directory-grid{grid-template-columns:1fr}}
.location-copy{margin:36px auto 0;text-align:center;color:var(--ink-soft)}

.callout{
  background:var(--chalk);
  border:1px solid var(--line-soft);border-left:5px solid var(--rust);
  border-radius:var(--r);padding:38px;box-shadow:var(--shadow);
}
.callout strong{font-family:var(--display);font-size:1.6rem;font-weight:700}
.phone-big{
  display:inline-block;margin-top:12px;
  font-family:var(--mono);font-weight:500;font-size:1.75rem;letter-spacing:-.01em;
  color:var(--rust);text-decoration:none;
}
.phone-big:hover{color:var(--rust-deep)}

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

.cta-band{background:var(--rust);color:#fff;padding:62px 0}
.cta-band h2{margin:0;color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.home-contact-band p:not(.eyebrow){margin:.6rem 0 0;color:#ffe3d6}
.home-contact-band .hero-actions{margin-top:0;justify-content:flex-end}

/* --------------------------------------------------------- page heros --- */

.page-hero{background:var(--manila);padding:82px 0;border-bottom:1px dashed var(--line)}
.page-hero h1{color:var(--ink)}
.page-hero p:not(.eyebrow){font-size:1.14rem;color:var(--ink-soft);max-width:760px}
.page-hero .button-ghost{color:var(--ink);border-color:var(--ink)}
.page-hero .button-ghost:hover{background:var(--ink);color:var(--manila);border-color:var(--ink)}

.breadcrumbs{background:var(--chalk);border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:.76rem;color:var(--ink-faint)}
.breadcrumbs .container{display:flex;gap:10px;align-items:center;min-height:46px;flex-wrap:wrap}
.breadcrumbs a{color:var(--ink-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--rust)}

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

.prose{max-width:760px;font-size:1.1rem}
.prose p:first-child{margin-top:0}
.prose p:last-child{margin-bottom:0}

.compact-list{margin:22px 0 26px;padding:0;list-style:none}
.compact-list li{position:relative;padding:11px 0 11px 30px;border-bottom:1px dashed var(--line-soft);color:var(--ink-soft)}
.compact-list li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--rust);font-weight:800}
.compact-list li:last-child{border-bottom:0}

/* Featured differentiator line — e.g. truck alignment, the one thing
   competitors in the valley don't offer. Bolder text + a small rust
   pill so it doesn't read as just another bullet in the list. */
.compact-list li.list-featured{color:var(--ink);font-weight:700}
.compact-list li.list-featured::before{color:var(--rust)}
.list-badge{
  display:inline-block;margin-left:8px;padding:3px 9px;
  background:var(--rust);color:#fff;border-radius:var(--pill);
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;
}

.check-list,.service-list{list-style:none;margin:0;padding:0;border-top:1px dashed var(--line)}
.check-list li,.service-list li{position:relative;padding:15px 10px 15px 32px;border-bottom:1px dashed var(--line)}
.check-list li::before{content:"✓";position:absolute;left:2px;color:var(--rust);font-weight:800}
.service-list li::before{content:"—";position:absolute;left:2px;color:var(--ember);font-weight:700}

/* --------------------------------------------------- home mid sections --- */

.intro-section{padding-bottom:80px}
.intro-split{align-items:start}

.mountain-section .section-lead{font-size:1.06rem;max-width:560px;color:#cfdcd7}
.mountain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mountain-grid>div{
  background:rgba(255,255,255,.04);
  border:1px solid var(--spruce-line);border-radius:var(--r);
  padding:26px;
}
.mountain-grid strong,.mountain-grid span{display:block}
.mountain-grid strong{font-family:var(--display);font-size:1.16rem;font-weight:700;color:#fff;margin-bottom:8px}
.mountain-grid span{color:#c3d4ce;font-size:.94rem;line-height:1.6}
.local-service-section .readable-copy p{color:#cfdcd7}

/* ----------------------------------------------------------------- FAQ --- */

.faq-section{border-top:1px solid var(--line-soft)}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px;align-items:start}
.faq-intro{color:var(--ink-soft)}
.faq-list{border-top:1px dashed var(--line)}
.faq-list details{border-bottom:1px dashed var(--line)}
.faq-list summary{
  position:relative;cursor:pointer;list-style:none;
  padding:22px 52px 22px 0;font-weight:700;font-size:1.05rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--rust);font-size:1.15rem;font-weight:400;line-height:1;
  transition:background .16s ease,border-color .16s ease;
}
.faq-list summary:hover::after{background:var(--manila);border-color:var(--rust)}
.faq-list details[open] summary::after{content:"−"}
.faq-list details>div{padding:0 48px 24px 0;color:var(--ink-soft)}
.faq-list details>div p{margin:0}

/* ------------------------------------------------------ service pages --- */

.service-hero{padding-top:70px}
.service-hero .hero-actions{margin-top:30px}
.service-hero .button-secondary{color:#fff}
.service-content-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(285px,.5fr);gap:72px;align-items:start}
.service-contact-card{
  background:var(--manila);
  border:1px solid var(--line);border-top:5px solid var(--rust);
  border-radius:var(--r);padding:32px;
}
.service-contact-card h2{font-family:var(--display);font-size:1.7rem;line-height:1.12;margin:.2em 0 .6em}
.service-contact-card .phone-big{font-size:1.45rem}

.service-two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.service-two-col h2{font-family:var(--display);font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.1;margin:.1em 0 .65em}

.compact-heading{align-items:center}
.compact-heading>a{justify-self:end}
.related-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-service-card{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:130px;padding:26px;
  background:var(--chalk);border:1px solid var(--line-soft);border-radius:var(--r);
  text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.related-service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.related-service-card strong{font-family:var(--display);font-size:1.22rem;font-weight:700}
.related-service-card span{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);margin-top:16px}

.services-directory{padding-bottom:78px}
.directory-grid .service-card-link{
  display:block;text-decoration:none;min-height:275px;
  padding:34px;background:var(--chalk);
  border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.directory-grid .service-card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.directory-grid .service-card-link strong{display:inline-block;margin-top:14px;color:var(--rust);font-family:var(--body);font-weight:800}

/* --------------------------------------------------------------- form --- */

.contact-form{background:var(--manila);padding:38px;border:1px solid var(--line);border-radius:var(--r-lg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-grid label{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid textarea{
  display:block;width:100%;margin-top:9px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--chalk);padding:14px 16px;
  font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.form-grid input:hover,.form-grid textarea:hover{border-color:var(--ink-faint)}
.form-grid input:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--rust);
  box-shadow:0 0 0 4px rgba(177,67,40,.14);
}
.form-note{font-family:var(--mono);font-size:.76rem;color:var(--ink-faint);line-height:1.6}

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

.site-footer{background:var(--spruce-deep);color:#c3d4ce;padding:70px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .9fr .9fr;gap:48px}
.footer-logo{
  display:block;width:100%;max-width:280px;height:auto;
  background:#fff;                 /* matches the JPG's own white edge — no seam */
  border-radius:var(--r-sm);
  padding:14px 16px;
  margin-bottom:22px;
}
.site-footer h2{
  color:#fff;font-family:var(--mono);font-weight:500;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;
}
.site-footer a{color:#fff;text-decoration:none;transition:color .16s ease}
.site-footer a:hover{color:var(--ember)}
.footer-bottom{
  border-top:1px dashed var(--spruce-line);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;
  font-family:var(--mono);font-size:.74rem;color:#8ba79e;
}

/* -------------------------------------------------- photo-ready styles --- */
/* Drop an <img> or <figure class="shot"> in and it will already look right. */

.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--manila-deep);box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.shot-tall img{aspect-ratio:3/4}
.shot-wide img{aspect-ratio:16/9}
.shot figcaption{
  padding:12px 16px;background:var(--chalk);
  font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);
  border-top:1px dashed var(--line);
}
.service-card .shot,.hero-card .shot{margin-bottom:20px}

/* --------------------------------------------------------- responsive --- */

@media(max-width:980px){
  .header-cta{display:none}
  .primary-nav,.primary-nav ul{gap:4px}
  .brand{flex-basis:210px}
  .brand img{width:210px}
  .hero-grid,.section-heading,.split,.service-content-grid,.service-two-col,.faq-layout{grid-template-columns:1fr}
  .home-hero .hero-grid{grid-template-columns:1fr;gap:40px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .location-grid.large{grid-template-columns:repeat(2,1fr)}
  .related-service-grid{grid-template-columns:repeat(2,1fr)}
  .service-contact-card{max-width:560px}
  .service-content-grid,.service-two-col{gap:40px}
  .faq-layout{gap:32px}
  .hero{padding:76px 0}
  .section{padding:76px 0}
  .service-more{grid-template-columns:1fr;gap:10px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .home-contact-band .hero-actions{justify-content:flex-start}
}

@media(max-width:760px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .topbar-inner{justify-content:center}
  .topbar-inner>span,.topbar-links a:last-child{display:none}

  .header-inner{min-height:78px}
  .brand,.brand img{width:205px;flex-basis:205px}
  .nav-toggle{
    display:flex;margin-left:auto;width:46px;height:46px;
    border:0;border-radius:var(--pill);background:var(--manila);
    flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:12px;
  }
  .nav-toggle span:not(.sr-only){height:2px;background:var(--ink);width:100%}
  .primary-nav{
    display:none;position:absolute;top:78px;left:0;right:0;
    background:var(--chalk);border-bottom:1px solid var(--line);
    padding:14px 22px 20px;flex-direction:column;align-items:stretch;gap:0;
    box-shadow:var(--shadow);
    /* Absolutely positioned = out of document flow, so an expanded
       dropdown (Services especially) can run taller than the screen
       with nothing to scroll it into view. Cap it and scroll inside. */
    max-height:calc(100vh - 78px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .primary-nav.open{display:flex}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .primary-nav>a,
  .primary-nav li>a{display:block;width:100%;padding:14px 12px;border-bottom:1px dashed var(--line-soft);border-radius:0}
  .nav-dropdown,
  .site-header [class*="nav-dropdown"]{display:block;width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:14px 12px;border-radius:0;border-bottom:1px dashed var(--line-soft);white-space:normal}
  .services-mega-menu,
  .site-header [class*="nav-dropdown"]>div{position:static;width:100%;transform:none;box-shadow:none;border:0;border-radius:0;
    /* Base (desktop) rule hides closed panels with visibility:hidden,
       which still reserves their full layout height. That's harmless
       on desktop because the panel is position:absolute there. Here
       on mobile it's position:static, so that reserved height was
       sitting in the accordion as a giant invisible gap between the
       toggle and whatever comes next. display:none removes it from
       flow entirely; the open state below restores display:block. */
    display:none;opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-dropdown.is-open .services-mega-menu,
  .site-header [class*="nav-dropdown"].is-open>div,
  .site-header [class*="nav-dropdown"][aria-expanded="true"]>div{transform:none;display:block}
  .services-menu-head{display:none}
  [class*="nav-dropdown"]::after{display:none}
  .nav-dropdown-toggle::after{left:12px;right:auto;width:22px;bottom:8px}
  .site-header [class*="nav-dropdown"]>div:not(.services-mega-menu){padding:6px 0 10px;width:100%;background-image:none}
  .site-header [class*="nav-dropdown"]>div:not(.services-mega-menu):has(>*:first-child:has(strong)){padding:6px 0 10px}
  .site-header [class*="nav-dropdown"]>div:not(.services-mega-menu)>*:first-child:has(strong){display:none}
  .site-header [class*="nav-dropdown"]>div:not(.services-mega-menu) a{width:100%;margin:0}
  .site-header [class*="nav-dropdown"]>div::before{display:none}
  .services-mega-menu,
  .site-header [class*="nav-dropdown"]>div{transform:none;scale:1}
  .services-menu-grid{grid-template-columns:1fr;padding:6px 0 10px}

  .home-hero{padding:62px 0}
  .hero{padding:62px 0}
  .hero h1{font-size:clamp(2.35rem,11vw,3.6rem)}
  .hero-grid{gap:40px}
  .hero-card{padding:28px}
  .hero-local span{display:none}
  .hero-local strong{display:block}

  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-grid>div+div::before{display:none}
  .trust-grid>div{border-top:1px dashed var(--line)}
  .trust-grid>div:nth-child(-n+2){border-top:0}

  .service-grid,.location-grid,.location-grid.large,.related-service-grid,.mountain-grid{grid-template-columns:1fr}
  .section-heading{gap:20px;margin-bottom:34px}
  .cta-inner{align-items:flex-start;flex-direction:column}
  .compact-heading>a{justify-self:start}
  .callout,.contact-form{padding:26px}
  .service-more{padding:22px}
  .faq-list summary{padding-right:44px}
  .faq-list details>div{padding-right:8px}
  .directory-grid .service-card-link{min-height:auto}
  .footer-grid{grid-template-columns:1fr;gap:38px}
  .footer-bottom{flex-direction:column;gap:8px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .home-contact-band .hero-actions{width:100%}
  .home-contact-band .button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .button:hover,.service-card:hover,.location-card:hover,.related-service-card:hover,.directory-grid .service-card-link:hover{transform:none}
}

@media print{
  .topbar,.site-header,.cta-band,.nav-toggle{display:none}
  body{background:#fff;color:#000}
}