/* =======================================================================
   PROMINENCE PROPERTY MEDIA
   "The site is a lens." Scroll flies through the logo's aperture into the
   work. Dark, cinematic, warm. Premium through restraint.
   ----------------------------------------------------------------------- */

:root {
  --ink:#0D0D0D; --ink-2:#121211; --ink-3:#1A1916;
  --gold:#C9A84C; --gold-light:#CDAC50; --gold-deep:#B08F3C;
  --cream:#F5F0E8; --cream-dim:rgba(245,240,232,.70); --cream-faint:rgba(245,240,232,.42);
  --hairline:rgba(201,168,76,.22); --warm:rgba(201,168,76,.10);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Montserrat",system-ui,-apple-system,sans-serif;
  --container:1240px; --gutter:clamp(1.25rem,5vw,4rem); --section-y:clamp(5rem,12vw,11rem);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--ink); color:var(--cream); font-family:var(--font-body); font-weight:300; line-height:1.65; letter-spacing:.01em; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* film grain — promoted to its own layer so it never repaints on scroll */
body::after { content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.04; transform:translateZ(0); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; padding:0; }
code { font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.logo { display:block; height:auto; }
::selection { background:var(--gold); color:var(--ink); }

.skip-link { position:fixed; top:-100px; left:1rem; z-index:3000; background:var(--gold); color:var(--ink); padding:.7rem 1.1rem; border-radius:4px; font-size:.85rem; letter-spacing:.05em; transition:top .2s var(--ease); }
.skip-link:focus { top:1rem; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow { font-size:.72rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.section-title { font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.12; letter-spacing:.005em; max-width:22ch; color:var(--cream); }
.section-title em { font-style:italic; color:var(--gold-light); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { --pad-y:.95rem; --pad-x:2rem; position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:var(--pad-y) var(--pad-x); font-family:var(--font-body); font-size:.82rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); }
.btn::after { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); pointer-events:none; }
.btn:hover::after { animation:shine .8s var(--ease); }
@keyframes shine { to { left:140%; } }
.btn--gold { background:var(--gold); color:var(--ink); }
.btn--gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(201,168,76,.6); }
.btn--ghost { background:transparent; color:var(--cream); border-color:var(--hairline); }
.btn--ghost:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn--lg { --pad-y:1.2rem; --pad-x:3rem; font-size:.9rem; }
.btn--sm { --pad-y:.7rem; --pad-x:1.4rem; font-size:.72rem; }

/* ── Reveal on scroll ──────────────────────────────────────────────── */
.reveal { opacity:1; }
html.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); transition-delay:calc(var(--i,0)*90ms); }
html.js .reveal.is-in { opacity:1; transform:none; }

/* ── Brand lockup ──────────────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:.7rem; }
.brand__mark { width:30px; }
.brand__word { font-family:var(--font-display); font-weight:400; font-size:1.32rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cream); padding-left:.1em; }

/* ── Scroll progress (composited, transform-based) + viewfinder ────── */
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--gold-deep),var(--gold-light)); z-index:200; will-change:transform; }
.viewfinder { position:fixed; inset:0; z-index:70; pointer-events:none; display:none; }
.vf { position:absolute; width:24px; height:24px; border:1px solid var(--hairline); }
.vf--tl{top:20px;left:20px;border-right:0;border-bottom:0;} .vf--tr{top:20px;right:20px;border-left:0;border-bottom:0;}
.vf--bl{bottom:20px;left:20px;border-right:0;border-top:0;} .vf--br{bottom:20px;right:20px;border-left:0;border-top:0;}

