/* Gomez Team Group · Direction 1 "The Introduction"
   Type: Noto Serif Display (display) + Instrument Sans (body/UI), self-hosted.
   Palette: Ink (Ariel's suit) · Bone (pool-deck stone) · Stone (travertine) · one accent, Walnut. */

@font-face{font-family:"Noto Serif Display";src:url(assets/fonts/noto-serif-display-wght.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Display";src:url(assets/fonts/noto-serif-display-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fonts/instrument-sans-wght.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Serif Fallback";src:local("Georgia");size-adjust:96%;ascent-override:92%;descent-override:24%}
@font-face{font-family:"Sans Fallback";src:local("Arial");size-adjust:98%;ascent-override:96%;descent-override:24%}

:root{
  --ink:#141A26;
  --bone:#F2EDE4;
  --stone:#DDD5C8;
  --slate:#5B6170;          /* 5.3:1 on Bone */
  --walnut:#8A5A3A;         /* the accent: 5.0:1 on Bone */
  --walnut-lt:#C9A27A;      /* same hue lifted for Ink (7.4:1) */
  --mist:#B4B8C2;           /* secondary text on Ink (8.9:1) */
  --rule-ink:rgba(20,26,38,.16);
  --rule-bone:rgba(242,237,228,.18);
  --error:#9B2C1F;

  --serif:"Noto Serif Display","Serif Fallback",Georgia,serif;
  --sans:"Instrument Sans","Sans Fallback",system-ui,sans-serif;

  --pad:clamp(20px,5.2vw,84px);
  --gap:clamp(12px,1.6vw,28px);
  --section:clamp(96px,14vh,190px);

  --display:clamp(2.75rem,1rem + 6.4vw,7.5rem);
  --h2:clamp(2.125rem,1.1rem + 3.2vw,4.5rem);
  --statement:clamp(1.875rem,1rem + 2.9vw,4.125rem);
  --lede:clamp(1.125rem,1rem + .4vw,1.375rem);
  --body:clamp(1.0625rem,1rem + .22vw,1.1875rem);

  /* hairline rule: light weights only where the size can hold them */
  --w-display:380;--w-h2:400;--w-statement:400;
  --expo:cubic-bezier(.16,1,.3,1);
  --quart:cubic-bezier(.25,1,.5,1);
  --z-nav:30;
}
@media (min-width:1024px){:root{--w-display:300;--w-h2:340;--w-statement:340}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bone);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html:not(.lenis){scroll-behavior:smooth}
body{font:400 var(--body)/1.6 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
/* ?lang=es (or a stored Spanish choice): hold the first paint until main.js swaps the copy, so the
   baked English never flashes. Shown after 2s whatever happens, so a failed script can't blank the page. */
html[data-lang-early] body{visibility:hidden;animation:ag-lang-wait 0s 2s forwards}
@keyframes ag-lang-wait{to{visibility:visible}}
img,video,svg,picture{display:block;max-width:100%}
[hidden]{display:none !important}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
.lede{text-wrap:pretty}
.statement{text-wrap:balance}
h1,h2,h3{font-weight:inherit;text-wrap:balance}
ol,ul{list-style:none;padding:0}
fieldset{border:0;padding:0;margin:0;min-inline-size:0}
legend{padding:0}
::selection{background:var(--walnut);color:var(--bone)}
:focus-visible{outline:2px solid var(--walnut);outline-offset:3px}
[data-dark] :focus-visible,.aperture.is-night :focus-visible{outline-color:var(--walnut-lt)}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad)}

/* ───────── type roles ───────── */
.eyebrow{font:500 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.display{font-family:var(--serif);font-weight:var(--w-display);font-size:var(--display);line-height:.97;letter-spacing:-.018em}
.h2{font-family:var(--serif);font-weight:var(--w-h2);font-size:var(--h2);line-height:1.03;letter-spacing:-.012em}
.statement{font-family:var(--serif);font-weight:var(--w-statement);font-size:var(--statement);line-height:1.12;letter-spacing:-.01em}
.lede{font-size:var(--lede);line-height:1.5;max-width:40ch}
.fine{font-size:.8125rem;line-height:1.6;color:var(--slate);max-width:68ch}
em{font-style:italic;color:inherit}
/* the accent italic lives only in the hero, the night headline and the buyers statement */
.dhero em,.phero--shore em{color:var(--walnut)}
.ap__over em,.buyers em,.mhero em{color:var(--walnut-lt)}

/* placeholder chip: always visible, labelled, never collapses the layout */
.ph{display:inline-block;vertical-align:middle;background:rgba(20,26,38,.05);color:var(--ink);border:1px dashed rgba(20,26,38,.45);border-radius:2px;padding:.3em .55em;font:500 .75rem/1.3 var(--sans);letter-spacing:.01em;font-style:normal;text-transform:none;text-align:left;max-width:100%}
.ph__k{font-size:inherit;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-right:.6em}
[data-dark] .ph,.aperture.is-night .ph{color:var(--bone);border-color:rgba(242,237,228,.45);background:rgba(242,237,228,.06)}
/* reserved slot: holds the real size of display content until it's confirmed */
.ph-slot{display:grid;justify-items:start;gap:10px}
.ph-ghost{display:block;width:3.2ch;height:.92em;border-bottom:1px dashed currentColor;opacity:.25}
.ph-ghost--wide{width:min(100%,18em);height:1.15em}

.skip{position:fixed;left:16px;top:16px;z-index:100;background:var(--ink);color:var(--bone);padding:12px 16px;transform:translateY(-200%);transition:transform .3s var(--expo)}
.skip:focus{transform:none}

.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.08;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain--light{mix-blend-mode:overlay;opacity:.14}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 28px;background:var(--ink);color:var(--bone);text-decoration:none;font:500 .875rem/1 var(--sans);letter-spacing:.05em;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:var(--walnut);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--expo);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn svg{transition:transform .6s var(--expo)}
.btn:hover svg{transform:translateX(5px)}
.btn:focus-visible{outline-offset:4px}
.link{font:500 .875rem/1.4 var(--sans);letter-spacing:.04em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--expo)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.vtoggle{font:500 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;min-height:44px;min-width:44px;padding:0 2px;background:linear-gradient(currentColor,currentColor) 0 calc(50% + 9px)/100% 1px no-repeat;flex:none}
.vtoggle:hover{opacity:.7}

/* ───────── nav ───────── */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px var(--pad);padding-top:max(12px,env(safe-area-inset-top));transition:transform .8s var(--expo),background-color .5s,color .5s}
.nav::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--rule-ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--expo)}
/* solid, never see-through: Bone over the page, Ink over the dark sections */
.nav{background:var(--bone)}
.nav.is-solid::after{transform:scaleX(1)}
.nav.is-dark{color:var(--bone)}
.nav.is-dark{background:var(--ink)}
.nav.is-dark::after{background:var(--rule-bone)}
.nav__mark{flex:none}
/* wordmark lockup: the name in the display serif, the brokerage in tracked capitals beneath it.
   The brokerage line never drops below 13px, so "Avenew Realty" reads as part of the name, not fine print. */
.mark{display:inline-grid;justify-items:start;text-decoration:none;white-space:nowrap;--mark:1.875rem;--track:.238em}
.mark__name{font:400 var(--mark)/.86 var(--serif);letter-spacing:-.012em}
.mark__sub{margin-top:calc(var(--mark) * .2);font:500 max(13px,calc(var(--mark) * .3334))/1 var(--sans);letter-spacing:var(--track,.16em);margin-right:calc(var(--track,.16em) * -1);text-transform:uppercase}
/* phones: "Gomez Team Group" is a longer name than the old one, so the serif steps down to clear EN/ES.
   The brokerage line keeps its 13px floor (it reads larger against the name, never smaller), and the
   mark keeps its 45px height, so the header stays 69px tall. */
