/* 6SD Site Engine base stylesheet. Self-contained; everything keys off the theme variables that
   theme.mjs injects (--accent, --ink, --surface, --dark, --font-display, --font-body, --radius). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;letter-spacing:-0.02em;margin:0;font-weight:700}
h1{font-size:clamp(2.25rem,5.5vw,3.85rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
h3{font-size:1.2rem}
em{font-style:normal;color:var(--accent)}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
.container--narrow{max-width:680px}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:14px}
.lead{font-size:clamp(1.02rem,1.3vw,1.18rem);color:color-mix(in srgb,var(--ink) 74%,transparent);margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-family:var(--font-display);border-radius:999px;padding:12px 22px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn--lg{padding:15px 28px;font-size:1.02rem}
.btn--block{width:100%}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn--ghost{border-color:color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* topbar */
.topbar{background:var(--dark);color:#fff;font-size:.85rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:8px;flex-wrap:wrap}
.topbar-call{color:#fff}.topbar-call strong{color:#fff}
.topbar-badges{display:flex;gap:16px;flex-wrap:wrap;color:rgba(255,255,255,.78)}
/* The slim contact strip is desktop-only; on phones it just crowds the top (the phone is in the sticky bar). */
@media(max-width:600px){.topbar{display:none}}

/* header / nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:18px}
.brand-word b{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-0.02em;display:block;line-height:1.05}
.brand-word small{font-size:11px;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.brand--logo img{height:46px;width:auto;display:block}
@media (max-width:720px){.brand--logo img{height:38px}}
.faq{display:flex;flex-direction:column;gap:0;margin-top:28px}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:color-mix(in srgb,var(--ink) 72%,transparent);line-height:1.6}
.checks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px 30px;grid-template-columns:1fr}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.checks li{position:relative;padding-left:34px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent)}
.checks li::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-weight:600;font-size:.95rem}
.nav-links a:not(.btn):hover{color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle{color:var(--ink)}
.nav-toggle span{width:24px;height:2px;background:currentColor;border-radius:2px}

/* sections */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--surface{background:var(--surface)}
.section--dark{background:var(--dark);color:#fff}
.section--dark .lead{color:rgba(255,255,255,.72)}
.sec-head{max-width:640px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.sec-head h2{margin-bottom:14px}

/* hero */
.hero{padding-block:clamp(3rem,7vw,6rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-copy h1{margin:6px 0 18px}
.hero-copy .lead{max-width:540px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.trust{list-style:none;display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:26px 0 0;font-size:.9rem;font-weight:600}
.trust li{position:relative;padding-left:18px}
.trust li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.hero-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 60px rgba(16,24,40,.18)}
.hero--center{text-align:center}
.hero-center{display:flex;flex-direction:column;align-items:center}
.hero-center .lead{max-width:620px;margin-top:16px}
.hero-banner{margin-top:40px;width:100%}
.hero-banner img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius)}

/* services */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:var(--radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.card--img:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(16,24,40,.12)}
.card-media{aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:20px}
.card-body h3{margin-bottom:8px}
.card-body p{margin:0;color:color-mix(in srgb,var(--ink) 68%,transparent);font-size:.96rem}
.card-link{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;font-size:.9rem}
.tile{background:#fff;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:var(--radius);padding:24px}
.tile h3{margin-bottom:8px;color:var(--accent)}
.tile p{margin:0;color:color-mix(in srgb,var(--ink) 68%,transparent)}

/* gallery */
.masonry{columns:3 260px;column-gap:14px}
.masonry figure{margin:0 0 14px;break-inside:avoid;border-radius:var(--radius);overflow:hidden;position:relative}
.masonry img{width:100%;display:block}
.masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 10px;color:#fff;font-size:.85rem;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.slider{display:flex;gap:14px;overflow-x:auto;padding:4px 22px 22px;scroll-snap-type:x mandatory}
.slider figure{margin:0;flex:0 0 320px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden}
.slider img{width:100%;aspect-ratio:4/3;object-fit:cover}
.slider figcaption{padding:8px 2px;font-size:.85rem;color:color-mix(in srgb,var(--ink) 60%,transparent)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-phone a{color:var(--accent);font-weight:700}
.form{display:flex;flex-direction:column;gap:14px;background:#fff;color:var(--ink);padding:26px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form select,.form textarea{font:inherit;padding:12px 13px;border:1.5px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:10px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.form .hp{position:absolute;left:-9999px}
.form-status[data-state=success]{color:#1f7a4d}.form-status[data-state=error]{color:#c0392b}

/* page hero (inner pages) */
.pagehero{padding-block:clamp(3rem,6vw,5rem);background:var(--surface);text-align:center;position:relative;overflow:hidden}
.pagehero[style*="--ph-img"]{background:linear-gradient(rgba(10,8,7,.62),rgba(10,8,7,.62)),var(--ph-img) center/cover;color:#fff}
.pagehero[style*="--ph-img"] .lead{color:rgba(255,255,255,.82)}
.pagehero h1{margin:8px auto 14px;max-width:18ch}
.pagehero .lead{max-width:60ch;margin:0 auto}
.pagehero .cta-row{justify-content:center;margin-top:24px}

/* stats */
.stats-section{padding-block:clamp(2.2rem,4vw,3.2rem)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);color:var(--accent);line-height:1}
.stat-label{font-size:.9rem;color:color-mix(in srgb,var(--ink) 62%,transparent);margin-top:6px}

/* reviews */
.review{margin:0;background:#fff;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.review .stars{color:#f5a623;letter-spacing:2px}
.review blockquote{margin:0;font-size:1.02rem;line-height:1.55}
.review figcaption{font-weight:700;font-size:.9rem;color:color-mix(in srgb,var(--ink) 70%,transparent)}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--accent),var(--accent-hover));color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-inner h2{margin:0}
.cta-inner .lead{color:rgba(255,255,255,.85);margin-top:8px}
/* primary CTA on the accent band must contrast (white on accent), not accent-on-accent (invisible) */
.cta-band .btn--primary{background:#fff;color:var(--accent)}
.cta-band .btn--primary:hover{background:rgba(255,255,255,.92);color:var(--accent)}
.cta-band .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* story */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.story-grid--flip .story-media{order:2}
.story-media img{width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--radius)}
.story-copy h2{margin-bottom:16px}
.story-copy p{color:color-mix(in srgb,var(--ink) 74%,transparent);margin:0 0 12px}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-weight:500}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);background-image:none}
.checks li::after{content:"";position:absolute;left:6px;top:7px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* trust bar (social proof high) */
.trustbar{background:#fff;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);padding-block:16px}
.trustbar-inner{display:flex;align-items:center;justify-content:center;gap:14px 32px;flex-wrap:wrap;text-align:center}
.trust-rating{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;flex-wrap:wrap}
@media(max-width:560px){.trustbar-inner{flex-direction:column;gap:14px}}
.trust-rating .stars{color:#f5a623;letter-spacing:1px}
.trust-rating span{color:color-mix(in srgb,var(--ink) 60%,transparent);font-weight:500}
.trust-badges{display:flex;gap:10px;flex-wrap:wrap}
.trust-badges span{background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600}

/* steps / how it works */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.steps li{background:#fff;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:var(--radius);padding:26px 22px}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;margin-bottom:14px}
.steps h3{margin-bottom:6px}.steps p{margin:0;color:color-mix(in srgb,var(--ink) 68%,transparent)}
.sec-cta{text-align:center;margin-top:32px}

/* booking modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s ease}
.modal.on{opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,8,7,.62)}
.modal-panel{position:relative;background:#fff;color:var(--ink);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:var(--radius);padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.4);transform:translateY(12px);transition:transform .2s ease}
.modal.on .modal-panel{transform:none}
.modal-panel h2{margin:0 0 6px}
.modal-sub{margin:0 0 18px;color:color-mix(in srgb,var(--ink) 64%,transparent)}
.modal-panel .form{padding:0;background:none}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:color-mix(in srgb,var(--ink) 55%,transparent)}

/* sticky mobile CTA bar */
.stickybar{display:none}
@media(max-width:860px){
  .stickybar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
  .stickybar .btn{flex:1;padding:13px}
  body{padding-bottom:72px}
}

/* footer */
.site-footer{background:var(--dark);color:rgba(255,255,255,.66);padding-block:40px}
/* One horizontal band: brand a touch wider on the left, link columns spread evenly across the rest so
   the row fills the full width. Keeps the footer one row tall (no dead space on the right). */
.foot-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 48px}
.foot-brand{flex:1.5 1 260px;min-width:240px;display:flex;flex-direction:column;gap:6px}
.foot-col{flex:1 1 130px;min-width:120px}
.foot-brand strong{color:#fff;font-family:var(--font-display);font-size:1.05rem}
.foot-col h4{margin:0 0 8px;color:#fff;font-size:.95rem}
.foot-col a{display:block;padding:3px 0;color:rgba(255,255,255,.66);font-size:.92rem}
.foot-col a:hover{color:#fff}
.foot-call{color:var(--accent-contrast,#fff);font-weight:700;margin-top:6px}
.foot-credit{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.5)}
.foot-credit a{color:rgba(255,255,255,.7)}.foot-credit a:hover{color:#fff}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr);gap:24px 18px}.story-grid,.story-grid--flip .story-media{grid-template-columns:1fr;order:0}.story-media{order:-1}.cta-inner{flex-direction:column;align-items:flex-start}}

@media(max-width:860px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .hero-media{order:-1}
  .form-row{grid-template-columns:1fr}
  .masonry{columns:2 160px}
  .nav-toggle{display:flex}
  /* Closed menu must NEVER intercept taps (the mobile "buttons do nothing" bug): besides the
     off-screen transform, hide it and kill pointer events. visibility flips after the slide-out
     finishes; children must use display (not visibility:visible) so nothing pokes through. */
  .nav-links{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 18px;border-bottom:1px solid #eee;transform:translateY(-130%);visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility 0s linear .25s;z-index:60}
  .nav-links a{padding:13px 0;border-bottom:1px solid #f0f0f0}
  .nav-links .btn{margin-top:10px;text-align:center}
  body.nav-open .nav-links{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .25s ease}
}

/* ============================================================
   CRAFT PASS — elevates the default kit from "template" to designed.
   Appended overrides; same class contract so all sections benefit.
   ============================================================ */
:root{ --ink-60:color-mix(in srgb,var(--ink) 60%,transparent); --ink-72:color-mix(in srgb,var(--ink) 72%,transparent); --hair:color-mix(in srgb,var(--ink) 8%,transparent); }
body{font-feature-settings:"ss01","cv01";letter-spacing:-0.011em}
.container{max-width:1180px;padding:0 28px}

/* type: more confident hierarchy */
h1{font-weight:800;letter-spacing:-0.045em;line-height:1.0}
h2{font-weight:800;letter-spacing:-0.035em;line-height:1.04}
h3{font-weight:700;letter-spacing:-0.02em}
.lead{font-size:clamp(1.06rem,1.35vw,1.27rem);line-height:1.55;color:var(--ink-60)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.22em;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}

/* section rhythm + designed heads (left-aligned, accent rule = brand flare) */
.section{padding-block:clamp(4rem,8.5vw,7rem)}
.sec-head{max-width:680px;margin:0 0 clamp(2.2rem,4vw,3.4rem);text-align:left}
.sec-head h2{position:relative;padding-bottom:18px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;border-radius:4px;background:var(--accent)}
.sec-head .lead{margin-top:16px}

/* buttons with more character */
.btn{font-weight:700;letter-spacing:-0.01em;border-radius:12px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s}
.btn--lg{padding:16px 30px}
.btn--primary{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 32%,transparent)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 40%,transparent)}

/* HERO: editorial, asymmetric, image with an accent offset block */
.hero{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);pointer-events:none}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,5vw,5rem)}
.hero-copy h1{font-size:clamp(2.6rem,5.6vw,4.4rem);margin:14px 0 22px}
.hero-copy .lead{max-width:30ch}
.hero-media{position:relative}
.hero-media::after{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;border-radius:var(--radius);background:var(--accent);opacity:.14;z-index:0}
.hero-media img{position:relative;z-index:1;aspect-ratio:4/4.2;border-radius:calc(var(--radius) + 4px);box-shadow:0 30px 70px rgba(16,24,40,.22)}
/* mobile: this unconditional 2-col hero-grid (above) was overriding the earlier max-860 collapse by
   source order, leaving split/feature heroes 2-up on phones (tiny image left, text crammed right).
   Re-assert the single-column stack AFTER it so phones get a full-width image on top, then the copy. */
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:clamp(1.4rem,5vw,2rem)}.hero-media{order:-1}.hero-media::after{display:none}.hero-media img{aspect-ratio:16/10}}
.trust{gap:14px 26px;margin-top:30px;font-size:.86rem}
.trust li::before{top:6px;width:7px;height:7px}

/* cards: refined, image zoom on hover */
.grid-cards{gap:18px}
.card{border-radius:16px;border-color:var(--hair);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.card--img:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(16,24,40,.14)}
.card-media{aspect-ratio:5/4;overflow:hidden}
.card-media img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card--img:hover .card-media img{transform:scale(1.06)}
.card-body{padding:22px}
.card-body h3{font-size:1.12rem}
.card-link{letter-spacing:-0.01em}

/* gallery: tighter, richer captions, hover zoom */
.masonry{column-gap:16px}
.masonry figure{margin-bottom:16px;border-radius:14px}
.masonry img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figcaption{font-weight:600;letter-spacing:-0.01em;padding:22px 14px 12px}

/* stats: bigger, with hairline dividers */
.stats{gap:0}
.stat{padding:6px 22px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--hair)}
.stat-num{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-0.04em}

/* trustbar: cleaner */
.trustbar{padding-block:18px}
.trust-badges span{background:transparent;border-color:var(--hair);font-weight:600}

/* steps: numbered, connected feel */
.steps li{padding:30px 24px;border-radius:16px;border-color:var(--hair)}
.step-n{width:42px;height:42px;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 30%,transparent)}

/* story + reviews polish */
.story-media img{border-radius:18px;box-shadow:0 24px 56px rgba(16,24,40,.16)}
.story-copy h2{padding-bottom:16px;position:relative}
.story-copy h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:4px;background:var(--accent)}
.review{border-radius:16px;border-color:var(--hair)}
.review blockquote{font-size:1.06rem;letter-spacing:-0.01em}

/* pagehero: more presence */
.pagehero{padding-block:clamp(4rem,7vw,6rem);text-align:left}
.pagehero .eyebrow{justify-content:flex-start}
.pagehero h1{font-size:clamp(2.4rem,5vw,3.9rem);margin-inline:0}
.pagehero .lead{margin-inline:0}
.pagehero[style*="--ph-img"]{background:linear-gradient(120deg,rgba(12,9,8,.78),rgba(12,9,8,.40)),var(--ph-img) center/cover}

/* header refinement */
.site-header{border-bottom-color:var(--hair)}
.nav{padding-block:16px}
.brand-mark{border-radius:13px}

/* cta band: depth */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,rgba(255,255,255,.18),transparent 50%)}
.cta-inner{position:relative}

@media(max-width:860px){
  .sec-head{text-align:left}
  .hero-media::after{display:none}
  .stat + .stat::before{display:none}
}

/* ============================================================
   DIRECTION PASS — calibrated to references (Apple whitespace +
   full-bleed photographic hero + bold type + trust badges).
   ============================================================ */
/* more air everywhere (Apple restraint) */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.container{max-width:1200px}

/* FULL-BLEED COVER HERO (the home-services + Apple pattern) */
.hero--cover{min-height:min(88vh,860px);display:flex;align-items:center;padding:0;color:#fff;position:relative;isolation:isolate}
.hero--cover::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) center/cover no-repeat;background-color:var(--dark)}
.hero--cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(8,6,5,.82) 0%,rgba(8,6,5,.55) 42%,rgba(8,6,5,.12) 100%)}
.hero--cover .hero-cover-inner{max-width:780px;padding-block:clamp(3rem,8vw,6rem)}
.hero--cover h1{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-0.05em;margin:18px 0 22px;text-wrap:balance}
.hero--cover .lead{color:rgba(255,255,255,.86);font-size:clamp(1.1rem,1.5vw,1.4rem);max-width:48ch}
.hero--cover .cta-row{margin-top:32px;gap:14px}
.eyebrow--light{color:#fff}.eyebrow--light::before{background:#fff}
.trust--light{color:rgba(255,255,255,.92)}
.trust--light li::before{background:var(--accent)}
/* glass secondary button on dark heroes */
.btn--glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--glass:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff;transform:translateY(-2px)}