/* ── Header / nav ──────────────────────────────────────────────────── */
.site-header { position:fixed; inset:0 0 auto 0; z-index:100; padding-block:1.4rem; border-bottom:1px solid transparent; transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease); }
.site-header.is-scrolled { background:rgba(13,13,13,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding-block:.85rem; border-bottom-color:var(--hairline); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav { display:none; gap:2rem; margin-left:auto; }
.nav a { font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cream-dim); position:relative; padding-block:.3rem; transition:color .3s var(--ease); }
.nav a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease); }
.nav a:hover { color:var(--cream); } .nav a:hover::after { width:100%; }
.nav__book { display:none; }
.nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; margin-right:-10px; background:none; border:none; cursor:pointer; }
.nav-toggle span { display:block; height:1.5px; width:100%; background:var(--cream); transition:transform .4s var(--ease),opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu { position:fixed; inset:0; z-index:90; background:rgba(13,13,13,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; opacity:0; transition:opacity .4s var(--ease); }
.mobile-menu[hidden] { display:none; }
.mobile-menu.is-open { opacity:1; }
.mobile-menu__nav { display:flex; flex-direction:column; align-items:center; gap:1.7rem; }
.mobile-menu__nav a { font-family:var(--font-display); font-weight:300; font-size:1.8rem; letter-spacing:.04em; color:var(--cream); }
.mobile-menu__nav .btn { font-family:var(--font-body); font-size:.85rem; margin-top:1rem; }

/* ── Floating mini CTA ─────────────────────────────────────────────── */
.float-cta { position:fixed; right:1.4rem; bottom:1.4rem; z-index:120; display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.3rem; background:var(--gold); color:var(--ink); border-radius:999px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 12px 32px -10px rgba(0,0,0,.7); opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .4s var(--ease),transform .4s var(--ease); }
.float-cta.is-visible { opacity:1; transform:none; pointer-events:auto; }
.float-cta__dot { width:7px; height:7px; border-radius:50%; background:var(--ink); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.6);opacity:.4;} }

/* ════════════════════════════════════════════════════════════════════
   HERO — scroll flies through the aperture
   ════════════════════════════════════════════════════════════════════ */
.hero { position:relative; }
html.js .hero { height:220vh; }
.hero__stage { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(130% 90% at 50% 122%, rgba(201,168,76,.26) 0%, rgba(201,168,76,.07) 34%, transparent 62%), radial-gradient(80% 60% at 80% 16%, rgba(176,143,60,.12) 0%, transparent 60%), linear-gradient(180deg,#0b0b0a 0%, var(--ink) 55%, #0a0a09 100%); }
html.js .hero__stage { position:sticky; top:0; height:100vh; height:100svh; }
.hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0; }
.hero__stage.is-empty .hero__bg { display:none; }
.hero__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(13,13,13,.62) 0%,rgba(13,13,13,.42) 45%,rgba(13,13,13,.88) 100%); }
.hero__stage.is-empty .hero__scrim { display:none; }
.hero__spot { position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(420px circle at var(--mx,60%) var(--my,38%), rgba(201,168,76,.16), transparent 68%); transition:background .25s ease-out; }
.hero__motes { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero__motes span { position:absolute; bottom:-8px; border-radius:50%; background:rgba(201,168,76,.55); box-shadow:0 0 6px rgba(201,168,76,.6); opacity:0; animation:mote linear infinite; }
@keyframes mote { 0%{transform:translateY(0);opacity:0;} 12%{opacity:.7;} 88%{opacity:.45;} 100%{transform:translateY(-92vh);opacity:0;} }

.hero__bloom { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(245,240,232,.55), rgba(201,168,76,.30) 28%, transparent 60%); }
body.entered .hero__bloom { animation:bloom 1.5s var(--ease) forwards; }
@keyframes bloom { 0%{opacity:0; transform:scale(.15);} 22%{opacity:.95;} 100%{opacity:0; transform:scale(2.6);} }
.hero__flare { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transform:translateX(-60%); background:linear-gradient(105deg,transparent 32%,rgba(245,240,232,.12) 47%,rgba(201,168,76,.22) 52%,transparent 68%); }
body.entered .hero__flare { animation:flare 1.7s var(--ease) .15s forwards; }
@keyframes flare { 0%{opacity:0;transform:translateX(-60%);} 30%{opacity:1;} 100%{opacity:0;transform:translateX(60%);} }

