@charset "utf-8";
/* ==========================================================================
   Astra2, The Lakeside — static site
   Built from "02 ASTRA2_Web Design FA" (4 artboards, exported 6000px wide).

   SCALE MODEL
   The artboards are 6000px wide. Every size in this file is derived from a
   measured value on those exports, divided by 60. Because the root font-size
   is 1vw (capped at 16px, the same width the page caps at), 1rem == 1% of the
   page width, so `5.64rem` is literally "338px on the 6000px artboard".
   That means the whole composition scales in proportion, exactly like the
   design, and freezes together above 1600px.
   Type stops shrinking below 960px; the mobile layout takes over at 780px.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Grenda;src:url(../fonts/grenda.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GT Super Display';src:url(../fonts/gtsuper-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'GT Super Display';src:url(../fonts/gtsuper-bolditalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url(../fonts/helveticaneue-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url(../fonts/helveticaneue-medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url(../fonts/helveticaneue-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT';src:url(../fonts/helveticaneue-thin.woff2) format('woff2');font-weight:200;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --teal:#04807D;          /* headings over white / photography */
  --teal-2:#38807C;        /* headings & labels over cream      */
  --green-dark:#005340;    /* nav active                        */
  --ink:#052321;
  --ink-2:#414142;
  --grey:#59595B;
  --cream:#FEF4E5;
  --cream-warm:#F4E0A7;
  --t-c1:#E4CE68;
  --t-d:#51AEAD;
  --t-e:#B5C374;
  --t-f:#38807C;

  --page-max:1600px;

  --frame-x:8.27rem;       /* keyline inset  (src 496)  */
  --frame-r:8.47rem;       /* corner radius  (src 508)  */
  --key:rgba(255,255,255,.46);
  --key-w:.28rem;          /* src 17                    */

  --pad-x:12rem;           /* content inset  (src 720)  */
  --card-x:10rem;          /* floor-plan card inset     */

  --nav-top:3.9rem;        /* frame top      (src 234)  */
  --nav-h:11.25rem;        /* src 675                   */
  --nav-pad:7.78rem;       /* logo inset  (src 467)     */
  --nav-pad-r:6.53rem;     /* pill inset  (src 392)     */

  --serif:Grenda,'GT Super Display',Georgia,serif;
  --sans:'Helvetica Neue LT','Helvetica Neue',Helvetica,Arial,sans-serif;
}

