:root{
  --noir:#141310;
  --noir-2:#1B1915;
  --noir-3:#23201A;
  --stone:#EFEAE0;
  --stone-2:#A69E90;
  --stone-3:#7A736A;
  --or:#C6A66D;
  --line:rgba(198,166,109,.17);
  --line-2:rgba(239,234,224,.09);
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --pad:clamp(20px,5vw,76px);
  --gap:clamp(64px,9vw,136px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--stone);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Images carry width/height attributes so the browser reserves the right box
   before they load. Those attributes also act as a presentational height, which
   would beat any aspect-ratio we set, so layout height is always CSS's job. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.eyebrow{font-size:11px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--or)}
.display{font-family:var(--serif);font-weight:300;line-height:1.08;margin:0}
.h2{font-size:clamp(33px,5.4vw,58px)}
.h3{font-size:clamp(25px,3.4vw,36px)}
.lede{font-size:clamp(16px,1.5vw,18px);color:var(--stone-2);max-width:58ch;line-height:1.85}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap)}
.alt{background:var(--noir-2)}
.bord{border-top:1px solid var(--line)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;gap:24px;padding:18px var(--pad);transition:background .5s,border-color .5s,padding .5s;border-bottom:1px solid transparent}
.nav.is-stuck,body.sub .nav{background:rgba(20,19,16,.94);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav.is-stuck{padding-block:13px}
.brand{font-family:var(--serif);font-size:18px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.brand span{color:var(--or)}
.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-links a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-2);transition:color .3s;position:relative}
.nav-links a:hover{color:var(--or)}
.nav-links a[aria-current="page"]{color:var(--or)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--or)}
.lang{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;color:var(--stone-3)}
.lang button[aria-pressed="true"]{color:var(--or)}
.lang i{opacity:.4;font-style:normal}
.burger{display:none;margin-left:auto;width:34px;height:34px;position:relative}
.burger b{position:absolute;left:5px;right:5px;height:1px;background:var(--stone);transition:transform .35s}
.burger b:nth-child(1){top:13px}.burger b:nth-child(2){top:20px}
body.menu-open .burger b:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger b:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- heroes ---------- */
.hero{position:relative;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(44px,7vh,76px)}
.hero-home{min-height:90svh}
.hero-page{min-height:66svh;padding-top:150px}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:var(--noir-2)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%;opacity:.55;filter:saturate(.68) contrast(1.05)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.78) 0%,rgba(20,19,16,.24) 36%,rgba(20,19,16,.82) 78%,var(--noir) 100%)}
.hero-inner{position:relative;width:100%;max-width:1320px;margin:0 auto}
.hero .eyebrow{display:block;margin-bottom:20px}
.hero h1{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.008em;line-height:.96}
.hero-home h1{font-size:clamp(48px,11vw,148px)}
.hero-page h1{font-size:clamp(40px,7.4vw,96px);max-width:16ch}
.hero h1 em{display:block;font-style:normal}
.hero-lede{margin:clamp(22px,3vw,34px) 0 0;max-width:52ch;color:var(--stone);opacity:.88;font-size:clamp(15.5px,1.5vw,18px)}
.crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-3);margin:0 0 18px}
.crumb a:hover{color:var(--or)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border:1px solid var(--line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);transition:background .35s,border-color .35s,color .35s}
.btn:hover{background:var(--or);border-color:var(--or);color:#17150F}
.btn-solid{background:var(--or);border-color:var(--or);color:#17150F}
.btn-solid:hover{background:transparent;border-color:var(--or);color:var(--or)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- three doors ---------- */
.doors{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:860px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{position:relative;background:var(--noir);padding:clamp(30px,3.4vw,46px);min-height:clamp(330px,40vw,460px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.door-bg{position:absolute;inset:0;z-index:-2}
/* The doors are three full photographs. They used to sit at .3 opacity under a
   gradient reaching 94% black, which left them all but invisible — about 2% of
   the image survived at the bottom. The gradient still weights the lower half,
   where the text sits, and the top half is now allowed to read as a picture. */
.door-bg img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.66) contrast(1.04);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,19,16,.22) 0%,rgba(20,19,16,.52) 44%,rgba(20,19,16,.86) 78%,rgba(20,19,16,.94) 100%)}
.door:hover .door-bg img,.door:focus-visible .door-bg img{opacity:.8;transform:scale(1.05)}
.door .eyebrow{margin-bottom:14px}
.door h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,44px);line-height:1.05;margin:0}
.door p{margin:16px 0 0;color:var(--stone-2);font-size:14.5px;line-height:1.75;max-width:32ch}
.door .go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.door:hover .go{gap:16px}
.door .go{transition:gap .4s}

