@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap');

:root {
  --blue: #0056a1;
  --deep: #023d68;
  --ink: #071b2c;
  --sky: #c5dff6;
  --mist: #eaf5ff;
  --white: #fff;
  --line: rgba(2, 61, 104, .18);
  --pad: clamp(24px, 5vw, 78px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--deep); background: #f8fbff; font-family: "Bricolage Grotesque"; overflow-x: clip; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
::selection { color: var(--white); background: var(--blue); }
.icon-diagonal { display:inline-block; transform:rotate(-45deg); }

.page-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow:hidden; color:var(--white); background:var(--deep); transition: transform .9s cubic-bezier(.76,0,.24,1), visibility .9s; }
.page-loader::before { content:''; position:absolute; width:75vmin; height:75vmin; border:1px solid rgba(197,223,246,.25); border-radius:50%; box-shadow:0 0 0 12vmin rgba(197,223,246,.04),0 0 0 24vmin rgba(197,223,246,.035); animation:loaderOrbit 5s linear infinite; }
.page-loader::after { content:'SHAKER SQUARE · SHAKER SQUARE · SHAKER SQUARE ·'; position:absolute; left:-2vw; bottom:-.1em; width:104vw; overflow:hidden; white-space:nowrap; color:rgba(197,223,246,.09); font-size:clamp(48px,9vw,150px); font-weight:800; letter-spacing:-.06em; }
.page-loader.done { transform: translateY(-105%); visibility: hidden; }
.loader-center { position:relative; z-index:3; width:min(390px,36vw); aspect-ratio:1; padding:48px; display:grid; place-content:center; justify-items:center; background:rgba(255,255,255,.94); color:var(--deep); box-shadow:24px 24px 0 var(--blue); transform:rotate(-2deg); }
.loader-logo { width:250px; height:180px; object-fit:contain; }
.loader-center p { margin:2px 0 22px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.loader-kicker { font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.loader-poster,.loader-eye,.loader-mark { position:absolute; object-fit:cover; }
.loader-poster { left:-4vw; top:-8vh; width:34vw; height:58vh; opacity:.42; transform:rotate(-7deg); }
.loader-eye { right:6vw; top:7vh; width:clamp(90px,12vw,180px); height:clamp(180px,25vw,360px); mix-blend-mode:screen; transform:rotate(8deg); animation:loaderFloat 3.6s ease-in-out infinite; }
.loader-mark { right:14vw; bottom:-8vh; width:clamp(130px,19vw,290px); opacity:.62; mix-blend-mode:screen; transform:rotate(-9deg); }
.loader-count { position:absolute; z-index:3; right:28px; bottom:24px; font-size:9px; letter-spacing:.17em; }
.loader-line { width: 150px; height: 2px; overflow: hidden; background: rgba(0,86,161,.15); }
.loader-line span { display: block; height: 100%; background: var(--blue); animation: loading 1.2s ease both; }
@keyframes loading { from { width: 0; } to { width: 100%; } }
@keyframes loaderFloat { 50% { transform:translateY(-18px) rotate(4deg); } }
@keyframes loaderOrbit { to { transform:rotate(360deg); } }

.cursor-dot, .cursor-ring { position: fixed; z-index: 999; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 7px; height: 7px; background: var(--white); mix-blend-mode: difference; }
.cursor-ring { width: 34px; height: 34px; border: 1px solid var(--white); mix-blend-mode: difference; transition: width .25s, height .25s; }
.cursor-ring.hover { width: 62px; height: 62px; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 108px; padding: 16px var(--pad); display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 40px; color:var(--white); background:rgba(234,245,255,.1); border-bottom:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px) saturate(1.08); -webkit-backdrop-filter:blur(10px) saturate(1.08); transition:height .35s, color .35s, background .35s, border-color .35s, box-shadow .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.site-header.is-scrolled { position:fixed; inset:0 0 auto; height:82px; padding-top:8px; padding-bottom:8px; overflow:visible; color:var(--deep); background:rgba(234,245,255,.52); border-bottom-color:rgba(2,61,104,.14); box-shadow:0 12px 35px rgba(1,31,56,.12); backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25); transform:none; animation:none; }
.site-header.is-scrolled .brand { align-self:center; width:150px; height:68px; margin:0; padding:2px 6px 4px; border-radius:16px; transform:none; }
.site-header.is-scrolled .brand img { height:62px; }
.brand { align-self:center; width:145px; height:72px; display:grid; place-items:center; background:transparent; border-radius:0; padding:2px 6px; margin:0; }
.brand img { width:100%; height:68px; object-fit:contain; }
.desktop-nav { justify-self: center; display: flex; gap: clamp(20px, 3vw, 52px); font-size: 14px; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: currentColor; transition: right .3s; }
.desktop-nav a:hover::after { right: 0; }
.pill-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 13px 18px; border: 1px solid currentColor; border-radius: 100px; font-size: 13px; transition: .25s ease; }
.pill-button:hover { color: var(--blue); background: var(--white); border-color: var(--white); transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 12px; }
.menu-toggle span { display:block; width: 26px; height: 2px; margin: 6px 0; background: currentColor; transition:.3s; }
.mobile-menu { position: fixed; z-index: 18; inset: 0; padding: 140px var(--pad) 45px; display: flex; flex-direction: column; justify-content: space-between; color:var(--deep); background:var(--mist); transform: translateY(-105%); transition: transform .7s cubic-bezier(.76,0,.24,1); }
.mobile-menu.open { transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; font-size: clamp(34px, 9vw, 58px); line-height: 1.08; }
.mobile-menu p { line-height:1.5; color:var(--deep); }

