/* ===================================================================
   SHOW TURF — Showcasing Georgia Lawns
   Premium dark + turf-green identity. Vanilla CSS.
   =================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* color */
  --ink:        #0c120b;   /* near-black green — primary dark bg */
  --ink-2:      #111a0f;   /* lifted dark */
  --ink-3:      #18241500; /* (unused placeholder) */
  --panel:      #16211410; /* faint */
  --card:       #15211350; /* card on dark (overlaid) */
  --green:      #309752;   /* brand turf green (from logo) */
  --green-2:    #3cae5f;   /* hover/bright */
  --green-deep: #173a23;   /* deep green block */
  --green-soft: #d8ebdd;   /* tint for light sections */
  --cream:      #f5f2ea;   /* warm light section */
  --cream-2:    #ece6d8;
  --line-dark:  rgba(255,255,255,.10);
  --line-light: rgba(20,33,18,.12);

  --text:       #eaf0e7;   /* light text on dark */
  --text-dim:   #a7b6a4;   /* muted on dark */
  --text-ink:   #16210f;   /* dark text on light */
  --text-ink-dim:#54624f;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  --container: 1200px;
  --radius: 16px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.30), 0 8px 18px rgba(0,0,0,.14);
  --shadow-green: 0 10px 30px rgba(48,151,82,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none; padding:0}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
::selection{background:var(--green); color:#fff}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem)}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.005em;
  padding:.85rem 1.5rem; border-radius:999px; cursor:pointer;
  transition:transform .35s var(--ease-expo), background-color .25s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease);
  white-space:nowrap; will-change:transform;
}
.btn--primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-green) }
.btn--primary:hover{ background:var(--green-2); transform:translateY(-2px); box-shadow:0 16px 38px rgba(48,151,82,.38) }
.btn--ghost{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.45); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%) }
.btn--ghost:hover{ background:rgba(255,255,255,.13); transform:translateY(-2px) }
.btn--lg{ padding:1.02rem 1.9rem; font-size:1.04rem }
.btn--block{ width:100%; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
  padding:.85rem 0;
}
.header__inner{ display:flex; align-items:center; gap:1.5rem }
.header__brand{ display:flex; align-items:center; flex:0 0 auto }
.header__logo{ height:44px; width:auto; transition:height .4s var(--ease) }
.header__nav{ display:flex; gap:1.9rem; margin-left:auto; align-items:center }
.header__nav a{
  font-weight:500; font-size:.96rem; color:rgba(255,255,255,.82);
  position:relative; padding:.3rem 0; transition:color .2s var(--ease);
}
.header__nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--green-2);
  transition:width .3s var(--ease-expo);
}
.header__nav a:hover{ color:#fff }
.header__nav a:hover::after{ width:100% }
.header__actions{ display:flex; align-items:center; gap:2.1rem; margin-left:auto }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  color:#fff; transition:color .2s var(--ease)
}
.header__phone:hover{ color:var(--green-2) }
.header__phone svg{ color:var(--green-2); transform-origin:center }
.header__phone:hover svg{ animation:jiggle .5s var(--ease) }
@keyframes jiggle{
  0%,100%{ transform:rotate(0) }
  20%{ transform:rotate(-16deg) scale(1.08) }
  40%{ transform:rotate(14deg) scale(1.08) }
  60%{ transform:rotate(-10deg) }
  80%{ transform:rotate(6deg) }
}
@media (prefers-reduced-motion: reduce){ .header__phone:hover svg{ animation:none } }
.header__cta{ padding:.62rem 1.2rem; font-size:.92rem }
.header__menu-btn{ display:none; width:42px; height:42px; flex-direction:column; gap:5px; align-items:center; justify-content:center }
.header__menu-btn span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease) }

/* scrolled state */
.site-header.scrolled{
  background:rgba(10,16,9,.86); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.28);
  padding:.6rem 0;
}
.site-header.scrolled .header__logo{ height:30px }

