/* ============================================================
   TRELLIS 925 — Website Design System
   Garden green + brass on cream/ink · Cormorant + Jost
   Booking-journey components · accessible · responsive
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --alabaster:#F4EEE3; --linen:#FBF8F2; --greige:#D8CDBB; --stone:#B9AC98;
  --espresso:#2A2420; --ink:#14110E;
  --green:#46543F; --green-deep:#2b3327; --sage:#7C8768;
  --brass:#A67C3D; --brass-light:#C6A15B; --bronze:#7C5C2E;
  --bg:var(--linen); --bg-alt:var(--alabaster);
  --text:#2A2420; --text-soft:#655c50;
  --accent:var(--green); --accent-2:var(--sage);
  --rule:rgba(70,84,63,.26); --rule-soft:rgba(42,36,32,.12);
  --display:'Fraunces','Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond','Canela',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --maxw:1240px; --gutter:clamp(20px,5vw,72px);
  --section-y:clamp(64px,9vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.72;
  font-weight:300;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--green);color:var(--linen)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--espresso)}
.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.38em;
  text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:.9em;margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--brass);opacity:.8}
.eyebrow.center{justify-content:center}
/* Fraunces display faces — bold, high-contrast, editorial luxury */
.display{font-family:var(--display);font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1;font-weight:600;letter-spacing:-.015em}
.h-xl{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;font-weight:600;letter-spacing:-.01em}
.h-lg{font-family:var(--display);font-size:clamp(1.75rem,3.1vw,2.6rem);line-height:1.08;font-weight:500;letter-spacing:-.008em}
.h-md{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.5;font-style:italic;color:var(--text-soft)}
p{margin-bottom:var(--s2);max-width:64ch}
.muted{color:var(--text-soft)}
.center{text-align:center}.center p{margin-inline:auto}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y);position:relative}
.bg-alt{background:var(--bg-alt)}
.bg-green{background:linear-gradient(160deg,var(--green),var(--green-deep));color:var(--linen)}
.bg-ink{background:var(--ink);color:var(--linen)}
.bg-green h1,.bg-green h2,.bg-green h3,.bg-ink h1,.bg-ink h2,.bg-ink h3{color:var(--linen)}
.bg-green .muted,.bg-ink .muted{color:rgba(244,238,227,.7)}
.bg-green .lede,.bg-ink .lede{color:rgba(244,238,227,.85)}
.grid{display:grid;gap:clamp(24px,3vw,44px)}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.stack>*+*{margin-top:var(--s3)}
.section-head{max-width:60ch;margin-bottom:clamp(36px,5vw,64px)}
.section-head.center{margin-inline:auto}
.divider{height:1px;background:var(--rule);border:0;margin-block:var(--s5)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--sans);
  font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:1.05em 2.2em;border:1px solid var(--green);background:var(--green);color:var(--linen);
  cursor:pointer;transition:.35s var(--ease);text-align:center}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--linen)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:var(--linen)}
.btn-brass:hover{background:var(--bronze);border-color:var(--bronze)}
.btn-light{background:transparent;border-color:rgba(244,238,227,.7);color:var(--linen)}
.btn-light:hover{background:var(--linen);color:var(--ink)}
.btn-lg{padding:1.2em 2.8em;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-row.center{justify-content:center}
.link-arrow{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:.5em}
.link-arrow::after{content:"→";transition:transform .3s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- Prototype badge / banner ---------- */
.proto-bar{background:var(--ink);color:var(--brass-light);text-align:center;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 16px;position:relative;z-index:120}
.proto-bar strong{color:var(--linen);font-weight:500}
.proto-tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);border:1px solid var(--rule);
  padding:4px 10px;border-radius:2px;background:var(--bg)}
.proto-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(251,248,242,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:12px var(--gutter)}
.brandmark{display:flex;align-items:center;gap:.7em}
.brandmark img{height:52px;width:auto}
.brandmark .bm-text{font-family:var(--serif);font-size:1.15rem;letter-spacing:.06em;color:var(--espresso);line-height:1}
.brandmark .bm-text small{display:block;font-family:var(--sans);font-size:.52rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--text-soft);margin-top:3px}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.nav a{font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--espresso);position:relative;padding:6px 0;white-space:nowrap}
.nav a:not(.btn):hover{color:var(--green)}
.nav a[aria-current="page"]{color:var(--green)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--green)}
.nav .btn{color:var(--linen);padding:.7em 1.4em}
.nav .btn:hover{color:var(--linen)}
/* dropdown */
.has-drop{position:relative}
.has-drop>button{font-family:var(--sans);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--espresso);background:none;border:0;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:.4em}
.has-drop>button::after{content:"⌄";font-size:.9em;opacity:.7}
.drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--linen);border:1px solid var(--rule);min-width:210px;padding:8px;
  opacity:0;visibility:hidden;transition:.28s var(--ease);box-shadow:0 24px 50px -28px rgba(20,17,14,.5);z-index:110}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%)}
.drop a{display:block;padding:10px 14px;font-size:.72rem;letter-spacing:.1em}
.drop a:hover{background:var(--bg-alt);color:var(--green)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:130}
.nav-toggle span{width:26px;height:1.6px;background:var(--espresso);transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-end;color:var(--linen);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,.28),rgba(20,17,14,.35) 45%,rgba(20,17,14,.82))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,96px);padding-top:120px}
.hero .eyebrow{color:var(--brass-light)}.hero .eyebrow::before{background:var(--brass-light)}
.hero h1{color:var(--linen);max-width:18ch}
.hero .lede{color:rgba(244,238,227,.9);font-style:normal;max-width:52ch;margin-top:var(--s3)}
.hero .btn-row{margin-top:var(--s5)}
/* page hero — luxury photo + logo header (interior pages) */
.page-hero{position:relative;color:var(--linen);overflow:hidden;text-align:center;
  min-height:clamp(400px,54vh,560px);display:flex;align-items:center;
  padding:clamp(130px,16vw,180px) 0 clamp(56px,8vw,88px)}