/* trust badges -> "owned/credential" pill style they liked */
.trustbar{padding-block:22px}
.trust-badges span{padding:8px 16px;font-size:.8rem;border-radius:999px;border-color:var(--hair);color:var(--ink-72);font-weight:600}
.trust-rating b{font-size:1.05rem}

/* section heads: bigger, more deliberate */
.sec-head{margin-bottom:clamp(2.6rem,5vw,4rem)}
.sec-head h2{font-size:clamp(2rem,3.8vw,3.1rem)}

/* cards: airier, crisper */
.grid-cards{gap:22px}
.card-media{aspect-ratio:3/2}
.card-body{padding:26px 24px}

/* stats: more presence + breathing room */
.stats-section{padding-block:clamp(3rem,5vw,4.5rem)}
.stat-num{font-size:clamp(2.2rem,3.8vw,3.2rem)}

@media(max-width:860px){
  .hero--cover{min-height:auto;padding-block:0}
  .hero--cover::after{background:linear-gradient(180deg,rgba(8,6,5,.55),rgba(8,6,5,.82))}
}

/* prose (legal / long-form) */
.prose h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:2.4rem 0 .8rem;padding-bottom:0}
.prose h2:first-child{margin-top:0}
.prose h2::after{display:none}
.prose p{margin:0 0 1.05rem;color:var(--ink-72);line-height:1.8}

/* ============================================================
   DISTINCT HERO LAYOUTS (structure, not just color) — one per template.
   ============================================================ */
/* TYPE — pure giant type, no image, rule + footer row (Editorial) */
.hero--type{padding-block:clamp(5rem,12vw,10rem)}
.hero--type h1{font-size:clamp(3rem,8.6vw,7rem);line-height:.95;max-width:15ch;margin:20px 0 0}
.hero--type .hero-type-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--hair);padding-top:30px;flex-wrap:wrap}
.hero--type .hero-type-foot .lead{max-width:40ch;margin:0}
.hero--type .cta-row{margin-top:0}