@media (max-width:440px){
  .nav__mark{--mark:1.5rem;min-height:45px;align-content:center}
  .footer .footer__mark{--mark:1.875rem}
}
.nav__cta{font:500 .8125rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.nav__end{display:flex;align-items:center;gap:clamp(12px,2.2vw,28px)}
.lang{display:flex;align-items:center;font:500 .75rem/1 var(--sans);letter-spacing:.12em}
.lang button{min-width:44px;min-height:44px;opacity:.62;transition:opacity .3s}
.lang button:hover{opacity:1}
.lang button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lang span{opacity:.4}
html[data-no-lang] .lang{display:none}
.nav__cta{display:inline-flex;align-items:center;min-height:44px;border:1px solid currentColor;padding:0 16px;transition:background-color .4s,color .4s}   /* 44px touch target at every width */
.nav__cta:hover{background:var(--ink);color:var(--bone)}
.nav.is-dark .nav__cta:hover{background:var(--bone);color:var(--ink)}
.nav__call{display:inline-flex;align-items:center}
.nav__call[hidden]{display:none}
@media (max-width:860px){
  .nav__cta{display:inline-flex;align-items:center;min-height:44px}   /* a 44px touch target */
}
/* phones: both languages stay visible; the Spanish CTA uses its short label */
@media (max-width:420px){
  .nav{gap:10px}
  .nav__end{gap:8px}
  .lang button{min-width:40px}
  .nav__cta{padding:11px 12px;font-size:.75rem}
}

/* ───────── 2 · the team ─────────
   The statement runs wide; under it, the team's note on the left and Ariel and Rafael side by side on
   the right, at the same size, so neither reads as the lead. On phones the two stay side by side. */
.team{padding-block:clamp(64px,9vh,120px) calc(var(--section) * .8)}
.team__eyebrow{grid-column:1 / span 6;color:var(--slate);margin-bottom:28px}
.team__statement{grid-column:1 / span 10}
.team__body{grid-column:1 / span 4;grid-row:3;align-self:start;margin-top:clamp(48px,8vh,88px);display:grid;gap:1.05em;font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);line-height:1.6}
.team__approval{margin-top:.2em}
.people{grid-column:6 / -1;grid-row:3;margin:clamp(48px,8vh,88px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:start}
.person{min-width:0}
.person__frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#87827b}
.person__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.person__name{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-ink);font:400 clamp(1.375rem,1rem + .9vw,2rem)/1.1 var(--serif);letter-spacing:-.01em}
.person__role{margin-top:10px;color:var(--slate)}
.person__meta,.person__bio{margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--slate);max-width:34ch}
.terms dt,.direct dt{font:500 .6875rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
@media (max-width:1023px){
  .team__eyebrow,.team__statement{grid-column:1 / -1}
  .team__body{grid-column:1 / span 9}
  .people{grid-column:1 / -1;grid-row:4;max-width:760px}
}
@media (max-width:599px){
  .team__body{grid-column:1 / -1}
  .people{margin-top:44px}
  .person__name{margin-top:14px;padding-top:12px;font-size:1.25rem}
  .person__meta,.person__bio{font-size:.875rem}
}

/* ───────── 3 · the gold line (signature) ───────── */
.aperture{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--bone);color:var(--ink)}
.ap__night{position:absolute;inset:0;z-index:1;background:var(--ink);opacity:0;visibility:hidden}
.ap__media{position:absolute;inset:0;z-index:2}
html:is(.motion,.ap-pre) .ap__media{clip-path:inset(0% 50% 0% 50%)}
html.ap-pre:not(.motion) .ap__line{transform:scaleY(0)}
.ap__line{transform-origin:50% 0}
.ap__media .media{position:absolute;inset:0;background:var(--ink)}
/* the line: deep gold on stone, then (--glow) a bright core and halo on the night, like the
   lit strip on the Domus tower. Two halves sit on top of each other until the line splits. */
.ap__line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,rgba(184,135,61,0) 0,#B8873D 4%,#CF9F4F 50%,#B8873D 96%,rgba(184,135,61,0) 100%);
  box-shadow:0 0 8px 1px rgba(207,159,79,.5),0 0 32px 6px rgba(207,159,79,.2)}
.ap__line::after{content:"";position:absolute;inset:0;opacity:var(--glow,0);
  background:linear-gradient(to bottom,rgba(255,217,149,0) 0,#FFD995 4%,#FFF3D6 50%,#FFD995 96%,rgba(255,217,149,0) 100%);
  box-shadow:0 0 6px 2px rgba(255,214,140,.9),0 0 26px 6px rgba(244,182,90,.6),0 0 90px 22px rgba(232,160,70,.3)}
.ap__shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  radial-gradient(110% 90% at 0% 100%,rgba(11,14,22,.72) 0%,rgba(11,14,22,0) 62%),
  linear-gradient(to top,rgba(11,14,22,.55) 0%,rgba(11,14,22,0) 45%)}
.ap__over{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(36px,9vh,96px);z-index:4;color:var(--bone)}
.ap__headline{font-family:var(--serif);font-weight:340;font-size:clamp(2.5rem,1rem + 4.2vw,5.25rem);line-height:1;letter-spacing:-.015em;max-width:8em}
.ap__credit.is-light,html:not(.motion):not(.ap-pre) .ap__credit{color:var(--bone);background:rgba(20,26,38,.7);padding-left:12px;padding-right:10px}

@media (max-width:600px){
  .ap__credit{font-size:.6875rem;line-height:1.35;gap:12px}
}
.ap__credit{position:absolute;right:var(--pad);bottom:clamp(20px,3vh,32px);z-index:5;display:flex;align-items:center;gap:18px;font-size:.75rem;color:var(--slate);transition:color .4s;max-width:calc(100% - var(--pad) * 2)}

@media (max-width:860px){
  .ap__over{bottom:clamp(150px,32svh,280px)}
  .ap__shade{background:linear-gradient(to top,rgba(11,14,22,.78) 0%,rgba(11,14,22,.55) 45%,rgba(11,14,22,0) 72%)}
}

/* media frames */
.media{position:relative;overflow:hidden;background:var(--stone)}
.media video,.media img{width:100%;height:100%;object-fit:cover}
[data-parallax] > video,[data-parallax] > picture{position:absolute;inset:-6% 0;height:112%}
[data-parallax] > picture img{height:100%}
.cap{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px;font-size:.75rem;line-height:1.45;color:var(--slate)}

/* ───────── 4 · Domus ───────── */
.domus{padding-block:var(--section) calc(var(--section) * .9)}
.domus__head{align-items:end}
.domus__title{grid-column:1 / span 7}
.domus__aside{grid-column:9 / -1;display:grid;gap:10px}
.domus__address{font-size:.9375rem}
.spec{margin:clamp(48px,7vh,80px) var(--pad) 0;border-block:1px solid var(--rule-ink);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.spec div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:12px;padding:30px 0 28px}
.spec div + div{border-left:1px solid var(--rule-ink);padding-left:var(--gap)}
.spec dd{font:400 clamp(2rem,1rem + 1.9vw,2.625rem)/1.02 var(--serif);letter-spacing:-.015em;font-variant-numeric:lining-nums}
.spec dt{font:500 .6875rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
/* "Studio–2 bed" / "Estudio–2 hab." never breaks: where a column is too narrow, the ledger figures size
   down just enough to fit (all four together, so the row stays even). The divisor is the longest value's
   width in em. Browsers without container units keep the normal size. */
@supports (width:1cqi){
  .spec div{container-type:inline-size}
  .spec dd{white-space:nowrap;font-size:min(clamp(2rem,1rem + 1.9vw,2.625rem),calc(100cqi / 6))}
  html[lang="es"] .spec dd{font-size:min(clamp(2rem,1rem + 1.9vw,2.625rem),calc(100cqi / 6.85))}
}
.shot{margin:0}
.shot--pool{margin:clamp(48px,7vh,80px) var(--pad) 0}
.shot--pool .media{aspect-ratio:21/9}
.shot--pool video{object-position:50% 72%}
.domus__row{margin-top:clamp(64px,9vh,112px);align-items:start}
.shot--jacuzzi{grid-column:1 / span 4;margin-top:clamp(48px,7vh,96px)}
.shot--jacuzzi .media{aspect-ratio:4/5}
.domus__copy{grid-column:5 / span 4;padding-inline:clamp(0px,1vw,16px);align-self:center}
.domus__copy .lede{max-width:none}
.domus__label{margin-top:36px;padding-bottom:10px;color:var(--slate)}
.terms{border-top:1px solid var(--rule-ink)}
.terms div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule-ink)}
.terms dt{margin:0}
.shot--interior{grid-column:10 / -1;margin-top:-64px}
.shot--interior .media{aspect-ratio:9/16}
/* rooftop bar + amenities: the 720p clip stays at its own size (max 640px), the list answers it */
.bar{margin-top:clamp(72px,10vh,120px);align-items:center}
.shot--bar{grid-column:1 / span 6;width:100%;max-width:640px}
.shot--bar .media{aspect-ratio:16/9}
.bar__amen{grid-column:8 / -1;max-width:520px}
.bar__label{color:var(--slate);padding-bottom:16px}
.amen{border-bottom:1px solid var(--rule-ink)}
.amen li{padding:12px 0 11px;border-top:1px solid var(--rule-ink);font:400 clamp(1.25rem,1rem + .62vw,1.5625rem)/1.2 var(--serif);letter-spacing:-.006em}
@media (min-width:1600px){.bar__amen{grid-column:7 / span 5}}
/* Domus Brickell Park: name on the left, the line and the ask on the right, on one rule */
.park{margin:clamp(72px,10vh,120px) var(--pad) 0;padding:32px 0 0;border-top:1px solid var(--rule-ink);align-items:end;row-gap:24px}
.park__id{grid-column:1 / span 6;display:grid;gap:10px}
.park__eyebrow{color:var(--slate);margin-bottom:6px}
.park__name{font:400 clamp(2rem,1.2rem + 1.8vw,3rem)/1.02 var(--serif);letter-spacing:-.012em}
.park__spec{color:var(--slate);font-size:.9375rem}
.park__body{grid-column:8 / -1;display:grid;gap:16px}
.park__line{font-size:var(--lede);line-height:1.45;text-wrap:pretty}
.park__ask{justify-self:start;text-decoration:none}
/* the required disclosure closes the Domus section, as fine print under a hairline */
.domus__disclosure{margin-top:clamp(56px,8vh,96px)}
.domus__disclosure .fine{grid-column:1 / span 9;padding-top:20px;border-top:1px solid var(--rule-ink);font-size:.75rem;max-width:none}
@media (max-width:860px){.domus__disclosure .fine{grid-column:1 / -1}}
@media (max-width:1023px) and (min-width:861px){
  .domus__title{grid-column:1 / span 8}.domus__aside{grid-column:9 / -1}
  .shot--jacuzzi{grid-column:1 / span 5}.domus__copy{grid-column:6 / -1}
  .shot--interior{grid-column:1 / span 4;margin-top:48px}
}
@media (max-width:860px){
  .domus__title,.domus__aside{grid-column:1 / -1}
  .domus__aside{margin-top:28px}
  .spec{grid-template-columns:1fr 1fr;column-gap:0}
  .spec div{padding:22px 0 20px}
  .spec div:nth-child(3){border-left:0;padding-left:0}
  .spec div:nth-child(n+3){border-top:1px solid var(--rule-ink)}
  .spec dd{font-size:1.5rem}
  .shot--pool{margin-inline:0}
  .shot--pool .media{aspect-ratio:4/3}
  .shot--pool .cap{padding-inline:var(--pad)}
  .domus__row{margin-top:40px}
  .shot--jacuzzi{grid-column:1 / span 9;margin-top:0}
  .domus__copy{grid-column:1 / -1;margin-top:40px;padding:0}
  .shot--interior{grid-column:4 / -1;margin-top:40px}
  .bar{margin-top:56px}
  .shot--bar{grid-column:1 / -1;max-width:none}
  .bar__amen{grid-column:1 / -1;max-width:none;margin-top:40px}
  .park__id,.park__body{grid-column:1 / -1}
}

