/* ============================================================
   CACHE ESTATE — design system
   Black · White · Gold  ·  modern Santa Barbara
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --ink-2:#111110;
  --ink-3:#1A1917;
  --bone:#FAF8F5;
  --bone-2:#F0EBE3;
  --bone-3:#E4DDD2;
  --sand:#EAE3D8;
  --on-img:#F7F4EF;
  --gold:#C6A664;
  --gold-lt:#E3CE9B;
  --gold-dp:#9C7F45;
  --beige:#D9C9A6;
  --beige-lt:#EAE0C4;
  --beige-dp:#B9A87C;
  --trim:rgba(198,166,100,.34);
  --txt-d:#141310;
  --txt-l:#F7F4EF;
  --mut-d:#6E6961;
  --mut-l:#A39C90;
  --line-d:rgba(20,19,16,.13);
  --line-l:rgba(247,244,239,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,5vw,72px);
  --maxw:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bone);color:var(--txt-d);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:16.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-loading{overflow:hidden;height:100vh}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.16;letter-spacing:-.012em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- type utilities ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-n{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{
  font-size:clamp(9px,.68vw,11px);letter-spacing:.34em;text-transform:uppercase;
  font-weight:400;color:var(--mut-d);display:flex;align-items:center;gap:.9em;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold);flex:none}
.eyebrow.c{justify-content:center}
/* eyebrows that sit over photography keep light type */
.phero-in .eyebrow,.occ-in .eyebrow,.hero-copy .eyebrow,.hero-in .eyebrow{color:var(--on-img)}
.h-xl{font-size:clamp(2.6rem,7.6vw,6.6rem)}
.h-lg{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.h-md{font-size:clamp(1.7rem,3.1vw,2.7rem)}
.h-sm{font-size:clamp(1.25rem,1.9vw,1.65rem)}
.it{font-style:italic}
.gold{color:inherit}
.lead{font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.85;color:var(--mut-d);font-weight:400}
.section-dark .lead{color:var(--mut-l)}
.mono{font-size:clamp(9px,.68vw,11px);letter-spacing:.26em;text-transform:uppercase}
.section{padding:clamp(76px,11vw,152px) 0}
.section-sm{padding:clamp(52px,7vw,96px) 0}
.section-dark{
  background:var(--sand);color:var(--txt-d);
  --txt-l:var(--txt-d);--mut-l:var(--mut-d);--line-l:var(--line-d);
}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--txt-l)}
.section-alt{background:var(--bone-2)}
.rule{height:1px;background:var(--line-d);border:0;margin:0}
.section-dark .rule{background:var(--line-l)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.15em 2.3em;font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--gold);position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);isolation:isolate;
}
/* the sweep fills with beige, not with currentColor - filling with
   currentColor turned light buttons solid white and dark ones solid black */
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--beige);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.btn:hover::after{transform:scaleY(1)}
.btn:hover{border-color:var(--gold-lt)}
.btn-gold{background:var(--beige);border-color:var(--gold);color:var(--ink);font-weight:400}
.btn-gold::after{background:var(--beige-lt)}
.btn-gold:hover{color:var(--ink);border-color:var(--gold-lt)}
.btn-dark{color:var(--txt-d)}
.btn-dark:hover{color:var(--ink)}
.btn-light{color:var(--txt-l)}
.btn-light:hover{color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.c{justify-content:center}

/* link with animated underline */
.ulink{position:relative;display:inline-block;padding-bottom:3px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.ulink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}
.ulink.on::after{transform:scaleX(1)}

/* ---------- preloader ---------- */
#preload{
  position:fixed;inset:0;z-index:9999;background:var(--bone);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transition:opacity .9s var(--ease),visibility .9s;
}
#preload.done{opacity:0;visibility:hidden}
#preload img{width:min(340px,58vw);opacity:0;animation:plIn 1.3s var(--ease) .15s forwards}
@keyframes plIn{to{opacity:1}}
.pl-bar{width:min(230px,52vw);height:1px;background:rgba(20,19,16,.12);position:relative;overflow:hidden}
.pl-bar i{position:absolute;inset:0;width:0;background:var(--gold);transition:width .35s var(--ease)}
.pl-num{font-size:10px;letter-spacing:.3em;color:var(--mut-d);font-variant-numeric:tabular-nums}

/* ---------- grain + progress ---------- */
.grain{
  position:fixed;inset:0;z-index:990;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:960;will-change:transform}

/* ---------- cursor ---------- */
.cur-d{position:fixed;top:0;left:0;pointer-events:none;z-index:995;transform:translate(-50%,-50%);will-change:transform}
.cur-d{width:8px;height:8px;border-radius:50%;background:var(--beige-dp);
  transition:width .22s var(--ease),height .22s var(--ease),background .22s var(--ease)}
html.cur-on .cur-d.act{width:16px;height:16px;background:var(--gold)}
/* the universal selector wins over any element's own `cursor:pointer` (.pin,
   .gitem, .fbtn, form controls, etc.) so the native arrow never reappears -
   scoping cursor:none to only a few tag names let it leak through everywhere else */
html.cur-on,html.cur-on *{cursor:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:800;padding:22px 0;transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s}
.nav::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--trim);opacity:0;transition:opacity .5s}
.nav.scrolled{padding:12px 0;background:rgba(250,248,245,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.scrolled::after{opacity:1}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:block;flex:none}
.nav-logo img{height:clamp(26px,2.5vw,34px);width:auto;transition:height .5s var(--ease)}
.nav.scrolled .nav-logo img{height:clamp(22px,2vw,27px)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav-links a{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,239,.86);position:relative;padding:5px 0;transition:color .35s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--txt-l)}
.nav-links a:hover::after,.nav-links a.here::after{transform:scaleX(1);transform-origin:left}
.nav-links a.here{color:var(--on-img)}
/* nav flips to dark type once it sits on beige */
.nav.scrolled .nav-links a{color:rgba(20,19,16,.72)}
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.here{color:var(--txt-d)}
.nav.scrolled .burger i{background:var(--txt-d)}
.nav-logo{position:relative;display:block}
.nav-logo img{transition:height .5s var(--ease),opacity .45s var(--ease)}
.nav-logo .lg-d{position:absolute;left:0;top:0;opacity:0}
.nav.scrolled .nav-logo .lg-l{opacity:0}
.nav.scrolled .nav-logo .lg-d{opacity:1}

