/* Bluestone Estate design system. Source: bluestone-os/projects/website/design-direction.md */
:root{
  --chrome:88px;
  --ground:#FFFFFF; --stone:#E1DFD8; --sand:#EFECE9; --mist:#F2F2F2;
  --text:#4C4C4B; --muted:#929396; --sage:#8D9585; --sage-deep:#60695B;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;
  --max:1280px; --measure:68ch;
  --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--chrome,88px) + 16px)}
body{margin:0;overflow-x:hidden;background:var(--ground);color:var(--text);font-family:var(--font);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:18px}}
img{max-width:100%;display:block;height:auto}
a{color:var(--sage-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:300;line-height:1.15;margin:0 0 var(--s2);letter-spacing:0}
h1{font-size:clamp(32px,4.2vw,56px)}
h2{font-size:clamp(26px,3vw,40px)}
h3{font-size:clamp(22px,2vw,28px);font-weight:400}
h4{font-size:19px;font-weight:500;margin-bottom:var(--s1)}
p{margin:0 0 var(--s2);max-width:min(var(--measure),100%)}
.lede{font-size:1.15em;font-weight:300;max-width:min(52ch,100%)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
.eyebrow a{color:var(--muted)}
.label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
.narrow{max-width:760px;margin:0 auto}
section{padding:var(--s5) 0}
@media(min-width:900px){section{padding:var(--s6) 0}}
.stone{background:var(--stone)} .mist{background:var(--mist)}
hr{border:0;border-top:1px solid var(--stone);margin:var(--s4) 0}
.rule{border-top:1px solid var(--sage)}
/* proto banner */
.proto{background:var(--sage-deep);color:#fff;font-size:12px;letter-spacing:.04em;text-align:center;padding:6px var(--s2);line-height:1.4}
.proto a{color:#fff;text-decoration:underline}
/* header */
header.site{position:sticky;top:0;background:#fff;z-index:20;border-bottom:1px solid var(--mist)}
header.site>.wrap{display:flex;align-items:center;gap:var(--s4);height:88px}
.wordmark{display:flex;align-items:center;gap:16px;font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);font-weight:600;white-space:nowrap;text-decoration:none}
.wordmark:hover{text-decoration:none}
.wordmark span{font-weight:400}
.wordmark img.mark-sm{width:58px;height:58px;flex:none}
nav.main{display:none;align-items:center;gap:var(--s5);margin-left:var(--s5);height:100%}
nav.main>a,nav.main .menu>a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--text);padding:6px 0;border-bottom:1px solid transparent}
nav.main>a:hover,nav.main .menu>a:hover,nav.main .menu:hover>a,nav.main .menu:focus-within>a{text-decoration:none;border-bottom-color:var(--text)}
nav.main .menu{height:100%;display:flex;align-items:center}
.panel-menu{display:none;position:absolute;left:0;right:0;top:88px;background:#fff;border-top:1px solid var(--mist);border-bottom:1px solid var(--stone)}
.menu:hover .panel-menu,.menu:focus-within .panel-menu{display:block}
.panel-menu .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:var(--s4) var(--s3)}
.panel-menu .label{margin:0 0 var(--s2);color:var(--muted)}
.panel-menu .label a{color:var(--text);letter-spacing:.1em}
.panel-menu .label a:hover{text-decoration:underline}
.panel-menu .cols>div>a{display:block;color:var(--text);font-size:16px;font-weight:300;padding:6px 0}
.panel-menu .cols>div>a:hover{text-decoration:underline;text-underline-offset:4px}
.status-inline{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);margin:4px 0 0}
.actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.burger{display:inline-block;background:none;border:0;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--text);padding:10px 0 10px 12px;cursor:pointer}
@media(min-width:1000px){nav.main{display:flex}.burger{display:none}}
.mobile-menu{background:#fff;border-top:1px solid var(--stone);max-height:calc(100svh - 88px);overflow:auto}
.mobile-menu .wrap{padding:var(--s3) var(--s3) var(--s5);display:flex;flex-direction:column}
.mobile-menu .label{margin:var(--s3) 0 var(--s1)}
.mobile-menu .label:first-child{margin-top:0}
.mobile-menu .label a{color:var(--text);letter-spacing:.12em;display:inline-block;padding:6px 0}
.mobile-menu a.group{font-size:20px;font-weight:300;color:var(--text);padding:8px 0;border-bottom:1px solid var(--mist)}
.mobile-menu a.sub{font-size:15px;color:var(--text);padding:6px 0 6px var(--s3)}
.mobile-menu .btn{margin-top:var(--s3);text-align:center}
.mobile-menu .talk{margin:var(--s2) 0 0}
body.menu-open{overflow:hidden}
.btn{display:inline-block;background:transparent;color:var(--text);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:14px 22px;border:1px solid var(--text);border-radius:3px;white-space:nowrap;transition:background .3s,color .3s}
.btn:hover{background:var(--text);color:#fff;text-decoration:none}
.btn.ghost{border-color:var(--muted)}
.btn.ghost:hover{background:var(--mist);color:var(--text)}
.btn.small{padding:10px 16px;font-size:12px}
.talk{font-size:14px;margin-left:var(--s2)}
.talk a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* hero. Default: full-width photograph, then an editorial title block on white. Words never sit on the image. */
.hero{display:block;background:var(--ground);color:var(--text)}
.hero>img,.hero>video{display:block;width:100%;height:calc(100svh - var(--chrome,100px));min-height:480px;max-height:1000px;object-fit:cover;background:var(--stone)}
.hero.peek>img,.hero.peek>video{height:clamp(480px,calc(100svh - 200px),1000px)}
.hero.short>img,.hero.short>video{height:clamp(320px,56svh,600px)}
.hero .wrap{max-width:var(--max);margin:0 auto;padding:var(--s4) var(--s3) var(--s3)}
.hero .panel{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--s6);row-gap:0;align-items:start}
.hero .panel>.eyebrow{grid-column:1 / -1;grid-row:1;margin-bottom:var(--s4)}
.hero .panel>h1{grid-column:1;grid-row:2;margin:0;max-width:16ch}
.hero .panel>p:not(.eyebrow),.hero .panel>.core{grid-column:2;grid-row:2;margin:0;padding-top:.55em;font-weight:300;font-size:1.08em;max-width:min(64ch,100%)}
.hero .panel>.core p{margin:0 0 .9em;font-weight:300}
.hero .panel>.core p:last-child{margin-bottom:0}
.hero.home .panel>.core p:last-child{font-weight:400}
.hero .panel>.cta{grid-column:2;grid-row:3;margin-top:var(--s3)}
.hero .eyebrow{color:var(--muted)} .hero .eyebrow a{color:var(--muted)}
.hero h1{color:var(--text)} .hero p{color:var(--text)} .hero .talk a{color:var(--text)}
.hero .wrap img{position:static;object-fit:unset}
@media(max-width:900px){.hero>img,.hero>video{height:calc(100svh - var(--chrome,92px));min-height:420px}.hero .panel{grid-template-columns:1fr}.hero .panel>*{grid-column:1!important;grid-row:auto!important}.hero .panel>h1{margin-bottom:var(--s2)}.hero .panel>p:not(.eyebrow),.hero .panel>.core{padding-top:0}.hero .panel>.cta{margin-top:var(--s2)}}
/* variant: split. Words left on white, photograph right */
.hero.v-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,800px)}
.hero.v-split>img{order:2;height:100%;min-height:420px}
.hero.v-split .wrap{order:1;display:flex;align-items:center;max-width:none;margin:0;padding:var(--s5) var(--s5) var(--s5) max(var(--s3),calc((100vw - var(--max))/2 + var(--s3)))}
.hero.v-split .panel{display:block;max-width:560px}
.hero.v-split .panel>p:not(.eyebrow){padding-top:0;max-width:min(46ch,100%);margin-bottom:var(--s2)}
.hero.v-split .panel>h1{margin-bottom:var(--s2);max-width:20ch}
@media(max-width:900px){.hero.v-split{grid-template-columns:1fr;min-height:0}.hero.v-split>img{order:1;height:52vh;min-height:0}.hero.v-split .wrap{order:2;padding:var(--s4) var(--s3)}}
/* variant: statement first. Words on white above the photograph */
.hero.v-statement{display:flex;flex-direction:column}
.hero.v-statement .wrap{order:1;padding:var(--s5) var(--s3) var(--s4)}
.hero.v-statement>img{order:2}
/* variant: band. Photograph, then the words on a Toi Toi Cream band */
.hero.v-band{background:var(--stone)}
.hero.v-band .wrap{padding-bottom:var(--s4)}
/* variant: overlay. White words on the photograph behind a scrim (rejected; kept for comparison) */
.hero.v-overlay{display:flex;align-items:flex-end;position:relative;min-height:min(72vh,760px);color:#fff;overflow:hidden}
.hero.v-overlay>img{position:absolute;inset:0;height:100%}
.hero.v-overlay:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(40,44,40,.7),rgba(40,44,40,.1) 65%)}
.hero.v-overlay .wrap{position:relative;z-index:1;padding:var(--s5) var(--s3)}
.hero.v-overlay .panel{display:block;max-width:760px}
.hero.v-overlay .panel>h1{margin-bottom:var(--s2)} .hero.v-overlay .panel>p:not(.eyebrow){padding-top:0;margin-bottom:var(--s2)}
.hero.v-overlay h1,.hero.v-overlay p,.hero.v-overlay .eyebrow,.hero.v-overlay .talk a{color:#fff}
.hero.v-overlay .btn{color:#fff;border-color:#fff}
/* compare page */
.compare h2{margin:var(--s6) 0 var(--s2)} .compare .note{color:var(--muted);font-size:15px;max-width:70ch}
/* grids */
.grid{display:grid;gap:var(--s4)}
@media(min-width:760px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:var(--s4);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s6)}.split.rev>:first-child{order:2}}
.full{width:100%;aspect-ratio:16/7;object-fit:cover}
/* cards */
.card{display:block;color:var(--text)}
.card:hover{text-decoration:none}
.card .ph{aspect-ratio:4/5;overflow:hidden;position:relative;margin-bottom:var(--s2);border:1px solid transparent}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.card .ph img.alt{position:absolute;inset:0;opacity:0}
.card:hover .ph img.alt{opacity:1}
.card:hover .ph{border-color:var(--sage)}
.card h3{margin:var(--s1) 0 var(--s1)}
.card .stand{margin:0 0 var(--s2);font-weight:300}
.card .spec{font-size:14px;color:var(--muted);margin:0 0 4px}
.card .rate{font-size:14px;margin:0 0 var(--s2)}
.card .go{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--text)}
.card.wide .ph{aspect-ratio:16/9}
.badge{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;background:var(--stone);color:var(--text);padding:4px 10px;margin-left:var(--s1);vertical-align:middle}
/* spec strip */
.specs{display:flex;flex-wrap:wrap;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--sage);border-bottom:1px solid var(--sage);margin:var(--s5) 0 var(--s4)}
.specs div{min-width:96px}
.specs b{display:block;font-weight:400;font-size:24px;font-variant-numeric:tabular-nums;line-height:1}
.specs small{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* values */
ol.values{list-style:none;counter-reset:v;padding:0;margin:0;display:grid;gap:var(--s4)}
@media(min-width:900px){ol.values{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}}
ol.values li{counter-increment:v;padding-top:var(--s2);border-top:1px solid var(--sage)}
ol.values li:before{content:counter(v,decimal-leading-zero);display:block;font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:var(--s2)}
ol.values h3{margin-bottom:var(--s1)}
ol.values p{margin:0;font-weight:300}
/* know block */
.know{padding:var(--s4);background:var(--stone)}
.know .cols{display:grid;gap:var(--s4)}
@media(min-width:760px){.know .cols{grid-template-columns:1fr 1fr}}
.know ul{margin:0;padding-left:1.1em}
.know li{margin-bottom:6px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s4);margin:var(--s3) 0 0}
dl.kv dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
dl.kv dd{margin:0}
/* faq */
.faq details{border-top:1px solid var(--stone);padding:var(--s2) 0}
.faq details:last-child{border-bottom:1px solid var(--stone)}
.faq summary{cursor:pointer;font-size:1.05em;font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--muted);font-weight:300}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin-top:var(--s2);font-weight:300}
/* quote */
blockquote{margin:0;font-size:clamp(20px,2.2vw,26px);font-weight:300;font-style:italic;line-height:1.4;max-width:34ch}
blockquote footer{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:var(--s2)}
/* table */
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--stone);vertical-align:top}
th{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
th.num{text-align:right}
td.num,th.num{padding-right:0;padding-left:var(--s4)}
/* band */
.band{font-size:14px;color:var(--muted);text-align:center;padding:var(--s2) var(--s3);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
/* cta row */
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* footer */
footer.site{background:var(--stone);padding:var(--s6) 0 var(--s4);font-size:14px}
footer.site .mark{width:88px;margin:0 auto var(--s4);opacity:.9}
footer.site .cols{display:grid;gap:var(--s4)}
@media(min-width:760px){footer.site .cols{grid-template-columns:repeat(5,1fr)}}
footer.site h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
footer.site p{margin:0 0 6px;max-width:none}
footer.site a{color:var(--text)}
footer.site .boiler{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(76,76,75,.15);font-weight:300;max-width:none}
footer.site .fine{margin-top:var(--s3);font-size:12px;color:var(--muted)}
/* placeholder art */
.ph-label{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.06em;color:#fff;opacity:.85;text-transform:uppercase}
.gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}.gallery img:first-child{grid-column:span 2;grid-row:span 2}}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
@media(min-width:760px){.gallery.seven img:nth-child(n+6){grid-column:span 2;aspect-ratio:2/1}}
.rooms{display:grid;gap:var(--s2)}
@media(min-width:760px){.rooms{grid-template-columns:repeat(3,1fr)}}
.rooms>div{border-top:1px solid var(--sage);padding-top:var(--s2)}
.rooms b{font-weight:500;display:block}
.rooms span{color:var(--muted);font-size:14px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* logo */
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark:hover{text-decoration:none}
.wordmark img.mark-sm{width:58px;height:58px;flex:none}
.hero .wrap img.mark-hero{width:112px;height:auto;margin:0 0 var(--s3)}
footer.site .mark{width:110px;margin:0 auto var(--s4)}
footer.site .mark img{width:100%}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
input,textarea{width:100%;padding:12px;border:1px solid var(--muted);font:inherit;color:var(--text);background:#fff;margin-top:6px}
.know form p{max-width:none}
.hero .eyebrow a{color:var(--muted)}
.hero .talk a{color:var(--text)}

.card .ph img{aspect-ratio:4/5}
.card.wide .ph img{aspect-ratio:16/9}
.split img{width:100%;height:auto}

/* header on small screens: the row must never overflow */
@media(max-width:600px){header.site>.wrap{height:64px;gap:var(--s2)}.wordmark{font-size:12px;letter-spacing:.16em}.wordmark span{display:none}.actions .btn.small{display:none}.panel-menu{top:64px}.mobile-menu{max-height:calc(100svh - 64px)}}
/* variants: container padding should not double up with the split hero's edge alignment */

.lead{max-width:760px}

@media(prefers-reduced-motion:reduce){.hero>video{display:none}.hero>video+img{display:block}}

@media(max-width:600px){:root{--chrome:64px}}

/* review pass 1: home page */
.eyebrow{max-width:none}
section h2{margin-bottom:var(--s4)}
.card{display:flex;flex-direction:column}
.card .go{margin-top:auto;padding-top:var(--s2)}
.card .stand{flex:0 0 auto}
.card.wide .ph,.card.wide .ph img{aspect-ratio:3/2}
.card .status{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep);margin:0 0 4px}
.more{display:inline-block;margin-top:var(--s4);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--text)}
/* statement: a large light line on the page grid */
.statement{font-size:clamp(24px,2.6vw,36px);font-weight:300;line-height:1.3;max-width:26ch;margin:0 0 var(--s3)}
/* values as rows: number and title left, the promise right */
ol.values{display:block}
ol.values li{display:grid;grid-template-columns:5fr 7fr;gap:6px var(--s6);padding:var(--s3) 0;border-top:1px solid var(--stone);align-items:start}
ol.values li:last-child{border-bottom:1px solid var(--stone)}
ol.values li:before{grid-column:1;margin:0}
ol.values h3{grid-column:1;margin:0;font-weight:400}
ol.values p{grid-column:2;margin:0;font-weight:300;max-width:none}
ol.values p:only-of-type{grid-row:1 / span 2}
ol.values p:first-of-type:not(:only-of-type){grid-row:1;font-size:13px;color:var(--muted)}
ol.values p:nth-of-type(2){grid-row:2}
@media(max-width:760px){ol.values li{grid-template-columns:1fr}ol.values p{grid-column:1;grid-row:auto}}
/* full-bleed image between sections */
.bleed{display:block;width:100%;height:clamp(480px,85vh,960px);object-fit:cover}

.hero .panel>p.core{font-size:1em;line-height:1.65;max-width:min(52ch,100%)}

/* facts: three quiet columns of hairline rows */
.facts{display:grid;gap:var(--s5)}
@media(min-width:900px){.facts{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s6)}}
.facts .eyebrow{margin-bottom:var(--s2)}
.facts dl{margin:0}
.facts dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s3);padding:14px 0;border-top:1px solid rgba(76,76,75,.16)}
.facts dl>div:last-child{border-bottom:1px solid rgba(76,76,75,.16)}
.facts dt{font-size:15px;font-weight:500;color:var(--text)}
.facts dd{margin:0;font-size:15px;font-weight:300;color:var(--text)}