.hero__inner { position:relative; z-index:2; max-width:60rem; opacity:calc(.2 + var(--p,1)*.9); transform:translateY(calc((1 - var(--p,1))*14px)); }
body.entered .hero__inner { animation:settle 1.1s var(--ease) forwards; }
@keyframes settle { 0%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.hero__title { font-family:var(--font-display); font-weight:300; font-size:clamp(3.4rem,13vw,9.5rem); line-height:.98; letter-spacing:-.01em; margin:.4rem 0 1.6rem; }
.hero__title .word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-right:.24em; }
.hero__title .word:last-child { margin-right:0; }
.hero__title .word__in { display:inline-block; }
html.js .hero__title .word__in { transform:translateY(calc((1 - var(--p,1))*115%)); }
.hero__title em { font-style:italic; color:var(--gold-light); }
.hero__sub { font-size:clamp(1rem,1.6vw,1.28rem); font-weight:300; color:var(--cream-dim); max-width:36ch; margin-bottom:2.2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; }
.hero__chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.hero__chips li { font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); border:1px solid var(--hairline); border-radius:999px; padding:.5rem .9rem; }
html.js .hero__chips li { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .hero__chips li:nth-child(1){transition-delay:.15s;} html.js .hero__chips li:nth-child(2){transition-delay:.23s;}
html.js .hero__chips li:nth-child(3){transition-delay:.31s;} html.js .hero__chips li:nth-child(4){transition-delay:.39s;}
html.js .hero__chips li:nth-child(5){transition-delay:.47s;}
body.entered .hero__chips li { opacity:1; transform:none; }

/* the fly-through shutter (cover + blades scale together; you go through the hole) */
.shutter { position:absolute; inset:0; z-index:5; pointer-events:none; }
html:not(.js) .shutter { display:none; }
.shutter.is-open { visibility:hidden; }
.shutter__svg { position:absolute; inset:0; width:100%; height:100%; opacity:calc((1 - var(--p,0))*8); }
/* ease-in (p squared) so the opening spreads across the scroll and finishes
   right as you're released, instead of snapping open early */
.shutter__zoom { transform-box:fill-box; transform-origin:center; transform:scale(calc(.3 + var(--p,0)*var(--p,0)*16)); will-change:transform; }
.shutter__center { position:absolute; left:0; right:0; top:60%; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; transform:translateY(calc(var(--p,0)*90px)); opacity:calc(1 - var(--p,0)*3); will-change:transform,opacity; }
.shutter__word { font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:.4em; text-transform:uppercase; color:var(--cream); padding-left:.4em; }
.shutter__sub { font-size:.66rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold); padding-left:.5em; }
.shutter__hint { margin-top:1.4rem; font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; }
.shutter__hint i { font-style:normal; font-size:1rem; animation:hint 1.8s var(--ease) infinite; }
@keyframes hint { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ── KINETIC MARQUEE ───────────────────────────────────────────────── */
.marquee { overflow:hidden; white-space:nowrap; border-block:1px solid var(--hairline); padding-block:clamp(1.2rem,3vw,2rem); background:linear-gradient(180deg,rgba(201,168,76,.05),transparent); }
.marquee__track { display:inline-flex; align-items:center; gap:1.4rem; animation:marquee 36s linear infinite; }
.marquee span { font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.6rem,4vw,3rem); color:var(--cream); }
.marquee i { color:var(--gold); font-style:normal; font-size:clamp(1rem,2vw,1.4rem); }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee:hover .marquee__track { animation-play-state:paused; }

/* ── POSITIONING ───────────────────────────────────────────────────── */
.spine { position:relative; padding-block:var(--section-y); border-top:1px solid var(--hairline); }
.spine::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 12% 0%, var(--warm), transparent 70%); }
.spine .container { position:relative; }
.spine .section-title { max-width:30ch; margin-bottom:clamp(3rem,6vw,5rem); }
.pillars { display:grid; gap:2.5rem; }
.pillar { position:relative; padding-top:2rem; border-top:1px solid var(--hairline); }
.pillar__num { font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--gold); display:block; margin-bottom:1rem; }
.pillar h3 { font-family:var(--font-display); font-weight:400; font-size:1.9rem; margin-bottom:.8rem; letter-spacing:.01em; }
.pillar p { color:var(--cream-dim); max-width:32ch; }