/* ───────── 5 · FLATS ───────── */
.flats{background:var(--stone);padding-block:var(--section);--slate:#454A56;align-items:start}
.flats__left{grid-column:1 / span 5}
.flats__left .eyebrow{color:var(--ink)}
.acro{margin-top:26px;font-family:var(--serif);font-weight:var(--w-display);font-size:clamp(3rem,1rem + 5vw,6.5rem);line-height:.98;letter-spacing:-.015em;display:flex;flex-direction:column}
.acro__w{display:block;color:#7D776C;white-space:nowrap}
.acro__w b{font-weight:400;color:var(--ink)}
.acro__r{display:inline-block}
.acro__for{font-style:italic;font-size:.5em;line-height:1.5;padding-left:.1em}
.flats__right{grid-column:7 / -1;padding-top:clamp(40px,7vh,72px)}
.flats__right .lede{max-width:none}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:36px var(--gap);margin-top:clamp(40px,6vh,64px)}
.benefits li{padding-top:18px;border-top:1px solid var(--rule-ink)}
.benefits h3{font:500 1.0625rem/1.35 var(--sans)}
.benefits p{margin-top:8px;font-size:1rem;color:var(--slate)}
.flats .fine{margin-top:40px;color:var(--slate)}
@media (max-width:860px){
  .flats__left,.flats__right{grid-column:1 / -1}
  .acro{font-size:3.25rem;--w-display:380}
  .benefits{grid-template-columns:1fr;gap:24px}
}

/* ───────── 6 · process: stepped rail ───────── */
.process{padding-block:var(--section)}
.process__head{align-items:end}
.process__title{grid-column:1 / span 6}
.process__title .h2{margin-top:22px}
.process__intro{grid-column:8 / -1;color:var(--slate)}
.steps{position:relative;margin-top:clamp(64px,10vh,112px)}
.steps__list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.steps__list li{position:relative;padding-top:30px}
.steps__list li:nth-child(2){margin-top:56px}.steps__list li:nth-child(3){margin-top:112px}.steps__list li:nth-child(4){margin-top:168px}
.steps__node{position:absolute;left:0;top:0;width:7px;height:7px;background:var(--walnut);transform:translateY(-3px)}
.steps__n{display:block;font:400 1.25rem/1 var(--serif);color:var(--slate);font-variant-numeric:tabular-nums}
.steps__list h3{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1rem + 1vw,2rem);line-height:1.1;letter-spacing:-.008em}
.steps__list p{margin-top:12px;font-size:1rem;color:var(--slate);max-width:28ch}
.steps__rail{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.steps__rail polyline{fill:none;stroke:var(--walnut);stroke-width:1;vector-effect:non-scaling-stroke}
@media (max-width:860px){
  .process__title,.process__intro{grid-column:1 / -1}
  .process__intro{margin-top:20px}
  .steps__rail{display:none}
  .steps__list{grid-template-columns:1fr;padding-left:24px}
  .steps__list li,.steps__list li:nth-child(n){margin-top:0;padding:0 0 40px}
  .steps__node{left:-27px;top:6px}
  .steps__list li:not(:last-child)::before{content:"";position:absolute;left:-24px;top:10px;bottom:-6px;width:1px;background:var(--walnut);transform-origin:top;transform:scaleY(var(--seg,1))}
}

/* ───────── 7 · buyers: one statement on ink, centred ───────── */
.buyers{background:var(--ink);color:var(--bone);padding-block:clamp(80px,12vh,136px)}
.buyers__title{grid-column:2 / span 10;text-align:center;font-family:var(--serif);font-weight:var(--w-statement);font-size:clamp(2.125rem,1rem + 3vw,4.25rem);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.buyers__line{grid-column:1 / -1;justify-self:center;max-width:44ch;margin-top:clamp(20px,3vh,32px);text-align:center;color:var(--mist);font-size:var(--lede);line-height:1.5;text-wrap:balance}
@media (max-width:860px){.buyers__title{grid-column:1 / -1}}

/* ───────── 8 · contact: reply card ───────── */
/* no bottom padding: the form card sits straight on the footer, so there is no empty band */
.contact{padding-block:var(--section) 0;align-items:start}
.contact__head{grid-column:1 / span 4;position:sticky;top:110px;margin-bottom:clamp(48px,6vw,96px)}
.contact__head .h2{margin-top:22px}
.contact__head .lede{margin-top:22px;color:var(--slate)}
/* direct contact: each line appears only when it is filled in (GOMEZ_CONFIG) */
.direct{margin-top:clamp(40px,6vh,64px)}
.direct__title{color:var(--slate);padding-bottom:14px}
.direct__list{border-bottom:1px solid var(--rule-ink)}
.direct__list li{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);align-items:baseline;gap:12px;padding:15px 0 14px;border-top:1px solid var(--rule-ink)}
.direct__k{font:500 .6875rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.direct__v{justify-self:start;font:400 clamp(1.125rem,1rem + .4vw,1.3125rem)/1.3 var(--serif);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--expo)}
.direct__v:hover,.direct__v:focus-visible{background-size:100% 1px}
.card{grid-column:6 / -1;background:var(--stone);border:1px solid var(--rule-ink);border-bottom:0;padding:clamp(28px,3.6vw,56px);--slate:#454A56}
.form__book{grid-column:1 / -1;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--rule-ink);font-size:.9375rem;color:var(--slate)}
.form__book .link{margin-left:6px;color:var(--ink);text-decoration:none}
#leadForm{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.4vw,36px)}
.form__summary{grid-column:1 / -1;margin-bottom:24px;padding:14px 16px;border-left:2px solid var(--error);color:var(--error);background:rgba(155,44,31,.06);font-size:.9375rem}
.field{margin-bottom:30px;min-width:0}
.field--full{grid-column:1 / -1}
.field > label,.field legend{display:block;font:500 .6875rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.field .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--slate)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;min-height:50px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid rgba(20,26,38,.55);border-radius:0;font-size:1.0625rem;appearance:none;-webkit-appearance:none;transition:border-color .35s,box-shadow .35s var(--expo)}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
.field input:hover,.field textarea:hover{border-bottom-color:var(--ink)}
.field input:focus-visible,.field textarea:focus-visible{outline:0;border-bottom-color:var(--walnut);box-shadow:0 1px 0 0 var(--walnut)}
.field ::placeholder{color:#555a66}
.field__hint{margin-top:6px;font-size:.8125rem;color:var(--slate)}
.field__err{margin-top:8px;font-size:.875rem;color:var(--error)}
.field [aria-invalid="true"]{border-bottom-color:var(--error)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips label{position:relative;display:block}
.chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chips--2{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));grid-auto-rows:1fr}   /* columns may shrink, so a long Spanish chip wraps instead of widening the page */
.chips--2 label{display:flex}
.chips--2 span{width:100%}
/* phones: chips in two equal columns, every chip the same height */
@media (max-width:600px){
  .chips--even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .chips--even label{display:flex}
  .chips--even span{width:100%;padding-block:8px;line-height:1.3}
  /* projects: the two Domus buildings side by side, the longer choices on a full row each, so
     "Other Miami pre-construction" sets on one line instead of three */
  .chips--2 label:nth-child(n+5){grid-column:1 / -1}
}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(20,26,38,.55);font-size:.875rem;transition:background-color .3s,color .3s,border-color .3s}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked + span{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--walnut);outline-offset:3px}
fieldset[aria-invalid="true"] .chips span{border-color:var(--error)}
/* under the Send button: what sending agrees to, with the privacy policy link */
.form__agree{grid-column:1 / -1;margin-top:18px;max-width:60ch}
.form__agree .link{font:inherit;letter-spacing:0;color:var(--ink);text-decoration:none}
/* spam trap (Web3Forms "botcheck"): never shown, never focusable */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.btn--submit{grid-column:1 / -1;justify-self:start}
/* without JavaScript: the posters show (set in the HTML), and controls that only work with it are hidden */
html:not(.js) .vtoggle,html:not(.js) .lang,html:not(.js) .btn--submit{display:none}
/* the no-JavaScript note uses the form's notice style, in English and Spanish together */
.form__nojs p + p{margin-top:6px}
.btn--submit[aria-busy="true"]{opacity:.7;pointer-events:none}
.success .lede{margin-top:20px}
/* form notice ("Form not yet connected"): calm, not an error */
.form__notice{grid-column:1 / -1;margin-bottom:24px;padding:14px 16px;border-left:2px solid var(--ink);background:rgba(20,26,38,.05);font-size:.9375rem;line-height:1.5;color:var(--ink)}
.success .link{margin-top:32px}
.success:focus{outline:0}
@media (max-width:860px){
  .contact__head{grid-column:1 / -1;position:static;margin-bottom:0}
  .card{grid-column:1 / -1;margin:48px calc(var(--pad) * -1) 0;padding:28px var(--pad) 40px;border-inline:0}
  #leadForm{grid-template-columns:1fr}
  .btn--submit{justify-self:stretch;justify-content:space-between}
}

