@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/fraunces-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/grotesk-700.woff2') format('woff2')}
:root{
  --brand:#00ad2b;--brand-dark:#00701c;--brand-deep:#141f17;--brand-deep2:#213025;
  --secondary:#eeddbb;--accent:#ddbb88;
  --ink:#15181e;--body:#3c424c;--muted:#6b7280;
  --bg:#ffffff;--surface:#f7f8fa;--surface-alt:#eef1f5;--border:#e6e9ef;
  --on-brand:#111111;--on-accent:#111111;--hero-text:#ffffff;
  --maxw:1200px;--radius:16px;--shadow:0 10px 30px rgba(16,24,40,.08);--shadow-lg:0 24px 60px rgba(16,24,40,.16);
  --font:'Inter',"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:'Fraunces',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.72;font-size:18px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--ink);line-height:1.04;margin:0 0 .5em;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
h1,h2{font-family:var(--serif);letter-spacing:-.03em}
h1{font-size:clamp(2.9rem,6.2vw,5.2rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.7rem)}
h3{font-size:1.4rem;letter-spacing:-.012em}
p{margin:0 0 1.15rem}
a{color:var(--brand-dark);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
/* eyebrow carries a recurring accent rule = a small, consistent brand signature */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:22px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--accent);display:inline-block;flex:none}
.section-head.center .eyebrow{justify-content:center}
.section{padding:var(--section-pad,clamp(94px,12.5vw,172px)) 0}
.section--alt{background:var(--surface)}
.lead{font-size:clamp(1.24rem,1.7vw,1.42rem);line-height:1.62;color:var(--body);max-width:60ch}
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;border:none;cursor:pointer;font:inherit;font-weight:640;letter-spacing:.01em;padding:15px 30px;border-radius:14px;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease,background .18s ease,color .18s ease;text-decoration:none}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.btn--primary:hover{background:var(--brand-dark);transform:translateY(-3px);box-shadow:0 20px 40px -10px color-mix(in srgb,var(--brand) 65%,transparent)}
.btn--accent{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn--accent:hover{transform:translateY(-3px)}
.btn--primary::after,.btn--accent::after{content:"→";font-weight:600;transition:transform .2s ease}
.btn--primary:hover::after,.btn--accent:hover::after{transform:translateX(4px)}
.btn--ghost{background:rgba(255,255,255,.07);color:var(--hero-text);border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-3px)}
.btn--lg{padding:17px 36px;font-size:1.06rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em}
.brand img{height:66px;width:auto;flex:none}
.brand--logo-only img{height:92px}
.brand .brand-name{max-width:240px;line-height:1.1}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;color:var(--ink);font-weight:520;font-size:.97rem;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .22s ease}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle,.nav-toggle-label{display:none}
@media(max-width:860px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:#fff;padding:18px 24px;gap:18px;border-bottom:1px solid var(--border);transform:translateY(-130%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .nav-toggle:checked ~ .nav-links{transform:translateY(0)}
  .nav-toggle-label{display:inline-flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
  .nav-toggle-label span{width:24px;height:2px;background:var(--ink);border-radius:2px}
  .nav-cta .btn{display:none}
}

/* hero — asymmetric, editorial, with a left accent rule for identity */
.hero{position:relative;color:var(--hero-text);padding:clamp(104px,15vw,176px) 0 clamp(84px,12vw,132px);background:linear-gradient(150deg,var(--brand-deep),var(--brand-deep2));overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-8% 0;background:var(--hero-bg) center/cover no-repeat;opacity:.34;mix-blend-mode:luminosity;transform:translateY(var(--py,0)) scale(1.12);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 12% 8%,transparent 38%,rgba(0,0,0,.5) 100%),linear-gradient(115deg,rgba(0,0,0,.62),rgba(0,0,0,.04))}
/* showcase a quality/generated hero image: show it prominently with a directional scrim for legibility */
.hero--photo::before{opacity:1;mix-blend-mode:normal;transform:scale(1.12);filter:brightness(1.03) saturate(1.06) contrast(1.02);animation:kenburns 22s ease-in-out infinite alternate}
/* --hs = brightness-adaptive scrim strength (set per hero at build time): a bright
   aerial gets a stronger scrim than a dark interior, so the headline is ALWAYS legible. */
/* light, fast-falloff directional scrim — keeps the RIGHT ~45% of the photo vibrant;
   text legibility comes mainly from the local halo + text-shadow, not a heavy wash */
/* strong dark backing on the TEXT side (left), clear on the right so the photo stays
   vibrant — white headline pops without greying the image */
