:root{
  --navy:#1F3247;
  --navy-deep:#162435;
  --brand:#C7481E;
  --brand-dark:#A53A16;
  --bg:#FFFFFF;
  --bg-alt:#F4F5F7;
  --text:#22303E;
  --muted:#5B6673;
  --line:#DFE3E8;
  --head:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:78px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

h1,h2,h3{line-height:1.15;}

/* .reveal is fully visible by default so content never depends on JS to
   appear (no-JS browsers, slow devices, crawlers). script.js opts elements
   into the hidden pre-state via .pre-reveal right before observing them.
   data-anim picks the entrance direction; fade-up is the default. */
.reveal.pre-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity 0.65s cubic-bezier(.25,.7,.3,1), transform 0.65s cubic-bezier(.25,.7,.3,1);
}
.reveal[data-anim="fade-right"].pre-reveal{ transform:translateX(-28px); }
.reveal[data-anim="fade-left"].pre-reveal{ transform:translateX(28px); }
.reveal[data-anim="zoom-in"].pre-reveal{ transform:scale(0.93); }
.reveal.pre-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal.pre-reveal{ opacity:1; transform:none; transition:none; }
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--navy-deep); color:#fff; padding:12px 18px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px;
  font-family:var(--body); font-weight:700; font-size:0.95rem;
  border-radius:3px; letter-spacing:0.01em;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(90deg, var(--brand-dark) 0 50%, var(--brand) 50% 100%);
  background-size:210% 100%;
  background-position:100% 0;
  transition:background-position 0.35s ease, box-shadow 0.2s ease;
}
.btn-primary:hover{ background-position:0 0; box-shadow:0 8px 20px rgba(199,72,30,0.3); }
.btn-ghost{
  color:#fff; border:2px solid rgba(255,255,255,0.55);
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }

/* NAV — fixed; JS adds .is-clear while at the top of the page so the bar
   sits transparent over the hero photo, then solidifies on scroll.
   Without JS it stays solid white, which is always readable. */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(22,36,53,0.06);
  transition:background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
