/* v5 (Kevin's pages in our theme): small rules the library sections need outside sections.html, and the location cards. */
.sx::before{display:none!important}.sx-rail{display:none!important}
.sx-eyebrow{display:block;font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:16px}
.how-head .sx-eyebrow,.intro .sx-eyebrow{margin-bottom:14px}
.sx-q .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:500;color:var(--brown);text-decoration:none}
.sx-q b{display:block;font:600 20px/1.25 var(--display);letter-spacing:-.02em;margin-bottom:10px}
.sx-q p{color:#4A433C;font-size:15px}
/* location cards built on the plan card */
.sx-plan.loc{padding:0;overflow:hidden}
.sx-plan.loc .ph{position:relative;aspect-ratio:16/10;background:var(--sand)}
.sx-plan.loc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.1) saturate(.95);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.sx-plan.loc:hover .ph img{transform:scale(1.04)}
.sx-plan.loc .badge{position:static;display:inline-block;margin:0;background:#3E9B57;color:#fff}
.sx-plan.loc .nm,.sx-plan.loc h3,.sx-plan.loc .then,.sx-plan.loc ul,.sx-plan.loc .ctas{margin-left:22px;margin-right:22px}
.sx-plan.loc .nm{margin-top:18px}
.sx-plan.loc .ctas{margin-bottom:22px;margin-top:auto}
.sx-plan.loc .ctas .btn{min-height:40px;padding:0 16px;font-size:13.5px}
.sx-plan.loc ul{margin-top:12px;margin-bottom:16px}
@media (max-width:1080px){.sx-plangrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.sx-plangrid,.sx-wallgrid{grid-template-columns:1fr!important}.cgrid{grid-template-columns:1fr!important}}
@media (max-width:1080px){.sx-wallgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* chips as links */
a.sx-chip{text-decoration:none;color:var(--ink)}
a.sx-chip:hover{border-color:var(--ink)}
/* crafts tiles used as 3-up feature cards */
.crafts.light .tile span em{white-space:normal}
/* story rows on light sections */
.how .how-head p{max-width:60ch}
/* franchise numbers that are text, not counters */
.sx-num b{font-size:clamp(30px,3vw,44px)}

/* fixes after the first QA pass */
html,body{overflow-x:clip}
.hero h1.l3{font-size:clamp(36px,4.2vw,60px)}
.hero.short h1.l3{font-size:clamp(34px,3.9vw,56px)}
.crafts.light .tile>span{display:block}
.crafts.light .tile>span em{display:block;margin:6px 0 0;font-style:normal;color:var(--muted);font-size:14px;line-height:1.5}
.sx-q p{font-family:var(--sans);font-style:normal;font-size:15px;line-height:1.55}
.sx-plan.loc .ph{margin:0}
@media (max-width:640px){.sx-chips{justify-content:flex-start!important}.sx-numgrid{grid-template-columns:1fr 1fr!important}.sx-tgrid,.sx-bgrid,.sx-mapgrid{grid-template-columns:1fr!important}}

/* hero notifications and the live pill: dark warm glass, one line titles, clearer hierarchy */
.hero .fc{max-width:300px;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(22,15,10,.56);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -30px rgba(0,0,0,.8);color:#fff;font-size:13px;line-height:1.3}
.hero .fc .ai{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,#FFF6E6,#F0D4A6);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 14px -8px rgba(0,0,0,.6)}
.hero .fc .ai img{width:24px}
.hero .fc>div{min-width:0;animation:none}
.hero .fc b{font-weight:600;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.hero .fc span:not(.ai){display:block;opacity:.68;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;margin-top:1px}
.hero .fc b::after{content:"now";float:right;margin-left:14px;font-weight:500;font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.hero .fc1{right:38%;top:14%}
.hero .fc2{right:4%;top:auto;bottom:11%}
.hero .live{top:calc(68px + 18px);right:20px;gap:9px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(22,15,10,.5);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.14);color:#fff;font:500 12.5px/1 var(--sans);letter-spacing:.01em;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 20px 40px -24px rgba(0,0,0,.8)}
.hero .live .dot{width:7px;height:7px;background:#4CC26C;box-shadow:0 0 10px rgba(76,194,108,.9)}
.hero .live .dot::after{border-color:rgba(76,194,108,.8)}
.hero .live .tm{color:rgba(255,255,255,.55);border-left:0;padding-left:0;font-weight:400}
.hero .live .tm::before{content:"\00b7";margin:0 8px 0 0;color:rgba(255,255,255,.35)}
@media (max-width:1080px){.hero .fc1{right:6%;top:12%}.hero .fc2{display:none}}

/* cards: a real grid, not CSS columns (text was bleeding out of narrow columns); one reveal, not two */
.sx-wallgrid{columns:unset!important;column-gap:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.sx-wallgrid .sx-q{margin:0;padding:26px 24px 22px;min-width:0}
.sx-q b,.sx-q p{overflow-wrap:anywhere}
.sx-bgrid .sx-wallgrid{grid-template-columns:1fr!important;gap:14px}
.sx-bgrid .sx-q{padding:20px 22px 18px}
.sx-bgrid .sx-q b{font-size:18px;margin-bottom:6px}
@media (max-width:1080px){.sx-wallgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.sx-wallgrid{grid-template-columns:1fr!important}}

/* equal tiles: the photo fills a fixed 4:5 box instead of sizing it */
.crafts.light .tile .v{aspect-ratio:4/5;height:auto}
.crafts.light .tile .v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the same notification look for the cards around the orb on dark sections */
.sx-orbwrap .fc{max-width:300px;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -30px rgba(0,0,0,.8);color:#fff;font-size:13px;line-height:1.3}
.sx-orbwrap .fc .ai{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,#FFF6E6,#F0D4A6)}
.sx-orbwrap .fc .ai img{width:24px}
.sx-orbwrap .fc>div{min-width:0;animation:none}
.sx-orbwrap .fc b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.sx-orbwrap .fc b::after{content:"now";float:right;margin-left:14px;font-weight:500;font-size:11px;color:rgba(255,255,255,.5)}
.sx-orbwrap .fc span:not(.ai){display:block;opacity:.68;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;margin-top:1px}

/* three feature tiles sit level, no staggered offsets */
.crafts.light .cgrid .tile:nth-child(odd){margin-top:0!important}

/* home closer: the dark orb band is the last section, tighter bottom */
#join.sx-dfinal,.sx-dfinal{padding-bottom:clamp(90px,10vw,150px)}
.sx-dfinal .ctas .btn-ghost{border-color:rgba(255,255,255,.35)}

/* home hero orb (Kevin 11/8): center of the gap, lower than the headline, 20% smaller */
.pg-index .hero .vorb{right:auto;left:calc(50% - 130px);top:62%;bottom:auto;margin-top:-130px;transform:scale(.8)}
@media (max-width:1700px){.pg-index .hero .vorb{left:720px;transform:scale(.72)}}
@media (max-width:1300px){.pg-index .hero .vorb{left:700px;transform:scale(.64)}}
/* ownership hero orb (Kevin 11/8): low center, in the hair below the chin, off the face */
.pg-benefits .hero .vorb,.pg-ownership .hero .vorb{right:auto;left:calc(50% - 130px);top:72%;bottom:auto;margin-top:-130px;transform:scale(.8)}
@media (max-width:1700px){.pg-benefits .hero .vorb,.pg-ownership .hero .vorb{left:auto;right:30%;transform:scale(.72)}}
@media (max-width:1080px){.pg-index .hero .vorb,.pg-benefits .hero .vorb,.pg-ownership .hero .vorb{left:auto;right:4%;top:auto;bottom:40px;margin-top:0;transform:scale(.7)}}

/* Why Belle Vie: breathing room between the headline and the three cards (the cards were painting over the descenders) */
.crafts .how-head{margin-bottom:clamp(28px,3.2vw,48px)}

/* pinned hero (11/9): every section after the hero paints on paper unless it sets its own background, so the sticky hero can never bleed through a gap (seen on the directory) */
main>:where(section:not(.hero)){background-color:var(--paper)}
/* outline button on dark heroes: hover turned the pill white with white text (blank pill); keep the text readable */
.hero .ctas .btn-line:hover,.sx-hero .ctas .btn-line:hover{color:var(--ink);border-color:#fff}
.hero .ctas .btn-line:hover .bi,.sx-hero .ctas .btn-line:hover .bi{background:var(--ink);color:#fff}

/* no section lets a child's top margin collapse through it (that collapsed gap is where the sticky hero showed on the directory) */
main>:where(section:not(.hero)){display:flow-root}

/* eyebrow inside the 12-column heading grid sat in one narrow column and wrapped ("Experience / excellence", franchise eyebrows overflowing): span the row */
.how-head .sx-eyebrow{grid-column:1/-1}

/* ===== 11/9 full-site pass (Vedant: design + animation issues on every page) ===== */
/* 1. vertical rhythm: section paddings were 130 to 200 px each and stacked to 300 to 400 px gaps; cap them on desktop */
@media (min-width:1081px){
.intro{padding:clamp(88px,8.5vw,116px) 0 clamp(76px,7.5vw,100px)}
.quote{padding:clamp(96px,9vw,116px) 0}
.calc,.faq,.sx-pad{padding-top:clamp(88px,8.5vw,116px);padding-bottom:clamp(88px,8.5vw,116px)}
.how{padding-top:clamp(88px,8.5vw,116px)}
.crafts{padding-bottom:clamp(88px,8.5vw,116px)}
}
/* 2. intro glow started as a hard horizontal edge at the section top; keep the ellipse inside the section */
.intro{background:radial-gradient(55% 60% at 85% 38%,rgba(227,182,118,.14),rgba(227,182,118,0) 70%)}
/* 3. glass chips on step photos lagged the photo by 1.3 s and washed out on light photos */
.js .pic .glass{transition:opacity .6s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.glass{background:rgba(250,247,242,.9)}
/* 4. directory lanes: wider edge fade so chips never look cut mid-word */
.sx-dir .lanes{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* 5. book a tour headline ran off the copy column at 1900 wide */
.pg-book-tour .hero h1{font-size:clamp(44px,4.5vw,70px)}
/* 6. sticky nav let big headings bleed through while scrolling */
.nav.solid{background:rgba(250,247,242,.96)}
/* 7. booking calendar had its own inner scrollbar inside a 660 px box */
.sx-tcard{min-height:1120px}.sx-tcard iframe{height:1120px}
/* 8. map rows: phone number never breaks mid-number */
.sx-locrow .nw{white-space:nowrap}
/* 9. coming soon badge no longer uses the "open now" green */
.tile .live.soon .dot{background:var(--gold)}.tile .live.soon .dot::after{border-color:var(--gold)}
/* 10. progress rail stays out of the hero (it sat on the "Bella is answering now" chip) and fades in after */
.rail,.raild{opacity:0;transition:opacity .5s ease}.rail.show,.raild.show{opacity:1}

/* eyebrows: never squeezed into a grid column or a flex item narrower than their text (About "Legacy of excellence", Franchise "Financial snapshot") */
.sx-eyebrow{width:max-content;max-width:100%}
.intro .wrap>.sx-eyebrow,.sx-head>.sx-eyebrow,.plans-head>.sx-eyebrow{grid-column:1/-1}

/* ===== 11/10: 3D walkthrough on location pages (Matterport) ===== */
.t3d{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 30px 80px -30px rgba(0,0,0,.35)}
.t3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.t3d-sec .how-head{margin-bottom:28px}
@media (max-width:720px){.t3d{aspect-ratio:4/3;border-radius:16px}}

/* ===== 11/10 location cards: photo chip for the 3D tour, stat strip, one primary button + text link ===== */
.sx-plan.loc .facts{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 22px 0;border-top:1px solid rgba(26,24,22,.1);border-bottom:1px solid rgba(26,24,22,.1)}
.sx-plan.loc .facts>div{padding:12px 0 12px;display:flex;flex-direction:column;gap:2px}
.sx-plan.loc .facts>div+div{border-left:1px solid rgba(26,24,22,.1);padding-left:14px}
.sx-plan.loc .facts b{font:600 20px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.sx-plan.loc .facts span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(26,24,22,.55)}
.sx-plan.loc .ctas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.sx-plan.loc .ctas .btn{flex:0 0 auto;min-height:42px;padding:0 20px}
.sx-plan.loc .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.sx-plan.loc .more i{font-style:normal;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sx-plan.loc .more:hover i{transform:translateX(4px)}
.sx-plan.loc .t3dchip{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(20,18,16,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;border:1px solid rgba(255,255,255,.18);transition:background .3s ease,transform .3s ease}
.sx-plan.loc .t3dchip:hover{background:rgba(20,18,16,.85);transform:translateY(-1px)}
.sx-plan.loc .ph img{filter:none}
@media (max-width:1400px){.sx-plan.loc .ctas{flex-direction:column;align-items:stretch}.sx-plan.loc .ctas .btn{width:100%}.sx-plan.loc .more{justify-content:center;padding:6px 0}}
.sx-plan.loc .then{flex:1 0 auto}
.sx-plan.loc .ctas{flex-direction:column;align-items:stretch}.sx-plan.loc .ctas .btn{width:100%}.sx-plan.loc .more{justify-content:center;padding:6px 0}

/* ===== 11/10 tiles: no stagger on the Future locations grid; the badge inside a tile was inheriting the caption's flex + margin (dot sat low) ===== */
.cgrid.flat .tile:nth-child(odd){margin-top:0!important}
.tile .live{margin-top:0;font:500 13px/1 var(--sans);letter-spacing:0}
.tile .live .dot{margin-top:0;display:block;flex:0 0 8px}
.tile>span{gap:10px;align-items:baseline}
.tile>span em{text-align:right;white-space:nowrap;align-self:baseline}

/* ===== 11/10 directory pass ===== */
.intro#list{padding-bottom:clamp(36px,4vw,48px)}
.dir{margin-top:0}
.dir [data-group]:first-child h3{margin-top:clamp(24px,3vw,36px)}
.dir h3 small{letter-spacing:0;font-weight:400}
.dir .row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 150px 120px 96px}
.dir .row .btn{justify-self:stretch;width:96px;padding:0;text-align:center;justify-content:center}
.search .btn{white-space:nowrap}
@media (max-width:1080px){.dir .row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 96px}}
@media (max-width:640px){.dir .row{grid-template-columns:1fr 96px}}

/* ===== 11/10 page heads: inner pages open differently from the home hero ===== */
.ph{position:relative;padding:calc(76px + clamp(44px,5.5vw,84px)) 0 clamp(56px,6vw,92px);background:var(--paper)}
.ph .phw{width:min(1280px,100% - 2*var(--gut));margin-inline:auto}
.ph h1{font-size:clamp(44px,6vw,98px);line-height:.96;letter-spacing:-.045em;margin:0;text-wrap:balance}
.ph .lede{font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:#4A433C;max-width:33em;margin:0}
.ph .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@keyframes phin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ph [data-in]{animation:phin 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*85ms + 80ms)}
@media (prefers-reduced-motion:reduce){.ph [data-in]{animation:none}}

/* About: headline + three photographs */
.ph-about .top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.ph-about h1{font-size:clamp(52px,8.4vw,136px)}
.ph-about .trip{display:grid;grid-template-columns:1.55fr 1fr 1.2fr;gap:14px;margin-top:clamp(36px,4.5vw,64px)}
.ph-about .trip figure{margin:0;height:clamp(260px,34vw,480px);border-radius:6px;overflow:hidden;background:var(--sand)}
.ph-about .trip img{width:100%;height:100%;object-fit:cover;display:block}

/* Locations: the four buildings as an index */
.ph-loc .phw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:end}
.ph-loc h1{font-size:clamp(40px,4.9vw,80px)}
.ph-loc .lede{margin-top:26px}
.ph-loc .ix{display:block}
.ph-loc .ixh,.ph-loc .ixrow{display:grid;grid-template-columns:64px minmax(0,1fr) 84px 34px;column-gap:18px;align-items:center}
.ph-loc .ixh{padding:0 0 12px;font-size:12.5px;color:var(--muted)}
.ph-loc .ixh span:last-child{grid-column:3;text-align:right}
.ph-loc .ixrow{position:relative;padding:20px 0;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:padding .45s cubic-bezier(.16,1,.3,1),background .3s}
.ph-loc .ixrow:last-child{border-bottom:1px solid var(--rule)}
.ph-loc .ixrow .yr{font:500 14px/1 var(--sans);color:var(--gold-ink);font-variant-numeric:tabular-nums}
.ph-loc .ixrow b{grid-column:2;font:600 clamp(26px,2.9vw,44px)/1 var(--display);letter-spacing:-.035em}
.ph-loc .ixrow .ad{grid-column:2;grid-row:2;margin-top:8px;font-size:14px;color:var(--muted)}
.ph-loc .ixrow em{grid-column:3;grid-row:1/3;justify-self:end;font:500 13.5px/1 var(--sans);font-style:normal;color:#2F7D45;white-space:nowrap}
.ph-loc .ixrow i{grid-column:4;grid-row:1/3;justify-self:end;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);transition:background .3s,color .3s,border-color .3s}
.ph-loc .ixrow i svg,.ph-loc .ixrow i .bi{width:14px;height:14px;background:none;color:inherit;margin:0}
.ph-loc .ixrow:hover{padding-left:14px;background:linear-gradient(90deg,rgba(227,182,118,.16),rgba(227,182,118,0))}
.ph-loc .ixrow:hover i{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Benefits of ownership: the comparison */
.ph-ben{background:var(--sand)}
.ph-ben .phw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,84px);align-items:center}
.ph-ben h1{font-size:clamp(42px,5vw,82px)}
.ph-ben .lede{margin-top:26px}
.ledger{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(60,35,15,.55);font-size:15px}
.ledger th,.ledger td{padding:18px 22px;text-align:left;border-top:1px solid var(--rule);vertical-align:middle}
.ledger thead th{border-top:0;font:500 13px/1.2 var(--sans);color:var(--muted);padding-top:20px;padding-bottom:16px}
.ledger tbody th{font:500 13.5px/1.2 var(--sans);color:var(--muted);width:22%}
.ledger td:nth-child(2){color:#8C8176}
.ledger td:nth-child(3),.ledger thead th:nth-child(3){background:rgba(227,182,118,.16)}
.ledger thead th:nth-child(3){color:var(--ink);font-weight:600}
.ledger td:nth-child(3){font:600 16.5px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}

/* AI Smart Agent: a day on the line, on ink */
.ph-ai{background:radial-gradient(60% 80% at 82% 30%,rgba(227,182,118,.2),rgba(227,182,118,0) 65%),var(--ink);color:#fff}
.ph-ai .phw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,100px);align-items:center}
.ph-ai h1{color:#fff;font-size:clamp(40px,4.8vw,78px)}
.ph-ai h1 .mute{color:rgba(255,255,255,.5)}
.ph-ai .lede{color:rgba(255,255,255,.76);margin-top:26px}
.ph-ai .btn-ink{background:var(--gold);color:var(--ink);box-shadow:none}
.ph-ai .btn-ink .bi{background:var(--ink);color:var(--gold)}
.ph-ai .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.ph-ai .btn-line:hover{background:#fff;color:var(--ink)}
.ph-ai .feed{position:relative;padding-left:0}
.ph-ai .fh{margin:0 0 18px;font-size:14px;color:rgba(255,255,255,.6)}
.ph-ai .fi{display:grid;grid-template-columns:62px 40px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px 14px 0;border-top:1px solid rgba(255,255,255,.12)}
.ph-ai .fi:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ph-ai .fi time{font:500 13px/1 var(--sans);color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-ai .fi .ai{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,#FFF6E6,#F0D4A6)}
.ph-ai .fi .ai img{width:25px;display:block}
.ph-ai .fi b{display:block;font:600 17px/1.2 var(--display);letter-spacing:-.015em}
.ph-ai .fi div span{display:block;margin-top:3px;font-size:14px;color:rgba(255,255,255,.66)}

/* Franchise: centred headline over a panorama with the opening years */
.ph-fr{text-align:center;padding-bottom:clamp(40px,4vw,64px)}
.ph-fr h1{font-size:clamp(54px,8.6vw,140px)}
.ph-fr .lede{margin:26px auto 0;max-width:38em}
.ph-fr .ctas{justify-content:center}
.ph-fr .pano{position:relative;margin:clamp(36px,4.5vw,64px) 0 0;aspect-ratio:21/9;border-radius:8px;overflow:hidden;background:#3a2c22}
.ph-fr .pano img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.ph-fr .pano::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,13,8,.78),rgba(20,13,8,0) 46%)}
.ph-fr .pano ol{position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;padding:0 clamp(18px,2.6vw,36px) clamp(16px,2vw,26px);list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.7fr);gap:0;text-align:left;color:#fff}
.ph-fr .pano li{padding:14px 16px 0 0;border-top:1px solid rgba(255,255,255,.35)}
.ph-fr .pano li b{display:block;font:600 clamp(20px,2vw,30px)/1 var(--display);letter-spacing:-.03em}
.ph-fr .pano li span{display:block;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.8)}
.ph-fr .pano li.next{border-top-color:var(--gold)}
.ph-fr .pano li.next b{color:var(--gold)}

/* Book a tour: pick the building right in the head */
.ph-bt .phw{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.ph-bt h1{font-size:clamp(44px,5.4vw,88px)}
.ph-bt .lede{margin-top:26px}
.ph-bt .pick{background:var(--espresso);color:#fff;border-radius:22px;padding:26px 26px 22px;box-shadow:0 50px 90px -50px rgba(30,18,10,.8)}
.ph-bt .pick p{margin:0 0 10px;font:600 20px/1.1 var(--display);letter-spacing:-.02em}
.ph-bt .pk{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;width:100%;padding:15px 0;border:0;border-top:1px solid rgba(255,255,255,.14);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:padding .4s cubic-bezier(.16,1,.3,1)}
.ph-bt .pk b{font:600 19px/1.1 var(--display);letter-spacing:-.02em}
.ph-bt .pk span{grid-column:1;margin-top:5px;font-size:13.5px;color:rgba(255,255,255,.62)}
.ph-bt .pk em{grid-column:2;grid-row:1/3;align-self:center;font:600 13px/1 var(--sans);font-style:normal;color:var(--ink);background:var(--gold);padding:8px 12px;border-radius:999px;white-space:nowrap}
.ph-bt .pk:hover,.ph-bt .pk:focus-visible{padding-left:10px}
.ph-bt .pk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ph-bt .pick small{display:block;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.6)}

/* Directory: the search is the head */
.intro.ph-dir{padding-top:calc(76px + clamp(40px,5vw,76px))}
.intro.ph-dir h1{grid-column:1/8;font-size:clamp(46px,6vw,96px);line-height:.96;letter-spacing:-.045em;margin:0}
.intro.ph-dir .search{max-width:760px}

@media (max-width:980px){
.ph{padding-top:calc(68px + 36px)}
.ph-about .top,.ph-loc .phw,.ph-ben .phw,.ph-ai .phw,.ph-bt .phw{grid-template-columns:1fr}
.ph-about .trip{grid-template-columns:1fr 1fr}.ph-about .trip figure:first-child{grid-column:1/3}
.ph-fr .pano{aspect-ratio:auto}.ph-fr .pano img{position:absolute;inset:0}.ph-fr .pano ol{position:relative;grid-template-columns:1fr 1fr;padding-top:160px;row-gap:14px}.ph-fr .pano li.next{grid-column:1/3}
.intro.ph-dir h1{grid-column:1/-1}
.ledger th,.ledger td{padding:14px 12px;font-size:14px}.ledger td:nth-child(3){font-size:15px}
}

/* page heads: beat `.js.gs main>section:not(.hero)` (paper) and `.ctas .btn-line` (white, meant for photo heroes) */
.js.gs main>section.ph-ben{background:var(--sand)}
.js.gs main>section.ph-ai{background:radial-gradient(60% 80% at 82% 30%,rgba(227,182,118,.2),rgba(227,182,118,0) 65%),var(--ink)}
.ph .ctas .btn-line{color:var(--ink);border-color:rgba(26,21,18,.28);background:rgba(255,255,255,.55)}
.ph .ctas .btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ph-ai .ctas .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.ph-ai .ctas .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.ph-about .top{align-items:center}

.intro.ph-dir h1{grid-column:1/8;font-size:clamp(44px,5.2vw,84px);white-space:nowrap}
@media (max-width:980px){.intro.ph-dir h1{white-space:normal}}
.ph-fr .pano::after{background:linear-gradient(0deg,rgba(20,13,8,.9),rgba(20,13,8,.55) 22%,rgba(20,13,8,0) 50%)}

@media (max-width:980px){
.ph-fr .pano{aspect-ratio:auto;background:var(--espresso)}.ph-fr .pano img{position:static;height:220px}.ph-fr .pano::after{display:none}
.ph-fr .pano ol{position:static;padding:4px 18px 20px;grid-template-columns:1fr 1fr;row-gap:16px}.ph-fr .pano li.next{grid-column:1/3}
.ph-loc .ixh,.ph-loc .ixrow{grid-template-columns:48px minmax(0,1fr) auto;column-gap:14px}.ph-loc .ixrow i{display:none}
.ph-loc .ixrow .ad{grid-column:2/4}.ph-loc .ixrow em{grid-row:1}
}

/* ===== 11/10 (2): index arrow is one centred circle; location card facts are label/value rows ===== */
.ph-loc .ixrow .go{grid-column:4;grid-row:1/3;justify-self:end;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);transition:background .3s,color .3s,border-color .3s}
.ph-loc .ixrow .go svg{width:13px;height:13px;display:block}
.ph-loc .ixrow:hover .go{background:var(--ink);color:#fff;border-color:var(--ink)}
.sx-plan.loc .then{font-size:14px;line-height:1.55;margin-bottom:0}
.sx-plan.loc .specs{margin:20px 22px 0;padding:0;border-top:1px solid var(--rule)}
.sx-plan.loc .specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.sx-plan.loc .specs dt{margin:0;font-size:13.5px;color:var(--muted)}
.sx-plan.loc .specs dd{margin:0;font:600 15px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.sx-plan.loc .ctas{margin-top:20px}
.sx-plan.loc .more svg{width:13px;height:13px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sx-plan.loc .more:hover svg{transform:translateX(4px)}
@media (max-width:980px){.ph-loc .ixrow .go{display:none}}

/* ===== 11/10 (3) motion: heads are driven by js/heads.js; CSS keeps a delayed fallback ===== */
.ph-dir [data-in]{animation:phin 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*85ms + 80ms)}
.js.gs .ph [data-in],.js.gs .ph-dir [data-in]{animation-delay:2.8s}
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .05em .16em;margin:-.08em -.05em -.16em}
.hw>span{display:inline-block;will-change:transform}
.ph-about .trip img{will-change:transform}
.ph-fr .pano,.ph-fr .pano img{will-change:transform,clip-path}
/* table rows: never transform a row (it fought the scroll reveal and shifted text by a pixel or two) */
.dir .row,.dir .row:hover{transform:none!important;transition:background .2s ease}
.js.gs .dir .row{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.ph-dir [data-in]{animation:none}}

/* ===== 11/10 (4) audit fixes: siblings line up regardless of how their text wraps ===== */
@media (min-width:1081px){
#pricing .sx-plangrid{grid-auto-rows:auto}
#pricing .sx-plan:not(.loc){display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;align-content:start}
#pricing .sx-plan:not(.loc)>.btn{align-self:end}
}
.kv b{white-space:nowrap;font-size:clamp(20px,1.9vw,30px)}
.sx-tls h4{min-height:2.6em;min-height:2lh}
.sx-wallgrid .sx-q>b{display:block;min-height:2.4em;min-height:2lh}
@media (max-width:640px){.sx-num b{display:flex;align-items:flex-end;min-height:2.2em;min-height:2lh}}

/* 11/10 (5): franchise key stats overlapped once nowrap was forced; let them wrap, reserve two lines so labels still align */
.kv{column-gap:28px}
.kv b{white-space:normal;display:block;font-size:clamp(19px,1.5vw,25px);line-height:1.15;min-height:2.3em;min-height:2lh;text-wrap:balance}

/* 11/10 (6) audit rerun: tile captions stack on tablets and phones (name + city overflowed, long captions wrapped unevenly) */
@media (max-width:1080px){.tile>span{flex-direction:column;align-items:flex-start;gap:5px}.tile>span em{white-space:normal;text-align:left;align-self:flex-start;line-height:1.35}}

/* ===== 11/10 (7) content pass: home doors, studio contents, opens-next list, contact, prose ===== */
.doors{display:flex;gap:14px;height:clamp(380px,44vw,560px)}
.door2{position:relative;flex:1 1 0;min-width:0;border-radius:8px;overflow:hidden;color:#fff;text-decoration:none;transition:flex-grow .7s cubic-bezier(.16,1,.3,1)}
.door2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.door2::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,13,8,.88),rgba(20,13,8,.25) 55%,rgba(20,13,8,.1))}
.door2>div{position:absolute;z-index:2;left:clamp(20px,2.6vw,38px);right:clamp(20px,2.6vw,38px);bottom:clamp(20px,2.6vw,36px)}
.door2 span{font-size:13.5px;color:rgba(255,255,255,.72)}
.door2 h3{color:#fff;font-size:clamp(28px,3.3vw,52px);margin:8px 0 12px;letter-spacing:-.04em}
.door2 p{max-width:26em;color:rgba(255,255,255,.82);font-size:15.5px;margin:0 0 18px}
.door2 em{display:inline-flex;align-items:center;gap:10px;font-style:normal;font-weight:600;font-size:15px}
.door2 em .bi{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.door2 em .bi svg{width:13px;height:13px}
@media (hover:hover){.doors:hover .door2{flex-grow:.82}.doors .door2:hover{flex-grow:1.25}.door2:hover img{transform:scale(1.05)}.door2:hover em .bi{transform:translateX(4px)}}
.doors-sec{padding-bottom:0!important}
.suite{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.suite figure{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/5;background:#d9cfc0}
.suite figure img{width:100%;height:100%;object-fit:cover;display:block}
.suite .incl{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.suite .incl li{padding:13px 0 13px 26px;border-top:1px solid rgba(26,21,18,.12);font-size:15px;line-height:1.35;position:relative}
.suite .incl li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);transform:rotate(-45deg)}
.suite .offer{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 22px;border-radius:16px;background:var(--espresso);color:#fff}
.suite .offer b{display:block;font:600 clamp(22px,2.1vw,30px)/1.1 var(--display);letter-spacing:-.03em;color:var(--gold)}
.suite .offer span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.75);max-width:24em}
.suite .offer .btn-ink{background:#fff;color:var(--ink)}.suite .offer .btn-ink .bi{background:var(--ink);color:#fff}
.soon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.soon p{margin-top:14px;max-width:30em;color:#4A433C}.soon p a{color:var(--brown)}
.soon ol{list-style:none;margin:0;padding:0;counter-reset:s}
.soon li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid rgba(26,21,18,.14)}
.soon li:last-child{border-bottom:1px solid rgba(26,21,18,.14)}
.soon li b{font:600 clamp(22px,2.2vw,32px)/1 var(--display);letter-spacing:-.03em}
.soon li span{font-size:14px;color:var(--muted)}
.legal{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:60em}
footer .base .flinks{display:inline-flex;gap:20px}footer .base .flinks a{color:inherit;text-decoration:none}footer .base .flinks a:hover{text-decoration:underline}
.ph-simple h1{font-size:clamp(46px,6.4vw,104px)}.ph-simple .lede{margin-top:24px}
.ph-contact .ixrow{grid-template-columns:40px minmax(0,1fr) auto}.ph-contact .ixh{grid-template-columns:40px minmax(0,1fr) auto}.ph-contact .ixh span:last-child{grid-column:3}
.ph-contact .ixrow em{grid-column:3;color:var(--ink)}.ph-contact .ixrow em a{color:inherit;text-decoration:none;font-size:15px}
.ph-contact .ixrow:hover{padding-left:0;background:none}
.reach{margin:26px 0 0;padding:0;max-width:30em}.reach>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule)}.reach>div:last-child{border-bottom:1px solid var(--rule)}
.reach dt{color:var(--muted);font-size:14px}.reach dd{margin:0;font-weight:600;font-size:15px}.reach dd a{color:inherit;text-decoration:none}
.prose{max-width:44em}.prose h2{font-size:clamp(22px,2vw,28px);margin:38px 0 12px}.prose h2:first-child{margin-top:0}.prose p{color:#4A433C;font-size:16px;line-height:1.6;margin:0 0 12px}
@media (max-width:980px){.doors{flex-direction:column;height:auto}.door2{flex:none;height:340px}.suite,.soon{grid-template-columns:1fr}.suite .incl{grid-template-columns:1fr}.ph-contact .ixrow em{grid-row:auto;grid-column:2}}

/* 11/10 (8): new home sections, heading scale and spacing */
.doors-sec{padding-bottom:clamp(36px,4vw,56px)!important}
.suite h2,.soon h2,#bella .sx-bgrid h2{font-size:clamp(34px,3.7vw,58px);line-height:1.02;letter-spacing:-.04em}

/* ===== 11/10 (9) colour sweep + a day at Belle Vie ===== */
.swp{--s1:#7A3E12;--s2:#C98A4B;--s3:#E3B676;--mc:#A1968A;color:transparent!important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(100deg,var(--s1) 0,var(--s2) 22%,var(--s3) 39%,var(--mc) 52%,var(--mc) 100%);background-size:250% 100%;background-position:100% 0;background-repeat:no-repeat;padding-bottom:.12em;margin-bottom:-.12em}
.dark .swp,.ph-ai .swp,.sx.dark .swp{--s1:#B98543;--s2:#E3B676;--s3:#F6E3BE;--mc:rgba(255,255,255,.5)}
/* filter chips take colour like a polish swatch */
.ph-dir .chips a{position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s}
.ph-dir .chips a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c,var(--ink));transform:translateY(104%);border-radius:45% 45% 0 0/40% 40% 0 0;transition:transform .6s cubic-bezier(.16,1,.3,1),border-radius .6s}
.ph-dir .chips a.on{color:#fff;border-color:transparent;background-color:#fff}
.ph-dir .chips a.on::before{transform:none;border-radius:0}
.chips [data-q="Hair"]{--c:#7A3E12}.chips [data-q="Nails"]{--c:#B4455B}.chips [data-q="Lashes"]{--c:#3D3A52}.chips [data-q="Skincare"]{--c:#6E8F7B}.chips [data-q="Med spa"]{--c:#2F6F8F}.chips [data-q="Massage"]{--c:#8A6B3F}.chips [data-q="Barber"]{--c:#1A1512}.chips [data-q="Wellness"]{--c:#5E7A62}.chips [data-q="Open suites"]{--c:#2F7D45}
/* day cycle */
.dayrun{position:relative;height:320vh;padding:0!important;background:var(--ink)!important}
.daysky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff}
.daysky .bg,.daysky .bg i,.daysky .stars{position:absolute;inset:0}
.daysky .bg i{opacity:0;will-change:opacity}
.daysky .bg .a{opacity:1;background:linear-gradient(180deg,#F3B58F 0,#F6D9B8 55%,#EFE0C6 100%)}
.daysky .bg .b{background:linear-gradient(180deg,#7DB6E2 0,#CFE6F3 60%,#F0E7D6 100%)}
.daysky .bg .c{background:linear-gradient(180deg,#E9793E 0,#F4AE63 46%,#8A4517 100%)}
.daysky .bg .d{background:linear-gradient(180deg,#0C1020 0,#191C33 55%,#1A1512 100%)}
.daysky .stars{opacity:0}.daysky .stars i{position:absolute;border-radius:50%;background:#fff}
.daysky .sun{position:absolute;left:50%;top:50%;width:clamp(84px,8vw,130px);aspect-ratio:1;margin:calc(clamp(84px,8vw,130px)/-2);border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF7E0,#F3C777);box-shadow:0 0 130px 46px rgba(255,214,140,.55);will-change:transform}
.daysky .ridge{position:absolute;left:0;right:0;bottom:0;height:24%;background:var(--ink);clip-path:polygon(0 60%,9% 42%,17% 55%,28% 22%,37% 48%,46% 30%,58% 58%,66% 36%,77% 52%,86% 28%,94% 46%,100% 34%,100% 100%,0 100%)}
.daysky .txt{position:relative;z-index:2;padding:0 var(--gut);margin-top:-6vh}
.daysky time{display:block;font:500 clamp(15px,1.2vw,18px)/1 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.daysky h2{color:#fff;font-size:clamp(42px,6.6vw,108px);letter-spacing:-.045em;line-height:.98;margin:16px 0 0;text-shadow:0 2px 34px rgba(40,20,5,.28)}
.daysky .txt p{margin:18px auto 0;max-width:30em;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(40,20,5,.3)}
.daysky .ticks{position:absolute;z-index:3;left:0;right:0;bottom:26px;margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:clamp(14px,3vw,44px);font:500 13px/1 var(--sans);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.daysky .ticks li{padding-top:10px;border-top:2px solid rgba(255,255,255,.22);transition:color .4s,border-color .4s}.daysky .ticks li.on{color:#fff;border-color:var(--gold)}
.dayrun .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dayrun.static{height:auto}.dayrun.static .daysky{position:relative;height:70vh}
@media (prefers-reduced-motion:reduce){.dayrun{height:auto}.daysky{position:relative;height:70vh}}

/* 11/10 (10): day beats row had picked up global list styles; home tile captions stack under the title */
.daysky ol.dbeats{all:unset;position:absolute;z-index:3;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:clamp(14px,3vw,44px);list-style:none;font:500 13px/1 var(--sans);color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.daysky ol.dbeats li{all:unset;padding-top:10px;border-top:2px solid rgba(255,255,255,.25);transition:color .4s,border-color .4s}
.daysky ol.dbeats li.on{color:#fff;border-top-color:var(--gold)}
.cgrid:not(.flat) .tile>span{flex-direction:column;align-items:flex-start;gap:6px}
.cgrid:not(.flat) .tile>span em{white-space:normal;text-align:left;align-self:flex-start;line-height:1.4;max-width:32em}

/* ===== 11/10 (11) the land: four ranges with haze, saguaros, horizon glow, clouds, moon ===== */
.daysky .ridge{display:none}
.daysky .land{position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;z-index:1}
.daysky .land .rg{position:absolute;left:-3%;bottom:0;width:106%;height:100%;fill:var(--ink);will-change:transform}
.daysky .land .r3{fill:var(--ink)}
.daysky .land .cactus{position:absolute;bottom:11%;height:15%;width:auto;fill:#16110E;will-change:transform}
.daysky .land .c0{left:7%;height:19%;bottom:9%}.daysky .land .c1{left:13%;height:11%;bottom:13%}.daysky .land .c2{left:71%;height:13%;bottom:12%}.daysky .land .c3{left:86%;height:21%;bottom:8%}.daysky .land .c4{left:92.5%;height:10%;bottom:12%}
.daysky .glow{position:absolute;left:0;right:0;bottom:16%;height:58%;opacity:0;pointer-events:none;background:radial-gradient(46% 78% at var(--gx,50%) 100%,rgba(255,206,140,.9),rgba(255,176,110,.35) 45%,rgba(255,176,110,0) 72%);mix-blend-mode:screen}
.daysky .clouds{position:absolute;inset:0 -10% 0 -10%;pointer-events:none;will-change:transform,opacity}
.daysky .clouds i{position:absolute;display:block;height:26px;border-radius:50%;background:rgba(255,255,255,.6);filter:blur(16px)}
.daysky .clouds i:nth-child(1){left:8%;top:22%;width:34%}.daysky .clouds i:nth-child(2){left:52%;top:13%;width:26%;height:18px;opacity:.75}.daysky .clouds i:nth-child(3){left:64%;top:31%;width:38%;height:20px;opacity:.55}
.daysky .moon{position:absolute;right:16%;top:17%;width:clamp(44px,4vw,64px);aspect-ratio:1;border-radius:50%;opacity:0;box-shadow:inset -12px 6px 0 0 #F4EAD2;filter:drop-shadow(0 0 22px rgba(244,234,210,.5))}
.daysky .stars i{animation:tw 3.6s ease-in-out infinite}@keyframes tw{50%{opacity:.25}}
.daysky .sun{z-index:0}.daysky .txt{z-index:3;margin-top:-14vh}.daysky ol.dbeats{z-index:4}
.daysky .bg .a{background:linear-gradient(180deg,#E9A98A 0,#F5CFAE 48%,#F7E3C8 100%)}
.daysky .bg .b{background:linear-gradient(180deg,#6FAEDF 0,#BFDDF0 58%,#EFE7D8 100%)}
.daysky .bg .c{background:linear-gradient(180deg,#5B4A7A 0,#D8663C 38%,#F6A85A 70%,#F9C98A 100%)}
.daysky .bg .d{background:linear-gradient(180deg,#080B18 0,#141833 50%,#231D2C 100%)}
@media (prefers-reduced-motion:reduce){.daysky .stars i{animation:none}}

/* ===== 11/10 (11) navbar: a floating glass capsule with a segmented page switch ===== */
.nav{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;padding:12px clamp(12px,2vw,28px) 0;pointer-events:none}
.nav .in{pointer-events:auto;position:relative;max-width:1360px;margin:0 auto;height:62px!important;padding:0 9px 0 22px;border-radius:999px;background:rgba(252,249,244,.66);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 46px -28px rgba(40,24,10,.5),0 2px 8px -3px rgba(40,24,10,.14);transition:height .5s cubic-bezier(.2,.7,.2,1),max-width .6s cubic-bezier(.2,.7,.2,1),background .4s ease}
.nav.solid .in{height:54px!important;max-width:1160px;background:rgba(252,249,244,.88)}
.nav .logo{height:40px}.nav.solid .logo{height:34px}
.nav ul{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px;gap:0;border-radius:999px;background:rgba(26,21,18,.05);box-shadow:inset 0 1px 1px rgba(40,24,10,.06)}
.nav ul a{display:block;padding:8px 15px;font-size:14px;letter-spacing:-.005em;opacity:.66}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1}
.nav ul .ind{top:4px;height:calc(100% - 8px);background:#fff;box-shadow:0 1px 2px rgba(40,24,10,.14),0 8px 16px -10px rgba(40,24,10,.38)}
.nav .right{gap:6px}
.nav .login{font-size:14px}
.nav .btn{min-height:44px;padding:0 9px 0 20px}
.nav.solid .btn{min-height:38px}
.nav .btn-ink .bi{width:28px;height:28px}
@media (max-width:1180px){.nav ul a{padding:8px 11px;font-size:13.5px}}
@media (max-width:1080px){.nav .in{padding:0 8px 0 18px}}
@media (max-width:640px){.nav{padding:8px 10px 0}.nav .in,.nav.solid .in{height:54px!important}.nav .btn{min-height:38px}}

/* ===== 11/10 (12) building selector ===== */
.bsel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.bstage{position:relative;min-height:clamp(420px,42vw,600px);border-radius:10px;overflow:hidden;background:#2A1F18}
.bfig{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.bfig.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.bfig>img:first-child{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.bfig.on>img:first-child{transform:none}
.bfig::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,13,8,.78),rgba(20,13,8,0) 46%)}
.bfig .ext{position:absolute;z-index:2;right:16px;top:16px;width:clamp(96px,10vw,148px);aspect-ratio:303/222;object-fit:cover;border-radius:8px;border:3px solid #fff;box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
.bfig figcaption{position:absolute;z-index:2;left:22px;right:170px;bottom:20px;color:#fff}
.bfig figcaption b{display:block;font:600 clamp(20px,2vw,28px)/1.1 var(--display);letter-spacing:-.03em}
.bfig figcaption span{display:block;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.82)}
.bfig .t3dchip{position:absolute;z-index:2;right:16px;bottom:18px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;transition:transform .3s ease}
.bfig .t3dchip:hover{transform:translateY(-2px)}
.blist{display:flex;flex-direction:column;justify-content:center}
.brow{border-top:1px solid var(--rule)}.brow:last-child{border-bottom:1px solid var(--rule)}
.bh{all:unset;box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:baseline;column-gap:14px;width:100%;padding:20px 0;cursor:pointer}
.bh .yr{font:500 13.5px/1 var(--sans);color:var(--gold-ink);font-variant-numeric:tabular-nums}
.bh b{font:600 clamp(26px,2.9vw,44px)/1 var(--display);letter-spacing:-.035em;color:#A1968A;transition:color .4s ease}
.bh em{font:500 13.5px/1 var(--sans);font-style:normal;color:#2F7D45;white-space:nowrap}
.brow.on .bh b,.bh:hover b{color:var(--ink)}
.bh:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.brow.on .bd{grid-template-rows:1fr}
.bdi{overflow:hidden;min-height:0;padding-left:70px}
.bdi p{margin:0 0 16px;color:#4A433C;font-size:15.5px;line-height:1.5;max-width:30em}
.bdi dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:26em}
.bdi dl dt{font-size:12.5px;color:var(--muted)}.bdi dl dd{margin:4px 0 0;font:600 22px/1 var(--display);letter-spacing:-.02em}
.bct{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0 24px}
.bct .btn{min-height:44px}
.bct .more{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
.bct .more svg{width:13px;height:13px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.bct .more:hover svg{transform:translateX(4px)}
@media (max-width:980px){.bsel{grid-template-columns:1fr}.bstage{min-height:0;aspect-ratio:4/3}.bdi{padding-left:0}.bh{grid-template-columns:48px minmax(0,1fr) auto}.bfig figcaption{right:22px;bottom:64px}.bfig .t3dchip{left:22px;right:auto}}

/* ===== 11/10 (12) navbar v3: full width and quiet. Logo in the middle of the links, Bella's line on the left ===== */
.nav{padding:0!important;pointer-events:auto;background:rgba(250,247,242,.8)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 1px 0 rgba(26,21,18,.07)!important;transition:background .4s ease}
.nav.solid{background:rgba(250,247,242,.93)!important;box-shadow:0 1px 0 rgba(26,21,18,.09),0 18px 36px -30px rgba(60,35,15,.5)!important}
.nav .in,.nav.solid .in{position:relative;max-width:none;margin:0;height:72px!important;padding:0 var(--gut);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
.nav.solid .in{height:60px!important}
.nav .navlogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;line-height:0}
.nav .logo{height:46px}.nav.solid .logo{height:38px}
.nav .navlive{display:inline-flex;align-items:center;gap:9px;font:500 13.5px/1 var(--sans);color:var(--ink);text-decoration:none;opacity:.78;transition:opacity .3s}
.nav .navlive:hover{opacity:1}
.nav .navlive i{position:relative;width:7px;height:7px;border-radius:50%;background:#3E9B57}
.nav .navlive i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #3E9B57;animation:ping 2.2s cubic-bezier(.2,.7,.2,1) infinite}
.nav ul{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0;gap:2px;background:none;box-shadow:none;border-radius:0}
.nav ul li:nth-child(5){margin-left:clamp(120px,11vw,170px)}
.nav ul a{padding:10px 13px;font-size:14.5px;opacity:.6;letter-spacing:0}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1}
.nav ul .ind{top:auto;bottom:3px;height:2px;border-radius:2px;box-shadow:none;background:linear-gradient(90deg,transparent 13px,var(--gold-ink) 13px,var(--gold-ink) calc(100% - 13px),transparent calc(100% - 13px))}
.nav .right{gap:8px}
.nav .btn,.nav.solid .btn{min-height:42px;padding:0 9px 0 19px}
@media (max-width:1380px){.nav ul a{padding:10px 9px;font-size:14px}.nav ul li:nth-child(5){margin-left:112px}.nav .navlive span{display:none}}
@media (max-width:1180px){.nav .login{display:none}.nav ul a{padding:10px 7px;font-size:13.5px}.nav ul li:nth-child(5){margin-left:100px}.nav .logo{height:40px}}
@media (max-width:1080px){.nav .navlogo{position:static;transform:none}.nav .navlive{display:none}.nav .in,.nav.solid .in{height:60px!important}.nav .logo,.nav.solid .logo{height:34px}}
@media (max-width:640px){.nav{padding:0!important}}
@media (prefers-reduced-motion:reduce){.nav .navlive i::after{animation:none}}

/* ===== 11/10 (12) spacing + copy helpers ===== */
.doors-sec{padding-bottom:clamp(72px,8vw,120px)!important}
.suite .sub{margin:14px 0 0;max-width:30em;color:#4A433C;font-size:16.5px;line-height:1.5}

/* ===== 11/10 (13) member quotes: three across, swipe for more ===== */
.tqh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4vw,48px)}
.tqh h2{font-size:clamp(34px,3.8vw,60px);line-height:1.02;letter-spacing:-.04em;max-width:13em;margin:0}
.tqnav{display:flex;align-items:center;gap:10px;flex:none}
.tqnav .tqc{margin-right:8px;font:500 14px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}.tqnav .tqc b{color:var(--ink)}
.tqnav button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(26,21,18,.2);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s,opacity .25s}
.tqnav button svg{width:15px;height:15px}.tqnav .prev svg{transform:scaleX(-1)}
.tqnav button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.tqnav button:disabled{opacity:.3;cursor:default}
.tqnav button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.tqs.fits .tqnav,.tqs.fits .tqbar{display:none}
.tqtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*20px)/3);column-gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 2px 28px;margin:-12px -2px 0;cursor:grab}
.tqtrack::-webkit-scrollbar{display:none}.tqtrack.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tqtrack:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}
.tq{position:relative;margin:0;display:flex;flex-direction:column;scroll-snap-align:start;padding:30px 28px 26px;border-radius:18px;background:#fff;border:1px solid var(--rule);box-shadow:0 30px 50px -44px rgba(60,35,15,.55);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.tq:hover{transform:translateY(-6px);box-shadow:0 40px 60px -40px rgba(60,35,15,.6)}
.tq .qm{display:block;height:54px;font:600 92px/1 Georgia,'Times New Roman',serif;color:transparent;background:linear-gradient(100deg,#7A3E12 0,#C98A4B 22%,#E3B676 39%,#D9CFC2 52%,#D9CFC2 100%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.tq blockquote{margin:6px 0 26px;font:400 clamp(16px,1.25vw,18.5px)/1.55 var(--sans);color:#2E2823;letter-spacing:-.005em}
.tq figcaption{margin-top:auto;display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--rule)}
.tq figcaption i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,#FFF3DC,#E3B676);color:#5A3A12;font:600 14px/1 var(--sans);font-style:normal;letter-spacing:.02em}
.tq figcaption b{display:block;font:600 15.5px/1.2 var(--sans)}.tq figcaption span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.tqbar{position:relative;height:2px;margin-top:4px;background:rgba(26,21,18,.12);overflow:hidden;border-radius:2px}
.tqbar i{position:absolute;left:0;top:0;height:100%;width:33.33%;background:var(--ink);transition:transform .35s ease}
@media (max-width:1080px){.tqtrack{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:700px){.tqtrack{grid-auto-columns:86%;column-gap:14px}.tqh{flex-direction:column;align-items:flex-start}.tq{padding:24px 22px 22px}}

/* ===== 11/10 (13) final CTA steps: a real stepper ===== */
.final ol{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:0 0 36px;padding:0;list-style:none}
.final ol li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#fff;white-space:nowrap}
.final ol li b{display:grid;place-items:center;flex:none;width:34px;height:34px;margin:0;border-radius:50%;border:1px solid rgba(227,182,118,.65);background:rgba(227,182,118,.14);color:var(--gold);font:600 14px/1 var(--sans);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.final ol li:first-child b{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.final ol li+li::before{content:"";flex:none;width:clamp(22px,3.6vw,56px);height:1px;margin:0 16px;background:linear-gradient(90deg,rgba(227,182,118,.75),rgba(227,182,118,.25))}
@media (max-width:700px){.final ol{flex-direction:column;align-items:flex-start}.final ol li+li{margin-top:0;padding-top:26px;position:relative}.final ol li+li::before{position:absolute;left:17px;top:4px;width:1px;height:18px;margin:0;background:rgba(227,182,118,.6)}}

/* 11/10 (14): quote captions align at the top so one-line and two-line roles sit level */
.tq figcaption{align-items:flex-start}.tq figcaption span{min-height:2.7em;min-height:2lh}

/* 11/10 (15) tenants page */
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tcard{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border-radius:16px;background:#fff;border:1px solid var(--rule)}
.tcard h3{font-size:clamp(22px,2vw,28px);margin:0 0 10px}.tcard p{color:#4A433C;font-size:15.5px;line-height:1.5;margin:0 0 20px;max-width:30em}.tcard .btn{margin-top:auto}
@media (max-width:760px){.tgrid{grid-template-columns:1fr}}

/* ===== 11/10 (16) navbar A: plain left. Logo, links beside it, tour button right. Clear over photos, frosted once you scroll ===== */
.nav{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;color:var(--ink);transition:background .35s ease,box-shadow .35s ease,color .35s ease}
.nav.solid{background:rgba(250,247,242,.92)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 1px 0 rgba(26,21,18,.09),0 18px 36px -30px rgba(60,35,15,.45)!important}
.nav .in,.nav.solid .in{display:flex;align-items:center;justify-content:flex-start;gap:clamp(22px,3vw,48px);height:76px!important;padding:0 var(--gut)}
.nav.solid .in{height:62px!important}
.nav .navlogo{position:static;transform:none;flex:none;line-height:0}
.nav .logo{height:46px;transition:height .45s cubic-bezier(.2,.7,.2,1),filter .35s ease}.nav.solid .logo{height:38px}
.nav ul{position:static;transform:none;display:flex;gap:clamp(14px,2vw,30px);padding:0;margin:0;background:none;box-shadow:none}
.nav ul li:nth-child(5){margin-left:0}
.nav ul .ind{display:none}
.nav ul a,.nav .login{padding:8px 0;font-size:14.5px;color:inherit;opacity:.66;transition:opacity .25s ease}
.nav ul a:hover,.nav .login:hover{opacity:1;background:none}
.nav ul a[aria-current]{opacity:1;font-weight:600}
.nav .right{margin-left:auto;gap:22px}
.nav .btn,.nav.solid .btn{min-height:44px;padding:0 9px 0 20px}
.nav.solid .btn{min-height:40px}
/* pages that open on a photo or on ink: white bar until you scroll */
body:has(main>section.hero:first-child) .nav:not(.solid),body:has(main>section.ph-ai:first-child) .nav:not(.solid){color:#fff}
body:has(main>section.hero:first-child) .nav:not(.solid) .logo,body:has(main>section.ph-ai:first-child) .nav:not(.solid) .logo{filter:brightness(0) invert(1)}
body:has(main>section.hero:first-child) .nav:not(.solid) .btn-ink,body:has(main>section.ph-ai:first-child) .nav:not(.solid) .btn-ink{background:#fff;color:var(--ink);box-shadow:none}
body:has(main>section.hero:first-child) .nav:not(.solid) .btn-ink .bi,body:has(main>section.ph-ai:first-child) .nav:not(.solid) .btn-ink .bi{background:var(--ink);color:#fff}
/* the photo runs up behind the bar */
.hero{padding-top:0!important}
.hero .hero-copy{padding-top:clamp(96px,11vh,130px)}
.hero .live{top:92px}
@media (max-width:1180px){.nav .login{display:inline}.nav ul{gap:16px}.nav ul a{font-size:14px}}
@media (max-width:1080px){.nav .in,.nav.solid .in{height:64px!important}.nav .logo,.nav.solid .logo{height:36px}.nav .login{display:none}}
@media (max-width:1080px){.nav ul{display:none}}
.nav ul a.cur{opacity:1;font-weight:600}
/* 11/10 (18): the bar never changes. Same height, same blurred smoked glass, white logo and text, top of page or scrolled */
.nav,.nav.solid{background:rgba(24,16,11,.6)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)!important;color:#fff!important;transition:none}
.nav .in,.nav.solid .in{height:72px!important;transition:none}
.nav .logo,.nav.solid .logo{height:44px;filter:brightness(0) invert(1);transition:none}
.nav .btn,.nav.solid .btn{min-height:42px}
.nav .btn-ink,.nav.solid .btn-ink{background:#fff;color:var(--ink);box-shadow:none}
.nav .btn-ink .bi,.nav.solid .btn-ink .bi{background:var(--ink);color:#fff}
.nav ul a,.nav .login{color:#fff}
@media (max-width:1080px){.nav .in,.nav.solid .in{height:62px!important}.nav .logo,.nav.solid .logo{height:36px}}
/* 11/10 (20): phones and tablets get a menu */
.navmenu{display:none}
.navsheet{position:fixed;inset:0;z-index:39;background:var(--ink);color:#fff;padding:92px var(--gut) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;transform:translateY(-102%);visibility:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s;overflow:auto}
.navsheet.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.navsheet>a{color:#fff;text-decoration:none;font:600 clamp(30px,8.6vw,46px)/1.15 var(--display);letter-spacing:-.035em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.navsheet .sm{margin-top:auto;padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.navsheet .sm a{color:rgba(255,255,255,.82);text-decoration:none;font:500 16px/1.3 var(--sans)}
body.navopen{overflow:hidden}
@media (max-width:1080px){
.navmenu{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.38);cursor:pointer;flex:none}
.navmenu span{display:grid;gap:5px}.navmenu i{display:block;width:18px;height:1.6px;background:#fff;transition:transform .3s ease}
.navopen .navmenu i:first-child{transform:translateY(3.3px) rotate(45deg)}.navopen .navmenu i:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.navmenu:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nav .right{gap:8px}
}
@media (max-width:400px){.nav .btn,.nav.solid .btn{padding:0 7px 0 14px;font-size:13.5px}}
/* 11/10 (23): the bar is a floating pill (Vedant: "make the navbar round") */
.nav,.nav.solid{top:10px!important;left:max(8px,calc(var(--gut) - 26px))!important;right:max(8px,calc(var(--gut) - 14px))!important;bottom:auto!important;width:auto!important;border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 16px 36px -24px rgba(20,10,4,.75)!important}
.nav .in,.nav.solid .in{height:64px!important;padding:0 11px 0 26px!important;width:auto!important;max-width:none!important;margin:0!important}
.nav .logo,.nav.solid .logo{height:40px}
@media (max-width:1080px){.nav .in,.nav.solid .in{height:58px!important;padding:0 7px 0 18px!important}.nav .logo,.nav.solid .logo{height:34px}}
/* 11/10 (25): slimmer bar and smaller buttons in it (Vedant: "navbar looks unusually big") */
.nav .in,.nav.solid .in{height:52px!important;padding:0 7px 0 22px!important}
.nav .logo,.nav.solid .logo{height:32px}
.nav .btn,.nav.solid .btn{min-height:38px;padding:0 6px 0 16px;font-size:13.5px;gap:9px}
.nav .btn .bi{width:26px;height:26px}
.nav ul a,.nav .login{font-size:14px;padding:6px 0}
@media (max-width:1080px){.nav .in,.nav.solid .in{height:50px!important;padding:0 6px 0 16px!important}.nav .logo,.nav.solid .logo{height:30px}.navmenu{width:38px;height:38px}.nav .right{gap:6px}}
/* ===== end navbar A */

/* 11/10 (17): home headline is two sentences, one per line on desktop */
@media (min-width:1081px){.pg-index .hero .hero-copy{max-width:1000px}.pg-index .hero h1.l3{font-size:clamp(38px,4.1vw,64px)}.pg-index .hero h1.l3 .line{white-space:nowrap}}

/* ===== 11/10 (19) one corner radius for every photo and card ===== */
:root{--rad:22px;--rad-s:14px}
.door2,.bstage,.suite figure,.ph-about .trip figure,.ph-fr .pano,.t3d,.final .box,.mapcard,.sx-tcard,.ba,.pic .frame,.tile .v,.calc-r,.hero.short .hero-media .img{border-radius:var(--rad)}
.pic .frame img,.tile .v img,.tile .v video{border-radius:inherit}
.sx-plan,.sx-q,.tq,.tcard,.ledger,.ph-bt .pick,.ob-pv,.suite .offer{border-radius:var(--rad)}
.bfig .ext{border-radius:var(--rad-s)}
.pic .frame,.tile .v,.suite figure,.bstage,.door2,.ph-fr .pano,.final .box{overflow:hidden}
@media (max-width:640px){:root{--rad:16px;--rad-s:10px}}

/* ===== 11/10 (21) phone pass ===== */
@media (max-width:640px){
/* the floating Bella button shrinks to its orb so it stops covering buttons and text */
#bv-pill{font-size:0;gap:0;padding:8px;right:12px;bottom:12px;min-height:0}
#bv-pill .dot{width:36px;height:36px}
/* tighter rhythm between sections */
.sx-pad{padding-top:60px!important;padding-bottom:60px!important}
.doors-sec{padding-top:36px!important;padding-bottom:44px!important}
.intro,.faq,.calc{padding-top:60px;padding-bottom:60px}
/* studio contents: shorter photo */
.suite figure{aspect-ratio:4/3}
.suite .offer{flex-direction:column;align-items:flex-start}.suite .offer .btn{width:100%;justify-content:center}
/* building selector */
.bfig::after{background:linear-gradient(0deg,rgba(20,13,8,.92),rgba(20,13,8,.5) 42%,rgba(20,13,8,0) 78%)}
.bfig figcaption{bottom:66px;left:18px;right:18px}.bfig figcaption span{display:none}
.bfig .ext{width:84px;right:12px;top:12px}.bfig .t3dchip{left:18px;bottom:16px}
.bdi dl{gap:8px}.bdi dl dt{font-size:11.5px;line-height:1.25;min-height:2.5em}
.bct .btn{flex:1;justify-content:center}
.bh{padding:16px 0}
/* the day scene */
.dayrun{height:280vh}
.daysky .txt{margin-top:2vh}
.daysky h2{font-size:clamp(34px,10.5vw,48px)}
.daysky ol.dbeats{left:14px;right:66px;bottom:22px;gap:8px;justify-content:space-between;font-size:11px}
.daysky ol.dbeats li{flex:1;text-align:center;white-space:nowrap}
.daysky .land .cactus{display:none}
/* Bella band */
.sx-bgrid{grid-template-columns:1fr!important}
.sx-orbwrap{min-height:300px}
#bella .ctas .btn{width:100%;justify-content:center}
/* page heads */
.ph{padding-bottom:44px}
.ph .ctas .btn,.hero .ctas .btn{width:100%;justify-content:center}
.ph-loc .ixrow b{font-size:28px}
.ledger th,.ledger td{padding:12px 10px;font-size:13.5px}.ledger tbody th{width:auto}
/* quotes and the stepper */
.tqh h2{font-size:32px}
.final .box{margin-inline:10px}
/* directory rows read as cards */
.dir .row{grid-template-columns:1fr 84px;row-gap:2px;padding:14px 0}
.dir .row>div:nth-child(2){grid-column:1;font-size:13.5px;color:var(--muted)}
.dir .row>div:nth-child(4){grid-column:1;font-size:13px;color:var(--muted)}
.dir .row>.btn{grid-column:2;grid-row:1/4;align-self:center;width:84px}
.dir h3 small{font-size:13px}
}
@media (max-width:900px){.sx-bgrid{grid-template-columns:1fr}.sx-orbwrap{min-height:320px}}
/* 11/10 (22): the Bella band orb stays centred on phones (the hero orb offsets must not apply here) */
.sx-orbwrap .vorb{left:auto;bottom:auto}

/* ===== 11/10 (24) round edges: the section after a pinned photo hero slides over it with round shoulders; dark bands are round panels ===== */
main>section.hero+section{position:relative;z-index:2;border-radius:30px 30px 0 0}
.js.gs main>section.sx.dark,main>section.sx.dark{border-radius:30px;margin-inline:12px}
main>section.ph-ai{border-radius:0 0 30px 30px}
@media (max-width:640px){main>section.hero+section{border-radius:20px 20px 0 0}.js.gs main>section.sx.dark,main>section.sx.dark{border-radius:20px;margin-inline:8px}main>section.ph-ai{border-radius:0 0 20px 20px}}
.sx-osm{border-radius:var(--rad)}

/* ===== 11/10 (26) hero fixes ===== */
/* the text column sat on top of the Talk to Bella orb and swallowed its clicks */
.hero .hero-copy,.hero .hero-copy>*{pointer-events:none}.hero .hero-copy a,.hero .hero-copy button{pointer-events:auto}
/* phones and tablets: the hero fills the screen (no pale strip under it) and the orb sits centred at the bottom */
@media (max-width:1080px){
main>section.hero:not(.short),main>section.hero:not(.short) .hero-in{min-height:100svh}
}
@media (max-width:640px){
.pg-index .hero .vorb,.pg-benefits .hero .vorb,.pg-ownership .hero .vorb{left:50%;right:auto;top:auto;bottom:34px;margin:0 0 0 -75px;transform:none}
}

/* ===== 11/10 (27) phone pass 2 ===== */
#bv-pill{transition:opacity .3s ease,transform .3s ease}
body.orbseen #bv-pill{opacity:0!important;pointer-events:none!important;transform:scale(.6)}
@media (max-width:640px){
/* three reasons: shorter photos, so the section is two screens instead of four */
.crafts.light .tile .v,.cgrid .tile .v{aspect-ratio:3/2}
.cgrid{row-gap:26px}
/* door cards: label and text stay readable over the photo */
.door2::after{background:linear-gradient(0deg,rgba(20,13,8,.94),rgba(20,13,8,.6) 48%,rgba(20,13,8,.1))}
.door2 span{color:rgba(255,255,255,.92)}
/* final call to action: the headline was touching the top edge of the card */
.final .box{min-height:0;padding-top:44px;padding-bottom:34px}
/* hero copy starts a little lower now that the bar is slimmer and the location line is gone */
.pg-index .hero .hero-copy{padding-top:104px}
}
/* 11/10 (28): the hero photo was 76px shorter than its section (old navbar offset), leaving a pale strip under it */
main>section.hero:not(.short) .hero-in{min-height:100svh!important}
main>section.hero.short{min-height:0!important}
/* 11/10 (29): no floating notification cards or live chip on hero photos (Vedant: "I don't like the tooltips") */
.hero .fc,.hero .live{display:none!important}

/* ===== 11/11 (30) hero orb sits bottom right, below the level of the buttons (Vedant) ===== */
@media (min-width:1081px){
.pg-index .hero .vorb,.pg-benefits .hero .vorb,.pg-ownership .hero .vorb{left:auto;right:5%;top:auto;bottom:44px;margin-top:0;transform:scale(.8);transform-origin:100% 100%}
}

/* ===== 11/12 (31) orb reads as a button (second line), and a working search box under the two doors (Kevin: site may be too advanced) ===== */
.osub{display:block;position:relative;z-index:3;margin-top:-4px;font:600 14px/1 var(--sans);color:#4A2E12;opacity:.9;white-space:nowrap}
.doorsearch{margin:22px auto 0;max-width:640px}
.doorsearch button.btn{border:0;cursor:pointer}
@media (max-width:1080px){.osub{font-size:12px}}
@media (max-width:520px){.doorsearch{padding-left:14px;gap:8px}.doorsearch .btn{padding-left:18px;padding-right:18px}.doorsearch .btn .bi{display:none}}

/* ===== 11/13 (32) orb: no square focus box after a tap (round ring for keyboard only), hide "Tap to talk" during a call, faster wave while live ===== */
.vorb:focus,.vorb:focus-visible{outline:none!important}
.vorb:focus-visible .orbb{box-shadow:0 0 0 4px rgba(227,182,118,.75),inset 0 2px 0 rgba(255,255,255,.75),0 0 80px 6px rgba(227,182,118,.5)}
html[data-bv-call=connecting] .osub,html[data-bv-call=live] .osub,html[data-bv-call=ended] .osub{display:none}
html[data-bv-call=live] .vorb .wave i{animation-duration:.7s}

/* ===== 11/13 (33) live call: the orb follows Bella's voice (--bv-lv set by call.js), as on the membership page ===== */
html[data-bv-call=live].bv-lv-on .vorb .orbb{animation:none;transform:scale(calc(1 + var(--bv-lv,0) * .14));transition:transform .08s linear}
html[data-bv-call=live].bv-lv-on .vorb .wave i{animation:none;transform:scaleY(calc(.45 + var(--bv-lv,0) * 1.1));transition:transform .08s linear}
html[data-bv-call=live] .vorb .rings i{animation-duration:2.2s}
html[data-bv-call=connecting] .vorb .wave i{animation-duration:.6s}