/* JPM Real Estate Photography — site stylesheet
   Design system: Bodoni Moda (display) + Jost (text). Limestone / Basalt / Brass.
   Legibility pass (Chad, 2026-09-03): headings pinned to a low optical size so hairlines hold on screen,
   body weight 400, prices set in Jost with tabular figures, secondary text darkened. */

:root{
  --ivory:#F1EDE5; --ivory-2:#E9E4DA; --black:#161513; --black-2:#1E1D1A;
  --brass:#B3986B; --brass-deep:#8A7147; --ink:#1A1916; --stone:#5C5749;
  --hair:#D3CCBE; --hair-dark:rgba(241,237,229,.18);
  --ivory-80:rgba(241,237,229,.82); --ivory-60:rgba(241,237,229,.62);
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Satoshi","Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,5vw,4.5rem); --gap:clamp(.75rem,1.4vw,1.5rem); --section:clamp(4rem,7vw,6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:1.05rem;line-height:1.65;letter-spacing:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--brass);color:var(--black)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;letter-spacing:0;font-optical-sizing:none;font-variation-settings:"opsz" 11}
h2{font-family:var(--sans);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.025em}
h3{font-family:var(--sans);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.kicker{font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.dark .kicker{color:var(--ivory-60)}
.num{font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--ivory);transition:background .6s var(--ease-out),color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:5.25rem}
.nav.scrolled,.nav.solid{background:rgba(241,237,229,.94);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hair)}
.nav.scrolled .wrap{height:4.25rem}
.brand{display:block;line-height:0}
.brand img{height:2.6rem;width:auto;transition:opacity .4s var(--ease-out)}
.brand .lg-dark{display:none}
.nav.scrolled .brand .lg-light,.nav.solid .brand .lg-light{display:none}
.nav.scrolled .brand .lg-dark,.nav.solid .brand .lg-dark{display:block}
.nav.menu-open .brand .lg-dark{display:none}.nav.menu-open .brand .lg-light{display:block}
.links{display:flex;gap:2.25rem;align-items:center}
.links a{font-size:.9rem;letter-spacing:.08em;font-weight:400;position:relative;padding:.25rem 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.links a:hover::after,.links a[aria-current="page"]::after{transform:scaleX(1)}
.links .cta{border:1px solid currentColor;padding:.6rem 1.2rem;transition:background .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out)}
.links .cta::after{display:none}
.links .cta:hover{background:var(--brass);border-color:var(--brass);color:var(--black)}
.menu-btn{display:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
@media (max-width:860px){
  .links{display:none}
  .links.open{display:flex;position:fixed;inset:0;background:var(--black);color:var(--ivory);flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--pad);gap:1.4rem}
  .links.open a{font-family:var(--sans);font-weight:500;font-size:2rem;letter-spacing:0}
  .links.open .cta{font-family:var(--sans);font-size:.9rem;letter-spacing:.08em;margin-top:1rem}
  .menu-btn{display:block;position:relative;z-index:60}
  .nav.menu-open{color:var(--ivory);background:transparent;box-shadow:none;backdrop-filter:none}
}

/* hero (home) */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;color:var(--ivory);overflow:hidden;background:var(--black)}
.hero .media{position:absolute;inset:0}
.hero .media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.06);animation:settle 3.2s var(--ease-out) forwards}
@keyframes settle{to{transform:scale(1)}}
/* Film opening (home): the photo is the poster, the film fades in behind the same headline once it is actually playing */
.hero .media.film{isolation:isolate}
.hero .media.film img{animation:none;transform:none;object-position:50% 50%}  /* poster = the film's first frame; centered so it crops exactly like the centered cover iframe (2026-09-10) */
.hero .media.film .film-wrap{position:absolute;inset:0;overflow:hidden;container-type:size;opacity:0;transition:opacity 1.4s var(--ease-out)}
.hero .media.film .film-wrap.on{opacity:1}
.hero .media.film .film-wrap iframe{position:absolute;top:50%;left:50%;width:calc(max(100cqw,177.78cqh) + 2px);height:calc(max(100cqh,56.25cqw) + 2px);transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero .media.film .film-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.hero .media.film::after{z-index:1}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,21,19,.84) 0%,rgba(22,21,19,.36) 38%,rgba(22,21,19,0) 70%),linear-gradient(to right,rgba(22,21,19,.38),rgba(22,21,19,0) 55%)}
.hero .wrap{position:relative;width:100%;padding-bottom:clamp(3rem,7vw,6rem);padding-top:9rem}
.hero h1{font-size:clamp(2.6rem,5.8vw,6rem);line-height:1.02;max-width:13ch;font-variation-settings:"opsz" 14;font-weight:500}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:rise 1.4s var(--ease-out) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero .lede{margin-top:2rem;max-width:34rem;font-size:1.15rem;line-height:1.6;color:var(--ivory-80);opacity:0;animation:fade 1.6s var(--ease-out) .55s forwards}
.hero .actions{margin-top:2.5rem;display:flex;gap:2.25rem;align-items:center;flex-wrap:wrap;opacity:0;animation:fade 1.6s var(--ease-out) .8s forwards}
.hero .place{position:absolute;right:var(--pad);bottom:clamp(3rem,7vw,6rem);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-60);opacity:0;animation:fade 1.6s var(--ease-out) 1.1s forwards}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@media (max-width:860px){.hero .place{display:none}}

/* page hero (inner pages) */
.page-hero{background:var(--black);color:var(--ivory);padding:8.5rem 0 clamp(2.5rem,4vw,3.5rem)}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1.04;max-width:18ch}
.page-hero .lede{margin-top:1.5rem;max-width:36rem;font-size:1.15rem;color:var(--ivory-80)}
.page-hero .kicker{margin-bottom:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:1rem 1.75rem;border:1px solid currentColor;transition:background .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out)}
.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--black)}
.btn.solid{background:var(--brass);border-color:var(--brass);color:var(--black)}
.btn.solid:hover{background:var(--ivory);border-color:var(--ivory);color:var(--black)}
.link{font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding-bottom:.35rem}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform-origin:left;transition:transform .6s var(--ease-out)}
.link:hover::after{transform:scaleX(.5)}

/* sections */
section{padding-top:var(--section);padding-bottom:var(--section)}
.dark{background:var(--black);color:var(--ivory)}
.tint{background:var(--ivory-2)}
.h2{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.04}
.h3{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.25}
.muted{color:var(--stone)}
.dark .muted{color:var(--ivory-80)}
.prose{max-width:38rem}
.prose p{margin-bottom:1.1rem}
.prose ul{padding-left:1.1rem;margin:0 0 1.1rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--brass)}
.prose h3{margin:2.5rem 0 .75rem;font-size:1.55rem}