html{font-size:clamp(9.6px,1vw,16px);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{scroll-padding-top:calc(var(--nav-top) + var(--nav-h) + 2rem)}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#EFE7DA;color:var(--ink);
  font-family:var(--sans);font-size:max(13px,1rem);line-height:1.21;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.page{max-width:var(--page-max);margin-inline:auto;position:relative;background:#fff;overflow:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:.25rem solid var(--teal);outline-offset:.3rem}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--teal);padding:1rem 1.6rem}
.skip:focus{left:1rem;top:1rem}
.wrap{padding-inline:var(--pad-x)}

/* ==========================================================================
   Decorative frame
   The design draws a thin, half-opacity white keyline with a big rounded top,
   inset from the page edges. It is baked into the artboard artwork; those
   baked lines were painted out of every extracted image, so this rule is the
   only copy of it. Do NOT add a second frame per-section.
   ========================================================================== */
main{position:relative}
.frame{
  position:absolute;inset:var(--nav-top) var(--frame-x) 0;
  border:var(--key-w) solid var(--key);border-bottom:0;
  border-radius:var(--frame-r) var(--frame-r) 0 0;
  pointer-events:none;z-index:4;
}

/* ==========================================================================
   Header / nav — transparent over the intro hero, teal once scrolled
   (artboards 02-04 show the scrolled state)
   ========================================================================== */
.navwrap{position:fixed;top:var(--nav-top);left:0;right:0;z-index:20;display:flex;justify-content:center;pointer-events:none}
.nav{position:relative;width:min(100%,var(--page-max));height:var(--nav-h);pointer-events:none}
.nav__inner{
  position:absolute;left:var(--frame-x);right:var(--frame-x);top:0;bottom:0;
  pointer-events:auto;display:flex;align-items:center;gap:2rem;
  padding-left:var(--nav-pad);padding-right:var(--nav-pad-r);
  border-radius:var(--frame-r) var(--frame-r) 0 0;
  background:transparent;transition:background-color .35s ease;
}
.nav.is-solid .nav__inner{background:var(--teal)}
.nav__logo{flex:0 0 auto;display:block;position:relative;line-height:0}
.nav__logo img{height:4.4rem;width:auto}
.nav__logo-white{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s ease}
.nav.is-solid .nav__logo-colour{opacity:0}
.nav.is-solid .nav__logo-white{opacity:1}

.nav__menu{margin-left:auto;display:flex;align-items:center;gap:1.32rem;flex-wrap:nowrap}
.nav__menu ul{display:flex;align-items:center;gap:2.75rem}
.nav__menu a{
  font-family:var(--serif);font-size:max(11px,1.15rem);letter-spacing:.045em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  position:relative;padding-bottom:.85rem;display:block;
}
.nav.is-solid .nav__menu a{color:#fff}
.nav__menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:.22rem;
  background:linear-gradient(90deg,#E0C56A,#8FD3B8);
  opacity:0;transition:opacity .25s ease;
}
.nav__menu a.is-current{font-family:'GT Super Display',var(--serif);font-weight:700;color:var(--green-dark)}
.nav.is-solid .nav__menu a.is-current{color:#fff}
.nav__menu a.is-current::after{opacity:1}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:12.7rem;height:3.62rem;padding:0 1.6rem;border-radius:999px;
  background:linear-gradient(100deg,#9BD4C4,#55A9BC);
  color:#fff;font-family:var(--serif);font-size:max(11px,1.15rem);letter-spacing:.045em;
  text-transform:uppercase;white-space:nowrap;
  transition:filter .25s ease,transform .25s ease;
}
.pill:hover{filter:brightness(1.07);transform:translateY(-1px)}
.pill--solid{background:var(--teal-2);min-width:14rem;height:4rem;font-size:max(12px,1.3rem)}

.nav__burger{display:none;width:4.4rem;height:4.4rem;margin-left:auto;position:relative}
.nav__burger span{position:absolute;left:.7rem;right:.7rem;height:.24rem;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.nav__burger span:nth-child(1){top:1.3rem}
.nav__burger span:nth-child(2){top:2.1rem}
.nav__burger span:nth-child(3){top:2.9rem}
.nav.is-solid .nav__burger span{background:#fff}

/* ==========================================================================
   Display type
   ========================================================================== */
.display{font-family:var(--serif);font-weight:400;line-height:.94;letter-spacing:.004em}
.display span{display:block}
.display--teal{color:var(--teal)}
.display--teal2{color:var(--teal-2)}
.display--white{color:#fff}

/* ==========================================================================
   Heroes
   ========================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__content{position:relative;z-index:2;padding-inline:var(--pad-x)}

/* 01 · Refreshingly Puchong */
.hero--intro{aspect-ratio:6000/4884;display:flex;align-items:center;justify-content:center;background:#dfe6ea}
.hero--intro .hero__bg{object-position:center 44%}
.hero--intro .hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;
  background:linear-gradient(to bottom,rgba(255,250,243,0) 0%,rgba(255,250,243,.5) 52%,#FFFAF3 100%);
}
/* The artboard hangs this headline left of centre, to sit clear of the towers.
   Squared up on request 30 Sep: padding is now symmetric, so it centres on the
   page. Vertical placement is unchanged - it stays low, over the water. */
.hero--intro .hero__content{width:100%;text-align:center;margin-top:23rem;padding-right:var(--pad-x)}
.display--hero{text-shadow:0 .2rem 3rem rgba(0,0,0,.2)}
.display--hero .display__l1{font-size:6rem;color:#fff}
.display--hero .display__l2{font-size:4.64rem;color:#fff;margin-top:-.21rem}

/* 03 · Best of Lakeside Living */
.hero--lakeside{aspect-ratio:6000/3870;display:flex;align-items:flex-start;background:#cfe2e6}
.hero--lakeside .hero__bg{object-position:center center}
.hero--lakeside .hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;
  background:linear-gradient(to bottom,rgba(239,232,218,0) 0%,rgba(239,232,218,.55) 55%,#EFE8DA 100%);
}
.hero--lakeside .hero__content{padding-top:17.5rem}
.hero--lakeside .display .l1{font-size:2.8rem}
.hero--lakeside .display .l2{font-size:2.8rem;padding-left:2.18rem}
.hero--lakeside p{margin-top:2.4rem;font-size:max(13px,1rem);line-height:1.21;color:var(--ink)}

/* 04 · Practical, Versatile Spaces */
.hero--floorplans{aspect-ratio:6000/2708;display:flex;align-items:flex-start;background:#8b7f72}
.hero--floorplans .hero__bg{object-position:center 42%}
.hero--floorplans .hero__content{padding-top:3.2rem}
.fp__head{text-shadow:0 .2rem 2.4rem rgba(0,0,0,.28)}
.fp__head .l1,.fp__head .l2,.fp__head .l3{font-size:2.8rem}
.fp__head .l2{padding-left:3.46rem}
.fp__head .l3{padding-left:8.14rem}

/* ==========================================================================
   01 · Story
   ========================================================================== */
.story{
  position:relative;
  background:linear-gradient(to bottom,
    #FFFAF3 0%,#FEF9F2 20%,#F5ECD8 50%,#F3E5C2 66%,#F3E0B0 82%,var(--cream-warm) 100%);
  padding:3.4rem 0 7.2rem;
}
.story__inner{padding-inline:var(--pad-x)}
.story__text{max-width:54rem}
.story .display{font-size:2.8rem;margin-bottom:1.79rem}
.story p{font-size:max(13px,1rem);line-height:1.21;color:var(--ink)}
.story p+p{margin-top:1.5rem}
.story__text{position:relative;z-index:3}
.story__bird{position:absolute;right:-8rem;top:3.2rem;width:80.4rem;max-width:none;height:auto;z-index:2}

/* ==========================================================================
   Full-bleed photo strips
   ========================================================================== */
.bleed{position:relative;z-index:5;line-height:0}
.bleed img{width:100%;height:auto}

.pair{position:relative;z-index:5;display:grid;grid-template-columns:2990fr 65fr 2945fr;line-height:0}
.pair figure:first-child{grid-column:1}
.pair figure:last-child{grid-column:3}
.pair img{width:100%;height:auto;aspect-ratio:2990/1650;object-fit:cover}
.pair figure:last-child img{aspect-ratio:2945/1650}

/* ==========================================================================
   Cream sections + leaf shadows
   ========================================================================== */
.section{position:relative;background:var(--cream)}
.leaf{position:absolute;pointer-events:none;z-index:0;height:auto}
.leaf--tr{top:-4rem;right:-14rem;width:58rem;transform:rotate(12deg)}
.leaf--bl{top:-8rem;left:-14rem;width:52rem;transform:rotate(-10deg)}
.leaf--why{top:2rem;left:-16rem;width:62rem;transform:rotate(-12deg)}
.leaf--hydro{top:4rem;right:-12rem;width:50rem;transform:rotate(10deg)}
.section .wrap{position:relative;z-index:1}

/* ==========================================================================
   02 · Location
   ========================================================================== */
.location{padding-top:4.45rem;padding-bottom:0}
.location__head .l1{font-size:2.8rem}
.location__head .l2{font-size:2.2rem;padding-left:3.46rem}
.location .lead{margin-top:1rem;font-size:max(13px,1.02rem);line-height:1.32;color:var(--ink)}

.location__cols{
  margin-top:10.3rem;display:grid;
  grid-template-columns:22.6rem minmax(0,1fr);gap:0 3rem;align-items:center;
}
.amenities{display:grid;gap:1.8rem;margin-left:-.5rem}
.amenity h3{
  display:flex;align-items:center;gap:1rem;white-space:nowrap;
  font-family:var(--serif);font-weight:400;font-size:max(13px,1.56rem);letter-spacing:.02em;
  color:var(--teal-2);margin-bottom:1.47rem;
}
.amenity h3 img{width:auto;flex:0 0 auto}
.amenity:nth-of-type(1) h3 img{height:3.68rem}
.amenity:nth-of-type(2) h3 img{height:2.97rem}
.amenity:nth-of-type(3) h3 img{height:3.47rem}
.amenity:nth-of-type(4) h3 img{height:3.73rem}
.amenity li{position:relative;padding-left:1.1rem;font-size:max(12px,1.19rem);line-height:1.39;color:var(--ink-2)}
.amenity li::before{content:"•";position:absolute;left:0;top:-.02em}
.location__map{width:52.12rem;justify-self:end;margin-right:-1.7rem}
.location__map img{width:100%;height:auto}

/* ==========================================================================
   02 · Transit + developer portfolio
   ========================================================================== */
.transit{padding-bottom:2.7rem}
.transit__inner{position:relative;z-index:1}
.transit__fig{padding:5.3rem 7.78rem 0 8.15rem}
.transit__fig img{width:100%}
.portfolio__label{margin:4.9rem 0 3.4rem;text-align:center;font-family:var(--sans);font-weight:700;font-size:max(11px,.75rem);color:var(--teal-2)}
.portfolio{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 3.7rem;padding-inline:10.57rem}
.portfolio li{
  background:#fff;border-radius:1.3rem;aspect-ratio:483/353;overflow:hidden;
  box-shadow:0 .7rem 2rem rgba(80,60,20,.07);
}
.portfolio img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   03 · Why Astra2
   ========================================================================== */
.why{padding:8.7rem 0 10.2rem}
.why__rule{position:absolute;left:24.4rem;right:1.25rem;top:10.3rem;height:.2rem;background:var(--teal-2);opacity:.55;z-index:1}
.why__grid{position:relative;display:grid;grid-template-columns:37rem minmax(0,1fr)}
.why__head{font-size:2.8rem}
.why__head .l2{padding-left:2.26rem}
.why p{padding-top:8.05rem;font-size:max(13px,.97rem);line-height:1.21}

/* ==========================================================================
   03 · A.S.T.R.A panel
   ========================================================================== */
.astra{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:6000/3176;background:#7b6a68}
.astra__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-2}
.astra__fade{position:absolute;left:0;right:0;bottom:0;height:20%;z-index:1;background:linear-gradient(to bottom,rgba(254,244,229,0),var(--cream))}
.astra__list{position:relative;z-index:2;display:grid;gap:3.35rem;padding:18.8rem 0 0 16.5rem}
.astra__list li{
  position:relative;display:flex;align-items:baseline;
  font-family:'GT Super Display',var(--serif);font-weight:700;
  font-size:max(13px,1.1rem);line-height:1;color:#fff;letter-spacing:.01em;
  text-shadow:0 .1rem 1.4rem rgba(0,0,0,.28);
}
.astra__list b{font-weight:700;font-size:2.35em;line-height:.62;margin-right:.04em}
.astra__list sup{font-size:.66em;position:relative;top:1.5em;left:-3.6em;vertical-align:baseline}
.astra__cap{position:absolute;left:-1.35rem;bottom:-1.64rem;width:3.86rem;height:3.86rem;pointer-events:none}
.astra__cap svg{width:100%;height:100%;overflow:visible}
.astra__cap circle{
  fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.3;
  stroke-dasharray:248 289;transform:rotate(30deg);transform-origin:50% 50%;
}
.astra__note{position:absolute;right:13.1rem;bottom:9%;z-index:2;font-size:max(10px,.75rem);color:rgba(255,255,255,.92)}

/* ==========================================================================
   03 · Hydroponics
   ========================================================================== */
.hydro{padding:7.8rem 0 6.75rem}
.hydro__grid{position:relative}
.hydro__head{font-size:2.8rem}
.hydro__head span:nth-child(2){padding-left:4.46rem}
.hydro p{position:absolute;left:53.3rem;top:1.33rem;width:23.5rem;font-size:max(13px,1rem);line-height:1.28}
.hydro__plan{margin:4.6rem 0 0 1.75rem;width:73.6rem;max-width:100%}
.hydro__plan img{width:100%}
.zones{margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 3rem;padding-left:4.7rem}
/* Site-plan key, revised 18 Sep to the supplied artwork: coloured heading
   chips and numbered badges that match the markers on the plan above. The
   five colours are sampled from that file. */
.zone__chip{
  display:inline-block;padding:.32rem .68rem;border-radius:.26rem;
  font-family:var(--sans);font-weight:700;font-size:max(12px,1.2rem);
  line-height:1.2;color:var(--cream);margin-bottom:.9rem;
}
.zone h3~h3{margin-top:1.15rem}
.zone--oasis     .zone__chip{background:#53AE9D}
.zone--starlight .zone__chip{background:#436DAD}
.zone--fairyland .zone__chip{background:#91318A}
.zone--tower     .zone__chip{background:#DBDBDB;color:#41867E}
.zone__chip--level{background:#92BBDB}

.zone__list li{
  display:flex;align-items:flex-start;gap:.62rem;
  font-size:max(12px,1.2rem);line-height:1.5;color:var(--ink);
}
.zone__no{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:1.24rem;height:1.24rem;border-radius:999px;margin-top:.24rem;
  font-family:var(--sans);font-weight:500;font-size:max(8px,.66rem);
  line-height:1;color:var(--cream);
}
.zone--oasis     .zone__no{background:#53AE9D}
.zone--starlight .zone__no{background:#436DAD}
.zone--fairyland .zone__no{background:#91318A}
.zone--tower     .zone__no{background:#DBDBDB;color:#2B8072}
.zone__list--plain li{display:block;padding-left:0;line-height:1.28}

/* ==========================================================================
   04 · 3D viewer + type tabs
   ========================================================================== */
.viewer{padding:0 0 3.4rem;background:var(--cream)}
.viewer__box{background:#000;overflow:hidden}
.viewer__box img{width:100%}
.typetabs{margin-top:2.8rem;display:flex;justify-content:center;gap:2.7rem;flex-wrap:wrap}
.typetab{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:12.75rem;height:3.67rem;padding:0 1.4rem;border-radius:.9rem;
  color:#fff;font-family:var(--sans);font-weight:500;font-size:1.93rem;
  letter-spacing:.01em;text-transform:uppercase;
  transition:filter .2s ease,transform .2s ease;
}
.typetab:hover{filter:brightness(1.06);transform:translateY(-1px)}
.typetab--c1{background:var(--t-c1)}
.typetab--d{background:var(--t-d)}
.typetab--e{background:var(--t-e)}
.typetab--f{background:var(--t-f)}

/* ==========================================================================
   04 · Key plan row
   ========================================================================== */
.keyrow{display:grid;grid-template-columns:3455fr 2545fr;background:var(--cream);line-height:0}
.keyrow__photo img{width:100%;height:100%;aspect-ratio:3455/1840;object-fit:cover}
.keyrow__plan{display:flex;align-items:center;justify-content:flex-start;padding-left:3.95rem;padding-right:2rem}
.keyrow__plan img{width:30.28rem;max-width:100%}

/* ==========================================================================
   04 · Type cards
   ========================================================================== */
.cards{
  background:linear-gradient(to bottom,
    #F9EAC4 0%,#F4DEA3 23.4%,#D8E1C4 47.2%,#CCE3D2 56%,#CBE3D2 100%);
}
.card{display:grid;grid-template-columns:41.2% 58.8%;align-items:stretch}
.card--textright .card__photo{grid-column:1;grid-row:1}
.card--textright .card__text{grid-column:2;grid-row:1}
.card__photo{position:relative;overflow:hidden;line-height:0}
.card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__text{padding:4.4rem 2rem 4.5rem var(--card-x)}
.card--textright .card__text{padding-left:6.3rem}

.card__pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:1.7rem;padding:0 1.4rem;border-radius:.5rem;
  background:var(--teal-2);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:max(10px,.84rem);letter-spacing:.05em;
  text-transform:uppercase;
}
.card__area{margin-top:.7rem;font-family:var(--sans);font-weight:700;font-size:max(13px,1.21rem);color:var(--teal-2)}
.card__specs{margin-top:.45rem;display:flex;gap:1.35rem;flex-wrap:wrap}
.card__specs--stack{flex-direction:column;gap:1.7rem}
.card__specs li{display:flex;align-items:center;gap:1.1rem;font-size:max(11px,1.09rem);color:var(--ink-2);white-space:nowrap}
.card__specs li:nth-child(1) img{width:2.28rem;height:auto}
.card__specs li:nth-child(2) img{width:1.92rem;height:auto}
.card__plan{margin-top:3rem}
.card__plan img{width:100%;height:auto}

/* text beside a tall plan (Types D and F) */
.card__text--side{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:0 1rem;align-items:start}
#type-d .card__text--side{grid-template-columns:35.8% 64.2%}
#type-f .card__text--side{grid-template-columns:43.7% 56.3%}
.card__text--side .card__plan{margin-top:.4rem}

/* plan widths, matched to each diagram's size on the artboard */
#type-c1 .card__plan{width:26.42rem}
#type-e  .card__plan{width:22.13rem}
#type-d  .card__plan{width:20.53rem;margin-top:2.2rem}
#type-f  .card__plan{width:18.82rem;margin-top:2.2rem}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--cream);padding:2.7rem 0 4.6rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);gap:0 4rem;align-items:start;padding-inline:10.57rem;position:relative;z-index:1}
.foot__name{font-weight:700;font-size:.72rem;color:var(--ink)}
.foot__addr{margin-top:.7rem;font-size:.72rem;color:var(--ink)}
.foot__follow{margin-top:1.5rem;display:flex;align-items:center;gap:1rem;font-size:max(10px,.75rem);color:var(--ink)}
.foot__follow a{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;background:var(--teal-2)}
.foot__follow svg{width:1.5rem;height:1.5rem;fill:#fff}
.foot__copy{text-align:right;font-size:max(10px,.75rem);color:var(--ink);margin-bottom:1.2rem}
.foot__legal{font-size:.72rem;line-height:1.42;color:var(--ink)}
.foot__tiny{margin-top:1.9rem;text-align:right;font-size:.52rem;color:var(--ink)}
/* APDL / disclaimer: the licence block is now behind this link rather than
   set as a wall of 11px type in the footer. */
.foot__apdl{
  font:inherit;color:var(--teal-2);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:.22em;cursor:pointer;
}
.foot__apdl:hover{color:var(--teal)}

/* ==========================================================================
   Register modal (not in the artboards — the design's REGISTER NOW button
   needs somewhere to go; styled from the same palette)
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:2rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(5,35,33,.55);backdrop-filter:blur(2px)}
.modal__panel{
  position:relative;z-index:1;width:min(56rem,100%);max-height:92svh;overflow:auto;
  background:var(--cream);border-radius:2.4rem;padding:4rem 4rem 3.4rem;
  box-shadow:0 3rem 8rem rgba(5,35,33,.35);
}
.modal__x{position:absolute;top:1rem;right:1.8rem;font-size:2.28rem;line-height:1;color:var(--teal-2)}
.modal__panel .display{font-size:1.51rem}
.modal__intro{margin-top:1.4rem;font-size:max(12px,.96rem);line-height:1.35}
.modal__panel--legal{width:min(70rem,100%);padding:4.4rem 4rem 3.6rem}
.legal__body{font-size:max(13px,1rem);line-height:1.6;color:var(--ink)}
.rform{margin-top:2.2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.rform label{display:grid;gap:.5rem;font-size:max(11px,.78rem);font-weight:500;color:var(--ink)}
.rform__full,.rform__check,.rform button,.rform__status{grid-column:1/-1}
.rform input,.rform select,.rform textarea{
  font:inherit;font-size:max(12px,.89rem);padding:.85rem 1rem;
  border:.12rem solid rgba(56,128,124,.4);border-radius:.7rem;background:#fff;color:var(--ink);width:100%;
}
.rform textarea{resize:vertical}
.rform .rform__check{display:flex;align-items:flex-start;gap:.8rem;font-weight:400;font-size:max(11px,.75rem)}
.rform .rform__check input{width:auto;flex:0 0 auto;margin-top:.35rem}
.rform button{justify-self:start}
.rform__status{font-size:max(11px,.82rem);color:var(--teal-2);min-height:1.4em}
body.is-locked{overflow:hidden}

/* ==========================================================================
   Floating WhatsApp button
   Sized in px, not rem: it is fixed to the viewport, so it should stay a
   constant, thumb-sized target rather than scale with the page composition.
   Sits above the page (z 50) but below the register modal (z 60), and hides
   while that modal is open.
   ========================================================================== */
.wa{
  position:fixed;z-index:50;
  right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:80px;height:80px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;box-shadow:0 6px 18px rgba(5,35,33,.28);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.wa svg{width:48px;height:48px;fill:#fff}
.wa:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.05);box-shadow:0 10px 24px rgba(5,35,33,.34)}
body.is-locked .wa{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Below 960px the root font-size hits its clamp floor, so every rem in the nav
   freezes while the viewport keeps narrowing — the menu would push past its own
   padding box between roughly 780 and 960px, just above the burger breakpoint.
   Tighten the nav's insets and gaps through that whole band. (This is measured
   by the nav-spill check in wverify.py — the overflow sweep alone misses it,
   because .navwrap is position:fixed.) */
@media (max-width:1000px){
  :root{--nav-pad:2.4rem;--nav-pad-r:2.4rem}
  .nav__menu{gap:1rem}
  .nav__menu ul{gap:1.2rem}
  .pill{min-width:9rem;padding:0 1rem}
}
@media (max-width:840px){
  .nav__menu ul{gap:.85rem}
  .pill{min-width:8rem;padding:0 .9rem}
}

@media (max-width:900px){
  :root{--pad-x:9rem;--card-x:8rem}
  .why__rule{display:none}
  .why__grid{grid-template-columns:1fr}
  .why p{padding-top:0;margin-top:2.4rem}
  .hydro p{position:static;left:auto;top:auto;width:auto;margin-top:2rem}
  .location__cols{grid-template-columns:minmax(0,1fr);gap:5rem}
  .location__map{width:100%;margin-right:0;justify-self:stretch}
  .amenity h3{white-space:normal}
  .amenities{grid-template-columns:1fr 1fr;gap:3.4rem 3rem}
  .portfolio{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem;padding-inline:9rem}
  .foot__grid{grid-template-columns:1fr;gap:2.4rem;padding-inline:9rem}
  .foot__copy,.foot__tiny{text-align:left}
  .transit__fig{padding-inline:5rem}
  .astra__list{padding-left:12rem}
}

@media (max-width:780px){
  :root{
    --frame-x:4.5rem;--pad-x:7rem;--card-x:7rem;
    --frame-r:5rem;--nav-top:2rem;--nav-h:8.4rem;--nav-pad:2.4rem;--nav-pad-r:2.4rem;
  }
  html{font-size:clamp(10px,2.7vw,13px)}
  body{font-size:1.55rem;line-height:1.3}

  /* type: the 72px/21px spec is for the desktop composition; the phone
     layout keeps its own hand-tuned sizes */
  .story p,.hero--lakeside p,.hydro p,.why p{font-size:1.45rem;line-height:1.36}
  .location .lead{font-size:1.5rem;line-height:1.36}
  .amenity h3{font-size:1.6rem;gap:1rem;margin-bottom:1.3rem}
  .amenity:nth-of-type(1) h3 img{height:3.6rem}
  .amenity:nth-of-type(2) h3 img{height:2.9rem}
  .amenity:nth-of-type(3) h3 img{height:3.4rem}
  .amenity:nth-of-type(4) h3 img{height:3.65rem}
  .pill{min-width:16rem;height:4.2rem;padding:0 2rem;font-size:1.5rem}
  .pill--solid{min-width:18rem;height:4.4rem;font-size:1.6rem}
  .modal__intro{font-size:1.45rem}
  .rform .rform__check{font-size:1.3rem}
  .rform__status{font-size:1.35rem}
  .foot__follow{font-size:1.15rem}

  .nav__logo img{height:5rem}
  .nav__burger{display:block}
  .nav__menu{
    position:absolute;top:calc(100% - .1rem);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--teal);border-radius:0 0 2rem 2rem;padding:1rem 2.4rem 2.4rem;
    transform-origin:top;transform:scaleY(0);opacity:0;
    transition:transform .28s ease,opacity .28s ease;
  }
  .nav.is-open .nav__menu{transform:scaleY(1);opacity:1}
  .nav__menu ul{flex-direction:column;align-items:stretch;gap:0}
  .nav__menu a{color:#fff;font-size:1.7rem;padding:1.15rem 0}
  /* the dropdown's ground is teal even before the nav goes solid, so the
     active item must not fall back to --green-dark here */
  .nav__menu a.is-current{color:#fff}
  .nav__menu a::after{display:none}
  .nav.is-open .nav__burger span:nth-child(1){transform:translateY(.8rem) rotate(45deg)}
  .nav.is-open .nav__burger span:nth-child(2){opacity:0}
  .nav.is-open .nav__burger span:nth-child(3){transform:translateY(-.8rem) rotate(-45deg)}
  .nav__menu .pill{margin-top:1.2rem;align-self:flex-start;height:4.2rem;font-size:1.5rem}

  .hero--intro{aspect-ratio:6000/6600}
  .hero--intro .hero__content{margin-top:6rem;padding-right:var(--pad-x)}
  .display--hero .display__l1{font-size:4.9rem}
  .display--hero .display__l2{font-size:3.8rem;margin-top:0}

  .story{padding-bottom:4rem}
  .story .display{font-size:3.5rem}
  .story p br{display:none}
  .story__text{max-width:none}
  .story__bird{position:static;width:82%;margin:2.6rem 0 0 auto;right:auto;top:auto}

  .hero--lakeside{aspect-ratio:auto;display:block;background:none}
  .hero--lakeside .hero__bg{position:static;height:auto;aspect-ratio:2304/1296}
  .hero--lakeside .hero__fade{display:none}
  .hero--lakeside .hero__content{padding:3.4rem var(--pad-x) 3.8rem;background:var(--cream)}
  .hero--lakeside .display .l1,.hero--lakeside .display .l2{font-size:4.2rem;padding-left:0}
  .hero--lakeside p br{display:none}

  .hero--floorplans{aspect-ratio:auto;display:block;background:none}
  .hero--floorplans .hero__bg{position:static;height:auto;aspect-ratio:2400/1083}
  .hero--floorplans .hero__content{padding:3rem var(--pad-x) 3.2rem;background:var(--cream)}
  .fp__head{text-shadow:none;color:var(--teal)}
  .fp__head .l1,.fp__head .l2,.fp__head .l3{font-size:3.4rem;padding-left:0}

  .location{padding-top:3.6rem}
  .location__head .l1{font-size:3.9rem}
  .location__head .l2{font-size:3.1rem;padding-left:0}
  .location .lead br{display:none}
  .amenities{grid-template-columns:minmax(0,1fr);gap:3rem}
  .amenity li{font-size:1.35rem}
  .location__cols{margin-top:4.4rem}

  .transit__fig{padding:3.4rem 2rem 0}
  .portfolio{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;padding-inline:7rem}
  .portfolio__label{font-size:1.4rem;margin:3.4rem 0 2rem}

  .pair{grid-template-columns:1fr;gap:0}
  .pair figure{grid-column:1!important}

  .why{padding:4.6rem 0 4.6rem}
  .why__head{font-size:3.9rem}
  .why__head .l2{padding-left:0}
  .why__rule{display:none}
  .why__grid{grid-template-columns:1fr}
  .why p{padding-top:0;margin-top:2.4rem}
  .hydro p{position:static;left:auto;top:auto;width:auto;margin-top:2rem}

  .astra{aspect-ratio:auto;display:block;background:none;position:relative}
  .astra__bg{position:static;height:auto;aspect-ratio:2400/1338}
  .astra__fade{display:none}
  .astra__list{position:absolute;top:0;left:0;right:0;padding:9% 0 0 13%;gap:min(3.6vw,2.4rem)}
  .astra__list li{font-size:min(3.1vw,1.9rem)}
  .astra__cap{width:min(10vw,6.4rem);height:min(10vw,6.4rem);left:-1.6rem;bottom:-2rem}
  .astra__note{bottom:3%;right:4%;font-size:1.1rem}

  .hydro{padding:4.6rem 0 4rem}
  .hydro__head{font-size:4.4rem}
  .hydro__head span:nth-child(2){padding-left:3rem}
  .hydro p br{display:none}
  .hydro__plan{width:100%;margin:3rem 0 0}
  .zones{grid-template-columns:1fr 1fr;gap:2.6rem 2rem;padding-left:0}
  .zone__chip{font-size:1.45rem;padding:.4rem .9rem}
  .zone__list li{font-size:1.25rem;gap:.6rem}
  .zone__no{width:1.7rem;height:1.7rem;font-size:.95rem;margin-top:.15rem}

  .typetabs{gap:1.4rem;margin-top:2rem}
  .typetab{min-width:10rem;height:4rem;font-size:1.7rem}

  .keyrow{grid-template-columns:1fr}
  .keyrow__photo img{aspect-ratio:16/10}
  .keyrow__plan{padding:3rem 7% 1rem}

  .card,.card--textright{grid-template-columns:1fr}
  .card__photo{grid-row:2!important;grid-column:1!important;aspect-ratio:3/2}
  .card__text,.card--textright .card__text{grid-row:1!important;grid-column:1!important;padding:3.4rem var(--card-x) 3rem}
  .card__text--side,#type-d .card__text--side,#type-f .card__text--side{grid-template-columns:1fr;gap:2rem}
  .card__pill{height:2.6rem;font-size:1.35rem}
  .card__area{font-size:2rem}
  .card__specs{gap:2.4rem}
  .card__specs li{font-size:1.5rem}
  .card__specs img{height:2.2rem}
  .card__plan,#type-c1 .card__plan,#type-d .card__plan,#type-e .card__plan,#type-f .card__plan{width:100%;margin-top:2.6rem}
  .card__plan img{max-width:36rem;margin-inline:auto}

  .foot{padding:3rem 0 3.4rem}
  .foot__grid{padding-inline:7rem}
  .foot__name,.foot__addr,.foot__legal{font-size:1.15rem}
  .foot__tiny{font-size:.95rem}
  .foot__copy{font-size:1.4rem}

  .modal__panel{padding:3.4rem 2.4rem 2.8rem}
  .modal__panel--legal{width:100%;padding:4rem 2.4rem 2.8rem}
  .legal__body{font-size:1.35rem;line-height:1.55}
  .modal__panel .display{font-size:3.6rem}
  .rform{grid-template-columns:1fr}
  .rform label{font-size:1.35rem}
  .rform input,.rform select,.rform textarea{font-size:1.5rem}

  .leaf{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:900px){
  .wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:68px;height:68px}
  .wa svg{width:41px;height:41px}
}
@media (prefers-reduced-motion:reduce){
  .wa{transition:none}
  .wa:hover{transform:none}
}

/* The site-plan key carries a number badge per line now, so two columns get
   cramped on a phone — one column below 560px. */
@media (max-width:560px){
  .zones{grid-template-columns:minmax(0,1fr);gap:2.4rem}
}