/* Original TWINS motion study — Outpost / Concrete reference, local preview. */
:root{--motion-ease:cubic-bezier(.22,.72,.16,1)}
.hero-picture picture{display:contents}
.hero-picture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:brightness(.8);opacity:0;transition:opacity 1.2s}
.hero-picture.video-ready video{opacity:1}
.hero-shade{pointer-events:none}
.hero-title{position:relative;z-index:1}
.hero-picture{animation:hero-aperture 1.7s var(--motion-ease) both}
.hero-title{animation:none}
.hero-title>.title-line{display:block;width:max-content;max-width:100%;line-height:inherit}
.title-line>span{display:block;width:max-content;max-width:100%;will-change:transform,opacity}
.title-first>span{animation:hero-from-left 1.65s var(--motion-ease) .12s both}
.title-line.shift>span{animation:hero-from-right 1.8s var(--motion-ease) .28s both}
.title-line.end>span{animation:hero-story 1.8s var(--motion-ease) .62s both}
.hero-intro>span{display:inline-block;animation:hero-phrase 1.1s var(--motion-ease) both}
.hero-intro>span:nth-child(2){animation-delay:.15s}
.hero-intro>span:nth-child(3){animation-delay:.3s}
.hero-lower>*{animation:hero-phrase 1.25s var(--motion-ease) .8s both}
@keyframes hero-from-left{from{opacity:0;transform:translate3d(-20vw,0,0)}to{opacity:1;transform:none}}
@keyframes hero-from-right{from{opacity:0;transform:translate3d(20vw,0,0)}to{opacity:1;transform:none}}
@keyframes hero-story{from{opacity:0;transform:translate3d(0,32px,0);filter:none}to{opacity:1;transform:none;filter:none}}
@keyframes hero-phrase{from{opacity:0;transform:translate3d(0,17px,0)}to{opacity:1;transform:none}}
@keyframes hero-aperture{from{clip-path:inset(4% 3% round 22px)}to{clip-path:inset(0 round 0)}}
@keyframes hero-type{from{opacity:0;translate:0 45px}to{opacity:1;translate:0 0}}
.intro-photo,.intro-photo.in-view{clip-path:inset(38% 40% round 20px);transition:none;will-change:clip-path}
.hero-title>span,.hero-title>.title-line{will-change:transform}
.hero-video-toggle{position:absolute;right:var(--gutter);bottom:105px;z-index:4;color:var(--white);background:rgba(15,20,18,.32);border:1px solid #ffffff55;border-radius:50%;width:42px;height:42px;backdrop-filter:none;font-size:12px}
.hero-rotate{bottom:20%;right:8%;width:clamp(170px,22vw,340px);height:160px;opacity:.64;mix-blend-mode:screen}
.rotate-core{height:100%;animation:twins-turn 15s linear infinite;filter:drop-shadow(1px 1px 0 #ffffff77) drop-shadow(-1px -1px 0 #b3c4c944)}
.rotate-core img{height:100%;object-fit:contain;filter:grayscale(1) brightness(2.5);transform:translateZ(9px)}
.rotate-core img.back{filter:grayscale(1) brightness(1.4);transform:rotateY(180deg) translateZ(9px)}
@keyframes twins-turn{0%{transform:rotateX(-16deg) rotateY(0) rotateZ(-7deg)}100%{transform:rotateX(-16deg) rotateY(360deg) rotateZ(-7deg)}}
/* Buttons: rising contrasting fill, rolling text / arrows, restrained magnet. */
.pill{position:relative;isolation:isolate;overflow:hidden;transition:color .4s,border-color .4s,transform .45s var(--motion-ease)}
.pill::before{content:'';position:absolute;inset:-2px;z-index:-1;background:var(--ink);border-radius:50%;transform:translateY(110%) scaleX(.8);transition:transform .65s var(--motion-ease),border-radius .65s}
.pill-light::before{background:var(--ink)}
.pill-glass::before{background:var(--paper)}
.pill:hover,.pill:focus-visible{color:var(--paper)}
.pill-light:hover,.pill-light:focus-visible{color:var(--paper)}
.pill-glass:hover,.pill-glass:focus-visible{color:var(--ink)}
.pill:hover::before,.pill:focus-visible::before{transform:translateY(0) scaleX(1);border-radius:0}
.pill .arrow{display:block;position:relative;width:24px;height:24px;overflow:hidden;color:transparent}
.pill .arrow::before,.pill .arrow::after{content:none;position:absolute;inset:0;color:var(--button-arrow,currentColor);transition:transform .55s var(--motion-ease)}
.pill .arrow{--button-arrow:var(--ink)}
.pill-light:hover .arrow{--button-arrow:var(--paper)}
.pill:not(.pill-light):not(.pill-glass):hover .arrow{--button-arrow:var(--paper)}
.pill-glass .arrow{--button-arrow:var(--white)}
.pill-glass:hover .arrow{--button-arrow:var(--ink)}
.pill .arrow::after{transform:translate(-125%,125%)}
.pill:hover .arrow::before{transform:translate(125%,-125%)}
.pill:hover .arrow::after{transform:translate(0,0)}
.roll-link{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.15}
.roll-link>span{display:block;position:relative;transition:transform .5s var(--motion-ease)}
.roll-link>span::after{content:attr(data-copy);position:absolute;left:0;top:100%;white-space:nowrap}
a:hover .roll-link>span,a:focus-visible .roll-link>span{transform:translateY(-100%)}
/* Fullscreen property opening: the actual cover grows into the detail hero. */
.detail-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);scroll-behavior:auto}
.detail-dialog::backdrop{background:#101615dd}
body.detail-open{overflow:hidden}
.detail-top{position:absolute;top:0;left:0;right:0;z-index:12;padding:24px var(--gutter);display:flex;justify-content:space-between;align-items:center;color:var(--white)}
.detail-brand{font-size:25px;letter-spacing:.17em}
.detail-close{position:fixed;top:24px;right:var(--gutter);z-index:30;display:flex;align-items:center;gap:30px;border:1px solid #ffffff88;border-radius:30px;background:#202521a6;backdrop-filter:blur(12px);color:var(--white);padding:13px 19px;min-height:46px;font-size:12px}
.detail-close span{font-size:22px;line-height:1}
.detail-hero{height:76svh;min-height:480px;position:relative;overflow:hidden;background:#192522}
.detail-cover{width:100%;height:100%;object-fit:cover;object-position:center;opacity:0}
.detail-cover.visible{opacity:1}
.detail-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0c1817c9,transparent 65%),linear-gradient(180deg,#0c181757,transparent 35%);pointer-events:none}
.detail-heading{position:absolute;z-index:2;bottom:50px;left:var(--gutter);right:var(--gutter);color:var(--white)}
.detail-heading .eyebrow{margin-bottom:22px}
.detail-heading h2{font-size:clamp(46px,7.5vw,115px);line-height:.97;letter-spacing:-.065em;max-width:1150px}
.detail-heading p:last-child{margin-top:22px;font-size:15px}
.detail-flight{position:fixed;z-index:20;object-fit:cover;pointer-events:none;max-width:none;transform-origin:0 0}
.detail-content{padding:65px var(--gutter) 80px;display:grid;grid-template-columns:1.8fr 1fr;gap:10vw}
.detail-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:25px;color:#67726a}
.detail-description{font-family:Bradford,Georgia,serif;font-size:clamp(29px,3.1vw,48px);line-height:1.12;letter-spacing:-.035em}
.detail-facts{display:flex;flex-wrap:wrap;gap:26px 50px;padding:30px 0 35px;margin-top:32px;border-top:1px solid #c1c6bc;border-bottom:1px solid #c1c6bc}
.detail-fact small{display:block;color:#68746a;margin-bottom:12px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.detail-fact strong{font-size:24px;font-weight:400;letter-spacing:-.035em}
.detail-agent{border-top:1px solid #b5bdb1;padding-top:22px}
.detail-agent-head{display:flex;align-items:center;gap:17px;margin-bottom:25px}
.detail-agent img{width:70px;height:70px;border-radius:50%;object-fit:cover}
.detail-agent h3{font-size:20px;letter-spacing:-.03em}
.detail-agent p{font-size:12px;color:#68746a;margin-top:6px}
.detail-agent .pill{margin-top:10px;width:100%;justify-content:space-between}
.detail-source{display:inline-block;font-size:12px;margin-top:25px;padding-bottom:5px;border-bottom:1px solid #8c9b8f}
.detail-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .9s var(--motion-ease)}
.detail-dialog.entered .detail-reveal{opacity:1;transform:none}
.detail-dialog.entered .detail-content{transition-delay:.12s}
.reveal-block{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.service{transition:padding .6s var(--motion-ease),background .6s}.service:hover{padding-left:15px;background:#dfdfd622}}
@media(max-width:700px){
 .hero-rotate{width:140px;height:95px;top:17%;right:15px;bottom:auto;opacity:.55}
 .hero-video-toggle{bottom:100px;width:38px;height:38px}
 .hero-picture video{object-position:center}
 .detail-hero{height:68svh;min-height:420px}
 .detail-top{padding-top:18px}
 .detail-brand{font-size:20px}
 .detail-close{top:18px;gap:20px;padding:11px 15px;min-height:44px}
 .detail-heading{bottom:33px}
 .detail-heading h2{font-size:47px}
 .detail-heading p:last-child{font-size:12px;line-height:1.4}
 .detail-content{display:block;padding-top:38px;padding-bottom:50px}
 .detail-description{font-size:32px}
 .detail-facts{gap:25px 32px;margin-top:28px;padding:27px 0}
 .detail-fact strong{font-size:21px}
 .detail-agent{margin-top:38px}
 .detail-source{line-height:1.5}
 .reveal-block{opacity:0;transform:translateY(30px);transition:opacity .75s,transform .9s var(--motion-ease)}
 .reveal-block.in-view{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .rotate-core{animation:none!important;transform:rotateY(-18deg)}
 .hero-picture video{display:none}
 .hero-picture,.hero-title{animation:none!important}
 .title-line>span,.hero-intro>span,.hero-lower>*{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
 .intro-photo{clip-path:none}
 .hero-video-toggle{display:none}
 .offers-stage{height:auto;min-height:0;padding:35px 0 60px}
 .offers-pin{position:relative;display:block;height:auto;min-height:0;padding:0}
 .offers-track{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:30px 22px}
 .property,.library-ready:not(.filtered) .property{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none!important;will-change:auto;opacity:1!important}
 .library-ready:not(.filtered) .offers-track{display:grid;height:auto;perspective:none}
 .property-photo{height:auto;min-height:0;aspect-ratio:1.8}
 .offer-progress,.roll-hint{display:none!important}
 .detail-reveal,.reveal-block{opacity:1;transform:none}
 .hero-title>span{transform:none!important}
}
body.overview .offers-track{height:auto;margin:0 var(--gutter);padding:0;display:grid;grid-template-columns:1fr 1fr}
body.overview .property{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none!important}
body.overview .property-photo{height:auto;aspect-ratio:1.8}
body.overview .hero-video-toggle{display:none}
body.overview .intro-photo{clip-path:none}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.offers-track{grid-template-columns:1fr}.property{width:100%}}

.hero-title{line-height:1.02}
.hero-title>.title-line{width:auto;max-width:none;white-space:nowrap}
/* A longer native scroll runway lets the lettering leave through the viewport edge. */
@media(prefers-reduced-motion:no-preference){
 body:not(.overview) .hero{height:calc(100svh + clamp(1500px,210svh,2400px))}
 .hero-intro,.hero-lower{will-change:transform,opacity}
}
@media(max-width:700px){
 .hero-pin{height:100svh;min-height:700px;position:sticky;top:0}
 .hero-content{top:25%;will-change:transform,opacity;opacity:1}
 .hero-title{font-size:clamp(30px,9.3vw,60px);line-height:1.08;letter-spacing:-.065em}
 .hero-title .shift{margin-left:0}
 .hero-title .end{margin-left:0;transform-origin:0 50%}
 .hero-title>.title-line{will-change:transform,opacity}
 .title-first>span{animation:mobile-title-left .85s var(--motion-ease) .08s backwards}
 .title-line.shift>span{animation:mobile-title-right .85s var(--motion-ease) .16s backwards}
 .title-line.end>span{animation:hero-phrase .85s var(--motion-ease) .24s backwards}
 .hero-intro>span{animation-duration:.7s;animation-fill-mode:backwards}
 .hero-lower{margin-top:28px}
 .hero-lower>*{animation-duration:.8s;animation-delay:.3s;animation-fill-mode:backwards}
 .hero-lower p{font-size:18px;line-height:1.3}
 .hero-content .eyebrow{margin-bottom:25px}
 .hero-bottom{bottom:30px}
 .hero-video-toggle{bottom:35px}
 .intro{margin-top:0}
}
@media(prefers-reduced-motion:no-preference) and (max-width:700px){body:not(.overview) .hero{height:calc(100svh + clamp(1400px,200svh,1900px))}}
@keyframes mobile-title-left{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes mobile-title-right{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(max-width:370px){.hero{min-height:1000px}.hero-pin{min-height:640px}.hero-content{top:23%}.hero-lower{margin-top:23px}}
@media(prefers-reduced-motion:reduce){.hero-content{transform:none!important;opacity:1!important}.hero-title>.title-line{transform:none!important}}

@media(prefers-reduced-motion:reduce) and (max-width:700px){.hero{height:100svh;min-height:740px}.hero-pin{height:100%;position:relative}.hero-title>.title-line{opacity:1!important}}

/* hero142: reserve real layout space for the scroll cue in short desktop windows.
   Typography responds to height as well as width; native scroll transforms stay intact. */
@media(min-width:701px){
 body:not(.overview) .hero-pin{height:100svh;min-height:0;display:flex;flex-direction:column;padding:clamp(112px,20svh,230px) var(--gutter) 36px;gap:28px}
 body:not(.overview) .hero-content{position:relative;inset:auto;width:100%;margin-block:auto}
 body:not(.overview) .hero-title{font-size:clamp(32px,min(8.3vw,calc(24svh - 90px)),150px)}
 body:not(.overview) .hero-bottom{position:relative;inset:auto;flex-shrink:0}
 body:not(.overview) .hero-lower{flex-shrink:0}
}
@media(min-width:701px) and (max-height:600px){
 body:not(.overview) .hero-pin{padding-block:112px 24px;gap:18px}
 body:not(.overview) .hero-bottom .rail{height:36px}
 body:not(.overview) .hero-lower{margin-top:20px}
 body:not(.overview) .hero-content .eyebrow{margin-bottom:16px}
}
@media(min-width:701px) and (max-width:900px){
 body:not(.overview) .hero-lower{gap:22px}
 body:not(.overview) .hero-browse-primary{flex-wrap:nowrap;gap:10px}
 body:not(.overview) .hero-browse .pill{font-size:13px;min-height:48px;padding:10px 14px;gap:15px}
 body:not(.overview) .hero-browse .hero-owner-link{font-size:12px}
}
@media(min-width:701px) and (max-height:450px){
 body:not(.overview) .hero-pin{padding-block:96px 16px;gap:12px}
 body:not(.overview) .hero-title{font-size:clamp(26px,6vw,34px)}
 body:not(.overview) .hero-content .eyebrow{font-size:9px;line-height:1.3;margin-bottom:10px}
 body:not(.overview) .hero-lower{margin-top:12px;gap:20px}
 body:not(.overview) .hero-lower p{font-size:14px}
 body:not(.overview) .hero-browse{gap:4px}
 body:not(.overview) .hero-browse .pill{min-height:44px;padding:6px 14px;font-size:12px;gap:15px}
 body:not(.overview) .hero-browse .motion-arrow{width:25px;height:25px}
 body:not(.overview) .hero-browse .hero-owner-link{min-height:28px;font-size:11px}
 body:not(.overview) .hero-bottom .rail{height:18px}
}