/* mobile nav */
.mobile-nav{
  position:fixed; inset:0; z-index:99; background:rgba(8,13,7,.97); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.mobile-nav.open{ opacity:1; visibility:visible }
.mobile-nav nav{ display:flex; flex-direction:column; gap:1.6rem; text-align:center; width:min(86%,360px) }
.mobile-nav a{ font-family:var(--display); font-size:1.5rem; color:#fff }
.mobile-nav a.btn{ font-family:var(--sans); font-size:1.05rem; margin-top:.5rem }
.mobile-nav__phone{ font-family:var(--sans)!important; font-size:1rem!important; color:var(--green-2)!important; font-weight:600 }
body.menu-open{ overflow:hidden }
body.menu-open .header__menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.menu-open .header__menu-btn span:nth-child(2){ opacity:0 }
body.menu-open .header__menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ===================================================================
   HERO
   =================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:7rem 0 5rem; overflow:hidden }
.hero__img, .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.hero__video{ background:#0c120b }
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(7,12,6,.94) 0%, rgba(7,12,6,.5) 34%, rgba(7,12,6,.12) 62%, rgba(7,12,6,.42) 100%),
    linear-gradient(to right, rgba(7,12,6,.7) 0%, rgba(7,12,6,.22) 52%, rgba(7,12,6,0) 100%);
}
.hero__content{ position:relative; width:100% }
.hero__eyebrow{
  font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.28em;
  font-size:.8rem; color:var(--green-2); margin-bottom:1.4rem; display:flex; align-items:center; gap:.8rem;
}
.hero__eyebrow::before{ content:""; width:34px; height:2px; background:var(--green-2) }
.hero__title{
  font-size:clamp(2.8rem,8vw,6.6rem); font-weight:500; color:#fff; letter-spacing:-.024em; line-height:1.04;
  margin-bottom:1.5rem;
}
.hero__title-accent{ font-style:italic; font-weight:400; color:#F5C842 }
.hero__title-period{ color:#fff }
.hero__sub{
  font-size:clamp(1.05rem,1.7vw,1.28rem); color:rgba(255,255,255,.86); max-width:600px;
  line-height:1.6; margin-bottom:2.2rem;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem }
.hero__chips{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem }
.hero__chips li{
  display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:500; color:rgba(255,255,255,.85);
}
.hero__chips li svg{ width:19px; height:19px; color:var(--green-2); flex:0 0 auto }
.hero__scroll{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:1; width:26px; height:42px; border:2px solid rgba(255,255,255,.4); border-radius:14px; display:none }
.hero__scroll span{ position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:scrolldot 1.8s var(--ease) infinite }
@keyframes scrolldot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 60%{opacity:1;transform:translateY(13px)} 100%{opacity:0;transform:translateY(13px)} }
@media (min-width:1024px){ .hero__scroll{display:block} }

/* page-load choreography — option B: blur focus pull */
.reveal-load{
  opacity:0;
  filter:blur(7px);
  transform:scale(1.025);
  animation:focusPull 1.1s var(--ease-expo) forwards;
  animation-delay:calc(.1s + var(--d) * .18s);
}
@keyframes focusPull{ to{ opacity:1; filter:blur(0); transform:scale(1) } }
@media (prefers-reduced-motion: reduce){ .reveal-load{ animation:none; opacity:1; filter:none; transform:none } }

/* ===================================================================
   Shared section bits
   =================================================================== */
.section-head{ max-width:640px; margin:0 auto clamp(2.4rem,5vw,3.6rem); text-align:center }
.section-head--left{ margin-inline:0; text-align:left }
.eyebrow{ font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; color:var(--green); margin-bottom:.9rem }
.eyebrow--light{ color:#F5C842 }
.section-title{ font-size:clamp(1.9rem,3.8vw,3rem); color:inherit; margin-bottom:1rem }
.section-lead{ font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.55) }
.eyebrow + .section-title{ margin-top:0 }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-expo), transform .8s var(--ease-expo) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ===================================================================
   TRUST BAR
   =================================================================== */