/* ── THE WORK — reel ───────────────────────────────────────────────── */
.work { position:relative; padding-block:var(--section-y); background:var(--ink-2); }
.work::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 40% at 85% 6%, var(--warm), transparent 70%); }
.work__head { position:relative; margin-bottom:clamp(2rem,4vw,3rem); }
.reel { position:relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.reel:active { cursor:grabbing; }
.reel::-webkit-scrollbar { display:none; }
.reel__track { display:flex; gap:1.2rem; width:max-content; padding-inline:.6rem; }
.reel__card { position:relative; flex:0 0 auto; width:clamp(260px,30vw,400px); aspect-ratio:3/2; border:1px solid rgba(245,240,232,.08); border-radius:4px; overflow:hidden; background:linear-gradient(135deg,var(--ink-3),#0c0b0a); cursor:zoom-in; padding:0; }
.reel__card .shot { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.reel__card:hover .shot { transform:scale(1.05); }
.reel__cap { position:absolute; left:0; right:0; bottom:0; padding:1rem; text-align:left; font-family:var(--font-body); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); background:linear-gradient(transparent,rgba(13,13,13,.85)); opacity:0; transition:opacity .4s var(--ease); }
.reel__card:hover .reel__cap { opacity:1; }
.work__note { position:relative; margin-top:2rem; font-size:.85rem; color:var(--cream-faint); }
.work__note code { color:var(--gold); font-size:.9em; }
.ph-tag { display:inline-block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); border:1px solid var(--hairline); border-radius:999px; padding:.25rem .7rem; margin-right:.5rem; vertical-align:middle; }

/* ── Lightbox ──────────────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; z-index:500; background:rgba(8,8,8,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:grid; place-items:center; padding:6vw; opacity:0; transition:opacity .3s var(--ease); }
.lightbox.is-open { opacity:1; }
.lightbox[hidden] { display:none; }
.lightbox__fig { margin:0; max-width:min(1100px,92vw); }
.lightbox__fig img { width:100%; max-height:82vh; object-fit:contain; border-radius:4px; }
.lightbox__fig figcaption { margin-top:1rem; text-align:center; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.lightbox__close { position:fixed; top:1.4rem; right:1.6rem; width:48px; height:48px; border-radius:50%; border:1px solid var(--hairline); background:rgba(13,13,13,.6); color:var(--cream); font-size:1.6rem; line-height:1; cursor:pointer; }
.lightbox__close:hover { border-color:var(--gold); color:var(--gold); }

/* ── SERVICES ──────────────────────────────────────────────────────── */
.services { position:relative; padding-block:var(--section-y); }
.services::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 45% at 50% 0%, var(--warm), transparent 70%); }
.services .container { position:relative; }
.services__head { text-align:center; max-width:46rem; margin:0 auto clamp(3rem,6vw,4rem); }
.services__head .eyebrow,.services__head .section-title { margin-inline:auto; }
.services__head .section-title { max-width:none; }
.services__grid { display:grid; gap:1.2rem; grid-template-columns:1fr; }
.service { padding:2rem 1.6rem; border:1px solid rgba(245,240,232,.08); border-radius:4px; background:var(--ink-2); transition:transform .4s var(--ease),border-color .4s var(--ease); }
.service:hover { transform:translateY(-5px); border-color:var(--hairline); }
.service__icon { width:34px; height:34px; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.1rem; }
.service h3 { font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:.01em; margin-bottom:.45rem; }
.service p { color:var(--cream-dim); font-size:.9rem; }

/* ── TESTIMONIALS (auto-rotating) ──────────────────────────────────── */
.testimonials { position:relative; padding-block:var(--section-y); background:var(--ink-2); }
.testimonials::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 85% 0%, var(--warm), transparent 70%); }
.testimonials .container { position:relative; }
.testimonials__head { text-align:center; max-width:46rem; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.testimonials__head .eyebrow,.testimonials__head .section-title { margin-inline:auto; }
.testimonials__head .section-title { max-width:none; }
.testimonials__stage { display:grid; max-width:760px; margin:0 auto; }
.t-slide { grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease),transform .7s var(--ease); pointer-events:none; }
.t-slide.is-active { opacity:1; transform:none; pointer-events:auto; }
.t-slide__quote { position:relative; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.4rem,3.2vw,2.1rem); line-height:1.45; color:var(--cream); max-width:42ch; }
.t-slide__quote::before { content:"\201C"; display:block; font-size:3.4rem; line-height:.5; color:var(--gold); opacity:.5; margin-bottom:.7rem; }
.t-slide__name { margin-top:1.6rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.t-slide__role { margin-top:.25rem; font-size:.8rem; color:var(--cream-faint); }
.testimonials__dots { display:flex; justify-content:center; gap:.6rem; margin-top:2.4rem; }
.t-dot { width:9px; height:9px; border-radius:50%; border:1px solid var(--hairline); background:transparent; cursor:pointer; padding:0; transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease); }
.t-dot:hover { border-color:var(--gold); }
.t-dot.is-active { background:var(--gold); border-color:var(--gold); transform:scale(1.2); }