/* reveal */
html.js .rv{opacity:.001;transform:translateY(18px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}

/* frames */
.frame{overflow:hidden;background:var(--ivory-2)}
.dark .frame{background:var(--black-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease-out)}
.frame:hover img{transform:scale(1.03)}

/* why */
.why .intro{grid-column:1/8}
.why .intro .h2{margin-top:1.25rem}
.beats{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(2rem,4vw,3.5rem)}
.beat{display:contents}
.beat .txt{grid-column:1/5;align-self:end;padding-bottom:.5rem}
.beat .pic{grid-column:5/13}
.beat:nth-child(1) .txt,.beat:nth-child(1) .pic{grid-row:1}
.beat:nth-child(2) .txt,.beat:nth-child(2) .pic{grid-row:2}
.beat:nth-child(3) .txt,.beat:nth-child(3) .pic{grid-row:3}
.beat:nth-child(2) .txt{grid-column:9/13}
.beat:nth-child(2) .pic{grid-column:1/9}
.beat .h3{margin-bottom:1.25rem}
.beat p{max-width:30rem;color:var(--ivory-80)}
.beat .frame{aspect-ratio:16/10}
@media (max-width:860px){
  .why .intro{grid-column:1/-1}
  .beats{display:flex;flex-direction:column;gap:4rem}
  .beat{display:grid;grid-template-columns:1fr;gap:1.5rem}
  .beat .txt,.beat:nth-child(even) .txt{order:2;grid-column:1/-1}
  .beat .pic,.beat:nth-child(even) .pic{order:1;grid-column:1/-1}
  .beat:nth-child(2) .frame{aspect-ratio:4/3}
  .beat .txt,.beat .pic{grid-row:auto!important}
}

/* work (home gallery) */
.work .head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.work .head .h2{margin-top:1rem}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;display:flex;flex-direction:column}
.tile .frame{flex:1;min-height:0;width:100%}
.tile figcaption{margin-top:.8rem;display:flex;justify-content:space-between;font-size:.85rem;letter-spacing:.04em;color:var(--stone)}
.tile figcaption em{font-style:normal;color:var(--brass-deep)}
.t1{grid-column:1/9;aspect-ratio:16/9}.t2{grid-column:9/13;aspect-ratio:2/3;align-self:end}
.t3{grid-column:1/6;aspect-ratio:3/2;margin-top:clamp(1rem,2vw,2rem)}.t4{grid-column:6/13;aspect-ratio:16/10;margin-top:clamp(1rem,2vw,2rem)}
.t5{grid-column:1/8;aspect-ratio:3/2;margin-top:clamp(1rem,2vw,2rem)}.t6{grid-column:8/13;aspect-ratio:4/3;margin-top:clamp(1rem,2vw,2rem);align-self:end}
@media (max-width:860px){.t1,.t2,.t3,.t4,.t5,.t6{grid-column:1/-1;margin-top:0;aspect-ratio:4/3}.t2{aspect-ratio:3/4}}
.sites{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--hair)}
.sites .row{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.sites .row .go{transition:color .4s var(--ease-out)}
.sites .row:hover .go{color:var(--brass-deep)}
.sites .row .addr{font-family:var(--sans);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.35rem)}
.sites .row .go{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.sites .lead{padding:1.35rem 0 1.5rem;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap}

/* services */
.services .grid{align-items:start}
.services .side{grid-column:1/6;position:sticky;top:6rem}
.services .side .frame{aspect-ratio:4/5;position:relative}
.services .side .frame img{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease-out)}
.services .side .frame img.on{opacity:1}
.services .list{grid-column:7/13}
.services .list .h2{margin:1rem 0 2.5rem}
.svc{border-top:1px solid var(--hair-dark);padding:1.5rem 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.5rem}
.svc:last-child{border-bottom:1px solid var(--hair-dark)}
.svc h3{transition:color .4s var(--ease-out)}
.svc:hover h3{color:var(--brass)}
.svc h3{font-size:clamp(1.35rem,2vw,1.8rem)}
.svc p{color:var(--ivory-80);font-size:1rem}
@media (max-width:860px){.services .side{display:none}.services .list{grid-column:1/-1}.svc{grid-template-columns:1fr;gap:.4rem}}

/* process */
.process .head{grid-column:1/7}
.process .head .h2{margin-top:1rem}
.process .head p{margin-top:1.5rem;max-width:30rem}
.steps{grid-column:7/13;counter-reset:step}
.step{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;padding:1.75rem 0;border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--sans);font-size:1rem;letter-spacing:.08em;color:var(--brass-deep);line-height:1.9}
.step h3{font-size:1.45rem;margin-bottom:.4rem}
.step p{color:var(--stone);font-size:1rem;max-width:28rem}
@media (max-width:860px){.process .head,.steps{grid-column:1/-1}}

/* pricing */
.pricing .head{grid-column:1/-1;max-width:40rem}
.pricing .head .h2{margin-top:1rem}
.pricing .head p{margin-top:1.25rem}
.tiers{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.tiers.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tier{padding:2.5rem clamp(1.25rem,2.5vw,2.5rem) 2.75rem;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:1.25rem}
.tier:first-child{border-left:0;padding-left:0}
.tier .for{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:500}
.tier h3{font-size:1.75rem}
.tier .price{font-family:var(--sans);font-weight:500;font-size:clamp(2.2rem,3.2vw,3rem);line-height:1;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.tier .price small{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-left:.5rem;font-weight:500}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.98rem}
.tier ul li{padding-left:1.1rem;position:relative}
.tier ul li::before{content:"";position:absolute;left:0;top:.8em;width:.35rem;height:1px;background:var(--brass)}
.tier .btn{align-self:flex-start;margin-top:auto}
.tier.feature{background:var(--ivory-2);margin:-1px 0;padding-top:calc(2.5rem + 1px);border-top:1px solid var(--brass)}
.pricing .note{grid-column:1/-1;margin-top:1.75rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.95rem;color:var(--stone)}
@media (max-width:1000px){.tiers.four{grid-template-columns:repeat(2,minmax(0,1fr))}.tiers.four .tier:nth-child(3){border-left:0;padding-left:0}.tiers.four .tier:nth-child(n+3){border-top:1px solid var(--hair)}}
@media (max-width:860px){.tiers,.tiers.four{grid-template-columns:1fr;border-top:0}.tier,.tiers.four .tier{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--hair)}.tier.feature{padding-left:1.25rem;padding-right:1.25rem;margin:0}}

/* add-on table (pricing page) */
.addons{grid-column:1/-1;margin-top:clamp(3rem,6vw,5rem)}
.addons .h3{margin-bottom:1.5rem}
.addon{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:1.5rem;padding:1.2rem 0;border-top:1px solid var(--hair);align-items:baseline}
.addon:last-child{border-bottom:1px solid var(--hair)}
.addon b{font-weight:500}
.addon .muted{font-size:.98rem}
.addon .num{font-size:1.15rem;white-space:nowrap}
@media (max-width:700px){.addon{grid-template-columns:1fr auto}.addon .muted{grid-column:1/-1}}

/* voices */
.voices .grid{align-items:center}
.voices .q{grid-column:2/12;text-align:center;min-height:14rem;position:relative}
.quote{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-out);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem}
.quote.on{opacity:1;position:relative;transition:opacity 1.1s var(--ease-out) .45s}
.quote blockquote{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.3;text-wrap:balance;max-width:28ch;font-optical-sizing:none;font-variation-settings:"opsz" 11}
.quote cite{font-style:normal;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);font-weight:500}
.dots{grid-column:2/12;display:flex;justify-content:center;gap:1.1rem;margin-top:2.5rem}
.dots button{width:2.2rem;height:1px;background:var(--hair);transition:background .5s var(--ease-out);padding:.6rem 0;background-clip:content-box}
.dots button.on{background-color:var(--brass)}
.voices .more{grid-column:2/12;text-align:center;margin-top:2rem}
@media (max-width:860px){.voices .q,.dots,.voices .more{grid-column:1/-1}}

/* ===== booking flow ===== */
.book .lead{grid-column:1/6}
.book .lead .h2{margin-top:1rem}
.book .lead p{margin-top:1.5rem;max-width:26rem}
.book .lead .contact{margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem;font-size:1.05rem}
.book .lead .contact a{border-bottom:1px solid var(--hair-dark);padding-bottom:.15rem;align-self:flex-start;transition:border-color .5s var(--ease-out)}
.book .lead .contact a:hover{border-color:var(--brass)}
.flow{grid-column:7/13}
@media (max-width:860px){.book .lead,.flow{grid-column:1/-1}}

.flow-nav{display:flex;gap:1.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--hair-dark)}
.flow-nav button{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-60);padding:0 0 .9rem;position:relative;font-weight:500}
.flow-nav button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.flow-nav button.on{color:var(--ivory)}
.flow-nav button.on::after,.flow-nav button.done::after{transform:scaleX(1)}
.flow-nav button.done{color:var(--ivory-80)}
.flow-nav button:disabled{cursor:default}
.pane{display:none}
.pane.on{display:block;animation:fade .7s var(--ease-out)}
.pane .q{font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.25;margin-bottom:1.25rem}
.pane .q + .q{margin-top:2.5rem}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem;margin-bottom:.5rem}
.choice{border:1px solid var(--hair-dark);padding:1rem 1.1rem;text-align:left;display:flex;flex-direction:column;gap:.15rem;transition:border-color .4s var(--ease-out),background .4s var(--ease-out);min-height:4.6rem}
.choice:hover{border-color:var(--ivory-60)}
.choice.on{border-color:var(--brass);background:rgba(179,152,107,.12)}
.choice b{font-weight:500;font-size:1.02rem}
.choice small{color:var(--ivory-60);font-size:.85rem;letter-spacing:.02em}
.pane-actions{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-top:2.25rem}
.pane-actions .back{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-60);font-weight:500}
.pane-actions .back:hover{color:var(--ivory)}

.reco{border-top:1px solid var(--brass);padding-top:1.25rem;margin-bottom:2rem;transition:opacity .4s var(--ease-out)}
.reco.swap{opacity:.3}
.reco-k{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:500}
.reco-line{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline;margin:.5rem 0 .4rem}
.reco-v{font-family:var(--sans);font-weight:500;font-size:1.6rem;line-height:1.1}
.reco-price{font-size:1.5rem}
.reco-why{color:var(--ivory-80);font-size:1rem;max-width:32rem}
.reco ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.35rem 1.5rem;font-size:.95rem;color:var(--ivory-80)}
.reco ul li{padding-left:1rem;position:relative}
.reco ul li::before{content:"";position:absolute;left:0;top:.8em;width:.35rem;height:1px;background:var(--brass)}