/* LIGHT scrim only — the photo stays vibrant; the white headline stays legible via a
   crisp dark text-outline (below), not a heavy dark wash. Fixes the "dim overlay". */
.hero--photo::after{background:linear-gradient(100deg,rgba(8,12,18,calc(var(--hs,.6) * .5)) 0%,rgba(8,12,18,calc(var(--hs,.6) * .24)) 42%,transparent 68%),linear-gradient(0deg,rgba(8,12,18,calc(var(--hs,.6) * .26)),transparent 30%)}
@keyframes kenburns{0%{transform:scale(1.08) translate3d(0,0,0)}100%{transform:scale(1.2) translate3d(-2%,-1.5%,0)}}
/* reduced-motion: don't go fully static — keep a SLOW, gentle ambient drift (calm, non-vestibular) */
@media(prefers-reduced-motion:reduce){.hero--photo::before{animation:kenburnsGentle 48s ease-in-out infinite alternate}}
@keyframes kenburnsGentle{0%{transform:scale(1.07)}100%{transform:scale(1.13)}}
/* hero layering: poster(z0) < video(z1) < brand-glow(z2) < scrim(z3) < content(z4) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;filter:brightness(1.03) saturate(1.06) contrast(1.02);transition:opacity 1.4s ease}
.hero-video.playing{opacity:1}
/* poster (::before) keeps its Ken Burns drift so the hero is ALWAYS moving even if
   the browser blocks video autoplay (e.g. opening the file directly) */
@media(prefers-reduced-motion:reduce){.hero-video{display:none!important}}
/* deterministic premium motion: two brand-colored lights slowly drifting across the hero */
/* glows live on the OPEN (right) side so they never wash out the left-aligned headline */
.hero-glow{position:absolute;inset:-25%;z-index:2;pointer-events:none;background:radial-gradient(46% 54% at 76% 28%,color-mix(in srgb,var(--brand) 78%,transparent),transparent 64%);mix-blend-mode:screen;opacity:.8;filter:blur(26px);animation:heroGlow 11s ease-in-out infinite alternate}
.hero-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 48% at 90% 74%,color-mix(in srgb,var(--accent) 62%,transparent),transparent 62%);animation:heroGlow2 14s ease-in-out infinite alternate}
.hero--photo::after,.hero--video::after{z-index:3}
.hero--photo .container,.hero--video .container{position:relative;z-index:4}
/* cinematic WebGL hero: canvas sits above the poster fallback, below the scrim.
   It fades in once the first frame is drawn (.hero-fx--on); if WebGL is missing
   the canvas stays transparent and the poster (::before) shows through. */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero-fx.hero-fx--on{opacity:1}