/* ---------- brag bar ---------- */
/* Three items, so cell borders rather than a container background: at two
   columns the odd one out would leave a gold block where the fourth used
   to be. */
.brag{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:640px){.brag{grid-template-columns:repeat(3,1fr)}}
.brag a,.brag div{background:var(--noir);padding:26px clamp(18px,2.4vw,30px);display:flex;flex-direction:column;justify-content:center;gap:8px;transition:background .35s;border-bottom:1px solid var(--line)}
@media(min-width:640px){
  .brag a,.brag div{border-bottom:0;border-right:1px solid var(--line)}
  .brag>*:last-child{border-right:0}
}
.brag>*:last-child{border-bottom:0}
.brag a:hover{background:var(--noir-3)}
.brag b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:var(--stone)}
.brag span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-3);line-height:1.6}
.brag a b::after{content:" ↗";color:var(--or);font-size:.7em;vertical-align:super}

/* ---------- register ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.filters button{padding:10px 20px;border:1px solid var(--line-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-2);transition:all .3s}
.filters button:hover{color:var(--stone);border-color:var(--stone-3)}
.filters button[aria-pressed="true"]{background:var(--or);border-color:var(--or);color:#17150F}
.rep-count{font-size:12.5px;color:var(--stone-3);margin-top:18px}
/* Hairline grids. The rules live on the cells rather than on a coloured
   container showing through the gaps: these grids rarely fill their last row
   (the register filters empty it constantly), and a container background turns
   every leftover cell into a solid gold block. */
.rep-grid,.cards,.proof{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rep-card,.card,.proof div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,266px),1fr));margin-top:24px}
.rep-card{background:var(--noir);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;transition:background .35s;min-height:178px}
.alt .rep-card{background:var(--noir-2)}
.rep-card:hover{background:var(--noir-3)}
.rep-card .code{font-size:10px;letter-spacing:.24em;color:var(--or);font-variant-numeric:tabular-nums}
.rep-card h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;margin:0}
.rep-card p{margin:0;font-size:13.5px;color:var(--stone-2);line-height:1.7}
.rep-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:15px}
.rep-tags span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-3);border:1px solid var(--line-2);padding:4px 9px}
.rep-card.hide{display:none}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,76px)}
@media(min-width:960px){.split{grid-template-columns:1.02fr .98fr;align-items:start}}
/* Stacked and equal at every width. Only once the split is two columns can the
   pair share the copy's height — below that there is no height to share, and
   flex:1 on a container with none collapses both frames to nothing. */
.tour-media{display:flex;flex-direction:column;gap:1px}
.tour-media .fig{overflow:hidden}
.tour-media .fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4}
@media(min-width:960px){
  .split-stretch{align-items:stretch}
  .tour-media{min-height:0}
  .tour-media .fig{flex:1 1 0;min-height:0}
  .tour-media .fig img{aspect-ratio:auto}
}
.head2{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,60px)}
@media(min-width:960px){.head2{grid-template-columns:1fr 1fr;align-items:end}}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:clamp(38px,5vw,60px) 0 0;padding:0;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:92px 1fr;gap:clamp(18px,3vw,42px);padding:22px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.tl .t{font-size:12px;letter-spacing:.14em;color:var(--or);font-variant-numeric:tabular-nums}
.tl h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,26px);margin:0 0 6px;line-height:1.3}
.tl p{margin:0;color:var(--stone-2);font-size:14.5px;line-height:1.75;max-width:64ch}
@media(max-width:640px){.tl li{grid-template-columns:1fr;gap:6px}}

/* ---------- rows / bullets / cards ---------- */
.rows{margin:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-2)}
.row dt{font-size:14.5px;color:var(--stone-2)}
.row dd{margin:0;font-family:var(--serif);font-size:clamp(23px,2.8vw,32px);font-weight:400;text-align:right;font-variant-numeric:tabular-nums}
.row dd small{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-3);margin-left:9px}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:2px}.row dd{text-align:left}}

