/*
Theme Name: Soap Stone
Theme URI: https://soapstonehomes.com
Author: Soap Stone Construction
Description: Custom theme for Soap Stone Construction's three-path site (Hire a Pro / DIY Coaching / Home Care). Ported from the static build.py mockup.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: soapstone
*/

:root{
  --navy:#16232E; --slate:#3B5266; --copper:#B5651D; --concrete:#E8E4DD; --chalk:#F7F5F1;
  --ink:#1b1b1b; --muted:#7a766c; --line:#dcd8cf;
  --display:'Marcellus', serif; --body:'Inter', sans-serif; --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); color:var(--ink); background:var(--chalk); -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
ul{list-style:none;}

/* ===== utility bar ===== */
.utility{background:var(--navy); color:rgba(247,245,241,.75); font:500 11px/1 var(--mono); letter-spacing:.03em;}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 32px; gap:20px; flex-wrap:wrap;}
.utility .u-left{display:flex; gap:24px; flex-wrap:wrap;}
.utility .u-right{color:var(--copper); font-weight:500;}

/* ===== header ===== */
header{background:var(--chalk); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 32px;}
.logo img{height:38px; width:auto; display:block;}
nav{display:flex; align-items:center; gap:34px;}
nav a{font:600 13px var(--body); color:var(--slate); letter-spacing:.01em; transition:color .15s; position:relative;}
nav a:hover{color:var(--navy);}
nav a.active,
nav a.current-menu-item{color:var(--navy);}
nav a.active::after,
nav a.current-menu-item::after{content:''; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--copper);}
/* Header right-hand cluster: checkout link + (on mobile) the menu toggle.
   `order:3` keeps it hard right regardless of DOM position — the header is
   a space-between flex row, so without this the cluster becomes a middle
   child and lands in the empty space beside the logo. */
.header-actions{display:flex; align-items:center; gap:10px; order:3;}
header nav{order:2;}
header .logo{order:1;}
header .wrap{gap:20px;}

/* Site-wide checkout link. Sits quieter than the primary CTA on purpose —
   booking a consultation is the higher-value action on nearly every page;
   this is for people mid-purchase who need to get back to it. */
.cart-link{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 12px; border-radius:3px;
  border:1px solid var(--line); color:var(--slate);
  font:600 12.5px var(--body); transition:color .15s, border-color .15s;
}
.cart-link svg{width:18px; height:18px; flex-shrink:0;}
.cart-link:hover{color:var(--copper); border-color:var(--copper);}
.cart-link:focus-visible{outline:2px solid var(--copper); outline-offset:2px;}
@media (max-width:1100px){ .cart-link-label{display:none;} .cart-link{padding:0 11px;} }

