/* =========================================================================
   MapleMove & Haul — styles.css
   Design system preserved from the original build (navy / orange / charcoal /
   fog grey, Big Shoulders + Work Sans). This file adds:
     - explicit light-theme colours everywhere (iOS / in-app-webview dark-mode fix)
     - real logo + responsive header sizing
     - 4-photo upload UI with previews
     - before/after comparison layout
     - empty-state + review-source-badge styles
     - service-area map embed styles
     - a reveal-on-scroll system that is visible-by-default (JS optional)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Big+Shoulders+Text:wght@500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------------------------------------------------------------------
   0. COLOUR-SCHEME / DARK-MODE FIX
   iOS Safari, in-app WebViews (Claude app, Instagram, Facebook, etc.) and
   some Android WebViews apply automatic "smart" dark adaptation to pages
   that don't explicitly opt out. Because several sections in the old file
   had text colours set but no explicit background-color (relying on the
   white page background), those browsers were free to paint their own
   dark default behind the (still-dark) text. Fix: declare color-scheme
   light everywhere, give every section an explicit background, and add a
   belt-and-braces prefers-color-scheme:dark override that re-asserts the
   same light colours (it does NOT touch the intentionally dark navy/
   charcoal sections — those keep their own explicit colours either way).
   --------------------------------------------------------------------- */
:root{ color-scheme: light; }
html{ background-color:#FFFFFF; }
body{ background-color:#FFFFFF; }

:root{
  --navy-deep:#0E2038; --navy-mid:#173A5E; --navy-soft:#234c74;
  --orange:#F2660A; --orange-dark:#D14F00; --orange-light:#FFEDE0;
  --charcoal:#1A1D21; --fog:#F4F5F7; --fog-dark:#E9EBEF;
  --steel:#5B6472; --steel-light:#8A93A0; --white:#FFFFFF;
  --border:#E3E5E9; --border-dark:rgba(255,255,255,0.14); --success:#1E8E5A; --error:#B23B2D;
  --font-display:'Big Shoulders Display', sans-serif;
  --font-label:'Big Shoulders Text', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --radius-s:8px; --radius-m:14px; --radius-l:22px;
  --shadow-s:0 2px 10px rgba(14,32,56,0.08); --shadow-m:0 12px 30px rgba(14,32,56,0.14); --shadow-l:0 24px 60px rgba(14,32,56,0.22);
  --container:1220px; --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);color:var(--charcoal);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:64px;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
input,select,textarea{background-color:#FFFFFF;color:var(--charcoal);}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
.skip-link{position:absolute;left:-999px;background:var(--orange);color:var(--white);padding:.8rem 1.2rem;z-index:2000;border-radius:0 0 var(--radius-s) 0;font-family:var(--font-label);font-weight:700;}
.skip-link:focus{left:0;top:0;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
@media(min-width:768px){.container{padding:0 32px;}}

/* Every plain section gets an EXPLICIT white background — this line is the
   core fix for the "light section turns dark on iPhone" bug. */
.section{padding:64px 0;background-color:#FFFFFF;}
@media(min-width:1024px){.section{padding:100px 0;}}
.section-dark{background-color:var(--navy-deep);color:var(--white);}
.section-dark p{color:rgba(255,255,255,.72);}
.section-fog{background-color:var(--fog);}
.section-head{max-width:680px;margin-bottom:40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
@media(min-width:1024px){.section-head{margin-bottom:56px;}}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-0.01em;color:var(--charcoal);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white);}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:900;}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);}
h3{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:700;}
h4{font-size:1.1rem;font-weight:700;letter-spacing:0;}
p{color:var(--steel);}
.lede{font-size:clamp(1.02rem,2vw,1.2rem);max-width:56ch;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--orange-dark);margin-bottom:14px;}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--orange);display:inline-block;}
.section-dark .eyebrow{color:#FFB27A;}
.text-center{text-align:center;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-label);font-weight:700;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;padding:16px 30px;border-radius:999px;border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;white-space:nowrap;cursor:pointer;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-orange{background:var(--orange);color:var(--white);box-shadow:0 10px 24px rgba(242,102,10,.32);}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);}
.btn-outline{border-color:rgba(255,255,255,.5);color:var(--white);background:transparent;}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);transform:translateY(-2px);}
.btn-outline-dark{border-color:var(--navy-deep);color:var(--navy-deep);background:transparent;}
.btn-outline-dark:hover{background:var(--navy-deep);color:var(--white);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-lg{padding:19px 36px;font-size:1.05rem;}
.btn-sm{padding:12px 22px;font-size:.85rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ---------------------------------------------------------------------
   HEADER — real logo
   --------------------------------------------------------------------- */
.site-header{position:sticky;top:0;left:0;right:0;z-index:1000;min-height:var(--header-h);display:flex;align-items:center;background-color:var(--navy-deep);transition:box-shadow .25s ease,min-height .25s ease;padding:10px 0;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
.site-header.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.18);min-height:64px;}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-logo{
  height:auto;
  width:clamp(76px, 20vw, 108px);
  flex-shrink:0;
  display:block;
}
.site-header.is-scrolled .brand-logo{ width:clamp(64px, 16vw, 88px); }
@media(min-width:640px){ .brand-logo{ width:clamp(92px, 12vw, 128px); } }
@media(min-width:1024px){ .brand-logo{ width:clamp(104px, 8vw, 140px); } }

.main-nav{display:none;}
.main-nav ul{display:flex;align-items:center;gap:32px;}
.main-nav a{font-family:var(--font-label);font-weight:600;letter-spacing:.03em;font-size:.94rem;color:rgba(255,255,255,.86);text-transform:uppercase;position:relative;padding:6px 0;}
.main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .2s ease;}
.main-nav a:hover,.main-nav a.active{color:var(--white);}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.header-call{display:none;align-items:center;gap:8px;color:var(--white);font-family:var(--font-label);font-weight:700;white-space:nowrap;}
.header-call svg{width:18px;height:18px;color:var(--orange);}
.header-quote-btn{display:none;}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,.08);flex-shrink:0;}
.nav-toggle span{width:20px;height:2px;background:var(--white);margin:0 auto;transition:transform .25s ease,opacity .25s 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);}
.mobile-nav{position:fixed;inset:0 0 0 0;background-color:var(--navy-deep);z-index:1500;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:96px 24px 120px;visibility:hidden;}
.mobile-nav.is-open{transform:translateX(0);visibility:visible;}
.mobile-nav a{display:block;padding:16px 4px;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--white);border-bottom:1px solid var(--border-dark);}
.mobile-nav-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.mobile-nav-contact{margin-top:28px;display:flex;flex-direction:column;gap:10px;font-family:var(--font-label);}
.mobile-nav-contact a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-weight:600;}
.mobile-nav-contact svg{width:18px;height:18px;color:var(--orange);}
.mobile-nav-close{position:fixed;top:16px;right:20px;z-index:1600;width:42px;height:42px;border-radius:8px;background-color:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;}
.mobile-nav-close svg{width:20px;height:20px;}