.bul{list-style:none;margin:26px 0 0;padding:0}
.bul li{display:flex;gap:15px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--stone-2);align-items:baseline;line-height:1.7}
.bul li::before{content:"";width:4px;height:4px;background:var(--or);flex-shrink:0;transform:translateY(-3px)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr));margin-top:clamp(30px,4vw,46px)}
.card{background:var(--noir);padding:26px 22px 28px}
.alt .card{background:var(--noir-2)}
.card h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 10px;line-height:1.25}
.card p{margin:0;font-size:13.5px;color:var(--stone-2);line-height:1.7}

.proof{display:grid;grid-template-columns:repeat(2,1fr);margin-top:32px}
@media(min-width:720px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof div{background:var(--noir);padding:24px 20px}
.alt .proof div{background:var(--noir-2)}
.proof b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--or)}
.proof span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-3);margin-top:10px;line-height:1.5}

/* ---------- figures / strip ---------- */
.fig{position:relative;overflow:hidden;background:var(--noir-3);margin:0}
.fig img{width:100%;object-fit:cover;filter:saturate(.72) brightness(.94);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fig:hover img{transform:scale(1.035)}
.fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:16px 18px;background:linear-gradient(transparent,rgba(20,19,16,.9));font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-2)}
/* A photograph set into a column of prose, hairline-ruled like everything
   else. Used for the restoration shot in the history section. */
.fig-inline{margin:clamp(28px,3.5vw,40px) 0 0;border:1px solid var(--line)}

.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:840px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip .fig img{aspect-ratio:3/4}

/* ---------- moments ---------- */
/* Photograph and prose side by side, alternating, the image running off the
   outer edge of the page. Replaces a captioned tile grid: a caption can only
   label a picture, whereas this can say what the room actually does. */
.moments{border-top:1px solid var(--line)}
.moment{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
.moment .m-media{overflow:hidden;background:var(--noir-2)}
.moment .m-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(.76) brightness(.96);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.moment:hover .m-media img{transform:scale(1.03)}
.moment .m-body{padding:clamp(34px,5.5vw,78px) var(--pad)}
.m-time{display:block;font-size:11px;letter-spacing:.24em;color:var(--or);font-variant-numeric:tabular-nums}
.moment h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:18px 0 0;letter-spacing:-.004em}
.moment p{margin:20px 0 0;color:var(--stone-2);font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.8;max-width:46ch}
.moment .go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or);transition:gap .4s}
.moment:hover .go{gap:16px}
/* the heading sits in its own .section directly above; that section keeps its
   top padding and gives up its bottom one, and the blocks set their own gap */
.section.heads-moments{padding-bottom:0}
.section.heads-moments + .moments{margin-top:clamp(40px,5vw,72px)}
@media(min-width:900px){
  .moment{grid-template-columns:1.12fr .88fr;align-items:center}
  .moment .m-media img{aspect-ratio:5/4}
  /* every other one flips, so the images alternate page edges. The track
     sizes flip with it, otherwise the reversed image lands in the narrow
     column and the row comes out shorter than its neighbours. */
  .moment.rev{grid-template-columns:.88fr 1.12fr}
  .moment.rev .m-media{order:2}
  .moment.rev .m-body{order:1;text-align:right}
  .moment.rev p{margin-left:auto}
}

/* ---------- epigraph ---------- */
/* The house line, given a whole band to itself rather than tucked into a
   paragraph. Sits between the timeline and the gallery. */
.epigraph{padding:clamp(56px,8vw,110px) var(--pad);border-block:1px solid var(--line);text-align:center}
.epigraph p{margin:0 auto;max-width:22ch;font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,4vw,50px);line-height:1.14;letter-spacing:-.006em;color:var(--stone)}

/* ---------- full-bleed band ---------- */
/* A breather between two dense sections. No caption — at this width the
   fifty-four hectares are the point and a label would only get in the way. */
.band{margin:0;border-block:1px solid var(--line);background:var(--noir-2)}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.74) brightness(.95)}
@media(max-width:700px){.band img{aspect-ratio:16/10}}

/* ---------- faq ---------- */
.faq{margin-top:clamp(32px,4vw,50px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(19px,2.1vw,23px);font-weight:400;line-height:1.4;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or)}
.faq summary::after{content:"+";font-family:var(--sans);font-size:19px;font-weight:200;color:var(--or);flex-shrink:0;transition:transform .35s;line-height:1.5}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{margin:0;padding:0 0 24px;max-width:72ch;color:var(--stone-2);font-size:14.5px;line-height:1.85}

