/* BAIA by Kuutio Homes, in the KUUTIO BRAND (Identity Study, Brand Directions 03, 2026, _sources/brand):
   Tide Blue #1a1b28, Stone Blue #3d3e4a, Gray Blue #7b8491, Graphite Blue #abb0b7, mist #c5ccd2;
   headings and highlights Georgia (italic), body Futura (Jost on the web). Monochrome: no warm accent.
   The page cools as you scroll: --bg moves from mist white to the brand grey blue (set by js on <html>).
   Token names are kept from v1 (--sea = text accent, --sun = main button) so every rule follows the brand. */
:root{
  --tide:#1a1b28; --stone:#3d3e4a; --grayblue:#7b8491; --graphite:#abb0b7; --mist:#c5ccd2;
  --sand:#e6e9ec; --shell:#f6f7f8; --ink:var(--tide); --ink-2:var(--stone); --muted:var(--grayblue);
  --sea:var(--stone); --sea-2:var(--grayblue); --foam:#e3e6ea; --sun:var(--tide); --sun-2:var(--graphite); --dusk:var(--tide); --night:#13141e;
  --line:rgba(26,27,40,.13); --line-l:rgba(255,255,255,.18);
  --bg:#f1f2f4; --tint:0;
  --serif:Georgia,"Gelasio","Times New Roman",serif; --sans:"Futura PT",Futura,"Jost","Century Gothic",system-ui,sans-serif;
  --gut:20px; --max:1240px; --radius:2px; --ease:cubic-bezier(.2,.7,.2,1);
  --sec:56px;   /* 28 Oct "too much spacing": one section rhythm for the whole page (was 80 to 110 px a side) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);transition:background-color .6s linear;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:820px}
/* brand labels: Futura light, wide tracking (the identity study's "KUUTIO HOMES · IDENTITY STUDY") */
.kicker{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--grayblue);margin:0 0 18px}
.kicker--light{color:rgba(255,255,255,.82)}
.h2{font:400 clamp(30px,4.6vw,56px)/1.08 var(--serif);letter-spacing:-.01em;margin:0 0 22px;text-wrap:balance}
.h2 em{font-style:italic;color:var(--grayblue)}
.h2--light{color:#fff}.h2--light em{color:var(--graphite)}
.lead{font-size:17px;color:var(--ink-2);max-width:620px;margin:0 0 26px}
/* direction A (26 Oct, his pick): every section opens with a magazine intro, big Georgia left, the lead right */
.h2--xl{font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em}
.intro{display:grid;gap:8px;margin-bottom:28px}
.intro .lead{margin:0;font-size:18px}
.intro .h2{margin:0}
.fine{font-size:12px;color:var(--muted);margin:22px auto 0}
.fine--light{color:rgba(255,255,255,.55)}
/* reveals: each block rises in after the one above it (--d is set by js per group); the words also come out of a soft blur */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.kicker.reveal,.h2.reveal,.lead.reveal{filter:blur(6px)}
.reveal.is-in{opacity:1;transform:none;filter:none}
/* 28 Oct "give me some scroll effects": the films and the masterplan open like a window as they come up the screen
   (--o runs 1 to 0, set by js from the scroll; without js they sit fully open) */
.fx-open{clip-path:inset(calc(var(--o,0) * 6%) calc(var(--o,0) * 8%) round 4px)}
.fx-open video{transform:scale(calc(1 + var(--o,0) * .12))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:1px solid transparent;border-radius:var(--radius);
  font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
/* main button: Tide Blue on light ground, mist white with Tide Blue type on dark ground and over the films */
.btn--sun{background:var(--tide);color:#fff}.btn--sun:hover{background:var(--stone)}
.hero .btn--sun,.film .btn--sun,.reg .btn--sun,.plan .btn--sun,.nav:not(.is-solid) .btn--sun{background:#eef0f2;color:var(--tide)}
.hero .btn--sun:hover,.film .btn--sun:hover,.reg .btn--sun:hover,.plan .btn--sun:hover,.nav:not(.is-solid) .btn--sun:hover{background:#fff}
.btn--glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn--glass svg{fill:#fff;stroke:none}.btn--glass:hover{background:rgba(255,255,255,.26)}
.btn--line{border-color:var(--ink);color:var(--ink);background:transparent}.btn--line:hover{background:var(--ink);color:#fff}
.btn--small{min-height:40px;padding:0 18px;font-size:11px}
.btn--block{width:100%}
.chip{border:1px solid var(--line);background:transparent;padding:9px 14px;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:30px;transition:all .3s}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip--a::before,.chip--b::before,.chip--c::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.chip--a::before{background:var(--graphite)}.chip--b::before{background:var(--grayblue)}.chip--c::before{background:var(--stone)}
.chip--light{color:#fff;border-color:var(--line-l)}.chip--light.is-on{background:#fff;color:var(--ink);border-color:#fff}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gut);padding-top:max(14px,env(safe-area-inset-top));transition:background .4s,box-shadow .4s}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__logo{height:26px;width:auto}
.nav__logo--i{display:none}
/* "by" + the Kuutio Homes logo (the brand's vector mark), after a hairline */
.nav__by{display:none;align-items:center;gap:10px;padding-left:12px;border-left:1px solid rgba(255,255,255,.35);font:400 11px/1 var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.8)}
.nav__kuutio{height:20px;width:auto}
.nav__kuutio--i{display:none}
.nav__links{display:none;gap:26px}
.nav__links a{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:#fff;opacity:.85}
.nav__links a:hover{opacity:1}
.nav.is-solid{background:rgba(246,247,248,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav.is-solid .nav__logo--w,.nav.is-solid .nav__kuutio--w{display:none}.nav.is-solid .nav__logo--i,.nav.is-solid .nav__kuutio--i{display:block}
.nav.is-solid .nav__by{border-color:var(--line)}
.nav.is-solid .nav__by,.nav.is-solid .nav__links a{color:var(--ink)}
/* a hairline under the bar fills as you read down the page */
.nav__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tide);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .4s}
.nav.is-solid .nav__bar{opacity:1}

/* ============ hero ============ */
.hero{position:relative;height:320svh;background:var(--night)}   /* one shot now (26 Oct): about 2 scrolls, like Atrium */
.hero__stick{position:sticky;top:0;height:100svh;overflow:hidden}
.hero__poster,.hero__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__canvas{opacity:0;transition:opacity .6s}.hero__canvas.is-live{opacity:1}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,27,40,.5) 0%,rgba(26,27,40,0) 34%,rgba(26,27,40,0) 58%,rgba(26,27,40,.62) 100%);pointer-events:none}
.hero__stage{position:absolute;left:0;right:0;padding:0 var(--gut);text-align:center;color:#fff;pointer-events:none;opacity:0}
.hero__stage--a{top:22%}
/* 5 Nov: the 5% VAT line on the first screen */
.hero__offer{font:400 clamp(16px,2.2vw,22px)/1.3 var(--serif);letter-spacing:.03em;margin:8px 0 0;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6),0 0 42px rgba(0,0,0,.45)}
.hero__stage--b,.hero__stage--c{top:14%}
/* the last stage: words at the top (sky), buttons at the bottom, so nothing covers the walk to the door */
.hero__stage--d{top:0;bottom:0;display:flex;flex-direction:column;padding-top:14svh;padding-bottom:calc(10svh + env(safe-area-inset-bottom))}
.hero__stage--d .hero__ctas{margin-top:auto}
.hero__logo{width:min(64vw,360px);height:auto;margin:6px auto 14px;filter:drop-shadow(0 2px 18px rgba(0,0,0,.25))}
.hero__line{font:400 clamp(19px,2.6vw,30px)/1.3 var(--serif);margin:0;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero__line--big{font-size:clamp(26px,4.2vw,50px);line-height:1.12}
.hero__line em{font-style:italic;color:#e4e7eb}
.hero__sub{font:400 13px/1.5 var(--sans);letter-spacing:.08em;margin:14px 0 22px;opacity:.9}
.hero__ctas{display:flex;flex-direction:column;gap:10px;align-items:center}
.hero__ctas .btn{min-width:240px}
.hero__cue{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);color:#fff;text-align:center;
  font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:opacity .5s;pointer-events:none}
.hero__cue i{display:block;width:1px;height:40px;margin:12px auto 0;background:linear-gradient(#fff,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* depth gauge: sea -> door */
.gauge{position:absolute;right:max(var(--gut),env(safe-area-inset-right));top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0 0 0 18px;
  display:none;flex-direction:column;gap:26px;border-left:1px solid rgba(255,255,255,.35);pointer-events:none}
.gauge li{font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .4s}
.gauge li.is-on{color:#fff}
.gauge__dot{position:absolute;left:-5px;top:0;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);transition:top .2s linear}

/* ============ proof ============ */
.proof{display:grid;grid-template-columns:repeat(2,1fr);background:var(--shell);border-bottom:1px solid var(--line)}
.proof__item{padding:22px 12px;text-align:center;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.proof__item b{display:block;font:400 30px/1 var(--serif);color:var(--tide)}
.proof__item span{display:block;margin-top:8px;font:500 10px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grayblue)}

/* ============ the film, second (26 Oct): dusk band straight after the sunset hero, inline player + the two asks ============ */
/* 27 Oct: the words above, the horizontal film below on every screen */
.film{background:var(--dusk);color:#fff;padding:var(--sec) 0}
.film .intro{margin-bottom:24px}
.film__frame{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;aspect-ratio:16/9}
.film__video{width:100%;height:100%;object-fit:cover}
.film__sound{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border:1px solid rgba(255,255,255,.4);
  border-radius:40px;background:rgba(10,16,20,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.film__sound svg{width:18px;height:18px;fill:#fff}
/* play / pause (26 Oct "give them the option to pause"), sits left of Sound on; tapping the picture does the same */
.film__play{position:absolute;left:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  background:rgba(10,16,20,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;padding:0}
.film__play svg{width:18px;height:18px;fill:#fff}
.film__play .i-play,.film.is-paused .film__play .i-pause{display:none}
.film.is-paused .film__play .i-play{display:inline}
.film__play~.film__sound{left:66px;height:44px}
.film__video{cursor:pointer}
.film__full{position:absolute;right:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  background:rgba(10,16,20,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;padding:0}
.film__full svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film__video:fullscreen{object-fit:contain;background:#000}
.film__sound .film__wave{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.35}
.film__sound[aria-pressed="true"] .film__wave{opacity:1}
.film .kicker{color:var(--graphite)}
.film .h2{color:#fff}.film .h2 em{color:var(--graphite)}
/* phone: smaller controls so they do not cover the picture */
@media (max-width:759px){
  .film__play{width:38px;height:38px;left:10px;bottom:10px}
  .film__play~.film__sound{left:54px;bottom:10px;height:38px;padding:0 12px 0 10px;font-size:10px}
  .film__full{width:38px;height:38px;right:10px;bottom:10px}
}

/* ============ plan ============ */
/* the masterplan: Kuutio's aerial as a 3D photo on a dusk-blue stage */
.plan{padding:var(--sec) 0 calc(var(--sec) * .8);background:radial-gradient(120% 90% at 50% 20%,#2c2d3b 0%,var(--tide) 70%);color:#fff}
.lead--light{color:rgba(255,255,255,.78)}
.plan__stage{display:grid;gap:18px}
.plan__canvas{position:relative}
.plan__view{position:relative;width:100%;aspect-ratio:1066/900;overflow:hidden;background:var(--tide);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.plan__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plan__img--night{opacity:0;transition:opacity 1.2s var(--ease)}
.plan__img--night.is-on{opacity:1}
.plan__gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.plan__view.is-gl .plan__img{visibility:hidden}
.plan__toggle{position:absolute;right:12px;top:12px;z-index:3;display:flex;background:rgba(26,27,40,.6);backdrop-filter:blur(6px);padding:3px;border-radius:30px}
.plan__toggle button{border:0;background:none;color:rgba(255,255,255,.8);font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;cursor:pointer;border-radius:30px}
.plan__toggle button.is-on{background:#fff;color:var(--ink)}
.plan__spot{position:absolute;left:0;top:0;z-index:2;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:8px;margin:-9px 0 0 -9px;color:#fff}
/* hotspots: white glow dots (monochrome brand, as on Atrium) */
.plan__spot i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--tide);box-shadow:0 0 0 3px rgba(255,255,255,.4),0 0 18px rgba(255,255,255,.7);animation:pulse 2.6s var(--ease) infinite}
.plan__spot span{display:flex;flex-direction:column;gap:3px;background:rgba(26,27,40,.82);backdrop-filter:blur(4px);padding:6px 9px;font:600 11px/1 var(--sans);letter-spacing:.1em;white-space:nowrap}
.plan__spot small{font:400 9.5px/1 var(--sans);letter-spacing:.08em;color:var(--graphite)}
.plan__spot--club i{background:var(--graphite);animation:none}
.plan__spot.is-on i{background:var(--tide);border-color:#fff}
.plan__spot.is-on span{background:#fff;color:var(--tide)}
.plan__spot.is-on small{color:var(--stone)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.4),0 0 18px rgba(255,255,255,.7)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.12),0 0 26px rgba(255,255,255,.45)}}
/* phone: smaller dots and one line labels, so 7 to 10, 11, the pool and 12 no longer sit on each other */
@media (max-width:759px){
  .plan__spot{gap:5px;margin:-7px 0 0 -7px}
  .plan__spot i{width:14px;height:14px;border-width:3px}
  .plan__spot span{padding:4px 6px;font-size:10px;letter-spacing:.06em}
  .plan__spot small{display:none}
}
.plan__panel{background:var(--shell);color:var(--ink);padding:18px 18px 20px;min-height:150px;border-radius:4px;position:relative}
.plan__hint{margin:0;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-align:center;padding:30px 0}
.plan__panel h3{font:400 26px/1.1 var(--serif);margin:0 0 4px}
.plan__panel .ptype{font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--grayblue);margin:0 0 10px}
.plan__sub{font-size:13px;color:var(--ink-2);margin:4px 0 12px}
.plan__close{position:absolute;right:8px;top:6px;width:34px;height:34px;border:0;background:none;font:300 26px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.plots{list-style:none;margin:0 0 6px;padding:0;max-height:440px;overflow:auto}
/* 27 Oct: the villas as numbered chips, one line per type (compact on phone) */
.vrow{padding:10px 0 12px;border-top:1px solid var(--line)}
.vrow__t{margin:0 0 8px;font:500 10.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tide)}
.vrow__t span{margin-left:6px;letter-spacing:.06em;text-transform:none;font-size:12px;color:var(--grayblue)}
.vrow__chips{display:flex;flex-wrap:wrap;gap:6px}
/* 28 Oct: the numbers sat off centre (the old row grid's 70 px column leaked in, and Georgia's old style figures ride
   up and down), so the chips reset the grid and set the number in Futura */
.plotrow.vchip{display:inline-grid;grid-template-columns:1fr;place-items:center;text-align:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;font:500 14px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;color:var(--tide);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.plotrow.vchip:hover{border-color:var(--tide);background:#fff}
.plotrow.vchip.is-on{background:var(--tide);color:#fff;border-color:var(--tide)}
.vchip--s{opacity:.4;text-decoration:line-through}.vchip--r{border-style:dashed}
.plotrow{width:100%;display:grid;grid-template-columns:70px 64px 1fr auto;gap:8px;align-items:center;border:0;border-top:1px solid var(--line);background:none;padding:12px 4px;cursor:pointer;text-align:left;font-size:13px;color:var(--ink-2)}
.plotrow b{font:400 17px var(--serif);color:var(--ink)}
.plotrow:hover,.plotrow.is-on{background:rgba(123,132,145,.12)}
.plotrow .st{font:700 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:20px;font-style:normal}
.st--a{background:var(--tide);color:#fff}.st--r{background:var(--mist);color:var(--tide)}.st--s{background:#e6e8eb;color:var(--grayblue)}
.plan__detail:not(:empty){border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.pd__head{font-size:13px;color:var(--ink-2);margin:0 0 10px}
.plan__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;padding:0;list-style:none}
.plan__facts li{border-top:1px solid var(--line);padding-top:10px}
.plan__facts b{display:block;font:400 22px/1.1 var(--serif)}
.plan__facts span{font:600 10px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan__status{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.plan__btns{display:grid;gap:8px}

/* ============ the villas: one editorial spread per type ============ */
.homes{padding:var(--sec) 0 calc(var(--sec) * .6)}
/* 31 Oct materials: the swatch deck (css/deck.css), Kuutio blues */
.mats{padding:var(--sec) 0;--deck-ink:var(--tide);--deck-card:rgba(246,247,248,.95);--deck-muted:var(--grayblue);--deck-shade:26,27,40}
.homes__head{display:grid;gap:18px;margin-bottom:6px}
.homes__h2{font-size:clamp(32px,3.6vw,50px);line-height:1.04;letter-spacing:-.015em;margin:0}
.homes__h2 em{display:block}
.homes__tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.homes__tools .btn svg{fill:none;stroke:currentColor}
.homes__tabs{display:flex;border:1px solid var(--tide)}
.homes__tabs button{border:0;border-right:1px solid var(--tide);background:none;padding:12px 16px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tide);cursor:pointer;transition:background .3s,color .3s}
.homes__tabs button:last-child{border-right:0}
.homes__tabs button.is-on{background:var(--tide);color:#fff}
/* phone / short screens: the spreads are a swipe rail (room on top for the big type letter) */
/* 27 Oct "ss2 is not balanced and is on the edge": each slide centres with an equal peek either side, the letter inside it */
.spreads{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:8px 8% 8px;scroll-padding:0 8%;scrollbar-width:none}
.spreads::-webkit-scrollbar{display:none}
.spread{position:relative;display:grid;gap:16px;flex:0 0 84%;scroll-snap-align:center;align-content:start;--lt:50px}
/* the rail: the villa in the middle is full, the ones peeking at the sides step back (no half words at full strength) */
.homes:not(.homes--pin) .spread{opacity:.38;transform:scale(.95);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.homes:not(.homes--pin) .spread.is-cur{opacity:1;transform:none}
.homes__fine{margin-top:18px}
/* PC: the segment pins to one screen, the three spreads stacked in one stage, moved by js (homesRender) */
.homes--pin{height:300svh;padding:0}
.homes--pin .homes__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.homes--pin .homes__wrap{width:100%;padding-top:70px}
.homes--pin .homes__head{grid-template-columns:1fr auto;align-items:end;margin-bottom:40px}
.homes--pin .homes__h2 em{display:inline}
.homes--pin .spreads{--sh:min(calc(100svh - 230px),620px);display:block;position:relative;overflow:hidden;margin:0;padding:0;height:var(--sh)}
/* each spread is one opaque box (letter inside it) so the next one covers it completely as it wipes in.
   28 Oct "the image doesnt show the full concept": every photo at its own proportions (--ar), as wide as the column
   allows while it and its letter fit the stage height; nothing cropped */
.homes--pin .spread{--lt:84px;position:absolute;inset:0;height:100%;grid-template-rows:minmax(0,1fr);align-items:center;background:var(--bg);will-change:clip-path}
.homes--pin .spread__img{width:min(100%,calc((var(--sh) - var(--lt) - 8px) * var(--ar)));will-change:transform}
/* all three photos are 16:9 now (28 Oct): the photo takes two thirds, the compact text one third */
@media (min-width:1100px){.homes--pin .spread{grid-template-columns:2fr 1fr;gap:56px}.homes--pin .spread:nth-child(even){grid-template-columns:1fr 2fr}}
.homes--pin .spread__body,.homes--pin .spread__letter{will-change:transform}
/* shorter laptop screens (768, 720 high): a tighter text column so the asks stay on screen */
@media (max-height:860px){
  .homes--pin .homes__wrap{padding-top:80px}
  .homes--pin .homes__head{margin-bottom:18px}
  .homes--pin .spreads{--sh:calc(100svh - 205px)}
  .homes--pin .spread{--lt:64px}
  .homes--pin .spread__body h3{font-size:clamp(26px,2.6vw,34px)}
  .homes--pin .nums{margin:16px 0 18px;padding-top:14px}
  .homes--pin .nums b{font-size:28px}
  .homes--pin .spread__acts .btn{min-height:42px;padding:0 18px}
  .homes--pin .spread__plots{margin-top:12px}
  .homes--pin .homes__fine{margin-top:8px}
}
/* 8 px of air between the letter's baseline and the photo (on the edge itself the photo took the tips of the A's feet) */
.spread__media{position:relative;padding-top:calc(var(--lt) + 8px)}
.spread__img{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:var(--dusk);aspect-ratio:var(--ar,3/2);overflow:hidden}
.spread__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.spread__img:hover img{transform:scale(1.03)}
.spread__photos{position:absolute;right:14px;bottom:14px;background:rgba(246,247,248,.94);padding:9px 12px;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;display:flex;gap:8px;align-items:center;color:var(--tide)}
.spread__photos svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
/* the type letter, set big in Georgia italic. 28 Oct "C is not visible because of the tree": it now stands ON the photo's
   top edge (baseline on the edge, sized from --lt) instead of over the picture */
/* left .1em: the italic A's foot reaches .09em left of the letter box, and on PC the stage clips at the photo's edge */
.spread__letter{position:absolute;top:0;left:.13em;font:italic 400 calc(var(--lt) * 1.18)/1 var(--serif);color:var(--tide);pointer-events:none;z-index:2}
/* 28 Oct "still too much details ... more compact but correct": the long description and the price line are gone; the
   headline carries what makes the type different, three numbers carry the facts, two buttons and the map link */
.spread__body .kicker{margin-bottom:10px}
.spread__body h3{font:400 clamp(26px,3vw,42px)/1.08 var(--serif);letter-spacing:-.01em;margin:0}
.spread__body h3 em{font-style:italic;color:var(--grayblue)}
.nums{display:grid;grid-template-columns:auto auto 1fr;gap:22px;margin:16px 0 18px;padding-top:14px;border-top:1px solid var(--line)}
.nums b{display:block;font:400 clamp(24px,2.6vw,34px)/1 var(--serif);white-space:nowrap}
.nums span{display:block;margin-top:7px;font:500 9.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grayblue)}
.spread__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px}
.spread__acts .btn{min-height:44px;padding:0 10px;letter-spacing:.14em}
.spread__acts .btn svg{fill:none;stroke:currentColor}
.spread__plots{display:inline-block;margin-top:14px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--tide);text-decoration:none;border-bottom:1px solid var(--tide);padding-bottom:6px}
.card__price{font:400 20px/1.2 var(--serif);margin:0 0 16px}   /* the plot panel's price line */

/* the villas intro carries the "Amenities and finishes" button under its lead */
.intro__side{display:grid;gap:22px;justify-items:start}
.intro__side .btn svg{fill:none;stroke:currentColor}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);font-size:15px}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:6px;border-left:1.6px solid var(--sea);border-bottom:1.6px solid var(--sea);transform:rotate(-45deg)}
.ticks--light li{border-color:var(--line-l);color:rgba(255,255,255,.9)}.ticks--light li::before{border-color:var(--graphite)}

/* ============ rising: the construction timelapse ============ */
.rise{padding:var(--sec) 0;background:linear-gradient(180deg,var(--stone) 0%,var(--tide) 100%);color:#fff}
.rise__eta{display:block;margin-top:10px;font-weight:500;color:#fff}
.rise__film{margin:0}
.rise__film video{width:100%;height:auto;aspect-ratio:16/9;background:#000;display:block}
/* 28 Oct: the note in plain small type (it was spaced capitals, hard to read on a phone) */
.rise__film figcaption{margin-top:12px;font:400 12px/1.5 var(--sans);letter-spacing:.02em;color:var(--graphite)}

/* ============ amenities panel (dialog): the list left, the rooms scroll on the right; full screen on phone ============ */
.amen{width:min(1180px,94vw);max-height:90svh;padding:0;background:var(--shell);color:var(--ink);border-radius:6px;overflow:auto}
.amen[open]{animation:pop .45s var(--ease)}
.amen.is-closing{animation:popout .28s ease forwards}
.amen__close{position:sticky;top:0;float:right;z-index:3;width:48px;height:48px;border:0;background:var(--shell);font:300 32px/1 var(--sans);color:var(--ink);cursor:pointer}
.amen__wrap{display:grid;gap:28px;padding:28px 22px 30px}
.amen h3{font:400 clamp(34px,4vw,52px)/1.02 var(--serif);letter-spacing:-.015em;margin:0 0 24px}
.amen h3 em{color:var(--grayblue)}
.amen__cols{display:grid;gap:22px;margin-bottom:28px}
.amen__h{margin:0 0 6px;font:500 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--grayblue)}
.amen__list{list-style:none;margin:0;padding:0;counter-reset:a}
.amen__list li{counter-increment:a;display:grid;grid-template-columns:34px 1fr;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font:400 18px/1.3 var(--serif)}
.amen__list li::before{content:counter(a,decimal-leading-zero);font:italic 400 13px/1 var(--serif);color:var(--grayblue)}
.amen__rooms{display:grid;gap:22px}
.amen__rooms figure{margin:0}
.amen__rooms img{width:100%;height:auto}
.amen__rooms figcaption{margin-top:10px;font:500 10px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--grayblue)}
@media (max-width:759px){.amen{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border-radius:0}}
@media (min-width:1000px){
  .amen__wrap{grid-template-columns:5fr 6fr;gap:50px;padding:46px 50px 50px}
  .amen__copy{position:sticky;top:46px;align-self:start}
}

/* ============ location: the Atrium drive time radar, Kuutio brand (Tide Blue ground, white glow) ============ */
/* overflow clipped: on a 390 px phone the outer radar labels poke past the edge and the browser zooms the whole page out */
.loc{padding:var(--sec) 0;background:radial-gradient(110% 90% at 70% 50%,#2a2c3b 0%,var(--tide) 65%);color:#fff;overflow:hidden;
  --cm-sea:#14151f;--cm-land:#2b2d3d;--cm-road:rgba(197,204,210,.12);--cm-road-major:rgba(197,204,210,.26);--cm-ink:#f1f2f4;--cm-accent:#fff}
@media (max-width:520px){.radar__list li{width:92px}.radar__list span{letter-spacing:.12em}}
.loc__wrap{display:grid;gap:34px}
/* 28 Oct: "View on Google Maps" was Tide Blue on the Tide Blue ground */
.loc .btn--sun{background:#eef0f2;color:var(--tide)}.loc .btn--sun:hover{background:#fff}
.loc .h2{margin-bottom:22px}
.loc__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.loc__ctas .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.btn--ghostl{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}.btn--ghostl:hover{background:#fff;color:var(--tide)}
.radar{position:relative;aspect-ratio:1/1;max-width:580px;width:100%;margin:0 auto}
.radar__rings{position:absolute;inset:0}
.radar__rings i{position:absolute;inset:0;border:1px solid rgba(171,176,183,.28);border-radius:50%}
.radar__rings i:nth-child(2){inset:17%}.radar__rings i:nth-child(3){inset:34%}
.radar__rings i:first-child::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.14),transparent 25%);animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar__core{position:absolute;left:50%;top:50%;width:24%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px rgba(255,255,255,.35))}
.radar__list{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.radar__list li{position:absolute;transform:translate(-50%,-50%);text-align:center;width:116px;opacity:0;transition:opacity .8s var(--ease)}
.radar.is-in .radar__list li{opacity:1}
.radar__list li::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#fff;margin:0 auto 7px;box-shadow:0 0 12px rgba(255,255,255,.7)}
.radar__list b{display:block;font:400 clamp(15px,1.6vw,19px)/1.1 var(--serif);color:#fff}
.radar__list span{display:block;margin-top:3px;font:500 9.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--graphite)}

/* ============ faq: heading left, questions right ============ */
/* 27 Oct "like atrium set up": one narrow centred column, a modest heading, chevrons */
.faq{padding:var(--sec) 0}
.kicker--rule::before{content:"";display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;margin:-2px 14px 0 0}
.faq .h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:26px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;font:400 clamp(17px,1.5vw,19px)/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1.4px solid var(--stone);border-bottom:1.4px solid var(--stone);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{margin:0 0 20px;color:var(--ink-2)}

/* ============ register ============ */
.reg{position:relative;padding:var(--sec) 0;color:#fff;overflow:hidden;background:var(--dusk)}
/* the sunset behind the form drifts slower than the page (--y set by js) */
.reg__bg{position:absolute;inset:0}.reg__bg img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;opacity:.38;transform:translate3d(0,var(--y,0),0)}
/* 28 Oct: the form's send button was mist white on the white form */
.reg .form .btn--sun,.reg .thanks .btn--sun{background:var(--tide);color:#fff}.reg .form .btn--sun:hover{background:var(--stone)}
.reg__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,27,40,.55),rgba(26,27,40,.88))}
.reg__wrap{position:relative;display:grid;gap:30px}
.reg__copy p{color:rgba(255,255,255,.85)}
.reg__or a{color:#fff}
.form{background:var(--shell);color:var(--ink);padding:24px 20px}
.field{margin:0 0 14px;border:0;padding:0}
.field label,.field legend{display:block;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;padding:0}
.field input,.phone select,.gate input{width:100%;height:48px;border:1px solid var(--line);background:#fff;padding:0 14px;font:400 16px var(--sans);color:var(--ink);border-radius:var(--radius)}
.field input:focus,.gate input:focus{outline:2px solid var(--sea-2);outline-offset:1px}
.field.is-bad input{border-color:#b3412c}
.phone{display:grid;grid-template-columns:108px 1fr;gap:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pills span{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:30px;font-size:13px;background:#fff;transition:all .25s}
.pills input:checked+span{background:var(--sea);border-color:var(--sea);color:#fff}
.pills input:focus-visible+span{outline:2px solid var(--sea-2)}
.consent{display:flex;gap:10px;font-size:12px;color:var(--ink-2);margin:6px 0 14px;align-items:flex-start}
.consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.form__err{color:#b3412c;font-size:13px;min-height:1px;margin:0 0 10px}
.thanks{background:var(--shell);color:var(--ink);padding:30px 24px}
.thanks h3{font:400 30px/1.1 var(--serif);margin:0 0 10px}

/* ============ footer ============ */
.foot{background:var(--night);color:rgba(255,255,255,.8);padding:48px 0 calc(96px + env(safe-area-inset-bottom))}
.foot__wrap{display:grid;gap:24px}
.foot__logo{height:30px;width:auto;margin-bottom:10px}
.foot__kuutio{height:34px;width:auto;margin-top:22px;opacity:.9}
.foot a{color:#fff;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot p{margin:0;font-size:14px;line-height:1.8}

/* ============ dialogs ============ */
dialog{border:0;padding:0}
dialog::backdrop{background:rgba(19,20,30,.72);backdrop-filter:blur(6px)}
.filmbox{width:min(1100px,94vw);height:fit-content;background:#000;border-radius:16px;overflow:hidden;color:#fff}
.filmbox[open]{animation:pop .45s var(--ease)}
.filmbox.is-closing{animation:popout .28s ease forwards}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes popout{to{opacity:0;transform:translateY(16px) scale(.97)}}
.filmbox__bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
.filmbox__title{margin:0;font:400 17px var(--serif)}.filmbox__title small{margin-left:10px;font:600 11px var(--sans);opacity:.6}
.filmbox__close,.lb__close,.gate__close{border:0;background:none;color:inherit;font:300 30px/1 var(--sans);cursor:pointer;width:40px;height:40px}
.filmbox video{width:100%;aspect-ratio:16/9;background:#000}
.lb{width:100vw;max-width:100vw;height:100svh;max-height:100svh;background:var(--night);color:#fff;margin:0;display:none;flex-direction:column}
.lb[open]{display:flex}
.lb__bar{display:flex;align-items:center;gap:14px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.lb__title{margin:0;flex:1;font:400 18px var(--serif)}
.lb__count{font:600 11px var(--sans);letter-spacing:.14em;opacity:.7}
.lb__fig{position:relative;flex:1;margin:0;display:flex;flex-direction:column;justify-content:center;min-height:0;touch-action:pan-y}
.lb__fig img{max-height:calc(100% - 40px);width:100%;object-fit:contain;margin:0 auto}
.lb__fig figcaption{text-align:center;font-size:13px;opacity:.8;padding:10px 14px 0}
.lb__nav{position:absolute;top:45%;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;cursor:pointer}
.lb__nav--prev{left:10px}.lb__nav--next{right:10px}
.lb__strip{display:flex;gap:6px;overflow-x:auto;padding:10px 14px calc(12px + env(safe-area-inset-bottom));scrollbar-width:none}
.lb__strip button{flex:0 0 76px;height:52px;border:2px solid transparent;padding:0;background:none;cursor:pointer;opacity:.55}
.lb__strip button.is-on{border-color:#fff;opacity:1}
.lb__strip img{width:100%;height:100%;object-fit:cover}
.gate{width:min(440px,92vw);background:var(--shell);color:var(--ink);padding:26px 24px;border-radius:6px}
.gate[open]{animation:pop .4s var(--ease)}
.gate__close{position:absolute;right:8px;top:6px}
.gate h3{font:400 26px/1.15 var(--serif);margin:0 0 8px}
.gate form>input,.gate form>.phone{margin:0 0 10px}
.gate__links{display:grid;gap:8px;margin-top:14px}

/* ============ dock + cookies ============ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(26,27,40,.95);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .45s var(--ease)}
.dock.is-on{transform:none}
/* the WhatsApp button, always on screen (28 Oct): WhatsApp green so it is read at a glance; a circle on phone (lifted
   above the bar when the bar shows, the bar leaves room for it), a pill with the word on PC */
.wa{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;justify-content:center;gap:10px;
  width:54px;height:54px;border-radius:30px;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 8px 26px rgba(0,0,0,.28);transition:bottom .45s var(--ease),transform .3s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:28px;height:28px;flex:0 0 auto}
.wa__ring{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}.wa__phone{fill:#fff}
.wa span{display:none;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.dock.is-on~.wa{bottom:calc(10px + env(safe-area-inset-bottom))}
.dock{padding-right:80px}
@media (min-width:1100px){.wa,.dock.is-on~.wa{width:auto;height:52px;padding:0 22px 0 16px;right:28px;bottom:28px}.wa span{display:inline}}
.dock__main{flex:1;display:flex;align-items:center;justify-content:center;background:#eef0f2;color:var(--tide);border-radius:var(--radius);min-height:50px;text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:var(--shell);color:var(--ink);padding:18px 18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:420px;
  transform:translateY(20px);opacity:0;transition:all .4s var(--ease)}
.cookies.is-on{transform:none;opacity:1}
.cookies__title{font:400 20px var(--serif);margin:0 0 6px}
.cookies__text{font-size:13px;color:var(--ink-2);margin:0 0 12px}
.cookies__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookies__yes{background:var(--ink);color:#fff}.cookies__no{background:transparent;border:1px solid var(--ink);color:var(--ink)}

/* ============ tablet + desktop ============ */
@media (min-width:760px){
  :root{--gut:40px;--sec:80px}
  .nav__by{display:inline-flex}
  .proof{grid-template-columns:repeat(4,1fr)}
  .proof__item{border-top:0;padding:30px 16px}
  .proof__item b{font-size:40px}
  .hero__ctas{flex-direction:row;justify-content:center}
  .gauge{display:flex}
  .reg__wrap{grid-template-columns:1fr 1fr;align-items:start}
  .form{padding:32px 30px}
  .foot__wrap{grid-template-columns:repeat(3,1fr)}
}
/* PC: the plan sits beside its panel; direction A spreads go side by side, alternating */
@media (min-width:1100px){
  :root{--sec:96px}
  .intro{grid-template-columns:1.7fr 1fr;align-items:end;gap:64px;margin-bottom:48px}
  .intro .lead{max-width:460px;justify-self:end;margin-bottom:6px}
  .spread{grid-template-columns:7fr 5fr;gap:70px;align-items:center}
  .spread:nth-child(even){grid-template-columns:5fr 7fr}
  .spread:nth-child(even) .spread__media{order:2}
  .spread:nth-child(even) .spread__img{margin-left:auto}
  .spread:nth-child(even) .spread__letter{left:auto;right:.04em}
  .loc__wrap{grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
  .nav__links{display:flex}
  .plan__stage{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .plan__view{max-height:82vh;margin:0 auto}
  .plan__panel{position:sticky;top:90px}
  .dock{display:none}
  .foot{padding-bottom:50px}
}
/* 3 Nov meeting: the shared spaces inside the masterplan, and the sold out mark on Types B and C */
.plan__shared{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.plan__shared li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-l);border-radius:4px;color:#fff;
  font:500 11px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.plan__shared svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
@media (min-width:760px){.plan__shared{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spread__sold{display:inline-block;margin-left:8px;padding:4px 8px;background:var(--ink);color:#fff;border-radius:2px;font:600 9.5px/1 var(--sans);letter-spacing:.16em;vertical-align:1px}
/* 28 Oct: the reveals run for everyone (his PC reports reduced motion and lost every effect) */
@media (prefers-reduced-motion:reduce){
  .hero__cue i{animation:none}
}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}.sp__plot:focus-visible{outline:2px solid #fff}.fine:not(.fine--light){color:#5f6672}.fine--light{color:rgba(255,255,255,.72)}