.trust{ background:var(--ink-2); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark) }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.trust__item{
  display:flex; align-items:center; gap:.95rem; padding:1.8rem 1.2rem;
  position:relative;
}
.trust__item:not(:last-child)::after{ content:""; position:absolute; right:0; top:22%; height:56%; width:1px; background:var(--line-dark) }
.trust__item svg{ width:30px; height:30px; color:var(--green-2); flex:0 0 auto }
.trust__item strong{ display:block; font-weight:600; font-size:1rem; color:#fff; line-height:1.2 }
.trust__item span{ font-size:.84rem; color:var(--text-dim) }

/* ===================================================================
   SERVICES
   =================================================================== */
.services{
  padding:clamp(4.5rem,9vw,7.5rem) 0;
  background:#080d07;
}
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem }
.svc-card{
  display:flex; flex-direction:column;
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line-dark);
  transition:transform .45s var(--ease-expo), border-color .35s var(--ease), box-shadow .45s var(--ease-expo);
  position:relative;
}
.svc-card:hover{ transform:translateY(-6px); border-color:rgba(60,174,95,.45); box-shadow:var(--shadow-lg) }
.svc-card__img{ width:100%; aspect-ratio:16/10; overflow:hidden; flex:0 0 auto }
.svc-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-expo) }
.svc-card:hover .svc-card__img img{ transform:scale(1.06) }
.svc-card__body{ display:flex; flex-direction:column; align-items:flex-start; padding:1.5rem 1.6rem 1.5rem; flex:1 }
.svc-card__body h3{ font-size:1.22rem; color:#fff; margin-bottom:.5rem }
.svc-card__body p{ font-size:.96rem; color:var(--text-dim); line-height:1.55; margin-bottom:1.1rem; flex:1 }
.svc-card__link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--green-2) }
.svc-card__link em{ font-style:normal; transition:transform .3s var(--ease-expo) }
.svc-card:hover .svc-card__link em{ transform:translateX(5px) }
.services__note{ text-align:center; margin-top:2.4rem; color:var(--text-dim); font-size:1.02rem }
.services__note a{ color:var(--green-2); font-weight:600; border-bottom:1px solid rgba(60,174,95,.4) }
.services__note a:hover{ border-color:var(--green-2) }

/* ===================================================================
   WHY
   =================================================================== */
.why{
  padding:clamp(4.5rem,9vw,7.5rem) 0; position:relative; overflow:hidden;
  background:#0d1e0b;
}
.why::before{
  content:""; position:absolute; inset:0;
  background:url('../images/why-bg.jpg') center center / cover no-repeat;
  opacity:.30; pointer-events:none;
}
.why::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(165deg, rgba(10,24,8,.82) 0%, rgba(10,24,8,.65) 100%);
}
.why__inner{ position:relative; z-index:1; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:start }
.why__cta{ margin-top:1.8rem; align-self:flex-start }
.why__cta-mobile{ display:none }
.areas__cta-mobile{ display:none }
.why__list{ display:flex; flex-direction:column }
.why__row{
  display:grid; grid-template-columns:2.8rem 1fr; align-items:start; gap:1.6rem;
  padding:1.65rem 0.5rem 1.65rem 0; border-top:1px solid rgba(255,255,255,.12); position:relative;
}
.why__row:last-child{ border-bottom:1px solid rgba(255,255,255,.12) }
.why__num{ font-family:var(--display); font-size:1.45rem; font-weight:500; line-height:1.1; color:var(--green-2) }
.why__body h3{ font-size:1.24rem; color:#fff; margin-bottom:.4rem }
.why__body p{ color:rgba(234,240,231,.74); font-size:.97rem; line-height:1.55 }

/* ===================================================================
   STORY  (light section for warmth + readability)
   =================================================================== */
.story{ padding:clamp(4.5rem,9vw,7.5rem) 0; background:var(--cream); color:var(--text-ink); position:relative; overflow:hidden }
/* Spray-gun mascot: anchored to the left of the story photo, spray crossing onto it.
   Absolutely positioned so it never affects the grid layout. */
.story__mascot{
  position:absolute; z-index:3; pointer-events:none; user-select:none; display:block;
  left:calc(clamp(-4rem,-2vw,-.5rem) - 48px);
  bottom:clamp(1.5rem,4vw,3.5rem);
  width:clamp(440px,40vw,645px); height:auto;
}
/* Below 1100px the photo is too small for the overlapping mascot — swap to the
   upper-body version cut off flush to the bottom of the cream Story section. */
.story__mascot-mobile{ display:none }
@media (max-width:1099px){
  .story__mascot{ display:none }
  .story{ padding-bottom:0 }
  .story__mascot-mobile{
    display:block;
    width:min(560px,92%); height:auto;
    margin:2.5rem auto 0;
  }
}
.story__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:center }
.story__media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg) }
.story__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.4 }
.story__badge{
  position:absolute; right:1.2rem; bottom:1.2rem; background:var(--ink); color:#fff;
  padding:.85rem 1.2rem; border-radius:12px; box-shadow:var(--shadow-md);
}
.story__badge strong{ display:block; font-family:var(--display); font-size:1.35rem; color:var(--green-2); line-height:1 }
.story__badge span{ font-size:.82rem; color:var(--text-dim) }
.story__text .eyebrow{ color:var(--green); font-size:.78rem }
.story__text .section-title{ color:var(--text-ink) }
.story__text p{ color:var(--text-ink-dim); margin-bottom:1.1rem; font-size:1.06rem; line-height:1.62 }
.story__points{ display:flex; flex-direction:column; gap:.6rem; margin:1.6rem 0 1.4rem }
.story__points li{ display:flex; align-items:center; gap:.65rem; font-weight:600; color:var(--text-ink); font-size:1rem }
.story__check{ width:21px; height:21px; color:var(--green); flex:0 0 auto }

