/* 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)}

/* 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)}
.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 span{width:24px;height:2px;background:var(--ink);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}
.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;gap:8px;font-weight:600}
.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-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%);transition:transform .25s ease}
  .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)}
}

/* ============================================================
   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)}
.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}
}

/* ============================================================================
   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}
}

/* ============================================================================
   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}}