/* ===================================================================
   AR TOWING — design tokens
   Premium dark theme: near-black, champagne gold, brushed silver
   =================================================================== */
:root{
  --bg:        #0A0A0B;
  --bg-2:      #121316;
  --bg-3:      #1B1D21;
  --line:      rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.06);

  --text:        #F3F4F5;
  --text-muted:  rgba(243,244,245,.64);
  --text-faint:  rgba(243,244,245,.42);

  --gold:       #C9A961;
  --gold-bright:#E7CB8E;
  --gold-deep:  #8E6E2E;
  --silver:     #AEB6BE;

  --display: 'Sora', -apple-system, sans-serif;
  --body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 1180px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --radius: 14px;
  --ease: cubic-bezier(.22,.85,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--space-3); }

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

.sr-only-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- eyebrow / pill ---------- */
.eyebrow{
  font-family:var(--body); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:16.5px; color:var(--gold); margin:0 0 var(--space-2);
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); backdrop-filter:blur(6px);
  padding:8px 16px; border-radius:999px;
  font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--text);
  margin:0 0 var(--space-3);
}
.pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(201,169,97,.22); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:8px;
  font-weight:700; font-size:19px; letter-spacing:.01em;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
  white-space:nowrap;
}
.btn-icon{ width:17px; height:17px; flex:none; }
.btn-primary{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1A1305; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -10px rgba(201,169,97,.55); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -10px rgba(201,169,97,.7); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); padding:12px 23px; }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); transform:translateY(-2px); }
.btn-ghost:active{ transform:translateY(0) scale(.97); background:rgba(255,255,255,.1); }
.btn-lg{ padding:16px 28px; font-size:18px; }
.btn-lg.btn-ghost{ padding:15px 27px; }
.btn-nav{ padding:10px 20px; font-size:17.5px; }
.btn-nav .btn-icon{ width:15px; height:15px; }

/* =================== HEADER =================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled{ border-color:var(--line-soft); background:rgba(0,0,0,.92); }

.header-row{
  display:flex; align-items:center; gap:var(--space-3);
  height:80px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand-mark{ height:40px; width:auto; flex:none; }
.brand-word{ font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:.12em; color:var(--text); }

.main-nav{ display:flex; gap:var(--space-4); font-weight:600; font-size:18.5px; color:var(--text-muted); }
.main-nav a{ position:relative; padding:4px 0; transition:color .2s; }
.main-nav a:hover{ color:var(--text); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--gold);
  transition:right .25s var(--ease);
}
.main-nav a:hover::after{ right:0; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:2px; padding:0 var(--space-3) var(--space-2);
  background:var(--bg);
}
.mobile-nav a{ padding:14px 4px; font-weight:500; color:var(--text-muted); border-top:1px solid var(--line-soft); }
.mobile-nav .btn{ justify-content:center; margin-top:var(--space-2); }

@media (max-width:880px){
  .main-nav, .btn-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav.open{ display:flex; }
}

/* =================== HERO =================== */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--space-6) + 40px) 0 var(--space-6);
  min-height:88vh; min-height:88dvh; display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%),
    url('../assets/photos/flatbed-towing-calgary-dealership-pickup.jpg');
  background-size:cover; background-position:center 30%;
  filter:saturate(.9) contrast(1.05);
}
@media (max-width:880px){
  /* At phone/tablet-portrait aspect ratios, cover-fit crops this 4:3 photo
     down to a narrow vertical strip — centered, that strip lands on the
     dealership signage above the truck. Shifting the x-position left brings
     the actual tow truck (and the loaded pickup on its flatbed) into frame
     instead. */
  .hero-bg{ background-position:30% center; }
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 500px at 15% 15%, rgba(201,169,97,.14), transparent 60%);
}
.hero-grid{ position:relative; z-index:1; width:100%; }
.hero-copy{ max-width:640px; }

.hero-head{
  font-size:clamp(42px, 6vw, 78px);
  letter-spacing:-.02em;
  color:var(--text);
}
.hero-head .line{ display:block; }
.hero-head .accent{ color:var(--gold-bright); }

.hero-sub{ max-width:48ch; font-size:18px; line-height:1.65; color:var(--text-muted); margin:var(--space-3) 0 var(--space-4); }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5); }

.hero-facts{ display:flex; gap:var(--space-4); flex-wrap:wrap; padding-top:var(--space-4); border-top:1px solid var(--line); }
.hero-facts > div{ min-width:110px; }
.hero-facts dt{ font-family:var(--display); font-size:24px; font-weight:700; color:var(--gold-bright); }
.hero-facts dd{ margin:2px 0 0; font-size:17px; font-weight:500; color:var(--text-muted); max-width:16ch; }