/* Hamburger button — hidden on desktop, shown in the mobile media query. */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; /* 44px: minimum comfortable touch target */
  background:none; border:1px solid var(--line); border-radius:3px;
  cursor:pointer; padding:0; color:var(--navy);
}
.nav-toggle:focus-visible{outline:2px solid var(--copper); outline-offset:2px;}
.nav-toggle-bars{display:flex; flex-direction:column; gap:4px; width:18px;}
.nav-toggle-bars span{display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (prefers-reduced-motion: reduce){ .nav-toggle-bars span{transition:none;} }

.nav-cta{background:var(--navy); color:var(--chalk) !important; padding:11px 22px; border-radius:3px; font:600 13px var(--body) !important; transition:background .15s;}
.nav-cta:hover{background:var(--copper);}
.nav-cta.active::after{display:none;}

/* ===== buttons ===== */
.btn-primary{background:var(--copper); color:var(--chalk); padding:15px 28px; border-radius:3px; font:600 13.5px var(--body); letter-spacing:.01em; transition:background .15s, transform .15s; display:inline-block;}
.btn-primary:hover{background:#9a5518; transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(247,245,241,.35); color:var(--chalk); padding:14px 26px; border-radius:3px; font:600 13.5px var(--body); transition:border-color .15s, background .15s; display:inline-block;}
.btn-ghost:hover{border-color:var(--chalk); background:rgba(247,245,241,.06);}
.btn-navy{background:var(--navy); color:var(--chalk); padding:15px 28px; border-radius:3px; font:600 13.5px var(--body); letter-spacing:.01em; transition:background .15s, transform .15s; display:inline-block;}
.btn-navy:hover{background:var(--slate); transform:translateY(-1px);}
.btn-outline-navy{border:1px solid var(--navy); color:var(--navy); padding:14px 26px; border-radius:3px; font:600 13.5px var(--body); transition:all .15s; display:inline-block;}
.btn-outline-navy:hover{background:var(--navy); color:var(--chalk);}

/* ===== generic section head ===== */
.section-head{max-width:620px; margin:0 0 44px;}
.section-head.center{text-align:center; margin:0 auto 44px;}
.eyebrow{font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--copper);}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}
.eyebrow.on-dark{color:#E9A468;}
.section-head h2{font-family:var(--display); font-weight:400; font-size:32px; color:var(--navy); line-height:1.25;}
.section-head.on-dark h2{color:var(--chalk);}
.section-head p{font:400 15px/1.6 var(--body); color:var(--muted); margin-top:14px;}
.section-head.on-dark p{color:#C7CDD3;}

/* ===== hero (dark / navy) ===== */
.hero{position:relative; background:var(--navy); overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; padding:76px 32px 92px;}
.hero.no-media .wrap{grid-template-columns:1fr; max-width:760px;}
.hero h1{font-family:var(--display); font-size:48px; line-height:1.1; color:var(--chalk); font-weight:400; letter-spacing:.005em; max-width:580px;}
.hero h1 em{font-style:normal; color:var(--copper);}
.hero p.lede{font:400 16px/1.65 var(--body); color:#C7CDD3; margin:22px 0 32px; max-width:480px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap;}
.stat-row{display:flex; gap:36px; border-top:1px solid rgba(247,245,241,.16); padding-top:24px; flex-wrap:wrap;}
.stat{font-family:var(--mono);}
.stat .num{font-size:21px; color:var(--chalk); font-weight:500; display:block;}
.stat .label{font-size:10.5px; color:rgba(247,245,241,.55); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; display:block;}

.hero-media{position:relative; aspect-ratio:4/4.6; border-radius:4px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); background:linear-gradient(135deg, #2a3d4d 0%, #1c2c38 55%, #16232E 100%);}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,35,46,0) 45%, rgba(22,35,46,.7) 100%);}
.hero-media .tag{position:absolute; bottom:20px; left:20px; right:20px; z-index:2; font:500 11px var(--mono); color:var(--chalk); display:flex; justify-content:space-between; letter-spacing:.03em;}
.hero-media .tag span:last-child{color:var(--concrete); opacity:.8;}

/* ===== hero full-bleed variant (photo behind copy) ===== */
.hero.fullbleed{padding:0;}
.hero.fullbleed .hero-bg{position:absolute; inset:0; z-index:0;}
.hero.fullbleed .hero-bg img{width:100%; height:100%; object-fit:cover; display:block;}
.hero.fullbleed .hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(22,35,46,.97) 0%, rgba(22,35,46,.9) 34%, rgba(22,35,46,.6) 58%, rgba(22,35,46,.22) 80%, rgba(22,35,46,.05) 100%);}
.hero.fullbleed .wrap{position:relative; z-index:2; grid-template-columns:1fr; max-width:920px; padding:132px 32px 150px;}
.hero.fullbleed h1{font-size:58px; max-width:640px;}
.hero.fullbleed .hero-photocred{position:relative; z-index:2; padding:0 32px 28px; text-align:right; font:500 11px var(--mono); color:rgba(247,245,241,.6); letter-spacing:.04em; margin-top:-40px;}

@keyframes heroPan{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.hero.pan-bg{background:linear-gradient(120deg, #1c2c38, #16232E, #24384a, #16232E); background-size:300% 300%; animation:heroPan 16s ease-in-out infinite;}
@keyframes ringPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
.hero-media.ring-dark .ring{animation:ringPulse 6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){ .hero.pan-bg, .hero-media.ring-dark .ring, .hero-media.ring-dark.circle::after{animation:none !important;} }

.hero-media.graphic{background:
    repeating-linear-gradient(0deg, rgba(247,245,241,.05) 0px, rgba(247,245,241,.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(247,245,241,.05) 0px, rgba(247,245,241,.05) 1px, transparent 1px, transparent 40px),
    linear-gradient(135deg, #24384a 0%, #1a2b38 55%, #16232E 100%);
  display:flex; align-items:center; justify-content:center;}
.hero-media.graphic .glyph{font-family:var(--display); font-size:120px; color:rgba(247,245,241,.08); line-height:1;}
.hero-media.graphic .tag{color:var(--chalk);}

.hero-media.circle{border-radius:50%; aspect-ratio:1/1;}
.hero-media.ring-dark{
  background:
    radial-gradient(circle at 50% 46%, rgba(247,245,241,.14) 0%, rgba(247,245,241,.05) 32%, rgba(247,245,241,0) 58%),
    linear-gradient(135deg, #2a3d4d 0%, #1c2c38 55%, #16232E 100%);
  display:flex; align-items:center; justify-content:center;}
.hero-media.ring-dark::after{display:none;}
.hero-media.ring-dark.circle::after{content:''; display:block; position:absolute; inset:3%; border-radius:50%; border:1.5px solid var(--copper); opacity:.5; pointer-events:none; animation:ringPulse 6s ease-in-out infinite;}
.hero-media.ring-dark .ring{
  width:74%; aspect-ratio:1; border-radius:50%; border:2px solid var(--copper);
  background:radial-gradient(circle, rgba(247,245,241,.14) 0%, rgba(247,245,241,.04) 65%, rgba(247,245,241,0) 100%);
  box-shadow:0 0 46px 6px rgba(247,245,241,.10), inset 0 0 30px rgba(247,245,241,.06);
  display:flex; align-items:center; justify-content:center; position:relative;}
.hero-media.ring-dark .ring::before{content:''; position:absolute; inset:6.76%; border-radius:50%; border:1px solid rgba(232,228,221,.4);}
.hero-media.ring-dark .ring::after{content:''; position:absolute; inset:-6.76%; border-radius:50%; border:1px solid rgba(232,228,221,.22);}
.hero-media.ring-dark .ring .center{font-family:var(--display); color:var(--chalk); font-size:28px; text-align:center; line-height:1.35; padding:0 10px;}
.hero-media.ring-dark .ring .center span{display:block; font:500 13.5px var(--mono); color:var(--concrete); letter-spacing:.08em; text-transform:uppercase; margin-top:10px;}

/* ===== DIY hero with flanking kit covers (template-diy-coach.php) =====
   The no-media hero is a single centred column, which left a lot of empty
   gradient on either side at desktop width. These columns fill it with the
   actual paid products. Covers are decorative here (the real product cards
   with names and prices live further down the page), so they carry empty
   alt text and are hidden from assistive tech — but they still link to the
   kits section rather than being inert. */
.hero.hero-flanked .wrap{
  display:grid; grid-template-columns:auto minmax(0,760px) auto;
  gap:40px; align-items:center; justify-content:center;
  max-width:1320px; padding:76px 32px 84px;
}
.hero.hero-flanked .hero-copy{max-width:760px;}
.hero-kits{display:flex; flex-direction:column; gap:26px; width:190px;}
.hero-kits--left{align-items:flex-end;}
.hero-kits--right{align-items:flex-start;}
.hero-kit{
  display:block; width:170px; border-radius:3px; overflow:hidden;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.65);
  border:1px solid rgba(247,245,241,.14);
  transition:transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s;
}
.hero-kit img{width:100%; height:auto; display:block;}
/* Slight opposing tilts + vertical offsets so it reads as stacked covers
   rather than a rigid grid.
   The diagonal is deliberate: the inward-nudged card is the LOWER one on
   the left and the UPPER one on the right, which keeps the composition
   from feeling like a static mirror.
   The tilt magnitudes, though, are matched by position rather than by
   card: whichever card defines a group's OUTER edge is tilted 4deg on
   both sides. When they weren't, the steeper tilt on the left threw a
   wider bounding box and pushed that group ~17px closer to the screen
   edge than its counterpart — an accidental imbalance, not the intended
   diagonal. */
.hero-kits--left  .hero-kit:nth-child(1){transform:rotate(-4deg);}
.hero-kits--left  .hero-kit:nth-child(2){transform:rotate(2.5deg) translateX(18px);}
.hero-kits--right .hero-kit:nth-child(1){transform:rotate(2.5deg) translateX(-18px);}
.hero-kits--right .hero-kit:nth-child(2){transform:rotate(-4deg);}
.hero-kit:hover{transform:rotate(0deg) translateY(-6px) scale(1.03); box-shadow:0 30px 56px -18px rgba(0,0,0,.75);}
@media (prefers-reduced-motion: reduce){ .hero-kit{transition:none;} }
/* Below this width there isn't room for the covers without squeezing the
   copy, so they come out entirely rather than shrinking to noise. */
@media (max-width:1100px){
  .hero.hero-flanked .wrap{grid-template-columns:1fr; max-width:760px;}
  .hero-kits{display:none;}
}

.badge-soon{display:inline-flex; align-items:center; gap:8px; background:var(--chalk); border:1px solid var(--copper); color:var(--copper); font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:99px; margin-bottom:22px;}
.badge-soon::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--copper);}

/* ===== path selector ===== */
.paths{background:var(--chalk); position:relative;}
.paths-head{text-align:center; max-width:640px; margin:0 auto; padding:84px 32px 8px;}
.plan-line{position:relative; height:1px; background:var(--line); max-width:1136px; margin:52px auto 0;}
.path-grid{max-width:1200px; margin:0 auto; padding:0 32px 96px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; top:-1px;}
.path-card{background:var(--chalk); border:1px solid var(--line); border-top:3px solid var(--slate); padding:34px 30px 32px; position:relative; transition:transform .2s, box-shadow .2s, border-color .2s;}
.path-card + .path-card{border-left:none;}
.path-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(22,35,46,.18); z-index:2;}
.path-card.live{border-top-color:var(--copper);}
.path-card .status{position:absolute; top:-11px; left:30px; background:var(--chalk); padding:0 8px; font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--copper);}
.path-card.soon .status{color:var(--muted);}
.path-card .p-eyebrow{font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
.path-card h3{font-family:var(--display); font-size:23px; font-weight:400; color:var(--navy); margin-bottom:12px;}
.path-card p{font:400 13.5px/1.6 var(--body); color:var(--muted); margin-bottom:24px; min-height:64px;}
.path-card .p-link{font:600 12.5px var(--body); color:var(--navy); display:inline-flex; align-items:center; gap:7px; transition:gap .15s, color .15s;}
.path-card .p-link svg{width:13px; height:13px; transition:transform .15s;}
.path-card:hover .p-link{gap:11px; color:var(--copper);}
.path-card.soon{opacity:.85;}

/* ===== generic card grid ===== */
.grid-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:0 0 8px;}
.grid-cards.cols-3{grid-template-columns:repeat(3,1fr);}
.grid-cards.cols-2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--chalk); border:1px solid var(--line); padding:28px 24px; transition:transform .2s, box-shadow .2s;}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(22,35,46,.2);}
.card .c-num{font:600 11px var(--mono); color:var(--copper); letter-spacing:.06em; margin-bottom:14px; display:block;}
.card h4{font-family:var(--display); font-size:19px; font-weight:400; color:var(--navy); margin-bottom:10px;}
.card p{font:400 13.5px/1.6 var(--body); color:var(--muted);}