.hero { position: relative; min-height: 820px; height: 100svh; max-height: 1100px; overflow: hidden; color: var(--white); background: var(--deep); }
.hero-media, .hero-wash { position:absolute; inset:0; }
.hero-media { overflow:hidden; }
.hero-media img { width:100%; height:100%; object-fit:cover; transform:translate3d(0,0,0) scale(1.035); transform-origin:center; animation:heroBreathe 12s ease-in-out infinite alternate; will-change:transform; backface-visibility:hidden; }
@keyframes heroBreathe { from { transform:translate3d(0,0,0) scale(1.035); } to { transform:translate3d(0,0,0) scale(1.085); } }
.hero-wash { background: linear-gradient(90deg, rgba(2,30,53,.85) 0%, rgba(2,49,86,.46) 48%, rgba(2,26,44,.2) 75%), linear-gradient(0deg, rgba(1,25,45,.6), transparent 45%); }
.hero-copy { position:relative; z-index:2; height:100%; padding: clamp(155px, 18vh, 220px) var(--pad) 45px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 22px; text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:700; }
.eyebrow.light { color: var(--sky); }
.hero h1 { max-width: 1050px; margin:0; font-size:clamp(64px, 9.6vw, 154px); line-height:.78; letter-spacing:-.07em; font-weight:600; }
.hero-line { display:block; overflow:hidden; padding-bottom:.11em; }
.hero-line > span { display:block; animation: titleUp 1.1s .7s cubic-bezier(.22,1,.36,1) both; }
.hero-line:nth-child(2)>span { animation-delay:.82s; }
.hero-line:nth-child(3)>span { animation-delay:.94s; }
.hero .italic, .split-title em { font-weight:250; font-style:italic; color:var(--sky); }
@keyframes titleUp { from { transform:translateY(120%); } }
.hero-lower { width: min(520px, 45%); align-self:flex-end; display:flex; align-items:flex-end; gap:35px; margin-top:-10px; }
.hero-lower p { max-width:315px; margin:0 0 6px; font-size:15px; line-height:1.55; }
.round-button { position:relative; flex:0 0 115px; aspect-ratio:1; border:1px solid rgba(255,255,255,.55); border-radius:50%; padding:18px; display:flex; flex-direction:column; justify-content:space-between; color:var(--white); background:rgba(234,245,255,.1); backdrop-filter:blur(10px) saturate(1.08); -webkit-backdrop-filter:blur(10px) saturate(1.08); box-shadow:0 12px 32px rgba(1,31,56,.12); font-size:12px; transition:transform .3s,background .3s,border-color .3s; }
.round-button > span { position:absolute; left:50%; top:50%; font-weight:700; letter-spacing:.06em; text-align:center; transform:translate(-50%,-50%); }
.round-button:hover { transform:rotate(6deg) scale(1.05); }
.round-button b { align-self:flex-end; margin-top:auto; font-size:22px; }
.hero-art { position:absolute; z-index:3; right:3vw; top:18%; width:clamp(80px, 9vw, 145px); height:clamp(150px, 20vw, 290px); object-fit:cover; mix-blend-mode:screen; opacity:.82; transform:rotate(7deg); animation:float 5s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-18px) rotate(3deg); } }
.hero-stamp { position:absolute; z-index:3; left:52%; top:25%; width:90px; height:90px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-content:center; text-align:center; transform:rotate(-12deg); backdrop-filter:blur(8px); animation:heroStampSpin 10s linear infinite; will-change:transform; }
.hero-stamp span { font-size:8px; letter-spacing:.15em; }.hero-stamp strong { font-size:22px; line-height:1; }
@keyframes heroStampSpin { from { transform:rotate(-12deg); } to { transform:rotate(348deg); } }
.scroll-note { position:absolute; z-index:3; left:var(--pad); bottom:38px; margin:0; font-size:10px; letter-spacing:.15em; text-transform:uppercase; writing-mode:vertical-rl; }

