/* ATRIUM by Kuutio Homes, landing page. Mobile first. */
/* Brand: Kuutio Homes, the same as The Gallery and Baia (1 Nov "make atrium the same branding like the other 2"):
   Tide navy, stone and grey blue on shell greys, white type on dark, the Kuutio logo beside the wordmark. The token names
   stay from the booklet palette it replaced (forest green, 30 Sep to 31 Oct) so the rules below did not have to move.
   No colour accent: buttons are navy on light sections, shell on dark ones.
   Brand fonts: Georgia headings, Futura text. Futura ships on Apple devices; elsewhere Jost (Futura cut) stands in,
   and Gelasio (Georgia metrics) covers Android, which has no Georgia. */
:root{
  --pine:#1a1b28; --pine-2:#24252f; --pine-3:#3d3e4a; --moss:#13141e;
  --trav:#f1f2f4; --trav-2:#e6e9ec; --sand:#c5ccd2; --concrete:#abb0b7;
  --iroko:var(--pine-3); --lamp:var(--pine); --lamp-2:var(--moss); --glow:#f6f7f8;
  --acc-rgb:246,247,248; --acc-ink:var(--pine); --acc-pale:#e6e9ec; --on-lamp:var(--trav);
  --ink:#1a1b28; --ink-2:#3d3e4a; --line:rgba(26,27,40,.13); --line-l:rgba(255,255,255,.18);
  --a:var(--pine-3); --r:#c9a867; --s:#abb0b7;
  --serif:Georgia,"Gelasio","Times New Roman",serif;
  --sans:"Futura PT","Futura","Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:20px; --max:1200px; --radius:2px;
  --ease:cubic-bezier(.22,.61,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--trav);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
/* clip (not hidden): no scroll container, so the sticky hero keeps working, and nothing can widen the phone viewport */
main>section,footer{overflow-x:clip}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:820px}
/* booklet two-tone headings: second line in concrete grey */
em{font-style:normal;color:#7b8491}
.h2{font:400 clamp(25px,6.6vw,50px)/1.15 var(--serif);letter-spacing:-.01em;margin:.2em 0 .5em;text-wrap:balance;color:var(--ink)}
.h2--light{color:#fff} .h2--light em{color:var(--sand)}
.h3{font:400 clamp(21px,4.4vw,30px)/1.2 var(--serif);margin:0 0 .5em}
.lead{font-size:clamp(15px,3.9vw,17px);line-height:1.7;color:var(--ink-2);max-width:40em;margin:0 0 1.6em}
.lead--light{color:rgba(255,255,255,.78)}
.kicker{font:900 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:22px;height:1px;background:var(--iroko)}
.kicker--light{color:rgba(255,255,255,.82)}
.kicker--light::before{background:rgba(246,247,248,.6)}
.eyebrow{font:500 10.5px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin:0 0 22px;color:rgba(255,255,255,.86)}
.fine{font-size:12px;color:var(--concrete);margin-top:22px}
.fine--light{color:rgba(255,255,255,.45);padding-bottom:110px}

/* wordmark (inline SVG injected) */
.wm{display:inline-block;line-height:0;color:currentColor}
.wm svg{width:100%;height:auto;display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--radius);
  font:800 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background .35s,color .35s,box-shadow .35s}
.btn:active{transform:scale(.98)}
.btn--lamp{background:var(--lamp);color:var(--on-lamp);box-shadow:0 12px 30px -14px rgba(0,0,0,.45)}
.btn--lamp:hover{background:var(--lamp-2)}
/* on dark ground the primary button turns travertine */
.hero .btn--lamp{background:var(--trav);color:var(--pine);text-shadow:none}
.hero .btn--lamp:hover{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(26,27,40,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--ghost-light{border-color:var(--line-l);color:var(--trav)}
.btn--light{background:var(--trav);color:var(--pine)}
.btn--small{min-height:40px;padding:0 16px;font-size:10.5px}
.btn--block{width:100%}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gut);padding-top:max(14px,env(safe-area-inset-top));color:#fff;transition:background .4s,color .4s,box-shadow .4s}
.nav.is-solid{background:rgba(246,247,248,.92);color:var(--pine);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav.is-solid .btn--light{background:var(--pine);color:var(--trav)}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__brand .wm{width:96px}
/* "by" + the Kuutio logo, the lock-up of The Gallery and Baia: white logo over the hero, ink logo on the solid bar */
.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.is-solid .nav__kuutio--w{display:none}.nav.is-solid .nav__kuutio--i{display:block}
.nav.is-solid .nav__by{border-color:var(--line);color:var(--ink)}
.nav__links{display:none;gap:28px}
.nav__links a{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.85}
.nav__links a:hover{opacity:1}

/* ============ HERO ============ */
.hero{position:relative;height:300svh;background:var(--pine)}
.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;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,14,22,.62) 0%,rgba(13,14,22,.28) 26%,rgba(13,14,22,.34) 50%,rgba(13,14,22,.30) 62%,rgba(13,14,22,.82) 100%)}
.hero__stage{position:absolute;left:0;right:0;padding:0 var(--gut);color:#fff;text-align:center;opacity:0;will-change:opacity,transform,filter;backface-visibility:hidden;
  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>*{will-change:opacity,transform,filter;backface-visibility:hidden}
.hero__stage--a{top:22svh}
/* 5 Nov: the 5% VAT line on the first screen, below the property; 205px keeps it above the cookie card on a phone */
.hero__stage--offer{bottom:calc(205px + env(safe-area-inset-bottom))}
.hero__offer{font:400 clamp(16px,4.3vw,22px)/1.3 var(--serif);letter-spacing:.03em;margin:0;text-wrap:balance}
/* the property fills the middle of every frame (phone and PC), so text goes above it and the buttons below it (msg 62/64) */
.hero__stage--b{top:calc(76px + env(safe-area-inset-top) + 8svh)}
.hero__stage--c{top:calc(76px + env(safe-area-inset-top) + 6svh);bottom:max(5svh,calc(env(safe-area-inset-bottom) + 20px));
  display:flex;flex-direction:column;justify-content:space-between}
@media (min-width:760px){
  .hero__stage--b{top:calc(70px + 1.5svh)}
  .hero__stage--c{top:calc(70px + 2svh);bottom:6svh}
}
.hero__wm{margin:0 auto;width:min(78vw,560px)}
.hero__tag{font:400 clamp(15px,3.9vw,21px)/1.3 var(--serif);letter-spacing:.07em;margin:16px 0 0;opacity:.95}
/* msg 64: the middle and final lines share one size (the final one felt too large) */
.hero__line{font:400 clamp(21px,5.5vw,40px)/1.2 var(--serif);margin:0;text-wrap:balance}
.hero__line em{color:#d9d9d6}
.hero__line--big{font-size:clamp(21px,5.5vw,40px)}
.hero__sub{font-size:clamp(13.5px,3.6vw,16px);margin:14px auto 22px;max-width:36em;color:rgba(255,255,255,.9);text-wrap:balance}
.hero__sub strong{white-space:nowrap}
.hero__sub strong{color:#fff;font-weight:800}
.hero__ctas{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto}
.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}   /* 6 Oct: it faded out but still sat over "Get the price list" + "Call Kuutio" and ate the clicks */
.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}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__clock{position:absolute;right:var(--gut);top:calc(76px + env(safe-area-inset-top));color:#fff;font:500 11px/1 var(--sans);letter-spacing:.22em;opacity:.8}
.hero__clock span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--glow);margin-right:8px;vertical-align:middle;box-shadow:0 0 10px var(--glow)}