/* ===== process steps ===== */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps .step{padding:30px 22px; border-left:1px solid var(--line);}
.steps .step:first-child{border-left:none;}
.steps .step .s-num{font:600 20px var(--mono); color:var(--copper); display:block; margin-bottom:12px;}
.steps .step h5{font-family:var(--display); font-size:16px; font-weight:400; color:var(--navy); margin-bottom:8px;}
.steps .step p{font:400 12.5px/1.55 var(--body); color:var(--muted);}

/* ===== proof / testimonial ===== */
.proof{background:var(--navy); padding:64px 32px;}
.proof .wrap{display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:center;}
.proof blockquote{font-family:var(--display); font-size:24px; line-height:1.4; color:var(--chalk); font-weight:400; position:relative; z-index:1;}
.proof blockquote::before{content:'\201C'; position:absolute; top:-46px; left:-6px; font-family:var(--display); font-size:110px; color:var(--copper); opacity:.22; line-height:1; z-index:0;}
.proof cite{display:block; font:500 12px var(--mono); color:var(--copper); margin-top:16px; font-style:normal;}
.proof .badges{display:flex; gap:32px; font-family:var(--mono); margin-top:32px; border-top:1px solid rgba(247,245,241,.16); padding-top:26px; flex-wrap:wrap;}
.proof .badges .b-num{font-size:24px; color:var(--chalk); display:block;}
.proof .badges .b-label{font-size:9.5px; color:rgba(247,245,241,.55); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; display:block;}
.proof-media{border-radius:4px; overflow:hidden; box-shadow:0 24px 50px -18px rgba(0,0,0,.55); position:relative;}
.proof-media img{width:100%; height:340px; object-fit:cover; display:block;}
.proof-media .p-tag{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, rgba(22,35,46,.85), transparent); padding:14px 16px 10px; font:500 10px var(--mono); color:var(--chalk); letter-spacing:.03em;}