/* road-style divider between sections */
.divider{ padding:0; }
.divider span{
  display:block; height:1px; margin:0 auto;
  max-width:var(--wrap);
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* =================== SECTIONS =================== */
.section{ padding:var(--space-6) 0; }
.section-head{ font-size:clamp(30px, 4vw, 48px); letter-spacing:-.01em; margin-bottom:var(--space-2); color:var(--text); }
.section-lead{ max-width:60ch; font-size:17px; color:var(--text-muted); margin-bottom:var(--space-5); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-5); }
.card{
  position:relative;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-2));
  border-radius:var(--radius);
  padding:var(--space-4) var(--space-3) var(--space-3);
  border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(201,169,97,.45); background:var(--bg-3); }
.card-icon{ width:34px; height:34px; color:var(--gold); margin-bottom:var(--space-3); }
.card h3{ font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:8px; letter-spacing:-.005em; color:var(--text); }
.card p{ color:var(--text-muted); font-size:19px; font-weight:500; line-height:1.6; }
.card-link{
  display:inline-block; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:18px; font-weight:700; color:var(--gold-bright);
  transition:color .2s;
}
.card-link:hover{ color:var(--gold); }

/* ---- services: expanding cards ---- */
.expand-cards{ display:flex; gap:10px; height:460px; margin-top:var(--space-5); }
.expand-card{
  position:relative; flex:1 1 0%; min-width:0; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-3));
}

.expand-card-trigger{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:var(--space-3); text-align:left;
}
.expand-card-icon{ width:28px; height:28px; color:var(--gold); flex:none; }

.expand-card-label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display); font-weight:800; font-size:18.5px; letter-spacing:.01em;
  color:var(--text); white-space:nowrap; max-height:250px;
}

.expand-card-detail{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--space-3); box-sizing:border-box;
  opacity:0; visibility:hidden;
}
.expand-card-detail h3{ font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:8px; color:var(--text); }
.expand-card-detail p{ font-size:18.5px; font-weight:500; line-height:1.55; color:var(--text-muted); margin-bottom:12px; max-width:32ch; }
.expand-card-detail .card-link{ padding-top:0; border-top:0; }

/* Desktop-width row layout: pure CSS hover/focus — no JS, no state to get
   stuck. Resting state is always neutral (all equal width); hovering or
   tab-focusing a card grows it and shrinks its siblings via :has(); moving
   your pointer to a different card swaps which one is grown; leaving the
   whole group — including the pointer being scrolled out from under a
   stationary cursor — drops straight back to neutral, because :hover simply
   stops being true. min-width still gates this (below it the layout switches
   to the column accordion), but (hover:hover)/(pointer:fine) does not —
   that pair false-negatives on some real hardware and just turns the whole
   interaction off, so this now matches .card/.patch/.area-pill elsewhere on
   the page, which are plain, ungated :hover. */