/* ===================================================================
   SHOWCASE VIDEO BAND
   =================================================================== */
.showcase{ position:relative; min-height:min(78vh,620px); display:flex; align-items:center; overflow:hidden; isolation:isolate; padding:5rem 0 }
.showcase__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.showcase__overlay{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right, rgba(7,12,6,.86) 0%, rgba(7,12,6,.55) 45%, rgba(7,12,6,.30) 100%),
            linear-gradient(to top, rgba(7,12,6,.7) 0%, rgba(7,12,6,.1) 40%) }
.showcase__content{ max-width:620px }
.showcase__headline{ font-size:clamp(1.9rem,4vw,3rem); color:#fff; margin-bottom:1rem }
.showcase__sub{ font-size:1.1rem; color:rgba(255,255,255,.86); line-height:1.6; margin-bottom:1.9rem; max-width:520px }

/* ===================================================================
   REVIEWS
   =================================================================== */
.reviews{
  padding:clamp(4.5rem,9vw,7.5rem) 0;
  background:linear-gradient(180deg, #0d1a0b 0%, #0a1108 100%);
  position:relative; overflow:hidden;
}
.reviews__grass{
  position:absolute; pointer-events:none; user-select:none; display:block; z-index:0;
}
.reviews .container{ position:relative; z-index:1 }
.reviews__grass--bl{
  width:clamp(600px,58vw,900px);
  bottom:-380px; left:-560px;
  transform:rotate(30deg);
  transform-origin:center center;
}
.reviews__grass--tr{
  width:clamp(600px,58vw,900px);
  top:-380px; right:-560px;
  transform:rotate(210deg);
  transform-origin:center center;
}
@media (max-width:680px){
  .reviews__grass--bl{ width:320px; bottom:-80px; left:-140px }
  .reviews__grass--tr{ width:220px; top:-60px; right:-90px }
}
/* Mascot is anchored to the centered container's right edge and overflows into the
   right margin, so the cards stay centered and the mascot doesn't affect their layout.
   Only the thumb overlaps the third card. */
.reviews__mascot{
  --mascot-w:clamp(300px,27vw,460px);
  position:absolute; z-index:2; pointer-events:none; user-select:none; display:block;
  width:var(--mascot-w); height:auto;
  bottom:-88px;
  right:calc(-1 * (var(--mascot-w) - 118px));
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
@media (max-width:1099px){ .reviews__mascot{ display:none } }

/* Mobile: upper-body mascot sits after the last review, flush to the section's bottom edge */
.reviews__mascot-mobile{ display:none }
@media (max-width:860px){
  .reviews{ padding-bottom:0 }
  .reviews__mascot-mobile{
    display:block;
    width:min(420px,82%); height:auto;
    margin:2.5rem auto 0;
  }
}
.reviews__google{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem;
  font-size:.94rem; color:var(--text-dim); background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark); border-radius:999px; padding:.45rem 1rem;
}
.reviews__google strong{ color:#fff; font-weight:700 }
.reviews__google span.reviews__stars{ color:#F5C842; letter-spacing:.06em; font-size:.88rem }
.reviews__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
  margin-top:3rem;
}
.review-card{
  margin:0; padding:2rem 1.8rem 1.8rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:transform .45s var(--ease-expo), border-color .35s var(--ease), box-shadow .45s var(--ease-expo);
}
.review-card:hover{ transform:translateY(-5px); border-color:rgba(60,174,95,.4); box-shadow:var(--shadow-lg) }
.review-card__stars{ color:#F5C842; font-size:1.1rem; letter-spacing:.06em; line-height:1 }
.review-card__text{
  font-family:var(--display); font-style:italic; font-size:1.06rem;
  color:var(--text); line-height:1.62; flex:1;
}
.review-card__footer{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding-top:.9rem; border-top:1px solid var(--line-dark);
}
.review-card__name{ font-weight:700; font-size:.95rem; color:#fff }
.review-card__source{
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-dim);
}
@media (max-width:860px){ .reviews__grid{ grid-template-columns:1fr } }

/* ===================================================================
   FILM STRIP
   =================================================================== */
.filmstrip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  width:100%;
}
.filmstrip__frame{ overflow:hidden; aspect-ratio:1/1 }
.filmstrip__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease-expo);
}
.filmstrip__frame:hover img{ transform:scale(1.05) }
@media (max-width:860px){ .filmstrip{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:560px){ .filmstrip{ grid-template-columns:repeat(2,1fr) } }

/* ===================================================================
   SERVICE AREAS
   =================================================================== */
.areas{ padding:clamp(4.5rem,9vw,7.5rem) 0; background:linear-gradient(180deg,#0d1409,#0a1108) }
.areas__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
.areas__text .section-title{ color:#fff }
.areas__text .section-lead{ color:var(--text-dim); margin-bottom:1.8rem }
.areas__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem }
.areas__list li{
  display:flex; align-items:center; gap:.55rem; padding:.7rem .9rem; border-radius:10px;
  background:rgba(255,255,255,.035); border:1px solid var(--line-dark); font-size:.94rem; font-weight:500; color:var(--text);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-expo);
}
.areas__list li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green-2); flex:0 0 auto }
.areas__list li:hover{ background:rgba(48,151,82,.12); border-color:rgba(60,174,95,.45); transform:translateY(-2px) }

/* ===================================================================
   FAQ
   =================================================================== */
.faq{ padding:clamp(4.5rem,9vw,7.5rem) 0; background:var(--cream); color:var(--text-ink) }
.faq__inner{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:start }
.faq .section-title{ color:var(--text-ink) }
.faq .eyebrow{ color:var(--green) }
.faq__list{ border-top:1px solid var(--line-light) }
.faq__item{ border-bottom:1px solid var(--line-light) }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  list-style:none; padding:1.35rem 0; font-family:var(--display); font-size:1.18rem; font-weight:500; color:var(--text-ink);
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content:"+"; font-family:var(--sans); font-weight:400; font-size:1.6rem; color:var(--green);
  transition:transform .35s var(--ease-expo); flex:0 0 auto; line-height:1;
}
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__answer{
  overflow:hidden; height:0;
  transition:height .48s var(--ease-expo), opacity .38s var(--ease-expo);
  opacity:0;
}
.faq__answer.is-open{ opacity:1 }
.faq__answer p{ padding:0 0 1.35rem; color:var(--text-ink-dim); font-size:1.02rem; line-height:1.62; max-width:62ch }
.faq__answer a{ color:var(--green); font-weight:600; border-bottom:1px solid rgba(48,151,82,.4) }