nav.is-clear{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
nav.is-clear .nav-logo{color:#fff;}
nav.is-clear .nav-menu a:not(.nav-call){color:#fff;}
nav.is-clear .nav-menu a:not(.nav-call):hover{color:#E0703F;}
nav.is-clear .nav-toggle span{background:#fff;}
.nav-inner{
  padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;
}
/* LOGO LOCKUP — block "C" mark + two-line wordmark. The mark's body is
   currentColor so it inverts with the text wherever the lockup sits
   (white nav, transparent-over-hero nav, dark footer). */
.logo-mark{ width:34px; height:34px; flex:none; }
.logo-accent{ fill:var(--brand); }
.logo-words{
  display:flex; flex-direction:column;
  line-height:1.04; letter-spacing:0.035em;
}
.logo-l2{ color:var(--brand); }

.nav-logo{
  display:flex; align-items:center; gap:11px;
  font-family:var(--head); font-weight:700; font-size:1.16rem;
  text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
}
/* over the hero photo the deep brand orange goes muddy — lift both the
   accent square and the second wordmark line to the light tint */
nav.is-clear .logo-accent{ fill:#E0703F; }
nav.is-clear .logo-l2{ color:#E0703F; }
.nav-menu{
  display:flex; align-items:center; gap:24px;
}
.nav-menu a{font-size:0.93rem; font-weight:600; color:var(--text);}
.nav-menu a:not(.nav-call):not(.nav-phone):hover{color:var(--brand);}
.nav-phone{color:var(--navy); font-weight:700;}
.nav-call{
  background:var(--brand); color:#fff;
  padding:10px 20px; font-weight:700; font-size:0.88rem;
  border-radius:3px;
  transition:background 0.15s ease;
  white-space:nowrap;
}
.nav-call:hover{background:var(--brand-dark); color:#fff;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--navy);}

/* HERO */
/* Hero fills the first screen so nothing below it peeks in on load.
   svh keeps that true on mobile, where 100vh sits under the URL bar. */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:url('../images/hero-dumpster.jpg') center 30%/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,36,53,0.88) 0%, rgba(22,36,53,0.72) 45%, rgba(22,36,53,0.35) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding:140px 24px 90px;
}
/* Headline lines are wrapped in overflow masks so they slide up into view.
   Everything is choreographed on load and skipped for reduced motion;
   without JS the CSS animations still run and always end fully visible. */
.hl{
  display:block; overflow:hidden;
  padding-bottom:0.1em; margin-bottom:-0.1em;
}
.hl-in{display:block;}
/* Rotating service word: swapped by script.js, slides out the top of the
   line mask and back in from the bottom */
.flip-word{display:inline-block; color:#E0703F;}
.flip-word.flip-out{animation:flipOut 0.38s cubic-bezier(.5,0,.8,.4) forwards;}
.flip-word.flip-in{animation:flipIn 0.45s cubic-bezier(.2,.7,.25,1);}
@keyframes flipOut{
  to{transform:translateY(-115%); opacity:0.6;}
}
@keyframes flipIn{
  from{transform:translateY(115%); opacity:0.6;}
  to{transform:none; opacity:1;}
}
@media (prefers-reduced-motion: no-preference){
  .hero::before{animation:bgSettle 1.9s cubic-bezier(.2,.6,.3,1) both;}
  nav{animation:navDrop 0.55s ease-out both;}
  .hl-in{animation:lineUp 0.8s cubic-bezier(.2,.7,.25,1) both;}
  .hl:nth-child(1) .hl-in{animation-delay:0.2s;}
  .hl:nth-child(2) .hl-in{animation-delay:0.34s;}
  .hero-kicker, .hero-sub, .hero-ctas{
    opacity:0;
    animation:riseIn 0.7s cubic-bezier(.25,.7,.3,1) forwards;
  }
  .hero-kicker{animation-delay:0.1s;}
  .hero-sub{animation-delay:0.62s;}
  .hero-ctas{animation-delay:0.78s;}
  .trust-bar{animation:riseIn 0.7s ease-out 0.9s both;}
}
@keyframes riseIn{
  from{opacity:0; transform:translateY(26px);}
  to{opacity:1; transform:none;}
}
@keyframes lineUp{
  from{transform:translateY(112%);}
  to{transform:none;}
}
@keyframes bgSettle{
  from{transform:scale(1.07);}
  to{transform:none;}
}
@keyframes navDrop{
  from{transform:translateY(-102%);}
  to{transform:none;}
}
.hero-kicker{
  color:#fff; opacity:0.85;
  font-size:0.85rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero h1{
  font-family:var(--head);
  color:#fff;
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1;
  margin-bottom:20px;
  max-width:720px;
}
.hero-sub{
  color:rgba(255,255,255,0.88);
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  max-width:520px;
  margin-bottom:30px;
}
.hero-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:14px;}

/* TRUST BAR — scrolling ticker; pauses on hover, static wrap for reduced motion */
.trust-bar{
  background:var(--navy-deep);
  color:#fff;
  padding:15px 0;
  overflow:hidden;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.trust-bar:hover .marquee-track{animation-play-state:paused;}
.marquee-group{
  display:flex; align-items:center; gap:46px;
  padding-right:46px;
  font-size:0.88rem; font-weight:600;
  white-space:nowrap;
}
.marquee-group span{
  display:inline-flex; align-items:center; gap:10px;
}
.marquee-group span::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--brand);
  flex:none;
}
@keyframes marquee{ to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none; width:auto;}
  .marquee-group{flex-wrap:wrap; justify-content:center; white-space:normal; gap:8px 36px; padding:0 24px;}
  .marquee-group[aria-hidden]{display:none;}
}

/* SECTIONS */
.section{padding:78px 0; position:relative; overflow:hidden;}
.section-alt{background:var(--bg-alt);}
.section-head{margin-bottom:42px; position:relative;}
/* Oversized watermark word behind each section heading */
.section-head[data-bg]::before{
  content:attr(data-bg);
  position:absolute; left:-8px; top:-30px;
  font-family:var(--head); font-weight:700;
  font-size:clamp(4.5rem, 11vw, 8rem);
  line-height:1;
  text-transform:uppercase; letter-spacing:0.02em;
  color:rgba(31,50,71,0.06);
  white-space:nowrap;
  pointer-events:none; user-select:none;
  z-index:0;
}
.section-head-dark[data-bg]::before{color:rgba(255,255,255,0.05);}
.section-head .kicker, .section-head h2{position:relative; z-index:1;}
.kicker{
  color:var(--brand);
  font-size:0.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
  margin-bottom:8px;
}
.section-head h2{
  font-family:var(--head);
  font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--navy);
}
.section-head h2::after{
  content:"";
  display:block;
  width:52px; height:4px;
  background:var(--brand);
  margin-top:12px;
}
.section-head-dark h2{color:#fff;}

/* SERVICES — numbered rate-card list */
.svc-list{border-top:1px solid var(--line);}
.svc-row{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:24px; align-items:center;
  padding:26px 8px;
  border-bottom:1px solid var(--line);
  transition:background 0.2s ease, padding 0.2s ease;
}
.svc-row:hover{
  background:var(--bg-alt);
  padding-left:20px; padding-right:14px;
}
.svc-num{
  font-family:var(--head); font-weight:700; font-size:1.05rem;
  color:var(--brand);
  letter-spacing:0.05em;
}
.svc-row h3{
  display:flex; align-items:center; gap:14px;
  font-family:var(--head);
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:700;
  text-transform:uppercase; letter-spacing:0.015em;
  color:var(--navy);
  line-height:1.1;
}
.svc-arrow{
  flex:none;
  color:var(--brand);
  opacity:0; transform:translateX(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.svc-row:hover .svc-arrow{opacity:1; transform:none;}
.svc-row p{
  font-size:0.93rem; color:var(--muted);
  margin-top:5px; max-width:580px;
}
.svc-price{
  font-weight:700; font-size:0.95rem;
  color:var(--navy);
  white-space:nowrap;
  text-align:right;
}
.svc-price-brand{color:var(--brand);}
@media (max-width:700px){
  .svc-row{grid-template-columns:44px 1fr; row-gap:8px;}
  .svc-price{grid-column:2; text-align:left;}
  .svc-arrow{display:none;}
}

/* HOW IT WORKS — timeline + layered photo */
.process-layout{
  display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;
}
.steps-timeline{
  position:relative;
  display:flex; flex-direction:column; gap:40px;
  padding:8px 0;
}
.steps-timeline::before{
  content:"";
  position:absolute; left:21px; top:14px; bottom:14px;
  width:2px;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand) 34%, var(--line) 34%);
}
.step{
  position:relative; z-index:1;
  display:grid; grid-template-columns:44px 1fr; gap:20px; align-items:start;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-family:var(--head); font-size:1.35rem; font-weight:700;
  box-shadow:0 0 0 6px var(--bg-alt);
  transition:background 0.2s ease, transform 0.2s ease;
}
.step:hover .step-num{background:var(--brand); transform:scale(1.08);}
.step.pre-reveal .step-num{transform:scale(0.5);}
.step.pre-reveal.is-visible .step-num{
  transform:scale(1);
  transition:transform 0.55s cubic-bezier(.3,1.6,.5,1) 0.2s;
}
.step h3{
  font-family:var(--head);
  font-size:1.35rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--navy);
  margin:8px 0 6px;
}
.step p{font-size:0.94rem; color:var(--muted); max-width:440px;}

.process-photo{position:relative;}
.process-photo::before{
  content:"";
  position:absolute; top:30px; right:-26px; bottom:-26px; left:30px;
  border:3px solid var(--brand);
  border-radius:4px;
}
.process-frame{
  display:block; position:relative; z-index:1;
  border-radius:4px; overflow:hidden;
  box-shadow:0 18px 44px rgba(22,36,53,0.16);
}
.process-frame img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 42%;
  display:block;
  transition:transform 0.6s cubic-bezier(.25,.7,.3,1);
}
.process-photo:hover .process-frame img{transform:scale(1.04);}
.process-badge{
  position:absolute; z-index:2; left:-30px; bottom:36px;
  max-width:260px;
  background:var(--navy-deep); color:#fff;
  border-left:4px solid var(--brand);
  border-radius:4px;
  padding:18px 22px;
  box-shadow:0 16px 40px rgba(22,36,53,0.35);
  display:flex; flex-direction:column; gap:5px;
}
.process-badge strong{
  font-family:var(--head); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  font-size:1.2rem; line-height:1;
}
.process-badge span{font-size:0.85rem; color:rgba(255,255,255,0.82); line-height:1.5;}
@media (prefers-reduced-motion: reduce){
  .process-photo:hover .process-frame img{transform:none;}
  .step:hover .step-num{transform:none;}
}
@media (max-width:860px){
  .process-layout{grid-template-columns:1fr; gap:44px;}
  .process-photo{margin-right:20px;}
  .process-photo::before{right:-20px; bottom:-20px;}
  .process-frame img{aspect-ratio:16/10;}
  .process-badge{left:14px; bottom:14px; right:14px; max-width:none;}
}

/* STATS BAND — hazard stripes + dot texture */
.stats-band{
  position:relative;
  color:#fff;
  padding:72px 0;
  overflow:hidden;
  background:
    radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(ellipse at 50% -40%, #24405E 0%, var(--navy-deep) 62%);
  background-color:var(--navy-deep);
}
.stats-band::before, .stats-band::after{
  content:"";
  position:absolute; left:0; right:0; height:8px;
  background:repeating-linear-gradient(-45deg, var(--brand) 0 16px, transparent 16px 32px);
}
.stats-band::before{top:0;}
.stats-band::after{bottom:0;}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px 0;
  text-align:center;
}
.stat{position:relative; padding:8px 18px;}
.stat + .stat::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:68px;
  background:rgba(255,255,255,0.16);
}
.stat-num{
  display:block;
  font-family:var(--head); font-size:clamp(3.4rem, 6vw, 4.8rem); font-weight:700;
  line-height:1; color:#fff;
  transition:color 0.25s ease;
}
.stat:hover .stat-num{color:#E0703F;}
.stat-dollar::before{content:"$";}
.stat-num::after{
  content:"";
  display:block;
  width:36px; height:4px;
  background:var(--brand);
  margin:12px auto 0;
}
.stat-label{
  display:block;
  margin-top:10px;
  font-size:0.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.09em;
  color:rgba(255,255,255,0.72);
}
@media (max-width:760px){
  .stats-grid{grid-template-columns:1fr 1fr; gap:34px 0;}
  .stat:nth-child(3)::before{display:none;}
}

/* PHOTOS */
.photo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.job-photo{margin:0;}
.photo-frame{
  display:block;
  border-radius:4px;
  border:1px solid var(--line);
  overflow:hidden;
}
.job-photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 0.55s cubic-bezier(.25,.7,.3,1);
}
.job-photo:hover img{transform:scale(1.05);}
@media (prefers-reduced-motion: reduce){ .job-photo:hover img{transform:none;} }
.job-photo figcaption{
  margin-top:10px;
  font-size:0.87rem; color:var(--muted);
}
@media (max-width:800px){
  .photo-grid{grid-template-columns:1fr 1fr;}
  .photo-grid figure:last-child{grid-column:1 / -1;}
}
@media (max-width:480px){ .photo-grid{grid-template-columns:1fr;} .photo-grid figure:last-child{grid-column:auto;} }

/* PRICING */
.pricing{
  background:var(--navy-deep);
  color:#fff;
  padding:78px 0;
  position:relative; overflow:hidden;
}
.pricing .kicker{color:#E0703F;}
.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.price-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:4px;
  padding:40px 28px 32px;
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* drafting-style corner brackets */
.price-card::before{
  content:"";
  position:absolute; top:14px; left:14px;
  width:24px; height:24px;
  border-top:3px solid var(--brand);
  border-left:3px solid var(--brand);
}
.price-card::after{
  content:"";
  position:absolute; bottom:14px; right:14px;
  width:24px; height:24px;
  border-bottom:3px solid rgba(224,112,63,0.45);
  border-right:3px solid rgba(224,112,63,0.45);
}
.price-card:hover{
  transform:translateY(-5px);
  border-color:rgba(224,112,63,0.55);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
@media (prefers-reduced-motion: reduce){ .price-card:hover{transform:none;} }
.price-amt{
  font-family:var(--head); font-size:3.4rem; font-weight:700;
  line-height:1; color:#fff;
}
.price-unit{
  font-size:0.85rem; font-weight:700;
  color:#E0703F;
  text-transform:uppercase; letter-spacing:0.04em;
  margin:6px 0 14px;
}
.price-card p{font-size:0.92rem; color:rgba(255,255,255,0.78);}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .price-grid{grid-template-columns:1fr;} }

/* PHOTO CTA BAND */
.photo-cta{
  background:
    linear-gradient(rgba(22,36,53,0.82), rgba(22,36,53,0.82)),
    url('../images/field-cleanout.jpg') center 40%/cover no-repeat;
  color:#fff;
  padding:90px 0;
  text-align:center;
}
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .photo-cta{ background-attachment:fixed, fixed; }
}
.photo-cta h2{
  font-family:var(--head);
  font-size:clamp(1.9rem,4.5vw,3rem);
  font-weight:700; text-transform:uppercase; letter-spacing:0.01em;
  margin-bottom:12px;
}
.photo-cta p{
  color:rgba(255,255,255,0.85);
  font-size:1.05rem;
  margin-bottom:28px;
}
.photo-cta-btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}

/* WHO WE WORK WITH */
.client-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.client-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.client-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(22,36,53,0.13);
}
@media (prefers-reduced-motion: reduce){ .client-card:hover{transform:none;} }
.client-img{display:block; position:relative; overflow:hidden;}
.client-img img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform 0.5s cubic-bezier(.25,.7,.3,1);
}
.client-card:hover .client-img img{transform:scale(1.05);}
.client-chip{
  position:absolute; left:12px; bottom:12px;
  background:rgba(22,36,53,0.88); color:#fff;
  font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
  padding:5px 10px; border-radius:2px;
}
.client-body{padding:22px 24px 26px;}
.client-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-size:0.88rem; font-weight:700;
  color:var(--brand);
}
.client-link svg{transition:transform 0.2s ease;}
.client-card:hover .client-link svg{transform:translateX(4px);}
.client-card h3{
  font-family:var(--head);
  font-size:1.3rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--navy);
  margin-bottom:8px;
}
.client-card p{font-size:0.93rem; color:var(--muted);}
@media (max-width:800px){ .client-grid{grid-template-columns:1fr;} }