/* ---------- cta band ---------- */
.cta{background:var(--noir-2);border-top:1px solid var(--line);text-align:center}
.cta .inner{max-width:60ch;margin:0 auto}
.cta .actions{justify-content:center}
.cta .lede{margin-inline:auto}

/* ---------- contact ---------- */
.detail{border-top:1px solid var(--line-2);padding:18px 0;display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:baseline}
.detail dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.detail dd{margin:0;font-size:15.5px;line-height:1.65}
.detail dd a:hover{color:var(--or)}
@media(max-width:640px){.detail{grid-template-columns:1fr;gap:5px}}
.awards{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap}
.awards img{width:58px;height:58px;object-fit:contain;opacity:.9}
.awards p{margin:0;font-size:12.5px;color:var(--stone-3);max-width:24ch;line-height:1.6}

/* ---------- buildings + 3D tours ---------- */
.bldgs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(32px,4vw,52px)}
@media(min-width:900px){.bldgs{grid-template-columns:repeat(2,1fr)}}
.bldg{background:var(--noir);display:flex;flex-direction:column}
.bldg-copy{padding:clamp(24px,2.8vw,34px)}
.bldg-note{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--stone-2)}
.bldg-specs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px 18px}
@media(min-width:560px){.bldg-specs{grid-template-columns:repeat(2,1fr)}}
.bldg-specs li{font-size:12.5px;line-height:1.55;color:var(--stone-2);
  padding-left:13px;position:relative}
.bldg-specs li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;
  background:var(--or)}

/* Placeholder shown while the Matterport embed is on its way; the script
   replaces it with the iframe as the card nears the viewport. */
.tour{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:clamp(34px,5vw,58px) 24px;border-top:1px solid var(--line);
  background:var(--noir-2);transition:background .35s;text-align:center;width:100%}
.tour:hover{background:var(--noir-3)}
.tour-mark{width:34px;height:34px;border:1px solid var(--or);position:relative;
  transform:rotate(45deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tour-mark::after{content:"";position:absolute;inset:9px;border:1px solid var(--or);opacity:.5}
.tour:hover .tour-mark{transform:rotate(135deg)}
.tour-go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.tour-note{font-size:10.5px;letter-spacing:.1em;color:var(--stone-3)}
.bldg iframe{display:block;width:100%;aspect-ratio:16/10;border:0;margin-top:auto;
  border-top:1px solid var(--line);background:var(--noir-2)}
@media(prefers-reduced-motion:reduce){.tour-mark{transition:none}}

/* ---------- planning flow ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);
  width:fit-content;margin-top:clamp(30px,4vw,48px)}
.tabs button{background:var(--noir);padding:13px clamp(16px,2vw,26px);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone-3);transition:color .3s,background .3s}
.tabs button:hover{color:var(--stone)}
.tabs button[aria-selected="true"]{background:var(--noir-3);color:var(--or)}

/* Compact: four across on a wide screen, so seven steps read as one block
   rather than a page of scrolling. Rules sit on the cells, since seven never
   fills four columns. */
.flow{list-style:none;display:grid;grid-template-columns:1fr;margin:clamp(24px,3vw,36px) 0 0;padding:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:640px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow[hidden]{display:none}
.step{padding:20px clamp(16px,1.8vw,22px) 24px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.step-when{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.step h3{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.22;
  color:var(--stone)}
.step p{margin:9px 0 0;font-size:12.5px;line-height:1.72;color:var(--stone-2)}

/* ---------- wedding albums ---------- */
/* Each wedding gets a spread rather than a cover, so the vibe of the day
   reads without anybody clicking. Rows are justified in main.js from the
   aspect ratios in albums.json — every row fills the width exactly, which is
   why there is never a ragged edge to leave a gold gap showing. */
.album{display:block;padding-block:clamp(30px,3.6vw,52px)}
.album:first-child{padding-top:clamp(22px,2.6vw,34px)}

.album-head{display:grid;grid-template-columns:1fr;gap:14px;align-items:baseline;
  margin-bottom:clamp(20px,2.6vw,32px)}
@media(min-width:900px){.album-head{grid-template-columns:auto 1fr auto;gap:clamp(28px,4vw,64px)}}
.album-date{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.album-name{margin:9px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3vw,34px);line-height:1.12;color:var(--stone)}
.album-note{margin:0;font-size:13.5px;line-height:1.75;color:var(--stone-2);max-width:40ch}
.album-all{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);
  white-space:nowrap;transition:letter-spacing .4s;text-align:left}
.album-all:hover{letter-spacing:.26em}

.album-spread{display:flex;flex-direction:column;gap:1px}
.sp-row{display:flex;gap:1px}
.sp{padding:0;overflow:hidden;background:var(--noir-2);flex:0 0 auto;position:relative}
.sp img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.8) brightness(.94);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s}
.sp:hover img,.sp:focus-visible img{transform:scale(1.05);filter:saturate(.95) brightness(1.02)}
@media(prefers-reduced-motion:reduce){.sp img{transition:none}}

/* ---------- lightbox ---------- */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,11,9,.985);backdrop-filter:blur(8px);
  display:grid;grid-template-rows:auto minmax(0,1fr)}