.note{font-size:14px;color:var(--muted);font-weight:300}

/* residence cards: square images, three per row, last row centred */
.residences{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s4)}
.residences>.card{flex:0 0 100%}
@media(min-width:640px){.residences>.card{flex:0 0 calc((100% - var(--s4)) / 2)}}
@media(min-width:1000px){.residences>.card{flex:0 0 calc((100% - 2 * var(--s4)) / 3)}}
.residences .card .ph,.residences .card .ph img{aspect-ratio:1/1}
.residences .card h3{font-size:24px}
.residences .card .stand{font-size:15px}
.filters{display:flex;flex-wrap:wrap;gap:var(--s3);margin:calc(var(--s4) * -1) 0 var(--s4)}
.filters button{background:none;border:0;padding:8px 0;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:1px solid transparent}
.filters button.on,.filters button:hover{color:var(--text);border-bottom-color:var(--text)}

/* sound toggle on the video hero */
.hero{position:relative}
.hero .sound{position:absolute;right:var(--s3);top:calc(100svh - var(--chrome,88px) - 64px);background:rgba(255,255,255,.9);border:1px solid var(--text);border-radius:3px;color:var(--text);font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:9px 14px;cursor:pointer}
.hero .sound:hover{background:#fff}
@media(max-width:900px){.hero .sound{top:calc(100svh - var(--chrome,88px) - 56px)}}

/* experience picks: square images like the residences */
.picks .card .ph,.picks .card .ph img{aspect-ratio:1/1}
.picks .card h3{font-size:24px}
.picks .card .stand{font-size:15px}

.pillars .card .ph,.pillars .card .ph img{aspect-ratio:1/1}
@media(min-width:760px){.grid.c4.pillars{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid.c4.pillars{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}

/* tiles: square image cards, three per row, last row centred (same as residences) */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s4)}
.tiles>.card{flex:0 0 100%}
@media(min-width:640px){.tiles>.card{flex:0 0 calc((100% - var(--s4)) / 2)}}
@media(min-width:1000px){.tiles>.card{flex:0 0 calc((100% - 2 * var(--s4)) / 3)}}
.tiles .card .ph,.tiles .card .ph img{aspect-ratio:1/1}
.tiles .card h3{font-size:24px}
.tiles .card .stand{font-size:15px}

.matrix th:first-child{width:38%}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:left}
.matrix td:first-child{font-weight:500}