.nav-right{display:flex;align-items:center;gap:18px;flex:none}
.nav .btn{padding:.92em 1.7em;font-size:.66rem}
.burger{display:none;flex-direction:column;gap:5px;width:26px;padding:8px 0;z-index:2}
.burger i{display:block;height:1px;background:var(--txt-l);transition:transform .45s var(--ease),opacity .35s}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
}

/* ---------- full menu ---------- */
.sheet{
  position:fixed;inset:0;z-index:790;background:var(--bone);display:flex;align-items:center;
  clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .95s var(--ease);pointer-events:none;
}
.sheet.on{clip-path:circle(150% at calc(100% - 40px) 40px);pointer-events:auto}
.sheet-in{width:100%;padding:0 var(--pad);display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;max-width:var(--maxw);margin:0 auto}
.sheet-nav li{overflow:hidden}
.sheet-nav a{
  display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,6.4vw,4.6rem);color:var(--txt-d);
  padding:.06em 0;opacity:0;transform:translateY(30px);transition:color .4s,opacity .7s var(--ease),transform .7s var(--ease);
}
.sheet.on .sheet-nav a{opacity:1;transform:none}
.sheet-nav a:hover{color:var(--mut-d)}
.sheet-nav a i{font-style:normal;font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.2em;color:var(--mut-d);vertical-align:super;margin-right:14px;opacity:.75}
.sheet-side{color:var(--mut-d);font-size:.86rem;line-height:1.9;opacity:0;transition:opacity .8s .35s}
.sheet.on .sheet-side{opacity:1}
.sheet-side h4{font-family:'Jost',sans-serif;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut-d);margin-bottom:12px}
.sheet-side a:hover{color:var(--txt-d)}
.sheet-side>div+div{margin-top:30px}
@media(max-width:900px){.sheet-in{grid-template-columns:1fr;gap:36px}.sheet-side{font-size:.8rem}}

/* ============================================================
   HERO — WebGL day→night scroll
   ============================================================ */
/* ============================================================
   HERO — typographic overture, played on load (no scroll dependency)
   ============================================================ */
.hero{
  position:relative;min-height:100svh;min-height:100vh;overflow:hidden;
  display:grid;place-items:center;background:var(--bone);
}
.hero-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.24);will-change:opacity,transform;
}
/* the page opens on white; the wash lifts as the photograph pulls back */
.hero-wash{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  background:var(--bone);pointer-events:none;
}
.hero-scrim{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  background:
    radial-gradient(58% 46% at 50% 44%,rgba(10,8,5,.74),rgba(10,8,5,.32) 62%,transparent 82%),
    linear-gradient(180deg,rgba(12,10,7,.56) 0%,rgba(12,10,7,.20) 30%,rgba(12,10,7,.38) 62%,rgba(12,10,7,.78) 100%);
}
.hero-copy{
  position:relative;z-index:3;text-align:center;padding:0 var(--pad);max-width:1000px;
}
.hero-name{
  /* inline-block so its box is the width of the words, which is what the
     opening scale is measured against */
  display:inline-block;opacity:0;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(1.45rem,3.9vw,3.4rem);letter-spacing:.3em;text-transform:uppercase;
  line-height:1;color:var(--on-img);white-space:nowrap;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.hero.ready .hero-name{opacity:1}
/* the client's logotype: rule, wordmark, rule, place */
.hero-lockup{
  --bleed:clamp(10px,1.6vw,28px);
  display:inline-block;max-width:100%;
}
/* the .3em tracking hangs off the final letter; pull it back so the
   wordmark sits optically centred between the rules */
.hero-lockup .hero-name{margin-right:-.3em}
.lock-rule{
  display:block;height:1px;
  width:calc(100% + var(--bleed) * 2);margin-left:calc(var(--bleed) * -1);
  background:rgba(247,244,239,.8);box-shadow:0 1px 18px rgba(0,0,0,.55);
  opacity:0;transform:scaleX(0);transform-origin:50% 50%;
  will-change:opacity,transform;
}
.lock-rule.t{margin-bottom:clamp(14px,1.9vw,24px)}
.lock-rule.b{margin-top:clamp(14px,1.9vw,24px)}
.hero-locale{
  margin-top:clamp(12px,1.5vw,20px);
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(.6rem,.95vw,.76rem);letter-spacing:.42em;text-transform:uppercase;
  /* the tracking hangs right here too */
  text-indent:.42em;
  color:rgba(247,244,239,.88);text-shadow:0 1px 22px rgba(0,0,0,.6);
  opacity:0;
}
.hero-rest{opacity:0;transform:translateY(24px);will-change:opacity,transform}
.hero-mark{
  margin:0 auto clamp(16px,2.2vw,26px);
  display:flex;justify-content:center;
  opacity:0;
}
.hero.play .hero-mark{animation:hRest 1.1s var(--ease) .95s forwards}
.hero-mark img{
  width:min(320px,44vw);height:auto;
  filter:drop-shadow(0 3px 20px rgba(0,0,0,.9)) drop-shadow(0 0 56px rgba(0,0,0,.65));
}
.hero-sub{
  margin:clamp(20px,2.6vw,30px) auto 0;max-width:520px;color:rgba(247,244,239,.94);
  font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.8;text-shadow:0 1px 26px rgba(0,0,0,.65);
}
/* the lockup carries the hero alone now, so the buttons stand further off it */
.hero-cta{margin-top:clamp(38px,4.6vw,58px)}
.hero-meta{
  position:absolute;left:0;bottom:26px;width:100%;padding:0 var(--pad);z-index:4;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  color:rgba(247,244,239,.72);opacity:0;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;pointer-events:none;
}

/* the overture itself */
.hero.play .hero-shot { animation:hShot 1.9s var(--ease) .35s forwards }
.hero.play .hero-scrim{ animation:hFade 1.2s var(--ease) .55s forwards }
.hero.play .hero-wash { animation:hWash 1.25s var(--ease) .30s forwards }
/* each letter rises in turn once the photograph is established */
.hero-name .ch{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(1.55s + var(--i,0) * .055s);
}
.hero.play .hero-name .ch{opacity:1;transform:none}
/* the rules draw out from the centre either side of the letters, the
   place settles last */
.hero.play .lock-rule.t{ animation:hRule 1.1s var(--ease) 1.30s forwards }
.hero.play .lock-rule.b{ animation:hRule 1.1s var(--ease) 1.42s forwards }
.hero.play .hero-locale{ animation:hFade .9s var(--ease) 2.35s forwards }
.hero.play .hero-rest { animation:hRest 1.05s var(--ease) 2.6s forwards }
.hero.play .hero-meta { animation:hFade .9s var(--ease) 3.0s forwards }
@keyframes hRule{to{opacity:1;transform:scaleX(1)}}
@keyframes hShot{to{opacity:1;transform:scale(1)}}
@keyframes hFade{to{opacity:1}}
@keyframes hRest{to{opacity:1;transform:none}}
@keyframes hWash{to{opacity:0}}

/* while the ground is still paper, the nav has to read dark */
body.paper .nav-links a{color:rgba(20,19,16,.72)}
body.paper .nav-links a:hover,body.paper .nav-links a.here{color:var(--txt-d)}
body.paper .burger i{background:var(--txt-d)}
body.paper .nav-logo .lg-l{opacity:0}
body.paper .nav-logo .lg-d{opacity:1}
.nav-links a,.burger i,.nav-logo img{transition:color .7s var(--ease),background .7s var(--ease),opacity .7s var(--ease),height .5s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .hero-wash{opacity:0}
  .hero-name{opacity:1}
  .hero-mark{opacity:1}
  .hero-name .ch{opacity:1;transform:none;transition:none}
  .lock-rule{opacity:1;transform:none}
  .hero-locale{opacity:1}
  .hero-shot,.hero-scrim,.hero-meta{opacity:1;transform:none}
  .hero-rest{opacity:1;transform:none}
  .hero-name{transform:scale(1);color:var(--on-img);text-shadow:0 2px 30px rgba(0,0,0,.5)}
}

.cue{display:flex;flex-direction:column;align-items:center;gap:9px}
.cue s{text-decoration:none;display:block;width:1px;height:36px;background:linear-gradient(180deg,rgba(247,244,239,.7),transparent);position:relative;overflow:hidden}
.cue s::after{content:'';position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--gold);animation:cue 2.1s var(--ease-io) infinite}
@keyframes cue{0%{top:-100%}62%{top:100%}100%{top:100%}}
@media(max-width:760px){.hero-meta{font-size:9px;letter-spacing:.18em}.hero-meta .cue{display:none}}