/* the stage must stretch to its row, or max-height:100% on the image has
   nothing to measure against and tall frames run off the screen */
.lb[hidden]{display:none}
.lb-bar{grid-row:1;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px var(--pad);border-bottom:1px solid var(--line)}
.lb-title{margin:0;display:flex;align-items:baseline;gap:16px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone-2)}
.lb-count{color:var(--stone-3);font-variant-numeric:tabular-nums;letter-spacing:.14em}
.lb-x{font-size:19px;line-height:1;color:var(--stone-2);padding:8px 10px;transition:color .3s}
.lb-x:hover{color:var(--or)}
.lb-stage{grid-row:2;grid-column:1;margin:0;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,3vw,40px);min-height:0;overflow:hidden}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--line)}
.lb-nav{grid-row:2;grid-column:1;z-index:2;align-self:center;font-size:34px;line-height:1;
  color:var(--stone-2);padding:20px 14px;transition:color .3s,background .3s;
  background:rgba(12,11,9,.4)}
.lb-nav:hover{color:var(--or);background:rgba(12,11,9,.75)}
.lb-prev{justify-self:start;margin-left:6px}
.lb-next{justify-self:end;margin-right:6px}
@media(prefers-reduced-motion:reduce){.album-img img{transition:none}}

/* ---------- floor plan ---------- */
/* The estate's own measured sheet, used exactly as supplied — taupe ink on
   white, which is the opposite of everything around it. Rather than recolour
   the drawing, the page treats it as what it is: a plate. Capped, centred,
   ruled with the same gold hairline as everything else, and given enough dark
   margin that it reads as mounted rather than pasted on. */
.plan-sheet{max-width:760px;margin:clamp(30px,4vw,52px) auto 0}
.plan-sheet img{width:100%;height:auto}
/* the labels are unreadable once the drawing is squeezed to a phone, so below
   the breakpoint it holds a legible width and scrolls sideways instead */
@media(max-width:659px){
  .plan-sheet{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .plan-sheet img{min-width:560px}
  .plan-sheet figcaption{position:sticky;left:0}
}
.plan-sheet figcaption{margin-top:clamp(14px,1.8vw,22px);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-3);text-align:center}
.plan-note{max-width:56ch;margin:clamp(30px,4vw,46px) auto 0;text-align:center;font-size:14.5px}

/* the dimensions sit under the room name inside the same row */
.rows dt small{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;
  text-transform:none;color:var(--stone-3);font-variant-numeric:tabular-nums}

/* ---------- partners ---------- */
/* Category counts run 1, 3 and 4, so rules go on the cells — a container
   background would leave a gold block wherever a row does not fill. */
.p-group + .p-group{margin-top:clamp(52px,6.5vw,92px)}
.p-head{display:grid;grid-template-columns:1fr;gap:10px;align-items:baseline}
@media(min-width:900px){.p-head{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(28px,4vw,64px)}}
.p-head .lede{font-size:clamp(14.5px,1.4vw,16px);max-width:62ch}

.partners{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);
  border-left:1px solid var(--line);margin-top:clamp(22px,2.6vw,32px)}