.credit{font-size:11px;color:var(--muted);letter-spacing:.04em;margin:4px 0 0}

/* amenities list */
ul.amenities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 var(--s5)}
@media(min-width:640px){ul.amenities{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){ul.amenities{grid-template-columns:repeat(3,1fr)}}
ul.amenities li{padding:12px 0;border-top:1px solid rgba(76,76,75,.16);font-weight:300}

/* guest quotes: three columns, no stars */
.quotes{display:grid;gap:var(--s5) var(--s5)}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes blockquote{max-width:none;font-size:16px;font-style:normal;font-weight:300;line-height:1.65;padding-top:var(--s3);border-top:1px solid var(--sage)}
.quotes blockquote p{margin:0 0 var(--s2);max-width:none}
.quotes blockquote p:before{content:"\201C";display:block;font-size:44px;line-height:.6;color:var(--sage);margin-bottom:var(--s2);font-weight:300}
.quotes blockquote footer{margin-top:var(--s2)}

/* the block under a residence or property hero sits close to it */
section.intro{padding-top:0}
section.intro .specs{margin-top:var(--s2)}

.wrap.single .know{max-width:760px}

/* a fine white line between two stone sections */
.pinstripe{height:2px;background:#fff}

/* Experiences: fuller cards and the stay builder */
.card.exp .detail{margin:var(--s2) 0 0;font-size:14px;line-height:1.6}
.card.exp .practical{margin:var(--s1) 0 var(--s2);font-size:12.5px;color:var(--muted);line-height:1.55}
.card.exp{display:flex;flex-direction:column;height:100%}
.card.exp .practical{margin-bottom:var(--s3)}
.card.exp .btn.add{font-size:11px;padding:8px 14px;margin-top:auto;align-self:stretch;text-align:center}
.card.exp .btn.add[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.planbar{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 var(--s3);color:var(--muted)}
.planbar a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--text)}
.planbar span{margin-left:var(--s2);color:var(--sage-deep)}
#planner{display:grid;gap:var(--s3)}
#planner label{display:grid;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted)}
#planner input,#planner select,#planner textarea{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--text);background:#fff;border:1px solid #cfcdc6;border-radius:3px;padding:10px 12px;width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:44px}
#planner textarea{height:auto}
#planner select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234C4C4B'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:30px}
#planner input[type=date]{display:block}
#planner .fields label.wide{grid-column:1/-1}
#planner .fields label{align-content:start}
#planner .fields{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
#planner input::placeholder{color:#b3b1aa}
#planner .actions{display:flex;gap:var(--s2);flex-wrap:wrap}
#planner .fine{font-size:12px;color:var(--muted);margin:0}
#plan-out{display:grid;gap:var(--s2);border-top:1px solid #d6d4cc;padding-top:var(--s3)}
#plan-text{font:inherit;font-size:13px;line-height:1.5;color:var(--text);background:#fff;border:1px solid #cfcdc6;border-radius:3px;padding:10px 12px;width:100%;box-sizing:border-box}
ul.chosen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.chosen li{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);background:#fff;border:1px solid #e3e1da;border-radius:3px;padding:8px 12px;font-size:14px}
ul.chosen li.empty{color:var(--muted);background:transparent;border-style:dashed}
ul.chosen .x{font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;border:none;color:var(--muted);cursor:pointer;padding:0}
ul.chosen .x:hover{color:var(--text)}
.btn.ghost{opacity:.85}

.grid.c1{grid-template-columns:1fr;max-width:420px}

.note{max-width:640px;margin:0 auto var(--s5);text-align:center;font-size:15px;line-height:1.6;color:var(--muted)}
.note a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--text)}