@media (min-width:981px){
  .expand-card{ transition:flex-grow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
  .expand-card-label{ transition:opacity .18s var(--ease); }
  .expand-card-detail{ transition:opacity .22s var(--ease) .05s; }

  .expand-cards:has(.expand-card:hover) .expand-card,
  .expand-cards:has(.expand-card:focus-within) .expand-card{ flex-grow:.62; }

  .expand-card:hover,
  .expand-card:focus-within{
    /* :has() above resolves to a higher specificity than a plain :hover, so
       the card being hovered needs !important to win its own grow value back */
    flex-grow:4.4 !important;
    border-color:rgba(201,169,97,.5); background:var(--bg-3);
  }
  .expand-card:hover .expand-card-label,
  .expand-card:focus-within .expand-card-label{ opacity:0; }
  .expand-card:hover .expand-card-detail,
  .expand-card:focus-within .expand-card-detail{ opacity:1; visibility:visible; }
}

@media (prefers-reduced-motion: reduce){
  .expand-card, .expand-card-label, .expand-card-detail, .patch, .area-pill, .faq-icon, .faq-a-wrap{ transition:none; }
}

@media (max-width:980px){
  .expand-cards{ flex-direction:column; height:auto; gap:10px; }
  .expand-card{ flex:none; }
  .expand-card-trigger{
    position:relative; flex-direction:row; align-items:center; justify-content:flex-start;
    gap:12px; padding:16px var(--space-3);
  }
  .expand-card-icon{ margin-bottom:0; }
  .expand-card-label{
    writing-mode:horizontal-tb; transform:none; font-size:18px; white-space:normal; max-height:none;
  }
  .expand-card.is-active .expand-card-label{ opacity:1; }
  .expand-card-detail{
    position:static; height:auto; display:grid; grid-template-rows:0fr;
    opacity:1; visibility:visible; padding:0 var(--space-3);
    transition:grid-template-rows .35s var(--ease);
  }
  .expand-card-detail-inner{ overflow:hidden; }
  .expand-card.is-active .expand-card-detail{ grid-template-rows:1fr; padding-bottom:var(--space-3); }
  .expand-card-detail h3{ display:none; }
  .expand-card-detail p{ max-width:none; }
}

/* ---- service area pills ---- */
.area-pills{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-5); }
.area-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2);
  font-family:var(--display); font-weight:700; font-size:19px; color:var(--text);
  transition:transform .3s var(--ease), opacity .3s var(--ease), filter .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.area-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.area-pill.hub{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1A1305;
  padding:16px 30px; font-size:18px; border:none;
  box-shadow:0 10px 24px -10px rgba(201,169,97,.5);
}
.area-pill.hub .dot{ background:#1A1305; }

/* Same group-hover mechanic as the "Why Us" tiles: while any pill is
   hovered, its siblings recede (shrink, dim, soften); the hovered one grows.
   :has() outranks a plain :hover in specificity, so the hovered pill's own
   rule needs !important to win its own emphasis back. */
.area-pills:has(.area-pill:hover) .area-pill{ transform:scale(.97); opacity:.6; filter:blur(2px); }
.area-pill:hover{
  transform:translateY(-6px) scale(1.1) !important;
  opacity:1 !important; filter:blur(0) !important;
  border-color:rgba(201,169,97,.5);
}

/* ---- fan carousel (recent tows) ---- */
.fan-layout{
  position:relative;
  height:clamp(260px, 36vw, 420px);
  max-width:960px; margin:var(--space-6) auto 0;
}
.fan-card{
  position:absolute; top:50%; left:50%;
  width:clamp(6.5rem, 13vw, 11rem);
  aspect-ratio:3/4;
  transform:translate(-50%, -50%);
}
.fan-card-inner{
  width:100%; height:100%;
  border-radius:12px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  cursor:pointer;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fan-card-inner:hover{ border-color:rgba(201,169,97,.5); box-shadow:0 22px 48px -14px rgba(201,169,97,.25); }
.fan-card-inner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Static resting fan layout — the correct baseline with no JS, and the
   target GSAP animates toward with it (see main.js for the JS-enhanced
   entrance + hover interactions). Order matches DOM order (1 of 7 .. 7 of 7). */
.fan-card:nth-child(1) .fan-card-inner{ transform:translate(-8.5rem, 2.1rem) rotate(-21deg) scale(.8919); z-index:1; }
.fan-card:nth-child(2) .fan-card-inner{ transform:translate(-6.2rem, 1.1rem) rotate(-14deg) scale(.9773); z-index:2; }
.fan-card:nth-child(3) .fan-card-inner{ transform:translate(-3.1rem, .4rem) rotate(-7deg) scale(1.0748); z-index:3; }
.fan-card:nth-child(4) .fan-card-inner{ transform:translate(0, 0) rotate(0deg) scale(1.15); z-index:10; }
.fan-card:nth-child(5) .fan-card-inner{ transform:translate(3.1rem, .4rem) rotate(7deg) scale(1.0748); z-index:3; }
.fan-card:nth-child(6) .fan-card-inner{ transform:translate(6.2rem, 1.1rem) rotate(14deg) scale(.9773); z-index:2; }
.fan-card:nth-child(7) .fan-card-inner{ transform:translate(8.5rem, 2.1rem) rotate(21deg) scale(.8919); z-index:1; }

@media (max-width:620px){
  .fan-layout{ height:clamp(200px, 62vw, 280px); }
  .fan-card:nth-child(1) .fan-card-inner{ transform:translate(-5.2rem, 2.1rem) rotate(-21deg) scale(.8919); }
  .fan-card:nth-child(2) .fan-card-inner{ transform:translate(-3.8rem, 1.1rem) rotate(-14deg) scale(.9773); }
  .fan-card:nth-child(3) .fan-card-inner{ transform:translate(-1.9rem, .4rem) rotate(-7deg) scale(1.0748); }
  .fan-card:nth-child(5) .fan-card-inner{ transform:translate(1.9rem, .4rem) rotate(7deg) scale(1.0748); }
  .fan-card:nth-child(6) .fan-card-inner{ transform:translate(3.8rem, 1.1rem) rotate(14deg) scale(.9773); }
  .fan-card:nth-child(7) .fan-card-inner{ transform:translate(5.2rem, 2.1rem) rotate(21deg) scale(.8919); }
}

/* ---- photo lightbox ---- */
.lightbox{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.94);
  align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s var(--ease);
}
.lightbox.open{ display:flex; opacity:1; }

.lightbox-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  max-width:min(90vw, 1100px);
  touch-action:pan-y;
}
.lightbox-img{
  max-width:100%; max-height:78vh; max-height:78dvh; width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  background:var(--bg-2);
  opacity:0; transform:scale(.97);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lightbox-img.is-visible{ opacity:1; transform:scale(1); }
.lightbox-caption{
  margin-top:var(--space-3);
  font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.02em;
  color:var(--gold-bright); text-align:center;
}
.lightbox-counter{ margin-top:6px; font-size:17px; font-weight:500; color:var(--text-faint); }

.lightbox-close{
  position:fixed; top:22px; right:22px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--text); transition:background-color .2s, border-color .2s, transform .2s;
}
.lightbox-close svg{ width:18px; height:18px; transform:rotate(45deg); }
.lightbox-close:hover{ background:rgba(255,255,255,.12); border-color:rgba(201,169,97,.5); transform:scale(1.06); }