/* ===================================================================
   QUOTE / CTA
   =================================================================== */
.quote{ padding:clamp(4.5rem,9vw,7.5rem) 0; background:radial-gradient(130% 90% at 80% 0%, #143d22 0%, var(--ink) 55%); position:relative }
.quote__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start }
.quote__pitch .section-title{ color:#fff }
.quote__pitch .section-lead{ color:var(--text-dim); margin-bottom:1.6rem }
.quote__perks{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem }
.quote__perks li{ display:flex; align-items:center; gap:.7rem; color:var(--text); font-weight:500 }
.quote__perks span{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(48,151,82,.2); color:var(--green-2); font-size:.78rem; flex:0 0 auto }
.quote__contact{ padding-top:1.6rem; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:.85rem }
.quote__contact-item{ display:flex; align-items:center; gap:1rem; min-width:0; padding:.85rem 1rem; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); transition:background-color .3s var(--ease), border-color .3s var(--ease) }
.quote__contact-icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:rgba(60,174,95,.14); color:var(--green-2); flex:0 0 auto; transition:background-color .3s var(--ease), color .3s var(--ease) }
.quote__contact-icon svg{ width:20px; height:20px }
.quote__contact-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0 }
.quote__contact-text strong{ font-family:var(--display); font-size:1.5rem; font-weight:500; color:#fff; overflow-wrap:anywhere; transition:color .25s var(--ease); letter-spacing:-.01em }
.quote__contact-text em{ font-style:normal; font-size:.82rem; color:var(--text-dim); margin-top:.15rem }
.quote__contact-item:hover{ background:rgba(48,151,82,.1); border-color:rgba(60,174,95,.35) }
.quote__contact-item:hover .quote__contact-icon{ background:var(--green); color:#fff }
.quote__contact-item:hover .quote__contact-text strong{ color:var(--green-2) }

.quote__form{
  background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.3rem); box-shadow:var(--shadow-lg); backdrop-filter:blur(4px);
}
.field{ margin-bottom:1.05rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field label, .field legend{ display:block; font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.4rem; padding:0 }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:#fff;
  background:rgba(0,0,0,.22); border:1.4px solid var(--line-dark); border-radius:10px;
  padding:.8rem .95rem; transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(167,182,164,.55) }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green-2); background:rgba(0,0,0,.35); box-shadow:0 0 0 3px rgba(48,151,82,.18) }
