/* Spartan Moving homepage PROPOSAL (11/08) on the Kobe Movers v2 template.
   Part 1 = Kobe _build/site.css copied verbatim. Part 2 (bottom) = Spartan overrides and new parts.
   Neutral warm palette: ink / paper / stone. Green appears only in the Spartan helmet logo. */
/* Kobe Movers (kobemovers.com) staging styles, v2 "photo-led light".
   Calm, photo-first, warm white sections, ink type, pill buttons.
   Master copy lives in _build/site.css; build.py copies it to site/assets/site.css. */
:root{
  --ink:#16181d;--ink-2:#23262d;--ink-soft:#3a3e47;
  --paper:#f7f5f0;--stone:#ece8e0;--card:#ffffff;--line:#ddd7cb;--line-dk:rgba(255,255,255,.16);
  --text:#16181d;--muted:#5e6169;--muted-dk:#b4b7bf;--navy:#24365f;
  --f:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1280px;--gutter:clamp(18px,4vw,48px);--r:18px;--pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 17px/1.6 var(--f);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p a,.prose a,.fine a,.consent a{text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,84px)}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.015em;line-height:1.2}
.hl{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:10px 16px;border-radius:var(--pill);z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.ph{background:#fff3a8;color:#16181d;padding:0 4px;border-radius:4px;font-weight:500}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--pill);border:1px solid var(--ink);background:var(--ink);color:#fff;font:500 16px/1 var(--f);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.btn-light:hover{background:var(--stone);border-color:var(--stone)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.arrow{display:inline-block;transition:transform .25s var(--ease)}

/* header */
.hdr{position:relative;z-index:20;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.hdr.over{position:relative;background:#fff;color:var(--ink)} /* David 11/03: white header so the logo shows in its original colours */
.brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit;margin-right:auto}
.brand .logo{height:72px;width:auto;display:block}
/* logo (TK1 straight, approved 11/03): ALWAYS the original colours (David 11/03: faithful to the original, never recolour) */
.logo .lk{fill:#002454}.logo .ld{fill:#0f1012}
.ftr .nap .logo{background:#fff;border-radius:10px;padding:10px 14px;box-sizing:content-box}
.nav{display:flex;gap:30px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;opacity:.88;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{opacity:1;border-color:currentColor}
.nav a[aria-current]{opacity:1;border-color:currentColor}
.hdr-call{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.hdr .btn{min-height:42px;padding:0 20px;font-size:15px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:var(--pill);border:1px solid currentColor;display:grid;place-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu summary span,.menu summary span::before,.menu summary span::after{display:block;width:16px;height:1.5px;background:currentColor;position:relative;content:""}
.menu summary span::before{position:absolute;top:-5px}
.menu summary span::after{position:absolute;top:5px}
.menu-panel{position:absolute;right:0;top:54px;width:min(320px,calc(100vw - 36px));background:#fff;color:var(--ink);border-radius:var(--r);padding:12px;box-shadow:0 24px 60px rgba(22,24,29,.18);display:grid}
.menu-panel a{padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:500}
.menu-panel a:hover{background:var(--paper)}
.menu-panel .sub{display:grid;padding:0 0 6px 12px;border-left:1px solid var(--line);margin:0 0 6px 12px}
.menu-panel .sub a{font-weight:400;font-size:15px;padding:7px 12px;color:var(--muted)}

/* home hero: full-bleed photo */
.hero-photo{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;color:#fff;background:var(--ink);overflow:hidden}
.hero-photo .bg{position:absolute;inset:0}
.hero-photo .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.04);animation:settle 2.4s var(--ease) both}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,14,20,.55) 0%,rgba(12,14,20,0) 22%),linear-gradient(90deg,rgba(12,14,20,.72) 0%,rgba(12,14,20,.35) 48%,rgba(12,14,20,.08) 80%),linear-gradient(0deg,rgba(12,14,20,.55) 0%,rgba(12,14,20,0) 45%)}
.hero-photo .wrap{position:relative;z-index:1;width:100%;padding-top:140px;padding-bottom:clamp(36px,6vw,72px)}
.hero-photo .kicker{display:block;font-size:14px;font-weight:500;letter-spacing:.02em;opacity:.9;margin-bottom:20px}
.hero-photo h1{max-width:12.5em;font-size:clamp(42px,6.6vw,96px);line-height:.98;letter-spacing:-.035em}
.hero-photo .lede{max-width:36em;margin:24px 0 0;font-size:clamp(17px,1.4vw,19px);color:rgba(255,255,255,.88)}
.hero-photo .hero-ctas{margin-top:32px}
.reveal{animation:rise 1s var(--ease) both}
.reveal.d1{animation-delay:.12s}.reveal.d2{animation-delay:.24s}.reveal.d3{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.1)}to{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.hero-facts{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.28);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hero-facts li{font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}
.hero-facts b{display:block;color:#fff;font-weight:500}

/* quick quote bar under the hero */
.qbar-wrap{position:relative;z-index:2;margin-top:-1px;background:var(--paper)}
.qbar{display:grid;grid-template-columns:1fr 1fr .8fr auto;gap:10px;align-items:end;background:#fff;border-radius:calc(var(--r) + 6px);padding:14px;box-shadow:0 30px 70px rgba(22,24,29,.12);transform:translateY(-50%);margin-bottom:-36px}
.qbar label{display:grid;gap:4px;padding:6px 14px;border-radius:12px;border:1px solid var(--line)}
.qbar label span{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.qbar input{border:0;padding:2px 0 4px;font:500 16px var(--f);color:var(--ink);background:transparent;outline:0;min-width:0}
.qbar label:focus-within{border-color:var(--ink)}
.qbar .btn{min-height:58px;padding:0 28px}
.qbar-note{margin:0;padding:0 4px 8px;font-size:14px;color:var(--muted)}

/* inner page hero */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(44px,6vw,80px)}
.hero .kicker{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-bottom:18px}
.hero h1{max-width:14em}
.hero .lede{max-width:40em;margin-top:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* sections */
.pad{padding:clamp(64px,9vw,128px) 0}
.alt{background:var(--stone)}
.white{background:#fff}
.dark{background:var(--ink);color:#fff}
.dark .lede,.dark .muted{color:var(--muted-dk)}
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--muted);margin:18px 0 0;max-width:38em}
.eyebrow{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-bottom:18px}
.dark .eyebrow{color:var(--muted-dk)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .btn{flex:none}
.dark .btn-line{color:#fff;border-color:rgba(255,255,255,.6)}
.dark .btn-line:hover{background:#fff;color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split img{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%}
.photo-cap{font-size:14px;color:var(--muted);margin:12px 0 0}
.aside{position:sticky;top:24px}

/* services list */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,40px);border-top:1px solid var(--line)}
.svc{display:flex;flex-direction:column;gap:10px;padding:28px 0 34px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc .n{font-size:13px;font-weight:500;color:var(--muted)}
.svc h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.025em}
.svc p{margin:0;color:var(--muted);font-size:16px;max-width:30em}
.svc .go{margin-top:auto;padding-top:8px;font-size:15px;font-weight:500}
.svc .go::after{content:" \2192";display:inline-block;transition:transform .25s var(--ease)}
.svc:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.svc:hover .go::after{transform:translateX(4px)}

/* how it works */
.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:s;display:grid}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:6px;padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font-size:14px;font-weight:500;color:var(--muted);padding-top:4px}
.steps b{display:block;font-size:21px;font-weight:500;letter-spacing:-.02em}
.steps span{display:block;color:var(--muted);margin-top:4px}

/* areas */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,2.4vw,32px);border-top:1px solid var(--line)}
.dark .area-grid{border-color:var(--line-dk)}
.area{display:block;padding:24px 0 28px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.dark .area{border-color:var(--line-dk)}
.area h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em}
.area h3::after{content:" \2192";opacity:0;display:inline-block;transform:translateX(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.area:hover h3::after{opacity:1;transform:none}
.area p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.dark .area p{color:var(--muted-dk)}

/* checklist, prose, chips, tips */
.check ol{margin:0;padding:0;list-style:none;counter-reset:c;display:grid}
.check li{counter-increment:c;padding:18px 0 18px 44px;border-top:1px solid var(--line);position:relative;color:var(--muted)}
.check li::before{content:counter(c);position:absolute;left:0;top:18px;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--ink)}
.check li b{color:var(--ink);font-weight:500}
.prose{max-width:46em}
.prose h2{font-size:clamp(28px,3vw,40px);margin:clamp(40px,5vw,56px) 0 16px}
.prose h3{margin:28px 0 10px}
.prose p,.prose li{color:#3b3f47}
.prose p{margin:0 0 16px}
.prose ul{padding-left:1.1em;margin:0 0 18px}
.prose li{margin:6px 0}
.chips{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:0;margin:0}
.chips li:not(:has(a)),.chips a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:var(--pill);font-size:15px;color:var(--ink);text-decoration:none;background:#fff}
.chips a:hover{border-color:var(--ink)}
.tips{display:grid;gap:14px}
.tips-2{grid-template-columns:1fr 1fr}
.tip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.tip h3{margin:0 0 8px;font-size:19px}
.prose .tip p,.tip p{margin:0;font-size:15.5px;color:var(--muted)}
.route{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.route .pin{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.route .pin svg{width:18px;height:18px}
.route p{margin:0}
.route b{font-weight:500;color:var(--ink)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:44em}
.faq-group+.faq-group{margin-top:48px}
.faq-group h2{margin-top:0}

/* quote card */
.qcard{background:#fff;border-radius:calc(var(--r) + 6px);padding:clamp(22px,3vw,36px);box-shadow:0 1px 0 var(--line),0 24px 60px rgba(22,24,29,.08)}
.qcard h2{font-size:clamp(26px,2.4vw,34px)}
.qcard .sub{margin:10px 0 22px;color:var(--muted);font-size:15.5px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.fld{display:grid;gap:6px}
.fld span{font-size:13px;font-weight:500;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font:400 16px var(--f);color:var(--ink);transition:border-color .2s,background .2s}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink);background:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ink)}
.qcard .btn{width:100%;min-height:54px;margin-top:4px}
.fine{font-size:14px;color:var(--muted);margin:16px 0 0}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.info-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px}
.info-card dt{font-size:14px;color:var(--muted)}
.info-card dd{margin:0;font-weight:500}

/* closing call to action */
.cta{background:var(--ink);color:#fff;padding:clamp(72px,10vw,140px) 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta h2{font-size:clamp(40px,6vw,88px);max-width:9em;letter-spacing:-.035em}
.cta .btn{background:#fff;border-color:#fff;color:var(--ink)}
.cta .btn:hover{background:var(--stone)}
.cta .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn-line:hover{background:#fff;color:var(--ink)}

/* footer */
.ftr{background:var(--ink);color:#fff;border-top:1px solid var(--line-dk);padding:clamp(48px,6vw,80px) 0 28px;font-size:15px}
.ftr .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.ftr .nap .logo{height:72px;width:auto;display:block;margin-bottom:18px}
.ftr .nap p{margin:0 0 8px;color:var(--muted-dk)}
.ftr h4{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--muted-dk)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none;color:#e9eaee}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid var(--line-dk);color:var(--muted-dk);font-size:13.5px}
.legal strong{color:#fff;font-weight:500}
.callbar{display:none}

/* responsive */
@media (max-width:1080px){
  .nav{gap:22px}.hdr-call{display:none}
  .area-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav,.hdr>.wrap>.btn{display:none}
  .menu{display:block}
  .hdr .wrap{gap:12px;min-height:68px}
  .two,.split{grid-template-columns:1fr}
  .aside{position:static}
  .svc-grid{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:1fr 1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .qbar{grid-template-columns:1fr 1fr;transform:translateY(-28px);margin-bottom:0}
  .qbar .btn{grid-column:1/-1}
  .split img{aspect-ratio:4/3}
}
@media (max-width:620px){
  body{font-size:16px;padding-bottom:76px}
  .brand .logo{height:54px}
  .hero-photo{min-height:92svh}
  .hero-photo .bg img{object-position:55% 50%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(12,14,20,.6) 0%,rgba(12,14,20,.42) 30%,rgba(12,14,20,.5) 55%,rgba(12,14,20,.85) 100%)}
  .hero-photo .wrap{padding-top:110px}
  .hero-facts{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .hero-facts li{font-size:14px}
  .hero-ctas .btn{flex:1 1 100%}
  .qbar{grid-template-columns:1fr;transform:none;margin:20px 0 0;box-shadow:0 1px 0 var(--line),0 16px 40px rgba(22,24,29,.08)}
  .qbar-wrap{padding-top:4px}
  .svc-grid,.area-grid,.tips-2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .ftr .cols{grid-template-columns:1fr}
  .callbar{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(247,245,240,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .callbar .btn{min-height:50px;padding:0 14px}
}
@media (max-width:620px){
  .hero-facts li:not(:last-child){display:none}
  .hero-facts{padding-top:16px;margin-top:28px}
  .hero-photo{min-height:auto}
  .hero-photo .wrap{padding-top:150px;padding-bottom:32px}
}
/* QC fixes */
.prose .chips{padding-left:0}
.two .area-grid{grid-template-columns:1fr 1fr}
.qbar input{height:30px;line-height:30px}
@media (max-width:620px){.two .area-grid{grid-template-columns:1fr}}
/* quote form: honeypot (bots fill it, people never see it) + error line */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ferr{grid-column:1/-1;margin:0 0 4px;padding:10px 12px;border-radius:10px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:14px}
.ferr[hidden]{display:none}
/* Kobe job photos (build.py PHOTOS): never stretched past ~1.25x their pixel size */
.kfig{margin:0 0 28px}
.kfig img,.split .kfig img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;border-radius:var(--r);background:var(--line)}
.kpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,16px);max-width:660px;margin:32px 0 28px}
.kpair .kfig{margin:0}
.kpair .kfig img{aspect-ratio:4/5;object-fit:cover}
/* inner-page photo hero (David 11/03: the page's own image is the hero; same treatment as the home hero) */
.hero-in{min-height:min(78svh,680px)}
.hero-in .bg img{object-position:50% 50%}
.hero-in .wrap{padding-top:clamp(56px,7vw,96px)}
.hero-in h1{max-width:13em;font-size:clamp(40px,6vw,84px)}
.hero-in .crumbs{color:rgba(255,255,255,.78)}
.hero-in .lede a{color:#fff}
@media (max-width:620px){.hero-in .bg img{object-position:50% 50%}.hero-in .wrap{padding-top:120px}}

/* ======================= Part 2: Spartan Moving ======================= */
:root{--navy:var(--ink);--m:var(--f)} /* no blue: focus ring in ink; quote-form.js messages use the site font */
:focus-visible{outline-color:var(--ink)}
.hero-photo :focus-visible,.dark :focus-visible,.cta :focus-visible,.ftr :focus-visible,.hdr.over :focus-visible{outline-color:#fff}

/* header over the photo (the look David picked on the Kobe home: transparent, white type) */
.hdr.over{position:absolute;top:0;left:0;right:0;background:transparent;color:#fff;border-bottom:0}
.hdr.over .btn{background:#fff;border-color:#fff;color:var(--ink)}
.hdr.over .btn:hover{background:var(--stone);border-color:var(--stone)}
.brand{gap:12px}
.brand .helm{height:46px;width:auto;display:block}
.brand .word{font-size:23px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand .word b{font-weight:600}
.nav{gap:26px}
.menu-panel{color:var(--ink)}

/* hero: dark gradient that works for any photo (bright sky or dark interior) */
.hero-photo{min-height:min(100svh,920px)}
.hero-photo .bg img{object-position:50% 40%}
.hero-photo::after{background:
  linear-gradient(180deg,rgba(10,11,14,.62) 0%,rgba(10,11,14,.18) 20%,rgba(10,11,14,0) 34%),
  linear-gradient(90deg,rgba(10,11,14,.70) 0%,rgba(10,11,14,.42) 45%,rgba(10,11,14,.12) 78%),
  linear-gradient(0deg,rgba(10,11,14,.78) 0%,rgba(10,11,14,.35) 38%,rgba(10,11,14,0) 62%)}
.hero-photo h1{max-width:9.5em;font-size:clamp(46px,7.4vw,112px)}
.hero-photo .lede b{color:#fff;font-weight:500}
.hero-photo .wrap{padding-bottom:clamp(110px,10vw,140px)}
.hero-facts a{color:inherit;text-decoration:none}
.hero-facts a:hover{text-decoration:underline;text-underline-offset:3px}

/* quote bar (Kobe bar look) carrying the Spartan 2-step form + quote-form.js states */
.qbar-wrap{scroll-margin-top:24px}
.qbar{display:block;padding:14px 14px 10px}
.qbar form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr) auto;gap:10px;align-items:stretch}
.qbar form.s2{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr) auto}
.qbar .qf{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:7px 14px;border:1px solid var(--line);border-radius:12px;min-width:0;transition:border-color .2s,box-shadow .2s}
.qbar .qf label{display:block;padding:0;border:0;border-radius:0;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.qbar .qf input,.qbar .qf select{border:0;padding:0;height:28px;font:500 16px var(--f);color:var(--ink);background:transparent;outline:0;min-width:0;width:100%}
.qbar .qf select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316181d' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center no-repeat;padding-right:20px;cursor:pointer}
.qbar .qf input::placeholder{color:#9a9ca3;font-weight:400}
.qbar .qf:focus-within{border-color:var(--ink)}
.qbar .qf.invalid{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.qbar .qf .qe{font:500 12px/1.35 var(--f);letter-spacing:0;color:var(--ink);margin-top:2px}
.qbar .btn{min-height:62px;padding:0 28px}
.qmeta{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 6px 2px;font-size:13.5px;color:var(--muted)}
.qmeta i{font-style:normal;color:var(--ink);font-size:9px;vertical-align:2px;margin-right:4px}
.qmeta a{color:inherit;text-decoration:none}
.qmeta a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.qmeta .qerr{color:var(--ink);font-weight:500}
.qdone{display:flex;gap:16px;align-items:center;padding:14px 10px}
.qdone .ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:18px}
.qdone b{display:block;font-size:19px;font-weight:500;letter-spacing:-.015em}
.qdone span{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.qdone .qsub{font:500 12px var(--f)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}

/* services with photos */
.svc-grid.four{grid-template-columns:repeat(4,1fr)}
.svc .ph{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--stone);margin-bottom:10px}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc:hover .ph img{transform:scale(1.03)}
.svc{padding-top:24px}

/* how it works: step tags */
.steps .k{display:inline-block;margin-left:10px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;vertical-align:2px}
.steps li > div > span.k{display:inline-block;margin-top:0}
.kpair img{border-radius:var(--r)}

/* the Spartan standard: four promises */
.std-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,40px);border-top:1px solid var(--line)}
.std-grid > div{padding:28px 0 8px}
.std-grid .n{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:10px}
.std-grid h3{font-size:clamp(21px,1.9vw,26px);letter-spacing:-.025em}
.std-grid p{margin:10px 0 0;color:var(--muted);font-size:16px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,4vw,48px)}
.tier{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:28px}
.tier .tag{font-size:13px;font-weight:500;color:var(--muted)}
.tier h3{margin-top:10px;font-size:26px}
.tier .amt{font-size:clamp(34px,3.2vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:14px 0 4px}
.tier .amt small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:6px}
.tier ul{list-style:none;margin:16px 0 24px;padding:0;display:grid}
.tier li{padding:10px 0;border-top:1px solid var(--line);font-size:15.5px}
.tier .btn{margin-top:auto}
.tier.pop{background:var(--ink);border-color:var(--ink);color:#fff}
.tier.pop .tag,.tier.pop .amt small{color:var(--muted-dk)}
.tier.pop li{border-color:var(--line-dk)}
.tier.pop .btn{background:#fff;border-color:#fff;color:var(--ink)}
.tier.pop .btn:hover{background:var(--stone)}
.finerow{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.finerow li{padding:8px 16px;border:1px solid var(--line);border-radius:var(--pill);font-size:14.5px;color:var(--muted);background:var(--paper)}
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
.incl > div{padding:24px 0 6px}
.incl .tag{font-size:13px;font-weight:500;color:var(--muted)}
.incl h3{margin-top:8px}
.incl p{margin:8px 0 0;color:var(--muted);font-size:15.5px}
.flexnote{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;color:var(--muted);max-width:56em}
.flexnote b{color:var(--ink);font-weight:500}

/* crew (dark) */
.crew-list{list-style:none;margin:28px 0 30px;padding:0;display:grid}
.crew-list li{padding:14px 0;border-top:1px solid var(--line-dk);color:#e9eaee}
.crew-list li:last-child{border-bottom:1px solid var(--line-dk)}
.dark .big{font-size:clamp(18px,1.5vw,21px);color:var(--muted-dk);margin:22px 0 0;max-width:32em}
.dark .big b{color:#fff;font-weight:500}
.dark .btn-light:hover{background:var(--stone)}
.crew-ph{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crew-ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.crew-ph .wide{grid-column:1/-1;aspect-ratio:4/3}
.crew-ph .sq{aspect-ratio:1/1}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev{margin:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.rev p{margin:0 0 22px;font-size:17px;line-height:1.55}
.rev footer{margin-top:auto;font-size:14.5px;color:var(--muted)}
.rev footer b{color:var(--ink);font-weight:500;margin-right:8px}
.revfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:28px;font-size:15px;color:var(--muted)}
.revfoot b{color:var(--ink);font-weight:500;margin-right:6px}

/* service area link groups */
.area-groups{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px) clamp(32px,5vw,72px)}
.area-groups .g.full{grid-column:1/-1}
.area-groups h3{font-size:19px;margin:0 0 14px}
.area-note{margin:clamp(28px,4vw,40px) 0 0;color:var(--muted)}

/* closing call to action + second quote form */
.cta .wrap{display:block}
.cta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta-row p{margin:0;max-width:26em;color:var(--muted-dk);font-size:clamp(17px,1.4vw,19px)}
.cta-side{display:grid;gap:22px;justify-items:start}
.endform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr) auto;gap:10px;margin-top:clamp(40px,5vw,64px);background:#fff;border-radius:calc(var(--r) + 6px);padding:14px;color:var(--ink)}
.endform .f{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:7px 14px;border:1px solid var(--line);border-radius:12px;min-width:0}
.endform label{font-size:12px;font-weight:500;color:var(--muted)}
.endform input,.endform select{border:0;padding:0;height:28px;font:500 16px var(--f);color:var(--ink);background:transparent;outline:0;min-width:0;width:100%}
.endform .f:focus-within{border-color:var(--ink)}
.endform .f.invalid{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.endform button{min-height:62px}
.cta .endform .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.cta .endform .btn:hover{background:var(--ink-soft)}

/* footer extras */
.ftr .nap .brand{margin-bottom:18px}
.ftr .cities{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dk);font-size:14px}
.ftr .cities a{color:var(--muted-dk)}
.ftr .cities a:hover{color:#fff}
.ftr li{color:var(--muted-dk)}

/* responsive (Spartan parts) */
@media (max-width:1180px){
  .nav{gap:18px}.nav a{font-size:14px}
  .qbar form,.endform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qbar form .btn,.endform .btn{grid-column:span 1}
  .qbar form.s2{grid-template-columns:1fr 1fr}
  .qbar form.s2 .phone{grid-column:1/-1}
  .qbar form.s2 .btn{grid-column:1/-1}
  .std-grid,.incl{grid-template-columns:1fr 1fr}
  .svc-grid.four{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .qbar{transform:translateY(-28px);margin-bottom:0}
  .tiers{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr 1fr}
  .area-groups{grid-template-columns:1fr}
}
@media (max-width:620px){
  .brand .helm{height:38px}.brand .word{font-size:20px}
  .hdr.over .wrap{min-height:68px}
  .hero-photo h1{font-size:clamp(46px,13.5vw,64px)}
  .hero-photo .wrap{padding-top:92px;padding-bottom:36px}
  .hero-photo .bg img{object-position:28% 50%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(10,11,14,.66) 0%,rgba(10,11,14,.45) 30%,rgba(10,11,14,.55) 55%,rgba(10,11,14,.9) 100%)}
  .hero-facts li:not(:last-child){display:none}
  .hero-facts li:nth-child(2){display:block}
  .hero-facts li:last-child{display:none}
  .qbar{transform:none;margin:20px 0 0}
  .qbar form,.qbar form.s2,.endform{grid-template-columns:1fr 1fr}
  .qbar form .phone,.qbar form .btn,.endform .f:nth-child(5),.endform .btn{grid-column:1/-1}
  .qbar form.s2 .qf{grid-column:1/-1}
  .qmeta{font-size:13px;gap:4px 14px}
  .svc-grid.four,.std-grid,.incl,.rev-grid{grid-template-columns:1fr}
  .crew-ph .sq{aspect-ratio:4/3}
  .tier{padding:22px}
  .callbar a.btn-line{background:#fff}
}
.steps .k{margin-left:0}

/* ======================= Part 3: David 11/08 "more life" + sticky header + moving-first hero ======================= */
:root{--sand:var(--paper);--clay:var(--stone);--sky:var(--paper)} /* 11/08 revert: warm tints withdrawn, Kobe neutrals only */
html{scroll-padding-top:84px}
.sand{background:var(--sand)}.clay{background:var(--clay)}.sky{background:var(--sky)}
/* primary buttons: ink on light, white on photos and dark (no accent colour) */
.btn-accent{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-accent:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:#fff}
.hero-photo .btn-accent,.photo-sec .btn-accent,.cta .btn.btn-accent{background:#fff;border-color:#fff;color:var(--ink)}
.hero-photo .btn-accent:hover,.photo-sec .btn-accent:hover,.cta .btn.btn-accent:hover{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.hero-photo .qbar .btn-accent{background:var(--ink);border-color:var(--ink);color:#fff}
.hero-photo .qbar .btn-accent:hover{background:var(--ink-soft);border-color:var(--ink-soft)}

/* sticky header: own background, ink text, logo in its original colours, pill hover per tab */
.hdr.sticky{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.96);color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.hdr.sticky .wrap{min-height:76px}
.hdr.sticky .nav{gap:4px}
.hdr.sticky .nav a{opacity:1;padding:9px 15px;border:0;border-radius:var(--pill);transition:background .2s var(--ease)}
.hdr.sticky .nav a:hover{background:var(--stone);border:0}
.hdr.sticky .menu summary{border-color:var(--line)}
.hdr.sticky .btn-accent{min-height:44px}

/* hero: the moving line comes first, photo collage of moving scenes, quote bar inside the hero */
.hero-move{flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:min(calc(100svh - 77px),860px)}
.hero-move::after{background:
  linear-gradient(90deg,rgba(14,12,10,.78) 0%,rgba(14,12,10,.52) 42%,rgba(14,12,10,.18) 75%),
  linear-gradient(0deg,rgba(14,12,10,.7) 0%,rgba(14,12,10,.2) 40%,rgba(14,12,10,0) 60%)}
.hero-move .bg img{object-position:50% 50%}
.hero-photo.hero-move .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(36px,4.5vw,64px);padding-bottom:28px}
.hero-line{margin:0 0 18px;font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#fff;max-width:20em}
.hero-move h1{font-size:clamp(48px,6vw,92px);max-width:none;color:#fff}
.hero-move .lede{margin-top:18px;max-width:34em}
.hero-move .hero-ctas{margin-top:26px}
.hero-proof{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;font-size:14.5px;color:rgba(255,255,255,.85)}
.hero-proof a{color:#fff;font-weight:500;text-underline-offset:3px}
.hero-proof span+span::before,.hero-proof a+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6);margin:0 12px 3px 0;vertical-align:middle}
.hero-collage{position:relative;padding-bottom:22%}
.hero-collage figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);background:var(--sand)}
.hero-collage .c1{aspect-ratio:4/3}
.hero-collage .c2{position:absolute;left:-14%;bottom:0;width:62%;aspect-ratio:4/3;border:5px solid var(--paper)}
.hero-collage img,.hero-collage .slot{width:100%;height:100%;object-fit:cover}
.hero-move .qbar-wrap{background:transparent;position:relative;z-index:1;padding-bottom:28px}
.hero-move .qbar{transform:none;margin:0}

/* photo slots that are still empty (staging only) */
.slot{width:100%;height:100%;min-height:140px;display:grid;place-items:center;text-align:center;padding:16px;
  background:repeating-linear-gradient(135deg,#ece8e0 0 14px,#e4dfd5 14px 28px);color:#5e6169;font-size:13px;line-height:1.4}
.slot b{display:block;margin:4px auto;max-width:28em;font-weight:600}
.slot code{font-size:12px;opacity:.85}

/* wide photo band */
.band{position:relative;min-height:clamp(360px,42vw,600px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.band .bg,.photo-sec .bg,.imghead .bg{position:absolute;inset:0}
.band .bg img,.photo-sec .bg img,.imghead .bg img,.band .bg .slot,.photo-sec .bg .slot,.imghead .bg .slot{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.72) 0%,rgba(14,12,10,.15) 55%,rgba(14,12,10,0) 100%);pointer-events:none}
.band .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(32px,5vw,64px)}
.band-line{margin:0;font-size:clamp(26px,3.2vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.1;max-width:20em}

/* how it works: one big photo */
.bigph{margin:32px 0 0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.bigph img{width:100%;height:100%;object-fit:cover}

/* gallery */
.gallery-sec{background:var(--paper)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(160px,17vw,260px);gap:12px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery .g1{grid-column:span 2;grid-row:span 2}
.gallery .g4,.gallery .g5,.gallery .g6{grid-column:span 2}

/* photo-backed dark sections (crew, closing call to action) */
.photo-sec{position:relative;overflow:hidden}
.photo-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.86) 0%,rgba(14,12,10,.62) 55%,rgba(14,12,10,.4) 100%);pointer-events:none}
.photo-sec > .wrap{position:relative;z-index:1}
.crew-copy{max-width:620px}

/* image-backed section header (service area) */
.imghead{position:relative;min-height:clamp(320px,34vw,460px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.imghead::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.75) 0%,rgba(14,12,10,.2) 60%,rgba(14,12,10,.05) 100%);pointer-events:none}
.imghead .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(32px,4.5vw,56px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px}
.imghead .eyebrow{color:rgba(255,255,255,.85);width:100%;margin:0}
.imghead h2{margin-right:auto}
#area > .pad{padding-top:clamp(48px,6vw,80px)}

@media (max-width:1180px){.hdr.sticky .nav a{padding:8px 10px}}
@media (max-width:900px){
  .hero-photo.hero-move .wrap.hero-grid{grid-template-columns:1fr}
  .hero-collage{max-width:560px;padding-bottom:18%}
  .hero-collage .c2{left:auto;right:-4%}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery .g1,.gallery .g4,.gallery .g5,.gallery .g6{grid-column:span 1;grid-row:span 1}
  .gallery .g1,.gallery .g6{grid-column:span 2}
}
@media (max-width:620px){
  .hdr.sticky .wrap{min-height:64px}
  html{scroll-padding-top:72px}
  .hero-move{min-height:auto}
  .hero-photo.hero-move .wrap.hero-grid{padding-top:28px;padding-bottom:20px;gap:22px}
  .hero-move::after{background:linear-gradient(180deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,.6) 50%,rgba(14,12,10,.85) 100%)}
  .hero-line{font-size:20px;margin-bottom:12px}
  .hero-move h1{font-size:clamp(42px,12vw,56px)}
  .hero-move .lede{font-size:16px}
  .hero-proof span:not(:first-of-type){display:none}
  .hero-collage{padding-bottom:0;display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
  .hero-collage .c2{position:static;width:auto;border:0}
  .hero-collage figure{aspect-ratio:4/3}
  .slot{font-size:11px;padding:8px;min-height:0}
  .gallery{grid-auto-rows:150px;gap:8px}
  .band-line{font-size:24px}
}
.hero-photo.hero-move .qbar-wrap .wrap{padding-top:0;padding-bottom:0}
.hero-move h1{font-size:clamp(46px,5.6vw,86px)}
.hero-proof span+span::before,.hero-proof a+span::before{display:none}
.hero-proof{gap:6px 24px}
@media (max-width:620px){.hero-proof span{display:none}}

/* facts band under the hero: the live stats + strip, word for word */
.facts{background:#fff;border-bottom:1px solid var(--line)}
.facts .wrap{padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(24px,3vw,36px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px clamp(20px,3vw,40px)}
.stat .n{font-size:clamp(40px,4.4vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1}
.stat .n em{font-style:normal;font-size:.55em;margin-left:4px;vertical-align:.45em;color:var(--muted)}
.stat .l{margin-top:8px;font-size:15px;color:var(--muted)}
.strip{list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 40px;font-size:14.5px}
.strip span{color:var(--muted);margin-right:8px}
.strip b{font-weight:500}
@media (max-width:620px){.stats{grid-template-columns:1fr 1fr}.strip{gap:6px 24px}}
.gallery-sec{background:#fff}
/* review / profile links (David 11/08): text pills, open in a new tab */
.profiles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 28px}
.profiles .pl{font-size:14px;font-weight:500;color:var(--muted)}
.profiles ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.profiles a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:var(--pill);background:#fff;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.profiles a:hover{border-color:var(--ink)}
.profiles.on-dark .pl{color:rgba(255,255,255,.8)}
.profiles.on-dark a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.profiles.on-dark a:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-move .profiles{margin:16px 0 0}
.hero-move .profiles a{padding:5px 12px;font-size:13.5px}
.ftr .profiles{margin:40px 0 0}
.ftr .profiles a{color:#fff}
.ftr .profiles a:hover{color:var(--ink);text-decoration:none}
.ftr .cities{margin-top:24px}
/* review links (Kobe pattern, David 11/08) */
.hero-reviews{margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.9)}
.hero-reviews a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hero-reviews .stars{letter-spacing:2px;color:#fff}
.readon{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.readon .btn{min-height:44px;padding:0 20px;font-size:15px}
.readon + .revfoot{margin-top:22px}
.photo-sec .bg .slot,.band .bg .slot,.imghead .bg .slot{place-items:start end;padding:24px 32px}
/* exact rates per crew size (David 11/08) */
.tier .rates{margin:16px 0 4px;display:grid;gap:0}
.tier .rates div{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.tier .rates div:first-child{border-top:0;padding-top:0}
.tier .rates dt{font-size:15.5px;color:var(--muted)}
.tier .rates dd{margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.tier .rates dd small{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:3px}
.ratenote{margin:18px 0 0;font-size:15px;color:var(--muted)}
.ratenote + .finerow{margin-top:12px}
/* quote form v2 (David 11/08): price right after step 1, optional email step */
.qhelp{margin:8px 6px 0;font-size:13.5px;color:var(--muted)}
.qbar .qf input,.qbar .qf select{height:32px}
.qprice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,3vw,40px);align-items:start;padding:12px 10px 8px}
.qp-k{display:block;font-size:13.5px;font-weight:500;color:var(--muted)}
.qp-amt{margin:6px 0 0;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.qp-amt b{font-size:clamp(40px,3.8vw,54px);font-weight:500;letter-spacing:-.04em;margin-left:8px}
.qp-amt small{font-size:16px;font-weight:400;color:var(--muted);letter-spacing:0}
.qp-fine{margin:6px 0 0;font-size:14px;color:var(--muted)}
.qp-text{margin:10px 0 0;font-size:15px}
.qp-text span{color:var(--muted)}
.qp-edit{margin-top:8px;padding:0;border:0;background:none;font:500 14px var(--f);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qp-s2{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
.qp-s2h{grid-column:1/-1;margin:0;font-size:15px;color:var(--muted)}
.qp-s2h b{color:var(--ink);font-weight:500}
.qp-s2 .qf{background:#fff}
.qp-s2 .qf:nth-of-type(3){grid-column:1/-1}
.qp-s2 .btn{grid-column:1/-1;min-height:52px}
.qprice .qdone{grid-column:auto;padding:6px 0}
@media (max-width:900px){.qprice{grid-template-columns:1fr}}
@media (max-width:620px){
  .qbar .qf{padding:9px 14px;min-height:62px}
  .qbar .qf input,.qbar .qf select{height:36px;font-size:17px}
  .qbar form .btn{min-height:58px}
  .qp-s2{grid-template-columns:1fr}
  .qp-amt b{display:block;margin:2px 0 0}
}
.qbar{color:var(--ink)}
.qbar form.qp-s2{grid-template-columns:1fr 1fr}
.qbar form.qp-s2 .qf:nth-of-type(3),.qbar form.qp-s2 .btn,.qbar form.qp-s2 .qp-s2h{grid-column:1/-1}
.qbar .qf .qe{display:none}
.qbar .qf.invalid .qe{display:block}
@media (max-width:620px){.qbar form.qp-s2{grid-template-columns:1fr}}
#qbar{scroll-margin-top:90px}
.qp-note{color:var(--ink)}
/* crew section with the real crew photo (11/08) */
.crew-split{align-items:center}
.crewph{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.crewph img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.dark .btn-light{background:#fff;border-color:#fff;color:var(--ink)}

/* ======= Hero v3 (David 11/08): one integrated photo (Golden Gate + our truck), no cards inside the hero ======= */
.hero-move{justify-content:center;min-height:min(calc(100svh - 77px - 118px),840px)}
.hero-move .bg img{transform:none;animation:none;object-position:62% 100%}   /* keep road + truck; crop sky first; no zoom = no softness */
.hero-move::after{background:
  linear-gradient(90deg,rgba(8,10,14,.70) 0%,rgba(8,10,14,.52) 26%,rgba(8,10,14,.20) 44%,rgba(8,10,14,0) 56%),
  linear-gradient(180deg,rgba(8,10,14,.18) 0%,rgba(8,10,14,0) 30%)}
.hero-photo.hero-move .wrap.hero-grid{grid-template-columns:minmax(0,1fr);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(72px,7vw,96px)}
.hero-copy{max-width:560px}
.hero-move .hero-line{font-size:clamp(22px,2vw,28px);text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero-move h1{font-size:clamp(46px,5.4vw,82px);text-shadow:0 2px 30px rgba(0,0,0,.18)}
.hero-move .lede{color:rgba(255,255,255,.9)}
/* quote bar attached to the bottom edge of the hero, below the truck */
.qbar-wrap#quote{background:var(--paper);position:relative;z-index:3}
.qbar-wrap#quote .qbar{transform:translateY(-44px);margin:0 0 -44px}
@media (max-width:900px){
  .hero-move .bg img{object-position:72% 100%}
  .hero-move::after{background:linear-gradient(180deg,rgba(8,10,14,.62) 0%,rgba(8,10,14,.5) 45%,rgba(8,10,14,.08) 72%,rgba(8,10,14,0) 100%)}
  .hero-copy{max-width:640px}
}
@media (max-width:620px){
  .hero-move{min-height:auto}
  .hero-move .bg img{object-position:76% 100%}
  .hero-photo.hero-move .wrap.hero-grid{padding-top:26px;padding-bottom:78vw}   /* room under the text for the truck */
  .hero-move::after{background:linear-gradient(180deg,rgba(8,10,14,.64) 0%,rgba(8,10,14,.55) 48%,rgba(8,10,14,.1) 66%,rgba(8,10,14,0) 80%)}
  .qbar-wrap#quote .qbar{transform:translateY(-26px);margin:0 0 -6px}
}
@media (max-width:620px){
  .hero-move{background:#1b1e24}
  .hero-move .bg{top:auto;bottom:0;height:min(124vw,560px)}          /* photo anchored to the bottom, not stretched to the tall hero */
  .hero-move .bg img{object-position:74% 100%}
  .hero-photo.hero-move .wrap.hero-grid{padding-bottom:min(66vw,300px)}
  .hero-move::after{background:linear-gradient(180deg,#1b1e24 0%,rgba(27,30,36,.96) 38%,rgba(27,30,36,.6) 55%,rgba(27,30,36,.1) 70%,rgba(27,30,36,0) 80%)}
}
@media (max-width:620px){
  .hero-move .bg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%);mask-image:linear-gradient(180deg,transparent 0%,#000 34%)}
  .hero-move .bg img{object-position:86% 100%}
  .hero-move::after{background:linear-gradient(180deg,rgba(27,30,36,.0) 0%,rgba(27,30,36,0) 100%)}
}
@media (max-width:620px){
  .hero-move::after{background:linear-gradient(180deg,rgba(27,30,36,0) 0%,rgba(27,30,36,0) 44%,rgba(27,30,36,.6) 56%,rgba(27,30,36,.45) 68%,rgba(27,30,36,0) 80%)}
  .hero-move .hero-reviews,.hero-move .hero-ctas{text-shadow:0 1px 10px rgba(0,0,0,.45)}
}
@media (max-width:620px){.hero-move .hero-ctas{text-shadow:none}}
/* Trustindex reviews widget (JS): reserve space so the page does not jump while it loads */
#reviews-widget{min-height:370px;margin-top:40px}
@media (max-width:620px){#reviews-widget{min-height:460px}}
/* quote form: email in step 1 (David 11/08). 6 fields + button in one row on desktop */
.qbar form#qform{grid-template-columns:minmax(0,.82fr) minmax(0,.82fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.3fr) auto}
.qbar form#qform .btn{padding:0 22px}
.endform{grid-template-columns:minmax(0,.82fr) minmax(0,.82fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.3fr) auto}
@media (max-width:1180px){
  .qbar form#qform,.endform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qbar form#qform .btn,.endform .btn{grid-column:1/-1}
}
@media (max-width:620px){
  .qbar form#qform,.endform{grid-template-columns:1fr 1fr}
  .qbar form#qform .phone,.qbar form#qform .email,.qbar form#qform .btn{grid-column:1/-1}
  .endform .f:nth-child(5),.endform .f:nth-child(6),.endform .btn{grid-column:1/-1}
}
/* Text us (415) 358-6839 + TCPA consent (David 11/08) */
.hdr.sticky .hdr-text{min-height:42px;padding:0 18px;font-size:15px;background:transparent;color:var(--ink);border-color:var(--line)}
.hdr.sticky .hdr-text:hover{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.hdr.sticky .wrap > .btn + .btn{margin-left:-16px}
@media (max-width:1100px){.hdr.sticky .hdr-text{display:none}}
.hero-text{margin:14px 0 0;font-size:15px;color:rgba(255,255,255,.9)}
.hero-text a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tcpa{margin:6px 6px 0;font-size:12px;line-height:1.45;color:var(--muted)}
.endform .tcpa{grid-column:1/-1;margin:2px 4px 0}
.callbar.cb3{grid-template-columns:1fr 1fr 1.25fr;gap:8px}
.callbar.cb3 .btn{padding:0 10px;font-size:15px}
/* availability line under the date row (David 11/08): same rules as the phone AI, via /site-availability.php */
.qavail{margin:8px 6px 0;font-size:13.5px;line-height:1.4;color:var(--muted)}
/* desktop (one row): the line gets its own row under the fields; 3 columns: it already follows the date row;
   phone (2 columns): it follows the date + home size row */
.qbar form#qform .qavail{grid-column:1/-1;order:99;margin:-2px 4px 0}
@media (max-width:1180px){.qbar form#qform .qavail{order:0}}
@media (max-width:620px){
  .qbar form#qform > *{order:3}
  .qbar form#qform > .qf:nth-of-type(-n+4){order:1}
  .qbar form#qform .qavail{order:2}
}
.qavail[hidden]{display:none}
.qavail.is-open{color:var(--ink);font-weight:500}
.qavail.is-open i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f8f4e;margin-right:8px;vertical-align:1px}
.qavail a{color:var(--ink);font-weight:500;text-underline-offset:3px;white-space:nowrap}

/* 11/08 form v2 step 2: optional "Special items or notes" field */
.qp-s2 .qf-notes{grid-column:1/-1}
.qp-s2 textarea{display:block;width:100%;border:0;padding:2px 0 4px;font:500 16px var(--f);color:var(--ink);background:transparent;outline:0;resize:vertical;min-height:44px}
/* footer Follow us (YouTube / Facebook / Instagram), monochrome icons, green on hover (David 11/08) */
.ftr .follow{display:flex;align-items:center;gap:14px;margin:28px 0 0}
.ftr .follow .pl{font-size:14px;font-weight:500;color:var(--muted-dk)}
.ftr .follow ul{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.ftr .follow a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dk);color:#e9eaee;text-decoration:none;transition:color .2s,border-color .2s}
.ftr .follow a:hover{color:#019054;border-color:#019054;background:#fff}
.watch-yt{font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ======================= Part 4: FULL COLOR (David 11/08: "don't use these black-and-white photos any more") =======================
   Photos show in their natural color. No full-photo dark wash, no desaturation, no darkened blur.
   Text on a photo gets only a soft gradient on the text side (max .55 at the text edge, fading to 0 by ~45%).
   Closing calls to action: full-color photo + text on a light card. Dark panels become paper / soft-green cards.
   Footer stays dark ink (it has no photo). */
:root{--tint:#eaf3ee;--tint-line:#c9dfd2;--soft:rgba(10,11,14,.55)}
.hero-photo{background:var(--stone)}
.hero-photo .bg img{filter:none}
.hero-photo::after,.hero-move::after{background:linear-gradient(90deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,.34) 24%,rgba(10,11,14,0) 46%)}
.hero-photo .hero-copy,.hero-photo .wrap > .kicker,.hero-photo h1,.hero-photo .lede,.hero-photo .hero-line,.hero-photo .hero-proof,.hero-photo .hero-reviews,.hero-photo .hero-text,.hero-photo .crumbs{text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.hero-photo .btn{text-shadow:none}
/* photo bands and image headers: text side only (bottom-left) */
.band::after{background:linear-gradient(90deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,.25) 30%,rgba(10,11,14,0) 48%)}
.band-line{max-width:11.5em;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.imghead::after{background:linear-gradient(0deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,.2) 28%,rgba(10,11,14,0) 48%)}
.imghead h2,.imghead .eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
/* closing call to action: full-color photo, text on a light card */
.cta.photo-sec{background:var(--stone)}
.photo-sec::after,.cta.photo-sec::after{background:none}
.cta.photo-sec{color:var(--ink)}
.cta.photo-sec .cta-row{background:rgba(255,255,255,.94);border-radius:calc(var(--r) + 6px);padding:clamp(24px,3.4vw,44px);box-shadow:0 24px 60px rgba(22,24,29,.14);max-width:860px}
.cta.photo-sec h2{color:var(--ink);font-size:clamp(38px,5vw,72px)}
.cta.photo-sec .cta-row p{color:var(--muted)}
.cta.photo-sec .btn.btn-accent{background:var(--ink);border-color:var(--ink);color:#fff}
.cta.photo-sec .btn.btn-accent:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.cta.photo-sec .btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta.photo-sec .btn-line:hover{background:var(--ink);color:#fff}
.cta.photo-sec :focus-visible{outline-color:var(--ink)}
.cta.photo-sec .endform{box-shadow:0 24px 60px rgba(22,24,29,.14)}
/* dark panels -> light: the crew section and any .dark band become stone; the popular price card becomes soft green */
.dark{background:var(--stone);color:var(--ink)}
.dark .lede,.dark .muted,.dark .eyebrow,.dark .big{color:var(--muted)}
.dark .big b{color:var(--ink)}
.dark .crew-list li{color:var(--ink);border-color:var(--line)}
.dark .crew-list li:last-child{border-color:var(--line)}
.dark .btn-light{background:var(--ink);border-color:var(--ink);color:#fff}
.dark .btn-light:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.dark .btn-line{color:var(--ink);border-color:var(--ink)}
.dark .btn-line:hover{background:var(--ink);color:#fff}
.dark .area-grid,.dark .area{border-color:var(--line)}
.dark .area p{color:var(--muted)}
.dark :focus-visible{outline-color:var(--ink)}
.tier.pop{background:var(--tint);border-color:var(--tint-line);color:var(--ink)}
.tier.pop .tag,.tier.pop .amt small{color:var(--muted)}
.tier.pop li{border-color:var(--tint-line)}
.tier.pop .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.tier.pop .btn:hover{background:var(--ink-soft)}
/* phone hero: text on paper above the full-color photo (no dark top panel) */
@media (max-width:620px){
  .hero-photo,.hero-move{background:var(--paper);color:var(--ink)}
  .hero-move .bg{-webkit-mask-image:none;mask-image:none}
  .hero-photo::after,.hero-move::after{background:none}
  .hero-photo .hero-copy,.hero-photo h1,.hero-photo .lede,.hero-photo .hero-line,.hero-photo .hero-proof,.hero-photo .hero-reviews,.hero-photo .hero-text,.hero-photo .crumbs,.hero-photo .kicker{color:var(--ink);text-shadow:none}
  .hero-photo .lede{color:var(--muted)}
  .hero-photo .lede b,.hero-photo .hero-proof a,.hero-photo .hero-reviews a,.hero-photo .hero-text a,.hero-photo .crumbs a{color:var(--ink)}
  .hero-photo .btn-accent{background:var(--ink);border-color:var(--ink);color:#fff}
  .hero-photo .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-move .hero-reviews,.hero-move .hero-ctas{text-shadow:none}
  .band::after{background:linear-gradient(0deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,0) 50%)}
  .band-line{max-width:none}
}

/* ======================= Part 5: photo life + homepage layout for the template pages (David 11/08) ======================= */
/* full-color photo band under a text-only page header (no overlay, no text on it) */
.lp-band{height:clamp(220px,30vw,420px);overflow:hidden;background:var(--stone)}
.lp-band img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
/* photo card between long article sections */
.lp-fig{margin:clamp(18px,2.6vw,30px) 0;border-radius:calc(var(--r) + 4px);overflow:hidden;aspect-ratio:16/8;background:var(--stone)}
.lp-fig img{width:100%;height:100%;object-fit:cover;display:block}
/* 'our work' strip of 4 photos */
.lp-strip{background:#fff;padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-k{margin:0 0 clamp(18px,2.4vw,28px);font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.lp-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,clamp(140px,15vw,230px));gap:12px}
.lp-grid figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--stone)}
.lp-grid figure:first-child{grid-row:span 2}
.lp-grid figure:last-child{grid-column:span 2}
.lp-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.lp-grid figure:hover img{transform:scale(1.03)}
@media (max-width:620px){
  .lp-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:140px;gap:8px}
  .lp-grid figure:first-child{grid-row:auto;grid-column:span 2;height:200px}
  .lp-grid figure:last-child{grid-column:auto}
  .lp-fig{aspect-ratio:4/3}
}
/* long text sections read as homepage cards (guide, ask, single): white card, big homepage-style heading */
.gd-sec,.ak-sec,.sg-sec{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(22px,3.2vw,44px);margin:0 0 16px}
.gd-sec > h2,.ak-sec > h2,.sg-sec > h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1.05;margin-top:0}

/* ======= Part 7: HERO AS THE DEMO (David 11/08 live fix: "why is Think outside the box inside a white card?").
   No card. White text directly on the full-color photo. A soft dark gradient ONLY on the text side
   (left ~60% on desktop; behind the text block on phone); the right side (truck) has no tint at all.
   Primary button = white pill, secondary = white outline. Same for the closing photo blocks.
   Triple class so it wins over every template hero rule. ======= */
.hero-photo.hero-photo.hero-photo{background:#1b1e24;color:#fff}
.hero-photo.hero-photo.hero-photo::after{background:linear-gradient(90deg,rgba(10,14,12,.62) 0%,rgba(10,14,12,.48) 30%,rgba(10,14,12,.22) 48%,rgba(10,14,12,0) 62%)}
.hero-photo.hero-photo.hero-photo .hero-copy{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;padding:0;max-width:600px;color:#fff}
.hero-photo.hero-photo.hero-photo h1,.hero-photo.hero-photo.hero-photo .hero-line,.hero-photo.hero-photo.hero-photo .kicker{color:#fff}
.hero-photo.hero-photo.hero-photo .lede,.hero-photo.hero-photo.hero-photo .hero-proof,.hero-photo.hero-photo.hero-photo .hero-extra,
.hero-photo.hero-photo.hero-photo .crumbs,.hero-photo.hero-photo.hero-photo .hero-reviews,.hero-photo.hero-photo.hero-photo .hero-text{color:rgba(255,255,255,.92)}
.hero-photo.hero-photo.hero-photo .lede b,.hero-photo.hero-photo.hero-photo .hero-copy a:not(.btn),.hero-photo.hero-photo.hero-photo .crumbs a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.hero-photo.hero-photo.hero-photo .hero-copy :is(h1,p,span,a:not(.btn),nav,li){text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.35)}
.hero-photo.hero-photo.hero-photo .hero-copy .btn{text-shadow:none}
.hero-photo.hero-photo.hero-photo .hero-copy .btn-accent,.hero-photo.hero-photo.hero-photo .hero-copy .btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.hero-photo.hero-photo.hero-photo .hero-copy .btn-accent:hover,.hero-photo.hero-photo.hero-photo .hero-copy .btn-light:hover{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.hero-photo.hero-photo.hero-photo .hero-copy .btn-ghost,.hero-photo.hero-photo.hero-photo .hero-copy .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.75);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-photo.hero-photo.hero-photo .hero-copy .btn-ghost:hover,.hero-photo.hero-photo.hero-photo .hero-copy .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-photo.hero-photo.hero-photo :focus-visible{outline-color:#fff}
.hero-photo.hero-photo.hero-photo .qbar :focus-visible{outline-color:var(--ink)}
@media (max-width:620px){
  .hero-photo.hero-photo.hero-photo{background:#1b1e24;color:#fff}
  .hero-photo.hero-photo.hero-photo .bg{top:0;bottom:0;height:auto;-webkit-mask-image:none;mask-image:none}
  /* behind the text block (top) only, fading out above the truck */
  .hero-photo.hero-photo.hero-photo::after{background:linear-gradient(180deg,rgba(10,14,12,.70) 0%,rgba(10,14,12,.62) 45%,rgba(10,14,12,.25) 62%,rgba(10,14,12,0) 74%)}
  .hero-photo.hero-photo.hero-photo .lede{color:rgba(255,255,255,.92)}
}

/* closing photo blocks ("Ready when you are." / "Ready to move?"): text on the photo, no white card */
.cta.photo-sec.photo-sec{background:#1b1e24;color:#fff}
.cta.photo-sec.photo-sec::after{background:linear-gradient(90deg,rgba(10,14,12,.62) 0%,rgba(10,14,12,.48) 30%,rgba(10,14,12,.22) 48%,rgba(10,14,12,0) 62%)}
.cta.photo-sec.photo-sec .cta-row{background:none;box-shadow:none;border-radius:0;padding:0;max-width:none}
.cta.photo-sec.photo-sec h2{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.35)}
.cta.photo-sec.photo-sec .cta-row p,.cta.photo-sec.photo-sec .eyebrow{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.35)}
.cta.photo-sec.photo-sec .cta-row .btn-accent{background:#fff;border-color:#fff;color:var(--ink)}
.cta.photo-sec.photo-sec .cta-row .btn-accent:hover{background:var(--stone);border-color:var(--stone)}
.cta.photo-sec.photo-sec .cta-row .btn-line{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.75)}
.cta.photo-sec.photo-sec .cta-row .btn-line:hover{background:#fff;color:var(--ink)}
.cta.photo-sec.photo-sec .cta-row a:not(.btn){color:#fff}
.cta.photo-sec.photo-sec .cta-row :focus-visible{outline-color:#fff}
@media (max-width:620px){.cta.photo-sec.photo-sec::after{background:linear-gradient(180deg,rgba(10,14,12,.66) 0%,rgba(10,14,12,.5) 55%,rgba(10,14,12,.15) 80%,rgba(10,14,12,0) 100%)}}

/* quote form step 1 starts with Full name (David 11/08 live fix 2). Desktop: 2 rows
   row 1 = Full name (wide), From, To, Move date, Home size;  row 2 = Phone, Email, Get my price. Phone: 2 columns. */
.qbar form#qform{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr)}
.qbar form#qform .phone{grid-column:1 / span 2}
.qbar form#qform .email{grid-column:3 / span 2}
.qbar form#qform .btn{grid-column:5}
.endform{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr)}
.endform .f:nth-child(6){grid-column:1 / span 2}
.endform .f:nth-child(7){grid-column:3 / span 2}
.endform .btn{grid-column:5}
.endform .tcpa{grid-column:1/-1}
@media (max-width:1180px){
  .qbar form#qform,.endform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qbar form#qform .name,.endform .f:first-child{grid-column:1/-1}
  .qbar form#qform .phone,.qbar form#qform .email,.endform .f:nth-child(6),.endform .f:nth-child(7){grid-column:auto}
  .qbar form#qform .btn,.endform .btn{grid-column:1/-1}
}
@media (max-width:620px){
  .qbar form#qform,.endform{grid-template-columns:1fr 1fr}
  .qbar form#qform .name,.qbar form#qform .phone,.qbar form#qform .email,.qbar form#qform .btn,
  .endform .f:first-child,.endform .f:nth-child(6),.endform .f:nth-child(7),.endform .btn{grid-column:1/-1}
}

/* ======= Part 8 (David 11/08): light overall darkening (~15%) of hero + closing photos, on top of the text-side gradient.
   Still clearly full color; no card/box anywhere on the photo. ======= */
.hero-photo.hero-photo.hero-photo::after{background:
  linear-gradient(90deg,rgba(10,14,12,.62) 0%,rgba(10,14,12,.48) 30%,rgba(10,14,12,.22) 48%,rgba(10,14,12,0) 62%),
  linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15))}
.cta.photo-sec.photo-sec::after{background:
  linear-gradient(90deg,rgba(10,14,12,.62) 0%,rgba(10,14,12,.48) 30%,rgba(10,14,12,.22) 48%,rgba(10,14,12,0) 62%),
  linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15))}
@media (max-width:620px){
  .hero-photo.hero-photo.hero-photo::after{background:
    linear-gradient(180deg,rgba(10,14,12,.70) 0%,rgba(10,14,12,.62) 45%,rgba(10,14,12,.25) 62%,rgba(10,14,12,0) 74%),
    linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15))}
  .cta.photo-sec.photo-sec::after{background:
    linear-gradient(180deg,rgba(10,14,12,.66) 0%,rgba(10,14,12,.5) 55%,rgba(10,14,12,.15) 80%,rgba(10,14,12,0) 100%),
    linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15))}
}
/* closing photo block: heading, line and buttons stacked on the LEFT (the text side), never over the bright right half */
.cta.photo-sec.photo-sec .cta-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;max-width:640px}
.cta.photo-sec.photo-sec .cta-side{justify-items:start}

/* ======= Part 9: HERO + CLOSING BLOCK = VARIANT C (David picked 11/08). Supersedes Part 7/8 overlays.
   10% overall darkening + strong text-side gradient (left + bottom on desktop, top behind the text on phone).
   No card; white text on the full-color photo. ======= */
.hero-photo.hero-photo.hero-photo::after,.cta.photo-sec.photo-sec::after{background:
  linear-gradient(90deg,rgba(8,10,12,.80) 0%,rgba(8,10,12,.66) 30%,rgba(8,10,12,.30) 50%,rgba(8,10,12,0) 64%),
  linear-gradient(0deg,rgba(8,10,12,.45) 0%,rgba(8,10,12,0) 40%),
  linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10))}
@media (max-width:620px){
  .hero-photo.hero-photo.hero-photo::after,.cta.photo-sec.photo-sec::after{background:
    linear-gradient(180deg,rgba(8,10,12,.84) 0%,rgba(8,10,12,.74) 48%,rgba(8,10,12,.30) 64%,rgba(8,10,12,0) 76%),
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10))}
}

/* ======= Part 10: PHONE HERO (David 11/08 live fix: "zoomed out, show the whole picture").
   Desktop unchanged (.hero-main / .hero-more are display:contents).
   Phone: the whole photo as a full-width image (natural 16:9, nothing cropped) fading into a dark band;
   kicker / H1 / lede / buttons on that dark band (solid dark = readable); the text-us, proof and reviews lines
   sit below on the paper background. No grey wash over the photo. ======= */
.hero-main,.hero-more{display:contents}
@media (max-width:620px){
  .hero-photo.hero-photo.hero-photo{display:block;min-height:0;background:#16191d;color:#fff;overflow:hidden}
  .hero-photo.hero-photo.hero-photo::after{display:none}
  .hero-photo.hero-photo.hero-photo .bg{position:relative;inset:auto;top:auto;bottom:auto;height:auto;width:100%;overflow:hidden;
    -webkit-mask-image:none;mask-image:none}
  .hero-photo.hero-photo.hero-photo .bg img{position:static;display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;
    object-fit:contain;object-position:50% 50%;transform:none;animation:none;filter:none}
  .hero-photo.hero-photo.hero-photo .bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
    background:linear-gradient(180deg,rgba(22,25,29,0) 0%,#16191d 100%);pointer-events:none}
  .hero-photo.hero-photo.hero-photo .wrap.hero-grid,.hero-photo.hero-photo.hero-photo > .wrap{display:block;padding-top:6px;padding-bottom:0}
  .hero-photo.hero-photo.hero-photo .hero-copy{max-width:none;padding:0}
  .hero-photo.hero-photo.hero-photo .hero-main{display:block;padding:0 0 26px}
  .hero-photo.hero-photo.hero-photo .hero-copy :is(h1,p,span,a:not(.btn),nav,li){text-shadow:none}
  /* proof + reviews + text-us: below the hero on paper, full width */
  .hero-photo.hero-photo.hero-photo .hero-more{display:block;margin:0 calc(-1 * var(--gutter));padding:18px var(--gutter) 6px;background:var(--paper);color:var(--ink)}
  .hero-photo.hero-photo.hero-photo .hero-more :is(p,span){color:#3b3f47;text-shadow:none;margin-top:0}
  .hero-photo.hero-photo.hero-photo .hero-more p{margin:0 0 8px}
  .hero-photo.hero-photo.hero-photo .hero-more a:not(.btn){color:var(--ink);border-bottom-color:rgba(22,24,29,.35)}
  .hero-photo.hero-photo.hero-photo .hero-more .hero-proof span{display:inline}
  /* city / partner / service phone: same whole-photo treatment (their own wide-crop rules are overridden here) */
  .hero-city .bg img,.hero-partner .bg img,.hero-svc .bg img{position:static!important;width:100%!important;height:auto!important;object-fit:contain!important}
  .hero-photo.hero-photo.hero-photo h1{margin-top:4px}
}
@media (max-width:620px){
  /* no leftover "truck space" padding from the older phone layout; the quote bar starts right under the paper lines */
  .hero-photo.hero-photo.hero-photo .wrap{padding-bottom:0!important}
  .hero-photo.hero-photo.hero-photo + .qbar-wrap .qbar,.qbar-wrap#quote .qbar{transform:none!important;margin-top:8px!important}
  .hero-photo.hero-photo.hero-photo + .qbar-wrap{background:var(--paper)}
}

/* ======================= Part 11: MOBILE AUDIT FIXES (11/08, MOBILE_AUDIT_2026-11-08.md) ======================= */
picture{display:contents}                                     /* <picture> wrappers never change the layout */
.nw{white-space:nowrap}                                       /* phone numbers never break mid-number */
/* Trustindex: never a blank hole. No reserved height; the widget takes its own height once it renders. */
#reviews-widget{min-height:0}
/* phone folds: on desktop the content always shows and the toggle button is hidden */
.mfold-t{display:none}
@media (max-width:620px){
  .mfold{margin:6px 0 0}
  .mfold-t{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--line);
    border-radius:12px;background:#fff;font:500 16px var(--f);color:var(--ink);cursor:pointer;text-align:left}
  .mfold-t::after{content:"\2212";font-size:22px;line-height:1;color:var(--muted)}
  .mfold.closed .mfold-t::after{content:"+"}
  .mfold:not(.closed) .mfold-t{margin-bottom:12px}
  .mfold.closed .mfold-b{display:none}
  .ftr .mfold-t{background:transparent;border-color:var(--line-dk);color:#fff}
  .ftr .mfold-t::after{color:var(--muted-dk)}

  /* footer diet: 44px rows, bigger city links */
  .ftr .cols ul{gap:0}
  .ftr .cols ul li a,.ftr .cols ul li{display:block;min-height:44px;padding:11px 0;font-size:16px}
  .ftr .cols ul li > a{min-height:0;padding:0}
  .ftr .cities{margin-top:24px;padding-top:16px;gap:0}
  .ftr .cities a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px 0 0;font-size:15px}
  .ftr .cols{gap:18px}

  /* tap targets >= 44px, small text >= 14px */
  .hero-reviews a,.hero-text a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .chips a,.chips li:not(:has(a)){min-height:44px;display:inline-flex;align-items:center}
  .qhelp,.tcpa,.qmeta,.eyebrow,.photo-cap,.fine,.consent{font-size:14px}
  th{font-size:14px} td{font-size:15px}
  dl dt{font-size:14px} dl dd{font-size:16px}
  .rev footer,.revfoot{font-size:15px}
  .brand{min-height:44px}

  /* hero on phone: the call bar already has Call, so the hero keeps one main button */
  .hero-photo .hero-ctas .btn-ghost{display:none}

  /* tables: scroll with a fade + hint only when they really overflow (class set by the fold script) */
  .tbl{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl.tbl-scroll{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .tbl.tbl-scroll::before{content:"Swipe to see the whole table \2192";display:block;position:sticky;left:0;margin:0 0 8px;font-size:14px;color:var(--muted)}

  /* guide / ask / single bodies: no card in the gutter (full 358px reading width), table of contents not sticky */
  .gd-sec,.ak-sec,.sg-sec{padding:0;border:0;background:none;border-radius:0;margin:0 0 30px}
  .gd-toc,.ak-toc{position:static!important;top:auto!important}

  /* bottom quote form: one clean phone grid (name / from+to / date+size / phone / email / button), 44px+ fields */
  .endform{grid-template-columns:1fr 1fr!important}
  .endform > *{grid-column:auto!important}
  .endform .f:nth-child(1),.endform .f:nth-child(6),.endform .f:nth-child(7),.endform .btn,.endform .tcpa{grid-column:1/-1!important}
  .endform input,.endform select{height:36px;font-size:17px}
  .endform .f{min-height:62px}

  /* galleries: no lone photo with an empty cell next to it */
  .lp-grid figure:last-child:nth-child(odd),.gallery figure:last-child:nth-child(odd){grid-column:1/-1}

  /* photo band / image header eyebrow: readable on any photo */
  .band .eyebrow,.imghead .eyebrow{display:inline-block;width:auto;padding:4px 10px;border-radius:999px;background:rgba(10,12,14,.55);color:#fff;text-shadow:none}

  /* menu: dim the page behind the open panel (box-shadow: works inside the blurred sticky header) */
  .menu[open] .menu-panel{box-shadow:0 24px 60px rgba(22,24,29,.18),0 0 0 100vmax rgba(10,12,14,.45)}
}
.btn .nw{display:contents}