.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--text); transition:background-color .2s, border-color .2s, transform .2s;
}
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-nav:hover{ background:rgba(255,255,255,.12); border-color:rgba(201,169,97,.5); }
.lightbox-prev{ left:22px; }
.lightbox-prev svg{ transform:rotate(180deg); }
.lightbox-next{ right:22px; }

@media (max-width:720px){
  .lightbox-close{ top:14px; right:14px; width:44px; height:44px; }
  .lightbox-nav{ width:44px; height:44px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-img{ max-height:68vh; max-height:68dvh; }
}

@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-img{ transition:none; }
}

/* ---- patches (why us) ---- */
.patches{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-top:var(--space-5); }
.patch{
  text-align:left; padding:var(--space-4) var(--space-3);
  border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--line);
  transition:transform .3s var(--ease), opacity .3s var(--ease), filter .3s var(--ease), border-color .3s var(--ease);
}
/* Group-hover reveal: while any tile in the row is hovered, its siblings
   recede (shrink, dim, soften) so the one you're on reads as the focus.
   :has() outranks a plain :hover in specificity, so the hovered tile's own
   rule needs !important to win its own emphasis back. */
.patches:has(.patch:hover) .patch{ transform:scale(.97); opacity:.6; filter:blur(2px); }
.patch:hover{
  transform:translateY(-6px) scale(1.1) !important;
  opacity:1 !important; filter:blur(0) !important;
  border-color:rgba(201,169,97,.4);
}
.patch svg{ width:30px; height:30px; margin-bottom:16px; color:var(--gold); }
.patch h3{ font-family:var(--display); font-weight:700; font-size:16.5px; margin-bottom:8px; color:var(--text); }
.patch p{ font-size:18px; font-weight:500; color:var(--text-muted); line-height:1.6; }

/* ---- FAQ ---- */
.faq-list{ margin-top:var(--space-5); max-width:820px; }
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:22px 4px; text-align:left; cursor:pointer;
}
.faq-q h3{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--text); }
.faq-icon{ width:20px; height:20px; flex:none; color:var(--gold); transition:transform .3s var(--ease); }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{ padding:0 4px var(--space-3); max-width:70ch; color:var(--text-muted); font-size:19.5px; font-weight:500; line-height:1.65; }

/* Hover (or keyboard focus) opens the question you're on and closes
   automatically once you move to the next — no click needed, no JS state.
   Moving between adjacent questions "closes previous, opens next" for free,
   since leaving one item's hover and entering the next are the same event.
   Ungated, matching .card/.patch/.area-pill elsewhere on this page — gating
   this behind (hover:hover) false-negatives on some real hardware and just
   turns the whole interaction off, which is worse than the touch tradeoff. */
.faq-item:hover .faq-icon,
.faq-item:focus-within .faq-icon{ transform:rotate(45deg); }
.faq-item:hover .faq-a-wrap,
.faq-item:focus-within .faq-a-wrap{ grid-template-rows:1fr; }

/* =================== CTA BAND =================== */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--bg);
  padding:var(--space-7) 0;
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 400px at 50% 30%, rgba(201,169,97,.18), transparent 65%);
}
.cta-band-inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.cta-head{ font-size:clamp(32px,4.6vw,58px); color:var(--text); max-width:16ch; }
.cta-sub{ margin-top:var(--space-2); color:var(--text-muted); font-size:18px; font-weight:500; }
.cta-contact{ margin-top:var(--space-4); display:flex; flex-direction:column; align-items:center; gap:14px; }
.cta-phone{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:clamp(26px,3.4vw,38px); color:#1A1305;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding:16px 34px; border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(201,169,97,.6);
  transition:transform .2s var(--ease);
}
.cta-phone:hover{ transform:translateY(-3px); }
.cta-phone:active{ transform:translateY(0) scale(.97); }
.cta-email{ font-weight:600; color:var(--text-muted); font-size:19px; }
.cta-email:hover{ color:var(--gold-bright); }