@media(min-width:620px){.partners{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.partners{grid-template-columns:repeat(4,1fr)}}
.partner{background:var(--noir);padding:26px 24px 28px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s}
.partner:hover{background:var(--noir-2)}
.p-role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);line-height:1.5}
.partner h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;margin:12px 0 0}
.p-meta{margin:14px 0 0;font-size:12.5px;line-height:1.85;color:var(--stone-2)}
.p-meta a{color:var(--stone-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.p-meta a:hover{color:var(--or)}
.p-link{margin-top:auto;padding-top:18px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);word-break:break-word}
.p-link + .p-link{padding-top:6px}
.p-link:hover{color:var(--stone)}

/* ---------- film ---------- */
/* preload="none" in the markup, so the 21 MB only moves if somebody presses
   play; until then this costs one poster image. */
.film{margin:clamp(44px,6vw,84px) 0 0;border:1px solid var(--line)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--noir-2)}
.film figcaption{padding:16px 18px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-3);border-top:1px solid var(--line)}

/* ---------- enquiry form ---------- */
.enq{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px);margin-top:clamp(34px,4.5vw,56px)}
@media(min-width:900px){.enq{grid-template-columns:1.35fr .65fr;gap:clamp(48px,6vw,96px)}}

.enq-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.enq-grid{grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.6vw,34px)}
  .field-wide{grid-column:1/-1}}

.field{margin:0 0 22px}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone-3);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;color:var(--stone);font-family:var(--sans);
  font-weight:300;font-size:15.5px;line-height:1.6;padding:11px 0 12px;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  transition:border-color .3s;appearance:none}
.field textarea{resize:vertical;min-height:118px}
/* iOS zooms the whole page when a focused field is under 16px */
@media(max-width:768px){.field input,.field select,.field textarea{font-size:16px}}
/* tells the browser to draw the native date picker, and its icon, dark */
.field input[type="date"]{color-scheme:dark;cursor:text}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.5;transition:opacity .3s;filter:invert(1)}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:1}
/* an empty date field shows jj/mm/aaaa; keep it quiet until it holds a value */
.field input[type="date"]:not(:focus):placeholder-shown,
.field input[type="date"]:not(:focus):in-range:invalid{color:var(--stone-3)}
.field select{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.field select option{background:var(--noir-2);color:var(--stone)}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--or)}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{
  border-bottom-color:#B4664F}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.enq-send{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}
.enq-send .btn{cursor:pointer;font-family:inherit}
.enq-status{margin:0;font-size:13.5px;line-height:1.6;color:var(--stone-2);max-width:42ch}
.enq-status.is-err{color:#C98A72}
.enq-status.is-ok{color:var(--or)}
form[aria-busy="true"] .enq-send .btn{opacity:.5;pointer-events:none}

.enq-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.enq-line{display:flex;flex-direction:column;gap:5px}
.enq-lab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-3)}
.enq-line a{font-family:var(--serif);font-size:clamp(18px,1.9vw,22px);color:var(--stone);
  transition:color .3s;word-break:break-word}
.enq-line a:hover{color:var(--or)}
.enq-side .awards{margin-top:6px}

/* ---------- footer ---------- */
.foot{padding:34px var(--pad);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
.foot p{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-3)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-3);transition:color .3s}
.foot nav a:hover{color:var(--or)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero .eyebrow,.hero .crumb,.hero h1 em,.hero h1,.hero-lede{opacity:0;transform:translateY(20px);animation:rise 1.15s cubic-bezier(.2,.7,.2,1) forwards}
.hero .eyebrow,.hero .crumb{animation-delay:.18s}
.hero h1{animation-delay:.34s}
.hero h1 em:nth-of-type(1){animation-delay:.34s}
.hero h1 em:nth-of-type(2){animation-delay:.46s}
.hero-lede{animation-delay:.66s}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:900px){
  /* visibility, not just opacity: a transparent overlay still takes focus and
     still reads out, which would contradict the burger's aria-expanded. The
     0s delay lets the fade finish before it leaves the accessibility tree. */
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;background:var(--noir);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility 0s .4s;margin:0}
  body.menu-open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s,visibility 0s}
  .nav-links a{font-size:15px;letter-spacing:.22em}
  .nav-links a[aria-current="page"]::after{display:none}
  .burger{display:block;z-index:5}
  .lang{position:relative;z-index:5;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.hero .eyebrow,.hero .crumb,.hero h1,.hero h1 em,.hero-lede{opacity:1;transform:none}
}