/* ── PACKAGES ──────────────────────────────────────────────────────── */
.packages { position:relative; padding-block:var(--section-y); }
.packages::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 40% at 50% 0%, var(--warm), transparent 70%); }
.packages .container { position:relative; }
.packages__head { text-align:center; max-width:46rem; margin:0 auto clamp(3rem,6vw,4.5rem); }
.packages__head .section-title,.packages__head .eyebrow { margin-inline:auto; }
.packages__head .section-title { max-width:none; }
.packages__intro { color:var(--cream-dim); margin-top:1.4rem; }
.cards { display:grid; gap:1.5rem; align-items:stretch; }
.card { position:relative; display:flex; flex-direction:column; padding:2.6rem 2rem; background:var(--ink-2); border:1px solid rgba(245,240,232,.08); border-radius:4px; transition:transform .5s var(--ease),border-color .5s var(--ease); }
.card:hover { transform:translateY(-6px); border-color:var(--hairline); }
.card--featured { background:linear-gradient(180deg,rgba(201,168,76,.10),var(--ink-2) 60%); border-color:var(--gold); }
.card__badge { position:absolute; top:-.85rem; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--ink); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; padding:.4rem 1rem; border-radius:999px; white-space:nowrap; }
.card__name { font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:.02em; margin-bottom:.4rem; }
.card__price { display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.8rem; padding-bottom:1.8rem; border-bottom:1px solid var(--hairline); }
.card__amt { font-family:var(--font-display); font-size:3rem; font-weight:300; color:var(--gold-light); line-height:1; }
.card__value { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-faint); }
.card__list { display:flex; flex-direction:column; gap:.85rem; margin-bottom:2.2rem; flex:1; }
.card__list li { font-size:.92rem; color:var(--cream-dim); padding-left:1.6rem; position:relative; }
.card__list li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); }
.card__list li strong { color:var(--cream); font-weight:500; }
.card__list li.muted { color:var(--cream-faint); } .card__list li.muted::before { opacity:.4; }
.card__cta { width:100%; margin-top:auto; }
.packages__fine { text-align:center; margin-top:3rem; color:var(--cream-faint); font-size:.88rem; }
.packages__fine .founding { margin-top:.8rem; color:var(--cream-dim); }
.packages__fine .founding strong { color:var(--gold); font-weight:500; }