.page-hero .hero-media{position:absolute;inset:0;z-index:0}
.page-hero .hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero .hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,.5),rgba(20,17,14,.48) 45%,rgba(20,17,14,.78)),
             radial-gradient(120% 80% at 50% 26%,transparent,rgba(20,17,14,.4))}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .hero-logo{height:clamp(66px,8.5vw,98px);width:auto;margin:0 auto var(--s3);display:block;
  filter:brightness(0) invert(1);opacity:.97}
.page-hero .crumb{font-family:var(--sans);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-light);margin-bottom:var(--s2)}
.page-hero h1{color:var(--linen);max-width:22ch;margin-inline:auto}
.page-hero .lede{margin-inline:auto;color:rgba(244,238,227,.9)}
/* plain = refined dark treatment for pages without a lead photo (legal) */
.page-hero.plain{background:radial-gradient(120% 100% at 50% 0%,#20241d,var(--ink));min-height:clamp(360px,44vh,460px)}
.page-hero.plain::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(198,161,91,.08) 0 1px,transparent 1px 42px)}

/* ---------- Media blocks ---------- */
.media{position:relative;overflow:hidden;background:var(--greige)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.tall{aspect-ratio:4/5}.media.wide{aspect-ratio:16/11}.media.square{aspect-ratio:1/1}
.figure figcaption{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);padding-top:12px;display:flex;gap:.6em;align-items:center}
.figure figcaption::before{content:"";width:18px;height:1px;background:var(--brass)}
.feature-row{align-items:center}
.feature-row+.feature-row{margin-top:clamp(48px,7vw,110px)}
.feature-row.reverse .media,.feature-row.reverse .figure{order:2}

/* ---------- Cards / amenities ---------- */
.card{background:var(--linen);border:1px solid var(--rule);height:100%;display:flex;flex-direction:column;transition:.4s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 56px -30px rgba(20,17,14,.4)}
.card .media{aspect-ratio:16/11}
.card-body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-body h3{font-size:1.45rem}
.card-body .link-arrow{margin-top:auto;padding-top:var(--s2)}
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.amenity{background:var(--bg);padding:clamp(20px,2.4vw,30px)}
.amenity h4{font-family:var(--serif);font-size:1.2rem;margin-bottom:.3rem}
.amenity p{font-size:.86rem;color:var(--text-soft);margin:0}
.icon{width:34px;height:34px;color:var(--green);margin-bottom:var(--s2)}
.icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}

/* ---------- Packages ---------- */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;align-items:stretch}
.pkg{background:var(--linen);border:1px solid var(--rule);padding:30px 26px;display:flex;flex-direction:column;position:relative}
.pkg.featured{border:1.5px solid var(--brass);background:#fff}
.pkg .ribbon{position:absolute;top:-12px;left:24px;background:var(--green);color:var(--linen);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px}
.pkg .tier{font-family:var(--serif);font-style:italic;color:var(--stone);font-size:.9rem;margin-bottom:.3rem}
.pkg h3{font-size:1.4rem;margin-bottom:.5rem}
.pkg .price{font-family:var(--serif);font-size:1.9rem;color:var(--green);line-height:1}
.pkg .price small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin-top:4px}
.pkg .best-for{font-style:italic;color:var(--bronze);font-size:.82rem;margin:12px 0}
.pkg ul{margin:12px 0 20px;flex:1}
.pkg ul li{font-size:.86rem;padding:7px 0 7px 18px;position:relative;border-top:1px solid var(--rule-soft)}
.pkg ul li:first-child{border-top:0}
.pkg ul li::before{content:"—";position:absolute;left:0;color:var(--brass)}
.pkg .btn{width:100%}

/* ---------- Add-on selector ---------- */
.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.addon{background:var(--linen);border:1px solid var(--rule);padding:14px 16px;cursor:pointer;user-select:none;transition:.15s;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.addon:hover{border-color:var(--brass)}
.addon[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--linen)}
.addon .an{font-weight:500;font-size:.9rem;color:var(--espresso)}
.addon .ap{font-size:.74rem;color:var(--bronze);white-space:nowrap}
.addon[aria-pressed="true"] .an,.addon[aria-pressed="true"] .ap{color:var(--linen)}
.addon .chk{width:16px;height:16px;border:1.5px solid var(--stone);border-radius:50%;flex:none;margin-top:2px}
.addon[aria-pressed="true"] .chk{border-color:var(--linen);background:var(--linen)}
.proposal-bar{position:sticky;bottom:12px;background:var(--ink);color:var(--linen);margin-top:28px;
  padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.proposal-bar .label{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.proposal-bar .total{font-family:var(--serif);font-size:1.7rem;color:var(--brass-light)}
.proposal-bar .note{font-size:.72rem;color:var(--stone);max-width:300px}

/* ---------- Spec / info table ---------- */
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);font-size:.92rem;vertical-align:top}
.spec th{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);width:34%;font-weight:500}
.spec td{color:var(--espresso)}
.req{color:var(--brass);font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;background:rgba(166,124,61,.1);padding:2px 8px;border:1px dashed var(--brass);white-space:nowrap}