/* ============================================================
   reveals
   ============================================================ */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
.rv-img{overflow:hidden;position:relative}
.rv-img>img{transform:scale(1.16);transition:transform 1.5s var(--ease);will-change:transform}
.rv-img.in>img{transform:scale(1)}
.rv-img::after{content:'';position:absolute;inset:0;background:var(--bone);transform-origin:right;transition:transform 1.1s var(--ease)}
.rv-img.in::after{transform:scaleX(0)}
.section-dark .rv-img::after{background:var(--sand)}
/* a hair of bottom padding so tight-line-height serif descenders (g, y, p, q, j)
   never get sliced off by this box's own overflow:hidden reveal clip */
.rv-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rv-line>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.rv.in .rv-line>span,.rv-line.in>span{transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-img>img,.rv-line>span{opacity:1!important;transform:none!important}
  .rv-img::after{transform:scaleX(0)!important}
}

/* ============================================================
   marquee
   ============================================================ */
.marq{overflow:hidden;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:18px 0;background:var(--sand)}
.marq-t{display:flex;width:max-content;gap:44px;animation:marq 46s linear infinite;align-items:center}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t span{font-size:clamp(11px,1vw,14px);letter-spacing:.3em;text-transform:uppercase;color:var(--txt-d);white-space:nowrap;display:flex;align-items:center;gap:44px}
.marq-t span::after{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   stats
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--trim)}
.section-dark .stats{background:var(--trim)}
.stat{background:var(--bone);padding:clamp(26px,3.4vw,46px) clamp(14px,2vw,26px);text-align:center}
.section-dark .stat{background:var(--bone)}
.section-alt .stat{background:var(--bone-2)}
.stat b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(2rem,4.2vw,3.4rem);color:var(--txt-d);line-height:1;font-variant-numeric:tabular-nums}
.stat s{text-decoration:none;display:block;margin-top:12px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-d)}
.section-dark .stat s{color:var(--mut-l)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   split / editorial blocks
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,110px);align-items:center}
.split.wide-l{grid-template-columns:1.15fr .85fr}
.split.wide-r{grid-template-columns:.85fr 1.15fr}
.split h2{margin-top:20px}
.split p+p{margin-top:18px}
.split .lead{margin-top:24px}
.split .btn-row{margin-top:36px}
@media(max-width:900px){
  .split,.split.wide-l,.split.wide-r{grid-template-columns:1fr;gap:34px}
  .split .media-stack{order:-1}
}

.media-stack{position:relative;aspect-ratio:4/5}
.media-stack .m1{position:absolute;top:0;left:0;width:80%;height:78%;box-shadow:0 40px 90px rgba(10,10,10,.24)}
.media-stack .m2{position:absolute;bottom:0;right:0;width:56%;height:46%;box-shadow:0 40px 90px rgba(10,10,10,.3);border:8px solid var(--bone)}
.section-dark .media-stack .m2{border-color:var(--ink)}
.section-alt .media-stack .m2{border-color:var(--bone-2)}
.media-stack img{width:100%;height:100%;object-fit:cover}
.media-1{position:relative;aspect-ratio:4/5}
.media-1 img{width:100%;height:100%;object-fit:cover}
.media-w{position:relative;aspect-ratio:16/11}
.media-w img{width:100%;height:100%;object-fit:cover}

/* numbered highlight list */
.hlist{margin-top:34px;display:flex;flex-direction:column}
.hlist li{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line-d)}
.section-dark .hlist li{border-color:var(--line-l)}
.hlist li:last-child{border-bottom:1px solid var(--line-d)}
.section-dark .hlist li:last-child{border-color:var(--line-l)}
.hlist b{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic;color:var(--mut-d);font-size:1rem;flex:none;width:26px}
.hlist strong{display:block;font-weight:400;font-size:1.02rem;margin-bottom:5px}
.hlist span{color:var(--mut-d);font-size:.92rem;line-height:1.72}
.section-dark .hlist span{color:var(--mut-l)}