/* ============ PROOF ============ */
/* msg 78: one compact row on phone and PC */
.proof{background:var(--pine);color:var(--trav);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-l)}
.proof__item{padding:16px 8px;text-align:center;border-right:1px solid var(--line-l)}
.proof__item:last-child{border-right:0}
.proof__item b{display:block;font:400 clamp(19px,5vw,30px)/1 var(--serif);color:#fff;margin-bottom:6px;white-space:nowrap}
.proof__item span{display:block;font-size:clamp(10px,2.7vw,12.5px);line-height:1.35;color:rgba(255,255,255,.72)}

/* ============ FILM ============ */
.film{background:var(--pine);padding:0 0 56px}
.film__frame{position:relative;max-width:var(--max);margin:0 auto;aspect-ratio:16/9;background:#000;overflow:hidden}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film__sound{position:absolute;right:14px;bottom:14px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;border-radius:40px;
  padding:9px 16px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.film.is-empty{display:none}

/* ============ LIFE ============ */
/* one dark screen (he found the four white blocks too long): a video stage + four time tabs */
.life{padding:64px 0 56px;background:var(--moss);color:var(--trav)}
.dayplay{margin-top:18px}
.dayplay__stage{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:#0d0e16}
.dayplay__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.dayplay__stage video.is-on{opacity:1}
.dayplay__tabs{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.dayplay__tabs button{width:100%;text-align:left;border:0;background:none;color:rgba(246,247,248,.55);padding:0;cursor:pointer;display:grid;gap:4px;font:inherit;transition:color .4s}
.dayplay__tabs button.is-on,.dayplay__tabs button:hover{color:var(--trav)}
.dayplay__tabs button:focus-visible{outline:1px solid var(--trav);outline-offset:4px}
.dayplay__time{font:600 10.5px/1 var(--sans);letter-spacing:.22em}
.dayplay__title{font:400 15px/1.25 var(--serif)}
.dayplay__bar{display:block;height:1px;background:rgba(246,247,248,.18);margin-top:4px}
.dayplay__bar b{display:block;height:100%;width:0;background:var(--trav)}
.dayplay__text{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(246,247,248,.72);max-width:44em;min-height:3.2em}
@media (min-width:760px){
  .dayplay__stage{aspect-ratio:21/9}
  .dayplay__tabs{grid-template-columns:repeat(4,1fr);gap:18px}
  .dayplay__title{font-size:17px}
}
.day{display:grid;gap:56px;margin-top:40px}
.moment{display:grid;gap:18px}
.moment__img{overflow:hidden;aspect-ratio:4/3;background:var(--trav-2)}
.moment__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.moment.is-in .moment__img img{transform:scale(1)}
.moment__txt{padding:0 var(--gut)}
.moment__time{font:900 11px/1 var(--sans);letter-spacing:.24em;color:var(--iroko)}
.moment h3{font:400 clamp(20px,5.4vw,30px)/1.22 var(--serif);margin:10px 0 8px}
.moment p{margin:0;color:var(--ink-2);max-width:30em}

/* ============ HOMES ============ */
.homes{padding:80px 0 60px;background:var(--trav-2)}
.avail{margin-top:10px}
.avail__bar{display:flex;height:6px;background:var(--a);border-radius:6px;overflow:hidden;max-width:560px}
.avail__bar i{display:block;height:100%;width:0;transition:width 1.4s var(--ease)}
.avail__bar .s{background:var(--s)} .avail__bar .r{background:var(--r)}
.avail__txt{font-size:13px;color:var(--ink-2);margin:12px 0 0}
.avail__txt b{font:400 20px var(--serif);color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 8px;vertical-align:middle}
.dot--a{background:var(--a)} .dot--r{background:var(--r)} .dot--s{background:var(--s)}
.cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px var(--gut) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 84%;scroll-snap-align:center;background:var(--trav);display:flex;flex-direction:column;box-shadow:0 20px 40px -30px rgba(19,20,30,.5);transform-style:preserve-3d}
.card__img{position:relative;aspect-ratio:5/4;overflow:hidden;display:block;width:100%;border:0;padding:0;margin:0;background:var(--trav-2);cursor:zoom-in;font:inherit;color:inherit}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card__img:hover img{transform:scale(1.03)}
.card__img:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.card__media{position:relative}
.card__media .card__badge{pointer-events:none}
.card__photos{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(246,247,248,.92);color:var(--pine);
  font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:8px 10px}
.card__photos svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
/* photo viewer */
.lb{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--moss);color:var(--trav);
  display:none;grid-template-rows:auto 1fr auto auto}
.lb[open]{display:grid}
.lb::backdrop{background:rgba(13,14,22,.9)}
.lb__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) var(--gut) 6px}
.lb__title{margin:0;font:400 clamp(17px,2vw,22px)/1.2 var(--serif)}
.lb__close{width:44px;height:44px;border:0;background:none;color:var(--trav);font:300 32px/1 var(--sans);cursor:pointer}
.lb__fig{position:relative;margin:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--gut);touch-action:pan-y;user-select:none}
.lb__fig img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;background:rgba(19,20,30,.55);color:var(--trav);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.lb__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.lb__nav--prev{left:calc(var(--gut) + 6px)} .lb__nav--next{right:calc(var(--gut) + 6px)}
.lb__nav:focus-visible,.lb__close:focus-visible{outline:2px solid var(--trav);outline-offset:2px}
.lb__cap{display:flex;justify-content:space-between;gap:16px;margin:0;padding:10px var(--gut) 6px;font-size:13px;color:rgba(246,247,248,.78)}
.lb__cap span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.lb__strip{display:flex;gap:6px;overflow-x:auto;padding:4px var(--gut) calc(12px + env(safe-area-inset-bottom));scrollbar-width:none}
.lb__strip button{flex:0 0 auto;width:84px;aspect-ratio:4/3;border:0;padding:0;background:none;cursor:pointer;opacity:.45;transition:opacity .3s}
.lb__strip button.is-on,.lb__strip button:hover{opacity:1}
.lb__strip button.is-on{outline:1px solid var(--trav);outline-offset:2px}
.lb__strip img{width:100%;height:100%;object-fit:cover;display:block}
/* the 3D model inside the library (first item) */
.lb__fig canvas{position:absolute;inset:0 var(--gut);width:calc(100% - 2 * var(--gut));height:100%;cursor:grab}
.lb__fig canvas:active{cursor:grabbing}
.lb__fig canvas[hidden]{display:none}
.lb.is-3d .lb__nav{z-index:2}
.lb__strip button{position:relative}
.lb__strip button.is-3d span{position:absolute;left:4px;top:4px;font:700 9px/1 var(--sans);letter-spacing:.12em;color:var(--trav);background:var(--pine);padding:4px 5px}
.card__badge{position:absolute;left:12px;top:12px;background:rgba(19,20,30,.78);color:var(--trav);font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;backdrop-filter:blur(6px)}
.card__badge--hot{background:var(--lamp);color:var(--on-lamp)}
.card__badge--out{background:rgba(167,167,167,.95);color:var(--pine)}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__type{font:900 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--iroko)}
.card h3{font:400 24px/1.2 var(--serif);margin:4px 0 2px}
.card__facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-2);margin:4px 0 8px}
.card__price{font:400 22px/1.2 var(--serif);margin-top:auto}
/* msg 76: phone cards are only as tall as their content (no gap above the price) now the plan box is gone */
@media (max-width:759px){
  .cards{align-items:flex-start}
  .card__price{margin-top:10px}
}
.card__price small{font:500 11px var(--sans);letter-spacing:.08em;color:var(--concrete)}
.card__plan{position:relative;margin:12px 0 14px;height:120px;background:#fff;overflow:hidden;border:1px solid var(--line)}
.card__plan img{width:100%;height:100%;object-fit:contain;filter:blur(3.5px) grayscale(1);opacity:.55;transform:scale(1.05)}
.card__plan span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--pine)}
.card__plan span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.card .btn{margin-top:4px}
/* msg 78: sold out reads at a glance (last in the row) */
.card--out{background:#e4e4e1}
.card--out .card__img img{filter:grayscale(1) brightness(.72)}
.card--out .card__body{opacity:.8}
.card__stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:12px 22px;border:1px solid rgba(255,255,255,.85);
  color:#fff;font:600 13px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;background:rgba(19,20,30,.45);backdrop-filter:blur(3px);white-space:nowrap}
.card__price--out{color:var(--ink-2)}
.card__textlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;color:var(--pine);cursor:pointer;
  font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:10px 0}