/* STATCARD — image with a floating proof card (Bold) */
.hero--statcard .hero-media{position:relative}
.hero--statcard .hero-media img{aspect-ratio:4/4.5;border-radius:var(--radius);object-fit:cover;box-shadow:0 30px 70px rgba(16,24,40,.22)}
.hero--statcard .hero-media::after{display:none}
.hero-floatcard{position:absolute;left:-26px;bottom:36px;background:#fff;color:#14181f;border-radius:16px;padding:15px 20px;box-shadow:0 22px 54px rgba(16,24,40,.26);display:flex;align-items:center;gap:14px}
.hero-floatcard .fc-num{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--accent);line-height:1}
.hero-floatcard .fc-stars{color:#f5a623;letter-spacing:1px}
.hero-floatcard .fc-sub{font-size:.82rem;color:rgba(20,24,31,.6)}

/* COLLAGE — overlapping rounded images (Friendly) */
.hero--collage .hero-collage{position:relative;min-height:480px}
.hero--collage .hero-collage img{position:absolute;border-radius:26px;object-fit:cover;box-shadow:0 18px 44px rgba(16,24,40,.2)}
.hero--collage .hc1{width:64%;aspect-ratio:3/4;top:0;right:0;z-index:1}
.hero--collage .hc2{width:54%;aspect-ratio:4/3;bottom:0;left:0;z-index:2}
.hero--collage .hc3{width:34%;aspect-ratio:1/1;top:34%;left:6%;z-index:3;border:6px solid #fff}

/* FRAME — centered, image as a wide letterbox band below (Luxe) */
.hero--frame{text-align:center;padding-block:clamp(4rem,8vw,7rem) 0}
.hero--frame .eyebrow{justify-content:center}
.hero--frame h1{font-size:clamp(2.8rem,6.2vw,5.2rem);max-width:17ch;margin:16px auto 20px}
.hero--frame .lead{max-width:58ch;margin:0 auto}
.hero--frame .cta-row{justify-content:center;margin-top:30px}
.hero-band{margin-top:clamp(3rem,6vw,5rem)}
.hero-band img{width:100%;aspect-ratio:24/9;object-fit:cover}

/* SPOTLIGHT — full-bleed dark, headline top-left + content bottom-right (Dark) */
.hero--spotlight{min-height:min(88vh,820px);display:flex;align-items:stretch;color:#fff;position:relative;isolation:isolate;padding:0;overflow:hidden}
.hero--spotlight::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) center/cover no-repeat;background-color:var(--dark)}
.hero--spotlight::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,5,8,.93),rgba(6,5,8,.3) 55%,rgba(6,5,8,.55))}
.hero-spot-inner{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:34px;padding-block:clamp(3rem,7vw,5.5rem);width:100%}
.hero--spotlight h1{font-size:clamp(3rem,7.2vw,6.2rem);line-height:.96;letter-spacing:-0.045em;margin-top:14px}
.hero-spot-side .lead{color:rgba(255,255,255,.84);max-width:40ch}
.hero-spot-side .cta-row{margin-top:22px}
.hero-spot-side .trust{margin-top:22px}

@media(max-width:860px){
  .hero--statcard .hero-media{order:-1}.hero-floatcard{left:12px;bottom:12px}
  .hero--collage .hero-collage{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hero--collage .hero-collage img{position:static;width:100%!important;border:none!important;aspect-ratio:4/3}
  .hero--collage .hc1{grid-column:1/-1;aspect-ratio:16/9}
  .hero-spot-inner{grid-template-columns:1fr}
  .hero--type .hero-type-foot{flex-direction:column;align-items:flex-start}
}
/* face-safe image cropping: object-fit:cover defaults to a CENTERED crop, which cuts the top of heads
   (foreheads) on portrait photos. Bias every photo crop toward the top so faces stay in frame, on all sites. */
.hero-media img,.hero-banner img,.hero-band img,.story-media img,.card-media img,.gallery img,.gallery figure img,.slider img,figure img,.hero--statcard .hero-media img,.hero--collage .hero-collage img{object-position:50% 22%}

/* gallery.tabs: one filterable grid with category tabs (All / Kitchens / Roofs ...) */
.galtabs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.galtab{font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.galtab:hover{border-color:var(--accent)}
.galtab.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.galtabs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.galtabs-tile{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.05)}
.galtabs-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;display:block;transition:transform .4s}
.galtabs-tile:hover img{transform:scale(1.04)}
.galtabs-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 9px;font-size:12.5px;font-weight:500;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62))}