/* ===== service area strip ===== */
.service-area{background:var(--concrete); padding:44px 32px;}
.service-area .wrap{display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between;}
.service-area .sa-label{font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); white-space:nowrap;}
.service-area .sa-cities{display:flex; gap:10px 22px; flex-wrap:wrap; font:400 13px var(--body); color:var(--ink);}
.service-area .sa-cities span{color:var(--muted);}

/* ===== pricing / membership tiers ===== */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.tier-card{background:var(--chalk); border:1px solid var(--line); border-top:3px solid var(--slate); padding:32px 28px; position:relative; display:flex; flex-direction:column;}
.tier-card.ring-copper{border-top-color:var(--copper);}
.tier-card.ring-navy{border-top-color:var(--navy);}
.tier-card .t-name{font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:block;}
.tier-card h4{font-family:var(--display); font-size:24px; font-weight:400; color:var(--navy); margin-bottom:6px;}
.tier-card .t-price{font:600 13px var(--mono); color:var(--copper); margin-bottom:18px; display:block;}
.tier-card .t-feat{list-style:none; padding:18px 0 0; margin-top:18px; border-top:1px solid var(--line);}
.tier-card .t-feat li{font:400 13px/1.7 var(--body); color:var(--muted); padding-left:18px; position:relative;}
.tier-card .t-feat li::before{content:'\2014'; position:absolute; left:0; color:var(--copper);}
.tier-card .btn-navy, .tier-card .btn-outline-navy{width:100%; text-align:center; margin-top:auto;}
.tier-card > p{margin-top:14px;}