/* At very narrow widths the 210px+ logo width the brief called for would make
   a *sticky* header unusably tall (it's a circular badge, so wide = tall).
   We keep the logo large and fully legible, but cap it well below that, and
   drop the small header quote button once things get tight — the sticky
   bottom Call/Quote bar already covers that job on mobile. */
@media(max-width:480px){
  .header-actions .header-quote-btn{display:none !important;}
}
@media(min-width:1024px){
  .main-nav{display:block;}
  .header-call{display:flex;}
  .header-quote-btn{display:inline-flex;}
  .nav-toggle{display:none;}
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero{position:relative;background-color:var(--navy-deep);background-image:linear-gradient(155deg,var(--navy-deep) 0%,var(--navy-mid) 62%,var(--navy-soft) 100%);color:var(--white);overflow:hidden;padding:48px 0 90px;}
.hero::after{content:'';position:absolute;right:-10%;top:-20%;width:60%;height:140%;background:radial-gradient(circle,rgba(242,102,10,.16) 0%,rgba(242,102,10,0) 70%);pointer-events:none;}
.hero-grid{display:grid;gap:44px;position:relative;z-index:1;}
.hero-copy .eyebrow{color:#FFB27A;}
.hero-copy h1{margin-bottom:20px;color:var(--white);}
.hero-copy h1 em{font-style:normal;color:var(--orange);}
.hero-copy .lede{color:rgba(255,255,255,.78);margin-bottom:30px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
.hero-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid var(--border-dark);padding:9px 16px;border-radius:999px;font-family:var(--font-label);font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.9);}
.hero-badge svg{width:15px;height:15px;color:var(--orange);}
.hero-ticket{position:relative;background-color:#FFFFFF;color:var(--charcoal);border-radius:var(--radius-l);padding:28px 24px;box-shadow:var(--shadow-l);}
.ticket-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--border);padding-bottom:16px;margin-bottom:16px;}
.ticket-head .eyebrow{margin:0;color:var(--orange-dark);}
.ticket-id{font-family:var(--font-label);font-size:.75rem;color:var(--steel-light);font-weight:700;}
.ticket-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.ticket-row:last-child{border-bottom:none;}
.ticket-row svg{width:20px;height:20px;color:var(--orange);flex-shrink:0;margin-top:2px;}
.ticket-row strong{display:block;font-size:.92rem;color:var(--charcoal);}
.ticket-row span{font-size:.82rem;color:var(--steel);}
@media(min-width:900px){.hero{padding:56px 0 120px;}.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;}}