/* ---------- Steps / stepper ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:st;border:1px solid var(--rule)}
.step{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--rule);position:relative;background:var(--bg)}
.step:last-child{border-right:0}
.step .sn{counter-increment:st;font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.1rem;margin-bottom:8px}
.step .sn::before{content:"Step " counter(st)}
.step h4{font-family:var(--serif);font-size:1.15rem;margin-bottom:6px;line-height:1.2}
.step p{font-size:.82rem;color:var(--text-soft);margin:0}

/* ---------- Booking summary ---------- */
.booking-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.summary{background:var(--linen);border:1px solid var(--rule);padding:clamp(24px,3vw,36px);position:sticky;top:100px}
.summary h3{font-size:1.4rem;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:12px 16px;font-size:.92rem}
.summary dt{color:var(--text-soft)}
.summary dd{text-align:right;color:var(--espresso);font-weight:400}
.summary .edit{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:.82rem}
.summary .total-row{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--rule);font-family:var(--serif);font-size:1.3rem;color:var(--green)}

/* ---------- Checkboxes / consent ---------- */
.consent{margin:var(--s4) 0}
.consent label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:.9rem;color:var(--espresso);cursor:pointer;border-bottom:1px solid var(--rule-soft)}
.consent input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--green);cursor:pointer}

/* ---------- Forms ---------- */
.form-card{background:var(--linen);border:1px solid var(--rule);padding:clamp(26px,3.4vw,44px)}
.bg-green .form-card,.bg-ink .form-card{background:rgba(251,248,242,.06);border-color:rgba(198,161,91,.35)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.form-row.full{grid-template-columns:1fr}
.field label{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-bottom:7px}
.bg-green .field label,.bg-ink .field label{color:var(--stone)}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:.95rem;font-weight:300;
  color:var(--espresso);background:#fff;border:1px solid var(--rule);padding:.85em 1em;transition:.2s;border-radius:2px}
.bg-green .field input,.bg-green .field select,.bg-green .field textarea,
.bg-ink .field input,.bg-ink .field select,.bg-ink .field textarea{background:rgba(251,248,242,.08);color:var(--linen);border-color:rgba(184,172,152,.4)}
.field input::placeholder,.field textarea::placeholder{color:var(--stone)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(166,124,61,.18)}
.field textarea{resize:vertical;min-height:120px}
.form-note{margin-top:var(--s2);font-size:.86rem;padding:14px 16px;border:1px solid var(--rule);background:var(--bg-alt);color:var(--espresso);display:none}
.form-note.show{display:block}
.form-note .pfx{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:4px}

/* ---------- Prototype calendar ---------- */
.calshell{background:var(--linen);border:1px solid var(--rule);padding:clamp(20px,2.6vw,32px)}
.calbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.calbar h3{font-size:1.4rem}
.calbar button{background:none;border:1px solid var(--rule);width:38px;height:38px;cursor:pointer;color:var(--green);font-size:1rem}
.calbar button:hover{background:var(--green);color:var(--linen);border-color:var(--green)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calgrid .dow{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);text-align:center;padding:6px 0}
.cal-day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-soft);
  font-size:.9rem;cursor:pointer;background:#fff;transition:.15s;color:var(--espresso)}
.cal-day:hover{border-color:var(--green)}
.cal-day.empty{border:0;background:transparent;cursor:default}
.cal-day.past{color:var(--stone);background:var(--bg-alt);cursor:default}
.cal-day[aria-pressed="true"]{background:var(--green);color:var(--linen);border-color:var(--green)}
.cal-legend{font-size:.72rem;color:var(--text-soft);margin-top:var(--s2);font-style:italic}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--rule);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.2rem;color:var(--espresso);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--brass);font-size:1.4rem}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:14px 0 0;color:var(--text-soft);font-size:.95rem}

/* ---------- Legal prose ---------- */
.prose{max-width:820px;margin-inline:auto}
.prose h2{font-size:1.5rem;margin:var(--s5) 0 var(--s2)}
.prose h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin:var(--s4) 0 var(--s1)}
.prose p,.prose li{color:var(--text-soft);font-size:.96rem}
.prose ul{margin:0 0 var(--s2) 1.2em;list-style:disc}
.prose li{margin-bottom:6px}
.prose .updated{font-size:.8rem;color:var(--stone);font-style:italic}

/* ---------- Modal (prototype notices) ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,17,14,.62);backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-card{background:var(--linen);max-width:520px;width:100%;padding:clamp(28px,4vw,44px);border-top:3px solid var(--brass);position:relative}
.modal-card .eyebrow{color:var(--brass)}
.modal-card h3{font-size:1.6rem;margin-bottom:var(--s2)}
.modal-card p{color:var(--text-soft);margin-bottom:var(--s3)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--text-soft);line-height:1}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band .lede{margin:var(--s3) auto var(--s5)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(244,238,227,.72);padding-block:clamp(56px,7vw,88px) 40px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px);padding-bottom:var(--s5);border-bottom:1px solid rgba(244,238,227,.14)}
/* V7.2: logo aspect — the brandmark is a square PNG and now carries width/height
   attributes for CLS. Without width:auto those attributes stretch it to 800:800
   inside a height-constrained box. */
