/* =========================================================
   CARDEA CLEANERS — LUXURY EDITORIAL DESIGN SYSTEM
   Signature motif: the "wipe reveal" — content is unveiled
   the way grime lifts from a surface being cleaned.
   ========================================================= */

:root{
  /* ---- Palette ---- */
  --navy:        #0B1B2B;   /* Deep Navy — primary */
  --navy-soft:   #13314D;   /* Professional Blue */
  --navy-100:    #1C3A57;
  --white:       #FFFFFF;
  --grey-50:     #F4F6F7;   /* Soft Grey background */
  --grey-100:    #E8EBEE;
  --grey-300:    #C7CDD3;
  --slate:       #6B7680;   /* muted text on light */
  --slate-200:   #9FA8B0;   /* muted text on dark */
  --brass:       #C9A227;   /* Restoration accent — used sparingly */
  --brass-light: #E0C158;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Canela', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* ---- Scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius-sm: 2px;
  --radius-md: 4px;

  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 0.7s;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

::selection{ background:var(--brass); color:var(--navy); }

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

.container{
  max-width:1320px;
  margin:0 auto;
  padding-inline:6vw;
}

@media (max-width: 768px){
  .container{ padding-inline:6.5vw; }
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.eyebrow::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--brass);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--brass-light); }

h1, h2, h3, h4{
  font-family:var(--font-display);
  font-weight:560;
  letter-spacing:-0.01em;
  line-height:1.06;
  color:var(--navy);
}

.display-italic{
  font-style:italic;
  font-weight:450;
}

.display-1{
  font-size:clamp(2.6rem, 6vw, 5.6rem);
  font-weight:500;
}
.display-2{
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight:500;
}
.display-3{
  font-size:clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight:500;
}

p.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--slate);
  max-width:640px;
  font-weight:400;
}

.on-dark{ color:var(--white); }
.on-dark p, .on-dark .lede{ color:var(--slate-200); }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:1rem 1.9rem;
  border-radius:var(--radius-sm);
  transition:transform 0.45s var(--ease-cinematic), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform 0.4s var(--ease-cinematic); }
.btn:hover svg{ transform:translateX(4px); }

.btn-primary{
  background:var(--brass);
  color:var(--navy);
}
.btn-primary:hover{
  background:var(--brass-light);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(201,162,39,0.55);
}

.btn-ghost{
  background:transparent;
  color:var(--white);
  border:1px solid rgba(255,255,255,0.45);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--white);
  transform:translateY(-2px);
}

.btn-ghost-dark{
  background:transparent;
  color:var(--navy);
  border:1px solid rgba(11,27,43,0.3);
}
.btn-ghost-dark:hover{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}

.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  padding:1.4rem 0;
  transition:background 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header.is-scrolled{
  background:rgba(11,27,43,0.92);
  backdrop-filter:blur(14px);
  padding:0.85rem 0;
  box-shadow:0 10px 30px -15px rgba(0,0,0,0.4);
}

.brand{
  display:flex;
  align-items:center;
  gap:0.65rem;
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:600;
  color:var(--white);
  letter-spacing:0.01em;
}
.brand .mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid var(--brass);
  border-radius:50%;
  color:var(--brass);
  font-family:var(--font-display);
  font-size:1rem;
}

.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav ul{ display:flex; gap:2.1rem; }
.main-nav a{
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--slate-200);
  position:relative;
  padding-bottom:6px;
  transition:color 0.3s ease;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0%; height:1px;
  background:var(--brass);
  transition:width 0.4s var(--ease-cinematic);
}
.main-nav a:hover, .main-nav a.is-active{ color:var(--white); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:1.4rem; }
.nav-phone{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--white);
  font-size:0.88rem;
  font-weight:600;
}
.nav-phone svg{ width:16px; height:16px; color:var(--brass); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:26px;
  z-index:600;
}
.nav-toggle span{
  height:2px; width:100%;
  background:var(--white);
  transition:transform 0.35s ease, opacity 0.35s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 920px){
  .main-nav{
    position:fixed;
    inset:0;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    background:var(--navy);
    padding:8vh 9vw;
    transform:translateY(-100%);
    transition:transform 0.55s var(--ease-cinematic);
    gap:3rem;
  }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:1.6rem; }
  .main-nav ul a{ font-size:1.7rem; font-family:var(--font-display); }
  .nav-cta{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .nav-toggle{ display:flex; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}

@media (max-width: 760px){
  .hero{ min-height:100vh; min-height:100dvh; }
  .hero-content{ padding-bottom:2.5vh; }
  .hero-content .container{ gap:0.9rem; }
  .hero-content .lede{ font-size:0.98rem; }
  .hero-content .btn-row{ margin-top:0.1rem; gap:0.7rem; }
  .hero-content .btn{ padding:0.85rem 1.5rem; font-size:0.82rem; }
  .hero-foot{ display:none; }
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);
  animation:heroSettle 2.4s var(--ease-cinematic) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }

.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,27,43,0.35) 0%, rgba(11,27,43,0.35) 35%, rgba(11,27,43,0.92) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:8vh;
}
.hero-content .container{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.hero-content h1{
  font-size:clamp(2.6rem, 7.2vw, 6.2rem);
  color:var(--white);
  max-width:14ch;
}

@media (max-width: 420px){
  .hero-content h1{ font-size:2.5rem; }
}
.hero-content .lede{
  color:rgba(255,255,255,0.85);
  max-width:540px;
}
.hero-content .btn-row{ margin-top:0.6rem; }

.hero-foot{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,0.18);
}
.hero-foot .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:1.1rem;
  flex-wrap:wrap;
  gap:0.8rem;
}
.hero-stat-row{ display:flex; gap:2.6rem; flex-wrap:wrap; }
.hero-stat{ display:flex; flex-direction:column; }
.hero-stat .num{ font-family:var(--font-display); font-size:1.5rem; color:var(--brass-light); }
.hero-stat .label{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-200); white-space:nowrap; }

@media (max-width: 760px){
  .hero-foot .container{ flex-direction:column; align-items:flex-start; gap:0.9rem; padding-block:1rem; }
  .hero-stat-row{ gap:1.6rem; width:100%; }
  .hero-stat .num{ font-size:1.25rem; }
  .hero-stat .label{ white-space:normal; font-size:0.65rem; }
  .scroll-cue{ display:none; }
}

.scroll-cue{
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--slate-200);
}
.scroll-cue .line{
  width:1px; height:34px;
  background:rgba(255,255,255,0.35);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:'';
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:var(--brass);
  animation:scrollDrip 2.6s ease-in-out infinite;
}
@keyframes scrollDrip{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* Page hero (sub-pages, shorter) */
.page-hero{
  position:relative;
  min-height:62vh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}
.page-hero .hero-media img{ animation:none; transform:scale(1); }
.page-hero-content{
  position:relative; z-index:2;
  padding-bottom:6vh;
  width:100%;
}
.page-hero-content h1{
  color:var(--white);
  font-size:clamp(2.3rem, 5.6vw, 4.4rem);
  max-width:18ch;
}
.breadcrumb{
  display:flex; gap:0.5rem; align-items:center;
  font-size:0.8rem; color:var(--slate-200);
  margin-top:1rem;
}
.breadcrumb a:hover{ color:var(--white); }

/* ---------------------------------------------------------
   Section scaffolding
   --------------------------------------------------------- */
section{ position:relative; }
.section{ padding-block:var(--space-6); }
.section-tight{ padding-block:var(--space-5); }
.section-dark{ background:var(--navy); color:var(--white); }
.section-grey{ background:var(--grey-50); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:var(--space-5);
  flex-wrap:wrap;
}
.section-head h2{ margin-top:0.9rem; }
.section-head .lede{ margin-top:0.9rem; }

/* Reveal-on-scroll system */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 0.09s); }

/* Wipe-reveal signature: image masks that "clean" into view */
.wipe{
  position:relative;
  overflow:hidden;
}
.wipe::before{
  content:'';
  position:absolute; inset:0;
  background:var(--grey-50);
  z-index:3;
  transform-origin:left;
  transform:scaleX(1);
  transition:transform 1.1s var(--ease-cinematic);
}
.wipe.is-visible::before{ transform:scaleX(0); }
.wipe img{ transform:scale(1.12); transition:transform 1.4s var(--ease-cinematic); }
.wipe.is-visible img{ transform:scale(1); }

/* ---------------------------------------------------------
   Brand story (editorial split)
   --------------------------------------------------------- */