/* projects.grid: portfolio wall of jobs */
.projgrid-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.projcard{border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.projcard-media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;display:block}
.projcard-body{padding:14px 16px}
.projcard-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.projcard-body h3{margin:4px 0 2px;font-size:17px}
.projcard-area{color:var(--ink);opacity:.6;font-size:13px;margin:0}
/* map.showcase: project map (Leaflet) */
.mapshow-canvas{height:440px;margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:#e8ecef;position:relative;z-index:0}
.mapshow-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink);opacity:.5;font-size:14px;text-align:center;padding:0 20px}
.mapshow-canvas .maplibregl-canvas{outline:none}
/* branded map pins */
.mapshow-pin{cursor:pointer;line-height:0}
.mapshow-pin-dot{position:relative;display:block;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.32);transition:transform .15s}
.mapshow-pin:hover .mapshow-pin-dot{transform:scale(1.2)}
.mapshow-pin-dot::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);opacity:.4;z-index:-1;animation:mapshow-pulse 2.4s ease-out infinite}
@keyframes mapshow-pulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
/* modern popup card */
.mapshow .maplibregl-popup-content{border-radius:12px;padding:11px 15px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-family:var(--font-body);border:none}
.mapshow .maplibregl-popup-close-button{display:none}
.mapshow-pop b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.mapshow-pop span{display:block;font-size:12.5px;color:color-mix(in srgb,var(--ink) 60%,transparent);margin-top:2px}
.mapshow .maplibregl-ctrl-group,.areamap .maplibregl-ctrl-group{border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.14)}
/* clickable project cards (link to detail pages) */
.projcard.is-link{display:block;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.projcard.is-link:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,18,15,.12);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.projcard.is-link .projcard-media img{transition:transform .4s}
.projcard.is-link:hover .projcard-media img{transform:scale(1.04)}
.projcard-more{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--accent)}
/* showcase popup: thumbnail + title + View project link */
.mapshow-pop{display:flex;flex-direction:column}
.mapshow-pop-img{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block;margin-bottom:9px}
.mapshow-pop-body{display:flex;flex-direction:column}
.mapshow-pop-link{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none}
.mapshow-pop-link:hover{text-decoration:underline}
/* map.areas: service-areas map (labeled markers + soft highlight halo) + the list */
.areamap-canvas{height:400px;margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:#e8ecef;position:relative;z-index:0}
.areamap-canvas .maplibregl-canvas{outline:none}
.areamap .maplibregl-popup-content{display:none}
.areamap-pin{position:relative;display:flex;flex-direction:column;align-items:center;cursor:default;line-height:0}
.areamap-halo{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%);z-index:-1}
.areamap-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.3)}
.areamap-label{margin-top:5px;font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;background:#fff;padding:2px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.16);line-height:1.3}
.arealist{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;padding:0;margin:18px 0 0}
.arealist li{font-size:13px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px;padding:6px 13px}
/* map.place: single-location Google embed (contact page) */
.mapplace-frame{height:420px;margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 10px 30px rgba(16,24,40,.08)}
.mapplace-frame iframe{width:100%;height:100%;border:0;display:block}
.mapplace-dir{margin-top:16px}
.mapplace-empty{height:300px;margin-top:22px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}
/* portfolio responsive: galleries, project cards and the map were desktop-only and broke on phones */
@media(max-width:860px){
  .galtabs-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .galtabs-tile figcaption{padding:16px 9px 7px;font-size:11.5px}
  .galtabs-tabs{margin:16px 0 18px;gap:7px}
  .galtab{font-size:13px;padding:7px 13px}
  .projgrid-wall{grid-template-columns:1fr;gap:14px}
  .mapshow-canvas,.areamap-canvas{height:300px;margin-top:18px}
  .mapplace-frame{height:300px;margin-top:18px}
}
@media(max-width:420px){
  .galtabs-tile figcaption{font-size:11px;padding:14px 8px 6px}
}

/* ===== Nav dropdowns (Services / Service Areas) + area-page map ===== */
.nav-group { position: relative; }
/* keep hover alive while the cursor travels from the tab down to the menu */
.nav-group-top { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding-bottom: 10px; margin-bottom: -10px; }
.nav-caret { font-size: .7em; opacity: .7; }
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 210px; margin-top: 0;
  background: var(--surface, #fff); border: 1px solid var(--line, #e6e8ee); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16); padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 90;
}
/* invisible bridge spanning the gap so moving onto the menu never drops :hover */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: flex; }
.nav-menu a { display: block; padding: 9px 12px; border-radius: 9px; white-space: nowrap; font-weight: 500; }
.nav-menu a:hover, .nav-menu a:focus { background: var(--surface-2, rgba(0,0,0,.05)); }
.area-map { margin: 26px 0; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.area-map iframe { width: 100%; height: 440px; border: 0; display: block; }
/* 860px matches the nav-collapse breakpoint above (was 820, which left a 40px band where the
   mobile panel showed but dropdowns still behaved like desktop hover menus). */
@media (max-width: 860px) {
  .nav-group { display: block; }
  .nav-menu { position: static; display: none; box-shadow: none; border: 0; padding: 2px 0 6px 14px; margin: 0; min-width: 0; background: transparent; }
  .nav-group.open .nav-menu { display: flex; }
  .nav-group-top .nav-caret { display: inline-block; transition: transform .2s; }
  .nav-group.open .nav-group-top .nav-caret { transform: rotate(180deg); }
  .area-map iframe { height: 320px; }
}

/* ============================================================
   MOBILE PASS (2026-08-20). Phone-first corrections to the shared kit.
   Everything here is scoped to small screens, so desktop is untouched.
   Shipped for Value-Add Construction, applies to every engine site.
   ============================================================ */

/* Anchors and #book jumps must clear the sticky header instead of hiding under it. */
html{scroll-padding-top:84px}

@media(max-width:860px){
  /* Header: keep it short so the hero is visible on a phone, and give the logo room. */
  .site-header .nav{padding-block:10px}
  .brand--logo img{max-height:38px;width:auto}

  /* Hero and section CTAs: stack full width so the two buttons read as one clean pair
     instead of two ragged pills of different widths. */
  .cta-row{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .cta-row .btn{width:100%;justify-content:center;white-space:normal}
  .btn--lg{padding:14px 20px}

  /* Tap targets: Apple and Google both want 44px. Footer and nav links were 30px. */
  .foot-col a{padding:9px 0}
  .nav-menu a{padding:11px 12px}

  /* Forms: 16px minimum kills the iOS zoom-on-focus jump that makes a form feel broken. */
  .form input,.form select,.form textarea{font-size:16px;padding:13px}
  .form label{font-size:.88rem}
}

/* Booking modal on a phone: a bottom sheet, not a full screen box.
   The old rule centered a 92vh panel, so the submit button sat below the fold and the
   whole screen was covered. This anchors it to the bottom, caps the height, and keeps
   the submit button pinned and reachable with a thumb. */
@media(max-width:640px){
  .modal{padding:0;place-items:end center;align-items:end}
  .modal-panel{
    width:100%;max-width:none;max-height:86dvh;
    border-radius:20px 20px 0 0;
    padding:20px 18px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1);
    overscroll-behavior:contain;
  }
  .modal.on .modal-panel{transform:none}
  /* Grab handle, the standard affordance that says "drag or tap away to dismiss". */
  .modal-panel::before{
    content:"";display:block;width:38px;height:4px;margin:0 auto 14px;
    border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);
  }
  .modal-panel h2{font-size:1.35rem;padding-right:40px}
  .modal-sub{font-size:.92rem;margin:0 0 14px}
  .modal-panel .form{gap:11px}
  /* 44px hit area for the close control. */
  .modal-close{
    top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;
    justify-content:center;font-size:26px;border-radius:50%;
  }
  /* The panel is a column: heading fixed at the top, fields scroll, submit pinned.
     The form is its own scroll container so the sticky button has a scrollport to
     pin against (sticky against the panel does not clamp when the panel is the scroller). */
  .modal-panel{display:flex;flex-direction:column;overflow:hidden}
  .modal-panel h2,.modal-sub{flex:0 0 auto}
  .modal-panel .form{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
  .modal-panel .form button[type=submit]{
    position:sticky;bottom:0;width:100%;padding:15px;margin-top:6px;
    box-shadow:0 -8px 0 8px #fff,0 -22px 16px 10px rgba(255,255,255,.92);
  }
}

/* Mobile nav panel polish: every row is a full width block so the dividers line up,
   and the dropdown caret sits right aligned instead of collapsing to a speck. */
@media(max-width:860px){
  .nav-links a{display:block;width:100%}
  .nav-links .nav-group{width:100%}
  .nav-group-top{display:flex !important;align-items:center;justify-content:space-between}
  .nav-group-top .nav-caret{font-size:1rem;line-height:1;opacity:.55;margin-left:8px}
  .nav-menu a{font-size:.94rem;color:color-mix(in srgb,var(--ink) 74%,transparent);border-bottom:0;padding:10px 0 10px 2px}
  .nav-links{max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:86px}
}

/* Sticky bar pair: the two buttons were both flex:1 but nowrap kept each at its own
   min-content width, so they came out uneven. Give Call a fixed share and let the booking
   CTA take the rest, which also keeps the primary action visually dominant. */
@media(max-width:860px){
  .stickybar .btn--ghost{flex:0 0 34%}
  .stickybar .btn--primary{flex:1 1 auto}
}

/* Mobile vertical rhythm. Desktop-tuned section padding stacked up on a phone: a hero closing
   with 56px and the next section opening with 72px left a 128px band of dead white between the
   hero CTA and the first real content, and every section boundary repeated it. Tighten the
   rhythm on small screens only, and cap gallery tiles so a 3-photo strip is not 1800px tall. */
@media(max-width:860px){
  .section{padding-block:clamp(2.6rem,7vw,3.4rem)}
  .hero{padding-bottom:clamp(1.5rem,5vw,2.2rem)}
  .pagehero{padding-block:clamp(2.2rem,6vw,3rem)}
  .sec-head{margin-bottom:clamp(1.4rem,4vw,2rem)}
  /* Portrait phone photos stacked at natural height made a 3-photo strip ~1650px tall and every
     tile a different height. Uniform 4:3 tiles read as a designed grid and cut the scroll by a
     third, without cropping anything important out of a wide interior shot. */
  .masonry figure img,.gallery-grid img,.galtabs-tile img{aspect-ratio:4/3;height:auto;width:100%;object-fit:cover}
}

/* Gallery caption legibility. White text sat on a 0.6 scrim, which is fine over a dark photo but
   drops to roughly 3:1 over a bright floor or a white wall, and most of these interiors are
   bright. Deepen the scrim and add a shadow so captions clear 4.5:1 on any photo. */
.masonry figcaption,.galtabs-tile figcaption,.gallery-grid figcaption{
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45) 45%,rgba(0,0,0,.82));
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* ============================================================================
   ABOUT family variants. All classes prefixed per variant to avoid collisions.
   Themed only via the variable contract (--accent --ink --surface --dark
   --font-display --font-body --radius, plus --ink-60 --ink-72 --hair).
   Mobile-first, no horizontal overflow, single column at <=860px.
   Variants: about.statband (.abstat-*), about.quote (.abquote-*),
             about.portrait (.abport-*)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   about.statband — copy beside a bold ledger of credibility numbers
   --------------------------------------------------------------------------- */
