/* Display face: Luckiest Guy, loaded from Google Fonts (link in head).
   The mock's self-hosted display font was personal-use only and is NOT used
   on the live site; do not upload its .woff file. */
:root{
  --black:#111111;
  --ink:#141414;
  --ink-2:#1A1A1A;
  --ink-soft:#4C4C4C;
  --gold:#C9A227;
  --gold-dark:#8A6D1B;
  --gold-bright:#DDB84A;
  --chrome:#C7C9CC;
  --bg:#FFFFFF;
  --bg-raise:#FAFAF8;
  --mist:#F1F1EF;
  --on-dark:#FFFFFF;
  --on-dark-soft:#D8D8D5;
  --card-line:rgba(20,20,20,.16);
  --radius:18px;
  --font-display:"Luckiest Guy","Arial Black",sans-serif;
  --font-script:"Yellowtail","Segoe Script",cursive;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161616;
    --bg-raise:#1F1F1F;
    --mist:#262626;
    --chrome:#6A6D70;
    --ink:#F5F5F3;
    --ink-soft:#C4C4C1;
    --gold-dark:#E3C766;
    --card-line:rgba(255,255,255,.16);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold-dark);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);line-height:1.04;margin:0;font-weight:900;letter-spacing:-.01em;overflow-wrap:break-word}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.eyebrow{font-family:var(--font-script);font-size:42px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.15}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:13px 26px;border-radius:999px;font-weight:700;font-size:16.5px;text-decoration:none;border:2px solid transparent;transition:transform .15s ease, background .15s ease}