.alt-k{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-60);margin:0 0 .75rem;font-weight:500}
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem;margin-bottom:2.25rem}
.pkgs .choice small{font-variant-numeric:tabular-nums}
.pkgs .choice .tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:.35rem}
.addl{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair-dark);margin-bottom:1.5rem}
.addl label{display:grid;grid-template-columns:1.25rem 1fr auto;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--hair-dark);cursor:pointer}
.addl input{appearance:none;-webkit-appearance:none;width:1rem;height:1rem;border:1px solid var(--ivory-60);margin:0;position:relative;top:.1rem;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}
.addl input:checked{background:var(--brass);border-color:var(--brass)}
.addl b{font-weight:400}
.addl small{display:block;color:var(--ivory-60);font-size:.85rem}
.addl .num{white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1rem 0 0}
.total .k{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-60);font-weight:500}
.total .num{font-size:1.9rem}
.total small{display:block;color:var(--ivory-60);font-size:.85rem;width:100%}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.5rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-60);font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-weight:400;color:var(--ivory);background:transparent;border:0;border-bottom:1px solid var(--hair-dark);padding:.6rem 0;border-radius:0;transition:border-color .5s var(--ease-out);appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B3986B' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .2rem center;padding-right:1.5rem}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field input.bad,.field select.bad{border-color:#C86B5A}
.field textarea{resize:vertical;min-height:4.5rem}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85)}
.summary{border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);padding:1rem 0;margin-bottom:2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.summary b{font-weight:500;font-size:1.2rem}
.summary .change{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:500}
.submit{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-top:2rem}
.submit small{color:var(--ivory-60);font-size:.9rem}
.err{color:#E0A091;font-size:.95rem;margin-top:1rem;display:none}
.err.on{display:block}
.done{display:none;padding:1rem 0}
.done.on{display:block}
.done .h3{margin-bottom:.75rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
@media (max-width:600px){.fields{grid-template-columns:1fr}}

/* portfolio */
.filters{display:flex;gap:1.75rem;flex-wrap:wrap;margin:1.75rem 0 0;border-bottom:1px solid var(--hair-dark);padding-bottom:1rem}
.filters button{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-60);position:relative;padding-bottom:.4rem;font-weight:500}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.filters button.on{color:var(--ivory)}
.filters button.on::after{transform:scaleX(1)}
.masonry{columns:3;column-gap:.75rem}
.masonry figure{margin:0 0 .75rem;break-inside:avoid;display:block;position:relative}
.masonry figure.hide{display:none}
.masonry .frame{cursor:zoom-in}
.masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;display:flex;justify-content:space-between;font-size:.8rem;color:var(--ivory);background:linear-gradient(to top,rgba(22,21,19,.7),rgba(22,21,19,0));opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.masonry figure:hover figcaption{opacity:1}
.masonry figcaption em{font-style:normal;color:var(--brass)}
@media (max-width:1000px){.masonry{columns:2}}
@media (max-width:600px){.masonry{columns:1}}
.lightbox{position:fixed;inset:0;background:rgba(22,21,19,.96);z-index:100;display:none;align-items:center;justify-content:center;padding:4rem var(--pad)}
.lightbox.on{display:flex;animation:fade .4s var(--ease-out)}
.lightbox img{max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
/* the high-res layer: same box as the first image, faded in only once it is fully decoded */
.lightbox img.hi{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 2*var(--pad));box-shadow:none;opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none}
.lightbox.hi-on img.hi{opacity:1}
.lightbox .cap{position:absolute;left:var(--pad);bottom:1.5rem;color:var(--ivory-80);font-size:.9rem}
.lightbox .x,.lightbox .p,.lightbox .n{position:absolute;color:var(--ivory);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:1rem;font-weight:500}
.lightbox .x{top:1.25rem;right:var(--pad)}
.lightbox .p{left:var(--pad);top:50%;transform:translateY(-50%)}
.lightbox .n{right:var(--pad);top:50%;transform:translateY(-50%)}

/* prepare checklist */
.check{grid-column:1/8}
.check .h3{margin:2.5rem 0 1rem}
.check ul{list-style:none;padding:0;margin:0}
.check li{padding:.9rem 0 .9rem 2rem;border-top:1px solid var(--hair);position:relative}
.check li:last-child{border-bottom:1px solid var(--hair)}
.check li::before{content:"";position:absolute;left:0;top:1.55rem;width:.9rem;height:1px;background:var(--brass)}
.aside{grid-column:9/13;position:sticky;top:6rem;align-self:start}
.aside .h3{margin-bottom:1rem;font-size:1.5rem}
.aside p{color:var(--stone);margin-bottom:1rem;font-size:1rem}
@media (max-width:860px){.check,.aside{grid-column:1/-1}.aside{position:static}}

/* contact strip */
.contact-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:3rem}
.contact-grid div{border-top:1px solid var(--hair);padding-top:1.25rem}
.contact-grid b{display:block;font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:.5rem}
.contact-grid a{font-size:1.15rem;border-bottom:1px solid var(--hair)}
@media (max-width:700px){.contact-grid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--black);color:var(--ivory);border-top:1px solid var(--hair-dark);padding:3rem 0 2.5rem}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end}
footer .brand img{height:3.2rem}
footer .cols{display:flex;gap:4rem;flex-wrap:wrap}
footer .col{display:flex;flex-direction:column;gap:.45rem;font-size:.95rem;color:var(--ivory-80)}
footer .col b{font-weight:500;color:var(--ivory-60);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem}
footer .col a:hover{color:var(--ivory)}
footer .fine{width:100%;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--hair-dark);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--ivory-60);letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .hero h1 .line span{transform:none}.hero .lede,.hero .actions,.hero .place{opacity:1}
  .hero .media img{transform:none}
}

/* ===== photo-first additions (research pass 2026-09-03) ===== */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding:1.75rem 0 0;border-top:1px solid var(--hair-dark)}
.facts div{display:flex;flex-direction:column;gap:.2rem}
.facts b{font-weight:500;font-size:1.15rem}
.facts span{color:var(--ivory-60);font-size:.92rem}
@media (max-width:700px){.facts{grid-template-columns:1fr;gap:1rem}}
.band{position:relative;min-height:72vh;background:var(--black);overflow:hidden;display:flex;align-items:flex-end}
.band picture,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,21,19,.7),rgba(22,21,19,0) 45%)}
.band .wrap{position:relative;width:100%;padding-bottom:2.5rem;color:var(--ivory);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.band .h2{max-width:20ch;font-family:var(--serif);font-weight:500;letter-spacing:0;font-optical-sizing:none;font-variation-settings:"opsz" 11}
.cattiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.cattile{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black-2);display:block;color:var(--ivory)}
.cattile picture,.cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease-out)}
.cattile:hover img{transform:scale(1.04)}
.cattile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,21,19,.72),rgba(22,21,19,.05) 55%)}
.cattile .lbl{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.cattile .lbl b{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.2rem,1.6vw,1.5rem)}
.cattile .lbl span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-80)}
.cattiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.cattiles,.cattiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cattiles,.cattiles.six{grid-template-columns:1fr}.cattile{aspect-ratio:16/10}}

#gridHead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
#tilesWrap[hidden]{display:none}

.masonry figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.masonry figcaption em{flex-shrink:0}