.card__textlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the row: See amenities + arrows (arrows on PC only; phones swipe) */
.homes__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.homes__tools{display:flex;align-items:center;gap:12px}
.rail-nav{display:none;gap:8px}
.rail-nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(26,27,40,.35);background:transparent;color:var(--pine);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,opacity .3s}
.rail-nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.rail-nav button:hover:not(:disabled){background:var(--pine);color:var(--trav)}
.rail-nav button:disabled{opacity:.3;cursor:default}
.rail-nav button:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
@media (min-width:760px){
  .rail-nav{display:flex}
  .cards{cursor:grab}
  .cards.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .cards.is-drag .card{pointer-events:none}
}

/* ============ PLAN (3D) ============ */
.plan{background:radial-gradient(120% 90% at 50% 30%,#2a2b38 0%,#13141e 70%);color:var(--trav);padding:80px 0 0;overflow:hidden}
/* the actual render as a still image with block tap points; the block panel sits below (phone) or beside it (desktop) */
.plan__stage{position:relative;margin-top:10px}
.plan__canvas{position:relative}
.plan__view{position:relative;width:100%;max-width:100%;aspect-ratio:5504/3072;overflow:hidden;background:var(--moss)}
.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}
/* block panel: one line per home type, a chip per home */
.pg{padding:10px 0;border-top:1px solid var(--line)}
.pg__head{display:flex;flex-direction:column;gap:2px;margin:0 0 8px!important}
.pg__head b{font:400 16px/1.25 var(--serif);color:var(--ink)}
.pg__head span{font-size:12.5px;color:var(--ink-2)}
.pg__chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-block;border:1px solid transparent;font:800 10.5px/1 var(--sans);letter-spacing:.06em;padding:6px 7px;min-width:36px;text-align:center;cursor:pointer;border-radius:2px}
.chip--a{background:#fff;color:var(--pine);border-color:rgba(26,27,40,.5)}
.chip--r{background:rgba(201,168,103,.2);color:#7d5f22;border-color:rgba(201,168,103,.45)}
.chip--s{background:rgba(167,167,167,.18);color:#8a8a88;border-color:transparent;text-decoration:line-through}
.chip.is-on{outline:2px solid var(--ink);outline-offset:1px}
.pg__detail{margin:8px 0 0!important;font-size:12.5px!important;line-height:1.5;color:var(--ink)!important;background:rgba(26,27,40,.06);padding:8px 10px}
.pg__detail .st{margin-left:4px}
.pg__legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px!important;margin:10px 0 12px!important}
.pg__legend .chip{min-width:0;width:12px;height:12px;padding:0;margin-left:6px;cursor:default}
.plan__fallback{display:none}
.plan__legend{display:none}
.plan__panel{position:relative;margin:14px var(--gut) 28px;z-index:3;background:rgba(246,247,248,.97);color:var(--ink);
  padding:16px 18px;border-radius:var(--radius);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);overflow:auto}
.plan__spot{position:absolute;left:0;top:0;pointer-events:auto;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;font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.plan__spot i{width:18px;height:18px;border-radius:50%;background:rgba(var(--acc-rgb),.9);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.28),0 0 18px rgba(var(--acc-rgb),.7);
  animation:spot 2.4s ease-in-out infinite;flex:0 0 auto}
.plan__spot span{display:flex;flex-direction:column;gap:3px;background:rgba(19,20,30,.72);padding:6px 9px;backdrop-filter:blur(4px)}
.plan__spot small{font:600 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:none;color:var(--acc-pale)}
.plan__spot--club i{background:rgba(246,247,248,.9);box-shadow:0 0 0 4px rgba(246,247,248,.25)}
.plan__spot.is-on i{background:var(--pine);box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(255,255,255,.35)}
.plan__spot:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes spot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (max-width:759px){
  .plan__spot{gap:4px;margin:-7px 0 0 -7px}
  .plan__spot i{width:13px;height:13px;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3)}
  .plan__spot span{padding:3px 5px;font-size:10px}
  .plan__spot small{display:none}
  .plan__spot--club span{display:none}
}
.plan__toggle{position:absolute;right:var(--gut);top:6px;z-index:3;display:flex;background:rgba(19,20,30,.7);backdrop-filter:blur(6px);padding:3px}
.plan__toggle button{border:0;background:none;color:rgba(246,247,248,.75);font:800 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.plan__toggle button.is-on{background:var(--trav);color:var(--pine)}
.plan__eyebrow{font:900 10px/1 var(--sans)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--iroko)!important;margin:0 0 8px!important}
.plan__price{font:400 24px/1.2 var(--serif)!important;color:var(--ink)!important;margin:4px 0 12px!important}
.plan__price small{font:600 11px var(--sans);color:var(--concrete)}
.plan__more{margin:16px 0 4px!important;font:800 10.5px/1.4 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase}
.plan__units li{cursor:pointer;grid-template-columns:44px 1fr auto}
.plan__units li.is-on{background:rgba(26,27,40,.06)}
.plan__close{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;background:none;font:300 26px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.plan__panel:has(.plan__hint){padding:12px 16px;background:rgba(246,247,248,.9)}
.plan__hint{margin:0;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--iroko);text-align:center}
.plan__panel h4{font:400 22px/1.2 var(--serif);margin:0 0 4px}
.plan__panel p{margin:0 0 10px;font-size:13px;color:var(--ink-2)}
.plan__units{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.plan__units li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;font-size:13px;padding:8px 0;border-top:1px solid var(--line)}
.plan__units li b{font-weight:600}
.plan__units .st{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:20px}
.st{font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;display:inline-block}
.st--a{background:rgba(26,27,40,.1);color:var(--pine)}
.st--r{background:rgba(201,168,103,.22);color:#7d5f22}
.st--s{background:rgba(167,167,167,.3);color:#5f5f5e}

/* ============ AMENITIES ============ */
.amen{padding:84px 0}
.amen__grid{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.amen__grid li{background:var(--trav);padding:22px 16px 20px;display:flex;flex-direction:column;gap:4px}
.amen__grid svg{width:34px;height:34px;fill:none;stroke:var(--iroko);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.amen__grid b{font:400 18px/1.2 var(--serif)}
.amen__grid span{font-size:12.5px;color:var(--ink-2)}

/* ============ MATERIALS ============ */
.mat{padding:20px 0 84px}
.mat__wrap{display:grid;gap:34px;margin-bottom:34px}
.mat{--deck-ink:#1a1b28;--deck-card:rgba(246,247,248,.95);--deck-muted:#7b8491;--deck-shade:26,27,40}
.specs{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.specs li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:14px;position:relative}
.specs li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:1px;background:var(--iroko)}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatch{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--trav-2)}
.swatch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.swatch:hover img{transform:scale(1.06)}
.swatch figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;color:#fff;font:500 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* ============ LOCATION ============ */
.loc{background:var(--pine);color:var(--trav);padding:84px 0}   /* the map keeps livemap.css's Kuutio navy, as on the other two */
.loc__wrap{display:grid;gap:44px}
.life+.plan{border-top:1px solid var(--line-l)}
/* map as two buttons (msg 54: the embedded Google map did not blend in) */
.loc__ctas{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.loc__ctas .btn{flex:1 1 220px}
.loc__ctas .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;flex:0 0 auto}
.radar{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;margin:0 auto}
.radar__rings{position:absolute;inset:0}
.radar__rings i{position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;inset:0}
.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,.22),transparent 25%);animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar__core{position:absolute;left:50%;top:50%;width:26%;transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 0 16px rgba(var(--acc-rgb),.5))}
.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:112px;opacity:0;transition:opacity .8s var(--ease),transform .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:var(--trav);margin:0 auto 6px;box-shadow:0 0 12px rgba(246,247,248,.7)}
.radar__list b{display:block;font:400 17px/1.1 var(--serif);color:var(--trav)}
.radar__list span{display:block;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.radar__list small{font-size:10px;color:rgba(255,255,255,.5)}

/* ============ DEV ============ */
.dev{padding:60px 0;border-bottom:1px solid var(--line)}
.dev__wrap{display:grid;gap:22px;align-items:center}
.dev__logo{width:180px;height:auto}
.dev p{color:var(--ink-2);margin:0;max-width:44em}

/* ============ FAQ ============ */
.faq{padding:84px 0}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:400 19px/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.4px solid var(--iroko);border-bottom:1.4px solid var(--iroko);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:40em}