.hero--cinematic{min-height:clamp(560px,84vh,860px);display:flex;align-items:center}
.hero--cinematic .container{width:100%}
/* staged, cinematic headline entrance */
html.js .hero--cinematic .hero-lead>*{opacity:0;transform:translateY(26px);filter:blur(8px)}
.hero--cinematic.revealed .hero-lead>*{animation:heroRise 1s cubic-bezier(.16,.8,.24,1) forwards}
.hero--cinematic.revealed .hero-lead>.eyebrow{animation-delay:.2s}
.hero--cinematic.revealed .hero-lead>h1{animation-delay:.36s}
.hero--cinematic.revealed .hero-lead>p{animation-delay:.58s}
.hero--cinematic.revealed .hero-lead>.hero-actions{animation-delay:.78s}
@keyframes heroRise{to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){html.js .hero--cinematic .hero-lead>*{opacity:1;transform:none;filter:none;animation:none}}
@keyframes heroGlow{0%{transform:translate3d(-16%,-10%,0) scale(.95)}100%{transform:translate3d(18%,12%,0) scale(1.45)}}
@keyframes heroGlow2{0%{transform:translate3d(14%,10%,0) scale(1.3)}100%{transform:translate3d(-16%,-12%,0) scale(.9)}}
@media(prefers-reduced-motion:reduce){.hero-glow{opacity:.78;animation:heroGlowGentle 18s ease-in-out infinite alternate}.hero-glow::after{animation:heroGlow2Gentle 23s ease-in-out infinite alternate}}
@keyframes heroGlowGentle{0%{transform:translate3d(-13%,-8%,0) scale(.95);opacity:.55}100%{transform:translate3d(14%,10%,0) scale(1.32);opacity:.85}}
@keyframes heroGlow2Gentle{0%{transform:translate3d(12%,8%,0) scale(1.24);opacity:.5}100%{transform:translate3d(-13%,-10%,0) scale(.92);opacity:.8}}
.hero .container{position:relative;z-index:2;max-width:940px}
.hero-lead{border-left:3px solid var(--accent);padding-left:clamp(20px,3.5vw,40px)}
/* crisp dark OUTLINE keeps white text legible over a fully-vibrant photo (no dim wash) */
.hero .eyebrow{color:#fff;text-shadow:0 0 1px rgba(8,12,18,.95),0 0 4px rgba(8,12,18,.85),0 1px 3px rgba(8,12,18,.9)}
.hero h1{color:#fff;text-shadow:0 0 1px rgba(8,12,18,.98),0 0 4px rgba(8,12,18,.9),0 2px 6px rgba(8,12,18,.85),0 1px 2px rgba(8,12,18,.95);max-width:16ch}
.hero p{font-size:clamp(1.15rem,2vw,1.35rem);color:#fff;text-shadow:0 0 1px rgba(8,12,18,.92),0 0 4px rgba(8,12,18,.82),0 1px 3px rgba(8,12,18,.85);max-width:56ch;margin-top:1.2rem}
/* local text protection: a soft dark halo behind the hero copy guarantees legibility
   over ANY image (busy, bright or dark) without darkening the whole hero */
.hero--photo .hero-lead{position:relative;z-index:1}
.hero--photo .hero-lead::before{content:none}
.theme-immersive .hero--photo .hero-lead::before,.theme-clean .hero--photo .hero-lead::before{background:radial-gradient(96% 108% at 50% 54%,rgba(8,12,18,.72),rgba(8,12,18,.4) 50%,transparent 80%)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
/* SPLIT hero — the client's real portrait (owner/agents) beside the copy; text sits on
   a clean brand-tinted background so it is crisp and NEVER dim. */
.hero--split{background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 9%,var(--bg)),var(--bg) 62%);color:var(--body);padding:clamp(76px,10vw,132px) 0;isolation:isolate;overflow:visible}
.hero--split .container{max-width:min(1180px,92vw)}
.hero--split .hero-lead{border-left:none;padding-left:0}
.hero--split .eyebrow{color:var(--brand-dark)}
.hero--split h1{color:var(--ink);text-shadow:none;max-width:20ch;font-size:clamp(2rem,3.4vw,3.05rem);line-height:1.08;hyphens:none;overflow-wrap:normal}
.hero--split p{color:var(--body);text-shadow:none;max-width:46ch;margin-top:1.2rem}
/* CINEMATIC split hero — committed deep on-brand gradient, cream + gold, serif
   display, gold-framed portrait. Agency branding of the client's own assets. */
.hero--split.hero--immersive{position:relative;background:radial-gradient(130% 130% at 84% 16%,color-mix(in srgb,var(--brand) 42%,var(--brand-deep2)) 0%,var(--brand-deep) 48%,#0b1310 100%);color:#ece4d2}
.hero--split.hero--immersive::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 88% 24%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%);pointer-events:none}
.hero--split.hero--immersive .container{position:relative;z-index:1}
.hero--split.hero--immersive .eyebrow{color:var(--accent)}
.hero--split.hero--immersive .eyebrow::before{background:var(--accent)}
.hero--split.hero--immersive h1{font-family:var(--serif);color:#f7f0df;font-weight:600;font-size:clamp(2.5rem,4.6vw,4.2rem);line-height:1.03;letter-spacing:-.012em;max-width:15ch}
.hero--split.hero--immersive h1 em{font-style:italic;color:var(--accent)}
.hero--split.hero--immersive p{color:rgba(236,228,210,.82);max-width:44ch}
.hero--split.hero--immersive .hero-portrait{position:relative}
.hero--split.hero--immersive .hero-portrait::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.hero--split.hero--immersive .hero-portrait img{border-radius:16px;height:clamp(440px,58vh,620px);box-shadow:0 46px 100px -34px rgba(0,0,0,.72);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.hero--split.hero--immersive .btn--primary{background:var(--accent);color:#1c1408;border-color:var(--accent);box-shadow:0 16px 40px -16px color-mix(in srgb,var(--accent) 70%,transparent)}
.hero--split.hero--immersive .btn--primary:hover{filter:brightness(1.07)}
.hero-split{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero-portrait{margin:0}
.hero-portrait img{width:100%;height:clamp(420px,56vh,600px);object-fit:cover;object-position:center 22%;border-radius:22px;box-shadow:var(--shadow-lg)}
@media(max-width:860px){.hero-split{grid-template-columns:1fr;gap:30px}.hero-portrait img{height:380px}}

/* ===== premium interactions (Tier-A; all degrade gracefully) ===== */
/* film grain — site-wide, subtle, never interactive */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
/* heading line-by-line reveal */
.section h2 .ln,.split h2 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.section h2 .ln-i,.split h2 .ln-i{display:inline-block;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,.8,.24,1);will-change:transform}
.section h2.lines-in .ln-i,.split h2.lines-in .ln-i{transform:none}
/* card 3D tilt + cursor spotlight */
.card{transform-style:preserve-3d;transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease,border-color .2s ease}
.card>*{position:relative;z-index:1}
.card::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 16%,transparent),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.card:hover::after{opacity:1}
/* image clip-path reveal */
.img-reveal{clip-path:inset(0 0 103% 0);transform:scale(1.06);transition:clip-path 1.15s cubic-bezier(.16,.8,.24,1),transform 1.25s cubic-bezier(.16,.8,.24,1);will-change:clip-path,transform}
.img-reveal.in{clip-path:inset(0 0 0 0);transform:none}
/* marquee brand band */
.marquee{overflow:hidden;border-block:1px solid var(--border);background:var(--surface);padding:20px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track .mq{font-family:var(--serif);font-size:clamp(1.35rem,3vw,2.2rem);font-weight:600;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;display:inline-flex;align-items:center}
.marquee-track .mq::after{content:"\2726";color:var(--accent);font-size:.7em;margin:0 clamp(28px,5vw,60px)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.img-reveal{clip-path:none;transform:none}.section h2 .ln-i,.split h2 .ln-i{transform:none}}

/* generic grids */
.grid{display:grid;gap:28px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:stretch}
.split>div{align-self:center}
.about-solo{max-width:60ch}
.about-solo .lead{max-width:62ch}
.theme-immersive .about-solo,.theme-clean .about-solo{max-width:64ch;margin:0 auto;text-align:center}
.theme-immersive .about-solo .lead,.theme-clean .about-solo .lead{margin-left:auto;margin-right:auto}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:100%;min-height:340px;max-height:560px;object-fit:cover}
/* a portrait (e.g. an owner photo) shows WHOLE — no cropped heads/feet */
.split img.about-portrait{object-fit:contain;object-position:center;background:var(--surface-alt);max-height:640px;min-height:420px}
.grid--center{max-width:860px;margin-inline:auto}
@media(max-width:860px){.grid--2,.grid--3{grid-template-columns:1fr}.split{grid-template-columns:1fr;gap:32px}.split img{min-height:240px}}

.card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:40px 34px 36px;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,border-color .2s ease;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ic{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--brand);letter-spacing:-.02em;margin-bottom:16px}
.card h3{margin-bottom:.5em}
.card p{color:var(--body);margin:0;font-size:1.02rem}

/* why-choose-us: premium cards with an accent badge (distinct from service cards) */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px}
.why-grid--2{grid-template-columns:repeat(2,1fr)}
.why-grid--3{grid-template-columns:repeat(3,1fr)}
.why-card{position:relative;display:flex;gap:18px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px 28px 26px;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .2s ease}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.why-ic{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(140deg,var(--brand),var(--brand-dark));color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.why-card h3{margin:.1em 0 .35em;font-size:1.16rem}
.why-card p{color:var(--body);margin:0;font-size:1.0rem;line-height:1.6}
@media(max-width:680px){.why-grid{grid-template-columns:1fr}}

/* stats band — dark, editorial, hairline-divided */
.stats{position:relative;background:linear-gradient(135deg,var(--brand-deep),var(--brand-deep2));color:#fff;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 150% at 100% 0,color-mix(in srgb,var(--brand) 24%,transparent),transparent 58%)}
.stats .container{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding-top:clamp(58px,7vw,78px);padding-bottom:clamp(58px,7vw,78px)}
.stat{text-align:center;padding:6px 20px;border-right:1px solid rgba(255,255,255,.13)}
.stat:last-child{border-right:none}
.stat .num{font-family:var(--serif);font-size:clamp(2.7rem,5vw,3.7rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.stat .lbl{margin-top:12px;font-weight:600;opacity:.82;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
@media(max-width:560px){.stat{border-right:none}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:18px}
.gallery a,.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery .span2{grid-column:span 2}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.gallery .span2{grid-column:span 1}}

/* cta band */
.cta-band{position:relative;background:linear-gradient(135deg,var(--brand-deep),var(--brand-deep2));color:#fff;text-align:center;border-radius:28px;padding:clamp(52px,7vw,88px) 32px;box-shadow:var(--shadow-lg);overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 50% 0,color-mix(in srgb,var(--brand) 28%,transparent),transparent 60%)}
/* refined brand accent glow (replaces the old AI texture overlay) */
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(56% 120% at 90% 112%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 55%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:54ch;margin:0 auto 30px}

/* contact + form */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.contact-info p{color:var(--body)}
.contact-info .line{display:flex;gap:12px;align-items:center;margin-bottom:12px;font-weight:560;color:var(--ink)}
.form{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form .field{margin-bottom:18px}
.form label{display:block;font-weight:620;color:var(--ink);margin-bottom:7px;font-size:.95rem}
.form label .req{color:#c0392b}
.form input,.form textarea,.form select{width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;font:inherit;color:var(--ink);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.form textarea{min-height:120px;resize:vertical}
.form .error{display:none;color:#c0392b;font-size:.85rem;margin-top:6px}
.form .field.invalid input,.form .field.invalid textarea,.form .field.invalid select{border-color:#c0392b}
.form .field.invalid .error{display:block}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px}
.form-status{margin-top:14px;font-weight:600}
.placeholder-banner{background:#fff8e6;border:1px solid #f1d27a;color:#7a5c00;padding:10px 14px;border-radius:10px;font-size:.86rem;margin-bottom:18px}

/* footer */
.site-footer{background:var(--ink);color:#cfd4dd;padding:56px 0 32px}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.site-footer a{color:#cfd4dd}.site-footer a:hover{color:#fff}
.site-footer .foot-brand{font-weight:800;color:#fff;font-size:1.1rem;margin-bottom:8px}
.foot-links{display:flex;gap:22px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:20px;font-size:.85rem;color:#9aa1ad;text-align:center}
.section-head{max-width:30ch;margin-bottom:var(--head-gap,62px)}
/* ASIDE heading: title in a left rail, a supporting line fills the right gutter
   (kills the lonely left-aligned heading + empty right half). */
.section-head--aside{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;max-width:none;margin-bottom:var(--head-gap,56px)}
.section-head--aside .sh-title{max-width:none;min-width:0}
/* aside titles are section LABELS, not hero display type — right-size them so
   long words never exceed the column (the line-reveal clip cuts overflow). */
.section-head--aside .sh-title h2{font-size:clamp(1.85rem,2.9vw,2.9rem);line-height:1.06;max-width:16ch;overflow-wrap:break-word}
.section-head--aside .sh-support{font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.5;color:var(--body);max-width:44ch;padding-bottom:.4em}
@media(max-width:820px){.section-head--aside{grid-template-columns:1fr;gap:18px;align-items:start}.section-head--aside .sh-support{padding-bottom:0}}
/* INDEX services: large numbered editorial rows with hairline rules — the
   opposite of the generic 3-up card grid. */
.svc-index{border-top:1px solid var(--border)}
.svc-index .row{display:grid;grid-template-columns:auto minmax(0,7fr) minmax(0,9fr);gap:clamp(20px,4vw,60px);align-items:baseline;padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--border);transition:padding-left .35s cubic-bezier(.2,.7,.2,1)}
.svc-index .row:hover{padding-left:clamp(6px,1vw,16px)}
.svc-index .row-n{font-family:var(--serif);font-size:clamp(1rem,1.3vw,1.2rem);font-weight:700;color:var(--brand);letter-spacing:.02em;padding-top:.4em}
.svc-index .row-t{font-size:clamp(1.5rem,2.7vw,2.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
.svc-index .row-b{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.62;color:var(--body)}
.theme-bold .svc-index .row-t,.theme-editorial .svc-index .row-t{font-family:'Space Grotesk',var(--font)}
@media(max-width:820px){.svc-index .row{grid-template-columns:auto 1fr;gap:8px 18px}.svc-index .row-b{grid-column:2}}
.section-head .lead,.section-head p{max-width:56ch}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .lead,.section-head.center p{margin-left:auto;margin-right:auto}
.container.narrow{max-width:820px}

/* ===== signature editorial moments — bold, tasteful, rooted in their content ===== */
/* full-bleed feature band: their real photo edge-to-edge with a single statement */
.feature{position:relative;min-height:clamp(440px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.feature::before{content:"";position:absolute;inset:0;background:var(--feature-bg) center/cover no-repeat;transform:scale(1.06);will-change:transform}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,18,.12) 0%,rgba(8,12,18,.18) 45%,rgba(8,12,18,.78) 100%)}
.feature .container{position:relative;z-index:1;width:100%;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(48px,6vw,76px)}
.feature h2{color:#fff;max-width:18ch;font-size:clamp(2.3rem,4.8vw,4rem);text-shadow:0 2px 30px rgba(8,12,18,.5)}
.feature .eyebrow{color:#fff}
.feature p{color:rgba(255,255,255,.92);max-width:52ch;font-size:1.18rem;text-shadow:0 1px 14px rgba(8,12,18,.5)}
/* statement: a large editorial pull-quote of their own words, generous space */
.statement{padding:clamp(110px,15vw,200px) 0}
.statement .container{max-width:1080px}
.statement blockquote{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.18;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.statement blockquote::before{content:"";display:block;width:54px;height:3px;background:var(--accent);margin-bottom:34px}
.statement cite{display:block;margin-top:28px;font-style:normal;font-family:var(--font);font-size:.95rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.theme-bold .statement blockquote{font-family:'Space Grotesk',var(--font);letter-spacing:-.03em}
.theme-clean .statement blockquote{font-family:var(--font);font-weight:720}
@media(prefers-reduced-motion:no-preference){.feature.revealed::before{transition:transform 1.6s cubic-bezier(.16,.8,.24,1)}}

/* ===== per-brand LAYOUT ARCHETYPES — genuinely different structures ===== */

/* CENTERED hero treatment (immersive + clean) vs LEFT-aligned (editorial + bold) */
.theme-immersive .hero .container,.theme-clean .hero .container{max-width:940px;margin-inline:auto;text-align:center}
.theme-immersive .hero-lead,.theme-clean .hero-lead{border-left:none;padding-left:0;display:flex;flex-direction:column;align-items:center}
.theme-immersive .hero .eyebrow,.theme-clean .hero .eyebrow{justify-content:center}
.theme-immersive .hero h1,.theme-clean .hero h1{margin-left:auto;margin-right:auto}
.theme-immersive .hero p,.theme-clean .hero p{margin-left:auto;margin-right:auto}
.theme-immersive .hero-actions,.theme-clean .hero-actions{justify-content:center}
/* centered heroes get a bottom-up scrim + centered text halo (not the left wedge) */
.theme-immersive .hero--photo::after,.theme-clean .hero--photo::after{background:linear-gradient(0deg,rgba(8,12,18,calc(var(--hs,.7) * .78)) 0%,rgba(8,12,18,calc(var(--hs,.7) * .34)) 34%,transparent 66%),radial-gradient(120% 90% at 50% 118%,rgba(8,12,18,.3),transparent 58%)}
.theme-immersive .hero--photo .hero-lead::before,.theme-clean .hero--photo .hero-lead::before{background:radial-gradient(110% 84% at 50% 50%,rgba(8,12,18,.46),rgba(8,12,18,.18) 58%,transparent 82%);inset:-34px -50px}

/* EDITORIAL — magazine, asymmetric, serif, LEFT-aligned (real estate, legal, advisory) */
.theme-editorial .section-head.center{text-align:left;margin-left:0;margin-right:0}
.theme-editorial .section-head.center .eyebrow{justify-content:flex-start}
.theme-editorial .hero h1{font-size:clamp(2.7rem,5.6vw,4.7rem)}

/* BOLD — geometric, heavy, energetic, LEFT-aligned (fitness, trades, construction) */
.theme-bold h1,.theme-bold h2,.theme-bold h3,.theme-bold .stat .num,.theme-bold .card .ic,.theme-bold .why-card h3{font-family:'Space Grotesk',var(--font);font-weight:700;letter-spacing:-.035em}
.theme-bold{--radius:10px}
.theme-bold .btn{border-radius:10px;font-weight:720;padding:17px 34px}
.theme-bold .card,.theme-bold .form,.theme-bold .gallery figure,.theme-bold .split img,.theme-bold .dir-item,.theme-bold .why-card{border-radius:12px}
.theme-bold .eyebrow{letter-spacing:.3em;font-weight:800}
.theme-bold .hero h1{font-size:clamp(3rem,7.2vw,5.8rem);line-height:1.0}
.theme-bold .hero-lead{border-left-width:6px}
.theme-bold .section-head.center{text-align:left;margin-left:0}
.theme-bold .section-head.center .eyebrow{justify-content:flex-start}
.theme-bold .card{border:2px solid var(--border)}
.theme-bold .card .ic{font-size:2.1rem}

/* IMMERSIVE — cinematic, image-forward, tall centered hero, big serif (hospitality, retail, creative) */
.theme-immersive .hero--photo,.theme-immersive .hero--video{min-height:clamp(640px,92vh,940px);display:flex;align-items:center}
.theme-immersive .hero{padding-top:clamp(120px,18vw,200px);padding-bottom:clamp(96px,13vw,150px)}
.theme-immersive .hero h1{font-size:clamp(3rem,6.8vw,6rem)}
.theme-immersive .gallery{grid-auto-rows:330px}
.theme-immersive .card,.theme-immersive .why-card{border:none;box-shadow:0 20px 54px rgba(16,24,40,.12)}
.theme-immersive .section{padding:var(--section-pad,clamp(84px,12vw,152px)) 0}

/* CLEAN — airy, calm, minimal, rounded, light sans (healthcare, professional, tech) */
.theme-clean h1,.theme-clean h2,.theme-clean h3,.theme-clean .why-card h3{font-family:var(--font);font-weight:760;letter-spacing:-.035em}
.theme-clean{--radius:24px}
.theme-clean .section{padding:var(--section-pad,clamp(90px,13vw,164px)) 0}
.theme-clean .btn{border-radius:999px}
.theme-clean .card,.theme-clean .form,.theme-clean .why-card{border-radius:22px;border-color:transparent;box-shadow:0 12px 40px rgba(16,24,40,.07)}
.theme-clean .hero h1{font-size:clamp(2.6rem,5.4vw,4.5rem);font-weight:760}
.theme-clean .eyebrow{letter-spacing:.2em}
.theme-clean .why-ic{border-radius:999px}

/* directory grid — preserves every named item (projects/services/locations) */
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dir-item{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-weight:600;color:var(--ink);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.dir-item:hover{border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow)}
.dir-item .dir-mark{flex:none;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.dir-item small{display:block;color:var(--muted);font-weight:500;margin-top:2px}

/* showcase — project/service cards with photo + name + real description */
.show-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.show-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,border-color .2s ease;display:flex;flex-direction:column}
.show-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.show-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt)}
.show-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.show-card:hover .show-img img{transform:scale(1.06)}
.show-body{padding:24px 26px 28px}
.show-body h3{margin:0 0 .4em}
.show-body p{margin:0;color:var(--body);font-size:1rem}
/* text-only project card (no photo): intentional, never an empty box */
.show-card--text .show-body{padding:28px 26px 30px}
.show-bar{display:block;width:38px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--accent));margin-bottom:16px}
@media(max-width:560px){.show-grid{grid-template-columns:1fr}}

/* menu / price list — classic two-column with dotted leaders */
.menu-grid{columns:2;column-gap:60px}
@media(max-width:760px){.menu-grid{columns:1}}
.menu-cat{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:40px}
.menu-cat-name{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--brand-dark);border-bottom:2px solid var(--border);padding-bottom:12px;margin:0 0 18px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-item{margin-bottom:16px}
.menu-row{display:flex;align-items:baseline;gap:10px}
.menu-name{font-weight:640;color:var(--ink)}
.menu-dots{flex:1;border-bottom:1px dotted var(--border);transform:translateY(-4px);min-width:18px}
.menu-price{font-weight:680;color:var(--brand-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-desc{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5;max-width:42ch}

/* interior page hero (smaller than the home hero) */
.page-hero{position:relative;background:linear-gradient(150deg,var(--brand-deep),var(--brand-deep2));color:#fff;padding:clamp(96px,12vw,140px) 0 clamp(60px,8vw,84px);text-align:center;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0,color-mix(in srgb,var(--brand) 22%,transparent),transparent 60%)}
.page-hero .container{position:relative}
.page-hero .eyebrow{color:rgba(255,255,255,.92);justify-content:center}
.page-hero .eyebrow::before{background:var(--accent)}
.page-hero h1{color:#fff;font-size:clamp(2.3rem,4.6vw,3.6rem)}
.page-hero .lead{color:rgba(255,255,255,.9);margin:0 auto;max-width:60ch}

/* scroll-reveal motion — only hides when JS is confirmed (html.js), so content
   is always visible if JS fails. */
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js [data-reveal]{opacity:0;transform:translateY(22px);will-change:opacity,transform}
html.js [data-reveal].revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}
.card,.gallery img,.split img{will-change:transform}
/* SPLIT HERO type — must beat the per-theme .theme-x .hero h1 font-size rules
   above (equal-or-higher specificity + later source order). The split hero puts
   the headline in a ~half-width column beside the portrait, so the big theme
   display size overflows into a ragged word-per-line stack. Hold it to a size
   that wraps cleanly in the narrower column, across every theme. */
.theme-editorial .hero--split h1,.theme-bold .hero--split h1,.theme-immersive .hero--split h1,.theme-clean .hero--split h1{font-size:clamp(2rem,3.3vw,3.05rem);line-height:1.08;max-width:20ch;margin-left:0;margin-right:0;text-align:left}
.theme-immersive .hero--split .hero-lead,.theme-clean .hero--split .hero-lead{align-items:flex-start;text-align:left}
/* Left-aligned display headings (bold/editorial) with the big theme font stack
   into 4+ ragged lines inside the default 30ch cap, next to a wide empty gutter.
   Give them room so a long title wraps to ~2 lines and uses the horizontal space. */
.theme-bold .section-head,.theme-editorial .section-head{max-width:min(880px,80vw)}
.theme-bold .section-head h2,.theme-editorial .section-head h2{max-width:22ch}
/* ============================================================================
   CINEMATIC MOOD — carry the committed dark, on-brand identity through the WHOLE
   page (not just the hero). Overrides the palette variables so every component
   that uses them adapts, plus targeted fixes for elements with hardcoded light
   colors (header, form inputs, footer, mobile nav). Gold (--accent) carries the
   accents; cream carries the text. This is the difference between "dark hero on
   a template body" and a page that reads bespoke top to bottom.
   ========================================================================== */
.mood-cinematic{
  --bg:#0c140f;--surface:#121e17;--surface-alt:#16261d;
  --ink:#f6f0df;--body:#cdc7b6;--muted:#8f9689;--border:rgba(240,235,220,.12);
  --shadow:0 20px 50px -24px rgba(0,0,0,.6);--shadow-lg:0 46px 100px -34px rgba(0,0,0,.72);
  background:#0c140f;color:var(--body);
}
.mood-cinematic .eyebrow{color:var(--accent)}
.mood-cinematic .eyebrow::before,.mood-cinematic .eyebrow::after{background:var(--accent)}
/* integrated header — translucent dark glass over the hero, not a white bar */
.mood-cinematic .site-header{background:rgba(10,17,13,.62);border-bottom:1px solid rgba(240,235,220,.08)}
.mood-cinematic .nav-links a{color:var(--ink)}
.mood-cinematic .nav-toggle-label span{background:var(--ink)}
@media(max-width:900px){.mood-cinematic .nav-links{background:#0c140f;border-bottom:1px solid var(--border)}}
/* elevated panels read against the dark ground */
.mood-cinematic .card,.mood-cinematic .why-card,.mood-cinematic .form{background:var(--surface);border-color:var(--border)}
.mood-cinematic .theme-bold .card,.mood-cinematic.theme-bold .card{border:1px solid var(--border)}
.mood-cinematic .form input,.mood-cinematic .form textarea,.mood-cinematic .form select{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--border)}
.mood-cinematic .form input::placeholder,.mood-cinematic .form textarea::placeholder{color:var(--muted)}
.mood-cinematic .section--alt{background:var(--surface)}
/* editorial index rules + numbers in the dark treatment */
.mood-cinematic .svc-index .row-n{color:var(--accent)}
.mood-cinematic .svc-index{border-top-color:var(--border)}
.mood-cinematic .svc-index .row{border-bottom-color:var(--border)}
/* marquee band */
.mood-cinematic .marquee{background:var(--surface-alt);border-block-color:var(--border)}
/* footer: --ink is now cream, so set an explicit deep ground */
.mood-cinematic .site-footer{background:#080f0b;color:var(--body)}
.mood-cinematic .site-footer a{color:var(--body)}.mood-cinematic .site-footer a:hover{color:#fff}
.mood-cinematic .site-footer .foot-brand{color:#fff}
/* primary buttons keep the brand green but lift for contrast on dark; the hero
   CTA stays gold (its own rule). Ghost buttons get a light hairline. */
/* unify every primary button on gold (the hero CTA already is) so the header,
   CTA band, and form submit all read as one brand system on dark. */
.mood-cinematic .btn--primary{background:var(--accent);color:#1c1408;border-color:var(--accent);box-shadow:0 16px 40px -16px color-mix(in srgb,var(--accent) 60%,transparent)}
.mood-cinematic .btn--primary:hover{filter:brightness(1.07);background:var(--accent)}
.mood-cinematic .btn--ghost{border-color:var(--border);color:var(--ink)}
.mood-cinematic .btn--ghost:hover{background:rgba(255,255,255,.06)}
/* about-portrait letterbox bg blends into the dark */
.mood-cinematic .split img.about-portrait{background:var(--surface-alt)}
/* visible keyboard focus for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.nav-toggle-label:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}