/* ---- 2026-09-03 s010: hero descender fix, nav density, stars, slim process, property pages ---- */
.hero h1 .line{padding-bottom:.14em;margin-bottom:-.14em}
@media (min-width:861px) and (max-width:1240px){.links{gap:1.5rem}.links a{font-size:.84rem;letter-spacing:.06em}.links .cta{padding:.55rem 1rem}}
.stars{display:inline-flex;align-items:center;gap:.6rem;font-size:.86rem;letter-spacing:.04em;color:inherit;white-space:nowrap}
.stars .st{color:var(--brass);letter-spacing:.12em;font-size:.95rem;line-height:1}
.stars .num{font-weight:500}
.hero .stars{margin-top:1.75rem;opacity:0;animation:fade 1.6s var(--ease-out) 1s forwards;color:var(--ivory-80)}
.voices .stars{justify-content:center;width:100%}
.process.slim{padding-top:clamp(2rem,3.5vw,3rem);padding-bottom:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stepline{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.stepline .kicker{white-space:nowrap}
.stepline ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;counter-reset:s}
.stepline li{display:flex;flex-direction:column;gap:.15rem;position:relative;padding-left:2rem}
.stepline li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.2rem;font-size:.8rem;letter-spacing:.08em;color:var(--brass-deep)}
.stepline b{font-weight:500;font-size:1.02rem}
.stepline span{color:var(--stone);font-size:.9rem}
@media (max-width:1000px){.stepline{grid-template-columns:1fr;gap:1.25rem}.stepline ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stepline ol{grid-template-columns:1fr}}
/* property cards (home, index, property-websites) */
.propcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.propcard{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--black-2);display:block;color:var(--ivory)}
.propcard picture,.propcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease-out)}
.propcard:hover img{transform:scale(1.04)}
.propcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,21,19,.78),rgba(22,21,19,.05) 55%)}
.propcard .lbl{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;z-index:1;display:flex;flex-direction:column;gap:.25rem}
.propcard .lbl b{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,1.7vw,1.7rem);line-height:1.1;font-optical-sizing:none;font-variation-settings:"opsz" 11}
.propcard .lbl span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-80)}
.propcard .lbl small{font-size:.85rem;color:var(--ivory-60);margin-top:.2rem}
@media (max-width:1100px){.propcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.propcards{grid-template-columns:1fr}.propcard{aspect-ratio:4/3}}
/* property page — echoes his Rela sites: full-bleed hero, vertical address, stats, View N photos */
.prop-hero{position:relative;min-height:100svh;background:var(--black);color:var(--ivory);overflow:hidden}
.prop-hero .media,.prop-hero .media picture,.prop-hero .media img{position:absolute;inset:0;width:100%;height:100%}
.prop-hero .media img{object-fit:cover;transform:scale(1.06);animation:settle 3.2s var(--ease-out) forwards}
.prop-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,21,19,.72) 0%,rgba(22,21,19,.18) 40%,rgba(22,21,19,0) 65%),linear-gradient(to right,rgba(22,21,19,.42),rgba(22,21,19,0) 50%)}
.prop-hero .addr{position:absolute;left:var(--pad);bottom:clamp(6rem,14vh,9rem);display:flex;gap:1rem;align-items:flex-end;opacity:0;animation:fade 1.6s var(--ease-out) .4s forwards}
.prop-hero .addr h1{font-size:clamp(2.2rem,4vw,4rem);line-height:1;max-width:none;max-inline-size:min(56svh,15ch);writing-mode:vertical-rl;transform:rotate(180deg);font-variation-settings:"opsz" 14}
.prop-hero .addr p{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-80);padding-bottom:.4rem}
.prop-hero .stats{position:absolute;right:var(--pad);bottom:clamp(6rem,14vh,9rem);margin:0;padding:0;list-style:none;text-align:right;display:flex;flex-direction:column;gap:.5rem;opacity:0;animation:fade 1.6s var(--ease-out) .7s forwards}
.prop-hero .stats li{display:flex;align-items:baseline;justify-content:flex-end;gap:.6rem}
.prop-hero .stats b{font-family:var(--sans);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.01em}
.prop-hero .stats span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-80);min-width:5.5ch;text-align:left}
.prop-hero .view{position:absolute;right:var(--pad);bottom:2rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border:1px solid var(--ivory-60);padding:.75rem 1.1rem;opacity:0;animation:fade 1.6s var(--ease-out) 1s forwards;transition:background .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out)}
.prop-hero .view:hover{background:var(--brass);border-color:var(--brass);color:var(--black)}
.prop-hero .down{position:absolute;left:var(--pad);bottom:2rem;font-size:1.4rem;color:var(--ivory-80);opacity:0;animation:fade 1.6s var(--ease-out) 1.2s forwards}
@media (max-width:860px){
  .prop-hero{min-height:92svh}
  .prop-hero .addr{left:var(--pad);right:var(--pad);bottom:8.5rem;flex-direction:column;align-items:flex-start;gap:.5rem}
  .prop-hero .addr h1,.prop-hero .addr p{writing-mode:horizontal-tb;transform:none;padding:0}
  .prop-hero .addr h1{font-size:clamp(2.2rem,9vw,3rem);max-width:14ch}
  .prop-hero .stats{position:absolute;left:var(--pad);right:var(--pad);bottom:5rem;flex-direction:row;flex-wrap:wrap;gap:.5rem 1.4rem;text-align:left}
  .prop-hero .stats li{justify-content:flex-start;gap:.4rem}
  .prop-hero .stats b{font-size:1.3rem}.prop-hero .stats span{min-width:0}
  .prop-hero .view{right:var(--pad);bottom:1.4rem}.prop-hero .down{display:none}
}
.prop-nav{position:sticky;top:0;z-index:40;background:rgba(241,237,229,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hair)}
.prop-nav .wrap{display:flex;justify-content:space-between;align-items:center;height:3.5rem;gap:1.5rem}
.prop-nav .secs{display:flex;gap:1.75rem}
.prop-nav .secs a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--stone);padding:.4rem 0;border-bottom:1px solid transparent;transition:color .4s var(--ease-out),border-color .4s var(--ease-out)}
.prop-nav .secs a:hover,.prop-nav .secs a.on{color:var(--ink);border-color:var(--brass)}
.prop-nav .by{font-size:.86rem;color:var(--stone);white-space:nowrap}
.prop-nav .by b{font-weight:500;color:var(--ink)}
@media (max-width:700px){.prop-nav .by{display:none}.prop-nav .secs{gap:1.25rem;width:100%;justify-content:space-between}}
html{scroll-padding-top:4rem}
.prop-overview{padding-top:clamp(3.5rem,6vw,5.5rem)}
.facts-list{display:flex;flex-direction:column;align-self:start;padding-top:.5rem}
.facts-list div{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--hair)}
.facts-list div:last-child{border-bottom:1px solid var(--hair)}
.facts-list b{font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.facts-list span{font-size:1.05rem}
@media (max-width:860px){.prop-overview .grid > *,.prop-contact .grid > *{grid-column:1/-1!important}.facts-list{margin-top:2rem}}
.prop-photos .head{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.pflow{grid-column:6/13}
.prop-map .mapwrap{position:relative;height:clamp(22rem,55vh,34rem);background:var(--ivory-2)}
.prop-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(.95)}
.prop-map .pin{position:absolute;left:var(--pad);bottom:2rem;background:var(--ivory);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:0 20px 50px rgba(22,21,19,.18);max-width:22rem}
.prop-map .pin b{font-weight:500;font-size:1.1rem}.prop-map .pin span{color:var(--stone);font-size:.95rem}.prop-map .pin .link{margin-top:.75rem;align-self:flex-start}
.presented .stars{color:var(--ivory)}
/* pricing: top tier as a wide row + production video tiers */
.tier.wide{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 2fr auto;gap:2rem;align-items:center;border-left:0;padding-left:0;border-top:1px solid var(--brass);margin-top:-1px}
.tier.wide .lead{display:flex;flex-direction:column;gap:.9rem}
.tier.wide ul{columns:2;column-gap:2rem;display:block}
.tier.wide ul li{break-inside:avoid;margin-bottom:.45rem}
.tier.wide .btn{margin-top:0;align-self:center}
@media (max-width:1000px){.tier.wide{grid-template-columns:1fr;gap:1.5rem}.tier.wide ul{columns:1}}
.vid-tiers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:1.5rem}
@media (max-width:860px){.vid-tiers{grid-template-columns:1fr;border-top:0}.vid-tiers .tier{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--hair)}}

/* property gallery: first rows visible, the rest behind "Show all" */
.masonry.collapsed figure.more,.pgrid.collapsed figure.more{display:none}
.showmore{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--hair)}
.field textarea::placeholder,.field input::placeholder{color:var(--ivory-60)}

/* tap-to-choose chips (property inquiry): same language as the booking flow's choices, one line tall */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.15rem}
.chip{border:1px solid var(--hair-dark);padding:.6rem .95rem;font-size:.92rem;font-weight:400;color:var(--ivory-80);transition:border-color .4s var(--ease-out),background .4s var(--ease-out),color .4s var(--ease-out)}
.chip:hover{border-color:var(--ivory-60);color:var(--ivory)}
.chip.on{border-color:var(--brass);background:rgba(179,152,107,.14);color:var(--ivory)}
.field label .opt{text-transform:none;letter-spacing:0;color:var(--ivory-60);margin-left:.5rem;font-weight:400}
.field input[type=date]{color-scheme:dark}