.trust-strip{background-color:#FFFFFF;border-bottom:1px solid var(--border);}
.trust-strip .container{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:28px 20px;}
.trust-item{display:flex;align-items:center;gap:12px;}
.trust-item svg{width:26px;height:26px;color:var(--orange);flex-shrink:0;}
.trust-item strong{display:block;font-family:var(--font-label);font-size:.94rem;color:var(--charcoal);}
.trust-item span{font-size:.8rem;color:var(--steel);}
@media(min-width:768px){.trust-strip .container{grid-template-columns:repeat(4,1fr);}}

.card-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}}
.service-card{position:relative;background-color:#FFFFFF;border:1px solid var(--border);border-radius:var(--radius-m);padding:30px 24px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden;cursor:pointer;}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.service-card:hover,.service-card.is-active{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:transparent;}
.service-card:hover::before,.service-card.is-active::before{transform:scaleX(1);}
.service-icon{width:54px;height:54px;border-radius:14px;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.service-icon svg{width:26px;height:26px;color:var(--orange);}
.service-card h3{margin-bottom:8px;}
.service-card p{margin-bottom:16px;font-size:.93rem;}
.card-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.8rem;color:var(--navy-deep);}
.card-link svg{width:14px;height:14px;transition:transform .2s ease;}
.service-card:hover .card-link svg{transform:translateX(4px);}

.tab-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.tab-btn{font-family:var(--font-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.85rem;padding:12px 22px;border-radius:999px;border:1.5px solid var(--border);color:var(--steel);background-color:#FFFFFF;transition:all .2s ease;}
.tab-btn:hover{border-color:var(--navy-deep);color:var(--navy-deep);}
.tab-btn.is-active{background-color:var(--navy-deep);border-color:var(--navy-deep);color:var(--white);}
.tab-panel{display:none;}
.tab-panel.is-active{display:block;animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.tab-panel-inner{display:grid;gap:36px;grid-template-columns:1fr;background-color:var(--fog);border-radius:var(--radius-l);padding:32px 24px;}
@media(min-width:900px){.tab-panel-inner{grid-template-columns:1.1fr .9fr;padding:40px;}}
.check-grid{display:grid;gap:12px;grid-template-columns:1fr;}
@media(min-width:560px){.check-grid{grid-template-columns:repeat(2,1fr);}}
.check-item{display:flex;align-items:flex-start;gap:10px;background-color:#FFFFFF;border:1px solid var(--border);border-radius:var(--radius-s);padding:13px 15px;}
.check-item svg{width:18px;height:18px;color:var(--success);flex-shrink:0;margin-top:1px;}
.check-item span{font-size:.88rem;font-weight:600;color:var(--charcoal);}
.pricing-mini{display:flex;flex-direction:column;gap:14px;}
.pricing-mini .row{display:flex;gap:14px;align-items:flex-start;}
.pricing-mini .tag{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--orange);width:30px;flex-shrink:0;}
.pricing-mini strong{display:block;font-size:.92rem;color:var(--charcoal);}
.pricing-mini p{font-size:.85rem;}

.feature-list{display:grid;gap:26px;grid-template-columns:1fr;}
@media(min-width:768px){.feature-list{grid-template-columns:repeat(2,1fr);}}
.feature-item{display:flex;gap:16px;}
.feature-item .ico{width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.04);}
.feature-item .ico svg{width:22px;height:22px;color:var(--orange);}
.feature-item h4{margin-bottom:6px;}
.feature-item p{font-size:.92rem;}

.route-steps{display:grid;gap:26px;grid-template-columns:1fr;position:relative;}
@media(min-width:900px){.route-steps{grid-template-columns:repeat(4,1fr);}.route-steps::before{content:'';position:absolute;top:27px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(90deg,var(--orange) 0 14px,transparent 14px 26px);}}
.mile-marker{width:54px;height:54px;border-radius:50%;background-color:#FFFFFF;border:3px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--navy-deep);margin-bottom:16px;position:relative;z-index:1;}
.route-step h4{margin-bottom:6px;}
.route-step p{font-size:.9rem;}

/* ---------------------------------------------------------------------
   GALLERY / PROJECTS  (data-driven — see content-loader.js)
   --------------------------------------------------------------------- */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.filter-btn{font-family:var(--font-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.8rem;padding:10px 20px;border-radius:999px;border:1.5px solid var(--border);color:var(--steel);background-color:#FFFFFF;transition:all .2s ease;}
.filter-btn:hover{border-color:var(--navy-deep);color:var(--navy-deep);}
.filter-btn.is-active{background-color:var(--navy-deep);border-color:var(--navy-deep);color:var(--white);}
.gallery-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
.gallery-card{border-radius:var(--radius-m);overflow:hidden;background-color:#FFFFFF;border:1px solid var(--border);transition:transform .22s ease,box-shadow .22s ease;}
.gallery-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);}
.gallery-photo{aspect-ratio:4/3;background-color:var(--fog);position:relative;overflow:hidden;}
.gallery-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.empty-photo-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--steel-light);}
.empty-photo-icon svg{width:30px;height:30px;}
.gallery-photo.img-fallback,.ba-half.img-fallback{background-color:var(--fog);}
.ba-flag{position:absolute;top:12px;left:12px;background:var(--orange);color:var(--white);font-family:var(--font-label);font-weight:700;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:1;}
.gallery-body{padding:18px 20px 22px;}
.gallery-tag{display:inline-block;font-family:var(--font-label);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark);background-color:var(--orange-light);padding:4px 10px;border-radius:6px;margin-bottom:8px;}
.gallery-body h4{margin-bottom:4px;color:var(--charcoal);}
.gallery-loc{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--steel);margin-bottom:8px;}
.gallery-loc svg{width:13px;height:13px;color:var(--orange);flex-shrink:0;}
.gallery-body p{font-size:.86rem;}

/* before/after comparison — labelled side-by-side, mobile-friendly */
.ba-compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;background-color:var(--border);}
.ba-compare .ba-half{position:relative;aspect-ratio:1/1;overflow:hidden;background-color:var(--fog);}
.ba-compare .ba-half img{width:100%;height:100%;object-fit:cover;}
.ba-compare .ba-half .ba-tag{position:absolute;bottom:8px;left:8px;background:rgba(14,32,56,.85);color:#fff;font-family:var(--font-label);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:5px;}

.empty-state{
  grid-column:1/-1;text-align:center;padding:56px 24px;background-color:var(--fog);border-radius:var(--radius-l);
  border:1px dashed var(--border);
}
.empty-state svg{width:36px;height:36px;color:var(--orange-dark);margin:0 auto 16px;}
.empty-state p{max-width:46ch;margin:0 auto;color:var(--steel);}
.empty-state .btn-row{justify-content:center;margin-top:20px;}

/* ---------------------------------------------------------------------
   REVIEWS  (data-driven)
   --------------------------------------------------------------------- */
.review-card{background-color:#FFFFFF;border:1px solid var(--border);border-radius:var(--radius-m);padding:26px 24px;display:flex;flex-direction:column;gap:12px;height:100%;}
.stars{display:flex;gap:3px;}
.stars svg{width:17px;height:17px;color:var(--orange);}
.review-quote{font-size:.96rem;color:var(--charcoal);flex-grow:1;}
.review-meta{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--border);padding-top:12px;gap:10px;flex-wrap:wrap;}
.review-name{font-family:var(--font-label);font-weight:700;font-size:.9rem;color:var(--charcoal);}
.review-loc{font-size:.76rem;color:var(--steel);}
.review-service{font-family:var(--font-label);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);background-color:var(--fog);padding:4px 10px;border-radius:6px;}
.review-badges{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.source-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;}
.source-badge svg{width:13px;height:13px;}
.source-badge.google{background-color:#E8F0FE;color:#1A56C4;}
.source-badge.facebook{background-color:#E8EEFB;color:#1B4F9C;}
.review-link{font-family:var(--font-label);font-size:.72rem;font-weight:700;color:var(--steel);text-decoration:underline;}
.review-date{font-size:.72rem;color:var(--steel-light);}

.placeholder-note{display:flex;align-items:center;gap:10px;background-color:var(--orange-light);color:var(--orange-dark);border:1px dashed var(--orange);border-radius:var(--radius-s);padding:14px 18px;font-size:.85rem;font-family:var(--font-label);font-weight:600;margin-bottom:32px;}
.placeholder-note svg{width:20px;height:20px;flex-shrink:0;}

.area-wrap{display:grid;gap:40px;grid-template-columns:1fr;}
@media(min-width:960px){.area-wrap{grid-template-columns:1fr 1fr;align-items:center;}}
.area-map{position:relative;background:rgba(255,255,255,.04);border:1px solid var(--border-dark);border-radius:var(--radius-l);padding:30px 22px;}
.area-map-line{position:relative;padding-left:26px;}
.area-map-line::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,var(--orange) 0 10px,transparent 10px 18px);}
.area-stop{position:relative;padding:12px 0;}
.area-stop::before{content:'';position:absolute;left:-26px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--orange);border:3px solid var(--navy-deep);box-shadow:0 0 0 2px var(--orange);}
.area-stop strong{font-family:var(--font-label);font-size:.98rem;color:var(--white);}
.area-stop span{display:block;font-size:.8rem;color:rgba(255,255,255,.6);}
.area-list-plain{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.area-pill{font-family:var(--font-label);font-size:.78rem;font-weight:600;background:rgba(255,255,255,.08);border:1px solid var(--border-dark);color:rgba(255,255,255,.85);padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.area-pill.on-light{background-color:var(--fog-dark);border-color:var(--border);color:var(--charcoal);}
.area-pill svg{width:13px;height:13px;color:var(--orange);}

.mini-icon-list{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.mini-icon-item{display:flex;gap:14px;align-items:flex-start;}
.mini-icon-item .dot{width:34px;height:34px;border-radius:9px;background-color:var(--fog);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mini-icon-item .dot svg{width:18px;height:18px;color:var(--orange-dark);}
.mini-icon-item strong{display:block;font-size:.96rem;margin-bottom:2px;color:var(--charcoal);}
.mini-icon-item p{font-size:.86rem;}
.two-col{display:grid;gap:44px;grid-template-columns:1fr;}
@media(min-width:960px){.two-col{grid-template-columns:1fr 1fr;align-items:start;}}

.cta-band{background-color:var(--navy-deep);background-image:linear-gradient(120deg,var(--navy-deep),var(--navy-mid));color:var(--white);border-radius:var(--radius-l);padding:50px 30px;text-align:center;position:relative;overflow:hidden;}
.cta-band::after{content:'';position:absolute;left:-10%;bottom:-40%;width:50%;height:100%;background:radial-gradient(circle,rgba(242,102,10,.22),transparent 70%);}
.cta-band h2{margin-bottom:14px;position:relative;color:var(--white);}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto 28px;position:relative;}
.cta-band .btn-row{justify-content:center;position:relative;}

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;text-align:left;font-family:var(--font-label);font-weight:700;font-size:1rem;color:var(--charcoal);background-color:transparent;}
.faq-q .plus{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;position:relative;transition:transform .25s ease,background-color .2s ease,border-color .2s ease;}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background-color:var(--navy-deep);transition:background-color .2s ease;}
.faq-q .plus::before{left:50%;top:20%;bottom:20%;width:1.5px;transform:translateX(-50%);}
.faq-q .plus::after{top:50%;left:20%;right:20%;height:1.5px;transform:translateY(-50%);}
.faq-item.is-open .plus{transform:rotate(45deg);background-color:var(--orange);border-color:var(--orange);}
.faq-item.is-open .plus::before,.faq-item.is-open .plus::after{background-color:var(--white);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-inner{padding:0 4px 20px;max-width:70ch;}
.faq-a-inner p{color:var(--steel);}
.faq-item.is-open .faq-a{max-height:500px;}

/* ---------------------------------------------------------------------
   FORM  (Netlify Forms)
   --------------------------------------------------------------------- */
.form-card{background-color:#FFFFFF;border-radius:var(--radius-l);box-shadow:var(--shadow-m);padding:30px 22px;border:1px solid var(--border);}
@media(min-width:768px){.form-card{padding:40px;}}
.form-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:640px){.form-grid.two{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-label);font-weight:700;font-size:.83rem;color:var(--charcoal);}
.field .req{color:var(--orange);}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=date],.field input[type=time],.field textarea{
  -webkit-appearance:none;appearance:none;
  border:1.5px solid var(--border);border-radius:var(--radius-s);padding:12px 13px;font-size:.94rem;
  transition:border-color .18s ease,box-shadow .18s ease;background-color:#FFFFFF;color:var(--charcoal);width:100%;
}
.field select{
  -webkit-appearance:none;appearance:none;
  border:1.5px solid var(--border);border-radius:var(--radius-s);padding:12px 36px 12px 13px;font-size:.94rem;
  background-color:#FFFFFF;color:var(--charcoal);width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-light);outline:none;}
.field textarea{resize:vertical;min-height:100px;}
.toggle-row{display:flex;gap:10px;}
.toggle-opt{flex:1;position:relative;}
.toggle-opt input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0;}
.toggle-opt span{display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-s);font-family:var(--font-label);font-weight:700;font-size:.86rem;color:var(--steel);background-color:#FFFFFF;transition:all .18s ease;}
.toggle-opt input:checked + span{border-color:var(--orange);background-color:var(--orange-light);color:var(--orange-dark);}
.toggle-opt input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px;}

