/* ==========================================================================
   Texan Home Additions — v1 design system (home page)
   Self-contained: does NOT depend on styles.css. Rolls out page-by-page.
   Palette + fonts carried over from the brand; layout is the new v1 look.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:'Overpass';   font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/overpass.woff2') format('woff2'); }
@font-face { font-family:'Montserrat';  font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/montserrat.woff2') format('woff2'); }

:root {
  --red:#ae1c29; --red-dark:#8f1621; --crimson:#bc0a3e;
  --indigo:#3e4095; --indigo-dark:#313370; --blue-submit:#1281d6;
  --beige:#e2dbd4; --beige-light:#f3efeb;
  --ink:#23262e; --body-text:#4b4f58; --muted:#6d727c;
  --line:#e7e2dc; --white:#fff;
  --container:1200px;
  --font-body:'Overpass',sans-serif; --font-heading:'Montserrat',sans-serif;
  --shadow-sm:0 2px 10px rgba(20,15,10,.06);
  --shadow-md:0 14px 40px rgba(20,15,10,.14);
  --shadow-lg:0 30px 70px rgba(20,15,10,.22);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); font-size:17px; font-weight:400; line-height:1.75; color:var(--body-text); background:var(--white); }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
ul{ margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-heading); margin:0 0 .5em; line-height:1.15; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
em{ font-style:italic; color:var(--red); }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 22px; }
.container.center{ text-align:center; }
.kicker{ font-family:var(--font-heading); font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.section-title{ font-size:clamp(28px,3.4vw,42px); color:var(--ink); margin:0 0 16px; }
.container.center .section-title{ margin-left:auto; margin-right:auto; max-width:20ch; }
.section-intro{ font-size:18px; color:var(--muted); max-width:60ch; margin:0 auto 8px; }
.container:not(.center) .section-intro{ margin-left:0; }
.micro{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:6px; letter-spacing:.01em; }
.opt{ color:var(--muted); font-weight:400; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1;
  padding:16px 30px; border:2px solid transparent; border-radius:6px; cursor:pointer; text-align:center; letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s, color .2s, border-color .2s; }
.btn-red{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 8px 22px rgba(174,28,41,.28); }
.btn-red:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(174,28,41,.34); }
.btn-indigo{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.btn-indigo:hover{ background:var(--indigo-dark); border-color:var(--indigo-dark); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.site-header{ position:relative; z-index:100; background:#fff; box-shadow:var(--shadow-sm); }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:var(--container); margin:0 auto; padding:14px 22px; }
.header-logo img{ width:210px; height:auto; }
.header-call{ text-align:right; }
.header-call .btn{ padding:13px 22px; }
.header-band{ background:var(--ink); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; text-align:center; padding:9px 15px; }
.header-band .sep{ color:var(--red); margin:0 12px; }
.header-band .band-extra .sep{ margin:0 12px; }

/* red nav band */
.main-nav{ background:var(--red); }
.main-nav .nav-inner{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:center; padding:0 22px; }
.main-nav ul{ list-style:none; display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
.main-nav a{ color:#fff; font-family:var(--font-heading); font-weight:700; font-size:14.5px; letter-spacing:.02em; padding:15px 18px; display:block; }
.main-nav a:hover,.main-nav a.active{ background:rgba(0,0,0,.16); color:#fff; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; cursor:pointer; padding:12px 15px; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:''; display:block; width:24px; height:2px; background:#fff; position:relative; transition:.3s; }
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
.main-nav .has-dropdown{ position:relative; }
.main-nav .has-dropdown>a .caret{ display:inline-block; margin-left:5px; font-size:11px; vertical-align:middle; transition:transform .2s; }
.main-nav .has-dropdown:hover>a .caret,.main-nav .has-dropdown:focus-within>a .caret{ transform:rotate(180deg); }
.main-nav .dropdown-menu{ list-style:none; position:absolute; top:100%; left:0; min-width:240px; background:var(--red); box-shadow:var(--shadow-md); padding:6px 0; margin:0; display:none; flex-direction:column; z-index:60; }
.main-nav .has-dropdown:hover>.dropdown-menu,.main-nav .has-dropdown:focus-within>.dropdown-menu{ display:flex; }
.main-nav .dropdown-menu li{ width:100%; }
.main-nav .dropdown-menu a{ padding:11px 20px; font-weight:600; font-size:14px; white-space:nowrap; border-top:1px solid rgba(255,255,255,.12); }
.main-nav .dropdown-menu li:first-child a{ border-top:0; }
.main-nav .dropdown-toggle{ display:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--ink); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(105deg, rgba(20,16,14,.90) 0%, rgba(20,16,14,.72) 42%, rgba(20,16,14,.34) 100%); }
.hero-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:64px 22px 72px; display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
.hero-copy h1{ color:#fff; font-size:clamp(34px,4.4vw,56px); line-height:1.06; margin:0 0 18px; }
.hero-copy h1 em{ color:#ffd9c2; }
.hero-sub{ color:rgba(255,255,255,.9); font-size:19px; line-height:1.6; max-width:46ch; margin:0 0 26px; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-bottom:28px; }
.cta-call{ display:flex; flex-direction:column; }
.cta-call .micro{ color:rgba(255,255,255,.75); }
.hero-bullets{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.hero-bullets li{ display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.94); font-size:16px; }
.hero-bullets strong{ color:#fff; }
.tick{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; margin-top:1px; }

/* ---------- Form card ---------- */
.form-card{ background:#fff; color:var(--ink); border-radius:14px; padding:30px; box-shadow:var(--shadow-lg); }
.form-card h2,.form-card h3{ color:var(--ink); font-size:23px; margin:0 0 6px; }
.form-card .form-note{ color:var(--muted); font-size:14.5px; margin:0 0 16px; }
.form-card label{ display:block; font-family:var(--font-heading); font-weight:700; font-size:13px; color:var(--ink); margin:12px 0 5px; }
.form-card input,.form-card textarea,.form-card select{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px; font-family:var(--font-body); font-size:15px; background:#fbf9f7; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{ outline:0; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(62,64,149,.15); background:#fff; }
/* Native select arrow is inconsistent across browsers; draw our own caret. */
.form-card select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236d727c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-card textarea{ resize:vertical; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn-submit{ margin-top:18px; width:100%; background:var(--red); color:#fff; border:0; border-radius:8px; padding:15px 26px; font-family:var(--font-heading); font-weight:800; font-size:16px; cursor:pointer; box-shadow:0 8px 22px rgba(174,28,41,.28); transition:background-color .2s, transform .15s; }
.btn-submit:hover{ background:var(--red-dark); transform:translateY(-1px); }
.reassure{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:14px 0 0; }
.reassure a{ color:var(--indigo); text-decoration:underline; }
.alt-path{ font-size:14.5px; margin:10px 0 0; color:var(--body-text); }
.alt-path a{ color:var(--red); font-weight:700; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{ padding:82px 0; }
.why{ background:var(--white); }
.why-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; margin-top:44px; text-align:left; }
.why-media{ position:sticky; top:24px; }
.why-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; border-radius:14px; box-shadow:var(--shadow-md); }
.why-stat{ display:flex; align-items:center; gap:14px; margin:18px 0 0; }
.why-stat .stat-num{ font-family:var(--font-heading); font-weight:800; font-size:44px; color:var(--red); line-height:1; }
.why-stat .stat-label{ font-size:15px; color:var(--muted); line-height:1.4; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 34px; }
.why-item h3{ font-size:19px; color:var(--ink); margin:0 0 8px; }
.why-item p{ margin:0; font-size:15.5px; color:var(--body-text); line-height:1.65; }

/* ---------- Services (v1 "packages" adapted to real service pages) ---------- */
.services{ background:var(--beige-light); }
/* Flex + center so any card count (2, 3, 6…) stays centered instead of hanging in a fixed 3-col grid */
.svc-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin-top:44px; text-align:left; }
.svc-card{ flex:1 1 300px; max-width:380px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s; }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.svc-photo{ aspect-ratio:3/2; overflow:hidden; }
.svc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.svc-card:hover .svc-photo img{ transform:scale(1.05); }
.svc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.svc-body h3{ font-size:21px; color:var(--ink); margin:0 0 10px; }
.svc-body p{ font-size:15px; color:var(--body-text); margin:0 0 18px; flex:1; }
.svc-link{ font-family:var(--font-heading); font-weight:800; font-size:14.5px; color:var(--red); letter-spacing:.02em; }
.svc-link::after{ content:' \25B8'; }
.svc-card:hover .svc-link{ color:var(--red-dark); }

/* ---------- Alternating media + text block (image left/right, alternating) ---------- */
.media-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin:44px 0 0; text-align:left; }
.media-split + .media-split{ margin-top:60px; }
/* Fixed 4:3 crop so tall portrait photos can't blow up the row and leave dead space beside
   short text — keeps every block symmetrical regardless of the source photo's orientation. */
.media-split .ms-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; border-radius:14px; box-shadow:var(--shadow-md); }
.media-split .ms-media .why-stat{ margin-top:14px; }
.media-split .ms-text .kicker{ margin-bottom:10px; }
.media-split .ms-text h2,.media-split .ms-text h3{ font-size:clamp(24px,2.6vw,33px); color:var(--ink); margin:0 0 14px; }
.media-split .ms-text p{ color:var(--body-text); margin:0 0 14px; }
.media-split .ms-text ul{ list-style:none; margin:0 0 16px; }
.media-split .ms-text li{ position:relative; padding-left:24px; margin-bottom:9px; color:var(--body-text); }
.media-split .ms-text li::before{ content:'\25B8'; position:absolute; left:0; color:var(--red); font-size:12px; top:4px; }
.media-split.reverse .ms-media{ order:2; }
@media (max-width:767px){
  .media-split{ grid-template-columns:1fr; gap:22px; margin-top:32px; }
  .media-split + .media-split{ margin-top:40px; }
  .media-split.reverse .ms-media{ order:0; }
}

/* ---------- Compact check list (short feature labels, no descriptions) ---------- */
.check-list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; margin:28px 0 0; text-align:left; }
.check-list li{ position:relative; padding-left:30px; font-weight:700; font-family:var(--font-heading); font-size:16px; color:var(--ink); }
.check-list li::before{ content:'\2714'; position:absolute; left:0; top:1px; width:20px; height:20px; background:var(--red); color:#fff; border-radius:50%; font-size:11px; display:flex; align-items:center; justify-content:center; }
@media (max-width:600px){ .check-list{ grid-template-columns:1fr; } }
/* keep the checkmark marker even when a check-list sits inside a media-split .ms-text */
.ms-text ul.check-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; }
.ms-text ul.check-list li{ padding-left:30px; font-family:var(--font-heading); font-weight:700; color:var(--ink); }
.ms-text ul.check-list li::before{ content:'\2714'; top:1px; width:20px; height:20px; background:var(--red); color:#fff; border-radius:50%; font-size:11px; display:flex; align-items:center; justify-content:center; }
@media (max-width:600px){ .ms-text ul.check-list{ grid-template-columns:1fr; } }

/* ---------- Feature cards (short service/feature tiles, heading + text, no photo) ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:44px 0 0; text-align:left; }
.feature-card{ background:#fff; border-radius:12px; padding:26px 22px; box-shadow:var(--shadow-sm); border-top:3px solid var(--red); }
.feature-card h3{ font-size:18px; color:var(--ink); margin:0 0 9px; }
.feature-card p{ font-size:14.5px; color:var(--body-text); line-height:1.6; margin:0; }
@media (max-width:991px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }

/* ---------- Process ---------- */
.process{ background:#fff; }
/* Flex + center so the row of steps is centered regardless of count (5 on home, 4 on service pages) */
.steps{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:30px 34px; margin:48px 0 0; padding:0; }
.step{ flex:1 1 180px; max-width:220px; text-align:center; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-heading); font-weight:800; font-size:22px; margin-bottom:16px; box-shadow:0 8px 20px rgba(174,28,41,.28); }
.step h3{ font-size:18px; color:var(--ink); margin:0 0 8px; }
.step p{ font-size:14.5px; color:var(--body-text); margin:0; line-height:1.6; }

/* ==========================================================================
   SLIDERS (gallery + reviews)
   ========================================================================== */
.slider{ position:relative; margin-top:40px; }
.slider-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:6px 22px 24px; scrollbar-width:none; }
.slider-track::-webkit-scrollbar{ display:none; }
.slider-btn{ position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:5; width:52px; height:52px; border-radius:50%; border:0; background:#fff; color:var(--ink); box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .2s, transform .15s; }
.slider-btn:hover{ background:var(--red); color:#fff; }
.slider-btn svg{ width:24px; height:24px; fill:currentColor; }
.slider-prev{ left:8px; } .slider-next{ right:8px; }

/* gallery */
.gallery{ background:var(--ink); }
.gallery .kicker{ color:#ff8a6b; }
.gallery .section-title{ color:#fff; }
.gallery .section-intro{ color:rgba(255,255,255,.72); }
.gallery-slide{ flex:0 0 auto; width:min(420px,78vw); scroll-snap-align:start; margin:0; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-md); }
.gallery-slide img{ width:100%; height:300px; object-fit:cover; }
.gallery-cta{ text-align:center; margin-top:16px; color:#fff; }
.gallery-cta p{ font-family:var(--font-heading); font-weight:700; font-size:18px; color:#fff; margin:0 0 12px; }
.tile-links{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.tile-links a{ color:#fff; font-weight:700; }
.tile-links a:first-child{ color:#ff8a6b; }

/* reviews */
.reviews{ background:var(--beige-light); }
.rev-slide-wrap{ }
.rev-track{ align-items:stretch; }
.rev-card{ flex:0 0 auto; width:min(380px,82vw); scroll-snap-align:start; background:#fff; border-radius:14px; padding:26px 26px 28px; box-shadow:var(--shadow-sm); position:relative; text-align:left; display:flex; flex-direction:column; }
.rev-g{ position:absolute; top:22px; right:24px; width:26px; height:26px; }
.rev-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rev-avatar{ width:46px; height:46px; border-radius:50%; color:#fff; font-family:var(--font-heading); font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; }
.rev-id{ display:flex; flex-direction:column; }
.rev-name{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--ink); }
.rev-stars svg{ width:16px; height:16px; fill:#fbbc05; }
.rev-text{ font-size:15px; color:var(--body-text); line-height:1.62; margin:0; }
.rev-toggle{ position:absolute; left:-9999px; }
.rev-clamp{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.rev-toggle:checked ~ .rev-clamp{ -webkit-line-clamp:unset; overflow:visible; }
.rev-more{ display:inline-block; margin-top:12px; font-family:var(--font-heading); font-weight:700; font-size:13.5px; color:var(--indigo); cursor:pointer; }
.rev-more .less{ display:none; } .rev-toggle:checked ~ .rev-more .more{ display:none; } .rev-toggle:checked ~ .rev-more .less{ display:inline; }
.reviews-cta{ text-align:center; margin-top:18px; }
.reviews-cta p{ font-size:17px; margin:0; } .reviews-cta a{ font-weight:700; }

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
.areas{ background:#fff; }
.areas-layout{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:40px; }
.city-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 18px; }
.city-list li{ position:relative; padding-left:20px; font-size:15.5px; color:var(--body-text); }
.city-list li::before{ content:'\25B8'; position:absolute; left:0; color:var(--red); font-size:12px; top:3px; }
.city-list li.home-base{ font-weight:800; color:var(--ink); }
.micro-cta{ margin-top:22px; font-size:15px; color:var(--muted); }
.micro-cta a{ font-weight:700; }
.areas-map iframe{ width:100%; height:380px; border:0; border-radius:14px; box-shadow:var(--shadow-md); display:block; }
.map-caption{ font-size:14px; color:var(--muted); margin:12px 0 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background:var(--beige-light); }
.faq-list{ max-width:800px; margin:40px auto 0; text-align:left; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 22px; font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--red); font-size:26px; font-weight:400; line-height:1; flex:0 0 auto; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-a{ padding:0 22px 20px; margin:0; font-size:15.5px; color:var(--body-text); line-height:1.7; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ position:relative; overflow:hidden; background:var(--ink); }
.final-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.final-scrim{ position:absolute; inset:0; background:linear-gradient(105deg, rgba(20,16,14,.92) 0%, rgba(20,16,14,.72) 45%, rgba(20,16,14,.4) 100%); }
.final-cta .container{ position:relative; z-index:2; }
.final-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.final-copy .kicker{ color:#ff8a6b; }
.final-copy .section-title{ color:#fff; text-align:left; margin-left:0; max-width:none; }
.final-copy .section-intro{ color:rgba(255,255,255,.86); margin-left:0; }
.call-big{ margin:22px 0 0; color:#fff; font-size:17px; }
.call-big a{ display:block; font-family:var(--font-heading); font-weight:800; font-size:32px; color:#fff; margin:4px 0; }
.call-big .hours{ display:block; font-size:13.5px; color:rgba(255,255,255,.7); }

/* ==========================================================================
   BADGES + FOOTER
   ========================================================================== */
.badges{ background:var(--beige); padding:38px 0; }
.badge-row{ display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; }
.badge-row img{ max-height:64px; width:auto; }

.site-footer{ background:var(--ink); color:rgba(255,255,255,.78); }
.footer-accent{ height:6px; background:var(--red); }
.footer-main{ max-width:var(--container); margin:0 auto; padding:56px 22px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer-tagline{ font-family:var(--font-heading); font-weight:700; font-size:18px; color:#fff; max-width:34ch; line-height:1.5; }
.footer-info{ font-style:normal; line-height:1.9; font-size:15px; }
.footer-info strong{ color:#fff; }
.footer-info a{ color:#ff8a6b; font-weight:700; }
.footer-col h4{ color:#fff; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px; }
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:9px; }
.footer-col a{ color:rgba(255,255,255,.78); font-size:15px; }
.footer-col a:hover{ color:#fff; }
.footer-col p{ margin:0 0 6px; font-size:15px; }
.footer-bottom{ background:rgba(0,0,0,.28); text-align:center; padding:16px 22px; font-size:13px; color:rgba(255,255,255,.66); }
.footer-bottom a{ color:rgba(255,255,255,.82); text-decoration:underline; }

/* ==========================================================================
   STICKY MOBILE CALL BAR
   ========================================================================== */
.sticky-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:200; }
.sticky-bar a{ flex:1; text-align:center; padding:15px 8px; font-family:var(--font-heading); font-weight:800; font-size:15px; color:#fff; }
.sticky-call{ background:var(--red); } .sticky-form{ background:var(--indigo); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:991px){
  .hero-inner{ grid-template-columns:1fr; gap:34px; padding:48px 22px 56px; }
  .why-layout{ grid-template-columns:1fr; gap:32px; } .why-media{ position:static; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 26px; }
  .areas-layout,.final-grid{ grid-template-columns:1fr; gap:32px; }
  .final-copy .section-title{ text-align:center; } .final-copy .kicker{ text-align:center; }
  .footer-main{ grid-template-columns:1fr 1fr; }
  .header-band .band-extra{ display:none; }
}
@media (max-width:767px){
  section{ padding:56px 0; }
  .header-top{ flex-direction:column; gap:14px; text-align:center; } .header-call{ text-align:center; }
  .main-nav .nav-inner{ flex-direction:column; align-items:stretch; padding:0; }
  .nav-toggle{ display:block; align-self:flex-start; }
  .main-nav>.nav-inner>ul{ display:none; flex-direction:column; width:100%; gap:0; }
  .main-nav.open>.nav-inner>ul{ display:flex; }
  .main-nav a{ text-align:center; padding:15px; border-top:1px solid rgba(255,255,255,.15); }
  .main-nav .has-dropdown{ display:flex; flex-wrap:wrap; align-items:stretch; }
  .main-nav .has-dropdown>a{ flex:1; } .main-nav .has-dropdown>a .caret{ display:none; }
  .main-nav .dropdown-toggle{ display:block; background:none; border:0; border-top:1px solid rgba(255,255,255,.15); color:#fff; font-size:15px; width:56px; cursor:pointer; }
  .main-nav .dropdown-toggle::after{ content:'\25BE'; display:inline-block; transition:transform .25s; }
  .main-nav .has-dropdown.open .dropdown-toggle::after{ transform:rotate(180deg); }
  .main-nav .dropdown-menu{ position:static; display:none; min-width:0; width:100%; box-shadow:none; padding:0; background:rgba(0,0,0,.2); }
  .main-nav .has-dropdown:hover>.dropdown-menu,.main-nav .has-dropdown:focus-within>.dropdown-menu{ display:none; }
  .main-nav .has-dropdown.open>.dropdown-menu{ display:flex; }
  .why-grid,.svc-grid,.steps{ grid-template-columns:1fr; }
  .city-list{ grid-template-columns:repeat(2,1fr); }
  .footer-main{ grid-template-columns:1fr; }
  .badge-row{ gap:26px; } .badge-row img{ max-height:48px; }
  .sticky-bar{ display:flex; } body{ padding-bottom:52px; }
  .call-big a{ font-size:26px; }
}

/* ==========================================================================
   PAGE HERO (interior pages: about, gallery, connect, blog, articles)
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden; background:var(--ink); }
.page-hero .ph-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.page-hero .ph-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; padding:66px 22px; text-align:center; }
.page-hero .kicker{ color:#ff8a6b; }
.page-hero h1{ color:#fff; font-size:clamp(30px,4.2vw,50px); margin:0 0 10px; }
.page-hero p{ color:rgba(255,255,255,.82); font-size:18px; max-width:60ch; margin:6px auto 0; }
.page-hero .crumb{ color:rgba(255,255,255,.6); font-size:13.5px; margin:0 0 12px; }
.page-hero .crumb a{ color:rgba(255,255,255,.8); }

/* ==========================================================================
   ARTICLE / PROSE (blog posts, privacy policy, long-form copy)
   ========================================================================== */
.article{ max-width:800px; margin:0 auto; padding:64px 22px; }
.article .post-meta{ color:var(--muted); font-size:14px; margin:0 0 26px; }
.article h2{ font-size:clamp(24px,2.6vw,32px); color:var(--ink); margin:38px 0 14px; }
.article h3{ font-size:22px; color:var(--ink); margin:28px 0 12px; }
.article p{ margin:0 0 18px; font-size:17px; line-height:1.8; color:var(--body-text); }
.article ul,.article ol{ margin:0 0 20px; padding-left:1.3em; }
.article li{ margin-bottom:10px; line-height:1.7; }
.article img{ width:100%; border-radius:12px; margin:28px 0; box-shadow:var(--shadow-sm); }
.article a{ color:var(--indigo); text-decoration:underline; }
.article blockquote{ border-left:4px solid var(--red); padding:4px 0 4px 22px; margin:24px 0; color:var(--muted); font-style:italic; font-size:19px; }
.article .article-cta{ margin:40px 0 0; padding:28px; background:var(--beige-light); border-radius:14px; text-align:center; }
.article .article-cta p{ font-family:var(--font-heading); font-weight:700; font-size:19px; color:var(--ink); margin:0 0 16px; }

/* ==========================================================================
   BLOG CARD GRID (blogs index + related posts)
   ========================================================================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:44px; }
.blog-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s; }
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.blog-card .bc-photo{ aspect-ratio:3/2; overflow:hidden; }
.blog-card .bc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-card:hover .bc-photo img{ transform:scale(1.05); }
.blog-card .bc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card h3{ font-size:19px; color:var(--ink); margin:0 0 10px; line-height:1.3; }
.blog-card p{ font-size:14.5px; color:var(--body-text); margin:0 0 16px; flex:1; }
.blog-card .bc-link{ font-family:var(--font-heading); font-weight:800; font-size:14px; color:var(--red); }
.blog-card .bc-link::after{ content:' \25B8'; }
@media(max-width:991px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PHOTO GALLERY GRID (gallery page)
   ========================================================================== */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.photo-grid figure{ margin:0; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); }
.photo-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .4s; }
.photo-grid figure:hover img{ transform:scale(1.06); }
@media(max-width:991px){ .photo-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .photo-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

/* ==========================================================================
   CONTACT GRID (connect page) + PAGINATION
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; margin-top:40px; text-align:left; }
.contact-info h2,.contact-info h3{ color:var(--ink); }
.contact-info p{ color:var(--body-text); }
.contact-info a{ color:var(--red); font-weight:700; }
.contact-info iframe{ width:100%; height:300px; border:0; border-radius:14px; box-shadow:var(--shadow-sm); margin-top:18px; }
@media(max-width:767px){ .contact-grid{ grid-template-columns:1fr; gap:28px; } }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap; }
.pagination a,.pagination span{ padding:9px 15px; border:1px solid var(--line); border-radius:8px; color:var(--body-text); font-weight:700; font-size:14px; }
.pagination a:hover{ border-color:var(--red); color:var(--red); }
.pagination .current{ background:var(--red); color:#fff; border-color:var(--red); }

/* ==========================================================================
   FORM STATES (submit feedback from js/main.js)
   ========================================================================== */
.form-card .consent{ display:flex; gap:10px; align-items:flex-start; font-family:var(--font-body); font-weight:400; font-size:12.5px; line-height:1.5; color:var(--muted); margin:16px 0 0; }
.form-card .consent input{ width:auto; flex:0 0 auto; margin-top:3px; }
.form-message{ margin-top:16px; padding:12px 16px; border-radius:8px; font-size:14.5px; line-height:1.5; }
.form-message.success{ background:#e6f4ea; color:#1e6b34; border:1px solid #b7dfc4; }
.form-message.error{ background:#fdecea; color:#a3231a; border:1px solid #f3c1bd; }
.field-error{ outline:2px solid #d9342b !important; outline-offset:1px; }