/* property gallery — editorial grid: 3 columns, row unit = a 3:2 tile, explicit placement per photo (build.py MODULE) */
.pgrid-wrap{container-type:inline-size}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);grid-auto-rows:calc((100cqw - 2 * var(--gap)) / 3 * 2 / 3);grid-auto-flow:row dense}
.pgrid figure{margin:0;position:relative;min-width:0;min-height:0}
.pgrid .frame{height:100%;cursor:zoom-in}
.pgrid .frame picture{display:block;height:100%}
.pgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;display:flex;justify-content:space-between;font-size:.8rem;color:var(--ivory);background:linear-gradient(to top,rgba(22,21,19,.7),rgba(22,21,19,0));opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.pgrid figure:hover figcaption{opacity:1}
.pgrid figcaption em{font-style:normal;color:var(--brass);flex-shrink:0}
.pgrid figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:700px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - var(--gap)) / 2 * 2 / 3)}
  .pgrid figure{grid-column:auto!important;grid-row:auto!important}
  .pgrid .t-l,.pgrid .t-w{grid-column:span 2!important;grid-row:span 2!important}
}

/* list rows on dark bands */
.dark .sites,.dark .sites .row{border-color:var(--hair-dark)}
.dark .sites .row .go{color:var(--ivory-60)}
.dark .sites .row:hover .go{color:var(--brass)}
.presented .sites .row{padding:1.1rem 0}
@media (max-width:860px){.presented .grid > *{grid-column:1/-1!important}.presented .sites{margin-top:2.5rem!important}}

/* standalone listing pages: slim presented-by strip */
.prop-foot{background:var(--black);color:var(--ivory);padding:1.6rem 0}
.prop-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.prop-foot .by{display:flex;align-items:center;gap:1rem;font-size:.9rem;color:var(--ivory-80)}
.prop-foot .by img{width:auto;height:2.4rem}
.prop-foot .by b{font-weight:500;color:var(--ivory)}
.prop-foot .fine{font-size:.82rem;color:var(--ivory-60)}
.prop-foot .fine a:hover{color:var(--ivory)}
.prop-foot .wrap{display:flex!important;flex-direction:row;grid-template-columns:none;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.prop-foot .fine{display:inline!important;border:0!important;padding:0!important;margin:0!important;width:auto;justify-content:normal}
.prop-foot .by img{width:auto!important;height:2.4rem!important;margin:0!important}
/* text boxes: option C (Chad 2026-09-03) — understated underline kept, but legible: faint field tint + firmer baseline */
.field input,.field select,.field textarea{background:rgba(241,237,229,.045);border:0;border-bottom:1px solid rgba(241,237,229,.5);border-radius:2px 2px 0 0;padding:.85rem .9rem}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgba(241,237,229,.75)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--brass);background:rgba(241,237,229,.08)}
.field input.bad,.field select.bad,.field textarea.bad{border-bottom-color:#C86B5A}
.field label{color:var(--ivory-80)}
.field select{background-position:right .9rem center;padding-right:2.4rem}
.field textarea{min-height:6rem}
.field input::placeholder,.field textarea::placeholder{color:rgba(241,237,229,.5)}
.usecase{border-top:1px solid var(--hair);padding-top:1.25rem}
@media (max-width:860px){.usecase{grid-column:1/-1!important}}
.fp{margin:2.5rem 0 0;max-width:20rem}
.fp img{width:100%;height:auto;display:block;border:1px solid var(--hair)}
.fp figcaption{font-size:.82rem;color:var(--stone);margin-top:.7rem}
@media (max-width:860px){.fp{max-width:16rem}}
.cattile.wide{grid-column:span 2;aspect-ratio:auto;min-height:100%}
@media (max-width:860px){.cattile.wide{aspect-ratio:16/9}}
@media (max-width:520px){.cattile.wide{grid-column:auto;aspect-ratio:16/10}}
.fpgrid{align-items:stretch}
.fp2{margin:0;display:flex;flex-direction:column;gap:.7rem;min-height:0}
.fp2 picture{flex:1;min-height:0;display:flex;align-items:flex-start;border:1px solid var(--hair);background:var(--ivory-2);padding:1.25rem}
.fp2 img{width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto}
.fp2 figcaption{font-size:.82rem;color:var(--stone)}
@media (max-width:860px){.fpgrid > *{grid-column:1/-1!important}.fp2 picture{aspect-ratio:1/1}.fp2 img{height:100%}}
/* lock the floor-plan figure to the height of the steps beside it */
.fp2{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.7rem;min-height:0}
.fp2 picture{position:relative;min-height:0;overflow:hidden;display:block;padding:0;flex:none}
.fp2 img{position:absolute;inset:1.25rem;width:calc(100% - 2.5rem);height:calc(100% - 2.5rem);object-fit:contain;margin:0;max-height:none}
@media (max-width:860px){.fp2 picture{aspect-ratio:1/1;position:relative}}

/* ===== Instant Book: one-screen flow, sheet, pill ===== */
.ib .ib-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.ib .ib-brand{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.01em;color:var(--ivory)}
.ib .ib-tag{font-size:.85rem;color:var(--ivory-60);letter-spacing:.02em}
.ib-step{padding:0;margin:0;border-top:1px solid var(--hair-dark);transition:opacity .5s var(--ease-out)}
.ib-step:first-of-type{border-top:0}
.ib-step .ib-sum{display:none;width:100%;text-align:left;padding:1rem 0;gap:1rem;align-items:baseline;color:var(--ivory-80);font-size:.98rem;cursor:pointer;background:none;border:0}
.ib-step .ib-sum .k{flex:0 0 7.5rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ib-step .ib-sum .v{flex:1;color:var(--ivory);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-step .ib-sum .chg{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-60)}
.ib-step .ib-sum:hover .chg{color:var(--ivory)}
.ib-step.ib-done .ib-sum{display:flex}
.ib-step.ib-done .ib-body,.ib-step.ib-todo{display:none}
.ib-step.locked .ib-sum{pointer-events:none}.ib-step.locked .ib-sum .chg{display:none}
.ib-step.on .ib-body{padding:1.75rem 0 2rem;animation:fade .6s var(--ease-out)}
.ib .q{font-family:var(--sans);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.25;margin:0 0 1.1rem;display:block;color:var(--ivory)}
.ib .q + .q,.ib .choices + .q{margin-top:1.9rem}
.ib .pane-actions{margin-top:1.5rem}
.ib .ib-status{font-size:.9rem;min-height:1.2em}
.ib .ib-status:not(:empty)::after{content:"";display:inline-block;width:.35rem;height:.35rem;border-radius:50%;background:var(--brass);margin-left:.5rem;animation:ibpulse 1s infinite alternate}
@keyframes ibpulse{from{opacity:.25}to{opacity:1}}
.ib-addr{position:relative}
.ib-addr input{width:100%;font:inherit;font-size:1.15rem;padding:1rem 0;background:none;border:0;border-bottom:1px solid var(--ivory-60);color:var(--ivory);outline:0;border-radius:0}
.ib-addr input:focus{border-bottom-color:var(--brass)}
.ib-addr input::placeholder{color:var(--ivory-60)}
.ib-sugg{list-style:none;margin:.35rem 0 0;padding:.25rem 0;border:1px solid var(--hair-dark);background:rgba(255,255,255,.02)}
.ib-sugg li{padding:.7rem 1rem;cursor:pointer;color:var(--ivory-80);font-size:.98rem;border-top:1px solid var(--hair-dark);animation:ibrise .4s var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
.ib-sugg li:first-child{border-top:0}
.ib-sugg li::before{content:"";display:inline-block;width:.35rem;height:.35rem;background:var(--brass);margin-right:.75rem;vertical-align:middle;opacity:.7}
.ib-sugg li:hover{background:rgba(179,152,107,.14);color:var(--ivory)}
.ib-facts{margin-top:1.5rem;border-left:2px solid var(--brass);padding-left:1.1rem}
.ib-facts-k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 .35rem}
.ib-facts-v{font-size:1.15rem;font-weight:500;color:var(--ivory);margin:0}
.ib-facts .pane-actions{margin-top:1rem}
.ib .choices{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.55rem}
.ib .choice{padding:.85rem .95rem}
.ib .pkgs{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.4rem;margin:0 0 1.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ib .pkgs::-webkit-scrollbar{display:none}
.ib .pkgs .choice{flex:0 0 auto;min-width:9.5rem;scroll-snap-align:start;position:relative}
.ib .pkgs .tag:not(:empty){position:absolute;top:-.55rem;right:.6rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:var(--brass);color:var(--black);padding:.15rem .45rem}
.ib .reco{margin-bottom:1.5rem}
.ib .reco ul{grid-template-columns:1fr 1fr;gap:.3rem 1.25rem;font-size:.92rem}
.ib .alt-k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-60);margin:0 0 .7rem}
.ib-addons-toggle{display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:0;border-top:1px solid var(--hair-dark);padding:1rem 0;color:var(--ivory);font:inherit;font-size:.95rem;cursor:pointer;text-align:left}
.ib-addons-toggle span:first-child{color:var(--ivory-60)}
.ib-addons-toggle .chev{margin-left:auto;width:.5rem;height:.5rem;border-right:1px solid var(--ivory-60);border-bottom:1px solid var(--ivory-60);transform:rotate(45deg);transition:transform .3s}
.ib-addons-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.ib .addl{border-top:0;margin-bottom:.5rem}
.ib .addl[hidden],.ib [hidden]{display:none}
.ib-suggest{font-style:normal;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-left:.5rem;vertical-align:middle}
.ib .total{margin-top:.5rem}
.ib-days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ib-days::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-width:4.6rem;padding:.65rem .8rem;border:1px solid var(--hair-dark);background:none;color:var(--ivory-80);font:inherit;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.chip small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-60)}
.chip b{font-weight:500;font-size:1rem;color:var(--ivory)}
.chip:hover{border-color:var(--ivory-60)}
.chip.on{border-color:var(--brass);background:rgba(179,152,107,.14);color:var(--ivory)}
.ib-times{display:flex;flex-wrap:wrap;gap:.5rem}
.chip.time{flex-direction:row;min-width:5.5rem;font-size:.98rem}
.ib-note{font-size:.88rem;margin-top:1rem}
.ib-note-top{margin:-.35rem 0 1rem}
.ib-daygrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.ib-daygrid .chip{min-width:0;padding:.55rem .2rem;position:relative;animation:ibrise .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*30ms)}
.ib-daygrid .chip em{position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);font-style:normal;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);background:var(--black);padding:0 .3rem}
.ib-other{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem}
.ib-cal{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--ivory-80);cursor:pointer;border:1px solid var(--hair-dark);padding:.5rem .8rem;position:relative}
.ib-cal:hover{border-color:var(--ivory-60);color:var(--ivory)}
.ib-cal input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;color-scheme:dark}
.ib-extra{display:flex;flex-wrap:wrap;gap:.5rem}
.ib-count{font-size:.85rem;margin-left:auto}
@media (max-width:420px){.ib-daygrid{gap:.3rem}.ib-daygrid .chip small{font-size:.6rem;letter-spacing:.08em}.ib-daygrid .chip b{font-size:.92rem}}
.ib .fields{margin-top:0}
.ib .field input,.ib .field select{font-size:1rem}
.ib .submit{margin-top:1.25rem}
.ib-alt{margin-top:1.5rem;border-top:1px solid var(--brass);padding-top:1.25rem}
.ib .done p b{color:var(--ivory)}
/* the pill (phones and small tablets) */
.ib-pill{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:.6rem;padding:.95rem 1.35rem;border-radius:999px;background:var(--brass);color:var(--black);border:0;font:inherit;font-weight:500;font-size:.92rem;letter-spacing:.06em;box-shadow:0 12px 30px rgba(0,0,0,.35);cursor:pointer;animation:ibpill .5s var(--ease-out)}
@keyframes ibpill{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:860px){.ib-pill:not([hidden]){display:inline-flex}}
/* the sheet: bottom sheet on phones, side panel on desktop */
.ib-sheet{position:fixed;inset:0;z-index:70}
.ib-sheet .ib-backdrop{position:absolute;inset:0;background:rgba(22,21,19,.55);opacity:0;transition:opacity .3s}
.ib-sheet .ib-panel{position:absolute;right:0;top:0;bottom:0;width:min(34rem,100%);background:var(--black);color:var(--ivory);overflow-y:auto;padding:4.5rem 2.25rem 3rem;transform:translateX(100%);transition:transform .32s var(--ease-out);box-shadow:-24px 0 60px rgba(0,0,0,.4)}
.ib-sheet .ib-close{position:absolute;top:1.1rem;right:1.5rem;background:none;border:1px solid var(--hair-dark);color:var(--ivory-80);font:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem .9rem;cursor:pointer}
.ib-sheet .ib-close:hover{color:var(--ivory);border-color:var(--ivory-60)}
.ib-sheet.on .ib-backdrop{opacity:1}.ib-sheet.on .ib-panel{transform:none}
.ib-sheet .flow{grid-column:auto}
html.ib-open{overflow:hidden}
@media (max-width:860px){
  .ib-sheet .ib-panel{left:0;right:0;top:auto;bottom:0;width:100%;height:94svh;border-radius:18px 18px 0 0;padding:3.75rem 1.25rem 2.5rem;transform:translateY(100%);box-shadow:0 -24px 60px rgba(0,0,0,.4)}
  .ib-sheet .ib-panel::before{content:"";position:absolute;top:.6rem;left:50%;width:2.5rem;height:3px;border-radius:3px;background:var(--ivory-60);transform:translateX(-50%)}
  .ib .reco ul{grid-template-columns:1fr}
  .ib-step .ib-sum .k{flex-basis:5.5rem}
  .ib-step .ib-sum .v{white-space:normal;overflow:visible;text-overflow:clip}
}
@media (prefers-reduced-motion:reduce){.ib-sheet .ib-panel,.ib-sheet .ib-backdrop,.ib-pill{transition:none;animation:none}}