.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:520px){.upload-grid{grid-template-columns:repeat(4,1fr);}}
.upload-field{position:relative;}
.upload-field input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-slot{
  aspect-ratio:1/1;border:1.5px dashed var(--border);border-radius:var(--radius-s);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background-color:var(--fog);color:var(--steel-light);position:relative;overflow:hidden;padding:8px;
}
.upload-slot svg{width:20px;height:20px;color:var(--orange);}
.upload-slot span{font-family:var(--font-label);font-size:.68rem;letter-spacing:.03em;}
.upload-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.upload-remove{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background-color:rgba(14,32,56,.85);
  color:#fff;display:none;align-items:center;justify-content:center;z-index:2;
}
.upload-field.has-image .upload-remove{display:flex;}
.upload-field.has-image .upload-slot span,.upload-field.has-image .upload-slot > svg{display:none;}
.upload-hint{font-size:.76rem;color:var(--steel-light);margin-top:8px;}
.upload-warning{display:none;align-items:center;gap:8px;background-color:#FBE9E7;color:var(--error);border-radius:var(--radius-s);padding:10px 12px;font-size:.8rem;margin-top:10px;}
.upload-warning.is-visible{display:flex;}
.upload-warning svg{width:16px;height:16px;flex-shrink:0;}

.file-drop{border:1.5px dashed var(--border);border-radius:var(--radius-s);padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;background-color:var(--fog);}
.file-drop svg{width:24px;height:24px;color:var(--orange);}

.form-note{display:flex;gap:10px;background-color:var(--fog);border-radius:var(--radius-s);padding:13px 15px;font-size:.8rem;color:var(--steel);margin-top:6px;}
.form-note svg{width:17px;height:17px;color:var(--navy-mid);flex-shrink:0;}
.form-msg{display:none;padding:15px 17px;border-radius:var(--radius-s);font-family:var(--font-label);font-weight:600;font-size:.88rem;margin-top:16px;align-items:center;gap:10px;}
.form-msg.is-visible{display:flex;}
.form-msg.success{background-color:#E6F4EC;color:var(--success);}
.form-msg.info{background-color:var(--orange-light);color:var(--orange-dark);}
.form-msg.error{background-color:#FBE9E7;color:var(--error);}
.honeypot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------------------------------------------------------------------
   SERVICE-AREA MAP
   --------------------------------------------------------------------- */
.map-embed-wrap{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--border-dark);aspect-ratio:4/3;}
@media(min-width:640px){.map-embed-wrap{aspect-ratio:16/10;}}
.map-embed-wrap iframe{width:100%;height:100%;border:0;display:block;}
.map-fallback{
  aspect-ratio:4/3;border-radius:var(--radius-m);border:1px solid var(--border-dark);
  background-color:rgba(255,255,255,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.7);text-align:center;padding:24px;
}
@media(min-width:640px){.map-fallback{aspect-ratio:16/10;}}
.map-fallback svg{width:34px;height:34px;color:var(--orange);}
.map-fallback strong{color:var(--white);}
.map-fallback a{color:var(--orange-light);text-decoration:underline;font-weight:700;}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.site-footer{background-color:var(--charcoal);color:rgba(255,255,255,.7);padding:56px 0 0;}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);}
@media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
.footer-brand .brand{color:var(--white);margin-bottom:14px;}
.footer-brand .brand-logo{width:150px;}
.footer-brand p{max-width:34ch;font-size:.88rem;}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease;}
.footer-social a:hover{background-color:var(--orange);transform:translateY(-2px);}
.footer-social svg{width:16px;height:16px;color:var(--white);}
.footer-col h5{font-family:var(--font-label);color:var(--white);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.88rem;transition:color .2s ease;}
.footer-col a:hover{color:var(--orange);}
.footer-col .contact-line{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;}
.footer-col .contact-line svg{width:15px;height:15px;color:var(--orange);flex-shrink:0;margin-top:3px;}
.footer-bottom{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:space-between;padding:24px 0 80px;font-size:.78rem;text-align:center;}
@media(min-width:768px){.footer-bottom{flex-direction:row;padding-bottom:24px;text-align:left;}}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -8px 24px rgba(0,0,0,.16);}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;font-family:var(--font-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.84rem;}
.sticky-cta a svg{width:16px;height:16px;}
.sticky-cta .call{background-color:var(--navy-deep);color:var(--white);}
.sticky-cta .quote{background-color:var(--orange);color:var(--white);}
@media(min-width:1024px){.sticky-cta{display:none;}body{padding-bottom:0;}}