.btn:active{transform:scale(.98)}
.btn-call{background:var(--black);color:#fff}
.btn-call:hover{background:var(--gold-dark)}
.btn-ghost{background:#FFFFFF;border-color:#FFFFFF;color:#141414}
.btn-ghost:hover{background:var(--chrome);border-color:var(--chrome)}
@media (prefers-color-scheme: dark){.btn-ghost:hover{background:#E6E6E3;border-color:#E6E6E3}.btn-call:hover,.navbar .nav-call:hover{background:#8A6D1B}}
.btn-ghost-dark{background:#FFFFFF;border-color:var(--ink);color:var(--ink)}
.btn-ghost-dark:hover{background:var(--mist)}
@media (prefers-color-scheme: dark){.btn-ghost-dark{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}}
.btn svg{flex:none}
.btn-rect{border-radius:4px}
/* call buttons sitting on black bands get a gold outline so the black fill reads */
.dark .btn-call,.finalcta .btn-call,.visit-card .btn-call{border-color:var(--gold)}
/* ---------- utility strip ---------- */
.utility{background:var(--black);color:var(--on-dark-soft);font-size:14px}
.utility .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding-top:9px;padding-bottom:9px}
.utility .u-addr,.utility .u-hours{white-space:nowrap}
.utility .u-sep{display:none}
.utility strong{color:var(--on-dark);font-weight:600}
.utility a{color:var(--on-dark);text-decoration:none;font-weight:600;padding:12px 8px;margin:-12px -8px}
@media(min-width:720px){.utility .wrap{flex-direction:row;justify-content:center;gap:10px}.utility .u-sep{display:inline}}
/* ---------- brand band : the logo IS the header ---------- */
.brandband{background:#FFFFFF;text-align:center;padding:clamp(16px,2.6vw,28px) 12px clamp(10px,1.4vw,16px)}
.brandband img{margin:0 auto;width:min(800px,94vw);height:auto}
.brandband .tagline{margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A6D1B}
@media(max-width:640px){
  .brandband{padding:10px 6px 6px}
  .brandband img{width:92vw}
  .brandband .tagline{margin-top:6px;font-size:13px;letter-spacing:.1em;line-height:1.5}
}
/* ---------- sticky nav row ---------- */
.navbar{position:sticky;top:0;z-index:60;background:var(--bg);border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}
.navbar .wrap{display:flex;align-items:center;gap:18px;min-height:58px}
.navbar .wordmark{font-family:var(--font-display);font-weight:900;font-size:19px;white-space:nowrap;text-decoration:none}
.navbar .wordmark span{color:var(--ink)}
.navbar nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.navbar nav::-webkit-scrollbar{display:none}
.navbar nav a{text-decoration:none;font-weight:600;font-size:15px;padding:12px 12px;border-radius:8px;white-space:nowrap;color:var(--ink-soft)}
.navbar nav a:hover{color:var(--ink);background:var(--mist)}
.navbar .nav-call{margin-left:8px;background:var(--black);color:#fff;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:999px;white-space:nowrap;font-size:15px;min-height:48px;display:inline-flex;align-items:center}
.navbar .nav-call:hover{background:var(--gold-dark)}
@media(max-width:760px){
  .navbar nav{display:none}
  .navbar .wrap{gap:10px}
  .navbar .wordmark{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .navbar .nav-call{margin-left:auto;padding:9px 13px;font-size:14px;flex:none}
}
/* ---------- hero : documentary photo, light warm scrim ---------- */
.hero{position:relative;background:#E8E8E6;color:#141414;overflow:hidden}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.95) 26%,rgba(255,255,255,.76) 56%,rgba(255,255,255,.28) 100%)}
.hero-inner{position:relative;z-index:2;padding:clamp(52px,8vw,100px) 0 clamp(56px,7.5vw,88px);max-width:760px}
.hero .eyebrow{color:#8A6D1B}
.hero h1{position:relative;font-size:clamp(44px,7.2vw,84px);margin:16px 0 18px;color:#141414;-webkit-text-stroke:1px #FFFFFF;text-shadow:.06em .06em 0 var(--gold),0 .05em .16em rgba(20,20,20,.38),0 .02em .05em rgba(20,20,20,.30)}
/* soft light wash behind the headline block so the wording lifts off the photo */
.hero h1::before{content:"";position:absolute;inset:-.22em -.42em -.14em;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 46% 50%,rgba(255,255,255,.66) 0%,rgba(255,255,255,.38) 52%,rgba(255,255,255,0) 76%);filter:blur(7px)}
.hero h1 em{font-style:italic;font-weight:650;color:#8A6D1B;text-shadow:.06em .06em 0 #141414,0 .04em .14em rgba(255,255,255,.65)}
.hero p.lede{font-size:clamp(18px,2.2vw,21.5px);color:#4C4C4C;max-width:56ch;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .btn-ghost{border-color:#141414}
.hero .btn-ghost:hover{border-color:#141414}
.hero-proof{margin-top:30px;padding-top:22px;border-top:1px solid rgba(20,20,20,.28);display:flex;flex-wrap:wrap;gap:10px 34px;font-size:15px;color:#4C4C4C}
.hero-proof strong{color:#141414}
/* ---------- sparkle stars : thin hand-drawn four-point bursts ---------- */
.hero .spark{position:absolute;pointer-events:none;line-height:0}
.hero .spark svg{display:block;width:100%;height:auto}
.hero .spark.s1{width:30px;top:2px;left:0;color:var(--gold);animation:sparkPulse 3.4s ease-in-out infinite alternate}
.hero .spark.s2{width:20px;top:34px;right:4%;color:#141414;animation:sparkPulse 3.4s ease-in-out .8s infinite alternate}
@media(max-width:860px){.hero .spark.s2{display:none}}
@keyframes sparkPulse{from{transform:scale(.86) rotate(-4deg);opacity:.7}to{transform:scale(1.06) rotate(3deg);opacity:1}}
.spark-in{display:inline-block;width:.52em;height:.52em;vertical-align:-.03em}
.svc.cert .seal svg{width:13px;height:13px;vertical-align:-1px;margin-right:7px}
@media(max-width:640px){
  .hero-photo img{object-position:68% 50%;filter:saturate(1.14) contrast(1.07)}
  .hero-inner{padding:24px 0 38px}
  .hero h1{font-size:clamp(37px,10.6vw,50px);margin:10px 0 12px}
  .hero p.lede{font-size:16.5px;margin-bottom:20px}
  .hero-proof{display:none}
}
/* ---------- photo-first intake ---------- */
.intake{background:var(--black);color:var(--on-dark)}
.intake .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,64px);padding-top:clamp(40px,5.5vw,64px);padding-bottom:clamp(40px,5.5vw,64px);align-items:center}
@media(max-width:860px){.intake .wrap{grid-template-columns:1fr}}
.intake .eyebrow{color:var(--gold-bright)}
.intake h2{font-size:clamp(60px,8.4vw,96px);margin:12px 0 14px}
.intake p.lead{color:var(--on-dark-soft);font-size:18px;margin:0 0 24px;max-width:48ch}
.intake p.lead strong{color:var(--on-dark)}
.btn-text{background:#FFFFFF;border-color:var(--gold);color:#141414;font-size:18px;min-height:58px;padding:15px 30px}
.btn-text:hover{background:var(--gold)}
.photo-check{list-style:none;margin:0;padding:0}
.photo-check li{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:16px 18px}
.photo-check li+li{margin-top:12px}
.photo-check .shot-n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#111111;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:18px}
.photo-check b{display:block;font-size:16.5px}
.photo-check span{color:var(--on-dark-soft);font-size:14.5px}
/* ---------- marquee ---------- */
.marquee{background:var(--black);color:#FFFFFF;overflow:hidden;padding:13px 0;border-block:3px solid var(--gold)}
.marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 46s linear infinite;font-weight:800;letter-spacing:.13em;font-size:14.5px;text-transform:uppercase;white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{padding:0 14px}
.marquee-track i{font-style:normal;color:var(--gold)}
@keyframes scrollx{to{transform:translateX(-50%)}}
/* ---------- trust strip ---------- */
.trust{background:var(--bg)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
.trust-item{padding:30px 22px 30px 0;border-right:1px solid var(--card-line)}
.trust-item:last-child{border-right:0}
.trust-item+.trust-item{padding-left:22px}
.trust-item .big{font-family:var(--font-display);font-weight:900;font-size:clamp(20px,2.2vw,25px);line-height:1.14}
.trust-item .small{margin-top:7px;font-size:14.5px;color:var(--ink-soft)}
@media(max-width:900px){.trust .wrap{grid-template-columns:1fr 1fr}.trust-item{border-right:0;border-bottom:1px solid var(--card-line);padding:22px 14px 22px 0}.trust-item+.trust-item{padding-left:0}}
@media(max-width:560px){.trust .wrap{grid-template-columns:1fr}.trust-item{padding:20px 0}}
/* ---------- sections ---------- */
section{padding:clamp(58px,8vw,104px) 0}
.sec-head{max-width:720px;margin-bottom:clamp(30px,4.5vw,52px)}
.sec-head .eyebrow{color:var(--gold-dark)}
.sec-head h2{font-size:clamp(68px,9.6vw,112px);margin:12px 0 14px;text-shadow:.05em .05em 0 rgba(20,20,20,.13)}
.sec-head .eyebrow::before{content:"";display:inline-block;width:30px;height:30px;margin-right:16px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23C9A227' d='M32 0C34.5 23 39 29 64 32C39 35 34.5 41 32 64C29.5 41 25 35 0 32C25 29 29.5 23 32 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sec-head p{color:var(--ink-soft);font-size:18px;margin:0}
.dark{background:var(--black);color:var(--on-dark)}
.dark .sec-head p{color:var(--on-dark-soft)}
.dark .sec-head .eyebrow{color:var(--gold-bright)}
.dark .sec-head h2{text-shadow:.05em .05em 0 rgba(255,255,255,.20)}
/* ---------- services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{position:relative;border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;color:#fff;background:var(--black)}
.svc img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover img.ph{transform:scale(1.045)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(17,17,17,0) 34%,rgba(17,17,17,.9) 82%)}
.svc .svc-body{position:relative;z-index:2;padding:22px}
.svc h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:6px}
.svc p{margin:0 0 12px;font-size:15.5px;color:#E8E8E6;max-width:38ch}
.svc .call-link{font-weight:700;font-size:15px;color:var(--gold-bright);text-decoration:underline;text-underline-offset:4px}
.svc.wide{grid-column:span 2}
.svc.cert{background:var(--mist);color:var(--ink);grid-column:span 2}
.svc.cert::after{display:none}
.svc.cert .svc-body{padding:26px}
.svc.cert h3{color:var(--ink);font-size:clamp(44px,4.8vw,56px);line-height:1.06;overflow-wrap:break-word}
.svc.cert p{color:var(--ink-soft)}
.svc.cert .seal{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1.1;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:18px}
.svc.cert .seal svg{width:26px;height:26px;vertical-align:-2px;margin-right:12px}
.gen-line{margin-top:22px;font-size:15.5px;color:var(--ink-soft);border:1.5px dashed var(--chrome);border-radius:12px;padding:14px 18px;background:var(--bg-raise);max-width:760px}
.gen-line strong{color:var(--ink)}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.svc.wide{grid-column:span 2}.svc.cert{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.svc.wide{grid-column:span 1}.svc.cert{grid-column:span 1}.svc{min-height:230px}}
/* ---------- from the workshop list ---------- */
.workshop{margin-top:38px;border-top:1px solid var(--card-line);padding-top:28px}
.workshop h3{font-size:clamp(46px,6vw,60px);margin-bottom:6px}
.workshop p{color:var(--ink-soft);font-size:16.5px;margin:0 0 18px;max-width:60ch}
.workshop-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 26px}
@media(max-width:900px){.workshop-list{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.workshop-list{grid-template-columns:1fr}}
.workshop-list li{font-weight:600;font-size:16px;padding:9px 0 9px 20px;position:relative;border-bottom:1px solid var(--card-line)}
.workshop-list li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
/* ---------- buy old campers band ---------- */
.buyband{background:var(--mist);border-block:1px solid var(--card-line)}
.buyband .wrap{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between;padding-top:34px;padding-bottom:34px}
.buyband h2{font-size:clamp(52px,6.8vw,76px);max-width:22ch}
.buyband p{margin:8px 0 0;color:var(--ink-soft);font-size:17px;max-width:52ch}

/* ---------- before / after ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}}
.ba{border-radius:var(--radius);overflow:hidden;background:var(--black)}
.ba-stage{position:relative;aspect-ratio:4/3;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-stage .after-img{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba-knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:var(--black);color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:15px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4);border:2px solid #FFFFFF}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:rgba(17,17,17,.85);color:#fff;padding:6px 11px;border-radius:6px}
.ba-tag.before{left:14px}.ba-tag.after{right:14px;background:var(--gold);color:#111111}
.ba-cap{padding:20px 22px 24px;color:var(--on-dark)}
.ba-cap h3{font-size:23px;margin-bottom:8px}
.ba-cap p{margin:0;color:var(--on-dark-soft);font-size:15.5px}
.ba-cap .arrow{color:var(--gold-bright);font-weight:800}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0}
.ba-note{margin-top:18px;font-size:14.5px;color:var(--on-dark-soft);max-width:72ch}

/* ---------- start to finish ---------- */
.stf{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.stf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stf{grid-template-columns:1fr}}
.stf figure{margin:0}
.stf .frame{border-radius:14px;overflow:hidden;aspect-ratio:4/3.4;background:var(--mist)}
.stf img{width:100%;height:100%;object-fit:cover}
.stf figcaption{padding-top:12px}
.stf .num{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--gold-dark);line-height:1}
.stf .stage{font-weight:800;font-size:16px;margin:5px 0 3px}
.stf .desc{font-size:14.5px;color:var(--ink-soft);margin:0}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.process{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.process{grid-template-columns:1fr}}
.step{border-top:3px solid var(--gold);padding-top:18px}
.step .n{font-family:var(--font-display);font-weight:900;font-size:clamp(46px,5.5vw,64px);line-height:1;color:var(--ink)}
.step h3{font-size:21px;margin:10px 0 7px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px}
.step p a{color:var(--gold-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,64px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .photo{border-radius:var(--radius);overflow:hidden}
.split .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split .photo.tall img{aspect-ratio:4/4.6}
.split h2{font-size:clamp(64px,8.8vw,100px);margin:12px 0 16px}
.split p{color:var(--ink-soft);font-size:17.5px;margin:0 0 16px}
.split p strong{color:var(--ink)}
.dark .split p{color:var(--on-dark-soft)}
.dark .split p strong{color:var(--on-dark)}
.offset-tag{display:inline-block;background:var(--gold);color:#111111;font-family:var(--font-script);font-weight:400;font-size:20px;letter-spacing:0;padding:4px 15px 6px;border-radius:6px;transform:rotate(-1.6deg);margin-bottom:18px}

/* ---------- about the owner ---------- */
.about-card{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4.5vw,54px);align-items:center;background:var(--bg-raise);border:1px solid var(--card-line);border-radius:var(--radius);padding:clamp(24px,4vw,44px)}
@media(max-width:760px){.about-card{grid-template-columns:1fr}}
.about-card .portrait{border-radius:14px;overflow:hidden}
.about-card .portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4;object-position:center top}
@media(max-width:760px){.about-card .portrait img{aspect-ratio:4/3.1;object-position:center top}}
.about-card h2{font-size:clamp(60px,8vw,88px);margin:10px 0 14px}
.about-card p{color:var(--ink-soft);font-size:17px;margin:0 0 15px}
.about-card p strong{color:var(--ink)}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.review-grid{grid-template-columns:1fr}}
.review-card{background:var(--bg-raise);border:1px solid var(--card-line);border-radius:var(--radius);padding:26px}
.review-card .src{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px}
.review-card blockquote{margin:0;font-family:var(--font-display);font-size:19px;font-weight:650;line-height:1.4;color:var(--ink-soft)}
.review-card .who{margin-top:18px;padding-top:14px;border-top:1px solid var(--card-line);color:var(--ink-soft);font-size:14.5px}

/* ---------- service area ---------- */
.area-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(26px,5vw,60px)}
@media(max-width:860px){.area-grid{grid-template-columns:1fr}}
.towns{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
.towns span{border:1.5px solid var(--chrome);border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px;background:var(--bg-raise);color:var(--ink)}
.towns span.home{background:var(--gold);color:#111111;border-color:var(--gold)}
.visit-card{background:var(--ink-2);color:var(--on-dark);border-radius:var(--radius);padding:30px;border:1px solid rgba(255,255,255,.22)}
.visit-card h3{font-size:26px;margin-bottom:14px}
.visit-card p{color:var(--on-dark-soft);margin:0 0 8px;font-size:16.5px}
.visit-card p strong{color:var(--on-dark)}
.visit-card .btn{margin-top:16px;margin-right:10px}
.area-note{margin-top:22px;font-size:14px;color:var(--on-dark-soft)}

/* ---------- final cta ---------- */
.finalcta{background:var(--black);color:var(--on-dark);text-align:center}
.finalcta h2{font-size:clamp(72px,12vw,136px);margin-bottom:14px;-webkit-text-stroke:1.5px var(--gold);text-shadow:.05em .05em 0 #000000}
.finalcta p{color:var(--on-dark-soft);font-size:19px;margin:0 auto 30px;max-width:52ch}
.finalcta .bignum{display:block;font-family:var(--font-body);font-weight:800;font-size:clamp(40px,8vw,88px);color:#fff;text-decoration:none;letter-spacing:-.01em;line-height:1.05}
.finalcta .bignum:hover{color:var(--gold-bright)}
.finalcta .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
footer{background:var(--black);color:var(--on-dark-soft)}
.footer-logo{background:var(--black);text-align:center;padding:clamp(26px,4vw,40px) 16px clamp(20px,3vw,30px)}
.footer-logo img{margin:0 auto;width:min(460px,84vw);height:auto}
.footer-logo .signoff{margin-top:14px;font-family:var(--font-script);font-weight:400;font-size:clamp(26px,3.4vw,34px);color:var(--on-dark)}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;padding:48px 0 0}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer h4{color:var(--on-dark);font-family:var(--font-body);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:4px;font-size:15.5px}
footer a{color:var(--on-dark-soft);text-decoration:none}
footer ul a{display:block;padding:10px 0}
footer a:hover{color:var(--on-dark)}
footer .f-brand{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--on-dark)}
/* LIVE BUILD: the mock's review-only tag line is removed; this keeps bottom
   room on small screens so the fixed call bar never covers the footer. */
@media(max-width:760px){footer .cols{padding-bottom:96px}}

/* ---------- sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--black);border-top:2px solid var(--gold)}
.callbar a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:16.5px;padding:14px 8px;border-radius:12px;min-height:52px;display:flex;align-items:center;justify-content:center}
.callbar .c1{background:var(--black);color:#fff;border:1.5px solid var(--gold)}
.callbar .c2{background:transparent;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.5)}
@media(max-width:760px){.callbar{display:flex}}

/* ---------- craft stack : rivet work over axle close-up ---------- */
.craft-stack{display:grid;gap:14px}
.craft-stack .photo{border-radius:var(--radius);overflow:hidden}
.craft-stack .photo.tall img{aspect-ratio:4/3.05}
.craft-stack .photo img{aspect-ratio:4/2.7}

/* ---------- gallery : Ben's own photos of the yard & the work ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal{gap:12px}}
.gal figure{margin:0}
.gal .frame{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.gal .frame.tall{aspect-ratio:3/3.6}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{padding-top:9px;font-weight:700;font-size:14.5px;line-height:1.3}
.gal figcaption span{display:block;font-weight:500;font-size:14px;color:var(--ink-soft);margin-top:2px}

/* ---------- reveal ---------- */
.reveal{transform:translateY(22px);transition:transform .7s ease}
.reveal.in{transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transform:none;transition:none}
  .marquee-track{animation:none}
  .svc img.ph{transition:none}
  .hero .spark{animation:none}
}
/* Luckiest Guy ships a single weight (400) - render display type at its true weight, no synthetic bold */
h1,h2,h3,.navbar .wordmark,.photo-check .shot-n,.trust-item .big,.svc.cert .seal,.stf .num,.step .n,.review-card blockquote,footer .f-brand{font-weight:400}
/* Painted-sign caps with a slight extra forward lean on top of the face's own slant (text elements only, so layout and fixed bars are unaffected) */
h1,h2,h3,.navbar .wordmark,.trust-item .big,.svc.cert .seal,.stf .num,.step .n,.review-card blockquote,footer .f-brand{display:inline-block;transform:skewX(-3deg);text-transform:uppercase}
.photo-check .shot-n{transform:skewX(-3deg)}
/* process numbers keep their lean but stack above their heading like the other steps */
.step .n{display:block}

/* ---------- display-lettering treatment : white fill, black painted outline, gold hard offset shade ----------
   One treatment page-wide for headline/display type only (hero H1, section headings,
   kickers, card headlines, big CTA words). Body copy, captions, button text and fine
   print keep the colors the readability pass set. */
h1,h2,h3,.trust-item .big,.svc.cert .seal,.stf .num,.step .n,.finalcta .bignum,footer .f-brand{
  color:#FFFFFF;
  -webkit-text-stroke:.05em #111111;
  paint-order:stroke fill;
  text-shadow:.055em .055em 0 var(--gold);
}
/* nav wordmark : solid near-black letters — the outline/shade treatment is unreadable at nav size */
.navbar .wordmark{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.navbar .wordmark span{color:var(--ink)}
.hero h1{color:#FFFFFF;-webkit-text-stroke:.05em #111111;text-shadow:.06em .06em 0 var(--gold),0 .05em .16em rgba(20,20,20,.38),0 .02em .05em rgba(20,20,20,.30)}
.hero h1 em{color:#FFFFFF;text-shadow:.06em .06em 0 var(--gold)}
.sec-head h2{text-shadow:.055em .055em 0 var(--gold)}
.dark .sec-head h2{text-shadow:.055em .055em 0 var(--gold)}
.finalcta h2{-webkit-text-stroke:.05em #111111;text-shadow:.055em .055em 0 var(--gold)}
.svc.cert h3{color:#FFFFFF}
/* script kickers on light grounds : solid near-black — the white fill washed
   out at kicker size no matter the outline. On dark grounds the white fill
   reads plainly against black, so the painted treatment stays there. */
.eyebrow{color:var(--ink) !important;-webkit-text-stroke:0;paint-order:stroke fill;text-shadow:none}
.dark .eyebrow,.intake .eyebrow,.finalcta .eyebrow{color:#FFFFFF !important;-webkit-text-stroke:.035em #111111;text-shadow:.05em .05em 0 var(--gold)}

/* ---------- small display type : solid fill ----------
   The doubled outline still bled together at these sizes (20–30px): white
   letters ringed in black read as a smudge, worst over photos. So the small
   display headings go SOLID — near-black on light grounds, white on dark
   grounds and photos — per the readability-first rule. Same sizes, same
   faces; only the fill treatment changes. Big display type (hero H1,
   section H2s, final CTA, the 44px+ cert headline) keeps the painted
   white/outline/gold treatment above, which reads plainly at its size. */
.trust-item .big,.step h3,.stf .num,.svc.cert .seal{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.svc:not(.cert) h3{color:#FFFFFF;-webkit-text-stroke:0;text-shadow:0 1px 3px rgba(0,0,0,.65),0 3px 14px rgba(0,0,0,.5)}
.ba-cap h3,.visit-card h3{color:#FFFFFF;-webkit-text-stroke:0;text-shadow:none}
/* big step numerals + the workshop heading keep the painted look, with the
   heavier outline (thick stroke plus a layered shadow ring) the small
   headings carried last round — at 46px+ the ring stays crisp */
.step .n,.workshop h3{
  -webkit-text-stroke:.1em #111111;
  text-shadow:
    -.04em 0 0 #111111,.04em 0 0 #111111,0 -.04em 0 #111111,0 .04em 0 #111111,
    -.028em -.028em 0 #111111,.028em -.028em 0 #111111,-.028em .028em 0 #111111,.028em .028em 0 #111111,
    .05em .05em 0 var(--gold);
}
/* script kickers on dark grounds: a slightly heavier stroke only — no shadow
   ring to clog the thin letterforms (light-ground kickers are solid, above) */
.dark .eyebrow,.intake .eyebrow,.finalcta .eyebrow{-webkit-text-stroke:.06em #111111;text-shadow:.045em .045em 0 var(--gold)}















/* ============================================================
   2026-10-19 - iPhone overflow + approved light-scheme lock.
   (1) Page-level horizontal containment that keeps
       position:sticky working (.navbar is sticky): overflow-x:clip
       on html AND body. The old body-only overflow-x:hidden does not
       constrain the layout viewport on iOS Safari, so skewed-heading
       ink and shadows could widen the page.
   (2) Image hardening: never exceed the column; keep aspect ratio.
   (3) Phone-size display headings: the old clamp() minimums (68px /
       72px) forced giant type on 390px screens; minimums lowered so
       headings scale with the viewport (tablet/desktop unchanged).
   (4) APPROVED LIGHT SCHEME LOCK: the design is approved as bright
       white/black/gold. color-scheme:light is set and every
       prefers-color-scheme:dark override is re-asserted below to the
       approved light values, so dark-mode phones render identically.
   ============================================================ */
html,body{overflow-x:clip}
:root{color-scheme:light}
img{height:auto}
.sec-head h2{font-size:clamp(40px,9.6vw,112px)}
.finalcta h2{font-size:clamp(44px,12vw,136px)}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#FFFFFF;
    --bg-raise:#FAFAF8;
    --mist:#F1F1EF;
    --chrome:#C7C9CC;
    --ink:#141414;
    --ink-soft:#4C4C4C;
    --gold-dark:#8A6D1B;
    --card-line:rgba(20,20,20,.16);
    color-scheme:light;
  }
  /* neutralize dark-only hover/button treatments: approved light values */
  .btn-ghost:hover{background:var(--chrome);border-color:var(--chrome)}
  .btn-call:hover,.navbar .nav-call:hover{background:var(--gold-dark)}
  .btn-ghost-dark{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
  .btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
}