/* ---- Instant Book motion + record reveal ---- */
@keyframes ibrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ibpop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes ibscan{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.ib-progress{height:1px;background:var(--hair-dark);margin:0 0 1.75rem;overflow:hidden}
.ib-progress i{display:block;height:100%;width:0;background:var(--brass);box-shadow:0 0 0 .5px var(--brass);transition:width .7s var(--ease-out)}
.ib-step.on.anim .ib-body > *{animation:ibrise .55s var(--ease-out) both;animation-delay:calc(var(--i,0)*60ms)}
.ib-step.ib-done .ib-sum{animation:ibrise .45s var(--ease-out) both}
.ib .choice.on,.ib .chip.on{animation:ibpop .32s var(--ease-out)}
.ib .num,.ib .reco-price,.ib .total .num{font-variant-numeric:tabular-nums}
.ib-scan{position:relative;margin-top:1.4rem;padding:1rem 0;color:var(--ivory-80);font-size:.95rem;letter-spacing:.02em;overflow:hidden}
.ib-scan-line{position:absolute;left:0;top:0;height:1px;width:40%;background:linear-gradient(90deg,transparent,var(--brass),transparent);animation:ibscan 1.1s linear infinite}
.ib-scan-t::after{content:"";display:inline-block;width:.35rem;height:.35rem;border-radius:50%;background:var(--brass);margin-left:.5rem;animation:ibpulse .8s infinite alternate}
.ib-facts{margin-top:1.4rem;border-left:2px solid var(--brass);padding-left:1.1rem}
.ib-tokens{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.4rem 0 .2rem}
.ib-tokens .tok{display:inline-flex;align-items:baseline;gap:.35rem;color:var(--ivory-60);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;animation:ibrise .5s var(--ease-out) both;animation-delay:calc(var(--i,0)*120ms)}
.ib-tokens .tok b{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--ivory);letter-spacing:0;text-transform:none}
.ib-est{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:baseline;margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--hair-dark);animation:ibrise .5s var(--ease-out) both}
.ib-est span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ib-est b{font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1;color:var(--ivory)}
.ib-est small{grid-column:1/-1;color:var(--ivory-60);font-size:.85rem}
.ib-miss{margin-top:1.2rem;color:var(--ivory-80);font-size:.95rem;animation:ibrise .4s var(--ease-out) both}
.ib-skip{display:block;margin-top:.9rem;background:none;border:0;padding:0;color:var(--ivory-80);opacity:.55;font:inherit;font-size:.85rem;letter-spacing:.01em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.ib-skip:hover,.ib-skip:focus-visible{opacity:.9;outline:none}
.ib-step.on[data-step="addr"] .ib-skip[hidden]{display:none}
.ib .reco{animation:ibrise .6s var(--ease-out) both}
.ib .pkgs .choice{transition:border-color .25s,background .25s,transform .25s}
.ib .pkgs .choice:active{transform:scale(.98)}
.ib-days .chip{animation:ibrise .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*50ms)}
.ib-times .chip{animation:ibrise .4s var(--ease-out) both;animation-delay:calc(var(--i,0)*40ms)}
@media (prefers-reduced-motion:reduce){.ib *,.ib *::before,.ib *::after{animation:none!important;transition:none!important}}