.footer-brand img{height:56px;width:auto;margin-bottom:var(--s3)}
.footer-brand p{font-size:.9rem;max-width:32ch}
.site-footer h4{color:var(--linen);font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:var(--s3)}
.footer-col a{display:block;font-size:.9rem;padding:.32rem 0;color:rgba(244,238,227,.72)}
.footer-col a:hover{color:var(--brass-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:var(--s4);font-size:.74rem;color:rgba(244,238,227,.5)}
.footer-social{display:flex;gap:16px}
.footer-social a{color:rgba(244,238,227,.6)}.footer-social a:hover{color:var(--brass-light)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{animation:none!important}html{scroll-behavior:auto}}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .nav{gap:14px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .amenities{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .booking-grid{grid-template-columns:1fr}
  .summary{position:static}
}
@media(max-width:860px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:6px;background:var(--linen);padding:96px 32px 40px;transform:translateX(100%);
    transition:transform .4s var(--ease);overflow-y:auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
  .nav.open{transform:none}
  .nav a,.has-drop>button{font-size:.9rem;padding:10px 0;width:100%}
  .nav .btn{width:100%;margin-top:var(--s2)}
  .has-drop{width:100%}
  .drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;border-left:2px solid var(--rule);
    padding:0 0 0 14px;min-width:0;margin:2px 0 8px}
  .has-drop>button::after{display:none}
  .nav-toggle{display:flex}
  .split,.g-2,.g-3,.feature-row{grid-template-columns:1fr}
  .feature-row.reverse .media,.feature-row.reverse .figure{order:0}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .g-3,.g-4,.amenities,.steps{grid-template-columns:1fr}
  .btn{width:100%}.btn-row{width:100%}
  .footer-top{grid-template-columns:1fr}
  .summary dl{font-size:.85rem}
}

/* ---------- The 925 Family (ecosystem cards) ---------- */
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.fam-card{position:relative;overflow:hidden;min-height:clamp(300px,34vw,380px);display:flex;align-items:flex-end;
  color:var(--linen);border:1px solid var(--rule);transition:.5s var(--ease)}
.fam-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,14,.12),rgba(20,17,14,.82));transition:.5s var(--ease)}
.fam-card:hover::before{background:linear-gradient(180deg,rgba(20,17,14,.04),rgba(20,17,14,.72))}
.fam-card:hover{transform:translateY(-6px)}
.fam-card .lattice{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 32px)}
.fam-card .fc-in{position:relative;z-index:2;padding:clamp(24px,3vw,38px);width:100%}
.fam-card .fc-k{font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-light);display:block;margin-bottom:10px}
.fam-card h3{font-family:var(--display);color:var(--linen);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600}
.fam-card p{color:rgba(244,238,227,.82);font-size:.9rem;margin:8px 0 14px}
.fam-card .lk{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--linen);display:inline-flex;gap:.5em}
.fam-card .lk::after{content:"→"}
.fam-parent{background:linear-gradient(160deg,#3a2f1c,#14110E)}
.fam-catering{background:linear-gradient(160deg,#3a3020,#17140F)}
.fam-reserve{background:linear-gradient(160deg,#5A2A2C,#3E1F20)}

/* ---------- Story / editorial ---------- */
.story-quote{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.22;letter-spacing:-.01em;color:var(--espresso);max-width:22ch}
.bg-ink .story-quote,.bg-green .story-quote{color:var(--linen)}
.story-quote .em{color:var(--brass);font-style:italic}
.dropcap::first-letter{font-family:var(--display);float:left;font-size:4.2em;line-height:.72;font-weight:600;color:var(--green);padding:.05em .12em 0 0}
.sec-count{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.6em;margin-bottom:var(--s2)}
.sec-count::after{content:"";width:46px;height:1px;background:var(--rule)}
@media(max-width:860px){.family{grid-template-columns:1fr}}
.fam-links a{color:var(--brass-light)}
.fam-links a:hover{color:var(--linen)}
.bg-ink .dropcap::first-letter,.bg-green .dropcap::first-letter{color:var(--brass-light)}
.footer-social{display:flex;gap:14px;margin-top:var(--s3)}
.soc{width:40px;height:40px;border:1px solid rgba(244,238,227,.28);border-radius:50%;display:grid;place-items:center;
  color:rgba(244,238,227,.78);cursor:pointer;transition:.3s var(--ease);text-decoration:none}
.soc:hover{color:var(--ink);background:var(--brass-light);border-color:var(--brass-light)}
.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.soc[aria-disabled="true"]{opacity:.55}
.footer-bottom .footer-tag{font-family:var(--serif);font-style:italic;color:var(--brass-light);font-size:.98rem;letter-spacing:.02em}

/* ---------- Closing photo CTA (invitation) ---------- */
.cta-photo{position:relative;overflow:hidden;color:var(--linen);text-align:center;padding-block:clamp(84px,12vw,164px)}
.cta-photo .hero-media{position:absolute;inset:0;z-index:0}
.cta-photo .hero-media img{width:100%;height:100%;object-fit:cover}
.cta-photo .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.58),rgba(20,17,14,.74))}
.cta-photo .wrap{position:relative;z-index:2}
.cta-photo h2{color:var(--linen);max-width:20ch;margin-inline:auto}
.cta-photo .lede{color:rgba(244,238,227,.92);margin:var(--s3) auto var(--s5);max-width:52ch;font-style:italic}
.cta-photo .eyebrow{color:var(--brass-light)}
.cta-photo .eyebrow::before{background:var(--brass-light)}

/* ---------- Luxury polish: more air, editorial proportions ---------- */
:root{--section-y:clamp(78px,10.5vw,158px)}
.section-head{margin-bottom:clamp(44px,6vw,78px)}
.feature-row+.feature-row{margin-top:clamp(56px,8vw,124px)}
.lede{line-height:1.55}
.media.tall{aspect-ratio:3/4}

/* ============ FINAL PASS: elegant type, hero stats, reviews ============ */
/* Elegant, timeless display face (Cormorant) — softer & more luxurious */
:root{--display:'Cormorant Garamond','Fraunces',Georgia,serif}
.display{font-weight:600;letter-spacing:.002em;line-height:1.02}
.h-xl{font-weight:600;letter-spacing:.002em}
.h-lg{font-weight:600}
.story-quote{font-weight:500}

/* Hero stat bar — real venue facts, overlaid at the foot of the hero */
.hero{padding-bottom:56px}
.hero-stats{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(0deg,rgba(20,17,14,.94),rgba(20,17,14,.5));border-top:1px solid rgba(198,161,91,.32)}
.hero-stats .wrap{display:flex;flex-wrap:wrap;justify-content:center;padding-block:15px}
.hero-stats .st{flex:1 1 auto;min-width:170px;text-align:center;padding:6px 24px;position:relative;
  color:rgba(244,238,227,.9);font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.hero-stats .st+.st::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:1px;background:rgba(244,238,227,.2)}
.hero-stats .st b{color:var(--brass-light);font-weight:500}
@media(max-width:760px){.hero-stats .st+.st::before{display:none}.hero-stats .st{min-width:44%;font-size:.62rem}}

/* Reviews */
.rating-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-bottom:var(--s5)}
.rating-line .big{font-family:var(--display);font-weight:600;font-size:2.4rem;color:var(--brass);line-height:1}
.rating-line .stars{color:var(--brass);letter-spacing:.18em}
.rating-line span{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.rev{background:var(--linen);border:1px solid var(--rule);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;text-align:left}
.rev .stars{color:var(--brass);letter-spacing:.2em;font-size:.85rem;margin-bottom:var(--s2)}
.rev p{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--espresso);line-height:1.5;margin-bottom:var(--s3)}
.rev cite{margin-top:auto;font-family:var(--sans);font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.rev cite b{color:var(--espresso);font-weight:500}
@media(max-width:760px){.reviews{grid-template-columns:1fr}}

/* =========================================================================
   PRODUCTION ADDITIONS (2026 launch build)
   ========================================================================= */

/* --- Approval-pending badge (used on corporate packages + pricing add-ons awaiting sign-off) --- */
.approval-badge {
  display: inline-block;
  margin: .5rem 0 .8rem;
  padding: 4px 10px;
  font-family: var(--font-sans, "Jost", "Helvetica Neue", sans-serif);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass, #A67C3D);
  background: rgba(166,124,61,.09);
  border: 1px solid rgba(166,124,61,.35);
  border-radius: 2px;
}

/* --- Inline field errors (inquiry forms) --- */
.field-err {
  display: block;
  margin-top: 4px;
  color: #a62626;
  font-size: .78rem;
  font-family: var(--font-sans, "Jost", "Helvetica Neue", sans-serif);
}
[aria-invalid="true"] {
  border-color: #a62626 !important;
  outline-color: #a62626;
}

/* --- Form notes (success / error / test-mode) --- */
.form-note {
  display: none;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 2px;
  border-left: 3px solid var(--brass, #A67C3D);
  background: rgba(166,124,61,.08);
  color: var(--espresso, #2A2420);
  font-size: .92rem;
}
.form-note.show    { display: block; }
.form-note.success { border-left-color: #46543F; background: rgba(70,84,63,.10); }
.form-note.error   { border-left-color: #a62626; background: rgba(166,38,38,.08); }
.form-note.test    { border-left-color: #A67C3D; background: rgba(166,124,61,.10); }

/* --- Tick list (used on corporate service list, decor policy) --- */
.tick-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.tick-list li {
  position: relative; padding: .35rem 0 .35rem 1.4rem;
  color: var(--espresso, #2A2420);
  border-bottom: 1px solid rgba(20,17,14,.06);
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 1.1em;
  width: .9rem; height: 1px; background: var(--brass, #A67C3D);
}

/* --- Mini card (event-type strip on corporate page) --- */
.card.mini .card-body { padding: 1rem 1.1rem; }
.card.mini h3 { font-size: 1.05rem; margin: 0; letter-spacing: .01em; }

/* --- Address block (contact page + FAQ) --- */
.address-block {
  display: grid; gap: .5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(20,17,14,.10);
  border-left: 3px solid var(--brass, #A67C3D);
  background: rgba(251,248,242,.6);
  border-radius: 2px;
  font-family: var(--font-sans, "Jost", "Helvetica Neue", sans-serif);
}
.address-block strong { font-family: var(--font-serif, "Cormorant Garamond", "Georgia", serif); font-size: 1.15rem; letter-spacing: .01em; }
.address-block a { color: var(--brass, #A67C3D); text-decoration: none; }
.address-block a:hover { text-decoration: underline; }

/* --- Map embed placeholder (contact page) --- */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(70,84,63,.08), rgba(70,84,63,.03));
  border: 1px solid rgba(20,17,14,.08);
  border-radius: 2px;
  overflow: hidden;
}
.map-embed iframe, .map-embed a.map-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--espresso, #2A2420); text-decoration: none;
  font-family: var(--font-sans, "Jost", sans-serif); font-size: .95rem;
}
.map-embed a.map-fallback:hover { background: rgba(166,124,61,.06); }

/* --- Corporate-specific accents --- */
.pkg[data-approval="pending"]::after { content: ""; }

/* --- Success / cancelled pages --- */
.center-hero {
  min-height: 60vh; display: grid; place-items: center; text-align: center;
  padding: 5rem 1.5rem;
}

/* --- Stripe status badge (top-of-page test-mode strip) --- */
.stripe-status {
  display: inline-block; padding: 3px 10px; margin-right: .4rem;
  font-family: var(--font-sans, "Jost", sans-serif);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px;
}
.stripe-status.test { background: rgba(166,124,61,.12); color: var(--brass, #A67C3D); border: 1px solid rgba(166,124,61,.35); }
.stripe-status.live { background: rgba(70,84,63,.10);  color: var(--green, #46543F); border: 1px solid rgba(70,84,63,.35); }

/* --- Responsive polish — no horizontal scroll at any of the required widths --- */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
.wrap, .wrap-narrow { max-width: 100%; }
@media (max-width: 480px) {
  .btn, .btn-lg { width: 100%; text-align: center; }
  .btn-row { gap: .6rem; }
  .btn-row .btn + .btn { margin-left: 0; }
}
@media (max-width: 380px) {
  .h-xl { font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.15; }
  .display { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }
}

/* --- Ensure focus is visible everywhere for keyboard users --- */
a:focus-visible, button:focus-visible, .cal-day:focus-visible, .addon:focus-visible {
  outline: 2px solid var(--brass, #A67C3D);
  outline-offset: 3px;
}

/* --- Corporate Enhancements: bolder, more prominent ---------------------- */
.corporate-enhance { padding: 6rem 0 !important; }
.enhance-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 3rem;
}
.enhance-card {
  position: relative; overflow: hidden;
  padding: 2rem 1.75rem 1.75rem;
  background: linear-gradient(180deg, rgba(198,161,91,.06), rgba(198,161,91,.02));
  border: 1px solid rgba(198,161,91,.28);
  border-radius: 2px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.enhance-card:hover {
  transform: translateY(-2px);
  border-color: rgba(198,161,91,.5);
  background: linear-gradient(180deg, rgba(198,161,91,.10), rgba(198,161,91,.04));
}
.enhance-num {
  display: block;
  font-family: var(--font-sans, "Jost", sans-serif);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass-light, #C6A15B);
  margin-bottom: .6rem;
}
.enhance-card h3 {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 1.6rem; line-height: 1.15; margin: 0 0 .8rem;
  color: var(--linen, #FBF8F2); letter-spacing: .005em;
}
.enhance-card p {
  color: rgba(244,238,227,.82); font-size: .96rem; line-height: 1.55; margin: 0;
}
.enhance-holiday {
  background: linear-gradient(180deg, rgba(198,161,91,.14), rgba(198,161,91,.04));
  border-color: rgba(198,161,91,.55);
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .enhance-holiday { grid-column: span 2; }
}
@media (max-width: 500px) {
  .enhance-card { padding: 1.6rem 1.4rem 1.4rem; }
  .enhance-card h3 { font-size: 1.4rem; }
}

/* =========================================================================
   V5 ADDITIONS — Contact form layout + 7×2 add-on grid
   ========================================================================= */

/* --- Two-column contact shell (form + details/aside) ---------------------- */
.contact-shell {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-shell { grid-template-columns: 1fr; gap: 2.4rem; }
}

.contact-form-card,
.contact-details-card {
  background: var(--linen, #FBF8F2);
  border: 1px solid rgba(20,17,14,.06);
  border-radius: 2px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.contact-form-card { border-left: 3px solid var(--brass, #A67C3D); }

/* --- Form field grid (2-column desktop → 1-column mobile) ---------------- */
.tr-form-grid {
  display: grid;
  gap: 1.1rem 1.25rem;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 1.4rem;
}
.tr-form-grid > label {
  display: flex; flex-direction: column;
  gap: .35rem;
  font-family: var(--font-sans, "Jost", "Helvetica Neue", sans-serif);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--espresso, #2A2420);
  min-width: 0;
}
.tr-form-grid > label.col-6  { grid-column: span 6; }
.tr-form-grid > label.col-12 { grid-column: span 12; }
@media (max-width: 720px) {
  .tr-form-grid > label.col-6 { grid-column: span 12; }
}
.tr-form input,
.tr-form select,
.tr-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-serif, "Cormorant Garamond", "Georgia", serif);
  font-size: 1.05rem;
  color: var(--ink, #14110E);
  background: #fff;
  border: 1px solid rgba(20,17,14,.14);
  border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
  min-width: 0;
  box-sizing: border-box;
}
.tr-form input:focus,
.tr-form select:focus,
.tr-form textarea:focus {
  outline: none;
  border-color: var(--brass, #A67C3D);
  box-shadow: 0 0 0 3px rgba(166,124,61,.14);
}
.tr-form textarea { min-height: 130px; resize: vertical; font-family: var(--font-sans, "Jost", sans-serif); font-size: .98rem; }
.req-star { color: var(--brass, #A67C3D); margin-left: .15rem; }
.tr-form-submit { margin-top: 1.6rem; text-align: center; }
.tr-form-submit .btn { min-width: 240px; }
@media (max-width: 500px) {
  .tr-form-submit .btn { width: 100%; }
}

/* --- Pricing add-on grid — 7 × 2 on large desktop, responsive ----------- */
#addons .addon-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1280px) { #addons .addon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #addons .addon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #addons .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { #addons .addon-grid { grid-template-columns: 1fr; } }
#addons .addon {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(20,17,14,.10);
  border-radius: 2px;
  min-height: 130px;
}
#addons .addon .an {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 1.1rem; line-height: 1.15; letter-spacing: .01em;
  color: var(--ink, #14110E); margin-bottom: .35rem;
}
#addons .addon .ap {
  font-family: var(--font-sans, "Jost", sans-serif);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass, #A67C3D); margin-top: auto;
}
#addons .addon[aria-pressed="true"] {
  background: rgba(166,124,61,.09);
  border-color: var(--brass, #A67C3D);
}


/* =========================================================================
   V5.1 — Photos fit inside their containers (no cutoff)
   For gallery grids and image strips throughout the site.
   Heroes keep full-bleed `cover` behavior (intentional).
   ========================================================================= */

/* Gallery grids (Gallery page, homepage teaser, Corporate strip) */
.gal-grid .media,
.gal-grid .media picture,
section .grid.g-3 .media,
section .grid.g-3 .media picture,
section .grid.g-4 .media,
section .grid.g-4 .media picture {
  background: #F4EEE3;  /* alabaster — soft brand cushion when photo aspect < container */
}

.gal-grid .media img,
.gal-grid .media picture img,
section .grid.g-3 .media img,
section .grid.g-3 .media picture img,
section .grid.g-4 .media img,
section .grid.g-4 .media picture img {
  object-fit: contain !important;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Corporate + gallery item cards: give the box a friendly landscape ratio */
.gal-grid .media,
section .grid.g-3 .media,
section .grid.g-4 .media {
  aspect-ratio: 4 / 3;   /* accommodates most landscape photos without letterbox */
  height: auto !important;
  min-height: 0 !important;
}
.gal-grid .media.square,
section .grid.g-3 .media.square,
section .grid.g-4 .media.square {
  aspect-ratio: 1 / 1;
}
.gal-grid .media.tall,
section .grid.g-3 .media.tall,
section .grid.g-4 .media.tall {
  aspect-ratio: 3 / 4;   /* portrait ratio for tall containers */
}

/* Event-type mini cards on Corporate + homepage cards keep the landscape ratio */
.card.mini .media,
.card .media {
  background: #F4EEE3;
  aspect-ratio: 4 / 3;
  height: auto !important;
  overflow: hidden;
}
.card.mini .media img,
.card .media img,
.card.mini .media picture img,
.card .media picture img {
  object-fit: contain !important;
  object-position: center;
  width: 100%;
  height: 100%;
}


/* =========================================================================
   V5.3 — Bobby-pass fixes
   ========================================================================= */

/* Pricing add-on cards: prevent overflow, elegant layout, allow 3+ rows */
#addons .addon-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
}
#addons .addon {
  min-height: 150px;
  padding: 1.15rem 1.2rem 1.1rem;
  overflow: hidden;
}
#addons .addon .an {
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: .005em;
  word-wrap: break-word;
}
#addons .addon .ap {
  font-size: .72rem;
  letter-spacing: .1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Corporate page hero — ensure it fills the box (no letterbox for hero) */
.page-hero .hero-media picture,
.page-hero .hero-media picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}
.page-hero .hero-media {
  overflow: hidden;
}

/* FAQ page section headers — consistent vertical rhythm */
#contact-form + section .h-lg,
section > .wrap-narrow > .h-lg,
.wrap-narrow > h2.h-lg {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem;
  letter-spacing: .01em;
}

/* =========================================================================
   V6 — TRUE-TO-SOURCE IMAGE FRAMING
   Source photography is exactly two ratios: 3:2 landscape and 2:3 portrait.
   Containers are set to match, so `cover` fills completely with no visible
   crop and no letterbox bars. This supersedes the earlier `contain` rules.
   ========================================================================= */

/* Landscape frames — matches the 1.50 source ratio exactly */
.card .media,
.card.mini .media,
section .grid.g-3 .media,
section .grid.g-4 .media,
.media.wide {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  background: none !important;
}

/* V7.2: a portrait frame wins wherever it appears. The landscape rule above uses
   !important, so a portrait photo inside a card or grid was still being forced to
   3/2 and losing 56% of the image. */
.card .media.tall,
.card.mini .media.tall,
section .grid.g-3 .media.tall,
section .grid.g-4 .media.tall,
.grid .media.tall,
.media.tall {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  background: none !important;
}

/* Portrait frames — matches the 0.667 source ratio exactly */
.split .media.tall,
.feature-row .media.tall {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  overflow: hidden;
  background: none !important;
}

/* Fill the frame completely: no bars, no gaps, no cropped subjects */
.card .media img,
.card .media picture img,
.card.mini .media img,
.card.mini .media picture img,
section .grid.g-3 .media img,
section .grid.g-3 .media picture img,
section .grid.g-4 .media img,
section .grid.g-4 .media picture img,
.media.wide img,
.media.wide picture img,
.split .media.tall img,
.split .media.tall picture img,
.feature-row .media.tall img,
.feature-row .media.tall picture img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.media picture { display: block; width: 100%; height: 100%; }

/* Page heroes fill edge to edge */
.page-hero .hero-media,
.hero .hero-media { overflow: hidden; }
.page-hero .hero-media picture,
.page-hero .hero-media picture img,
.hero .hero-media picture,
.hero .hero-media picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* -------------------------------------------------------------------------
   GALLERY — masonry columns. Every photo keeps its own proportions, so
   nothing is cropped and no gaps appear between rows.
   ------------------------------------------------------------------------- */
.gal-masonry {
  column-count: 3;
  column-gap: 1rem;
  margin-top: 2.5rem;
}
.gal-masonry .gal-item {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1rem;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: none;
}
.gal-masonry .gal-item picture { display: block; }
.gal-masonry .gal-item img {
  width: 100%;
  height: auto;          /* natural ratio — zero crop, zero blank space */
  display: block;
  object-fit: fill;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.gal-masonry .gal-item:hover img { transform: scale(1.03); }
@media (max-width: 1100px) { .gal-masonry { column-count: 2; } }
@media (max-width: 700px)  { .gal-masonry { column-count: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gal-masonry .gal-item img { transition: none; }
  .gal-masonry .gal-item:hover img { transform: none; }
}

/* -------------------------------------------------------------------------
   ADD-ON CARDS — 15 cards as 3 balanced rows of 5. Equal heights, text
   wraps inside the card, nothing clipped, no empty trailing slots.
   ------------------------------------------------------------------------- */
#addons .addon-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch;
}
#addons .addon {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: .5rem;
  min-height: 0;
  height: 100%;
  padding: 1.25rem 1.15rem;
  background: #fff;
  border: 1px solid rgba(20,17,14,.10);
  border-radius: 2px;
  overflow: visible;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#addons .addon:hover { border-color: var(--brass, #A67C3D); transform: translateY(-2px); }
#addons .addon > div { display: flex; flex-direction: column; gap: .45rem; height: 100%; }
#addons .addon .an {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.12rem;
  line-height: 1.22;
  letter-spacing: .005em;
  color: var(--ink, #14110E);
  overflow-wrap: anywhere;
  hyphens: none;
}
#addons .addon .ap {
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--font-sans, "Jost", sans-serif);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass, #A67C3D);
  white-space: normal;
  overflow-wrap: anywhere;
}
#addons .addon .chk {
  position: absolute; top: .7rem; right: .7rem;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(20,17,14,.20);
}
#addons .addon { position: relative; }
#addons .addon[aria-pressed="true"] {
  background: rgba(166,124,61,.08);
  border-color: var(--brass, #A67C3D);
}
#addons .addon[aria-pressed="true"] .chk {
  background: var(--brass, #A67C3D);
  border-color: var(--brass, #A67C3D);
  box-shadow: inset 0 0 0 2px #fff;
}
@media (max-width: 1400px) { #addons .addon-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; } }
@media (max-width: 1150px) { #addons .addon-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 900px)  { #addons .addon-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 620px)  { #addons .addon-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 400px)  { #addons .addon-grid { grid-template-columns: 1fr !important; } }

/* FAQ — headings and questions share one measure so they can never
   fall out of alignment with each other. */
.wrap-narrow > h2.h-lg,
.wrap-narrow > .address-block { max-width: 820px; margin-inline: auto; }
.faq details:first-child { padding-top: 0; }


/* V7: contact page hero — logo removed, hierarchy rebalanced (§6) */
/* V7.1: contact hero — the entrance photo carries the Trellis logo etched on the glass at
   roughly 58-72% of frame height. The copy is anchored to the top of the hero so it never
   lands on it, on any screen size, with extra bottom padding to keep the logo in clear space. */
.page-hero:has(.contact-hero-copy){align-items:flex-start;
  padding-block:clamp(72px,8vw,88px) clamp(200px,26vw,300px)}
.page-hero .wrap.contact-hero-copy{padding-block:0}
.page-hero .wrap.contact-hero-copy .lede{max-width:64ch;font-size:clamp(.95rem,1.5vw,1.08rem)}
@media(max-width:700px){
  .page-hero:has(.contact-hero-copy){padding-block:70px 230px}
  .page-hero .wrap.contact-hero-copy h1{font-size:clamp(2rem,9vw,2.6rem)}
}
.page-hero .wrap.contact-hero-copy .crumb{margin-bottom:var(--s3)}
.page-hero .wrap.contact-hero-copy h1{margin-bottom:var(--s3);max-width:18ch}
.page-hero .wrap.contact-hero-copy .lede{max-width:46ch}


/* V7: addon buttons — uniform height, 44px tap target, native button reset */
#addons .addon{min-height:64px;align-items:center;text-align:left;font:inherit;width:100%;border-radius:0}
#addons .addon .an{line-height:1.3}


/* V7.3: intro figure — a feature image inside a centred narrow section is capped and
   centred so it never renders as a full-width slab. */
.intro-figure{max-width:820px;margin-inline:auto;margin-top:var(--s5)}
.intro-figure .media{border-radius:2px}
@media(max-width:820px){.intro-figure{max-width:100%}}


/* V7.4: heading breathing room — a large heading sat directly on the smaller
   paragraph beneath it, which read cramped. Adds roughly one line of space
   wherever a paragraph follows a heading. */
.display + p,
.h-xl + p,
.h-lg + p,
h1 + p, h2 + p, h3 + p,
.section-head h1 + p,
.section-head h2 + p{
  margin-top:clamp(16px,1.8vw,26px);
}
/* the hero lede already sits below a display heading — keep it a touch tighter */
.page-hero .display + .lede,
.hero .display + .lede{
  margin-top:clamp(14px,1.4vw,20px);
}

/* V7.4b: the contact hero keeps its own tighter rhythm so the new heading spacing
   does not push the copy back down onto the Trellis logo etched in the photograph. */
.page-hero .wrap.contact-hero-copy .display + .lede{margin-top:12px}
.page-hero:has(.contact-hero-copy){padding-block:clamp(60px,7vw,76px) clamp(210px,27vw,310px)}
@media(max-width:700px){.page-hero:has(.contact-hero-copy){padding-block:58px 240px}}


/* Red performer feature (Event Options) — the photograph was re-framed to 15/8 so
   the performers, not the empty ceiling, are the subject. The frame matches the
   file exactly, so 100% of the image shows with nothing cropped. */
.media.wide.media-performers { aspect-ratio: 15 / 8 !important; }


/* ── V7.5 MOBILE HERO ─────────────────────────────────────────────────────
   .hero-stats is position:absolute;bottom:0. On narrow screens it wraps to
   two rows (147px) and rides up over the CTA button — a 43px overlap at
   375/390px. Below 760px it flows in normal order beneath the hero copy.
   Desktop layout is untouched.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero .wrap {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: clamp(30px, 6vw, 46px);
  }
  .hero-stats { position: static; inset: auto; }
  .hero-stats .wrap { display: flex; padding-block: 14px; }
}

/* ── V7.5 MOBILE NAV ──────────────────────────────────────────────────────
   backdrop-filter on .site-header makes it a containing block for
   position:fixed descendants, so the slide-in .nav was sized against the
   77px header instead of the viewport — 7 of 8 links were clipped and only
   "The Venue" was reachable. The header is already 94% opaque, so a solid
   background is visually equivalent on mobile. Desktop keeps the glass.
   ------------------------------------------------------------------------ */
.nav-home { display: none; }
@media (max-width: 860px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none;
                 background: rgba(251,248,242,.985); }
  .nav-home { display: block; }
}


/* Discreet Privacy Policy link in the footer's copyright line. Inherits the
   muted .footer-bottom tone (.5 alpha) and only lifts on hover. */
.footer-bottom .footer-privacy{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,238,227,.22)}
.footer-bottom .footer-privacy:hover{color:var(--brass-light);border-bottom-color:var(--brass-light)}