/* =================== SUB-PAGE HERO =================== */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--space-6) + 20px) 0 var(--space-6);
  background:var(--bg);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 800px 460px at 15% 0%, rgba(201,169,97,.16), transparent 60%);
}
.page-hero-inner{ position:relative; max-width:760px; }
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:17px; font-weight:600; color:var(--text-faint); margin-bottom:var(--space-3);
}
.breadcrumb a{ color:var(--text-muted); transition:color .2s; }
.breadcrumb a:hover{ color:var(--gold-bright); }
.page-hero h1{ font-size:clamp(34px,5vw,56px); letter-spacing:-.015em; color:var(--text); margin-bottom:var(--space-3); }
.page-hero-lead{ font-size:18px; line-height:1.65; color:var(--text-muted); max-width:56ch; margin-bottom:var(--space-4); }

/* =================== PROSE / CONTENT PAGES =================== */
.prose{ max-width:720px; }
.prose p{ font-size:18.5px; font-weight:500; line-height:1.75; color:var(--text-muted); margin-bottom:var(--space-3); }
.prose h2{ font-size:24px; color:var(--text); margin:var(--space-5) 0 var(--space-2); }
.include-list{ margin:var(--space-4) 0; display:grid; gap:12px; max-width:520px; }
.include-list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:19.5px; font-weight:500; color:var(--text); padding:14px 16px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
}
.include-list li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* related services / tip cards grid reuse .cards, .card */
.tip-card p{ color:var(--text-muted); font-size:19px; font-weight:500; line-height:1.65; }
.tip-card h3{ margin-bottom:10px; }

@media (max-width:620px){
  .include-list{ max-width:100%; }
}

/* =================== FOOTER =================== */
.site-footer{ background:var(--bg); border-top:1px solid var(--line-soft); padding-top:var(--space-6); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-4); padding-bottom:var(--space-5); }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand .brand-mark{ height:52px; }
.footer-brand .brand-word{ font-size:16px; }
.footer-tag{ font-size:17.5px; font-weight:500; color:var(--text-faint); margin-top:3px; }
.footer-nav{ display:flex; flex-direction:column; gap:12px; font-weight:600; font-size:18.5px; color:var(--text-muted); }
.footer-nav a:hover{ color:var(--gold-bright); }
.footer-contact{ display:flex; flex-direction:column; gap:12px; font-size:18.5px; }
.footer-contact a{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text-muted); }
.footer-contact a:hover{ color:var(--gold-bright); }
.footer-contact svg{ width:16px; height:16px; flex:none; color:var(--gold); }
.footer-area{ color:var(--text-faint); font-size:17px; font-weight:500; margin-top:4px; }
.footer-bottom{ border-top:1px solid var(--line-soft); padding:var(--space-3) var(--space-3); font-size:17px; font-weight:500; color:var(--text-faint); }
.footer-bottom-legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-3); }
.footer-bottom-legal nav{ display:flex; gap:var(--space-3); }
.footer-bottom-legal nav a{ color:var(--text-faint); transition:color .2s; }
.footer-bottom-legal nav a:hover{ color:var(--gold-bright); }

@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-3); }
}

/* =================== RESPONSIVE =================== */
@media (max-width:980px){
  .cards{ grid-template-columns:1fr 1fr; }
  .patches{ grid-template-columns:1fr 1fr; }
  .hero{ min-height:auto; }
}
@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .patches{ grid-template-columns:1fr; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .hero-facts{ gap:var(--space-3); }
  .header-row{ height:68px; }
  .brand-mark{ height:32px; }
  .area-pill{ padding:12px 20px; font-size:18px; }
  .area-pill.hub{ padding:14px 24px; font-size:19px; }
}

/* =================== ANIMATION BASE STATES =================== */
[data-anim]{ will-change:transform,opacity; }
@media (prefers-reduced-motion: no-preference){
  [data-anim="line"]{ opacity:0; transform:translateY(28px); }
  [data-anim="fade"]{ opacity:0; transform:translateY(16px); }
  [data-anim="rise"]{ opacity:0; transform:translateY(24px) scale(.97); }
  [data-anim="pill"]{ opacity:0; transform:translateY(-10px) scale(.9); }
}