.abstat-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.abstat-copy{max-width:46ch}
.abstat-head{
  font-size:clamp(1.8rem,3.4vw,2.9rem);
  line-height:1.06;
  margin:0 0 clamp(1rem,2vw,1.5rem);
  letter-spacing:-0.02em;
}
.abstat-body p{
  color:var(--ink-72);
  font-size:clamp(1rem,1.15vw,1.12rem);
  line-height:1.7;
  margin:0 0 1rem;
}
.abstat-body p:last-child{margin-bottom:0}
.abstat-cta{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* the band: stacked stat rows divided by hairlines, big display numerals */
.abstat-band{
  display:flex;
  flex-direction:column;
  border-top:2px solid var(--ink);
}
.abstat-row{
  display:flex;
  align-items:baseline;
  gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(1rem,2.2vw,1.5rem) 0;
  border-bottom:1px solid var(--hair);
}
.abstat-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:.9;
  letter-spacing:-0.04em;
  color:var(--accent);
  flex:0 0 auto;
  min-width:2.4ch;
}
.abstat-tick{
  flex:0 0 auto;
  width:12px;height:12px;
  margin-top:.35em;
  border-radius:3px;
  background:var(--accent);
  transform:rotate(45deg);
}
.abstat-unit{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.3;
  color:var(--ink);
  align-self:center;
}
/* dark-skin legibility for the leading rule */
.section--dark .abstat-band{border-top-color:rgba(255,255,255,.55)}
.section--dark .abstat-unit{color:#fff}
.section--dark .abstat-body p{color:rgba(255,255,255,.74)}

/* ---------------------------------------------------------------------------
   about.quote — oversized founder pull-quote, small portrait + signature feel
   --------------------------------------------------------------------------- */
.abquote-inner{
  max-width:820px;
  margin-inline:auto;
  text-align:center;
}
.abquote-eyebrow{margin-bottom:clamp(1.4rem,3vw,2rem)}
.abquote-fig{margin:0;position:relative}
.abquote-open{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(4rem,9vw,7rem);
  line-height:.6;
  color:var(--accent);
  opacity:.22;
  margin-bottom:-.15em;
  user-select:none;
}
.abquote-q{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.22;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-wrap:balance;
}
.abquote-rest{
  margin-top:clamp(1.4rem,3vw,2rem);
  max-width:60ch;
  margin-inline:auto;
}
.abquote-rest p{
  color:var(--ink-60);
  font-size:clamp(1rem,1.15vw,1.1rem);
  line-height:1.7;
  margin:0 0 .8rem;
}
.abquote-rest p:last-child{margin-bottom:0}

.abquote-by{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  text-align:left;
}
.abquote-portrait{
  flex:0 0 auto;
  width:56px;height:56px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent);
}
.abquote-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.abquote-name{display:flex;flex-direction:column;line-height:1.25}
.abquote-name b{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.abquote-role{
  font-size:.85rem;
  font-weight:500;
  color:var(--ink-60);
}
/* subtle signature underline under the name block */
.abquote-name b::after{
  content:"";
  display:block;
  width:34px;height:2px;
  margin-top:6px;
  border-radius:2px;
  background:var(--accent);
}
.abquote-cta{margin-top:clamp(1.6rem,3vw,2.2rem)}
.section--dark .abquote-q{color:#fff}
.section--dark .abquote-name b{color:#fff}
.section--dark .abquote-rest p{color:rgba(255,255,255,.7)}

/* ---------------------------------------------------------------------------
   about.portrait — tall portrait overlapping a raised copy panel, editorial offset
   --------------------------------------------------------------------------- */
.abport-stage{
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:center;
  gap:0;
}
.abport-media{position:relative;z-index:1}
.abport-img{
  display:block;
  width:100%;
  aspect-ratio:3/4.1;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 30px 64px rgba(16,24,40,.22);
}
.abport-img--ph{background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--ink) 10%,transparent))}
/* vertical caption tag riding the outer edge of the portrait */
.abport-tag{
  position:absolute;
  top:50%;left:-14px;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-60);
}
/* the copy panel breaks the portrait's baseline and overlaps it */
.abport-panel{
  position:relative;
  z-index:2;
  margin-left:clamp(-3rem,-4vw,-2rem);
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:clamp(1.8rem,3.5vw,3rem);
  box-shadow:0 20px 50px rgba(16,24,40,.10);
}
.abport-head{
  font-size:clamp(1.7rem,3.2vw,2.7rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 clamp(.9rem,2vw,1.4rem);
}
.abport-body p{
  color:var(--ink-72);
  font-size:clamp(1rem,1.1vw,1.1rem);
  line-height:1.7;
  margin:0 0 .9rem;
}
.abport-body p:last-child{margin-bottom:0}
.abport-checks{
  list-style:none;
  margin:clamp(1.2rem,2.4vw,1.6rem) 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.abport-checks li{
  position:relative;
  padding-left:26px;
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
}
.abport-checks li::before{
  content:"";
  position:absolute;left:0;top:.45em;
  width:14px;height:9px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.abport-cta{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* flipped: portrait on the right, panel overlaps from the left */
.abport--flip .abport-stage{grid-template-columns:minmax(0,58%) minmax(0,42%)}
.abport--flip .abport-media{order:2}
.abport--flip .abport-panel{
  order:1;
  margin-left:0;
  margin-right:clamp(-3rem,-4vw,-2rem);
}
.abport--flip .abport-tag{left:auto;right:-14px;transform:translateY(-50%) rotate(0deg)}

.section--dark .abport-panel{
  background:color-mix(in srgb,#fff 6%,var(--dark));
  border-color:rgba(255,255,255,.14);
}
.section--dark .abport-body p{color:rgba(255,255,255,.74)}
.section--dark .abport-checks li{color:#fff}
.section--dark .abport-tag{color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------------------
   Responsive: collapse all three to a single clean column at <=860px
   --------------------------------------------------------------------------- */
@media(max-width:860px){
  .abstat-grid{grid-template-columns:1fr;gap:clamp(2rem,6vw,2.8rem)}
  .abstat-copy{max-width:none}

  .abport-stage{grid-template-columns:1fr;gap:0}
  .abport--flip .abport-stage{grid-template-columns:1fr}
  .abport-media,.abport--flip .abport-media{order:0}
  .abport-img{aspect-ratio:4/3.4;max-width:520px;margin-inline:auto}
  .abport-tag,.abport--flip .abport-tag{display:none}
  .abport-panel,.abport--flip .abport-panel{
    order:0;
    margin:-2.5rem auto 0;
    max-width:560px;
  }

  .abquote-by{gap:12px}
}

/* cta.split — copy one side, full image the other */
.ctasplit{position:relative}
.ctasplit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3.5rem,7vw,6rem)}
.ctasplit-copy h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:16px}
.ctasplit-copy .lead{color:var(--ink-72);margin-bottom:26px;max-width:40ch}
.ctasplit-media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 56px rgba(0,0,0,.18)}
@media(max-width:860px){.ctasplit-grid{grid-template-columns:1fr}.ctasplit-media{order:-1}}

/* cta.boxed — contained card on a tint */
.ctaboxed{background:var(--dark);color:#fff;border-radius:calc(var(--radius) + 6px);padding:clamp(2.5rem,5vw,4.5rem);text-align:center;max-width:840px;margin:0 auto;position:relative;overflow:hidden}
.ctaboxed::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 55%)}
.ctaboxed h2{color:#fff;position:relative;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:14px}
.ctaboxed .lead{color:rgba(255,255,255,.82);position:relative;margin:0 auto 26px;max-width:48ch}
.ctaboxed .cta-row{position:relative;justify-content:center}

/* cta.banner — minimal full-width band, accent rule on top */
.ctabanner{border-top:3px solid var(--accent);background:var(--surface)}
.ctabanner-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ctabanner-copy h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.ctabanner-copy .lead{color:var(--ink-60);margin-top:6px}

/* ============================================================
   GALLERY FAMILY — three distinct compositions.
   .galfeat-* hero + supporting grid (asymmetric editorial split)
   .galband-* full-bleed alternating image bands w/ numbered rail
   .galmos-*  asymmetric mosaic wall, varied tile spans
   Theme-driven only: --accent --ink --surface --dark --radius --font-display
   helpers --ink-60 --ink-72 --hair. No brand-color hardcoding.
   ============================================================ */

/* ------------------------------------------------------------
   FEATURE — one large lead photo + tight stacked grid of smaller ones
   ------------------------------------------------------------ */
.galfeat-head{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:24px 48px;
  margin-bottom:clamp(2rem,4vw,3.2rem);
}
.galfeat-head h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.02}
.galfeat-head .eyebrow{margin-bottom:12px}
.galfeat-head-sub{max-width:42ch;padding-bottom:6px}

.galfeat-body{
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1rem,2vw,1.5rem);
  align-items:stretch;
}
.galfeat-lead{
  position:relative;margin:0;border-radius:calc(var(--radius) + 4px);overflow:hidden;
  box-shadow:0 28px 64px rgba(0,0,0,.22);
}
.galfeat-lead img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/4.3;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.galfeat-lead:hover img{transform:scale(1.04)}
.galfeat-lead figcaption{
  position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;
  color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:1.05rem;text-shadow:0 1px 14px rgba(0,0,0,.55);z-index:2;
}
.galfeat-tag{
  flex:0 0 auto;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  padding:5px 9px;border-radius:7px;background:var(--accent);color:#fff;
}
.galfeat-lead::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none;z-index:1;
}

.galfeat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);align-content:start;
}
.galfeat-cell{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hair);background:var(--surface);
}
.galfeat-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.galfeat-cell:hover img{transform:scale(1.06)}
.galfeat-cell figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:9px;
  padding:30px 14px 12px;color:#fff;font-size:.86rem;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
}
.galfeat-cell:hover figcaption{opacity:1;transform:none}
.galfeat-cell figcaption .galfeat-tag{font-size:.66rem;padding:4px 7px}

.galfeat-more{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  border-radius:var(--radius);border:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);
  padding:18px;text-align:center;background:var(--surface);
}
.galfeat-more-n{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--accent);line-height:1}
.galfeat-more-l{font-size:.82rem;color:var(--ink-60);font-weight:600}

/* ------------------------------------------------------------
   FULLBLEED — full-width alternating bands w/ numbered side rail
   ------------------------------------------------------------ */
.galband{padding-bottom:0;overflow:hidden}
.galband-intro{max-width:680px;margin-bottom:clamp(2.4rem,5vw,4rem)}
.galband-intro h2{margin:0 0 14px;position:relative;padding-bottom:18px}
.galband-intro h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;
  border-radius:4px;background:var(--accent)}
.galband-intro .lead{max-width:54ch}

.galband-rows{display:flex;flex-direction:column}
.galband-row{
  display:grid;grid-template-columns:1.6fr 1fr;align-items:center;
  border-top:1px solid var(--hair);
}
.galband-row:last-child{border-bottom:1px solid var(--hair)}
.galband-row--flip{grid-template-columns:1fr 1.6fr}
.galband-row--flip .galband-media{order:2}
.galband-row--flip .galband-rail{order:1;padding-left:clamp(22px,6vw,90px);padding-right:0}

.galband-media{overflow:hidden}
.galband-media img{
  width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/10;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.galband-row:hover .galband-media img{transform:scale(1.045)}

.galband-rail{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  padding:clamp(2rem,5vw,4rem) clamp(22px,6vw,90px) clamp(2rem,5vw,4rem) clamp(22px,5vw,56px);
}
.galband-idx{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);
  line-height:.9;color:var(--accent);letter-spacing:-.04em;
}
.galband-line{width:46px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.galband-cap{
  margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.18;color:var(--ink);max-width:24ch;
}

/* ------------------------------------------------------------
   MOSAIC — asymmetric wall of varied tile sizes
   ------------------------------------------------------------ */
.galmos-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px 48px;
  margin-bottom:clamp(2.2rem,4.5vw,3.4rem);
}
.galmos-head h2{margin:0;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.02em;max-width:18ch}
.galmos-head .eyebrow{margin-bottom:12px}
.galmos-head-sub{max-width:38ch;text-align:right;padding-bottom:8px}

.galmos-wall{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(120px,15vw,190px);
  gap:clamp(.7rem,1.4vw,1.1rem);
}
.galmos-tile{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  grid-column:span 2;grid-row:span 1;background:var(--dark);
}
.galmos-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.galmos-tile:hover img{transform:scale(1.06)}
/* varied spans -> intentional asymmetry */
.galmos-tile.galmos-w{grid-column:span 4;grid-row:span 2}
.galmos-tile.galmos-t{grid-column:span 2;grid-row:span 2}
.galmos-tile.galmos-s{grid-column:span 2;grid-row:span 1}

.galmos-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px;color:#fff;font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.66));
  transform:translateY(10px);opacity:0;transition:transform .3s ease,opacity .3s ease;
}
.galmos-tile:hover figcaption{transform:none;opacity:1}
.galmos-tile::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .3s ease;pointer-events:none;
}
.galmos-tile:hover::after{box-shadow:inset 0 0 0 3px var(--accent)}

/* ------------------------------------------------------------
   RESPONSIVE — tablet keeps a tighter wall, phones (<=860) stack to one column
   ------------------------------------------------------------ */