/* Instant Book on phones: the flow is centre stage; JP's contact details follow it; the head stacks cleanly */
@media (max-width:860px){
  .ib .ib-head{flex-direction:column;align-items:flex-start;gap:.35rem;margin-bottom:.9rem}
  .ib .ib-brand{font-size:1.6rem;line-height:1.1}
  .ib .ib-tag{font-size:.82rem}
  .ib-progress{margin:0 0 1.25rem}
  .book .grid{display:flex;flex-direction:column}
  .book .lead{order:2;margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--hair-dark)}
  .book .lead .h2,.book .lead .h2 + .muted{display:none}
  .book .flow{order:1;margin-top:0}
}

/* ===== /experience/ — standalone narrated Instant Book demo (unlisted, no site chrome) ===== */
.xp-page{background:var(--black);color:var(--ivory);min-height:100vh}
.xp-top{padding:2.5rem var(--pad) 0;display:flex;align-items:center;gap:1rem}
.xp-top img{height:34px;width:auto;opacity:.9}
.xp-top .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.xp-hero{padding:2.25rem var(--pad) 0;max-width:40rem;margin:0 auto;text-align:center}
.xp-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.05;font-optical-sizing:none;font-variation-settings:"opsz" 14}
.xp-hero p{margin-top:1rem;color:var(--ivory-80);font-size:1.02rem;line-height:1.6}
.xp-main{padding:2.5rem var(--pad) 8rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40rem) minmax(0,1fr);column-gap:2.5rem;align-items:start}
.xp-stage{grid-column:2;position:relative}
.xp-stage .flow{grid-column:auto}
/* demo controls: top right, quiet */
.xp-ctl{position:fixed;top:1.25rem;right:1.25rem;z-index:66;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.xp-ctl .lab{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-60)}
.xp-ctl .row{display:flex;gap:.35rem}
.xp-ctl a,.xp-ctl button{font:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-60);background:rgba(22,21,19,.85);border:1px solid var(--hair-dark);padding:.5rem .7rem;text-decoration:none;cursor:pointer;transition:color .3s,border-color .3s}
.xp-ctl a:hover,.xp-ctl button:hover{color:var(--ivory);border-color:var(--ivory-60)}
.xp-ctl a.on{color:var(--ivory);border-color:var(--brass)}
.xp-ctl button.pulse{color:var(--black);background:var(--brass);border-color:var(--brass)}
/* story rail: right side, fixed, out of the flow's way */
.xp-rail{grid-column:3;position:sticky;top:5.5rem;max-width:19rem;justify-self:start;padding-left:.5rem}
.xp-rail .k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-60);margin-bottom:.9rem}
.xp-caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.xp-caps li{position:relative;padding:.55rem 0 .55rem 2rem;color:var(--ivory-60);font-size:.9rem;line-height:1.5;opacity:.45;transition:opacity .5s,color .5s;animation:ibrise .5s var(--ease-out) both}
.xp-caps li .t{position:absolute;left:0;top:.6rem;font-size:.68rem;letter-spacing:.14em;color:var(--brass);font-weight:700}
.xp-caps li.now{opacity:1;color:var(--ivory);font-size:1rem}
.xp-caps li.old{display:none}
/* the guided cursor: moved by script, no CSS transition, so it never fights layout */
.xp-cursor{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid var(--brass);background:rgba(179,152,107,.22);pointer-events:none;opacity:0;z-index:9;transition:opacity .35s}
.xp-cursor.on{opacity:1}
.xp-cursor::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--brass);opacity:0}
.xp-cursor.tap::after{animation:xpring .5s ease-out}
@keyframes xpring{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}
@media (max-width:1180px){.xp-main{grid-template-columns:minmax(0,1fr) minmax(0,36rem) minmax(0,1fr);column-gap:1.5rem}.xp-rail{max-width:15rem}}
@media (max-width:960px){
  .xp-main{display:block;padding-bottom:10rem}
  .xp-stage{max-width:40rem;margin:0 auto}
  .xp-rail{position:fixed;left:0;right:0;bottom:0;top:auto;max-width:none;z-index:65;background:rgba(22,21,19,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hair-dark);padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom))}
  .xp-rail .k{display:none}
  .xp-caps li{display:none;padding-left:2rem}.xp-caps li.now{display:block;font-size:.95rem}
  .xp-ctl{top:.6rem;right:.6rem}.xp-ctl .lab{display:none}.xp-ctl .row{gap:.25rem}.xp-ctl a,.xp-ctl button{font-size:.6rem;padding:.4rem .5rem;background:var(--black);letter-spacing:.06em}
  .xp-top{padding-top:1.5rem}.xp-hero{padding-top:1.5rem;text-align:left;margin:0}
}

/* package strip arrows */
.pkgs-wrap{position:relative;margin:0 0 1.25rem}
.pkgs-wrap .pkgs{margin:0}
.pkgs-nav{position:absolute;top:50%;z-index:3;width:2.1rem;height:2.1rem;margin-top:-1.25rem;border-radius:50%;border:1px solid var(--brass);background:var(--black);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:opacity .25s}
.pkgs-nav::before{content:"";width:.5rem;height:.5rem;border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(-45deg);margin-left:-.15rem}
.pkgs-nav.prev{left:-.6rem}.pkgs-nav.prev::before{transform:rotate(135deg);margin-left:.15rem}
.pkgs-nav.next{right:-.6rem}
.pkgs-nav[hidden]{display:none}
.pkgs-wrap::after{content:"";position:absolute;top:0;bottom:.4rem;right:0;width:2.5rem;background:linear-gradient(90deg,transparent,var(--black));pointer-events:none;opacity:0;transition:opacity .25s}
.pkgs-wrap:has(.pkgs-nav.next:not([hidden]))::after{opacity:1}
@media (max-width:860px){
  .ib .pkgs .choice{flex:0 0 calc(50% - .9rem);min-width:0}
  .pkgs-nav.prev{left:-.4rem}.pkgs-nav.next{right:-.4rem}
}

/* after booking: every step collapses to its line, the confirmation sits beneath with JP's details */
.ib-step .ib-sum:disabled{cursor:default}
.ib-final{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--brass)}
.ib-final.on{display:block;animation:ibrise .6s var(--ease-out) both}
.ib-final-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.1rem;font-size:.98rem}
.ib-final-contact .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);align-self:center}
.ib-final-contact a{color:var(--ivory);border-bottom:1px solid var(--hair-dark);padding-bottom:.1rem}
.ib-final-contact a:hover{border-color:var(--brass)}