.ticker { overflow:hidden; padding:17px 0 15px; color:var(--white); background:#25d366; transform:rotate(-1.2deg) scale(1.02); transform-origin:left; }
.ticker-track { width:max-content; display:flex; align-items:center; gap:0; font-size:clamp(18px, 2vw, 30px); text-transform:uppercase; letter-spacing:-.03em; animation:ticker var(--ticker-duration,27s) linear infinite; will-change:transform; }
.ticker-group { flex:0 0 auto; display:flex; align-items:center; gap:25px; padding-right:25px; }
.ticker i { color:var(--sky); font-style:normal; }
@keyframes ticker { from { transform:translate3d(0,0,0); } to { transform:translate3d(var(--ticker-shift,-50%),0,0); } }

.section-pad { padding: clamp(95px, 12vw, 190px) var(--pad); }
.intro { display:grid; grid-template-columns:1fr 4fr; gap:30px; }
.intro-main { position:relative; }
.intro-index { font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.split-title { margin:0; font-size:clamp(50px, 7vw, 112px); line-height:.88; letter-spacing:-.065em; font-weight:600; opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.split-title.words-in { opacity:1; transform:none; }
.artistic-title { opacity:1; transform:none; }
.artistic-title .title-word { display:inline-block; white-space:nowrap; }
.artistic-title .title-char { display:inline-block; opacity:0; filter:blur(10px); transform:translate3d(0,var(--char-rise,70%),0) rotate(var(--char-tilt,5deg)) scale(.72); transform-origin:50% 80%; will-change:opacity,filter,transform; }
.artistic-title.words-in .title-char { animation:titleCharacterIn .82s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(90ms + (var(--char-index) * 34ms)); }
@keyframes titleCharacterIn { 58% { opacity:1; filter:blur(0); transform:translate3d(0,-8%,0) rotate(-1deg) scale(1.04); } 100% { opacity:1; filter:blur(0); transform:none; } }
.artistic-word { position:absolute; z-index:2; right:1%; top:clamp(-88px,-5vw,-54px); width:clamp(150px,15vw,230px); aspect-ratio:2.55; display:flex; align-items:center; justify-content:center; gap:.01em; overflow:hidden; border:2px solid var(--blue); border-radius:58% 42% 55% 45% / 46% 54% 43% 57%; color:var(--white); background:var(--blue); box-shadow:8px 8px 0 var(--sky); font-size:clamp(25px,3vw,45px); font-style:italic; font-weight:800; letter-spacing:-.09em; opacity:0; transform:rotate(9deg) scale(.35); transform-origin:center; transition:opacity .25s .42s,transform .9s cubic-bezier(.16,1.4,.3,1) .35s; }
.artistic-word::before { content:''; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.5); border-radius:43% 57% 46% 54% / 55% 44% 56% 45%; transform:rotate(-3deg); }
.artistic-word::after { content:''; position:absolute; right:-11%; top:46%; width:122%; height:7px; background:var(--sky); opacity:.38; transform:rotate(-5deg) scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.22,1,.36,1) 1.15s; }
.artistic-word>span { position:relative; z-index:1; opacity:0; transform:translateY(115%) rotate(12deg); }
.split-title.words-in + .artistic-word { opacity:1; transform:rotate(-7deg) scale(1); }
.split-title.words-in + .artistic-word::after { transform:rotate(-5deg) scaleX(1); }
.split-title.words-in + .artistic-word>span { animation:artLetterIn .62s cubic-bezier(.16,1,.3,1) forwards; }
.split-title.words-in + .artistic-word>span:nth-child(1) { animation-delay:.62s; }.split-title.words-in + .artistic-word>span:nth-child(2) { animation-delay:.69s; }.split-title.words-in + .artistic-word>span:nth-child(3) { animation-delay:.76s; }.split-title.words-in + .artistic-word>span:nth-child(4) { animation-delay:.83s; }.split-title.words-in + .artistic-word>span:nth-child(5) { animation-delay:.9s; }.split-title.words-in + .artistic-word>span:nth-child(6) { animation-delay:.97s; }
@keyframes artLetterIn { to { opacity:1; transform:none; } }
.intro-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:10vw; margin-top:90px; }
.big-copy { margin:0; font-size:clamp(24px, 3vw, 46px); line-height:1.12; letter-spacing:-.035em; }
.body-copy { max-width:460px; font-size:16px; line-height:1.65; }
.body-copy p:first-child { margin-top:0; }.body-copy p+p { margin-top:25px; }