/* ===== FAQ ===== */
.faq{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-item h5{font-family:var(--display); font-size:17px; font-weight:400; color:var(--navy); margin-bottom:8px;}
.faq-item p{font:400 13.5px/1.65 var(--body); color:var(--muted);}

/* ===== cross-link band ===== */
.crosslinks{background:var(--concrete); padding:64px 32px;}
.crosslinks .cl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1136px; margin:0 auto;}
.cl-card{background:var(--chalk); border:1px solid var(--line); padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; transition:transform .2s, box-shadow .2s;}
.cl-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(22,35,46,.2);}
.cl-card .cl-text .cl-eyebrow{font:600 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block;}
.cl-card .cl-text h5{font-family:var(--display); font-size:18px; font-weight:400; color:var(--navy);}
.cl-card .p-link{font:600 12.5px var(--body); color:var(--navy); display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.cl-card .p-link svg{width:13px; height:13px;}

/* ===== scroll-reveal =====
   Only hide .reveal content when JS is confirmed running (the `js` class is
   set by an inline script in header.php). Without that gate, any JS failure
   leaves whole sections permanently invisible at opacity:0. */
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);}
.js .reveal.in-view{opacity:1; transform:none;}
/* Applied by reveal.js's fallback timer — forces visibility without relying
   on the transition, for contexts where transitions/rAF don't run at all. */
.js .reveal.reveal-shown{opacity:1 !important; transform:none !important; transition:none !important;}
.grid-cards .reveal:nth-child(1){transition-delay:.03s;}
.grid-cards .reveal:nth-child(2){transition-delay:.10s;}
.grid-cards .reveal:nth-child(3){transition-delay:.17s;}
.grid-cards .reveal:nth-child(4){transition-delay:.24s;}
.steps .reveal:nth-child(1){transition-delay:.03s;}
.steps .reveal:nth-child(2){transition-delay:.09s;}
.steps .reveal:nth-child(3){transition-delay:.15s;}
.steps .reveal:nth-child(4){transition-delay:.21s;}
.steps .reveal:nth-child(5){transition-delay:.27s;}
.path-grid .reveal:nth-child(1){transition-delay:.03s;}
.path-grid .reveal:nth-child(2){transition-delay:.12s;}
.path-grid .reveal:nth-child(3){transition-delay:.21s;}
.tiers .reveal:nth-child(1){transition-delay:.03s;}
.tiers .reveal:nth-child(2){transition-delay:.12s;}
.tiers .reveal:nth-child(3){transition-delay:.21s;}
.cl-grid .reveal:nth-child(1){transition-delay:.03s;}
.cl-grid .reveal:nth-child(2){transition-delay:.12s;}
.gallery .reveal:nth-child(1){transition-delay:.03s;}
.gallery .reveal:nth-child(2){transition-delay:.08s;}
.gallery .reveal:nth-child(3){transition-delay:.13s;}
.gallery .reveal:nth-child(4){transition-delay:.18s;}
.gallery .reveal:nth-child(5){transition-delay:.23s;}
.gallery .reveal:nth-child(6){transition-delay:.28s;}
.gallery .reveal:nth-child(7){transition-delay:.33s;}
.gallery .reveal:nth-child(8){transition-delay:.38s;}
.gallery .reveal:nth-child(9){transition-delay:.43s;}
.gallery .reveal:nth-child(10){transition-delay:.48s;}
.gallery .reveal:nth-child(11){transition-delay:.53s;}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1 !important; transform:none !important; transition:none !important;} }

/* ===== icon-topped cards ===== */
.card .c-icon{width:30px; height:30px; color:var(--copper); margin-bottom:16px; display:block;}

/* ===== project gallery ===== */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery .g-item{aspect-ratio:4/3; overflow:hidden; position:relative; border-radius:2px;}
.gallery .g-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery .g-item:hover img{transform:scale(1.06);}
.gallery .g-item .g-tag{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, rgba(22,35,46,.88), transparent); padding:22px 14px 10px; font:500 10.5px var(--mono); color:var(--chalk); letter-spacing:.03em; opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s;}
.gallery .g-item:hover .g-tag{opacity:1; transform:translateY(0);}
.gallery .g-placeholder{background:var(--concrete); border:1px dashed var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted);}
.gallery .g-placeholder svg{width:26px; height:26px; opacity:.55;}
.gallery .g-placeholder span{font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase;}

/* ===== inquiry / signup forms ===== */
.inquiry-form{background:var(--chalk); border:1px solid var(--line); padding:44px 40px; max-width:640px; margin:0 auto;}
.inquiry-form .f-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.inquiry-form .f-field{display:flex; flex-direction:column; gap:8px;}
.inquiry-form .f-field.full{grid-column:1/-1; margin-bottom:18px;}
.inquiry-form label{font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate);}
.inquiry-form input, .inquiry-form select, .inquiry-form textarea{font:400 14px var(--body); color:var(--ink); background:var(--chalk); border:1px solid var(--line); padding:12px 14px; border-radius:2px; transition:border-color .15s; width:100%;}
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus{outline:none; border-color:var(--copper);}
.inquiry-form textarea{resize:vertical; min-height:90px; font-family:var(--body);}
.inquiry-form button{width:100%; margin-top:6px; border:none; cursor:pointer;}
.inquiry-form .f-note{font:400 12px/1.6 var(--body); color:var(--muted); margin-top:18px; text-align:center;}
.inquiry-form .f-note a{color:var(--copper); font-weight:600;}
/* Honeypot — hidden from people, visible to bots. Not display:none, since
   some bots skip those; positioned off-canvas instead. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Post-submission banner (see inc/forms.php) */