/* ---------------------------------------------------------------------
   REVEAL-ON-SCROLL — visible by default; JS *adds* the hidden state only
   once it has confirmed IntersectionObserver works. This guarantees
   content is never hidden if JS is slow, disabled, or fails.
   --------------------------------------------------------------------- */
.reveal{opacity:1;transform:none;}
html.js-reveal-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
html.js-reveal-ready .reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------------------------------------------------------------------
   1. EXPLICIT prefers-color-scheme:dark OVERRIDE (belt-and-braces)
   Re-declares the light palette so that in-app / OS dark modes cannot
   flip any light section, card, form control, or icon to a dark
   background with dark text. Intentionally-dark sections (.section-dark,
   .site-header, .site-footer, .hero, .cta-band, .sticky-cta) already set
   their own explicit colours above and are unaffected either way.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light; }
  html,body{ background-color:#FFFFFF; color:var(--charcoal); }
  .section{ background-color:#FFFFFF; }
  .section-fog{ background-color:var(--fog); }
  .section-dark{ background-color:var(--navy-deep); color:#FFFFFF; }

  h1,h2,h3,h4{ color:var(--charcoal); }
  .section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{ color:#FFFFFF; }
  p{ color:var(--steel); }
  .section-dark p{ color:rgba(255,255,255,.72); }

  .service-card,.review-card,.gallery-card,.form-card,.check-item,.ticket-row,.hero-ticket,.tab-btn,.filter-btn,.empty-state{
    background-color:#FFFFFF; color:var(--charcoal);
  }
  .empty-state{ background-color:var(--fog); }
  .tab-panel-inner{ background-color:var(--fog); }
  .gallery-tag,.review-service,.mini-icon-item .dot{ background-color:var(--fog); }

  .faq-q{ color:var(--charcoal); background-color:transparent; }
  .faq-a-inner p{ color:var(--steel); }
  .faq-q .plus{ border-color:var(--border); }
  .faq-q .plus::before,.faq-q .plus::after{ background-color:var(--navy-deep); }

  .field input[type=text],.field input[type=tel],.field input[type=email],
  .field input[type=date],.field input[type=time],.field select,.field textarea{
    background-color:#FFFFFF !important; color:var(--charcoal) !important; border-color:var(--border);
  }
  .toggle-opt span{ background-color:#FFFFFF; color:var(--steel); }

  .btn-outline-dark{ border-color:var(--navy-deep); color:var(--navy-deep); }
  .card-link{ color:var(--navy-deep); }
  .border-light-fix{ border-color:var(--border); }
}

/* ---------------------------------------------------------------------
   Small-viewport hardening (320–414px) — prevent horizontal overflow,
   oversized buttons, clipped headings, or overlapping sticky elements.
   --------------------------------------------------------------------- */
@media(max-width:380px){
  h1{ font-size:2.15rem; }
  .btn-lg{ padding:16px 22px; font-size:.95rem; }
  .hero-badges{ gap:8px; }
  .container{ padding:0 16px; }
}
html,body{max-width:100%;overflow-x:hidden;}