/* tag pills */
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.tag{padding:.62em 1.15em;border:1px solid var(--line-d);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);transition:border-color .4s,color .4s}
.tag:hover{border-color:var(--gold);color:var(--txt-d)}
.section-dark .tag{border-color:var(--line-l);color:var(--mut-l)}

/* ============================================================
   INTERACTIVE 3D ESTATE PLAN
   ============================================================ */
.plan-wrap{position:relative;touch-action:pan-y}
.plan-stage{
  position:relative;
  transform:scale(var(--ps,1));
  transition:transform .85s var(--ease);will-change:transform;
}

.plan-stage>img{width:100%;display:block;box-shadow:0 24px 60px rgba(60,48,28,.18)}
.plan-glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(198,166,100,.16),transparent 70%);mix-blend-mode:screen;pointer-events:none}
.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:auto;cursor:pointer;
}
.pin::before{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%}
.pin i{
  display:block;width:16px;height:16px;border-radius:50%;background:var(--gold);
  border:2px solid rgba(10,10,10,.85);
  box-shadow:0 0 0 1px var(--gold),0 0 26px 8px rgba(198,166,100,.55),0 6px 16px rgba(0,0,0,.7);
  position:relative;transition:transform .4s var(--ease);
}
.pin i::after{
  content:'';position:absolute;inset:-11px;border:1px solid var(--gold);border-radius:50%;
  opacity:.7;animation:ping 2.6s var(--ease-io) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.75}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.pin b{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:rgba(20,19,16,.92);backdrop-filter:blur(8px);color:var(--on-img);
  padding:.62em 1em;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  white-space:nowrap;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);
  border:1px solid rgba(198,166,100,.4);pointer-events:none;
}
.pin:hover i,.pin.on i{transform:scale(1.35)}
.pin:hover b,.pin.on b{opacity:1;transform:translateX(-50%) translateY(-5px)}
.plan-ui{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(30px,4vw,48px)}
.plan-btn{
  padding:.78em 1.4em;border:1px solid var(--line-d);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut-d);transition:all .4s var(--ease);
}
.plan-btn:hover{border-color:var(--gold);color:var(--txt-d)}
.plan-btn.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.plan-hint{text-align:center;margin-top:20px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-d);opacity:.75}
.plan-read{
  max-width:520px;margin:clamp(26px,3.4vw,40px) auto 0;text-align:center;min-height:74px;
}
.plan-read h4{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--txt-d);margin-bottom:10px}
.plan-read p{color:var(--mut-d);font-size:.94rem;line-height:1.8}
.plan-read.sw h4,.plan-read.sw p{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ============================================================
   occasion cards / tabs
   ============================================================ */
.occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--trim)}
.occ{position:relative;overflow:hidden;background:var(--bone-3);aspect-ratio:3/4;display:block}
.occ img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease),filter 1s var(--ease);filter:brightness(.8) saturate(.88)}
.occ:hover img{transform:scale(1.07);filter:brightness(.6) saturate(.95)}
.occ::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.35) 0%,transparent 30%,rgba(8,8,8,.55) 68%,rgba(8,8,8,.92) 100%);
}
.occ-in{position:absolute;inset:0;z-index:2;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;justify-content:flex-end;color:var(--on-img)}
.occ-n{position:absolute;top:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);font-size:10px;letter-spacing:.22em;color:var(--on-img)}
.occ h3{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-bottom:10px}
.occ p{font-size:.9rem;line-height:1.7;color:rgba(247,244,239,.74);max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease),margin .7s var(--ease)}
.occ:hover p{max-height:140px;opacity:1;margin-bottom:18px}
.occ .ulink{color:var(--on-img);opacity:.92}
@media(max-width:900px){.occ-grid{grid-template-columns:1fr}.occ{aspect-ratio:16/10}.occ p{max-height:140px;opacity:1;margin-bottom:16px}}

/* ============================================================
   horizontal scroller (rooms / spaces)
   ============================================================ */
.hstage{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:none}
.hstage::-webkit-scrollbar{display:none}
.htrack{display:flex;gap:20px;width:max-content;padding:0 var(--pad)}
.hcard{width:min(78vw,380px);flex:none;scroll-snap-align:start}
/* desktop only: JS measures the track and adds .pin-on when there's room to
   run the pinned reveal. Everyone else (touch, reduced motion, a track that
   already fits) keeps the plain horizontal-scroll fallback above. */
@media(min-width:901px){
  .hpin.pin-on{position:relative}
  .hstage.pin-on{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding-bottom:0}
  .hstage.pin-on .htrack{will-change:transform}
}
.hcard-m{position:relative;aspect-ratio:3/4;overflow:hidden}
.hcard-m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.hcard:hover .hcard-m img{transform:scale(1.06)}
.hcard-t{position:absolute;top:15px;left:15px;background:rgba(10,10,10,.62);backdrop-filter:blur(6px);color:var(--txt-l);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:.55em .9em}
.hcard h3{margin-top:20px;font-size:1.2rem}
.hcard p{margin-top:9px;color:var(--mut-d);font-size:.88rem;line-height:1.7}
.section-dark .hcard p{color:var(--mut-l)}

/* ============================================================
   gallery + lightbox
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:9px}
.fbtn{padding:.7em 1.3em;border:1px solid var(--line-d);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-d);transition:all .4s var(--ease)}
.fbtn:hover{border-color:var(--gold);color:var(--txt-d)}
.fbtn.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.section-dark .fbtn{border-color:var(--line-l);color:var(--mut-l)}
.section-dark .fbtn.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* dense packing: without it, filtering the grid (.hide on non-matching items)
   left visible holes because the browser won't backfill past a spanning tile */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,15vw,210px);gap:10px;grid-auto-flow:dense}
.gitem{position:relative;overflow:hidden;cursor:pointer;background:var(--bone-3);border:1px solid var(--trim)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.gitem:hover img{transform:scale(1.07)}
.gitem::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.62));opacity:0;transition:opacity .45s}
.gitem:hover::after{opacity:1}
.gitem figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-img);opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.gitem:hover figcaption{opacity:1;transform:none}
.g-w{grid-column:span 2}.g-t{grid-row:span 2}
.gitem.hide{display:none}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}.g-t{grid-row:span 1}}