/* ───────── footer ───────── */
.footer{background:var(--ink);color:var(--mist);padding-block:clamp(72px,11vh,120px) 32px;font-size:.875rem}
.footer__broker{grid-column:1 / span 6;display:grid;gap:8px;color:var(--bone)}
.footer__mark{justify-self:start;margin-bottom:18px;--mark:2.75rem}
.footer__eho{grid-column:10 / -1;display:flex;gap:16px;align-items:center;align-self:start;justify-self:end;color:var(--bone)}
.footer__legal{grid-column:1 / -1;margin-top:clamp(48px,8vh,88px);padding-top:24px;border-top:1px solid var(--rule-bone);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--gap);font-size:.75rem;line-height:1.6}
.footer__base{grid-column:1 / -1;margin-top:40px;display:flex;justify-content:space-between;gap:20px;font-size:.75rem}
.footer__base a{white-space:nowrap}
.footer__links{display:flex;flex-wrap:wrap;gap:4px 24px}
.footer__links a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:860px){
  .footer__broker,.footer__eho{grid-column:1 / -1}
  .footer__eho{justify-self:start;margin-top:36px}
  .footer__legal{grid-template-columns:1fr}
}

html.motion .domus{position:relative;z-index:7;background:var(--bone);border-top:1px solid var(--rule-ink);margin-top:-100svh}
@media (max-width:860px){html.motion .domus{padding-top:clamp(52px,8svh,80px)}}

/* ───────── tablet band (600–860): its own layout, not a stretched phone ───────── */
@media (min-width:600px) and (max-width:860px){
  .flats__left{grid-column:1 / span 5}
  .flats__right{grid-column:6 / -1;padding-top:0}
  .acro{font-size:3rem}
  .steps__list{grid-template-columns:1fr 1fr;row-gap:48px;padding-left:0}
  .steps__list li,.steps__list li:nth-child(n){padding:30px 0 0}
  .steps__node{left:0;top:0}
  .steps__list li::before,.steps__list li:not(:last-child)::before{content:none}
  .shot--jacuzzi{grid-column:1 / span 6}
  .shot--interior{grid-column:7 / -1;margin-top:0}
  .shot--interior .media,.shot--jacuzzi .media{aspect-ratio:4/5}
  .bar{align-items:center;column-gap:clamp(24px,4vw,32px)}   /* the grid's 12px gutter is too tight beside the list */
  .shot--bar{grid-column:1 / span 7}
  .bar__amen{grid-column:8 / -1;margin-top:0}
  .amen li{font-size:1.125rem;padding:10px 0 9px}
  .domus__copy{grid-row:2;grid-column:1 / -1;max-width:62ch}
  #leadForm{grid-template-columns:1fr 1fr}
  .field--full,.form__agree,.btn--submit{grid-column:1 / -1}
}

/* ───────── static version: before motion loads, without it, on iOS (iosSafeAperture) or with
   reduced motion. A still frame of the opened view: the text, then the night footage full-bleed
   with its headline and credit. html.motion is added by main.js just before the pinned version is built. */
html:not(.motion):not(.ap-pre) .aperture{height:auto;min-height:0}
html:not(.motion):not(.ap-pre) .ap__night,html:not(.motion):not(.ap-pre) .ap__line,html:not(.motion):not(.ap-pre) .ap__shade{display:none}
html:not(.motion):not(.ap-pre) .ap__media{position:relative;inset:auto;height:100svh;min-height:520px;max-height:980px}
html:not(.motion):not(.ap-pre) .ap__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(110% 90% at 0% 100%,rgba(11,14,22,.72) 0%,rgba(11,14,22,0) 62%),
  linear-gradient(to top,rgba(11,14,22,.55) 0%,rgba(11,14,22,0) 45%)}
html:not(.motion):not(.ap-pre) .ap__over{bottom:clamp(64px,11vh,112px)}
.domus__ask{margin-top:36px;padding-top:14px;border-top:1px solid var(--rule-ink);font-size:.9375rem;color:var(--slate)}
@media (max-width:860px){
  html:not(.motion):not(.ap-pre) .ap__media{height:min(100svh,125vw);min-height:0}
  html:not(.motion):not(.ap-pre) .ap__media::after{background:linear-gradient(to top,rgba(11,14,22,.78) 0%,rgba(11,14,22,.5) 40%,rgba(11,14,22,0) 70%)}
  html:not(.motion):not(.ap-pre) .ap__over{bottom:84px}
}

/* ───────── the gold-line stage on phones, in portrait AND landscape (round 5) ─────────
   Phones are narrow in portrait and short in landscape. Either way the stage is one screen tall,
   with no fixed minimum, in lvh so the browser bar showing or hiding never resizes it; what sits at its
   bottom edge is lifted by the bar's height so it's never hidden behind the bar. */
@media (max-width:599px),(max-height:500px){
  .aperture{min-height:0;height:100svh;height:100lvh}
  html.motion .domus{margin-top:-100svh;margin-top:-100lvh}
  .ap__over{bottom:calc(clamp(150px,32svh,280px) + 100lvh - 100svh)}
  .ap__credit{bottom:calc(clamp(20px,3vh,32px) + 100lvh - 100svh)}
}
@media (max-height:500px){
  .ap__over{bottom:calc(clamp(72px,20svh,150px) + 100lvh - 100svh)}
  .ap__headline{font-size:clamp(2.25rem,1rem + 3vw,3.25rem)}
}
/* ───────── phones (under 600px): round 4 ───────── */
@media (max-width:599px){
  /* tighter section spacing, so no blank band runs taller than about 120px where sections meet */
  :root{--section:clamp(64px,9svh,80px)}
  .team{padding-top:56px}
  .steps__list li:last-child{padding-bottom:0}
  /* all media at full content width, no offsets */
  .shot--pool{margin-inline:var(--pad)}
  .shot--pool .cap{padding-inline:0}
  .shot--jacuzzi,.shot--interior{grid-column:1 / -1}
  .shot--interior{margin-top:40px}
  .shot--jacuzzi .media,.shot--interior .media{aspect-ratio:4/5}
  .shot--interior img{object-position:50% 58%}
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
  [data-parallax] > video,[data-parallax] > picture{inset:0;height:100%}
}