/* tablet: drop the mosaic to 4 cols so wide tiles still read but fit smaller widths */
@media(max-width:1040px) and (min-width:861px){
  .galmos-wall{grid-template-columns:repeat(4,1fr)}
  .galmos-tile{grid-column:span 2}
  .galmos-tile.galmos-w{grid-column:span 4;grid-row:span 2}
  .galmos-tile.galmos-t{grid-column:span 2;grid-row:span 2}
  .galmos-tile.galmos-s{grid-column:span 2;grid-row:span 1}
}
@media(max-width:860px){
  /* feature: single column, lead + tiles stack, captions always visible */
  .galfeat-head{grid-template-columns:1fr;align-items:start;gap:14px}
  .galfeat-head-sub{padding-bottom:0}
  .galfeat-body{grid-template-columns:1fr}
  .galfeat-lead img{aspect-ratio:3/2}
  .galfeat-grid{grid-template-columns:1fr}
  .galfeat-cell img{aspect-ratio:3/2}
  .galfeat-cell figcaption{opacity:1;transform:none;padding:22px 12px 11px}

  /* fullbleed: image always on top, rail below */
  .galband-row,
  .galband-row--flip{grid-template-columns:1fr}
  .galband-row--flip .galband-media{order:0}
  .galband-row--flip .galband-rail{order:0;padding-left:22px;padding-right:22px}
  .galband-media img{aspect-ratio:16/10}
  .galband-rail{
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;
    padding:22px;
  }
  .galband-idx{font-size:2.4rem}
  .galband-line{display:none}
  .galband-cap{max-width:none}

  /* mosaic: header stacks, wall collapses to one column, captions always visible */
  .galmos-head{grid-template-columns:1fr;align-items:start;gap:12px}
  .galmos-head h2{max-width:none}
  .galmos-head-sub{text-align:left;max-width:none;padding-bottom:0}
  .galmos-wall{grid-template-columns:1fr;grid-auto-rows:auto;gap:.9rem}
  .galmos-tile,
  .galmos-tile.galmos-w,
  .galmos-tile.galmos-t,
  .galmos-tile.galmos-s{grid-column:1/-1;grid-row:auto}
  .galmos-tile img{aspect-ratio:3/2}
  .galmos-tile figcaption{opacity:1;transform:none}
}

/* Hero variant family CSS. Three distinct geometries: poster (color panel + edge-bleed photo),
   index (meta rule + huge headline + split), arch (arched photo on soft panel + rating bubble). */