.mural-story { position:relative; min-height:900px; display:flex; align-items:flex-end; padding:var(--pad); overflow:hidden; background:var(--ink); }
.mural-image { position:absolute; inset:0; }.mural-image::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,21,39,.2),rgba(0,22,40,.02)),linear-gradient(0deg,rgba(0,20,37,.7),transparent 60%); }
.mural-image img { width:100%; height:115%; object-fit:cover; }
.mural-card { position:relative; z-index:2; width:min(650px,65%); margin-left:auto; padding:55px; background:var(--white); }
.mural-card h2 { margin:45px 0 30px; font-size:clamp(48px,6vw,90px); line-height:.86; letter-spacing:-.06em; }
.mural-card p { max-width:450px; line-height:1.6; }
.card-number { font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.text-link { display:inline-flex; gap:55px; align-items:center; margin-top:25px; padding-bottom:7px; border-bottom:1px solid currentColor; font-size:13px; }
.mural-art { position:absolute; z-index:3; left:6vw; bottom:8vh; width:clamp(100px,13vw,210px); transform:rotate(-8deg); mix-blend-mode:screen; opacity:.8; }

.section-heading { display:grid; grid-template-columns:1.5fr .5fr; align-items:end; gap:8vw; }
.section-intro { margin:0; line-height:1.6; }
.floorplan-list { margin-top:100px; border-top:1px solid var(--line); }
.floorplan-card { display:grid; grid-template-columns:80px 1fr auto 64px; align-items:center; gap:25px; padding:45px 0; border-bottom:1px solid var(--line); }
.plan-number { align-self:start; font-size:11px; }
.plan-copy h3 { margin:8px 0 25px; font-size:clamp(32px,4vw,62px); line-height:.98; letter-spacing:-.05em; font-weight:450; }
.plan-copy .eyebrow { margin:0; color:#5b84a7; }
.plan-specs { display:flex; gap:8px; flex-wrap:wrap; }.plan-specs span { padding:7px 12px; border:1px solid var(--line); border-radius:100px; font-size:11px; }
.plan-price { min-width:150px; display:grid; }.plan-price small { font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.plan-price strong { font-size:48px; line-height:1.1; }.plan-price span { font-size:11px; }
.plan-toggle { width:54px; height:54px; border:1px solid var(--deep); border-radius:50%; background:transparent; font-size:28px; cursor:pointer; transition:.3s; }.plan-toggle:hover,.floorplan-card.open .plan-toggle { color:var(--white); background:var(--blue); transform:rotate(45deg); }
.plan-details { grid-column:2/-1; max-height:0; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:30px; opacity:0; transition:max-height .5s, opacity .4s, padding .5s; }
.floorplan-card.open .plan-details { max-height:180px; padding-top:30px; opacity:1; }.plan-details p { max-width:550px; line-height:1.55; }.plan-details .pill-button:hover { background:var(--blue); color:var(--white); border-color:var(--blue); }
.leasing-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:60px; background:var(--line); border:1px solid var(--line); }
.leasing-strip>div { min-height:110px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; background:var(--mist); }.leasing-strip small { text-transform:uppercase; letter-spacing:.12em; font-size:9px; }.leasing-strip strong { font-size:18px; }.leasing-strip>p { grid-column:1/-1; margin:0; padding:16px 22px; text-align:center; font-size:10px; background:#f8fbff; }

.amenities { display:grid; grid-template-columns:1fr 1fr; min-height:850px; background:var(--sky); }
.amenities-visual { position:relative; min-height:700px; overflow:hidden; }.amenities-visual img { width:100%; height:100%; object-fit:cover; }
.amenity-badge { position:absolute; right:35px; bottom:35px; width:150px; aspect-ratio:1; display:grid; place-content:center; text-align:center; color:var(--white); background:var(--blue); border-radius:50%; }.amenity-badge strong { font-size:34px; }.amenity-badge span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.amenities-content { padding:clamp(70px,8vw,130px) var(--pad); align-self:center; }.amenities-content .split-title { font-size:clamp(52px,6vw,90px); }
.amenity-accordion { margin-top:65px; border-top:1px solid rgba(2,61,104,.35); }.amenity-group { border-bottom:1px solid rgba(2,61,104,.35); }.amenity-group button { width:100%; border:0; padding:22px 0; display:flex; justify-content:space-between; font-size:18px; background:transparent; cursor:pointer; }.amenity-group button b { font-size:22px; font-weight:300; }.amenity-group>div { max-height:0; overflow:hidden; transition:max-height .45s; }.amenity-group p { margin:0; padding:0 25px 25px 0; font-size:14px; line-height:1.7; }.amenity-group.open>div { max-height:190px; }

.art-break { position:relative; height:380px; overflow:hidden; color:var(--white); background:var(--ink); }.art-break>img { width:100%; height:100%; object-fit:cover; opacity:.52; filter:saturate(.8) contrast(1.1); }.art-break::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--blue),transparent 65%); mix-blend-mode:multiply; }.art-break-copy { position:absolute; z-index:2; inset:0; padding:50px var(--pad); display:flex; align-items:center; justify-content:space-between; }.art-break-copy p { margin:0; font-size:clamp(60px,8vw,125px); line-height:.75; letter-spacing:-.07em; font-weight:700; }.art-break-copy span { max-width:140px; font-size:14px; text-transform:uppercase; letter-spacing:.12em; }