/* ───────── round 9 · "Book a call" and "Call now" stay on screen ─────────
   Desktop and tablets: the header never hides, so its buttons are always there.
   768px and below: a fixed bar at the bottom carries both, above the iPhone home bar. The header keeps
   only the wordmark and EN/ES, so the same action isn't shown twice on one small screen. */
.cta-bar{display:none}
@media (max-width:768px){
  :root{--bar:calc(68px + env(safe-area-inset-bottom))}
  .nav .nav__cta{display:none}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;gap:8px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--bone);border-top:1px solid var(--rule-ink)}
  .cta-bar a{flex:1 1 0;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;padding:0 12px;font:500 .875rem/1.15 var(--sans);letter-spacing:.04em;text-align:center;text-decoration:none;transition:background-color .3s,color .3s}
  .cta-bar a[hidden]{display:none}
  .cta-bar__book{background:var(--ink);color:var(--bone)}
  .cta-bar__book:active{background:var(--walnut)}
  .cta-bar__call{border:1px solid var(--ink);color:var(--ink);background:var(--bone)}
  .cta-bar a:focus-visible{outline-offset:2px}
  /* the page ends above the bar: the footer runs on under it, and jumps and focused fields clear it */
  html{scroll-padding-bottom:calc(var(--bar) + 16px)}
  body:not(.legal-page) .footer{padding-bottom:calc(32px + var(--bar))}
  /* the night video's Play/Pause sits at the foot of the pinned stage: lift it over the bar */
  html.motion .ap__credit{bottom:calc(clamp(20px,3vh,32px) + var(--bar))}
  /* touch screens: the bar steps aside while a form field has focus (the keyboard is up) */
  html.typing .cta-bar{display:none}
}
@media (max-width:599px){
  html.motion .ap__credit{bottom:calc(clamp(20px,3vh,32px) + 100lvh - 100svh + var(--bar))}
}
@media (max-width:768px) and (hover:hover) and (pointer:fine){html.typing .cta-bar{display:flex}}