.field textarea{ resize:vertical; min-height:84px }
.field--services{ border:none; margin-bottom:1.1rem; padding:0 }
.service-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.45rem }
.chip{ position:relative; margin:0; cursor:pointer }
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip span{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--text-dim); white-space:nowrap;
  background:rgba(255,255,255,.04); border:1.4px solid var(--line-dark);
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip span::before{
  content:""; width:15px; height:15px; border-radius:5px; border:1.6px solid rgba(167,182,164,.5);
  background:transparent center/11px no-repeat; flex:0 0 auto; transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover span{ border-color:rgba(60,174,95,.5); color:var(--text) }
.chip:has(input:checked) span{ background:rgba(48,151,82,.16); border-color:var(--green-2); color:#fff }
.chip:has(input:checked) span::before{ background-color:var(--green); border-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") }
.chip input:focus-visible + span{ outline:2.5px solid var(--green-2); outline-offset:2px }
.field.invalid input{ border-color:#e7795b; box-shadow:0 0 0 3px rgba(231,121,91,.16) }
.field__err{ display:block; color:#f0a48c; font-size:.8rem; margin-top:.3rem }
.form-status{ margin-top:.7rem; font-size:.95rem; font-weight:600; text-align:center; min-height:0 }
.form-status:empty{ margin-top:0 }
.form-status.ok{ color:var(--green-2) }
.form-status.err{ color:#f0a48c }
.form-fineprint{ margin-top:.55rem; font-size:.82rem; color:var(--text-dim); text-align:center }

/* success state */
.form-success{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2.5rem 1.5rem; gap:1rem;
  border-radius:var(--radius); border:1px solid var(--line-dark);
  background:rgba(255,255,255,.04); min-height:280px;
}
.form-success.visible{
  display:flex;
  animation:focusPull .7s var(--ease-expo) both;
}
.form-success__icon{
  display:grid; place-items:center; width:64px; height:64px;
  border-radius:50%; background:rgba(48,151,82,.15);
  color:var(--green-2); margin-bottom:.4rem;
  animation:iconPop .6s var(--ease-expo) .1s both;
}
@keyframes iconPop{ from{transform:scale(.5); opacity:0} to{transform:scale(1); opacity:1} }
.form-success__icon svg{ width:32px; height:32px }
.form-success__title{ font-family:var(--display); font-size:1.7rem; font-weight:500; color:#fff }
.form-success__sub{ color:var(--text-dim); font-size:1rem; margin-top:-.2rem }
.form-success__reset{ margin-top:.6rem; font-size:.9rem }
#quoteSubmit[aria-busy="true"]{ opacity:.75; pointer-events:none }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:#070c06; padding:clamp(3rem,6vw,4.5rem) 0 2rem; border-top:1px solid var(--line-dark) }
.footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:2.5rem 2rem; padding-bottom:2.8rem; border-bottom:1px solid var(--line-dark) }
.footer__logo{ height:38px; width:auto; margin-bottom:1.1rem }
.footer__brand p{ color:var(--text-dim); font-size:.95rem; line-height:1.6; max-width:34ch; margin-bottom:1.3rem }
.footer__social{ display:flex; gap:.6rem }
.footer__social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); color:var(--text); transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-expo) }
.footer__social a:hover{ background:var(--green); color:#fff; transform:translateY(-3px) }
.footer__col h3{ font-family:var(--sans); font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:var(--green-2); margin-bottom:1.1rem; font-weight:600 }
.footer__col a{ display:block; color:var(--text-dim); font-size:.94rem; padding:.32rem 0; transition:color .2s var(--ease) }
.footer__col a:hover{ color:#fff }
.footer__contact .footer__phone{ font-family:var(--display); font-size:1.3rem; color:#fff; margin-bottom:.3rem }
.footer__contact p{ color:var(--text-dim); font-size:.92rem; margin-top:.5rem; line-height:1.5 }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; color:var(--text-dim); font-size:.86rem }
.footer__credit a{ color:var(--green-2); font-weight:600 }
.footer__credit span{ opacity:.7 }

/* ===================================================================
   STICKY MOBILE CTA
   =================================================================== */
.mobile-cta{ display:none }
.mobile-cta__call, .mobile-cta__quote{ display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; padding:.95rem; font-size:1rem }
.mobile-cta__call{ flex:0 0 32%; background:var(--ink-2); color:#fff; border-top:1px solid var(--line-dark) }
.mobile-cta__call svg{ color:var(--green-2) }
.mobile-cta__quote{ flex:1; background:var(--green); color:#fff }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1024px){
  .header__phone span{ display:none }
  .why__inner{ grid-template-columns:1fr; gap:2.2rem }
  .why__inner .section-head{ position:static }
  .quote__grid{ grid-template-columns:1fr; gap:2.5rem }
  .faq__inner{ grid-template-columns:1fr; gap:1.5rem }
}
@media (max-width:860px){
  .services__grid{ grid-template-columns:1fr 1fr }
  .story__grid{ grid-template-columns:1fr; gap:2.2rem }
  .story__media img{ aspect-ratio:16/12 }
  .areas__inner{ grid-template-columns:1fr; gap:2rem }
  .footer__top{ grid-template-columns:1fr 1fr; gap:2.2rem }
}
@media (max-width:680px){
  /* Hero: hide primary CTA (covered by sticky bar), full-width ghost */
  .hero__actions .btn--primary{ display:none }
  .hero__actions .btn--ghost{ width:100% }
  .hero__actions{ flex-direction:column }

  /* Why: hide desktop CTA, show mobile one full-width after list */
  .why__cta{ display:none }
  .why__cta-mobile{ display:flex; justify-content:center; width:100%; margin-top:1.2rem }

  /* Areas: hide desktop CTA, show mobile one full-width below city grid */
  .areas__cta-desktop{ display:none }
  .areas__cta-mobile{ display:flex; justify-content:center; width:100%; margin-top:1.4rem }

  /* Film strip: hide 5th photo, show 2×2 grid of 4 */
  .filmstrip{ grid-template-columns:repeat(2,1fr) }
  .filmstrip__frame:nth-child(5){ display:none }

  body{ font-size:1rem }
  .hero__title{ font-size:clamp(3.4rem,12vw,4.8rem) }
  .hero{ padding:6rem 0 6rem; min-height:92svh }
  .hero__overlay{ background:linear-gradient(to top, rgba(7,12,6,.92) 8%, rgba(7,12,6,.35) 55%, rgba(7,12,6,.55) 100%) }
  .services__grid{ grid-template-columns:1fr }
  .why__row{ grid-template-columns:2.2rem 1fr; gap:1rem }
  .showcase{ min-height:460px }
  .areas__list{ grid-template-columns:1fr 1fr }
  .field-row{ grid-template-columns:1fr }
  .footer__top{ grid-template-columns:1fr; gap:2rem }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.4rem }
  .mobile-cta{ display:flex; position:fixed; inset:auto 0 0 0; z-index:90; box-shadow:0 -6px 24px rgba(0,0,0,.3); padding-bottom:env(safe-area-inset-bottom) }
  body{ padding-bottom:60px }
  .hero__scroll{ display:none }
}
@media (max-width:560px){
  .header__cta{ display:none }
}
@media (max-width:380px){
  .areas__list{ grid-template-columns:1fr }
}