.gallery { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,#fff 0%,#edf7ff 48%,#fff 100%); }
.gallery::before { content:''; position:absolute; z-index:0; inset:-20%; pointer-events:none; opacity:.42; background-image:linear-gradient(rgba(0,86,161,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(0,86,161,.075) 1px,transparent 1px); background-size:70px 70px; transform:rotate(-7deg); animation:galleryGridDrift 24s linear infinite; }
.gallery-motion { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.gallery-heading,.gallery-grid,.gallery-more { position:relative; z-index:2; }
.gallery-shape { position:absolute; display:block; will-change:transform; }
.gallery-shape-orbit { top:4%; right:-13%; width:clamp(330px,43vw,720px); aspect-ratio:1; border:clamp(30px,5vw,80px) solid rgba(0,86,161,.1); border-radius:46% 54% 39% 61% / 57% 38% 62% 43%; box-shadow:inset 0 0 0 2px rgba(0,86,161,.18),0 0 0 2px rgba(197,223,246,.7); animation:galleryOrbit 25s linear infinite; }
.gallery-shape-brush { left:-18%; top:42%; width:72%; height:clamp(150px,19vw,300px); border-radius:38% 62% 57% 43% / 64% 37% 63% 36%; background:linear-gradient(90deg,rgba(0,86,161,.17),rgba(197,223,246,.28)); transform:rotate(-12deg); animation:galleryBrush 17s ease-in-out infinite alternate; }
.gallery-shape-dot { right:8%; bottom:6%; width:clamp(110px,15vw,240px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7) 0 5%,transparent 6%),radial-gradient(circle,rgba(0,86,161,.22) 0 3px,transparent 4px); background-size:auto,19px 19px; animation:galleryDotFloat 12s ease-in-out infinite; }
.gallery-motion strong { position:absolute; left:3%; top:13%; color:transparent; -webkit-text-stroke:1px rgba(0,86,161,.14); font-size:clamp(95px,18vw,300px); font-weight:800; line-height:.65; letter-spacing:-.09em; white-space:nowrap; transform:rotate(-5deg); animation:galleryTypeFloat 20s ease-in-out infinite alternate; }
@keyframes galleryGridDrift { to { transform:rotate(-7deg) translate3d(70px,70px,0); } }
@keyframes galleryOrbit { to { transform:rotate(360deg); } }
@keyframes galleryBrush { from { transform:translate3d(-4%,0,0) rotate(-12deg) scale(.96); } to { transform:translate3d(22%,60px,0) rotate(-5deg) scale(1.08); } }
@keyframes galleryDotFloat { 50% { transform:translate3d(-35px,-55px,0) rotate(18deg); } }
@keyframes galleryTypeFloat { to { transform:translate3d(5vw,60px,0) rotate(-1deg); } }
.gallery-controls { display:flex; gap:8px; flex-wrap:wrap; }.gallery-controls button { border:1px solid var(--line); padding:9px 15px; border-radius:100px; background:transparent; font-size:11px; cursor:pointer; }.gallery-controls button.active { color:var(--white); background:var(--blue); border-color:var(--blue); }
.gallery-grid { margin-top:75px; display:grid; grid-template-columns:repeat(12,1fr); gap:2px; }
.gallery-item { --enter-x:0px; --enter-y:90px; --enter-r:0deg; --image-r:0deg; position:relative; grid-column:span 4; height:440px; overflow:hidden; cursor:pointer; background:var(--mist); opacity:0; clip-path:polygon(0 18%,100% 5%,100% 100%,0 100%); transform:translate3d(var(--enter-x),var(--enter-y),0) rotate(var(--enter-r)) scale(.9); transition:opacity .9s var(--delay,0ms),transform 1.15s cubic-bezier(.16,1,.3,1) var(--delay,0ms),clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--delay,0ms); }.gallery-item.motion-left { --enter-x:-90px; --enter-y:30px; --enter-r:-4deg; --image-r:-.8deg; }.gallery-item.motion-right { --enter-x:90px; --enter-y:45px; --enter-r:4deg; --image-r:.8deg; }.gallery-item.motion-up { --enter-y:130px; --enter-r:-2deg; --image-r:.5deg; }.gallery-item.gallery-visible { opacity:1; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:none; }.gallery-item.wide { grid-column:span 8; }.gallery-item.tall { height:600px; }.gallery-item.hidden-item { display:none; }.gallery-item.filter-out { opacity:0; transform:scale(.96); }
.gallery-item::before { content:attr(data-art-number); position:absolute; z-index:2; top:14px; right:14px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:var(--white); background:rgba(2,61,104,.24); backdrop-filter:blur(8px); font-size:9px; letter-spacing:.08em; transform:scale(0) rotate(-35deg); transition:transform .65s cubic-bezier(.16,1,.3,1) calc(var(--delay,0ms) + 420ms); }.gallery-item.gallery-visible::before { transform:scale(1) rotate(0); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transform:translate3d(0,0,0) scale(1.07) rotate(var(--image-r)); transform-origin:center; transition:transform .72s cubic-bezier(.22,1,.36,1); will-change:transform; backface-visibility:hidden; }.gallery-item:hover img { transform:translate3d(0,0,0) scale(1.12) rotate(0deg); }
.gallery-item figcaption { position:absolute; z-index:3; left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; padding:12px 14px; color:var(--white); background:rgba(2,38,67,.72); backdrop-filter:blur(9px); font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:0; transform:translate3d(0,24px,0); transition:opacity .3s ease,transform .48s cubic-bezier(.22,1,.36,1); will-change:transform,opacity; }.gallery-item:hover figcaption { opacity:1; transform:translate3d(0,0,0); }
.gallery-more { margin:45px auto 0; display:flex; border-color:var(--blue); background:transparent; cursor:pointer; }.gallery-more:hover { color:var(--white); background:var(--blue); border-color:var(--blue); }

.peace { position:relative; min-height:880px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:7vw; overflow:hidden; color:var(--white); background:var(--deep); }
.peace-copy { position:relative; z-index:2; }.peace .split-title { font-size:clamp(60px,7vw,110px); }.split-title.light { color:var(--white); }.peace-copy>p:last-of-type { max-width:520px; margin-top:50px; color:var(--sky); line-height:1.65; }
.peace-image { height:620px; overflow:hidden; }.peace-image img { width:100%; height:115%; object-fit:cover; }
.peace-orbit { position:absolute; width:260px; height:260px; right:calc(50% - 120px); top:80px; border:1px solid rgba(255,255,255,.2); border-radius:50%; animation:spin 18s linear infinite; }.peace-orbit span { position:absolute; inset:10px; display:grid; place-content:start center; font-size:10px; letter-spacing:.25em; }
@keyframes spin { to{transform:rotate(360deg);} }

.location { display:grid; grid-template-columns:1fr 1fr; min-height:760px; margin-block:clamp(70px,8vw,125px); background:var(--mist); }.location-copy { align-self:center; }.location-copy .split-title { font-size:clamp(50px,6vw,92px); }.location-copy>p:not(.eyebrow) { max-width:510px; margin:45px 0 0; line-height:1.65; }
.location-map { position:relative; overflow:hidden; min-height:600px; background:#152737; }.location-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.8) contrast(1.08); }.map-vignette { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(2,61,104,.16),transparent 45%),linear-gradient(0deg,rgba(2,25,44,.25),transparent 35%); }.map-pin { position:absolute; z-index:3; left:50%; top:50%; width:68px; height:68px; pointer-events:none; transform:translate(-34px,-68px); }.map-pin>span { position:relative; width:68px; height:68px; display:block; border:5px solid var(--white); border-radius:50% 50% 50% 0; transform:rotate(-45deg); color:var(--white); background:var(--blue); font-size:0; font-weight:700; box-shadow:0 15px 35px rgba(0,23,42,.5); }.map-pin>span::after { content:'S'; position:absolute; left:50%; top:50%; font-size:26px; line-height:1; transform:translate(-50%,-50%) rotate(45deg); transform-origin:center; }

.contact { position:relative; min-height:900px; padding:90px var(--pad); display:flex; justify-content:flex-end; align-items:center; overflow:hidden; }.contact-bg { position:absolute; inset:0; }.contact-bg img { width:100%; height:100%; object-fit:cover; }.contact-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,27,48,.25),rgba(1,31,56,.72)); }
.contact-panel { position:relative; z-index:2; width:min(610px,100%); padding:clamp(35px,5vw,70px); color:var(--white); background:rgba(2,61,104,.94); backdrop-filter:blur(12px); }.contact-panel h2 { margin:25px 0; font-size:clamp(52px,6vw,88px); line-height:.85; letter-spacing:-.06em; }.contact-panel h2 em { color:var(--sky); font-weight:250; }.contact-panel>p:not(.eyebrow) { max-width:450px; color:var(--sky); line-height:1.6; }
form { margin-top:45px; display:grid; gap:20px; }form label { display:grid; gap:8px; }form label span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:var(--sky); }form input,form select { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.45); border-radius:0; padding:10px 0; color:var(--white); outline:0; background:transparent; }form select option { color:var(--deep); }form input:focus,form select:focus { border-color:var(--white); }.contact-submit { margin-top:15px; padding:15px 20px; border:0; display:flex; justify-content:space-between; color:var(--blue); background:var(--white); cursor:pointer; transition:.3s; }.contact-submit:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.15); }.form-status { min-height:1.3em; margin:0; font-size:12px; color:var(--sky); }