.lb{position:fixed;inset:0;z-index:970;background:rgba(8,8,8,.97);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.lb.on{opacity:1;pointer-events:auto}
.lb-img{max-width:min(92vw,1240px);max-height:80vh;object-fit:contain}
.lb-cap{position:absolute;bottom:30px;left:0;width:100%;text-align:center;color:rgba(247,244,239,.62);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.lb-cap b{color:var(--on-img);font-weight:400}
.lb button{position:absolute;width:48px;height:48px;border:1px solid rgba(247,244,239,.26);border-radius:50%;color:var(--on-img);display:grid;place-items:center;transition:background .35s,border-color .35s}
.lb button:hover{background:rgba(198,166,100,.9);border-color:transparent;color:var(--ink)}
.lb-x{top:24px;right:24px}
.lb-p{left:24px;top:50%;transform:translateY(-50%)}
.lb-n{right:24px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){.lb-p{left:10px}.lb-n{right:10px}.lb-img{max-height:70vh}}

/* ============================================================
   testimonials
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--trim)}
.quote{background:var(--bone);padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;transition:background .5s}
.quote:hover{background:var(--bone-2)}
.quote blockquote{margin:0;font-family:'Fraunces',Georgia,serif;font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.55;color:var(--txt-l)}
.quote figcaption{display:flex;align-items:center;gap:13px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-l)}
.quote figcaption i{font-style:normal;width:34px;height:34px;border:1px solid var(--line-d);border-radius:50%;display:grid;place-items:center;color:var(--mut-d);font-size:11px;letter-spacing:0;flex:none}
/* the whole byline is the link out to the real review, so "linked" reviews
   are obviously clickable without cluttering the card with a second CTA */
.quote-link{display:flex;align-items:center;gap:13px;color:inherit;transition:color .3s}
.quote-link:hover{color:var(--txt-d)}
.quote-link:hover i{border-color:var(--gold);color:var(--gold-dp)}
.stars{color:var(--gold);letter-spacing:.16em;font-size:11px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* ============================================================
   forms / inquiry
   ============================================================ */
.inq{
  position:relative;background:var(--sand);color:var(--txt-d);overflow:hidden;
  --txt-l:var(--txt-d);--mut-l:var(--mut-d);--line-l:var(--line-d);
}
.inq-bg{position:absolute;inset:0;opacity:.12}
.inq-bg img{width:100%;height:100%;object-fit:cover}
.inq-in{position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,110px)}
.inq h2{margin-top:20px}
.dl{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.dl dt{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-l);margin-bottom:7px}
.dl dd{margin:0;font-size:1.02rem;color:var(--txt-l)}
.dl a{border-bottom:1px solid transparent;transition:border-color .35s}
.dl a:hover{border-color:var(--gold)}
.form{border:1px solid var(--trim);padding:clamp(24px,3.4vw,46px);background:rgba(250,248,245,.74);backdrop-filter:blur(6px)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fld{margin-bottom:22px}
.fld.full{grid-column:1/-1}
.fld label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-l);margin-bottom:9px}
.fld input,.fld select,.fld textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-l);
  color:var(--txt-l);padding:11px 0;font-size:.98rem;font-weight:300;outline:none;
  transition:border-color .4s;border-radius:0;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold)}