.form-notice{text-align:center; padding:12px 0;}
.form-notice .c-icon{width:36px; height:36px; color:var(--copper); margin:0 auto 16px;}
.form-notice h4{font-family:var(--display); font-size:21px; font-weight:400; color:var(--navy); margin-bottom:10px;}
.form-notice p{font:400 13.5px/1.65 var(--body); color:var(--muted); max-width:420px; margin:0 auto;}
.form-notice p a{color:var(--copper); font-weight:600;}
.form-notice--error h4{color:#8a3324;}

.f-success{text-align:center; padding:12px 0;}
.f-success .c-icon{width:36px; height:36px; color:var(--copper); margin:0 auto 16px;}
.f-success h4{font-family:var(--display); font-size:21px; font-weight:400; color:var(--navy); margin-bottom:10px;}
.f-success p{font:400 13.5px/1.65 var(--body); color:var(--muted); max-width:420px; margin:0 auto;}
@media (max-width:640px){ .inquiry-form{padding:32px 24px;} .inquiry-form .f-row{grid-template-columns:1fr;} }

/* ===== document / product cards ===== */
.doc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0 0 8px;}
.doc-card{background:var(--chalk); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.doc-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,35,46,.08);}
.doc-card .doc-cover{aspect-ratio:1/1; overflow:hidden; background:var(--navy);}
.doc-card .doc-cover img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.doc-card:hover .doc-cover img{transform:scale(1.03);}
.doc-card .doc-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1;}
.doc-card .doc-body h4{margin-bottom:8px;}
.doc-card .doc-body p{flex:1;}
.doc-card .doc-price{font:600 20px var(--mono); color:var(--navy); margin:10px 0 16px;}
.doc-card .doc-price.tbd{font:600 13px var(--mono); color:var(--slate); text-transform:uppercase; letter-spacing:.05em;}
.doc-card .doc-buy{width:100%; text-align:center;}
.doc-grid .reveal:nth-child(1){transition-delay:.03s;}
.doc-grid .reveal:nth-child(2){transition-delay:.10s;}
.doc-grid .reveal:nth-child(3){transition-delay:.17s;}
.doc-grid .reveal:nth-child(4){transition-delay:.24s;}
.doc-grid .reveal:nth-child(5){transition-delay:.31s;}
@media (max-width:900px){ .doc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .doc-grid{grid-template-columns:1fr;} }