/* ── QUOTE ESTIMATOR ───────────────────────────────────────────────── */
.estimator { position:relative; padding-block:var(--section-y); background:var(--ink-2); }
.estimator::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 15% 0%, var(--warm), transparent 70%); }
.estimator .container { position:relative; }
.estimator__head { text-align:center; max-width:46rem; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.estimator__head .eyebrow,.estimator__head .section-title { margin-inline:auto; }
.estimator__head .section-title { max-width:none; }
.estimator__panel { display:grid; border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.estimator__controls { padding:clamp(1.6rem,4vw,2.6rem); display:flex; flex-direction:column; gap:1.8rem; background:var(--ink); min-width:0; }
.est-field { display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.est-label { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim); display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.est-label em { font-style:normal; font-family:var(--font-display); font-size:1.2rem; color:var(--gold-light); letter-spacing:.02em; }
.est-options { display:flex; gap:.6rem; flex-wrap:wrap; }
.est-opt { flex:1 1 auto; min-width:0; padding:.7rem 1rem; background:transparent; border:1px solid var(--hairline); border-radius:3px; color:var(--cream-dim); font-family:var(--font-body); font-size:.76rem; letter-spacing:.04em; cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); }
.est-opt:hover { color:var(--cream); border-color:var(--gold); }
.est-opt.is-active { background:var(--gold); color:var(--ink); border-color:var(--gold); }
#estSqft { -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--hairline); border-radius:3px; outline:none; }
#estSqft::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--gold); cursor:pointer; border:3px solid var(--ink); box-shadow:0 0 0 1px var(--gold); }
#estSqft::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; border:3px solid var(--ink); }
.est-addons { display:grid; grid-template-columns:1fr; gap:.6rem; }
@media (min-width:520px) { .est-addons { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.est-addon { display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border:1px solid var(--hairline); border-radius:3px; font-size:.82rem; color:var(--cream-dim); cursor:pointer; transition:border-color .3s var(--ease); min-width:0; }
.est-addon span:not(.est-addon__price) { min-width:0; }
.est-addon:hover { border-color:var(--gold); }
.est-addon input { width:16px; height:16px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto; }
.est-addon__price { margin-left:auto; color:var(--gold); font-size:.76rem; white-space:nowrap; }
.est-addon.is-included { color:var(--cream-faint); cursor:default; border-style:dashed; }
.est-addon.is-included input { display:none; }
.est-addon.is-included .est-addon__price { color:var(--cream-faint); }
.estimator__result { padding:clamp(1.6rem,4vw,2.6rem); background:linear-gradient(180deg,rgba(201,168,76,.10),var(--ink-2)); display:flex; flex-direction:column; gap:.9rem; }
.est-result__label { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-faint); }
.est-result__total { font-family:var(--font-display); font-weight:300; font-size:clamp(2.8rem,8vw,4.4rem); color:var(--gold-light); line-height:1; }
.est-result__total.is-custom { font-size:clamp(1.8rem,5vw,2.6rem); }
.est-breakdown { display:flex; flex-direction:column; gap:.55rem; margin:.4rem 0 1rem; }
.est-breakdown li { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--cream-dim); padding-bottom:.55rem; border-bottom:1px solid rgba(245,240,232,.06); }
.est-breakdown li span:last-child { color:var(--cream); }
.est-result__cta { width:100%; }
.est-note { font-size:.74rem; color:var(--cream-faint); line-height:1.6; }

/* ── ABOUT — matched, mirrored rows ────────────────────────────────── */
.about { position:relative; padding-block:var(--section-y); }
.about__row { display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__row + .about__row { margin-top:clamp(4rem,9vw,7rem); padding-top:clamp(3.5rem,7vw,6rem); border-top:1px solid var(--hairline); }
.about__frame { position:relative; aspect-ratio:4/5; border:1px solid rgba(245,240,232,.08); border-radius:4px; overflow:hidden; background:linear-gradient(135deg,var(--ink-3),#0c0b0a); }
.about__frame .portrait { width:100%; height:100%; object-fit:cover; }
.about__frame:has(.portrait) { aspect-ratio:2/3; } /* match the headshot's native shape so none of it gets cropped */
.about__frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -80px 80px -40px rgba(13,13,13,.6); pointer-events:none; }
.about__frame--mark { display:grid; place-items:center; background:radial-gradient(circle at 50% 42%, rgba(201,168,76,.16), var(--ink-3) 58%, #0c0b0a); }
.about__frame--mark::after { display:none; }
.about__frame--mark .logo { width:46%; }
.about__body p { color:var(--cream-dim); margin-top:1.3rem; max-width:52ch; }
.about__body .section-title { margin-bottom:.6rem; }
.about__placeholder { color:var(--cream-faint)!important; font-style:italic; border-left:2px solid var(--hairline); padding-left:1.1rem; }
.about__sign { font-family:var(--font-display); font-style:italic; color:var(--gold-light)!important; }

/* ── SERVICE AREA ──────────────────────────────────────────────────── */
.area { position:relative; padding-block:var(--section-y); text-align:center; background:var(--ink-2); }
.area .eyebrow,.area .section-title { margin-inline:auto; }
.area .section-title { max-width:none; }
.area__cities { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,4vw,3rem); margin:2.6rem 0 1.4rem; }
.area__cities li { font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,5vw,2.8rem); color:var(--cream); letter-spacing:.02em; }
.area__cities li::before { content:"✦"; color:var(--gold); font-size:.5em; vertical-align:middle; margin-right:.7em; opacity:.6; }
.area__cities li:first-child::before { display:none; }
.area__plus { color:var(--gold); letter-spacing:.06em; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { position:relative; padding-block:var(--section-y); }
.faq::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 45% at 50% 0%, var(--warm), transparent 70%); }
.faq .container { position:relative; }
.faq__head { text-align:center; max-width:46rem; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.faq__head .eyebrow,.faq__head .section-title { margin-inline:auto; }
.faq__head .section-title { max-width:none; }
.faq__list { max-width:780px; margin-inline:auto; }
.faq__item { border-bottom:1px solid var(--hairline); }
.faq__item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--cream); transition:color .3s var(--ease); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary:hover, .faq__item[open] summary { color:var(--gold-light); }
.faq__mark { position:relative; flex:0 0 auto; width:16px; height:16px; }
.faq__mark::before,.faq__mark::after { content:""; position:absolute; background:var(--gold); transition:transform .3s var(--ease),opacity .3s var(--ease); }
.faq__mark::before { top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.faq__mark::after { left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.faq__item[open] .faq__mark::after { opacity:0; transform:translateX(-50%) scaleY(0); }
.faq__a { padding:0 0 1.6rem; max-width:64ch; animation:faq-open .4s var(--ease); }
.faq__a p { color:var(--cream-dim); }
@keyframes faq-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ── FINAL CTA ─────────────────────────────────────────────────────── */
.cta-final { padding-block:clamp(6rem,14vw,12rem); text-align:center; border-top:1px solid var(--hairline); background:radial-gradient(80% 120% at 50% 120%, rgba(201,168,76,.22), transparent 60%), var(--ink); }
.cta-final__inner .eyebrow { margin-bottom:1.6rem; }
.cta-final__title { font-family:var(--font-display); font-weight:300; font-size:clamp(2.4rem,6.5vw,5rem); line-height:1.08; max-width:16ch; margin:0 auto 1.6rem; }
.cta-final__title em { font-style:italic; color:var(--gold-light); }
.cta-final__lead { max-width:42ch; margin:0 auto 2.6rem; color:var(--cream-dim); font-size:clamp(1rem,1.6vw,1.2rem); }
.cta-final__sub { margin-top:1.8rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-faint); }

/* ── FOOTER ────────────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--hairline); padding-top:clamp(3rem,7vw,5rem); padding-bottom:2rem; background:var(--ink); }
.site-footer__inner { display:grid; gap:2.8rem; padding-bottom:3rem; }
.site-footer__tag { margin-top:1.2rem; color:var(--cream-faint); font-size:.86rem; line-height:1.8; }
.site-footer__col h4 { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:1rem; }
.site-footer__col p { color:var(--cream-dim); font-size:.9rem; line-height:1.9; margin-bottom:1.2rem; }
.site-footer__col a:not(.btn):hover { color:var(--gold); }
.site-footer__base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding-top:2rem; border-top:1px solid rgba(245,240,232,.08); font-size:.74rem; letter-spacing:.08em; color:var(--cream-faint); }
.social { display:flex; gap:.8rem; margin-top:1.5rem; }
.social__link { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--hairline); border-radius:50%; color:var(--cream-dim); transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease); }
.social__link:hover { color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.social__link svg { width:18px; height:18px; }
.social__link[hidden] { display:none; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (min-width:560px) {
  .services__grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:700px) {
  .pillars { grid-template-columns:repeat(3,1fr); gap:2rem; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards .card:nth-child(3) { grid-column:1/-1; width:min(100%,calc((100% - 1.5rem)/2)); justify-self:center; }
  .estimator__panel { grid-template-columns:1.25fr 1fr; }
  .about__row { grid-template-columns:.82fr 1.18fr; }
  .about__row--alt { grid-template-columns:1.18fr .82fr; }
  .about__row--alt .about__frame { order:2; }
  .about__row--alt .about__body { order:1; }
  .site-footer__inner { grid-template-columns:1.4fr 1fr 1fr; }
}
@media (min-width:1020px) {
  .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cards .card:nth-child(3) { grid-column:auto; width:auto; justify-self:stretch; }
}
@media (min-width:900px) {
  .services__grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1120px) {
  .nav { display:flex; } .nav__book { display:inline-flex; } .nav-toggle { display:none; }
  .site-header__inner { gap:.85rem; }
  .brand { gap:.55rem; }
  .brand__mark { width:27px; }
  .brand__word { font-size:1.02rem; letter-spacing:.24em; }
  .nav { gap:1.15rem; }
  .nav a { font-size:.68rem; letter-spacing:.09em; }
  .nav__book { --pad-x:1.2rem; font-size:.7rem; }
  .viewfinder { display:block; }
}
@media (min-width:1440px) {
  .site-header__inner { gap:1.5rem; }
  .brand { gap:.7rem; }
  .brand__mark { width:30px; }
  .brand__word { font-size:1.32rem; letter-spacing:.34em; }
  .nav { gap:2rem; }
  .nav a { font-size:.76rem; letter-spacing:.13em; }
  .nav__book { --pad-x:2rem; font-size:.82rem; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  html.js .hero { height:auto; }
  html.js .hero__stage { position:static; height:auto; }
  .shutter { display:none; }
  .hero__inner { opacity:1; transform:none; }
  html.js .hero__title .word__in { transform:none; }
  html.js .hero__chips li { opacity:1; transform:none; }
  html.js .reveal { opacity:1; transform:none; }
  .hero__spot,.hero__motes,.hero__flare,.hero__bloom { display:none; }
  .marquee__track,.reel__track { animation:none; }
  .reel { overflow-x:auto; }
  .testimonials__stage { display:block; }
  .t-slide { opacity:1; transform:none; margin-bottom:2.5rem; }
}

/* ── BEFORE / AFTER slider ─────────────────────────────────────────── */
.ba-wrap { position:relative; margin-top:clamp(3rem,7vw,5rem); }
.ba__head { text-align:center; margin-bottom:1.8rem; }
.ba__title { font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,3.5vw,2.4rem); margin:.3rem 0 .5rem; }
.ba__sub { color:var(--cream-dim); font-size:.92rem; }
.ba { --pos:50%; position:relative; max-width:980px; margin:0 auto; aspect-ratio:16/10; border-radius:4px; overflow:hidden; border:1px solid rgba(245,240,232,.08); background:var(--ink-3); touch-action:pan-y; user-select:none; }
.ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba__before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position:absolute; top:0; bottom:0; left:var(--pos); width:0; z-index:3; cursor:ew-resize; }
.ba__line { position:absolute; top:0; bottom:0; left:0; width:2px; transform:translateX(-50%); background:var(--gold); box-shadow:0 0 12px rgba(201,168,76,.5); }
.ba__grip { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--ink); display:grid; place-items:center; font-size:1.05rem; box-shadow:0 6px 20px rgba(0,0,0,.55); }
.ba__handle:focus-visible { outline:none; } .ba__handle:focus-visible .ba__grip { outline:2px solid var(--cream); outline-offset:3px; }
.ba__tag { position:absolute; bottom:1rem; z-index:2; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); background:rgba(13,13,13,.6); padding:.3rem .7rem; border-radius:999px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ba__tag--before { left:1rem; } .ba__tag--after { right:1rem; }

/* ── CONTACT ───────────────────────────────────────────────────────── */
.contact { position:relative; padding-block:var(--section-y); }
.contact::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 50% at 15% 0%, var(--warm), transparent 70%); }
.contact .container { position:relative; }
.contact__grid { display:grid; gap:clamp(2rem,5vw,4rem); align-items:start; grid-template-columns:minmax(0,1fr); }
.contact__intro { min-width:0; }
.contact__intro p { color:var(--cream-dim); margin-top:1.3rem; max-width:42ch; }
.contact__intro .section-title { margin-bottom:.4rem; }
.contact__methods { margin-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
.contact__methods li { display:flex; gap:1rem; font-size:.92rem; color:var(--cream-dim); align-items:baseline; min-width:0; }
.contact__methods li[hidden] { display:none; }
.contact__methods span { color:var(--gold); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; min-width:5.5rem; flex:0 0 auto; }
.contact__methods a { overflow-wrap:anywhere; word-break:break-word; }
.contact__methods a:hover { color:var(--gold); }
.contact__form { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.cf-row { display:grid; gap:1rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.cf-field { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.cf-field span { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); }
.cf-field input, .cf-field textarea { width:100%; background:var(--ink-2); border:1px solid var(--hairline); border-radius:3px; padding:.85rem 1rem; color:var(--cream); font-family:var(--font-body); font-size:.95rem; resize:vertical; transition:border-color .3s var(--ease); }
.cf-field input:focus, .cf-field textarea:focus { outline:none; border-color:var(--gold); }
.contact__form .btn { align-self:flex-start; margin-top:.4rem; }
.contact__note { font-size:.76rem; line-height:1.6; color:var(--cream-faint); margin-top:-.15rem; }
.contact__note a { color:var(--gold); }
.contact__status { font-size:.85rem; color:var(--gold); min-height:1.2em; }
.site-footer__base a { color:inherit; } .site-footer__base a:hover { color:var(--gold); }
@media (min-width:700px) { .contact__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:479px) { .cf-row { grid-template-columns:1fr; } }