.fld textarea{resize:vertical;min-height:88px}
.fld select option{background:var(--bone);color:var(--txt-d)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mut-l);opacity:.6}
.fnote{margin-top:6px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-l);opacity:.8}
.fmsg{margin-top:16px;font-size:.86rem;color:var(--txt-d);min-height:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:.6em 1.05em;border:1px solid var(--line-l);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-l);transition:all .35s}
.chip:hover{border-color:var(--gold);color:var(--txt-d)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media(max-width:900px){.inq-in{grid-template-columns:1fr}.f2{grid-template-columns:1fr}}

/* ============================================================
   footer
   ============================================================ */
footer{
  background:var(--bone-2);color:var(--mut-d);padding:clamp(56px,7vw,88px) 0 30px;border-top:1px solid var(--trim);
  --txt-l:var(--txt-d);--mut-l:var(--mut-d);--line-l:var(--line-d);
}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--trim)}
.foot-top img{width:210px;margin-bottom:20px}
.foot-top h4{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut-d);margin-bottom:16px}
.foot-top li+li{margin-top:11px}
.foot-top a,.foot-top p{font-size:.88rem;transition:color .35s}
.foot-top a:hover{color:var(--txt-d)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.foot-bot a:hover{color:var(--txt-d)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   page hero (interior pages)
   ============================================================ */
.phero{position:relative;height:clamp(62vh,78vh,860px);min-height:460px;overflow:hidden;background:var(--bone-3);display:grid;place-items:end center}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.phero::after{content:'';position:absolute;inset:0;background:radial-gradient(84% 60% at 50% 78%,rgba(8,8,8,.62) 0%,transparent 76%),linear-gradient(180deg,rgba(8,8,8,.66) 0%,rgba(8,8,8,.22) 34%,rgba(8,8,8,.62) 72%,rgba(8,8,8,.92) 100%)}
.phero-in{position:relative;z-index:2;text-align:center;color:var(--on-img);padding:0 var(--pad) clamp(50px,7vw,88px);max-width:900px}
.phero-in h1{margin-top:clamp(20px,2.6vw,30px);text-shadow:0 2px 40px rgba(0,0,0,.55)}
.phero-in .eyebrow{margin-bottom:4px}
.phero-in .lead{color:rgba(247,244,239,.92);margin:22px auto 0;max-width:560px;text-shadow:0 1px 22px rgba(0,0,0,.7)}
.crumb{display:flex;justify-content:center;gap:10px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,244,239,.75);margin-bottom:20px;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.crumb a:hover{color:var(--on-img)}
.crumb i{font-style:normal;color:var(--on-img)}

/* ============================================================
   timeline (weddings — arc of the day)
   ============================================================ */
.arc{position:relative}
.arc-rail{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-l);transform:translateX(-50%)}
.arc-rail i{position:absolute;left:0;top:0;width:1px;background:var(--gold);height:var(--ah,0%)}
.arc-step{display:grid;grid-template-columns:1fr 90px 1fr;gap:0;align-items:center;padding:clamp(30px,5vw,64px) 0}
.arc-step .side{min-width:0}
.arc-mid{display:grid;place-items:center;position:relative;z-index:2}
.arc-dot{width:11px;height:11px;border-radius:50%;background:var(--bone);border:1px solid var(--gold);transition:background .5s var(--ease),transform .5s var(--ease)}
.arc-step.in .arc-dot{background:var(--gold);transform:scale(1.4)}
.arc-time{position:absolute;top:calc(50% + 20px);font-size:9.5px;letter-spacing:.2em;color:var(--mut-d);white-space:nowrap}
.arc-step h3{font-size:clamp(1.4rem,2.4vw,2.05rem);margin-bottom:12px}
.arc-step p{color:var(--mut-l);font-size:.95rem;line-height:1.82}
.arc-step .media-w{aspect-ratio:4/3}
.arc-step:nth-child(odd) .side:first-child{text-align:right;padding-right:clamp(20px,3.4vw,52px)}
.arc-step:nth-child(odd) .side:last-child{padding-left:clamp(20px,3.4vw,52px)}
.arc-step:nth-child(even) .side:first-child{padding-right:clamp(20px,3.4vw,52px)}
.arc-step:nth-child(even) .side:last-child{padding-left:clamp(20px,3.4vw,52px);text-align:left}
@media(max-width:860px){
  .arc-rail{left:9px}
  .arc-step{grid-template-columns:24px 1fr;gap:20px;padding:28px 0}
  .arc-mid{order:-1;justify-items:start}
  .arc-time{position:static;margin-top:8px}
  .arc-step .side{padding:0!important;text-align:left!important}
  .arc-step .side:first-child{grid-column:2}
  .arc-step .side:last-child{grid-column:2;margin-top:18px}
}

/* ============================================================
   configurator (corporate)
   ============================================================ */
.cfg{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:start}
.cfg-panel{border:1px solid var(--line-l);padding:clamp(24px,3vw,40px)}
.cfg-panel h4{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut-d);margin-bottom:16px}
.cfg-panel h4+.chips{margin-bottom:30px}
.cfg-range{width:100%;-webkit-appearance:none;appearance:none;height:1px;background:var(--line-l);outline:none;margin:26px 0 10px}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 0 5px rgba(198,166,100,.16)}
.cfg-range::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:var(--gold);cursor:pointer}
.cfg-out{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cfg-out b{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--txt-d);line-height:1;font-variant-numeric:tabular-nums}
.cfg-out s{text-decoration:none;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut-l)}
.cfg-res{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-l)}
.cfg-res li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:.9rem;color:var(--mut-l);border-bottom:1px solid rgba(247,244,239,.06)}
.cfg-res li b{font-weight:400;color:var(--txt-l)}
.cfg-note{margin-top:22px;font-size:.86rem;line-height:1.75;color:var(--mut-l)}
.cfg-note b{color:var(--txt-d);font-weight:400}
@media(max-width:900px){.cfg{grid-template-columns:1fr}}

/* ============================================================
   day scrubber (family)
   ============================================================ */
.dayscrub{position:relative}
.ds-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bone-3)}
.ds-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease),transform 6s linear;transform:scale(1.04)}
.ds-stage img.on{opacity:1;transform:scale(1.1)}
.ds-cap{position:absolute;left:0;bottom:0;width:100%;padding:clamp(26px,3.4vw,48px);z-index:2;color:var(--txt-l);background:linear-gradient(180deg,transparent 0%,rgba(8,8,8,.55) 42%,rgba(8,8,8,.93) 100%)}
.ds-cap b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);margin-bottom:8px}
.ds-cap span{color:rgba(247,244,239,.8);font-size:.92rem;line-height:1.7;max-width:520px;display:block}
.ds-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;margin-top:2px;background:var(--line-l)}
.ds-tick{background:var(--bone);padding:16px 10px;text-align:center;transition:background .4s}
.ds-tick:hover{background:var(--bone-2)}
.ds-tick b{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-l);font-weight:400;transition:color .4s}
.ds-tick.on{background:var(--gold)}
.ds-tick.on b{color:var(--ink)}
@media(max-width:700px){.ds-rail{grid-auto-flow:row;grid-auto-columns:auto}.ds-stage{aspect-ratio:4/5}}

/* ============================================================
   amenity grid
   ============================================================ */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--trim)}
.amen li{background:var(--bone);padding:clamp(24px,3vw,38px) clamp(14px,2vw,24px);transition:background .45s var(--ease)}
.amen li:hover{background:var(--bone-2)}
.amen b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:1.6rem;color:var(--txt-d);line-height:1;margin-bottom:14px}
.amen strong{display:block;font-weight:400;font-size:.98rem;color:var(--txt-l);margin-bottom:6px}
.amen span{font-size:.84rem;line-height:1.65;color:var(--mut-l)}
.section-alt .amen,.amen.on-light{background:var(--trim)}
.amen.on-light li{background:var(--bone)}
.amen.on-light li:hover{background:var(--bone-2)}
.amen.on-light strong{color:var(--txt-d)}
.amen.on-light span{color:var(--mut-d)}
@media(max-width:900px){.amen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.amen{grid-template-columns:1fr}}
/* the homepage amenity list runs 14 items through a 4-column grid, and
   14 isn't divisible by 4 - the last row only filled 2 of 4 slots, leaving
   bare background showing on the right. Widening the last two tiles closes
   it flush. Only needed at the 4-column width; 2-col and 1-col below
   already divide evenly, so this is scoped to that breakpoint only */
@media(min-width:901px){.amen-14 li:nth-last-child(-n+2){grid-column:span 2}}

/* ============================================================
   brochure slot
   ============================================================ */
.broch{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,40px);align-items:center;
  border:1px solid var(--trim);padding:clamp(26px,3.4vw,44px);
}
.broch-ic{width:52px;height:52px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);flex:none}
.broch h3{font-size:clamp(1.2rem,1.9vw,1.55rem);margin-bottom:8px}
.broch p{color:var(--mut-l);font-size:.9rem;line-height:1.7}
.broch .btn{white-space:nowrap}
.broch.soon .btn{opacity:.4;pointer-events:none}
@media(max-width:820px){.broch{grid-template-columns:1fr;text-align:left}}