/* ═════════════════════════════════════════════════════════════════════════════════════════════
   ROUND 10 (2026-10-24) · FOUR PAGES
   One idea runs through the site: lines of light. The Domus gold line, the three lines that stand for the
   projects on the home page, the 850-ft line on Delano, the sea's lines at first light on NoBe PARC.
   All of it is our own CSS artwork: no developer imagery except the licensed Domus renderings.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--navh:69px;--gold:#B8873D;--gold-hi:#FFE7B8}

/* ───────── nav: wordmark · tabs · actions ───────── */
.nav{view-transition-name:site-nav}
.tabs{display:none;position:relative;align-items:center;gap:clamp(20px,1.9vw,32px)}
.tab{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 .8125rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.tab > span:first-child{opacity:.7;transition:opacity .3s}
.tab:hover > span:first-child,.tab:focus-visible > span:first-child,.tab[aria-current="page"] > span:first-child,.tab.is-spy > span:first-child{opacity:1}
/* the hairline under the active tab. It slides to a hovered tab (site.js), and from page to page:
   the View Transition morphs it from the old tab to the new one (or site.js does, where that isn't supported) */
.tab__ink{position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--walnut);transform-origin:0 0;transition:transform .55s var(--expo);view-transition-name:nav-ink;pointer-events:none}
.nav.is-dark .tab__ink{background:var(--walnut-lt)}
@media (min-width:1200px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .tabs{display:flex}
  .nav__mark{justify-self:start}
  .nav__end{justify-self:end}
  .menu-btn{display:none !important}
}
/* project tabs: a small preview card on hover or keyboard focus (desktop with a mouse) */
.tab__pv{position:absolute;top:calc(100% + 12px);left:50%;width:252px;margin-left:-126px;padding:10px 10px 14px;display:grid;gap:5px;background:var(--bone);color:var(--ink);border:1px solid var(--rule-ink);box-shadow:0 22px 44px -22px rgba(20,26,38,.45);text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .35s var(--expo),visibility 0s .35s;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .tab--proj:hover .tab__pv,.tab--proj:focus-visible .tab__pv{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .45s var(--expo)}
}
.tab__pv-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:7px;background:var(--ink)}
.tab__pv-art img{width:100%;height:100%;object-fit:cover}
.tab__pv-name{font:400 1.0625rem/1.2 var(--serif);letter-spacing:-.005em}
.tab__pv-meta{font:400 .75rem/1.3 var(--sans);color:var(--slate);letter-spacing:.02em}
.pv-shore{background:linear-gradient(to bottom,var(--bone),#E8C7A6)}
.pv-shore .pv-sun{position:absolute;left:72%;top:58%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle,#FBEBCB 0 38%,#F1C890 60%,rgba(236,180,120,0) 71%);transform:translateY(-55%)}
.pv-shore .pv-sea{position:absolute;left:0;right:0;top:58%;bottom:0;background:repeating-linear-gradient(to bottom,rgba(242,237,228,.22) 0 1px,transparent 1px 7px),linear-gradient(#2B3448,var(--ink))}
.pv-scale .pv-beam{position:absolute;left:66%;bottom:14%;top:10%;width:2px;background:linear-gradient(to top,var(--gold),var(--gold-hi));box-shadow:0 0 8px 1px rgba(207,159,79,.6)}
.pv-scale .pv-city{position:absolute;left:0;right:0;bottom:14%;height:34%;background:linear-gradient(90deg,transparent 8%,rgba(242,237,228,.12) 8% 16%,transparent 16% 22%,rgba(242,237,228,.08) 22% 30%,transparent 30% 76%,rgba(242,237,228,.1) 76% 84%,transparent 84%);-webkit-mask:linear-gradient(to top,#000 60%,transparent);mask:linear-gradient(to top,#000 60%,transparent);border-bottom:1px solid rgba(242,237,228,.3)}

/* the menu button (below 1200px) and the one-tap language switch (phones) */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.menu-btn__i{position:relative;width:22px;height:9px}
.menu-btn__i i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .45s var(--expo)}
.menu-btn__i i:first-child{top:0}
.menu-btn__i i:last-child{bottom:0}
html.menu-open .menu-btn__i i:first-child{transform:translateY(4px) rotate(45deg)}
html.menu-open .menu-btn__i i:last-child{transform:translateY(-4px) rotate(-45deg)}
.lang-flip{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;font:500 .75rem/1 var(--sans);letter-spacing:.12em}
@media (max-width:599px){.menu-btn__t{display:none}}
@media (max-width:440px){
  .nav .lang{display:none}
  .lang-flip{display:inline-flex}
  .nav__end{gap:4px}
}
html[data-no-lang] .lang-flip{display:none !important}

/* the full-screen menu: the projects large, then the rest */
.menu{position:fixed;inset:0;z-index:29;display:flex;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);color:var(--bone);padding:calc(var(--navh) + clamp(20px,4vh,40px)) var(--pad) calc(28px + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--expo)}
html.menu-open .menu{clip-path:inset(0)}
html.menu-open{overflow:hidden}
html.menu-open .nav{background:var(--ink);color:var(--bone)}
html.menu-open .nav::after{transform:scaleX(0)}
html.menu-open .nav .nav__cta{visibility:hidden}
@media (min-width:1200px){.menu{display:none !important}}
.menu__in{display:flex;flex-direction:column;width:100%;max-width:960px;min-height:100%;gap:clamp(20px,3.4vh,32px)}
.menu__k{color:var(--mist)}
.menu__projects li{border-top:1px solid var(--rule-bone)}
.menu__projects a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,3vw,28px);padding:clamp(14px,2.4vh,22px) 0;text-decoration:none}
.menu__n{grid-row:1 / span 2;padding-top:.5em;font:400 .875rem/1 var(--serif);color:var(--walnut-lt);font-variant-numeric:tabular-nums}
.menu__name{font:340 clamp(1.875rem,1rem + 4.2vw,3.5rem)/1.02 var(--serif);letter-spacing:-.014em;text-wrap:balance;transition:color .3s}
.menu__place{margin-top:8px;font-size:.8125rem;color:var(--mist);letter-spacing:.02em}
.menu__projects a:hover .menu__name,.menu__projects a[aria-current="page"] .menu__name{color:var(--walnut-lt)}
.menu__more{display:flex;flex-wrap:wrap;gap:0 28px;padding-top:10px;border-top:1px solid var(--rule-bone)}
.menu__more a{display:inline-flex;align-items:center;min-height:44px;font:500 .9375rem/1 var(--sans);letter-spacing:.04em;text-decoration:none}
.menu__more a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.menu__projects li,.menu__more,.menu__foot{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--expo)}
html.menu-open .menu__projects li,html.menu-open .menu__more,html.menu-open .menu__foot{opacity:1;transform:none}
html.menu-open .menu__projects li:nth-child(1){transition-delay:.12s}
html.menu-open .menu__projects li:nth-child(2){transition-delay:.18s}
html.menu-open .menu__projects li:nth-child(3){transition-delay:.24s}
html.menu-open .menu__more{transition-delay:.3s}
html.menu-open .menu__foot{transition-delay:.34s}

/* buttons on dark */
.btn--light{background:var(--bone);color:var(--ink)}
.btn--light::before{background:var(--walnut-lt)}
.btn--wa{margin-top:clamp(28px,4vh,40px)}

/* ───────── page to page ─────────
   Where the browser supports cross-page View Transitions (served over http/https): the old page lifts away,
   the new one rises, and the nav stays put while its hairline slides to the new tab. Elsewhere (the offline
   folder opened from disk, Firefox) site.js plays the same thing by hand. Never with reduced motion. */
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:no-preference){
  /* the View Transition opt-in itself is in vt.css (every page but Domus) */
  html.page-enter #main{animation:vt-in .7s var(--expo) backwards}
  html.is-leaving #main,html.is-leaving .footer{opacity:0;transform:translateY(-12px);transition:opacity .26s,transform .3s var(--quart)}
}
.cta-bar{view-transition-name:cta-bar}

/* ───────── the team chip: the two partners and the brokerage, on every hero ───────── */
.teamchip{display:inline-flex;align-items:center;gap:14px}
.teamchip__faces{display:flex;flex:none}
.teamchip__faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--bone);background:#87827b}
.teamchip__faces img + img{margin-left:-12px}
.teamchip__t{display:grid;gap:5px}
.teamchip__names{font:400 1.0625rem/1.1 var(--serif)}
.teamchip__firm{font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
[data-dark] .teamchip__firm,.teamchip--light .teamchip__firm{color:var(--mist)}
[data-dark] .teamchip__faces img,.teamchip--light .teamchip__faces img{border-color:var(--ink)}

/* ───────── HOME · hero: three lines of light rising from the bay, one per project ───────── */
.mhero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:var(--gap);padding:calc(var(--navh) + clamp(32px,7vh,88px)) var(--pad) clamp(28px,5vh,52px);background:radial-gradient(90% 70% at 80% 100%,#1C2436 0%,var(--ink) 62%);color:var(--bone);overflow:hidden}
.mhero__copy{grid-column:1 / span 7;grid-row:1;align-self:center;position:relative;z-index:2}
.mhero__eyebrow{color:var(--walnut-lt)}
.mhero__title{margin-top:clamp(18px,2.6vh,28px);max-width:9.5em}
.mhero__lede{margin-top:clamp(22px,3.4vh,36px);color:var(--mist);max-width:36ch}
.mhero__actions{margin-top:clamp(28px,4.2vh,44px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.mhero__more{color:var(--bone);text-decoration:none}
.mhero__chip{grid-column:1 / span 6;grid-row:2;align-self:end;margin-top:36px;position:relative;z-index:2}
.meridian{position:absolute;inset:0;z-index:1;--hz:72%}
.meridian__horizon{position:absolute;left:50%;right:0;top:var(--hz);height:1px;background:linear-gradient(90deg,rgba(201,162,122,0) 0%,rgba(201,162,122,.5) 45%,rgba(201,162,122,.5) 92%,rgba(201,162,122,0));transform-origin:100% 50%}
.mline{position:absolute;bottom:calc(100% - var(--hz));width:88px;margin-left:-44px;text-decoration:none;color:var(--bone)}
.mline--nobe{left:62%;height:calc(var(--hz) * .3)}
.mline--domus{left:75%;height:calc(var(--hz) * .56)}
.mline--delano{left:88%;height:calc(var(--hz) * .84)}
.mline__beam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(to top,var(--gold) 0%,#E2B871 55%,var(--gold-hi) 92%,rgba(255,231,184,0));box-shadow:0 0 8px 1px rgba(207,159,79,.45),0 0 30px 5px rgba(207,159,79,.14);transform-origin:50% 100%}
.mline__beam::before{content:"";position:absolute;left:50%;top:6%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 12px 3px rgba(255,214,140,.7)}
.mline__beam::after{content:"";position:absolute;inset:0;box-shadow:0 0 10px 2px rgba(255,214,140,.9),0 0 46px 10px rgba(244,182,90,.45);opacity:0;transition:opacity .45s}
/* the reflection on the water */
.mline::after{content:"";position:absolute;left:50%;top:100%;width:2px;margin-left:-1px;height:min(42%,calc((100% - var(--hz)) * 4));background:linear-gradient(to bottom,rgba(207,159,79,.42),rgba(207,159,79,0));pointer-events:none}
.mline__label{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);display:grid;gap:5px;justify-items:center;white-space:nowrap;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);transition:color .3s}
.mline__label b{font:400 1.0625rem/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--bone)}
.mline:hover .mline__beam::after,.mline:focus-visible .mline__beam::after{opacity:1}
.mline:hover .mline__label,.mline:focus-visible .mline__label{color:var(--walnut-lt)}
.mline:focus-visible{outline-offset:6px}
@keyframes mer-rise{from{transform:scaleY(0)}}
@keyframes mer-draw{from{transform:scaleX(0)}}
@keyframes mer-fade{from{opacity:0}}
@keyframes mer-breathe{50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){
  html.js .meridian__horizon{animation:mer-draw 1.4s var(--expo) both}
  html.js .mline__beam{animation:mer-rise 1.5s var(--expo) both}
  html.js .mline--nobe .mline__beam{animation-delay:.25s}
  html.js .mline--domus .mline__beam{animation-delay:.4s}
  html.js .mline--delano .mline__beam{animation-delay:.55s}
  html.js .mline::after,html.js .mline__label{animation:mer-fade 1s ease-out .9s both}
  html.js .mline__beam::before{animation:mer-breathe 4.8s ease-in-out 2s infinite}
  html.js .mline--domus .mline__beam::before{animation-delay:2.9s}
  html.js .mline--delano .mline__beam::before{animation-delay:3.7s}
  html.js .mhero__copy > *{animation:tg-rise .8s var(--expo) both}
  html.js .mhero__title{animation-delay:.06s}
  html.js .mhero__lede{animation-delay:.16s}
  html.js .mhero__actions{animation-delay:.24s}
  html.js .mhero__chip{animation:tg-rise .8s var(--expo) .5s both}
}
@keyframes tg-rise{from{opacity:0;transform:translateY(12px)}}
@media (max-width:1023px){
  .mhero__copy{grid-column:1 / span 8}
  .mline--nobe{left:68%}.mline--domus{left:80%}.mline--delano{left:91%}
  .mline{width:64px;margin-left:-32px}
  .mline__label b{font-size:.9375rem}
}
@media (max-width:860px){
  .meridian__horizon{left:0}
  .mhero{display:flex;flex-direction:column;min-height:auto;padding-bottom:36px}
  .mhero__copy{align-self:stretch}
  .meridian{position:relative;inset:auto;height:clamp(300px,46svh,440px);margin:clamp(28px,5vh,48px) calc(var(--pad) * -1) 0;--hz:74%}
  .mline--nobe{left:20%}.mline--domus{left:50%}.mline--delano{left:80%}
  .mline{width:96px;margin-left:-48px}
  .mhero__chip{margin-top:44px}
}

/* ───────── HOME · the projects: full-screen entries that stack as you scroll ───────── */
.works{padding-top:var(--section)}
.works__head{margin-bottom:clamp(40px,7vh,80px)}
.works__eyebrow{grid-column:1 / -1;color:var(--slate)}
.works__title{grid-column:1 / span 8;margin-top:22px}
.work{position:relative;display:grid;align-items:end;min-height:calc(100svh - var(--navh));overflow:hidden;isolation:isolate;background:var(--ink);color:var(--bone)}
@media (min-width:861px){.work{position:sticky;top:var(--navh)}}
.work__art{position:absolute;inset:0;z-index:-1}
.work__art picture,.work__art img{display:block;width:100%;height:100%;object-fit:cover}
.work__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,22,.88) 0%,rgba(11,14,22,.35) 52%,rgba(11,14,22,.12) 100%)}
.work__body{display:grid;justify-items:start;gap:12px;max-width:min(100%,820px);padding:clamp(28px,7vh,80px) var(--pad)}
.work__n{font:400 1rem/1 var(--serif);color:var(--walnut-lt);font-variant-numeric:tabular-nums}
.work__place{color:var(--mist)}
.work__name{margin-top:4px;font:var(--w-h2) clamp(2.5rem,1rem + 4.4vw,6rem)/1 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.work__line{font-size:var(--lede);line-height:1.45;max-width:38ch}
.work__meta{font-size:.875rem;color:var(--mist)}
.work__cta{margin-top:16px;display:inline-flex;align-items:center;gap:14px;min-height:44px;font:500 .875rem/1 var(--sans);letter-spacing:.05em;text-decoration:none;border-bottom:1px solid currentColor}
.work__cta svg{transition:transform .6s var(--expo)}
.work:hover .work__cta svg{transform:translateX(6px)}
/* the whole panel is the link */
.work__cta::after{content:"";position:absolute;inset:0;z-index:1}
.work__credit{position:absolute;right:var(--pad);bottom:14px;z-index:2;font-size:.6875rem;color:var(--mist)}
.work--nobe .art-shore{--hz:46%}
.work__art .art{position:absolute;inset:0}
@media (max-width:860px){
  .work{min-height:min(150vw,720px)}
  .works__title{grid-column:1 / -1}
  .work__credit{position:static;padding:0 var(--pad) 16px;grid-row:2}
}

/* ───────── artwork · first light (NoBe PARC): dawn, the sun on the horizon, the sea's lines rolling in ───────── */
.art-shore{position:relative;overflow:hidden;--hz:0%;--sx:74%;--sun:clamp(110px,20vmin,250px);background:linear-gradient(to bottom,var(--bone) 0%,#EFE5D6 calc(var(--hz) * .5),#EACFB2 calc(var(--hz) * .88),#E4BC95 var(--hz))}
.shore__sun{position:absolute;left:var(--sx);top:var(--hz);width:var(--sun);height:var(--sun);margin-left:calc(var(--sun) / -2);border-radius:50%;background:radial-gradient(circle,#FCEFD4 0 36%,#F3CB93 60%,rgba(236,180,120,0) 71%);transform:translateY(-56%)}
.shore__sea{position:absolute;left:0;right:0;top:var(--hz);bottom:0;overflow:hidden;background:linear-gradient(to bottom,#2E374B 0%,#1C2333 45%,var(--ink) 100%);perspective:240px;perspective-origin:50% 0}
.shore__sea::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#2E374B 0%,rgba(46,55,75,0) 26%),linear-gradient(to top,var(--ink) 0%,rgba(20,26,38,.7) 22%,rgba(20,26,38,0) 55%)}
.shore__plane{position:absolute;left:-70%;right:-70%;top:0;height:320%;transform-origin:50% 0;transform:rotateX(74deg);background:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(242,237,228,.26) 15px 16px)}
.shore__glint{position:absolute;left:var(--sx);top:var(--hz);width:calc(var(--sun) * .3);height:46%;margin-left:calc(var(--sun) * -.15);background:repeating-linear-gradient(to bottom,rgba(251,226,180,.55) 0 1px,transparent 1px 9px);-webkit-mask:linear-gradient(to bottom,#000,transparent);mask:linear-gradient(to bottom,#000,transparent);opacity:.7}
.shore__horizon{position:absolute;left:0;right:0;top:var(--hz);height:1px;background:rgba(20,26,38,.4)}
@keyframes shore-roll{from{transform:rotateX(74deg) translateY(-16px)}to{transform:rotateX(74deg) translateY(0)}}
@keyframes shore-glint{from{opacity:.4;transform:scaleX(.6)}to{opacity:.85;transform:scaleX(1)}}
@keyframes shore-sun{from{transform:translateY(-8%)}}
@media (prefers-reduced-motion:no-preference){
  html.js .shore__plane{animation:shore-roll 6s linear infinite}
  html.js .shore__glint{animation:shore-glint 2.6s ease-in-out infinite alternate}
  html.js .phero .shore__sun{animation:shore-sun 2.8s var(--expo) .2s both}
}

/* ───────── artwork · the 850-ft line (Delano): a scale in feet, a line of light, a generic skyline ───────── */
.art-scale{position:relative;overflow:hidden;--gy:86%;--top:15%;--bx:76%;background:radial-gradient(110% 70% at 76% 100%,#1E2638 0%,var(--ink) 62%)}
.scale__ground{position:absolute;left:0;right:0;top:var(--gy);height:1px;background:rgba(242,237,228,.24)}
.scale__city{position:absolute;left:0;right:0;top:0;bottom:calc(100% - var(--gy))}
.scale__city i{position:absolute;bottom:0;border:1px solid rgba(242,237,228,.15);border-bottom:0;background:linear-gradient(to bottom,rgba(242,237,228,.05),rgba(242,237,228,0))}
.scale__city i:nth-child(1){left:44%;width:4%;height:16%}
.scale__city i:nth-child(2){left:50%;width:3%;height:27%}
.scale__city i:nth-child(3){left:55%;width:5%;height:21%}
.scale__city i:nth-child(4){left:62%;width:3.5%;height:36%}
.scale__city i:nth-child(5){left:80%;width:4.5%;height:30%}
.scale__city i:nth-child(6){left:87%;width:3%;height:44%}
.scale__city i:nth-child(7){left:92%;width:5%;height:19%}
.scale__axis{position:absolute;left:var(--bx);top:var(--top);bottom:calc(100% - var(--gy));width:0}
.scale__beam{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(to top,var(--gold) 0%,#E2B871 60%,#FFF3D6 100%);box-shadow:0 0 10px 1px rgba(207,159,79,.55),0 0 50px 9px rgba(207,159,79,.16);transform-origin:50% 100%}
/* a tick every 50 ft (17 to 850), a longer one every 100 ft */
.scale__ticks{position:absolute;right:16px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(to top,rgba(242,237,228,.4) 0 1px,transparent 1px calc(100% / 17))}
.scale__ticks::after{content:"";position:absolute;right:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(to top,rgba(242,237,228,.55) 0 1px,transparent 1px calc(100% / 8.5))}
.scale__lbl{position:absolute;right:40px;transform:translateY(50%);font:500 .6875rem/1 var(--sans);letter-spacing:.08em;color:var(--mist);font-variant-numeric:tabular-nums}
.l1{bottom:calc(100% * 100 / 850)}.l2{bottom:calc(100% * 200 / 850)}.l3{bottom:calc(100% * 300 / 850)}.l4{bottom:calc(100% * 400 / 850)}
.l5{bottom:calc(100% * 500 / 850)}.l6{bottom:calc(100% * 600 / 850)}.l7{bottom:calc(100% * 700 / 850)}.l8{bottom:calc(100% * 800 / 850)}
.scale__top{position:absolute;left:22px;top:0;transform:translateY(-62%);white-space:nowrap;color:var(--bone)}
.scale__num{font:340 clamp(2.5rem,1rem + 3vw,4.25rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.scale__unit{font:400 1.125rem/1 var(--serif);color:var(--walnut-lt)}
.scale__note{display:block;margin-top:10px;font:500 .6875rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
@keyframes scale-rise{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){
  html.js .phero .scale__beam{animation:scale-rise 1.8s cubic-bezier(.65,0,.15,1) .3s both}
  html.js .phero .scale__lbl,html.js .phero .scale__ticks{animation:mer-fade .8s ease-out .5s both}
  html.js .phero .scale__top{animation:mer-fade .6s ease-out .4s both}
}

/* ───────── PROJECT heroes (NoBe PARC, Delano) ───────── */
.phero{position:relative;display:grid;grid-template-rows:auto 1fr;min-height:100svh;overflow:hidden}
.phero__copy{position:relative;z-index:2;padding:calc(var(--navh) + clamp(32px,6vh,72px)) var(--pad) 0;max-width:calc(var(--pad) * 2 + 880px)}
.phero__title{margin-top:clamp(16px,2.4vh,26px)}
.phero__lede{margin-top:clamp(18px,3vh,30px);max-width:38ch}
.phero__cta{margin-top:clamp(24px,4vh,40px)}
.phero__stage{position:relative}
.phero__stage > .art{position:absolute;inset:0}
.phero__render{position:absolute;inset:0;z-index:1}
.phero__render picture,.phero__render img{width:100%;height:100%;object-fit:cover}
.phero__credit{position:absolute;right:var(--pad);bottom:14px;z-index:3;font-size:.6875rem;color:var(--bone);background:rgba(20,26,38,.6);padding:4px 10px}
/* first light: copy on the dawn sky, the sea below it */
.phero--shore{background:linear-gradient(to bottom,var(--bone) 0%,var(--bone) 30%,#EEE2D0 68%,#E4BC95 100%)}
.phero--shore .phero__eyebrow,.phero--shore .phero__lede{color:var(--slate)}
.phero--shore .phero__stage{min-height:clamp(240px,40svh,460px);margin-top:clamp(56px,10vh,120px)}
.phero--shore .phero__stage > .art{background:none;overflow:visible}
.phero--shore .shore__sea{z-index:1}.phero--shore .shore__glint,.phero--shore .shore__horizon{z-index:2}
.phero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vh,40px);z-index:3;display:flex;align-items:end;justify-content:space-between;gap:16px;color:var(--bone)}
.phero__foot .phero__credit{position:static}
/* the 850-ft line: copy on the left, the scale on the right */
.phero--scale{background:var(--ink);color:var(--bone)}
.phero--scale .phero__stage{position:absolute;inset:0;z-index:0}
.phero--scale .phero__copy{grid-row:1 / -1;align-self:center;max-width:calc(var(--pad) + 62vw);padding-bottom:clamp(40px,8vh,96px)}
.phero--scale .phero__eyebrow{color:var(--walnut-lt)}
.phero--scale .phero__title{font-size:clamp(2.75rem,1rem + 4.4vw,6rem);max-width:9.5em;line-height:1}
.phero--scale .phero__lede{color:var(--mist)}
.phero__chip{display:flex;width:fit-content;margin-top:clamp(32px,6vh,56px)}
@media (prefers-reduced-motion:no-preference){
  html.js .phero__copy > *{animation:tg-rise .8s var(--expo) both}
  html.js .phero__title{animation-delay:.06s}
  html.js .phero__lede{animation-delay:.14s}
  html.js .phero__cta{animation-delay:.22s}
  html.js .phero__chip{animation-delay:.3s}
}
@media (max-width:860px){
  .phero--scale{display:flex;flex-direction:column;min-height:auto}
  .phero--scale .phero__copy{max-width:none;padding-bottom:0}
  .phero--scale .phero__stage{position:relative;inset:auto;height:clamp(380px,62svh,560px);margin-top:28px}
  .art-scale{--bx:58%;--top:18%;--gy:90%}
  .scale__note{white-space:normal;max-width:9.5em;line-height:1.4}
}

/* ───────── DOMUS · hero: a spread with the gold line as its spine; the line runs on into the stage ───────── */
.dhero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(clamp(40px,5vw,96px) * 2);align-items:end;min-height:100svh;padding:calc(var(--navh) + clamp(40px,8vh,96px)) var(--pad) clamp(56px,10vh,112px)}
.dhero__l{align-self:center}
.dhero__eyebrow{color:var(--slate)}
.dhero__title{margin-top:clamp(18px,2.6vh,28px);max-width:7em}
.dhero__r{display:grid;justify-items:start;gap:clamp(24px,4vh,36px)}
.dhero__lede{color:var(--slate);max-width:30ch}
.dhero__line{position:absolute;left:50%;top:var(--navh);bottom:0;width:2px;margin-left:-1px;background:linear-gradient(to bottom,rgba(184,135,61,0) 0%,#B8873D 14%,#CF9F4F 100%);box-shadow:0 0 8px 1px rgba(207,159,79,.5),0 0 32px 6px rgba(207,159,79,.2);transform-origin:50% 0}
@keyframes dline{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){
  html.js .dhero__line{animation:dline 1.6s var(--expo) .15s both}
  html.js .dhero__l > *,html.js .dhero__r > *{animation:tg-rise .8s var(--expo) both}
  html.js .dhero__r > *{animation-delay:.2s}
}
@media (max-width:599px){
  .dhero{grid-template-columns:1fr;min-height:auto;padding-bottom:0}
  .dhero__r{margin-top:28px;padding-bottom:104px}
  .dhero__line{top:auto;height:72px;background:linear-gradient(to bottom,rgba(184,135,61,0),#CF9F4F)}
}
/* the stage's own copy is in the hero now: before the motion layer the stage shows only the line */
html.ap-pre:not(.motion) .ap__over,html.ap-pre:not(.motion) .ap__credit,html.ap-pre:not(.motion) .ap__shade{opacity:0}

/* ───────── PROJECT pages · why, facts, floors, details, credits ───────── */
.intro{padding-block:var(--section) clamp(48px,7vh,88px)}
.intro__eyebrow{grid-column:1 / -1;color:var(--slate)}
.intro__title{grid-column:1 / span 10;margin-top:24px}
.reasons{grid-column:1 / -1;margin-top:clamp(48px,8vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.reasons li{padding-top:22px;border-top:1px solid var(--rule-ink)}
.reasons__n{display:block;font:400 clamp(2.25rem,1rem + 2.6vw,3.75rem)/1 var(--serif);color:var(--walnut);font-variant-numeric:lining-nums}
.reasons h3{margin-top:clamp(18px,3vh,28px);font:400 clamp(1.375rem,1rem + .9vw,1.875rem)/1.15 var(--serif);letter-spacing:-.006em}
.reasons p{margin-top:12px;color:var(--slate);max-width:34ch}
.spec--auto{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:0}
.levels{padding-block:var(--section);align-items:start}
.levels__head{grid-column:1 / span 4}
.levels__head .h2{margin-top:22px}
.section-dia{grid-column:5 / span 2;justify-self:center;width:min(100%,104px);height:clamp(340px,56vh,560px);display:flex;flex-direction:column;border:1px solid var(--rule-ink);border-top:2px solid var(--ink);position:sticky;top:calc(var(--navh) + 48px)}
.section-dia i{flex:1;border-bottom:1px solid var(--rule-ink)}
.section-dia i:last-child{border-bottom:0}
.section-dia i.lit{background:rgba(138,90,58,.16);border-bottom-color:var(--walnut)}
.levels__list{grid-column:7 / -1}
.levels__list li{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);column-gap:var(--gap);padding:24px 0 26px;border-top:1px solid var(--rule-ink)}
.levels__list li:last-child{border-bottom:1px solid var(--rule-ink)}
.levels__k{padding-top:.5em;font:500 .6875rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--walnut)}
.levels__list h3{font:400 clamp(1.5rem,1rem + 1vw,2rem)/1.1 var(--serif);letter-spacing:-.008em}
.levels__list p{margin-top:10px;color:var(--slate);max-width:52ch}
.detail{background:var(--stone);padding-block:var(--section);--slate:#454A56;align-items:start}
.detail__col{grid-column:1 / span 7}
.detail__col--side{grid-column:9 / -1}
.detail__label{color:var(--ink);padding-bottom:16px}
.amen--2{columns:2;column-gap:var(--gap)}
.amen--2 li{break-inside:avoid}
.detail__note{margin-top:16px}
.area{border-bottom:1px solid var(--rule-ink)}
.area li{padding:12px 0 11px;border-top:1px solid var(--rule-ink)}
.detail__open{font-size:var(--lede);line-height:1.5;text-wrap:pretty}
.facts{padding-block:var(--section) clamp(40px,6vh,72px);align-items:start;row-gap:clamp(48px,7vh,80px)}
.facts__col{grid-column:span 6}
.facts__col + .facts__col{grid-column:8 / -1}
.facts__label{color:var(--slate);padding-bottom:14px}
.credits{border-bottom:1px solid var(--rule-ink)}
.credits div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--rule-ink)}
.credits dt{padding-top:.3em;font:500 .6875rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.credits dd{font-size:1rem;line-height:1.5}
.facts__ask{padding-top:14px;border-top:1px solid var(--rule-ink);font-size:.9375rem;color:var(--slate)}
.facts__link{display:inline-block;margin-top:20px;text-decoration:none}
.facts__disclosure{grid-column:1 / span 9}
.facts__disclosure .fine{padding-top:20px;border-top:1px solid var(--rule-ink);font-size:.75rem;max-width:none}
@media (max-width:860px){
  .intro__title,.reasons{grid-column:1 / -1}
  .reasons{grid-template-columns:1fr;row-gap:36px}
  .spec--auto{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .levels__head,.levels__list,.detail__col,.detail__col--side,.facts__col,.facts__col + .facts__col,.facts__disclosure{grid-column:1 / -1}
  .section-dia{display:none}
  .levels__list{margin-top:40px}
  .detail__col--side{margin-top:48px}
}
@media (max-width:599px){
  .amen--2{columns:1}
  .levels__list li{grid-template-columns:1fr;row-gap:8px}
  .credits div{grid-template-columns:1fr;gap:4px}
}

/* ───────── footer: the project pages ───────── */
.footer__pages{grid-column:6 / span 4;display:grid;align-content:start;justify-items:start}
.footer__pages a{display:inline-flex;align-items:center;min-height:40px;color:var(--bone);text-decoration:none;font:400 1.0625rem/1.2 var(--serif)}
.footer__pages a:hover{color:var(--walnut-lt)}
@media (max-width:860px){.footer__pages{grid-column:1 / -1;margin-top:32px}}

/* artwork pauses off screen (site.js) and never moves with reduced motion */
.art.is-off,.art.is-off *{animation-play-state:paused !important}
.work__veil{position:absolute;inset:0;z-index:1;background:#0B0E16;opacity:0;pointer-events:none}
/* the skyline poster has thin black bars at its sides: crop them */
.work--domus .work__art img{transform:scale(1.07)}
/* phones: the hero foot clears the Book a call bar */
@media (max-width:768px){.phero__foot{bottom:calc(var(--bar) + 20px)}}