.story{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:0;
  align-items:stretch;
}
.story-media{ position:relative; min-height:560px; overflow:hidden; }
.story-media img{ width:100%; height:100%; object-fit:cover; }
.story-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.6rem;
  padding:var(--space-6) 6vw;
  background:var(--white);
}
.story-copy h2{ margin-top:0.8rem; }
.story-pillars{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.6rem;
  margin-top:1rem;
}
.pillar{ border-top:1px solid var(--grey-300); padding-top:1rem; }
.pillar .pillar-num{ font-family:var(--font-display); color:var(--brass); font-size:1.1rem; }
.pillar h4{ font-size:1.02rem; margin-top:0.4rem; }
.pillar p{ font-size:0.9rem; color:var(--slate); margin-top:0.3rem; }

@media (max-width: 920px){
  .story{ grid-template-columns:1fr; }
  .story-media{ min-height:380px; }
  .story-copy{ padding:var(--space-5) 6vw; }
  .story-pillars{ grid-template-columns:1fr 1fr; gap:1.2rem; }
}

/* ---------------------------------------------------------
   Services grid
   --------------------------------------------------------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--grey-300);
  border:1px solid var(--grey-300);
}
.service-card{
  background:var(--white);
  padding:var(--space-4) var(--space-3);
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:background 0.5s ease;
  position:relative;
  min-height:300px;
}
.service-card .s-icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--grey-300);
  border-radius:50%;
  color:var(--navy-soft);
  transition:border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.service-card .s-icon svg{ width:22px; height:22px; }
.service-card h3{ font-size:1.18rem; }
.service-card p{ color:var(--slate); font-size:0.93rem; flex-grow:1; }
.service-card .s-link{
  font-size:0.82rem; font-weight:600; letter-spacing:0.03em;
  color:var(--navy); display:inline-flex; align-items:center; gap:0.5rem;
}
.service-card .s-link svg{ width:14px; height:14px; transition:transform 0.4s var(--ease-cinematic); }
.service-card:hover{ background:var(--navy); }
.service-card:hover .s-icon{ background:var(--brass); border-color:var(--brass); color:var(--navy); }
.service-card:hover h3, .service-card:hover .s-link{ color:var(--white); }
.service-card:hover p{ color:var(--slate-200); }
.service-card:hover .s-link svg{ transform:translateX(4px); }

@media (max-width: 920px){
  .service-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .service-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Feature split (Pressure Washing / Property Maintenance)
   --------------------------------------------------------- */
.feature-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px;
}
.feature-split.flip{ direction:rtl; }
.feature-split.flip > *{ direction:ltr; }
.feature-media{ position:relative; overflow:hidden; }
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.feature-copy{
  background:var(--navy);
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.5rem;
  padding:var(--space-6) 6vw;
}
.feature-copy.is-light{ background:var(--grey-50); color:var(--navy); }
.feature-copy.is-light p{ color:var(--slate); }
.feature-copy h2{ margin-top:0.7rem; }
.feature-copy.is-light h2{ color:var(--navy); }
.feature-list{ display:flex; flex-direction:column; gap:0.9rem; margin-top:0.4rem; }
.feature-list li{
  display:flex; align-items:flex-start; gap:0.8rem;
  font-size:0.97rem;
}
.feature-list svg{ width:18px; height:18px; color:var(--brass); flex-shrink:0; margin-top:3px; }

@media (max-width: 920px){
  .feature-split, .feature-split.flip{ grid-template-columns:1fr; direction:ltr; min-height:auto; }
  .feature-media{ min-height:360px; }
  .feature-copy{ padding:var(--space-5) 6vw; }
}

/* ---------------------------------------------------------
   Before & After
   --------------------------------------------------------- */