/* ============================================================
   BAROQUE PHOTO FRAME — wedding + gallery photography
   ============================================================ */
.frame-baroque{
  border-style:solid;
  border-width:clamp(11px,1.7vw,22px);
  border-image:url('baroque-frame.webp') 270 stretch;
  box-shadow:0 14px 34px rgba(40,28,8,.32);
}
.gitem.frame-baroque:hover{box-shadow:0 18px 44px rgba(40,28,8,.42)}

/* ---------- misc ---------- */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:26px;margin-bottom:clamp(34px,4.6vw,60px)}
.head-row h2{margin-top:18px;max-width:640px}
.head-row .lead{max-width:400px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.mt-l{margin-top:clamp(34px,4.6vw,60px)}
.mt-m{margin-top:clamp(24px,3vw,38px)}
.credit{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-l);opacity:.7;margin-top:18px}
.credit a{border-bottom:1px solid rgba(198,166,100,.35)}
.credit a:hover{color:var(--txt-d)}


/* ---------- anchor offset under the fixed nav ---------- */
section[id],div[id]{scroll-margin-top:90px}

/* ---------- small-screen refinements ---------- */
@media(max-width:640px){
  .hero-name{font-size:clamp(1.08rem,5vw,1.5rem);letter-spacing:.2em}
  .hero-lockup{--bleed:8px}
  .hero-lockup .hero-name{margin-right:-.2em}
  .hero-locale{font-size:.58rem;letter-spacing:.34em;text-indent:.34em}
  .hero-mark img{width:min(195px,52vw)}
  .hero-sub{font-size:.95rem;line-height:1.72}
  .reel-card{min-height:0}
  .phero-in h1{font-size:clamp(2rem,8.6vw,2.7rem)}
  .hero-meta{bottom:18px}
  .btn{padding:1.05em 1.8em;font-size:.68rem}
  .arc-step{padding:20px 0}
  .arc-step .side:last-child{margin-top:14px}
  .arc-step h3{font-size:1.5rem}
  .quote blockquote{font-size:1.05rem}
  .plan-hint{font-size:9px}
}
@media(max-width:400px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row.c .btn{width:100%}
}

/* ============================================================
   HOSTED HERE — names / brands the estate has welcomed
   ============================================================ */
.hosted{border-top:1px solid var(--trim);border-bottom:1px solid var(--trim);padding:clamp(40px,5.4vw,76px) 0}
.hosted-head{text-align:center;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut-l);margin-bottom:clamp(26px,3.2vw,42px)}
.hosted-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--trim)}
.hosted-grid li{background:var(--bone);transition:background .5s var(--ease)}
.hosted-grid li:hover{background:var(--bone-2)}
.hosted-grid a{
  display:block;padding:clamp(24px,3vw,38px) clamp(14px,2vw,22px);text-align:center;height:100%;
}
.hosted-grid em{
  display:block;margin-top:14px;font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.hosted-grid li:hover em,.hosted-grid a:focus-visible em{opacity:1;transform:none}
@media(hover:none){.hosted-grid em{opacity:1;transform:none}}
.hosted-grid b{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.6rem);color:var(--txt-d);line-height:1.2;
}
.hosted-grid s{
  text-decoration:none;display:block;margin-top:10px;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut-d);
}
.hosted-note{text-align:center;margin-top:clamp(24px,3vw,36px);font-size:.9rem;line-height:1.8;color:var(--mut-d);max-width:620px;margin-inline:auto}

/* ============================================================
   the wedding guide — auto-cycling brochure
   ============================================================ */
.bro{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(10px,1.6vw,24px);
}
.bro-stage{
  position:relative;aspect-ratio:1800/1165;background:var(--bone-2);
  border:1px solid var(--trim);overflow:hidden;
}
.bro-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .7s var(--ease);
}
.bro-stage img.on{opacity:1}
.bro-nav{
  width:clamp(38px,3.4vw,50px);height:clamp(38px,3.4vw,50px);border-radius:50%;
  border:1px solid var(--line-d);display:grid;place-items:center;
  font-size:1.4rem;line-height:1;color:var(--txt-d);flex:none;
  transition:border-color .35s,background .35s;
}
.bro-nav:hover{border-color:var(--gold);background:rgba(198,166,100,.10)}
.bro-ui{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-top:clamp(18px,2.4vw,28px);
}
.bro-dots{display:flex;flex-wrap:wrap;gap:7px}
.bro-dots button{
  width:26px;height:3px;background:var(--line-d);transition:background .35s;
}
.bro-dots button:hover{background:var(--mut-d)}
.bro-dots button.on{background:var(--gold)}
.bro-actions{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.bro-count{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-d);font-variant-numeric:tabular-nums}
.bro-count b{color:var(--txt-d);font-weight:400}
@media(max-width:700px){
  .bro{grid-template-columns:1fr}
  .bro-nav{display:none}
  .bro-ui{justify-content:center;text-align:center}
  .bro-dots button{width:16px}
}

/* ============================================================
   reel rail — Instagram coverage from the estate
   ============================================================ */