/* ---------- POSTER ---------- */
.hero.hero--poster{padding:0;overflow:hidden}
.hero--poster::before{display:none}
.hero-poster-grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(82vh,720px)}
.hero-poster-panel{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:clamp(2.6rem,5vw,4.5rem) clamp(1.8rem,4vw,3.4rem)}
.hero-poster-copy{max-width:530px;width:100%}
.hero-poster-panel h1{color:#fff;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.04;margin:16px 0 18px}
.hero-poster-panel h1 em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:6px;text-decoration-thickness:3px}
.hero-poster-panel .lead{color:rgba(255,255,255,.9);max-width:44ch}
.hero-poster-panel .eyebrow{color:rgba(255,255,255,.85);margin-bottom:0}
.hero-poster-panel .eyebrow::before{background:rgba(255,255,255,.7)}
.hero-poster-media{position:relative;background:var(--surface)}
.hero-poster-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero--poster .btn--onlight{background:#fff;color:var(--accent)}
.hero--poster .btn--onlight:hover{background:rgba(255,255,255,.9)}
.hero--poster .btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero--poster .btn--outline-light:hover{background:rgba(255,255,255,.12)}
.hero--poster .trust li{color:rgba(255,255,255,.92)}
.hero--poster .trust li::before{background:#fff}
@media(max-width:860px){
  .hero-poster-grid{grid-template-columns:1fr;min-height:0}
  .hero-poster-media{order:-1;min-height:300px;height:46vw;max-height:420px}
  .hero-poster-panel{justify-content:flex-start;padding:clamp(2rem,7vw,3rem) 22px}
}

/* ---------- INDEX ---------- */
.hero--index .hero-index-top{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent);margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.hero--index .hero-index-top .eyebrow{margin-bottom:0}
.hero-index-rate{font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap}
.hero-index-stars{color:#f5a623;letter-spacing:1px}
.hero-index-rate small{color:color-mix(in srgb,var(--ink) 55%,transparent);font-weight:500}
.hero--index h1{font-size:clamp(2.7rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 clamp(1.6rem,3.5vw,2.6rem);max-width:18ch}
.hero-index-foot{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(2rem,4vw,3.6rem);align-items:end}
.hero-index-copy .lead{max-width:44ch;font-size:1.08rem}
.hero-index-copy .cta-row{margin-top:24px}
.hero-index-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);box-shadow:0 26px 60px rgba(16,24,40,.18)}
@media(max-width:820px){
  .hero-index-foot{grid-template-columns:1fr;align-items:start;gap:1.8rem}
  .hero-index-media{order:-1}
  .hero-index-media img{aspect-ratio:16/9}
}

/* ---------- ARCH ---------- */
.hero--arch .hero-arch-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero--arch h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.06;margin:10px 0 18px}
.hero-arch-media{position:relative}
.hero-arch-frame{position:relative;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-radius:50% 50% 30px 30px/40% 40% 4% 4%;padding:16px}
.hero-arch-frame img{display:block;width:100%;aspect-ratio:4/4.7;object-fit:cover;border-radius:50% 50% 18px 18px/38% 38% 3% 3%}
.hero-arch-bubble{position:absolute;left:clamp(-8px,-1vw,0px);bottom:30px;background:#fff;border-radius:18px;box-shadow:0 18px 42px rgba(16,24,40,.18);padding:12px 18px;display:flex;flex-direction:column;gap:1px;text-align:left}
.hero-arch-stars{color:#f5a623;font-size:.78rem;letter-spacing:1.5px}
.hero-arch-bubble b{font-size:1.45rem;line-height:1.05;color:var(--ink)}
.hero-arch-bubble small{font-size:.74rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
@media(max-width:820px){
  .hero--arch .hero-arch-grid{grid-template-columns:1fr}
  .hero-arch-media{order:-1;max-width:430px;margin:0 auto;width:100%}
}

/* ---------- OVERLAY ---------- */
.hero.hero--overlay{padding:0;min-height:min(86vh,760px);display:flex;align-items:flex-end;position:relative;overflow:hidden;color:#fff}
.hero--overlay::before{display:none}
.hero-overlay-bg{position:absolute;inset:0;z-index:0}
.hero-overlay-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,10,18,.62),rgba(8,10,18,.18) 60%,transparent)}
.hero-overlay-inner{position:relative;z-index:1;width:100%;padding-block:clamp(2.5rem,6vw,5rem);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hero-overlay-card{background:var(--surface);color:var(--ink);border-radius:calc(var(--radius) + 6px);padding:clamp(1.8rem,3vw,2.6rem);max-width:540px;box-shadow:0 30px 70px rgba(8,10,18,.4)}
.hero-overlay-card h1{margin:12px 0 14px;font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.06}
.hero-overlay-card .lead{max-width:42ch}
.hero-overlay-chip{background:#fff;color:var(--ink);border-radius:16px;padding:12px 18px;box-shadow:0 16px 40px rgba(8,10,18,.3);display:flex;flex-direction:column;gap:1px;flex:0 0 auto;align-self:flex-end}
.hero-overlay-stars{color:#f5a623;font-size:.78rem;letter-spacing:1.5px}
.hero-overlay-chip b{font-size:1.4rem;line-height:1;color:var(--ink)}
.hero-overlay-chip small{font-size:.74rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
@media(max-width:760px){.hero-overlay-chip{display:none}.hero-overlay-card{max-width:none}}

/* ---------- DUO ---------- */
.hero-duo{position:relative;min-height:clamp(360px,40vw,520px)}
.hero-duo .hd-a{width:82%;aspect-ratio:4/4.2;object-fit:cover;border-radius:calc(var(--radius) + 2px);box-shadow:0 26px 60px rgba(16,24,40,.2);display:block;margin-left:auto}
.hero-duo .hd-b{position:absolute;left:0;bottom:-6px;width:46%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);border:6px solid var(--surface);box-shadow:0 20px 44px rgba(16,24,40,.24)}
@media(max-width:820px){.hero-duo{min-height:0;margin-top:8px}.hero-duo .hd-a{width:100%}.hero-duo .hd-b{width:40%}}

/* ---------- RIBBON ---------- */
.hero--ribbon{text-align:center;overflow:hidden}
.hero-ribbon-head{display:flex;flex-direction:column;align-items:center}
.hero-ribbon-head .eyebrow{justify-content:center}
.hero-ribbon-head h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.04;margin:8px 0 18px;max-width:18ch}
.hero-ribbon-head .lead{max-width:60ch}
.hero-ribbon-head .cta-row{justify-content:center}
.hero-ribbon-badges{display:flex;gap:10px 14px;flex-wrap:wrap;justify-content:center;margin:30px 0 36px}
.hero-ribbon-badges span{background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600}
.hero-ribbon-strip{width:100vw;position:relative;left:50%;transform:translateX(-50%);margin-bottom:calc(-1 * clamp(3.5rem,7vw,6.5rem))}
.hero-ribbon-strip img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
@media(max-width:760px){.hero-ribbon-strip img{aspect-ratio:16/10}}

/* ---------- FEATURE ---------- */
.hero-feat-list{list-style:none;padding:0;margin:26px 0 8px;display:flex;flex-direction:column;gap:16px}
.hero-feat-list li{display:flex;gap:14px;align-items:flex-start}
.hero-feat-list .hf-n{flex:0 0 auto;font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hero-feat-list .hf-body b{display:block;font-size:1.02rem;color:var(--ink)}
.hero-feat-list .hf-body p{margin:2px 0 0;font-size:.92rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}

/* ---------- INSET ---------- */
.hero.hero--inset{padding:clamp(1rem,2.5vw,2rem);overflow:hidden}
.hero--inset::before{display:none}
.hero-inset-card{position:relative;border-radius:clamp(18px,2.5vw,30px);overflow:hidden;min-height:min(78vh,680px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.hero-inset-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-inset-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,10,18,.82),rgba(8,10,18,.25) 52%,rgba(8,10,18,.05))}
.hero-inset-copy{position:relative;z-index:2;padding:clamp(1.8rem,4vw,3.4rem);max-width:680px}
.hero-inset-copy h1{color:#fff;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.05;margin:12px 0 14px}
.hero-inset-copy .lead{color:rgba(255,255,255,.9);max-width:48ch}
.hero-inset-copy .eyebrow{color:rgba(255,255,255,.85)}
.hero-inset-copy .eyebrow::before{background:rgba(255,255,255,.7)}
.hero--inset .btn--onlight{background:#fff;color:var(--accent)}
.hero--inset .btn--onlight:hover{background:rgba(255,255,255,.9)}
.hero--inset .btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero--inset .btn--outline-light:hover{background:rgba(255,255,255,.14)}
.hero--inset .trust li{color:rgba(255,255,255,.92)}
.hero--inset .trust li::before{background:#fff}

/* Proof & craft family (variants/proof.mjs): compare.table, ratingpanel.basic, credstrip.basic,
   brands.strip, stats.counters, steps.rich. Everything keys off the theme vars so all directions
   and skins inherit sensibly. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* compare.table: us vs the typical contractor */
.cmp{border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;overflow-x:auto;background:#fff;box-shadow:0 14px 40px rgba(16,24,40,.06)}
.section--dark .cmp,.cmp{color:var(--ink)}
.cmp-table{width:100%;border-collapse:collapse;min-width:520px}
.cmp-table th,.cmp-table td{padding:15px 18px;text-align:center;border-top:1px solid var(--hair);font-size:.96rem}
.cmp-table thead th{border-top:0;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-0.01em;padding-block:18px}
.cmp-table .cmp-feat{text-align:left;font-weight:600;color:var(--ink-72)}
.cmp-table thead .cmp-feat{color:transparent}
.cmp-table .cmp-us{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cmp-table thead .cmp-us{background:var(--accent);color:#fff}
.cmp-table tbody tr:nth-child(even) td,.cmp-table tbody tr:nth-child(even) .cmp-feat{background-color:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.cmp-table tbody tr:nth-child(even) .cmp-us{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cmp-yes,.cmp-no{display:inline-block;width:22px;height:22px;border-radius:50%;position:relative;vertical-align:middle}
.cmp-yes{background:var(--accent)}
.cmp-yes::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.cmp-no{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.cmp-no::before,.cmp-no::after{content:"";position:absolute;left:5px;top:10px;width:12px;height:2px;background:color-mix(in srgb,var(--ink) 45%,transparent);border-radius:2px}
.cmp-no::before{transform:rotate(45deg)}.cmp-no::after{transform:rotate(-45deg)}
.cmp-text{font-weight:600;font-size:.9rem}

/* ratingpanel.basic: aggregate rating + review-source badges */
.ratepanel{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ratepanel-score{text-align:center;background:#fff;color:var(--ink);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.6rem) clamp(2rem,4vw,3.4rem);box-shadow:0 22px 54px rgba(16,24,40,.1)}
.ratepanel-num{font-family:var(--font-display);font-weight:800;font-size:clamp(3.2rem,6vw,4.6rem);line-height:1;letter-spacing:-0.04em;color:var(--accent)}
.ratepanel-stars{color:#f5a623;font-size:1.3rem;letter-spacing:3px;margin-top:8px}
.ratepanel-sub{font-size:.88rem;font-weight:600;color:var(--ink-60);margin-top:6px}
.ratepanel-body h2{padding-bottom:18px;position:relative;margin-bottom:4px}
.ratepanel-body h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;border-radius:4px;background:var(--accent)}
.ratepanel-body .lead{margin-top:12px}
.ratepanel-sources{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ratepanel-src{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);border:1px solid var(--hair);border-radius:999px;padding:9px 16px;font-size:.88rem;font-weight:600;transition:border-color .15s,transform .15s}
a.ratepanel-src:hover{border-color:var(--accent);transform:translateY(-1px)}
.ratepanel-src .stars{color:#f5a623}
.ratepanel-src small{color:var(--ink-60);font-weight:500}
.ratepanel-body .cta-row{margin-top:22px}

/* credstrip.basic: slim licenses / insurance / years band */
.credstrip{background:var(--dark);color:#fff;padding-block:clamp(1.3rem,2.5vw,1.9rem)}
.credstrip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0}
.cred{display:flex;flex-direction:column;gap:2px;text-align:center;padding:2px clamp(18px,3vw,44px);position:relative}
.cred + .cred::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.16)}
.cred b{font-family:var(--font-display);font-weight:700;font-size:.98rem;letter-spacing:-0.01em}
.cred span{font-size:.8rem;color:rgba(255,255,255,.62)}

/* brands.strip: materials / brands we install */
.brands{padding-block:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.brands-head{margin:0 0 18px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.brands-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px clamp(24px,4vw,52px)}
.brands-item{display:flex;align-items:center}
.brands-item img{height:34px;width:auto;opacity:.72;filter:grayscale(1);transition:opacity .2s,filter .2s}
.brands-item:hover img{opacity:1;filter:none}
.brands-item span{font-family:var(--font-display);font-weight:800;font-size:1.06rem;letter-spacing:-0.01em;color:var(--ink-60)}

/* stats.counters: count-up numbers (animated by engine.js [data-countup]) */
.stats--counters .stat-num{font-variant-numeric:tabular-nums}
.stats--counters .sec-head{margin-bottom:clamp(1.8rem,3vw,2.6rem)}

/* steps.rich: numbered process with a connector rail + optional per-step photo */
.steps-rich{list-style:none;counter-reset:sr;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.4rem);position:relative}
.steps-rich::before{content:"";position:absolute;left:31px;top:14px;bottom:14px;width:2px;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.steps-rich-item{display:grid;grid-template-columns:auto 1fr 260px;gap:clamp(1.2rem,2.5vw,2rem);align-items:center;position:relative}
.steps-rich-n{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);font-family:var(--font-display);font-weight:800;font-size:1.2rem;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 22%,transparent);z-index:1}
.steps-rich-body h3{font-size:1.25rem;margin-bottom:6px}
.steps-rich-body p{margin:0;color:var(--ink-72);max-width:58ch}
.steps-rich-media{border-radius:calc(var(--radius) + 2px);overflow:hidden}
.steps-rich-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.steps-rich-item:not(:has(.steps-rich-media)){grid-template-columns:auto 1fr}

@media(max-width:860px){
  .ratepanel{grid-template-columns:1fr;gap:1.6rem}
  .ratepanel-score{justify-self:start;padding:1.4rem 2rem}
  .cmp-table th,.cmp-table td{padding:12px 12px;font-size:.9rem}
  .cred{flex:1 1 46%;padding:2px 10px}
  .cred + .cred::before{display:none}
  .steps-rich::before{left:23px}
  .steps-rich-n{width:46px;height:46px;font-size:1rem}
  .steps-rich-item{grid-template-columns:auto 1fr}
  .steps-rich-media{grid-column:2}
}

/* ============================================================================
   reviews family, variant styles. Layered over engine.css.
   All classes prefixed per variant (.rvspot-, .rvwall-, .rvmarq-) so nothing
   collides with the base .review/.stars or other families. Theme-token only.
   ========================================================================== */

/* shared star rendering for this family ------------------------------------ */
.rv-stars{display:inline-flex;gap:3px;line-height:1}
.rv-stars .is-on{color:#f5a623}
.rv-stars .is-off{color:color-mix(in srgb,var(--ink) 18%,transparent)}

/* ============================================================================
   1) SPOTLIGHT  --  one editorial pull-quote, oversized, asymmetric
   ========================================================================== */
.rvspot-wrap{max-width:1080px}
.rvspot-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.rvspot-head h2{margin:0;font-size:clamp(1.9rem,3.4vw,2.7rem)}

.rvspot-figure{position:relative;margin:0;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
/* hanging quotation glyph, sits in the left rail, big and accent-tinted */
.rvspot-mark{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(6rem,16vw,12rem);line-height:.72;
  color:var(--accent);opacity:.16;user-select:none;
  margin-top:-.1em;
}
.rvspot-body{padding-top:clamp(.5rem,2vw,1.5rem)}
.rvspot-stars{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:clamp(1rem,2.5vw,1.6rem)}
.rvspot-quote{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.2;letter-spacing:-0.02em;
  color:var(--ink);max-width:18ch;
}
.rvspot-quote{max-width:none}
@media(min-width:861px){.rvspot-quote{max-width:22ch}}

.rvspot-attr{display:flex;align-items:center;gap:14px;margin-top:clamp(1.6rem,3vw,2.4rem)}
.rvspot-avatar{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
}
.rvspot-who{display:flex;flex-direction:column;line-height:1.3}
.rvspot-who strong{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.rvspot-who em{font-style:normal;color:color-mix(in srgb,var(--ink) 60%,transparent);font-size:.92rem}

/* secondary voices: a thin three-up strip divided by hairlines */
.rvspot-more{
  list-style:none;margin:clamp(2.6rem,5vw,4rem) 0 0;padding:clamp(2.2rem,4vw,3rem) 0 0;
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);
}
.rvspot-mini{display:flex;flex-direction:column;gap:10px;position:relative}
.rvspot-mini + .rvspot-mini::before{
  content:"";position:absolute;left:calc(-1 * clamp(.7rem,1.5vw,1.3rem));top:2px;bottom:2px;
  width:1px;background:var(--hair);
}
.rvspot-mini-stars{font-size:.95rem}
.rvspot-mini p{margin:0;font-size:.98rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.rvspot-mini cite{font-style:normal;font-size:.85rem;font-weight:700;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.rvspot-mini cite span{display:block;font-weight:500;color:color-mix(in srgb,var(--ink) 48%,transparent)}

@media(max-width:860px){
  .rvspot-figure{grid-template-columns:1fr;gap:0}
  .rvspot-mark{font-size:clamp(4.5rem,22vw,7rem);margin-bottom:-.25em}
  .rvspot-body{padding-top:0}
  .rvspot-more{grid-template-columns:1fr;gap:0}
  .rvspot-mini{padding:1.4rem 0;border-top:1px solid var(--hair)}
  .rvspot-mini:first-child{padding-top:0;border-top:0}
  .rvspot-mini + .rvspot-mini::before{display:none}
}

/* ============================================================================
   2) WALL  --  sticky intro + CSS-column masonry of short cards
   ========================================================================== */
.rvwall-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.rvwall-intro{position:sticky;top:96px}
.rvwall-intro h2{margin:0 0 16px;font-size:clamp(1.8rem,3vw,2.5rem)}
.rvwall-count{margin:0;font-size:.95rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.rvwall-count strong{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:1.15rem;color:var(--accent);margin-right:4px;
}

.rvwall-cards{columns:2 260px;column-gap:clamp(.9rem,1.6vw,1.4rem)}
.rvwall-card{
  margin:0 0 clamp(.9rem,1.6vw,1.4rem);break-inside:avoid;
  background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.1rem,2vw,1.5rem);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.rvwall-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,40,.10);border-color:color-mix(in srgb,var(--accent) 40%,var(--hair))}
.rvwall-cstars{font-size:1rem}
.rvwall-card blockquote{margin:0;font-size:1rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 86%,transparent)}
.rvwall-attr{display:flex;align-items:center;gap:11px;margin-top:2px}
.rvwall-badge{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
}
.rvwall-who{display:flex;flex-direction:column;line-height:1.25;font-size:.88rem}
.rvwall-who strong{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.rvwall-who span{color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:.8rem}

@media(max-width:860px){
  .rvwall-grid{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
  .rvwall-intro{position:static}
  .rvwall-cards{columns:1}
}

/* ============================================================================
   3) MARQUEE  --  CSS-only seamless horizontal scroll, pause on hover
   ========================================================================== */
.rvmarq-head{max-width:640px;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.rvmarq-head h2{margin:0;font-size:clamp(1.8rem,3vw,2.5rem)}

/* viewport clips the track so the page itself never scrolls sideways.
   edge fade via mask so cards melt at the rails. */
.rvmarq-viewport{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rvmarq-track{
  display:flex;width:max-content;gap:clamp(1rem,2vw,1.5rem);
  padding-block:6px;
  animation:rvmarq-scroll 46s linear infinite;
  will-change:transform;
}
/* track = items + duplicate; shifting by 50% lands on the seam = seamless */
@keyframes rvmarq-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.rvmarq-viewport:hover .rvmarq-track,
.rvmarq-track:focus-within{animation-play-state:paused}

.rvmarq-card{
  flex:0 0 clamp(280px,80vw,360px);box-sizing:border-box;margin:0;
  background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.3rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;gap:13px;
}
.rvmarq-cstars{font-size:1rem}
.rvmarq-card blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 86%,transparent)}
.rvmarq-attr{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:4px}
.rvmarq-badge{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
}
.rvmarq-who{display:flex;flex-direction:column;line-height:1.25;font-size:.9rem}
.rvmarq-who strong{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.rvmarq-who span{color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:.82rem}

/* respect reduced-motion: stop the loop, let users scroll the rail by hand */
@media(prefers-reduced-motion:reduce){
  .rvmarq-track{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .rvmarq-card{scroll-snap-align:start}
}

@media(max-width:860px){
  .rvmarq-track{animation-duration:32s}
}

/* services.rows — alternating editorial rows */
.svcrows{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.svcrows-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.svcrows-row--flip .svcrows-media{order:2}
.svcrows-media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius)}
.svcrows-n{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--accent);letter-spacing:.1em}
.svcrows-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:8px 0 12px}
.svcrows-copy p{color:var(--ink-72);margin:0 0 18px;max-width:46ch}
.svcrows-price{display:inline-block;font-weight:700;color:var(--accent);margin-bottom:16px}
.svcrows-cta{margin-top:6px}
@media(max-width:860px){.svcrows-row,.svcrows-row--flip .svcrows-media{grid-template-columns:1fr;order:0}.svcrows-media{order:-1}}

/* services.list — numbered editorial list */
.svclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.svclist-item a{display:grid;grid-template-columns:auto 84px 1fr auto;gap:22px;align-items:center;padding:22px 6px;border-bottom:1px solid var(--hair);color:inherit;transition:padding .2s ease,background .2s ease}
.svclist-item a:hover{padding-inline:18px;background:var(--surface)}
.svclist-n{font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:1.05rem}
.svclist-thumb{width:84px;height:64px;border-radius:calc(var(--radius) - 4px);overflow:hidden;background:var(--surface)}
.svclist-thumb img{width:100%;height:100%;object-fit:cover}
.svclist-text b{font-family:var(--font-display);font-size:1.2rem;display:block}
.svclist-text span{color:var(--ink-60);font-size:.95rem}
.svclist-arrow{font-size:1.4rem;color:var(--accent);transition:transform .2s ease}
.svclist-item a:hover .svclist-arrow{transform:translateX(6px)}
@media(max-width:860px){.svclist-item a{grid-template-columns:auto 1fr auto;gap:14px}.svclist-thumb{display:none}}

/* services.feature — big lead + compact grid */
.svcfeat{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.svcfeat-lead{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff;background:var(--dark)}
.svcfeat-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svcfeat-lead-cap{position:relative;z-index:1;padding:28px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.svcfeat-lead-cap h3{color:#fff;font-size:1.6rem;margin:0 0 6px}
.svcfeat-lead-cap p{color:rgba(255,255,255,.85);margin:0 0 10px;max-width:40ch}
.svcfeat-link{font-weight:700;color:#fff}
.svcfeat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svcfeat-cell{border:1px solid var(--hair);border-radius:var(--radius);padding:20px;color:inherit;background:var(--surface);transition:border-color .2s ease,transform .2s ease}
.svcfeat-cell:hover{border-color:var(--accent);transform:translateY(-3px)}
.svcfeat-cell-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svcfeat-cell-h h4{font-size:1.05rem}.svcfeat-cell-h span{color:var(--accent)}
.svcfeat-cell p{color:var(--ink-60);font-size:.9rem;margin:8px 0 0}
@media(max-width:860px){.svcfeat{grid-template-columns:1fr}.svcfeat-lead{min-height:320px}.svcfeat-grid{grid-template-columns:1fr 1fr}}

/* MDL Home Services skin: contemporary navy + orange, Sora display, soft corners, navy topbar,
   pill eyebrows, and a gradient orange CTA band. Ports their North Jersey whole-home look. */
:root { --mdl-navy: #0D3879; --mdl-dmute: #C8D6EC; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; }
/* pill eyebrow (their signature) */
.eyebrow { display: inline-block; color: var(--accent); font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; background: #fff1ec; border: 1px solid #ffd9cc; padding: .42rem .85rem; border-radius: 100px; }

/* topbar: navy strip */
.topbar { background: var(--mdl-navy); color: #dfe7f3; }
.topbar-call, .topbar-call strong { color: #fff; }
.topbar-badges span { color: var(--mdl-dmute); }

/* header: white, blurred, sticky feel */
.site-header { background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(13,56,121,.08); }
.brand-word b { color: var(--mdl-navy); }
.brand-mark { background: var(--accent); color: #fff; }

/* hero: light, navy headline, orange accent word */
.hero h1 { color: var(--mdl-navy); }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .lead { color: #5a6472; }
.hero .lead strong { color: var(--mdl-navy); }
.hero-media img { box-shadow: 0 24px 60px rgba(13,56,121,.18); }

/* credential / proof strip */
.trustbar { background: var(--surface); }
.trust-rating b, .trust-rating .stars { color: var(--accent); }

/* stats band: navy with orange numbers */
.stats-section { background: var(--mdl-navy); color: #eaf1fb; }
.stat-num { color: var(--accent); font-family: var(--font-display); font-weight: 800; }
.stat-label { color: var(--mdl-dmute); }

/* service + review cards */
[data-section="services"] .card { border-top: 4px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s; }
[data-section="services"] .card:hover { border-top-color: var(--accent); transform: translateY(-3px); }
.review { border-top: 4px solid var(--accent); }

/* CTA band: orange gradient (their signature) */
.cta-band { background: linear-gradient(135deg, var(--accent), #ff7a4d); }
.cta-band h2, .cta-band .lead, .cta-band p { color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--accent); }
.cta-band .btn--primary:hover { background: var(--mdl-navy); color: #fff; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }

/* footer: navy */
.site-footer { background: var(--mdl-navy); color: #eaf1fb; }
.site-footer a { color: var(--mdl-dmute); }
.site-footer a:hover { color: #fff; }
.foot-brand strong { color: #fff; }