/* ============ REGISTER ============ */
.reg{position:relative;background:var(--pine);color:var(--trav);padding:84px 0 60px;overflow:hidden}
.reg__bg{position:absolute;inset:0;opacity:.22}
.reg__bg img{width:100%;height:100%;object-fit:cover}
.reg__wrap{position:relative;display:grid;gap:34px}
.reg__ticks{list-style:none;padding:0;margin:0 0 10px}
.reg__ticks li{padding:6px 0 6px 28px;position:relative;font-size:14.5px;color:rgba(255,255,255,.85)}
.reg__ticks li::before{content:"";position:absolute;left:2px;top:12px;width:10px;height:6px;border-left:1.5px solid var(--trav);border-bottom:1.5px solid var(--trav);transform:rotate(-45deg)}
.form{background:var(--trav);color:var(--ink);padding:24px 20px;border-radius:var(--radius);display:grid;gap:16px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.field label,.chips legend{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.field input,.phone select{width:100%;height:52px;border:1px solid rgba(26,27,40,.22);background:#fff;border-radius:var(--radius);padding:0 14px;font:400 16px var(--sans);color:var(--ink)}
.field input:focus,.phone select:focus{outline:2px solid var(--lamp);outline-offset:1px;border-color:var(--iroko)}
.phone{display:grid;grid-template-columns:118px 1fr;gap:8px}
.field.is-bad input{border-color:#b4452f}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%;margin-bottom:10px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:11px 14px;border:1px solid rgba(26,27,40,.22);border-radius:40px;font-size:13px;cursor:pointer;background:#fff;transition:.25s}
.chips input:checked+span{background:var(--pine);border-color:var(--pine);color:var(--trav)}
.chips input:focus-visible+span{outline:2px solid var(--lamp)}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--pine)}
.form__err{color:#b4452f;font-size:13px;margin:0;min-height:1em}
.thanks{background:var(--trav);color:var(--ink);padding:30px 22px;border-radius:var(--radius)}
.thanks h3{font:400 30px/1.2 var(--serif);margin:0 0 10px}
.thanks p{color:var(--ink-2)}
.thanks__ctas{display:grid;gap:10px;margin-top:18px}
.thanks .btn--ghost-light{color:var(--pine);border-color:var(--line)}

/* ============ DOWNLOAD GATE ============ */
.card__plan{cursor:pointer;width:100%;padding:0;display:block;text-align:left}
.card__plan img{filter:blur(2.5px) grayscale(1);opacity:.5}
.card__plan span svg,.card__dls svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.card__dls{display:grid;gap:8px;margin-top:6px}
.card__dls .btn{letter-spacing:.1em;font-size:11px;padding:0 14px;white-space:nowrap}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink)}
.gate{border:0;padding:0;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--trav);color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.gate::backdrop{background:rgba(13,14,22,.62);backdrop-filter:blur(3px)}
.gate form,.gate #gateDone{display:grid;gap:14px;padding:28px 22px 24px}
.gate h3{font:400 26px/1.2 var(--serif);margin:0}
.gate__lead{margin:0;color:var(--ink-2);font-size:14px}
.gate__close{position:absolute;right:8px;top:6px;width:40px;height:40px;border:0;background:none;font:300 28px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.gate__links{display:grid;gap:10px}
.gate__more{font:800 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--iroko);text-decoration:none;margin-top:4px}

/* ============ FOOTER ============ */
.foot{background:var(--moss);color:rgba(246,247,248,.8);padding:50px 0 0;font-size:13.5px}
.foot__wrap{display:grid;gap:22px}
.wm--foot{width:130px;color:var(--trav)}
.foot__kuutio{height:34px;width:auto;margin-top:22px;opacity:.9}
.foot p{margin:0}
.foot a{text-decoration:none}

/* ============ FILM (full screen player, msg 66) ============ */
.hero__film{display:inline-flex;align-items:center;gap:12px;margin:0 auto 14px;border:0;background:none;color:#fff;cursor:pointer;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5);padding:4px}
.hero__play{width:40px;height:40px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;
  background:rgba(19,20,30,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .4s var(--ease),background .4s}
.hero__play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.hero__film:hover .hero__play{transform:scale(1.08);background:rgba(246,247,248,.2)}
.hero__film:focus-visible{outline:1px solid #fff;outline-offset:4px}
/* msg 72: a pop-up window over the page (softly rounded, page dimmed and blurred behind), not a separate black screen */
.filmbox{border:0;padding:52px 0 0;margin:auto;width:min(1120px,calc(100vw - 32px),calc((100dvh - 120px) * 16 / 9));max-width:none;height:fit-content;max-height:none;
  background:transparent;overflow:visible;display:none}
.filmbox[open]{display:block;animation:filmIn .55s var(--ease) both}
.filmbox.is-closing{animation:filmOut .3s ease-in both}
.filmbox::backdrop{background:rgba(13,14,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.filmbox video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.75)}
.filmbox__bar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;color:var(--trav)}
.filmbox__title{margin:0;font:400 17px/1.2 var(--serif);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.filmbox__title small{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-left:10px}
.filmbox__close{width:40px;height:40px;border:0;border-radius:50%;background:rgba(246,247,248,.92);color:var(--pine);font:300 26px/1 var(--sans);cursor:pointer;
  display:grid;place-items:center;transition:transform .3s var(--ease)}
.filmbox__close:hover{transform:scale(1.06)}
.filmbox__close:focus-visible{outline:2px solid var(--trav);outline-offset:3px}
@keyframes filmIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes filmOut{to{opacity:0;transform:translateY(14px) scale(.98)}}

/* ============ COOKIES (msg 66) ============ */
.cookies{position:fixed;z-index:80;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:400px;background:var(--trav);color:var(--ink);
  padding:18px 18px 16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);transform:translateY(130%);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.cookies.is-on{transform:none;opacity:1}
.cookies__title{margin:0 0 6px;font:400 18px/1.2 var(--serif);color:var(--pine)}
.cookies__text{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.cookies__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookies__yes{background:var(--pine);color:var(--trav)}
.cookies__no{background:transparent;color:var(--pine);border-color:var(--pine)}
@media (min-width:760px){.cookies{left:24px;right:auto;bottom:24px}}

/* ============ DOCK ============ */
.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(19,20,30,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .5s var(--ease)}
.dock.is-on{transform:none}
.dock__btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:66px;color:var(--trav);text-decoration:none;
  font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.dock__btn svg{width:20px;height:20px;fill:none;stroke:var(--trav);stroke-width:1.6;stroke-linejoin:round}
.dock__main{flex:1;display:flex;align-items:center;justify-content:center;background:var(--trav);color:var(--pine);border-radius:var(--radius);min-height:50px;
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
/* the WhatsApp button, always on screen (27 Oct, same as Baia): WhatsApp green so it is read at a glance; a circle on
   phone (beside 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}}

/* ============ REVEAL + 3D TILT ============ */
.reveal{opacity:0;transform:translate3d(0,22px,0);filter:blur(4px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.reveal.is-in{opacity:1;transform:none;filter:none}
.tilt{transform-style:preserve-3d;will-change:transform}

/* ============ WIDER SCREENS ============ */
@media (min-width:760px){
  :root{--gut:40px}
  .nav__by{display:inline-flex}
  .proof__item{padding:22px 16px}
  .hero__ctas{flex-direction:row;max-width:none;justify-content:center}
  .moment{grid-template-columns:1.25fr 1fr;align-items:center;gap:56px;padding:0 var(--gut);max-width:var(--max);margin:0 auto}
  .moment--flip .moment__img{order:2}
  .moment__txt{padding:0}
  .cards{padding-left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));padding-right:var(--gut)}
  .card{flex-basis:360px}
  .amen__grid{grid-template-columns:repeat(4,1fr)}
  /* 31 Oct: the swatch deck runs full width under the intro, so the intro puts its spec list in a second column */
  .mat__intro{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
  .mat__intro .specs{grid-column:2;grid-row:1/span 3}
  .loc__wrap{grid-template-columns:1fr 1.1fr;align-items:center}
  .dev__wrap{grid-template-columns:240px 1fr}
  .reg__wrap{grid-template-columns:1fr 1fr;align-items:start}
  .form{padding:34px 32px}
  .foot__wrap{grid-template-columns:repeat(3,1fr)}
}
/* 13 Oct iPad: portrait tablets (760-1099) keep the stacked masterplan (full-width map, panel below) and the bottom
   Call / Get prices bar; side-by-side plan + no dock only from 1100, where the menu links appear */
@media (min-width:1100px){
  .nav__links{display:flex}
  .plan__stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:20px;padding:0 var(--gut) 60px;max-width:1500px;margin:10px auto 0}
  .plan__panel{margin:0;overflow:auto}
  .dock{display:none}
  .fine--light{padding-bottom:40px}
}
@media (min-width:760px) and (max-width:1099px){
  .plan__panel{max-width:640px;margin:18px auto 40px}
  .dock{padding-left:var(--gut);padding-right:84px}
}
/* 27 Oct: the reveals run for everyone (his PC reports reduced motion and lost the effects) */
@media (prefers-reduced-motion:reduce){
  .hero__cue i,.radar__rings i:first-child::after{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)}