.reels{
  min-width:0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(8px,1.4vw,20px);margin-top:clamp(26px,3.4vw,42px);
  /* deliberately narrower than the cards it holds, so the rail always has somewhere to travel */
  max-width:940px;margin-inline:auto;
}
.reel-track{
  display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  /* grid items refuse to shrink below their content without this, which made the
     track ~1700px wide and dragged the whole page sideways on phones */
  min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reel-track::-webkit-scrollbar{display:none}
.reel-card{
  position:relative;flex:0 0 clamp(280px,30vw,340px);scroll-snap-align:center;
  background:var(--bone);border:1px solid var(--trim);
  aspect-ratio:9/14;overflow:hidden;
}
.reel-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-nav{
  width:clamp(38px,3.4vw,50px);height:clamp(38px,3.4vw,50px);border-radius:50%;
  border:1px solid var(--line-d);display:grid;place-items:center;
  font-size:1.4rem;line-height:1;color:var(--txt-d);flex:none;
  transition:border-color .35s,background .35s;
}
.reel-nav:hover{border-color:var(--gold);background:rgba(198,166,100,.10)}
@media(max-width:700px){
  .reels{grid-template-columns:1fr}
  .reel-nav{display:none}
  .reel-card{flex:0 0 84vw}
}

/* ============================================================
   reel player — pick a clip, watch it here
   ============================================================ */
.hosted-grid button{
  display:block;width:100%;padding:clamp(24px,3vw,38px) clamp(14px,2vw,22px);
  text-align:center;height:100%;cursor:pointer;font:inherit;color:inherit;
}
.rb{position:fixed;inset:0;z-index:980;display:grid;place-items:center;padding:clamp(14px,3vw,40px)}
.rb[hidden]{display:none}
.rb::before{content:'';position:absolute;inset:0;background:rgba(12,10,7,.86);backdrop-filter:blur(6px)}
.rb-in{
  position:relative;z-index:1;background:var(--bone);width:min(1000px,100%);
  max-height:92vh;overflow:auto;border:1px solid var(--trim);
  padding:clamp(18px,2.4vw,30px);
}
.rb-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,22px)}
.rb-t{font-size:clamp(1.2rem,2.4vw,1.9rem);color:var(--txt-d)}
.rb-x{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);flex:none;
  font-size:1.5rem;line-height:1;color:var(--txt-d);transition:border-color .3s,background .3s;
}
.rb-x:hover{border-color:var(--gold);background:rgba(198,166,100,.10)}
.rb-body{display:grid;grid-template-columns:1fr 250px;gap:clamp(16px,2.4vw,28px);align-items:start}
.rb-stage{position:relative;background:#000;aspect-ratio:9/14;min-width:0}
.rb-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rb-list{display:flex;flex-direction:column;gap:8px;min-width:0}
.rb-list button{
  width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line-d);
  font-size:.86rem;color:var(--mut-d);transition:all .3s var(--ease);cursor:pointer;
}
.rb-list button:hover{border-color:var(--gold);color:var(--txt-d)}
.rb-list button.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media(max-width:760px){
  .rb-body{grid-template-columns:1fr}
  .rb-stage{aspect-ratio:9/13}
  .rb-list{flex-direction:row;overflow-x:auto;min-width:0}
  .rb-list button{flex:0 0 auto;white-space:nowrap}
}

/* ---------- estate plan: photographs of the selected place ---------- */
.plan-shots{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:760px;margin:clamp(16px,2.2vw,24px) auto 0;min-height:84px;
}
.plan-shots figure{
  margin:0;width:clamp(96px,11vw,142px);aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line-d);background:var(--bone-2);cursor:pointer;
  opacity:0;transform:translateY(8px);
  animation:shotIn .5s var(--ease) forwards;
}
.plan-shots img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.plan-shots figure:hover img{transform:scale(1.07)}
@keyframes shotIn{to{opacity:1;transform:none}}
@media(max-width:640px){
  .plan-shots{gap:8px;min-height:0}
  .plan-shots figure{width:clamp(80px,26vw,110px)}
}

/* ============================================================
   video tours
   ============================================================ */
.tour-lead{max-width:760px;margin:0 auto clamp(30px,4vw,52px);text-align:center}
.tour-lead .eyebrow{justify-content:center}
.tour-lead h2{margin:14px 0 16px}
.tour-hero{margin:0 0 clamp(26px,3.4vw,44px)}
.tour-hero video{width:100%;display:block;background:#0B0906;aspect-ratio:16/9;object-fit:cover}
.tour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,30px)}
.tour-v video{width:100%;display:block;background:#0B0906;aspect-ratio:9/16;object-fit:cover}
.tour-hero figcaption,.tour-v figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--line-d);margin-top:12px;
}
.tour-hero figcaption b,.tour-v figcaption b{
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--txt-d);
}
.tour-hero figcaption span,.tour-v figcaption span{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut-d);
}
.mt-l{margin-top:clamp(40px,5vw,72px)}

/* ============================================================
   coverage page
   ============================================================ */
.cov-head{max-width:720px;margin:0 auto clamp(26px,3.4vw,44px);text-align:center}
.cov-head .eyebrow{justify-content:center}
.cov-head h2{margin:14px 0 14px}
.cov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.cov-card{position:relative;aspect-ratio:9/13;overflow:hidden;background:var(--bone);border:1px solid var(--trim)}
/* honest stand-in for posts Instagram won't let us embed or screenshot -
   clearly reads "this is an Instagram post" instead of a mismatched photo */
.cov-card-ig{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 6%,#fd5949 42%,#d6249f 62%,#285AEB 92%);
  transition:transform .5s var(--ease);
}
.cov-card-ig:hover{transform:scale(1.015)}
.cov-card-ig svg{width:30%;height:auto;filter:drop-shadow(0 3px 14px rgba(0,0,0,.3))}
.cov-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cov-links{display:grid;gap:12px;align-content:start}
.cov-links-wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cov-link{
  display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;
  border:1px solid var(--trim);padding:10px;transition:border-color .35s,background .35s;
}
.cov-link:hover{border-color:var(--gold);background:rgba(198,166,100,.08)}
.cov-link-img{display:block;width:84px;height:64px;overflow:hidden;background:var(--bone-2)}
.cov-link-img img{width:100%;height:100%;object-fit:cover}
.cov-link-t b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:1rem;color:inherit;line-height:1.2}
.cov-link-t s{text-decoration:none;display:block;margin-top:5px;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut-d)}
.section-dark .cov-link-t s{color:var(--mut-l)}
@media(max-width:560px){.cov-card{aspect-ratio:9/14}}
.cov-card-link{display:block;position:relative}
.cov-card-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cov-card-link::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,4,.05) 40%,rgba(8,6,4,.86) 100%)}
.cov-card-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;text-align:left}
.cov-card-cap b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:1.05rem;color:var(--on-img)}
.cov-card-cap s{text-decoration:none;display:block;margin-top:6px;font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,239,.72)}
.cov-card-link:hover::after{background:linear-gradient(180deg,rgba(8,6,4,.05) 30%,rgba(8,6,4,.92) 100%)}
.quote figcaption .src{
  text-decoration:none;display:block;margin-top:4px;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut-d);
}
.section-dark .quote figcaption .src{color:var(--mut-l)}