/* ===== task price picker ===== */
.price-tool{max-width:820px; margin:0 auto;}
.price-search{position:relative; margin-bottom:28px;}
.price-search input{width:100%; font:400 15px var(--body); color:var(--ink); background:var(--chalk); border:1px solid var(--line); padding:14px 16px 14px 44px; border-radius:3px; transition:border-color .15s;}
.price-search input:focus{outline:none; border-color:var(--copper);}
.price-search svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none;}
.price-summary{position:sticky; top:66px; z-index:10; background:var(--navy); color:var(--chalk); border-radius:3px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; box-shadow:0 10px 24px rgba(22,35,46,.14);}
.price-summary .ps-info{font:400 13.5px var(--body); color:#C7CDD3;}
.price-summary .ps-info strong{color:var(--chalk); font-weight:600;}
.price-summary .ps-total{font:600 22px var(--mono); color:var(--chalk); white-space:nowrap;}
.price-summary .ps-total span{font-size:13px; color:#C7CDD3; font-weight:400; margin-right:8px;}
.price-summary .btn-primary{padding:11px 20px; font-size:12.5px; opacity:.4; pointer-events:none; transition:opacity .15s;}
.price-summary.has-items .btn-primary{opacity:1; pointer-events:auto;}
.price-cat{border-bottom:1px solid var(--line);}
.price-cat summary{list-style:none; display:flex; align-items:center; justify-content:space-between; padding:18px 4px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.price-cat summary::-webkit-details-marker{display:none;}
.price-cat summary .pc-name{font-family:var(--display); font-size:18px; color:var(--navy); display:flex; align-items:center; gap:12px;}
.price-cat summary .pc-count{font:500 11px var(--mono); color:var(--muted); background:var(--concrete); padding:3px 9px; border-radius:20px;}
.price-cat summary .pc-chevron{width:16px; height:16px; color:var(--muted); transition:transform .2s; flex-shrink:0;}
.price-cat[open] summary .pc-chevron{transform:rotate(180deg);}
.price-cat.has-selection{background:rgba(181,101,29,.045);}
.price-cat.has-selection summary .pc-name{color:var(--copper);}
.price-cat.has-selection summary .pc-name::after{content:''; width:7px; height:7px; border-radius:50%; background:var(--copper); display:inline-block;}
.price-cat.has-selection summary .pc-count{background:var(--copper); color:var(--chalk);}
.price-cat .pc-list{padding:0 4px 14px;}
.price-row{display:flex; align-items:center; gap:14px; padding:13px 8px; border-radius:2px; cursor:pointer; transition:background .12s;}
.price-row:hover{background:var(--concrete);}
.price-row.selected{background:rgba(181,101,29,.08);}
.price-row input[type="checkbox"]{width:19px; height:19px; accent-color:var(--copper); flex-shrink:0; cursor:pointer;}
.price-row .pr-name{flex:1; min-width:0;}
.price-row .pr-name strong{display:block; font:500 14px var(--body); color:var(--ink);}
.price-row .pr-name span{display:block; font:400 12px/1.4 var(--body); color:var(--muted); margin-top:2px;}
.price-row .pr-price{font:600 14px var(--mono); color:var(--navy); white-space:nowrap;}
.price-row.hidden{display:none;}
.price-cat.hidden{display:none;}
.price-note{font:400 12.5px/1.6 var(--body); color:var(--muted); text-align:center; margin-top:28px;}
@media (max-width:640px){ .price-summary{position:static;} }

/* ===== deposit checkout (new — Path C) ===== */
.price-summary .ps-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.price-summary .btn-navy{padding:11px 20px; font-size:12.5px; opacity:.4; pointer-events:none; transition:opacity .15s;}
.price-summary.has-items .btn-navy{opacity:1; pointer-events:auto;}
.price-summary .ps-deposit-note{width:100%; font:400 11.5px var(--body); color:#C7CDD3; margin-top:2px;}

/* ===== reviews grid (template-parts/reviews.php) ===== */
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.review-card{background:var(--chalk); border:1px solid var(--line); padding:28px 26px; margin:0; display:flex; flex-direction:column;}
.review-card .r-stars{color:var(--copper); font-size:15px; letter-spacing:.12em; margin-bottom:14px;}
.review-card blockquote{font:400 13.5px/1.7 var(--body); color:var(--ink); margin:0 0 18px; flex:1;}
.review-card figcaption{border-top:1px solid var(--line); padding-top:14px;}
.review-card .r-name{display:block; font:600 13px var(--body); color:var(--navy);}
.review-card .r-meta{display:block; font:500 10.5px var(--mono); color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-top:4px;}
.reviews-grid .reveal:nth-child(1){transition-delay:.03s;}
.reviews-grid .reveal:nth-child(2){transition-delay:.12s;}
.reviews-grid .reveal:nth-child(3){transition-delay:.21s;}
@media (max-width:980px){ .reviews-grid{grid-template-columns:1fr;} }

/* ===== legal page prose (template-legal.php) ===== */
.legal-content{font:400 15.5px/1.7 var(--body); color:var(--ink);}
.legal-content h2{font-family:var(--display); font-weight:400; font-size:24px; color:var(--navy); margin:40px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-family:var(--body); font-weight:600; font-size:15.5px; color:var(--navy); margin:26px 0 10px;}
.legal-content p{margin-bottom:16px;}
.legal-content ul{list-style:disc; padding-left:22px; margin-bottom:16px;}
.legal-content ul li{margin-bottom:8px;}
.legal-content a{color:var(--copper); font-weight:600; text-decoration:underline;}
.legal-content strong{color:var(--navy);}
.legal-content .legal-updated{font:500 12px var(--mono); color:var(--muted); letter-spacing:.03em; margin-bottom:32px; display:block;}

/* ===== city page prose (single-city.php) ===== */
.svc-label{font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:26px 0 12px;}
.svc-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.svc-list li{font:400 14.5px/1.6 var(--body); color:var(--ink); padding-left:20px; position:relative;}
.svc-list li::before{content:''; position:absolute; left:0; top:9px; width:8px; height:1.5px; background:var(--copper);}
.cta-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* ===== CTA band ===== */
.cta-band{background:var(--navy); padding:72px 32px; text-align:center;}
.cta-band .cta-logo{height:22px; margin:0 auto 26px; opacity:.92;}
.cta-band h2{font-family:var(--display); font-weight:400; font-size:30px; color:var(--chalk); max-width:600px; margin:0 auto 14px;}
.cta-band p{font:400 15px/1.6 var(--body); color:#C7CDD3; max-width:520px; margin:0 auto 32px;}

/* ===== section wrapper spacing ===== */
.section{padding:88px 32px;}
.section.tight{padding:72px 32px;}
.section.bg-concrete{background:var(--concrete);}
.section.bg-navy{background:var(--navy);}

/* ===== footer ===== */
footer{background:var(--chalk); border-top:1px solid var(--line); padding:44px 32px; text-align:center;}
footer .f-logo img{height:26px; margin:0 auto 14px;}
footer p{font:500 11px var(--mono); color:var(--muted); margin-top:10px; letter-spacing:.02em;}
footer .f-links{display:flex; justify-content:center; gap:22px; margin-top:18px; flex-wrap:wrap;}
footer .f-links a{font:500 11px var(--mono); color:var(--slate); letter-spacing:.03em;}
footer .f-links a:hover{color:var(--copper);}
footer .note{margin-top:22px; font:400 11px var(--body); color:#b3ada0; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6;}

@media (max-width: 980px){
  .hero .wrap{grid-template-columns:1fr; padding:52px 24px 56px;}
  .hero h1{font-size:34px;}
  .hero-media{order:-1; aspect-ratio:16/10;}

  /* Mobile nav: collapsed panel under the sticky header, opened by the
     hamburger button. Replaces the mockup's plain `display:none`, which
     left phone users with no navigation at all. */
  .nav-toggle{display:flex;}
  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--chalk); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px;
    box-shadow:0 18px 30px -18px rgba(22,35,46,.28);
  }
  nav.is-open{display:flex;}
  nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:15px;}
  nav a::after{display:none !important;}
  nav a:last-of-type{border-bottom:none;}
  .nav-cta{margin-top:14px; text-align:center; font-size:14px !important; padding:14px 22px;}
  .path-grid{grid-template-columns:1fr; padding:0 24px 64px;}
  .path-card{border-left:1px solid var(--line) !important; border-top:3px solid var(--slate) !important;}
  .path-card.live{border-top-color:var(--copper) !important;}
  .proof .wrap{flex-direction:column; align-items:flex-start; display:flex;}
  .proof-media{width:100%;}
  .grid-cards, .grid-cards.cols-3, .grid-cards.cols-2{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .steps .step:nth-child(odd){border-left:none;}
  .tiers{grid-template-columns:1fr;}
  .service-area .wrap{flex-direction:column; align-items:flex-start;}
  .crosslinks .cl-grid{grid-template-columns:1fr;}
  .hero.fullbleed .wrap{padding:76px 24px 64px;}
  .hero.fullbleed h1{font-size:34px;}
  .hero.fullbleed .hero-photocred{margin-top:-24px; padding:0 24px 20px;}
  .gallery{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }

/* mockup-only flag — remove for production */
.mockup-flag{display:none;}

/* ===== service area hub (template-service-area.php) ===== */
.area-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.area-card{background:var(--chalk); border:1px solid var(--line); border-top:3px solid var(--slate); padding:22px 20px; display:flex; flex-direction:column; gap:2px; transition:transform .2s, box-shadow .2s, border-color .2s;}
.area-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(22,35,46,.2); border-top-color:var(--copper);}
.area-card .a-city{font-family:var(--display); font-size:20px; color:var(--navy);}
.area-card .a-state{font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.area-card .a-link{margin-top:14px; font:600 11.5px var(--body); color:var(--slate); display:inline-flex; align-items:center; gap:6px; transition:gap .15s, color .15s;}
.area-card .a-link svg{width:12px; height:12px;}
.area-card:hover .a-link{gap:10px; color:var(--copper);}
@media (max-width:980px){ .area-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .area-grid{grid-template-columns:1fr;} }

/* ===== free guides / lead magnets (template-parts/guides.php) ===== */
.guide-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:900px; margin:0 auto;}
.guide-card{background:var(--chalk); border:1px solid var(--line); border-top:3px solid var(--copper); padding:30px 28px; display:flex; flex-direction:column;}
.guide-card .g-icon{width:34px; height:34px; color:var(--copper); margin-bottom:16px;}
.guide-card .g-icon svg{width:100%; height:100%;}
.guide-card h4{font-family:var(--display); font-size:20px; font-weight:400; color:var(--navy); margin-bottom:10px;}
.guide-card p{font:400 13.5px/1.65 var(--body); color:var(--muted); margin-bottom:20px; flex:1;}
.guide-form{display:flex; flex-direction:column; gap:10px;}
.guide-form input{font:400 14px var(--body); color:var(--ink); background:var(--chalk); border:1px solid var(--line); padding:12px 14px; border-radius:2px; width:100%; transition:border-color .15s;}
.guide-form input:focus{outline:none; border-color:var(--copper);}
.guide-form button{width:100%; text-align:center; border:none; cursor:pointer;}
.guide-confirm{text-align:center; max-width:520px; margin:0 auto; background:var(--chalk); border:1px solid var(--line); padding:36px 32px;}
.guide-confirm .c-icon{width:38px; height:38px; color:var(--copper); margin:0 auto 16px;}
.guide-confirm h4{font-family:var(--display); font-size:22px; font-weight:400; color:var(--navy); margin-bottom:10px;}
.guide-confirm p{font:400 13.5px/1.65 var(--body); color:var(--muted); margin-bottom:14px;}
.guide-error{text-align:center; color:#8a3324; font:500 13.5px var(--body); margin-bottom:24px;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}
@media (max-width:760px){ .guide-grid{grid-template-columns:1fr;} }