/* FAQ */
.faq-list{border-top:1px solid var(--line); max-width:780px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:19px 0;
  font-family:var(--body); font-size:1.02rem; font-weight:600; color:var(--navy);
}
.faq-q:hover span:first-child{color:var(--brand);}
.faq-plus{
  position:relative; flex:none; width:18px; height:18px;
}
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; background:var(--brand);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-plus::before{width:16px; height:2px;}
.faq-plus::after{width:2px; height:16px; transition:transform 0.2s ease, opacity 0.2s ease;}
.faq-q[aria-expanded="true"] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height 0.25s ease;
}
.faq-a p{padding-bottom:20px; font-size:0.94rem; line-height:1.6; color:var(--muted); max-width:680px;}

/* AREA / MAP */
.area-layout{
  display:grid; grid-template-columns:1fr 1.3fr; gap:44px; align-items:start;
}
.area-list ul{list-style:none;}
.area-list li{
  font-family:var(--head); font-size:1.3rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--navy);
  padding:9px 0; border-bottom:1px solid var(--line);
}
.area-list p{margin:18px 0 22px; font-size:0.94rem; color:var(--muted); max-width:380px;}
.area-map{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  aspect-ratio:4/3; background:var(--bg-alt);
}
.area-map iframe{width:100%; height:100%; border:0;}
@media (max-width:800px){ .area-layout{grid-template-columns:1fr;} }