footer { padding:70px var(--pad) 25px; color:var(--deep); background:var(--mist); }.footer-top { display:grid; grid-template-columns:200px 1fr auto; gap:7vw; align-items:center; padding-bottom:70px; border-bottom:1px solid var(--line); }.footer-top img { width:170px; filter:none; }.footer-top p { max-width:570px; font-size:22px; line-height:1.3; }.back-top { font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1.5fr 1.2fr .6fr; gap:5vw; padding:65px 0; }.footer-grid>div { display:flex; flex-direction:column; gap:8px; }.footer-grid small { margin-bottom:8px; color:var(--deep); opacity:.65; text-transform:uppercase; letter-spacing:.14em; font-size:9px; }.footer-grid a,.footer-grid p { margin:0; font-size:13px; line-height:1.6; }.footer-grid a:hover { color:var(--blue); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid var(--line); color:var(--deep); opacity:.68; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }

.reveal { opacity:0; transform:translateY(25px); transition:opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1); }.reveal.in-view { opacity:1; transform:none; }
.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:40px; border:0; color:var(--white); background:rgba(2,20,35,.95); }.lightbox[open] { display:grid; grid-template-columns:60px 1fr 60px; align-items:center; }.lightbox::backdrop { background:rgba(2,20,35,.8); }.lightbox figure { margin:0; height:90vh; display:grid; place-items:center; gap:12px; }.lightbox img { max-height:84vh; max-width:100%; object-fit:contain; }.lightbox figcaption { font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.lightbox button { border:0; background:transparent; color:var(--white); font-size:28px; cursor:pointer; }.lightbox-close { position:absolute; right:30px; top:20px; font-size:40px!important; }
.floating-call { position:fixed; z-index:950; right:clamp(20px,3vw,42px); bottom:calc(clamp(20px,3vw,42px) + env(safe-area-inset-bottom,0px)); width:68px; height:68px; display:grid; place-items:center; border:2px solid var(--white); border-radius:50%; color:var(--white); background:#25d366; box-shadow:0 15px 38px rgba(18,140,126,.34); isolation:isolate; animation:callFloat 3.4s ease-in-out infinite; transition:opacity .25s,transform .25s,background .25s; }
.floating-call::before,.floating-call::after { content:''; position:absolute; z-index:-1; inset:-2px; border:2px solid rgba(37,211,102,.52); border-radius:50%; animation:callRipple 2.8s ease-out infinite; }
.floating-call::after { animation-delay:1.4s; }
.floating-call>i { font-size:23px; transform:rotate(-8deg); animation:phoneRing 3.4s ease-in-out infinite; }
.floating-call-tooltip { position:absolute; right:0; bottom:calc(100% + 14px); min-width:94px; padding:10px 14px; border-radius:100px; color:var(--deep); background:var(--white); box-shadow:0 10px 28px rgba(1,31,56,.2); font-size:11px; font-weight:700; letter-spacing:.08em; text-align:center; text-transform:uppercase; white-space:nowrap; opacity:0; visibility:hidden; transform:translateY(10px) rotate(3deg) scale(.9); transform-origin:bottom right; transition:opacity .25s,visibility .25s,transform .25s; }
.floating-call-tooltip::after { content:''; position:absolute; right:23px; top:100%; border:7px solid transparent; border-top-color:var(--white); }
.floating-call:hover,.floating-call:focus-visible { background:#128c7e; transform:scale(1.08); outline:none; animation:none; }
.floating-call:hover .floating-call-tooltip,.floating-call:focus-visible .floating-call-tooltip { opacity:1; visibility:visible; transform:none; }
body.menu-open .floating-call { opacity:0; pointer-events:none; }
@keyframes callFloat { 50% { transform:translateY(-9px); box-shadow:0 23px 42px rgba(18,140,126,.32); } }
@keyframes callRipple { 0% { opacity:.75; transform:scale(.9); } 75%,100% { opacity:0; transform:scale(1.55); } }
@keyframes phoneRing { 0%,72%,100% { transform:rotate(-8deg); } 76% { transform:rotate(10deg); } 80% { transform:rotate(-13deg); } 84% { transform:rotate(8deg); } 88% { transform:rotate(-8deg); } }

@media (max-width: 900px) {
  .cursor-dot,.cursor-ring { display:none; }
  .site-header,
  .site-header.is-scrolled { position:fixed!important; z-index:900!important; inset:0 0 auto 0!important; width:100%!important; height:calc(84px + env(safe-area-inset-top,0px))!important; min-height:84px!important; margin:0!important; padding:calc(8px + env(safe-area-inset-top,0px)) 24px 8px!important; grid-template-columns:130px 1fr auto; overflow:visible!important; transform:translate3d(0,0,0)!important; -webkit-transform:translate3d(0,0,0)!important; backface-visibility:hidden; -webkit-backface-visibility:hidden; isolation:isolate; animation:none!important; transition:color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease!important; }
  .site-header { color:var(--white)!important; background:rgba(234,245,255,.1)!important; backdrop-filter:blur(10px) saturate(1.08)!important; -webkit-backdrop-filter:blur(10px) saturate(1.08)!important; }
  .site-header.is-scrolled { color:var(--deep)!important; background:rgba(234,245,255,.52)!important; backdrop-filter:blur(26px) saturate(1.25)!important; -webkit-backdrop-filter:blur(26px) saturate(1.25)!important; }
  .site-header .brand,
  .site-header.is-scrolled .brand { width:125px!important; height:64px!important; margin:0!important; padding:2px!important; align-self:center!important; border-radius:16px!important; transform:none!important; }
  .site-header .brand img,
  .site-header.is-scrolled .brand img { width:100%; height:52px!important; object-fit:contain; }
  .desktop-nav,.header-cta { display:none; }.menu-toggle { display:block; justify-self:end; align-self:center!important; margin:0!important; transform:none!important; }.menu-toggle span { background:var(--deep); }
  .hero { min-height:730px; }.hero-copy { padding-top:145px; justify-content:center; }.hero h1 { font-size:clamp(58px,15vw,110px); }.hero-lower { width:100%; align-self:stretch; margin-top:45px; justify-content:space-between; }.hero-art { top:15%; right:4%; opacity:.55; }.hero-stamp { left:auto; right:22%; top:45%; }.scroll-note { display:none; }
  .intro { grid-template-columns:1fr; }.intro-index { display:none; }.artistic-word { right:2%; top:-64px; }.intro-grid { grid-template-columns:1fr; gap:40px; margin-top:60px; }
  .mural-story { min-height:850px; padding:24px; }.mural-card { width:85%; padding:40px; }.mural-art { top:130px; bottom:auto; }
  .section-heading { grid-template-columns:1fr; }.section-intro { max-width:540px; }
  .floorplan-card { grid-template-columns:45px 1fr 54px; }.plan-price { grid-column:2; }.plan-toggle { grid-column:3; grid-row:1/3; }.plan-details { grid-column:2/-1; }.leasing-strip { grid-template-columns:1fr 1fr; }
  .amenities { grid-template-columns:1fr; }.amenities-visual { min-height:600px; }.amenities-content { padding-top:90px; padding-bottom:90px; }
  .gallery-item,.gallery-item.wide { grid-column:span 6; }.gallery-item { height:390px; }.gallery-item.tall { height:500px; }
  .peace { grid-template-columns:1fr; padding-top:110px; }.peace-image { height:500px; }.peace-orbit { right:20px; }
  .location { grid-template-columns:1fr; margin-block:60px; }.location-map { min-height:600px; }
  .footer-top { grid-template-columns:150px 1fr; }.back-top { grid-column:2; }.footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --pad:22px; }
  .site-header,
  .site-header.is-scrolled { padding:calc(8px + env(safe-area-inset-top,0px)) 18px 8px 24px!important; }
  .site-header .brand,
  .site-header.is-scrolled .brand { width:115px!important; height:64px!important; margin:0!important; padding:2px!important; align-self:center!important; border-radius:16px!important; transform:none!important; }
  .site-header .brand img,
  .site-header.is-scrolled .brand img { width:100%; height:52px!important; object-fit:contain; }
  .site-header .menu-toggle,
  .site-header.is-scrolled .menu-toggle { align-self:center!important; margin:0!important; transform:none!important; }
  .hero { min-height:700px; }.hero-copy { padding-inline:22px; }.hero h1 { font-size:16vw; line-height:.83; }.hero-lower p { max-width:225px; font-size:13px; }.round-button { flex-basis:93px; padding:14px; }.hero-art { display:none; }.hero-stamp { right:8%; top:42%; width:72px; height:72px; }.hero-stamp strong { font-size:18px; }
  .section-pad { padding-top:95px; padding-bottom:95px; }.split-title { font-size:50px; }.artistic-word { position:relative; right:auto; top:auto; width:145px; margin:27px 8px -30px auto; font-size:28px; box-shadow:6px 6px 0 var(--sky); }.big-copy { font-size:26px; }
  .mural-story { align-items:flex-end; min-height:760px; }.mural-card { width:100%; padding:30px 25px; }.mural-card h2 { margin:30px 0 20px; font-size:50px; }.mural-card p { font-size:14px; }.mural-art { width:100px; top:110px; }
  .floorplan-list { margin-top:65px; }.floorplan-card { grid-template-columns:35px minmax(0,1fr) 46px; gap:10px; padding:35px 0; }.plan-copy h3 { font-size:36px; }.plan-price strong { font-size:40px; }.plan-toggle { width:45px; height:45px; }.plan-details { display:block; min-width:0; }.floorplan-card.open .plan-details { max-height:360px; }.plan-details .pill-button { width:100%; max-width:100%; margin-top:10px; padding:12px 14px; gap:10px; white-space:normal; }.leasing-strip { grid-template-columns:1fr; }.leasing-strip>p { grid-column:1; }
  .amenities-visual { min-height:480px; }.amenity-badge { width:125px; right:20px; bottom:20px; }.art-break { height:340px; }.art-break-copy { align-items:flex-end; }.art-break-copy p { font-size:62px; }.art-break-copy span { display:none; }
  .gallery-heading { gap:35px; }.gallery::before { background-size:44px 44px; opacity:.34; }.gallery-motion strong { left:-5%; top:8%; font-size:31vw; }.gallery-shape-orbit { right:-55%; }.gallery-shape-brush { left:-45%; width:120%; opacity:.75; }.gallery-grid { gap:2px; margin-top:45px; }.gallery-item,.gallery-item.wide { grid-column:span 12; height:420px; }.gallery-item.tall { height:520px; }.gallery-item figcaption { opacity:1; transform:none; }
  .peace { min-height:900px; }.peace .split-title { font-size:55px; }.peace-image { height:380px; }.peace-orbit { width:170px; height:170px; top:45px; }
  .location { margin-block:42px; }.location-map { min-height:490px; }.location-map iframe { inset:0; width:100%; height:100%; }.map-pin { left:50%; top:50%; width:60px; height:60px; transform:translate(-30px,-60px); }.map-pin>span { width:60px; height:60px; }.contact { padding:0; min-height:auto; flex-direction:column; align-items:stretch; }.contact-bg { position:relative; inset:auto; flex:0 0 auto; width:100%; height:300px; }.contact-panel { flex:0 0 auto; width:100%; max-width:none; }.contact-panel h2 { font-size:55px; }
  .loader-center { width:230px; aspect-ratio:auto; padding:27px 28px 24px; box-shadow:12px 12px 0 var(--blue); }.loader-logo { width:145px; height:100px; }.loader-poster { width:55vw; }.loader-eye { right:-2vw; top:5vh; opacity:.7; }.loader-mark { right:7vw; bottom:-2vh; width:35vw; }
  footer { padding-top:55px; }.footer-top { grid-template-columns:1fr; }.footer-top p { font-size:19px; }.back-top { grid-column:1; }.footer-grid { grid-template-columns:1fr; gap:35px; }.footer-bottom { flex-direction:column; }
  .lightbox { padding:18px; }.lightbox[open] { grid-template-columns:38px 1fr 38px; }.lightbox figure { height:90vh; }.floating-call { right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:60px; height:60px; }.floating-call>i { font-size:20px; }.floating-call-tooltip { bottom:calc(100% + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal,.split-title,.gallery-item { opacity:1; transform:none; clip-path:none; }
  .artistic-word,.artistic-word>span { opacity:1; transform:none; }
  .artistic-title .title-char { opacity:1; filter:none; transform:none; animation:none; }
  .gallery-item img { animation:none!important; transform:none; }
  .gallery::before,.gallery-shape,.gallery-motion strong { animation:none!important; }
  .floating-call,.floating-call::before,.floating-call::after,.floating-call>i,.floating-call-tooltip { animation:none!important; }
}