/* lightbox: quiet status tag, top right */
.lightbox .lb-tag{position:absolute;top:1.45rem;right:calc(var(--pad) + 6.5rem);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-60);opacity:0;transition:opacity .4s,color .4s;pointer-events:none;display:inline-flex;align-items:center;gap:.45rem}
.lightbox .lb-tag::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.8}
.lightbox .lb-tag.loading{opacity:1}
.lightbox .lb-tag.loading::before{animation:ibpulse .9s infinite alternate}
.lightbox .lb-tag.ready{opacity:1;color:#8FBF98}
@media (max-width:860px){.lightbox .lb-tag{right:auto;left:var(--pad);top:1.6rem}}

/* ---- mobile homepage tightening (2026-09-09, Chad-approved PRD; ≤860px only, desktop untouched) ---- */
.d-mob{display:none}
.tier-more{display:none}
@media (max-width:860px){
  .d-mob{display:block}.d-desk{display:none}
  /* 2 · selected work: swipe rail, edge to edge */
  .work .gallery{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin:0 calc(-1*var(--pad));padding:0 var(--pad) .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .work .gallery::-webkit-scrollbar{display:none}
  .work .gallery .tile,.work .gallery .t1,.work .gallery .t2,.work .gallery .t3,.work .gallery .t4,.work .gallery .t5,.work .gallery .t6{flex:0 0 82%;max-width:82%;aspect-ratio:4/3;scroll-snap-align:start;margin-top:0}
  .work .gallery .t6{scroll-snap-align:end}
  html.js .work .gallery .tile.rv{opacity:1;transform:none}
  .work .gallery figcaption{font-size:.8rem}
  /* 2 · categories: two columns */
  .work .cattiles,.work .cattiles.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .work .cattile{aspect-ratio:1/1}
  .work .cattile .lbl{left:.8rem;right:.8rem;bottom:.75rem}
  .work .cattile .lbl b{font-size:1.05rem}
  .work .cattile .lbl span{font-size:.62rem;letter-spacing:.12em}
  /* 2 · property websites: two cards + the existing "All properties" link */
  .work .propcards{grid-template-columns:1fr;gap:.6rem}
  .work .propcard{aspect-ratio:16/10}
  .work .propcard:nth-child(n+3){display:none}
  /* 3 · services: the nine-row block is off on phones; one sentence under the category tiles covers what the tiles don't (Chad, 2026-09-09) */
  #services{display:none}
  .work .also{margin:1.25rem 0 0;color:var(--stone);font-size:.98rem;line-height:1.55}
  .work .also .link{margin-left:.35rem;white-space:nowrap}
  /* 4 · packages: compact rows, tap to expand */
  .compact-m .tier{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "for price" "more more" "list list" "btn btn";gap:.15rem 1rem;padding:1.35rem 0 1.5rem;align-items:baseline}
  .compact-m .tier.feature{padding-left:1rem;padding-right:1rem;margin:0}
  .compact-m .tier h3{grid-area:name;font-size:1.4rem}
  .compact-m .tier .for{grid-area:for;font-size:.7rem;letter-spacing:.12em}
  .compact-m .tier .price{grid-area:price;font-size:1.75rem;align-self:start}
  .compact-m .tier ul{grid-area:list;display:none;margin:.6rem 0 .2rem;font-size:.95rem}
  .compact-m .tier.open ul{display:flex}
  .compact-m .tier .btn{grid-area:btn;margin-top:1rem;align-self:start;justify-self:center;width:14rem;max-width:100%;justify-content:center;padding:.95rem 1rem}
  .compact-m .tier-more{grid-area:more;display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;padding:.6rem 0 0;color:var(--stone);font:inherit;font-size:.82rem;letter-spacing:.06em;cursor:pointer;justify-self:start}
  .compact-m .tier-more::after{content:"";width:.4rem;height:.4rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  .compact-m .tier-more[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
  .pricing .note{margin-top:1.25rem}
}

/* pinned package at the address step (tapped from a package button) */
.ib-pin{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;margin:0 0 1.4rem;padding:.9rem 0;border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);animation:ibrise .5s var(--ease-out) both}
.ib-pin .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ib-pin b{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--ivory);line-height:1}
.ib-pin .num{color:var(--ivory-80);font-variant-numeric:tabular-nums}
.ib-pin-clear{margin-left:auto;background:none;border:0;padding:0;color:var(--ivory-60);font:inherit;font-size:.8rem;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ib-pin-clear:hover{color:var(--ivory)}
@media (max-width:860px){
  /* phones: the jump from a booking button must show Instant Book through the "Preparing your home" link in one frame (Chad, iPhone 16 Pro) */
  .ib-pin{padding:.65rem 0;margin-bottom:1rem;gap:.3rem .6rem;flex-wrap:nowrap}
  .ib-pin b{font-size:1.2rem}
  .ib-pin .num{font-size:.95rem}
  .ib-pin-clear{font-size:.76rem;white-space:nowrap}
  .ib .ib-head{margin-bottom:.6rem}
  .ib .ib-brand{font-size:1.45rem}
  .ib-progress{margin:0 0 1rem}
  .ib-step.on .ib-body{padding:1.15rem 0 1.4rem}
  .ib .q{margin-bottom:.8rem}
  .ib-addr input{padding:.8rem 0}
  .ib .pane-actions{margin-top:1.15rem}
  .ib .pane-actions .btn{padding:.85rem 1.6rem}
  .book .lead{margin-top:1.5rem;padding-top:1.1rem}
  /* the section fills the phone frame after a booking jump so the footer never peeks in under the prep link */
  .book{box-sizing:border-box;min-height:100vh;min-height:100lvh}
  .book .lead .contact{margin-top:1.1rem;gap:.4rem;font-size:1rem}
}

/* ---- mobile cleanup pass, inner pages (2026-09-09, Chad: "clean up the MOBILE-ONLY version" of the pages beyond the homepage); ≤860px only ---- */
@media (max-width:860px){
  /* 1 · inline 12-col positions (ported area pages, blog articles, matterport/zillow why-blocks, service intros) never collapsed on phones:
         the inline style beat the class rule. Every explicit column span becomes full width. Span-based photo grids are untouched. */
  .grid > [style*="grid-column:1/8"],.grid > [style*="grid-column:9/13"],.grid > [style*="grid-column:1/9"],.grid > [style*="grid-column:10/13"],
  .grid > [style*="grid-column:1/6"],.grid > [style*="grid-column:7/13"],.grid > [style*="grid-column:1/7"],.grid > [style*="grid-column:8/13"],.grid > .aside{grid-column:1/-1!important}
  .aside{position:static;margin-top:1.5rem}
  .facts-list{margin-top:1.5rem}
  .facts-list div{flex-wrap:wrap}
  /* 2 · category tiles two-up everywhere (was one-up below 520px) */
  .cattiles,.cattiles.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .cattile,.cattile.wide{aspect-ratio:1/1;grid-column:auto}
  .cattile .lbl{left:.8rem;right:.8rem;bottom:.75rem}
  .cattile .lbl b{font-size:1.05rem}
  .cattile .lbl span{font-size:.62rem;letter-spacing:.12em}
  /* 3 · portfolio + category galleries: two columns on phones (was one 139-image column) */
  .masonry{columns:2;column-gap:.6rem}
  .masonry figure{margin-bottom:.6rem}
  /* 4 · pricing page: the wide Luxury Reserve tier and the production tiers follow the compact-row pattern too */
  .compact-m .tier.wide{display:flex;flex-direction:column;gap:.15rem;padding:1.35rem 0 1.5rem}
  .compact-m .tier.wide .lead .muted{display:none}
  .compact-m .tier.wide ul{display:none;margin:.6rem 0 .2rem;font-size:.95rem;columns:1}
  .compact-m .tier.wide.open ul{display:flex}
  .compact-m .tier.wide .btn{align-self:center;width:14rem;max-width:100%;justify-content:center;margin-top:1rem;padding:.95rem 1rem}
  .compact-m .tier.wide .tier-more{display:inline-flex;align-self:flex-start}
}
@media (max-width:520px){.cattiles,.cattiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}.cattile{aspect-ratio:1/1}}
@media (min-width:861px){.m-only{display:none}}

/* ---- Print: the /prepare/ checklist is offered as a one-page seller handout ("Print the checklist").
   Site chrome, reveal motion, dark blocks and the sidebar are for the screen; on paper the page is
   a plain two-column checklist with tick boxes. ---- */
@media print{
  @page{size:letter;margin:.55in .6in}
  html,body{background:#fff!important;color:#111!important}
  body{font-size:11pt;line-height:1.4;overflow:visible}
  html.js .rv,.rv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .nav,.menu-btn,.ib-pill,.ib-sheet,footer,.aside,.frame{display:none!important}
  .wrap{max-width:none;padding-left:0;padding-right:0}
  section{padding-top:0;padding-bottom:0}
  .page-hero{background:#fff!important;color:#111!important;padding:0 0 .55rem;border-bottom:1px solid #111}
  .page-hero .kicker{color:#5C5749;margin-bottom:.3rem;font-size:8pt}
  .page-hero h1{font-size:23pt;line-height:1.1;max-width:none;color:#111}
  .page-hero .lede{margin-top:.5rem;max-width:none;font-size:10.2pt;line-height:1.4;color:#333}
  .print-only{display:block!important;margin-top:.45rem;font-size:8.5pt;letter-spacing:.06em;color:#5C5749}
  .grid{display:block}
  .check{columns:2;column-gap:2.2rem;column-fill:balance}
  .check .h3{margin:1rem 0 .25rem;font-size:12.5pt;line-height:1.2;break-after:avoid;break-inside:avoid}
  .check .h3:first-child{margin-top:.55rem}
  .check li{padding:.4rem 0 .4rem 1.4rem;border-top:1px solid #d6d2ca;break-inside:avoid;font-size:10.4pt;line-height:1.38}
  .check li::before{top:.62rem;width:.68rem;height:.68rem;background:none;border:1px solid #333;border-radius:1px}
  .check .muted{column-span:all;margin-top:1.1rem!important;font-size:9.2pt!important;line-height:1.4;color:#444}
  a[href]::after{content:none!important}
}

/* article header booking line (QA 2026-09-12: first CTA was 3.5 screens down on phones) */
.art-cta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;margin-top:1.4rem;font-size:.95rem}
.art-cta span{color:var(--ivory-80,inherit);opacity:.75}

/* booking fallback when the API cannot be reached (resilience item 1, 2026-09-12): the lead goes to JP by email/text instead */
.ib-fallback{margin-top:1.2rem;padding:1.1rem 1.2rem;border:1px solid rgba(179,152,107,.45);background:rgba(179,152,107,.08);animation:ibrise .4s var(--ease-out) both}
.ib-fallback p{margin:0 0 .9rem;font-size:.95rem}
.ib-fallback-actions{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center}