section.intro .note{margin:var(--s5) auto 0}
section.intro:has(.note){padding-bottom:var(--s3)}

.grid.c4 > img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

.card.place .where{margin:0 0 var(--s2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card.place .detail{margin:0 0 var(--s3)}

/* Header in Toi Toi Cream, the section tone, with charcoal text. */
header.site{background:var(--stone);border-bottom-color:#d3d0c8}
.panel-menu{background:var(--stone);border-top-color:#d3d0c8}
.mobile-menu{background:var(--stone)}

/* About: people as rows, small portrait left, text right */
#people .person,#chefs .person{display:grid;grid-template-columns:320px 1fr;gap:var(--s4);align-items:start;padding:var(--s4) 0;border-top:1px solid #d3d0c8}
#people .person:first-of-type,#chefs .person:first-of-type{border-top:0;padding-top:0}
#people .person .pic img,#chefs .person .pic img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
#chefs .person .pic img.top{object-position:50% 0}
#people .person h3,#chefs .person h3{margin:0 0 var(--s2);font-weight:300;font-size:26px}
#people .person p,#chefs .person p{max-width:64ch}
#people .person .credit,#chefs .person .credit{margin-top:var(--s2)}
@media(max-width:700px){#people .person,#chefs .person{grid-template-columns:1fr}#people .person .pic{max-width:320px}}

#chefs .extras{display:grid;grid-template-columns:repeat(2,160px);gap:var(--s2);margin-top:var(--s3)}
#chefs .extras img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

/* Room photographs: a small image above the room name, revealed on hover or tap */
.rooms div.has-photo{position:relative}
.rooms .room-photo{border:0;padding:0;position:absolute;left:0;bottom:calc(100% + 12px);width:min(100%,320px);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.12);background:transparent;line-height:0}
.rooms .room-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.rooms div.has-photo:hover .room-photo,.rooms div.has-photo:focus-within .room-photo,.rooms div.has-photo.open .room-photo{opacity:1;transform:none}
.rooms div.has-photo b{cursor:pointer}
.rooms div.has-photo b::after{content:" ·";color:var(--sage)}

/* Availability picker: date fields and a two-month calendar in the site's own style */
.avail{position:relative;margin-top:var(--s3);max-width:720px}
.avail-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:0;border:1px solid var(--text);border-radius:3px;overflow:hidden;background:#fff}
.avail-field{font:inherit;text-align:left;background:none;border:0;border-right:1px solid var(--text);padding:10px 16px;cursor:pointer;color:var(--text);display:grid;gap:2px}
.avail-field small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.avail-field span{font-size:15px}
.avail-field:hover{background:var(--sand)}
.avail-fields .btn.avail-go{border:0;border-radius:0;padding:10px 20px;align-self:stretch;display:flex;align-items:center;white-space:nowrap}
.avail-cal{position:absolute;left:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--stone);box-shadow:0 12px 32px rgba(0,0,0,.12);padding:var(--s3);width:min(720px,calc(100vw - 48px))}
.avail-months{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:640px){.avail-months{grid-template-columns:1fr}.avail-fields{grid-template-columns:1fr 1fr}.avail-fields .btn.avail-go{grid-column:1/-1;justify-content:center;border-top:1px solid var(--text)}.avail-field:nth-child(2){border-right:0}}
.avail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.avail-head b{font-weight:400;font-size:15px;letter-spacing:.02em}
.avail-head button{font:inherit;font-size:18px;background:none;border:0;color:var(--sage-deep);cursor:pointer;padding:0 6px;line-height:1}
.avail-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.avail-grid .dow{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.avail-grid button{font:inherit;font-size:13px;background:none;border:0;border-radius:3px;padding:8px 0;color:var(--text);cursor:pointer;line-height:1}
.avail-grid button:hover:not(:disabled){background:var(--sand)}
.avail-grid button.past{color:#c9c7c0;cursor:default}
.avail-grid button.booked{color:#b3b1aa;text-decoration:line-through;cursor:default}
.avail-grid button.sel{background:var(--text);color:#fff}
.avail-grid button.in{background:var(--stone)}
.avail-note{font-size:12px;color:var(--muted);margin:var(--s3) 0 0;max-width:none}
.avail-close{position:absolute;right:10px;top:8px;font:inherit;font-size:20px;background:none;border:0;color:var(--muted);cursor:pointer;line-height:1}

.avail-lead{margin:var(--s3) 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.avail-lead+.avail{margin-top:var(--s1)}

#corporate .extras img,#celebrations .extras img,#weddings .extras img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

/* Contact form: same field styling as the itinerary planner */
#enquiry{display:grid;gap:var(--s2)}
#enquiry label{display:grid;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted)}
#enquiry input,#enquiry select,#enquiry textarea{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--text);background:#fff;border:1px solid #cfcdc6;border-radius:3px;padding:10px 12px;width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:44px}
#enquiry textarea{height:auto}
#enquiry select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234C4C4B'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:30px}
#enquiry .fields{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
#enquiry .fields label.wide{grid-column:1/-1}
#enquiry input::placeholder,#enquiry textarea::placeholder{color:#b3b1aa}
#enq-out{display:grid;gap:var(--s2);margin-top:var(--s3)}
#enq-text{font:inherit;font-size:13px;line-height:1.5;color:var(--text);background:#fff;border:1px solid #cfcdc6;border-radius:3px;padding:10px 12px;width:100%;box-sizing:border-box}
@media(max-width:520px){#enquiry .fields{gap:var(--s2)}}
.banner{margin-bottom:var(--s4)}
.banner img{width:100%;height:auto;display:block}
.banner .credit{margin-top:var(--s1)}

/* Mobile pass 2026-09-25 */
.split>*{min-width:0}
.gallery img:first-child{grid-column:span 2}
#enquiry label,#planner label,.know label{min-width:0}
#enquiry input,#enquiry select,#enquiry textarea{min-width:0;max-width:100%}
@media(max-width:760px){ol.values p:only-of-type,ol.values p:first-of-type:not(:only-of-type),ol.values p:nth-of-type(2){grid-row:auto}}
@media(max-width:600px){
dl.kv{grid-template-columns:1fr;gap:0}
dl.kv dt{margin-top:var(--s2);padding-top:0}
dl.kv dt:first-child{margin-top:0}
table{font-size:13px}
th,td{padding:10px 8px 10px 0}
td.num,th.num{padding-left:var(--s2)}
.btn{white-space:normal;text-align:center;max-width:100%;box-sizing:border-box}
}
@media(max-width:759px){.grid.photos{grid-template-columns:1fr 1fr;gap:var(--s2)}}
@media(max-width:600px){.card.place .ph,.card.place .ph img,.card.exp .ph,.card.exp .ph img,.tiles .card .ph,.tiles .card .ph img{aspect-ratio:3/2}}
/* Mobile menu: groups expand on tap */
.mobile-menu button.group{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--mist);font-family:inherit;font-size:20px;font-weight:300;color:var(--text);padding:8px 0;margin:0;text-align:left;cursor:pointer;-webkit-appearance:none}
.mobile-menu .chev{width:9px;height:9px;border-right:1px solid var(--text);border-bottom:1px solid var(--text);transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .25s}
.mobile-menu button[aria-expanded="true"] .chev{transform:rotate(225deg);margin-bottom:-2px}
.mobile-menu .subs{display:flex;flex-direction:column;padding:4px 0 8px;border-bottom:1px solid var(--mist)}
#proof img.qualmark{display:block;width:120px;max-width:120px;height:auto;margin-top:var(--s4)}

/* Guest guide (/guide/<property>/) */
body.guide .gtitle{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text);margin-left:auto;margin-right:var(--s3)}
body.guide header.site>.wrap{gap:var(--s2)}
body.guide .actions .btn.small{display:inline-block}
.gnav{position:sticky;top:var(--chrome,88px);z-index:19;background:var(--stone);border-bottom:1px solid #d3d0c8}
.gnav .wrap{display:flex;gap:var(--s3);overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-top:0;padding-bottom:0}
.gnav .wrap::-webkit-scrollbar{display:none}
.gnav a{display:inline-block;padding:14px 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);border-bottom:2px solid transparent;text-decoration:none}
.gnav a.on{border-bottom-color:var(--text)}
.ghero{position:relative;padding:0}
.ghero>img{width:100%;height:52svh;min-height:320px;max-height:560px;object-fit:cover;display:block}
@media(min-width:900px){.ghero>img{height:calc(100svh - var(--chrome,88px) - 48px);max-height:640px;min-height:420px}}
.ghero .wrap{position:absolute;left:0;right:0;bottom:var(--s4);color:#fff}
.ghero .eyebrow,.ghero h1{color:#fff;margin:0}
.ghero h1{font-size:44px;font-weight:300}
body.guide section h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:var(--s4) 0 var(--s1);color:var(--text)}
body.guide section h3:first-of-type{margin-top:var(--s3)}
body.guide ul{padding-left:1.2em;margin:0 0 var(--s2)}
body.guide li{margin:0 0 6px;font-weight:300}
.contactbar{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:var(--s4) 0;padding:var(--s3) 0;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.contactbar p{margin:0}
.contactbar .eyebrow{margin-bottom:6px}
.alert{background:var(--sage-deep,#5f665b);color:#fff;padding:var(--s3);margin:var(--s3) 0}
.alert a{color:#fff;text-decoration:underline}
.secret{font-variant-numeric:tabular-nums}
.todo{color:var(--muted);font-style:italic}
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 var(--s4)}
.tabs [role=tab]{font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--text);color:var(--text);padding:12px 18px;cursor:pointer;border-radius:3px}
.tabs [role=tab][aria-selected=true]{background:var(--text);color:var(--stone)}
.tabpane .rhead{display:grid;gap:var(--s3);margin-bottom:var(--s3)}
.tabpane .rhead img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tabpane .rhead h2{margin:0 0 var(--s1)}
.tabpane .lede{margin:0}
.rules{display:grid;gap:var(--s2) var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rules h3{margin-top:var(--s2)!important}
.places .place{border-top:1px solid var(--stone);padding-top:var(--s2)}
.places .place h3{margin:var(--s1) 0!important;text-transform:none;letter-spacing:0;font-size:20px;font-weight:400}
.places .place .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.places .place p{margin:0 0 var(--s1);font-weight:300}
.places .place .meta{font-size:13px;color:var(--muted)}
.narrow0{max-width:760px}
@media(min-width:900px){.tabpane .rhead{grid-template-columns:1fr 1fr;align-items:center}}
@media(max-width:600px){body.guide .gtitle{display:none}.gnav{top:64px}.ghero h1{font-size:34px}}
.ghero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,30,28,.55) 0,rgba(30,30,28,0) 55%)}
.acc{border-top:1px solid var(--stone)}
.acc:last-of-type{border-bottom:1px solid var(--stone)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:8px;height:8px;border-right:1px solid var(--text);border-bottom:1px solid var(--text);transform:rotate(45deg);margin-right:6px;transition:transform .2s}
.acc[open] summary::after{transform:rotate(225deg);margin-bottom:-4px}
.acc>div{padding:0 0 var(--s3)}
.acc>div>p:first-child{margin-top:0}
.places .place .ph{position:relative;overflow:hidden}
.places .place .ph img.alt{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.places .place:hover .ph img.alt{opacity:1}
.places .place{display:flex;flex-direction:column}
.places .place .btn.add{font-size:11px;padding:8px 14px;margin-top:auto;align-self:stretch;text-align:center}
.tiaki{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:var(--s4);text-decoration:none;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.tiaki img{width:96px;height:auto;display:block}
.split.sleeping h2{margin:0 0 var(--s2);line-height:1.05}
.split.sleeping .pic img{width:100%;max-width:400px;display:block;margin-left:auto}
.split.grounds h2{margin:0 0 var(--s2);line-height:1.05}
@media(min-width:900px){.split.grounds .eyebrow{margin-top:-30px}}
.hero .stand-lead{margin-top:var(--s4)}
@media(min-width:900px){.intro.property .lead{margin-left:calc((100% - var(--s6)) * 5 / 12 + var(--s6));max-width:none}.intro.property .avail{max-width:none}}
.hero>img.top{object-position:50% 20%}
.tours .card.exp .ph img{aspect-ratio:4/3}
.tours ul.incl{margin:var(--s1) 0 var(--s3);padding-left:1.1em;font-size:14px;font-weight:300}
.tours ul.incl li{margin:0 0 4px}
.tours .card.exp .practical{margin-top:var(--s2)}
.tt-add[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.tt-add{font-size:11px;padding:8px 14px}