/* INQUIRY FORM */
.inquiry-lede{max-width:540px; margin:-14px 0 34px; color:var(--muted); font-size:0.98rem;}
.quote-form{
  max-width:660px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:4px;
  padding:32px 28px;
}
.hp-field{position:absolute; left:-9999px;}
.form-row{margin-bottom:18px; display:flex; flex-direction:column; gap:6px;}
.form-row-split{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:0;
}
.form-row-split > div{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.quote-form label{
  font-size:0.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--navy);
}
.quote-form input, .quote-form select, .quote-form textarea{
  font-family:var(--body);
  font-size:1rem; padding:12px 14px;
  border:1px solid #C4CBD3; border-radius:3px;
  background:#fff; color:var(--text);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(31,50,71,0.14);
}
.quote-form textarea{resize:vertical;}
.form-submit{
  color:#fff; border:none;
  background:linear-gradient(90deg, var(--brand-dark) 0 50%, var(--brand) 50% 100%);
  background-size:210% 100%;
  background-position:100% 0;
  padding:15px 30px; font-family:var(--body); font-size:1rem; font-weight:700;
  border-radius:3px; cursor:pointer;
  transition:background-position 0.35s ease, box-shadow 0.2s ease;
}
.form-submit:hover{background-position:0 0; box-shadow:0 8px 20px rgba(199,72,30,0.3);}
.form-note{margin-top:14px; font-size:0.85rem; color:var(--muted);}
.form-error{
  margin-top:14px; padding:12px 14px;
  border-left:3px solid var(--brand);
  background:rgba(199,72,30,0.08);
  font-size:0.9rem; font-weight:500; color:var(--navy);
}
.form-success{
  max-width:660px; background:var(--navy-deep); color:#fff;
  padding:32px; border-radius:4px;
}
.form-success h3{
  font-family:var(--head); font-size:1.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.02em;
  margin-bottom:10px;
}
.form-success a{color:#E0703F; font-weight:700;}
@media (max-width:600px){ .form-row-split{grid-template-columns:1fr;} .quote-form{padding:24px 18px;} }

/* FOOTER */
.site-footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,0.8);
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;
  padding-top:60px; padding-bottom:48px;
}
.footer-logo{
  display:flex; align-items:center; gap:13px;
  font-family:var(--head); font-weight:700; font-size:1.34rem;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:10px;
}
.footer-logo .logo-mark{ width:40px; height:40px; }
.site-footer .logo-accent{ fill:#E0703F; }
.site-footer .logo-l2{ color:#E0703F; }
.footer-about .footer-tagline{
  font-size:0.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.13em;
  color:rgba(255,255,255,0.55);
  margin-bottom:14px;
}
.footer-about p{font-size:0.92rem; max-width:340px;}
.footer-phone{
  display:inline-block;
  margin-top:18px;
  font-family:var(--head); font-size:1.7rem; font-weight:700;
  color:#fff;
}
.footer-phone:hover{color:#E0703F;}
.footer-cta-line{font-size:0.85rem; color:rgba(255,255,255,0.6); margin-top:4px;}
.footer-col h3{
  font-family:var(--head); font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  color:#fff;
  margin-bottom:14px;
}
.footer-col ul{list-style:none;}
.footer-col li{padding:5px 0; font-size:0.92rem;}
.footer-col a:hover{color:#fff; text-decoration:underline;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding:18px 0;
  font-size:0.8rem; color:rgba(255,255,255,0.55);
}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr; gap:32px;} }

/* BACK TO TOP */
.back-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  background:var(--navy); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(22,36,53,0.28);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.back-top.show{opacity:1; visibility:visible; transform:none;}
.back-top:hover{background:var(--brand);}

/* MOBILE CALL BAR */
.mobile-call-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--brand); color:#fff; text-align:center;
  padding:14px; font-weight:700; font-size:0.95rem;
  align-items:center; justify-content:center; gap:10px;
  box-shadow:0 -4px 16px rgba(0,0,0,0.2);
}

/* RESPONSIVE NAV */
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav-logo{font-size:1.02rem; gap:9px;}
  .nav-logo .logo-mark{width:29px; height:29px;}
  .nav-menu{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(22,36,53,0.1);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height 0.25s ease;
  }
  .nav-menu.open{max-height:540px;}
  .nav-menu a{padding:15px 24px; border-top:1px solid var(--line);}
  .nav-menu .nav-call{margin:16px 24px; text-align:center;}
  /* dropdown panel is always white, so its links stay dark even when the
     bar itself is transparent over the hero */
  nav.is-clear .nav-menu a:not(.nav-call){color:var(--text);}
  .mobile-call-bar{display:flex;}
  body{padding-bottom:56px;}
  .back-top{bottom:76px;}
}