.ba-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius-md);
  cursor:ew-resize;
  user-select:none;
}
.ba-slider img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.ba-slider .ba-after{ z-index:1; }
.ba-slider .ba-before-wrap{
  position:absolute; inset:0;
  z-index:2;
  width:50%;
  overflow:hidden;
}
.ba-slider .ba-before-wrap img{ width:200%; max-width:none; }
.ba-slider .ba-handle{
  position:absolute; top:0; bottom:0;
  left:50%;
  width:2px;
  background:var(--white);
  z-index:3;
  transform:translateX(-1px);
}
.ba-slider .ba-grip{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--white);
  display:grid; place-items:center;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.5);
  color:var(--navy);
}
.ba-grip svg{ width:18px; height:18px; }
.ba-tag{
  position:absolute; top:1rem;
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.4rem 0.8rem;
  background:rgba(11,27,43,0.75);
  color:var(--white);
  border-radius:2px;
  z-index:3;
}
.ba-tag.before{ left:1rem; }
.ba-tag.after{ right:1rem; }
.ba-caption{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1.2rem; flex-wrap:wrap; gap:0.8rem;
}
.ba-caption h4{ font-size:1.05rem; font-family:var(--font-body); font-weight:600; }
.ba-caption span{ font-size:0.85rem; color:var(--slate); }

.ba-grid-collage{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
  margin-top:var(--space-4);
}
.collage-item{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius-md);
}
.collage-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease-cinematic); }
.collage-item:hover img{ transform:scale(1.07); }
.collage-item .collage-label{
  position:absolute; bottom:0; left:0; right:0;
  padding:1rem;
  background:linear-gradient(180deg, transparent, rgba(11,27,43,0.85));
  color:var(--white);
  font-size:0.82rem;
  font-weight:600;
}
@media (max-width: 920px){ .ba-grid-collage{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------
   Process
   --------------------------------------------------------- */
.process-rail{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--grey-300);
}
.process-step{
  padding:var(--space-4) var(--space-2) var(--space-4) 0;
  border-right:1px solid var(--grey-300);
  padding-right:var(--space-3);
}
.process-step:last-child{ border-right:none; }
.process-step:not(:first-child){ padding-left:var(--space-3); }
.process-num{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--brass);
  display:block;
  margin-bottom:1.6rem;
}
.process-step h3{ font-size:1.12rem; margin-bottom:0.6rem; }
.process-step p{ font-size:0.9rem; color:var(--slate); }

@media (max-width: 920px){
  .process-rail{ grid-template-columns:1fr; }
  .process-step{ border-right:none; border-bottom:1px solid var(--grey-300); padding:var(--space-3) 0; }
  .process-step:not(:first-child){ padding-left:0; }
}

/* ---------------------------------------------------------
   Testimonials
   --------------------------------------------------------- */
.testimonial-track{
  display:flex;
  gap:1.6rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:none;
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-card{
  flex:0 0 min(420px, 86vw);
  scroll-snap-align:start;
  background:var(--white);
  border:1px solid var(--grey-300);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.stars{ display:flex; gap:4px; color:var(--brass); }
.stars svg{ width:16px; height:16px; }
.testimonial-card p{ font-size:1.02rem; color:var(--navy); font-family:var(--font-display); font-style:italic; font-weight:450; line-height:1.5; }
.t-author{ display:flex; flex-direction:column; gap:0.15rem; margin-top:auto; }
.t-author strong{ font-size:0.92rem; }
.t-author span{ font-size:0.8rem; color:var(--slate); }

/* ---------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------- */
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--grey-300); }
.faq-q{
  width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.6rem 0;
  text-align:left;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--navy);
}
.faq-q .plus{
  width:22px; height:22px;
  position:relative;
  flex-shrink:0;
  margin-left:1.5rem;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:'';
  position:absolute;
  background:var(--navy);
  transition:transform 0.4s var(--ease-cinematic);
}
.faq-q .plus::before{ width:100%; height:1px; top:50%; left:0; }
.faq-q .plus::after{ width:1px; height:100%; left:50%; top:0; }
.faq-item.is-open .faq-q .plus::after{ transform:scaleY(0); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.5s var(--ease-cinematic);
}
.faq-a p{ padding-bottom:1.6rem; color:var(--slate); max-width:680px; }

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:var(--white);
  padding-block:var(--space-6);
}
.cta-band .cta-grain{
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,162,39,0.18), transparent 55%);
  pointer-events:none;
}
.cta-inner{
  position:relative; z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-inner h2{ color:var(--white); max-width:16ch; }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-card{
  background:var(--white);
  border:1px solid var(--grey-300);
  padding:var(--space-4);
}
.form-card.on-dark{
  background:var(--navy-soft);
  border-color:rgba(255,255,255,0.12);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-grid .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field label{
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--slate);
}
.form-card.on-dark .field label{ color:var(--slate-200); }
.field input, .field select, .field textarea{
  font-family:inherit;
  font-size:0.96rem;
  padding:0.85rem 1rem;
  border:1px solid var(--grey-300);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--navy);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-card.on-dark .field input,
.form-card.on-dark .field select,
.form-card.on-dark .field textarea{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.18);
  color:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(201,162,39,0.18);
  outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }
.form-submit{ margin-top:1.6rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.form-note{ font-size:0.82rem; color:var(--slate); }
.form-card.on-dark .form-note{ color:var(--slate-200); }
.form-success{
  display:none;
  align-items:center;
  gap:0.8rem;
  padding:1rem 1.2rem;
  background:rgba(201,162,39,0.12);
  border:1px solid rgba(201,162,39,0.4);
  color:var(--navy);
  font-size:0.9rem;
  font-weight:600;
  margin-top:1.2rem;
  border-radius:var(--radius-sm);
}
.form-card.on-dark .form-success{ color:var(--white); }
.form-success.is-visible{ display:flex; }
.form-success svg{ width:18px; height:18px; color:var(--brass); flex-shrink:0; }

@media (max-width: 700px){
  .form-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  background:var(--navy);
  color:var(--slate-200);
  padding-top:var(--space-6);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand{ margin-bottom:1.2rem; }
.footer-brand p{ max-width:320px; font-size:0.92rem; }
.footer-col h4{
  font-family:var(--font-body);
  color:var(--white);
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:1.3rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:0.8rem; }
.footer-col a{ font-size:0.93rem; transition:color 0.3s ease; }
.footer-col a:hover{ color:var(--white); }
.footer-social{ display:flex; gap:0.9rem; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  display:grid; place-items:center;
  transition:border-color 0.3s ease, background 0.3s ease;
}
.footer-social a:hover{ border-color:var(--brass); background:rgba(201,162,39,0.12); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.6rem 0 2rem;
  font-size:0.82rem;
  flex-wrap:wrap;
  gap:0.8rem;
}
.footer-bottom a:hover{ color:var(--white); }

@media (max-width: 920px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:2.4rem; }
}
@media (max-width: 600px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Sticky mobile call bar
   --------------------------------------------------------- */
.sticky-call{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:400;
  display:none;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,0.12);
  padding:0.8rem 6vw;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.sticky-call a{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:0.85rem;
  font-size:0.88rem; font-weight:700; letter-spacing:0.02em;
  border-radius:var(--radius-sm);
}
.sticky-call .call-now{ background:var(--brass); color:var(--navy); }
.sticky-call .get-quote{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.3); }
.sticky-call svg{ width:16px; height:16px; }

@media (max-width: 760px){
  .sticky-call{ display:flex; }
  body{ padding-bottom:78px; }
}

/* ---------------------------------------------------------
   Page intro (About/Services/Gallery/Contact text blocks)
   --------------------------------------------------------- */
.intro-block{ max-width:760px; }
.intro-block .lede{ margin-top:1.1rem; max-width:680px; }

.stat-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--grey-300);
  border-bottom:1px solid var(--grey-300);
}
.stat-strip .stat{
  padding:var(--space-4) var(--space-2);
  border-right:1px solid var(--grey-300);
  text-align:center;
}
.stat-strip .stat:last-child{ border-right:none; }
.stat-strip .num{ font-family:var(--font-display); font-size:2.4rem; color:var(--navy); }
.stat-strip .label{ font-size:0.82rem; color:var(--slate); margin-top:0.4rem; letter-spacing:0.02em; }

@media (max-width: 760px){
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .stat-strip .stat:nth-child(2){ border-right:none; }
  .stat-strip .stat:nth-child(1), .stat-strip .stat:nth-child(2){ border-bottom:1px solid var(--grey-300); }
}

/* Values / team grid (About) */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
}
.value-card .v-num{ font-family:var(--font-display); color:var(--brass); font-size:1rem; }
.value-card h4{ font-size:1.05rem; margin:0.8rem 0 0.5rem; }
.value-card p{ font-size:0.9rem; color:var(--slate); }
@media (max-width:920px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }

.timeline{ display:flex; flex-direction:column; }
.timeline-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:2rem;
  padding:2rem 0;
  border-top:1px solid var(--grey-300);
}
.timeline-row .year{ font-family:var(--font-display); font-size:1.4rem; color:var(--navy); }
.timeline-row h4{ font-size:1.08rem; margin-bottom:0.4rem; }
.timeline-row p{ color:var(--slate); font-size:0.93rem; max-width:560px; }
@media (max-width:620px){
  .timeline-row{ grid-template-columns:1fr; gap:0.5rem; }
}

/* Service detail rows (Services page) */
.service-detail{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:var(--space-5);
  padding-block:var(--space-6);
  border-top:1px solid var(--grey-300);
  align-items:center;
}
.service-detail.flip .sd-media{ order:2; }
.sd-media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-md); }
.sd-media img{ width:100%; height:100%; object-fit:cover; }
.sd-copy .eyebrow{ margin-bottom:1rem; }
.sd-copy h2{ margin-bottom:1rem; }
.sd-list{ display:flex; flex-direction:column; gap:0.85rem; margin:1.6rem 0; }
.sd-list li{ display:flex; gap:0.8rem; align-items:flex-start; font-size:0.95rem; }
.sd-list svg{ width:17px; height:17px; color:var(--brass); flex-shrink:0; margin-top:3px; }

@media (max-width:920px){
  .service-detail, .service-detail.flip{ grid-template-columns:1fr; }
  .service-detail.flip .sd-media{ order:0; }
}

/* Gallery filter + masonry */
.filter-row{
  display:flex; gap:0.7rem; flex-wrap:wrap;
  margin-bottom:var(--space-4);
}
.filter-btn{
  padding:0.65rem 1.3rem;
  border:1px solid var(--grey-300);
  border-radius:50px;
  font-size:0.85rem; font-weight:600;
  color:var(--slate);
  transition:all 0.3s ease;
}
.filter-btn:hover{ border-color:var(--navy); color:var(--navy); }
.filter-btn.is-active{ background:var(--navy); border-color:var(--navy); color:var(--white); }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.3rem;
}
.g-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  aspect-ratio:4/5;
  cursor:pointer;
}
.g-item.wide{ aspect-ratio:8/5; grid-column:span 2; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease-cinematic); }
.g-item:hover img{ transform:scale(1.08); }
.g-item .g-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,27,43,0.88));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.3rem;
  opacity:0; transition:opacity 0.4s ease;
}
.g-item:hover .g-overlay{ opacity:1; }
.g-overlay .tag{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass-light); margin-bottom:0.3rem; }
.g-overlay h4{ font-family:var(--font-body); font-size:1rem; color:var(--white); font-weight:600; }

@media (max-width:920px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .g-item.wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr; }
  .g-item.wide{ grid-column:span 1; aspect-ratio:4/5; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:900;
  background:rgba(11,27,43,0.96);
  display:none;
  align-items:center; justify-content:center;
  padding:5vh 5vw;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-height:88vh; max-width:100%; border-radius:var(--radius-md); }
.lightbox-close{
  position:absolute; top:2rem; right:2rem;
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--white);
}
.lightbox-close svg{ width:18px; height:18px; }

/* Contact page layout */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:var(--space-5);
  align-items:start;
}
.contact-info{ display:flex; flex-direction:column; gap:1.8rem; }
.info-row{ display:flex; gap:1rem; align-items:flex-start; }
.info-row .i-icon{
  width:44px; height:44px; flex-shrink:0;
  border:1px solid var(--grey-300);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--navy-soft);
}
.info-row .i-icon svg{ width:19px; height:19px; }
.info-row h4{ font-size:0.95rem; margin-bottom:0.3rem; }
.info-row p, .info-row a{ font-size:0.94rem; color:var(--slate); }
.info-row a:hover{ color:var(--navy); }
.hours-table{ width:100%; font-size:0.9rem; }
.hours-table tr{ border-bottom:1px solid var(--grey-100); }
.hours-table td{ padding:0.55rem 0; color:var(--slate); }
.hours-table td:last-child{ text-align:right; color:var(--navy); font-weight:600; }

.map-embed{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--grey-300);
}
.map-embed iframe{ width:100%; height:100%; border:0; }

@media (max-width:920px){
  .contact-layout{ grid-template-columns:1fr; }
}

/* Utility */
.text-center{ text-align:center; }
.mt-2{ margin-top:1rem; }
.mt-4{ margin-top:2.5rem; }
.divider{ height:1px; background:var(--grey-300); width:100%; }