:root{
  --navy:#28294A;
  --navy-deep:#161729;
  --navy-mid:#1E1F38;
  --ink:#1C1B1B;
  --graphite:#5A5A66;
  --tan:#B79581;
  --gold:#C9A227;
  --gold-soft:#E7C58A;
  --sand:#CFCABF;
  --paper:#F8F6F3;
  --paper-2:#EFEBE5;
  --line:rgba(40,41,74,.13);
  --line-dark:rgba(231,197,138,.22);
  --maxw:1180px;
  --narrow:760px;
  --gutter:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--narrow);margin:0 auto}

h1,h2,h3{font-weight:300;letter-spacing:-.012em;line-height:1.2;margin:0}
h2{font-size:clamp(25px,3.2vw,37px)}
h3{font-size:clamp(17px,1.9vw,20px);font-weight:500;letter-spacing:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--tan);margin:0 0 18px}
.lead{font-size:clamp(17.5px,1.9vw,20px);font-weight:300;color:var(--graphite);line-height:1.68}
.rule{width:44px;height:1px;background:var(--gold);border:0;margin:0 0 20px}
.rule.c{margin-left:auto;margin-right:auto}
.muted{color:var(--graphite)}
.note{font-size:13px;line-height:1.65;color:var(--graphite)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(22,23,41,.90);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-dark);color:#fff;
}
.bar{display:flex;align-items:center;gap:24px;height:62px}
.brand{display:flex;align-items:center;gap:13px;line-height:1;text-decoration:none}
.brand .mark{width:34px;height:34px;display:block;flex:0 0 auto}
.brand b{font-size:14px;font-weight:400;letter-spacing:.28em;color:#fff}
nav.main{display:flex;gap:24px;margin-left:auto;font-size:13.5px;font-weight:300}
nav.main a{text-decoration:none;color:rgba(255,255,255,.8);padding:4px 0;border-bottom:1px solid transparent}
nav.main a:hover{color:#fff;border-bottom-color:var(--gold-soft)}
.lang{display:flex;gap:7px;font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.lang a{text-decoration:none}
.lang .on{color:var(--gold-soft)}

.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;font-family:inherit;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;transition:background .2s,color .2s,border-color .2s;
}
.btn-gold{background:var(--gold-soft);color:#221B0B}
.btn-gold:hover{background:#f2d6a6}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid rgba(40,41,74,.28)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(40,41,74,.04)}
.btn-ghost-light{background:transparent;color:var(--gold-soft);border:1px solid var(--line-dark)}
.btn-ghost-light:hover{border-color:var(--gold-soft);color:#fff}
.btn-sm{padding:10px 18px;font-size:11px;letter-spacing:.12em}

/* ---------- hero: the image is never covered ---------- */
.hero-figure{margin:0;background:var(--navy-deep);line-height:0}
.hero-figure img{width:100%;height:clamp(300px,62vh,660px);object-fit:cover;object-position:50% 48%}
.hero-figure .m{display:none}

.lockup{
  background:var(--navy-deep);color:#fff;text-align:center;
  padding:clamp(46px,7vw,84px) var(--gutter) clamp(34px,4vw,54px);
  position:relative;
}
.lockup:before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:1px;height:clamp(28px,5vw,52px);background:linear-gradient(var(--gold-soft),transparent);
}
.wordmark{
  font-size:clamp(30px,6.4vw,74px);font-weight:200;letter-spacing:.3em;
  text-indent:.3em;color:#fff;margin:0;line-height:1.1;
}
.tagline{
  margin:clamp(20px,3vw,30px) auto 0;
  font-weight:300;line-height:1.45;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-soft);
}
/* Line 1 sets the cadence; line 2 is the institution's full name and must
   never break. The size is driven off the viewport so the long line fits
   on one line from 640 px up. */
.tagline .t1{display:block;font-size:clamp(13px,1.62vw,21px)}
.tagline .t2{display:block;font-size:clamp(14px,2.02vw,26px);margin-top:.38em;white-space:nowrap}
.tag-rules{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(22px,3vw,32px)}
.tag-rules span{display:block;height:1px;width:clamp(36px,9vw,110px);background:linear-gradient(90deg,transparent,var(--gold-soft))}
.tag-rules span+span{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.tag-rules i{display:block;width:5px;height:5px;transform:rotate(45deg);background:var(--gold-soft);font-style:normal}

.hero-copy{
  background:var(--navy-deep);color:rgba(255,255,255,.74);
  padding:0 var(--gutter) clamp(40px,5vw,60px);
}
.hero-copy .narrow p{font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.78;text-align:center}
.hero-copy .narrow p:first-child{color:rgba(255,255,255,.9)}

/* ---------- the four facts: hairlines, no boxes ---------- */
.facts{
  background:var(--navy-deep);
  padding:0 var(--gutter) clamp(44px,6vw,72px);
}
.facts-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-dark);
}
.fact{padding:26px 26px 4px;border-right:1px solid var(--line-dark);text-align:center}
.fact:last-child{border-right:0}
.fact b{
  display:block;font-size:clamp(14.5px,1.55vw,17px);font-weight:400;color:var(--gold-soft);
  letter-spacing:.03em;line-height:1.4;
}
.fact span{display:block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-top:10px}

.hero-cta{
  background:var(--navy-deep);padding:0 var(--gutter) clamp(52px,6vw,78px);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
.hero-fine{
  background:var(--navy-deep);color:rgba(255,255,255,.4);
  padding:0 var(--gutter) 46px;font-size:12.5px;text-align:center;
}

/* the hero copy band now lives inside section 01, on paper instead of navy.
   Colours follow the page's own light tiers: values as h3, labels as .snum. */
/* the master-plan render, moved into the tower section */
.mpfig img{width:100%;display:block}

/* ---------- proof strip ---------- */
.proof{background:var(--navy-mid);color:#fff;border-top:1px solid var(--line-dark)}
.proof .wrap{padding:26px var(--gutter);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;justify-content:center;text-align:center}
.proof-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line-dark);padding:6px 12px}
.proof p{margin:0;font-size:14.5px;color:rgba(255,255,255,.76);font-weight:300}
.proof a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.proof a:hover{border-bottom-color:var(--gold-soft)}

/* ---------- sections ---------- */
section,[id]{scroll-margin-top:80px}
section{padding:clamp(48px,5.2vw,70px) 0;border-top:1px solid var(--line)}
section.alt{background:var(--paper-2)}
.snum{font-size:10.5px;letter-spacing:.24em;color:var(--tan);font-weight:500;text-transform:uppercase}
.shead{max-width:62ch;margin-bottom:30px}
#s03 .shead{max-width:70ch}
.shead h2{margin:10px 0 14px}
.cols{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}

.card{background:#fff;border:1px solid var(--line);padding:28px}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;color:var(--graphite)}

ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid var(--line);font-size:15.5px}
ul.ticks li:before{content:"";position:absolute;left:0;top:22px;width:9px;height:1px;background:var(--gold)}
ul.ticks li:last-child{border-bottom:0}

/* ruled specification lists — replace every table */
dl.spec{margin:0}
dl.spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:26px;padding:14px 0;border-bottom:1px solid var(--line)}
dl.spec>div:last-child{border-bottom:0}
dl.spec dt{margin:0;font-size:14.5px;color:var(--graphite);font-weight:400}
dl.spec dd{margin:0;font-size:15.5px;text-align:right;font-weight:400}
.spec-cap{font-size:13px;color:var(--graphite);padding-bottom:8px}
dl.spec.two{display:grid;grid-template-columns:1fr 1fr;gap:0 46px}
dl.spec.two>div:nth-last-child(-n+2){border-bottom:0}
@media (max-width:760px){dl.spec.two{grid-template-columns:1fr}dl.spec.two>div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}dl.spec.two>div:last-child{border-bottom:0}}

/* ---------- asset slots ---------- */
.slot{
  position:relative;display:flex;align-items:flex-end;min-height:250px;padding:22px;
  background:
    linear-gradient(135deg,rgba(183,149,129,.20),rgba(22,23,41,.34)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px),
    var(--navy);
  border:1px solid var(--line-dark);
}
.slot.tall{min-height:430px}
.slot.wide{min-height:310px}
.slot-label{font-size:12px;line-height:1.6;color:rgba(255,255,255,.86);max-width:52ch}
.slot-label b{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:7px;font-weight:500}
.slot-label i{display:block;font-style:normal;color:rgba(255,255,255,.52);margin-top:7px}
figure{margin:0}
figcaption{font-size:12.5px;color:var(--graphite);padding-top:10px}

.ctarow{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-size:17px;font-weight:400;color:var(--navy)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";position:absolute;right:4px;top:13px;font-size:21px;font-weight:200;color:var(--tan)}
details.faq[open] summary:after{content:"–"}
details.faq .ans{padding:0 0 22px;max-width:74ch;color:var(--graphite);font-size:15.5px}

/* ---------- news ---------- */
article.news{border-bottom:1px solid var(--line);padding:24px 0}
article.news time{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan)}
article.news h3{margin:9px 0 11px}
article.news details summary{cursor:pointer;font-size:13.5px;color:var(--navy);list-style:none;letter-spacing:.04em}
article.news details summary::-webkit-details-marker{display:none}
article.news details summary:before{content:"Read more →"}
article.news details[open] summary:before{content:"Close ×"}
article.news details .body{padding-top:13px;font-size:15.5px;color:var(--graphite);max-width:74ch}
article.news figure{margin:0 0 18px}
article.news figure img{width:100%;display:block;border:1px solid var(--line)}
article.news figcaption{font-size:12.5px;color:var(--graphite);padding-top:9px}
article.news:first-of-type{padding-top:0}

/* ---------- construction progress: dated photo cards ---------- */
.progcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px 18px;margin-top:20px}
.progcards figure{margin:0}
.progcards time{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);margin-bottom:10px}
.progcards img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.progcards figcaption{padding-top:11px;font-size:13.5px;line-height:1.7;color:var(--graphite)}
.progcards figcaption b{display:block;color:var(--navy);font-weight:500;margin-bottom:4px}

/* ---------- footer columns and mark ---------- */
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media (max-width:900px){.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cols-4{grid-template-columns:1fr}}
footer ul.flinks{list-style:none;margin:0;padding:0}
footer ul.flinks li{margin-bottom:9px}
footer ul.flinks li:last-child{margin-bottom:0}
.footmark{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);margin-top:32px;padding-top:28px;
}
.footmark img{height:44px;width:auto;display:block}
.footmark .cright{font-size:12.5px;color:rgba(255,255,255,.46)}

/* ---------- form ---------- */
.formwrap{background:var(--navy-deep);color:#fff}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
input[type=text],input[type=tel],input[type=email],select{
  width:100%;font-family:inherit;font-size:16px;font-weight:300;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);padding:14px;
}
input:focus,select:focus{outline:1px solid var(--gold-soft);outline-offset:1px}
select option{color:#111;background:#fff}
.full{grid-column:1 / -1}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.6}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--gold-soft)}
.formnote{font-size:12.5px;color:rgba(255,255,255,.46);line-height:1.65}
#formStatus{margin-top:16px;font-size:14.5px;padding:15px;border:1px solid var(--line-dark);display:none}
#formStatus.show{display:block}

/* ---------- contact section on paper, white form card ---------- */
#s13{background:var(--paper-2)}
#s12 h2{color:var(--navy)}
#s12 .lead{color:var(--graphite)}
.formcard{background:#fff;border:1px solid var(--line);padding:clamp(24px,3vw,38px)}
#s12 label{color:var(--graphite)}
#s12 input[type=text],#s12 input[type=tel],#s12 select{
  color:var(--ink);background:var(--paper);border:1px solid rgba(40,41,74,.22);font-weight:400;
}
#s12 input:focus,#s12 select:focus{outline:1px solid var(--gold);outline-offset:1px}
#s12 .consent{color:var(--graphite)}
#s12 .consent input{accent-color:var(--navy)}
#s12 .formnote{color:var(--graphite)}
.formcard #formStatus{border-color:var(--line);color:var(--navy);background:var(--paper)}
.contactcol h4{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);
  font-weight:500;margin:0 0 13px;
}
.contactcol p{font-size:15.5px;color:var(--navy);line-height:1.85;margin:0 0 32px}
.contactcol p:last-child{margin-bottom:0}
.contactcol a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.contactcol a:hover{color:var(--gold)}
.contactcol .quiet{color:var(--graphite)}
.contactcol hr{border:0;border-top:1px solid var(--line);margin:0 0 32px}
.contact-cols{grid-template-columns:1.32fr .68fr;gap:46px}

/* ---------- density: crop-safe renders are capped so the page scrolls less.
   Maps, the master plan and the infographic timeline are NOT capped: their
   labels have to stay readable. ---------- */
.capped img,img.capped{max-height:430px;object-fit:cover;object-position:center}
.towerblock figure img{max-height:400px;object-fit:cover;object-position:center 30%}
figure.duo img{max-height:430px}
.frame .slide img{max-height:470px}
@media (min-width:1200px){.progcards{grid-template-columns:repeat(4,1fr)}}
.progcards.news{grid-template-columns:repeat(auto-fit,minmax(min(540px,100%),1fr));gap:34px 22px}
.progcards.news img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.progcards.news figcaption{font-size:14.5px;line-height:1.72;padding-top:14px}
.progcards.news h3{font-size:clamp(18px,1.9vw,21px);margin:0 0 10px}
.progcards.news .src{display:block;margin-top:10px;font-size:12.5px}
.progcards.news .src a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.progcards.news .src a:hover{color:var(--gold)}
.progcards.news figure.nopic{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:24px}
.progcards.news figure.nopic figcaption{padding-top:0;max-width:88ch}
.progcards.news figure.nopic time{margin-bottom:12px}
.section-tagline{margin-top:0}

/* ---------- developer: global projects ---------- */
.gproj{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.gproj figure{margin:0;background:#fff;border:1px solid var(--line)}
.gproj img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.gproj figcaption{padding:20px 22px 22px;text-align:center}
.gproj .place{
  display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--graphite);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;
}
.gproj .count{display:block;font-size:clamp(34px,4.4vw,48px);font-weight:200;color:var(--tan);line-height:1}
.gproj .unit{display:block;font-size:12.5px;color:var(--graphite);margin-top:8px}
@media (max-width:820px){.gproj{grid-template-columns:1fr;gap:18px}}

/* ---------- numbered reasons and the purchase steps ---------- */
ol.reasons{margin:0;padding:0;list-style:none;counter-reset:rz}
ol.reasons li{
  counter-increment:rz;position:relative;padding:0 0 16px 38px;margin-bottom:16px;
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--graphite);line-height:1.7;
}
ol.reasons li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
ol.reasons li:before{
  content:counter(rz,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-size:11px;letter-spacing:.14em;color:var(--tan);font-weight:500;
}
ol.reasons b{display:block;font-weight:500;color:var(--navy);margin-bottom:4px}

ul.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0 20px;margin:28px 0 0;padding:0;list-style:none}
ul.steps li{position:relative;padding-top:34px}
ul.steps li:before{content:"";position:absolute;top:8px;left:0;right:-20px;height:1px;background:var(--line)}
ul.steps li:last-child:before{right:0}
ul.steps li:after{content:"";position:absolute;top:4px;left:0;width:9px;height:9px;background:var(--gold)}
ul.steps .n{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);margin-bottom:7px}
ul.steps p{margin:0;font-size:14.5px;color:var(--navy);line-height:1.6}
@media (max-width:820px){
  ul.steps{grid-template-columns:1fr;gap:0}
  ul.steps li{padding:0 0 22px 26px}
  ul.steps li:before{top:5px;bottom:0;left:4px;right:auto;width:1px;height:auto}
  ul.steps li:last-child:before{display:none}
  ul.steps li:after{top:4px;left:0}
}

/* ---------- chat rail ---------- */
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:8px}
.rail a{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:rgba(22,23,41,.92);color:var(--gold-soft);text-decoration:none;
  border:1px solid var(--line-dark);font-size:9.5px;letter-spacing:.08em;font-weight:500;
}
.rail a:hover{background:var(--gold-soft);color:#221B0B;border-color:var(--gold-soft)}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:rgba(255,255,255,.6);font-size:13.5px;padding:58px 0 42px}
footer h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-weight:500;margin:0 0 15px}
footer a{color:rgba(255,255,255,.82)}
.legal{border-top:1px solid var(--line-dark);margin-top:36px;padding-top:26px;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.46)}

/* the facilities list reads as one column of the page's own list style,
   set in two or three columns so it does not run down the screen */
ul.facilities{columns:3;column-gap:38px;margin-top:6px}
ul.facilities li{padding:9px 0 9px 24px}
ul.facilities li:before{top:18px}
@media (min-width:1080px){ul.facilities{columns:4;column-gap:34px}}
ul.facilities li{break-inside:avoid;-webkit-column-break-inside:avoid}
/* ---------- tower blocks ---------- */
.towerblock{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.towerblock:first-of-type{border-top:0;padding-top:0;margin-top:34px}
.tb-head{font-size:clamp(19px,2.2vw,25px);font-weight:400;letter-spacing:.01em;margin-bottom:22px}
.tb-sub{
  margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tan);
}
.towerblock figure img{width:100%;display:block}
dl.hl{margin:0}
dl.hl>div{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
dl.hl>div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
dl.hl dt{margin:0 0 6px;font-size:15.5px;font-weight:500;color:var(--navy)}
dl.hl dd{margin:0;font-size:15px;color:var(--graphite);line-height:1.68}
dl.hl.two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
@media (max-width:820px){dl.hl.two{grid-template-columns:1fr;gap:0}}

/* ---------- carousel: one frame, arrows, dots ---------- */
.carousel{margin-top:6px}
.frame{position:relative;overflow:hidden;background:var(--navy-deep)}
.frame .slide{
  margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .5s ease;
}
.frame .slide.is-on{position:relative;opacity:1;visibility:visible}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:54px 26px 22px;
  background:linear-gradient(transparent,rgba(14,15,30,.88));color:#fff;
}
.frame figcaption b{display:block;font-size:clamp(15px,1.7vw,19px);font-weight:400;letter-spacing:.02em}
.frame figcaption span{display:block;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:5px;max-width:62ch}
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border:1px solid rgba(255,255,255,.34);
  background:rgba(14,15,30,.42);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.nav:hover{background:rgba(14,15,30,.78);border-color:var(--gold-soft)}
.nav span{width:11px;height:11px;border-top:1px solid #fff;border-right:1px solid #fff;display:block}
.nav.prev{left:16px}
.nav.prev span{transform:rotate(-135deg);margin-left:3px}
.nav.next{right:16px}
.nav.next span{transform:rotate(45deg);margin-right:3px}
.nav:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.counter{
  position:absolute;top:16px;right:16px;z-index:3;margin:0;
  font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.74);
  background:rgba(14,15,30,.42);border:1px solid rgba(255,255,255,.22);padding:6px 11px;
}
.counter em{font-style:normal;color:var(--gold-soft)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dot{
  width:28px;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(40,41,74,.22);transition:background .2s;
}
.dot.is-on{background:var(--gold)}
.dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:620px){
  .nav{width:38px;height:38px}
  .nav.prev{left:8px}.nav.next{right:8px}
  .frame figcaption{padding:44px 16px 16px}
  .frame figcaption span{font-size:12.5px}
}

/* amenity grid: small tiles, one short caption each */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 14px;margin-top:34px}
@media (min-width:1200px){.amen{grid-template-columns:repeat(6,1fr)}}
.amen figure{margin:0}
.amen img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.amen figcaption{
  padding-top:9px;font-size:13px;letter-spacing:.02em;color:var(--graphite);
}
@media (max-width:900px){.amen{grid-template-columns:repeat(3,1fr);gap:22px 14px}}
@media (max-width:620px){.amen{grid-template-columns:repeat(2,1fr);gap:20px 12px}}

/* two plates read as one picture: equal height, one hairline gutter */
figure.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
figure.duo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  figure.duo{grid-template-columns:1fr}
}

/* ---------- floor plan plates (section 08) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 18px;margin:0}
.plans figure{margin:0}
.plans img{
  width:100%;display:block;aspect-ratio:1/1;object-fit:contain;
  background:#fff;padding:12px;border:1px solid var(--line);box-sizing:border-box;
}
.plans figcaption{padding-top:11px;font-size:13px;line-height:1.7;color:var(--graphite)}
.plans figcaption b{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tan);font-weight:500;margin-bottom:6px;
}
.plans figcaption span{color:var(--navy)}
.plans-group{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;
  margin:36px 0 16px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--graphite);padding-bottom:10px;border-bottom:1px solid var(--line);
}
.plans-group a{color:var(--tan);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.plans-group a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.plans-group em{font-style:normal;color:var(--navy);margin-left:6px}

/* ---------- four plates in a row, section 01 ---------- */
.trio{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
.trio figure{margin:0}
.trio img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.trio .slot{min-height:0;aspect-ratio:3/2;align-items:flex-end}
.trio figcaption{padding-top:10px;font-size:12.5px;line-height:1.65;color:var(--graphite)}
.trio figcaption b{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tan);font-weight:500;margin-bottom:5px;
}
@media (max-width:1000px){.trio{grid-template-columns:1fr 1fr;gap:22px 16px}}
@media (max-width:560px){.trio{grid-template-columns:1fr;gap:26px}}
@media (min-width:1150px){.plans{grid-template-columns:repeat(4,1fr);gap:28px 18px}}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.plans{grid-template-columns:1fr;gap:28px}}

.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;
}
.gallery figure{margin:0;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--line)}
.gallery .g-wide{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){
  ul.facilities{columns:2;column-gap:32px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g-wide{grid-column:span 2;grid-row:auto}
}
@media (max-width:520px){
  ul.facilities{columns:1}
}

/* ---------- the six reasons ---------- */
.reason{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.reason b{
  display:block;font-size:11px;font-weight:500;letter-spacing:.22em;
  color:var(--gold);margin-bottom:14px;
}
.reason h3{font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.35;margin-bottom:11px}
.reason p{font-size:15.5px;color:var(--graphite);margin:0}

/* ---------- section kicker, numbered connections, fine print ---------- */

.address{margin:0 0 20px;font-size:15px;color:var(--graphite);letter-spacing:.01em}
.section-tagline{
  margin:0;max-width:44ch;text-wrap:balance;
  font-size:clamp(18px,2.1vw,27px);font-weight:300;line-height:1.32;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
}
.statement{
  margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:clamp(16.5px,1.8vw,19px);font-weight:400;line-height:1.55;color:var(--navy);
}

.measured{margin:18px 0 2px;font-size:14px;color:var(--graphite)}
br.wide{display:inline}
@media (max-width:900px){br.wide{display:none}}
.fineprint{margin:0;font-size:12px;line-height:1.6;color:var(--graphite);opacity:.82}

/* the location map carries small labels — give it room and a hairline */
#s01 figure img,#s03 .cols figure img,#s03 > .wrap > figure img{width:100%;border:1px solid var(--line)}
#s03 .cols figure{display:flex;flex-direction:column}
#s03 .cols figure img{flex:1;object-fit:cover;min-height:0}
/* the plaza render is near square; crop it to a banner so it does not
   swallow the section */
#s03 > .wrap > figure img{max-height:430px;object-fit:cover;object-position:50% 46%}

/* ---------- scroll linkage ----------
   Three devices carry the reader down the page: a hairline progress bar in
   the header, a scroll cue under the hero, and a named hand-off at the foot
   of every section that says what comes next rather than just "more". */
.progress{position:absolute;left:0;bottom:-1px;height:1px;background:var(--gold-soft);width:0;transition:width .12s linear}

.scrollcue{
  background:var(--navy-deep);text-align:center;padding:0 var(--gutter) 54px;
}
.scrollcue a{
  display:inline-flex;flex-direction:column;align-items:center;gap:12px;
  text-decoration:none;color:rgba(255,255,255,.44);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
}
.scrollcue a:hover{color:var(--gold-soft)}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(rgba(231,197,138,.55),transparent);animation:drip 2.6s ease-in-out infinite}
@keyframes drip{0%,100%{opacity:.35;transform:scaleY(.72);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.scrollcue i{animation:none}}

.nextlink{
  margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  text-decoration:none;text-align:right;max-width:34ch;
}
.nextlink small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tan)}
.nextlink span{font-size:15px;font-weight:400;color:var(--navy);border-bottom:1px solid transparent;transition:border-color .2s}
.nextlink:hover span{border-bottom-color:var(--gold)}
.nextlink span:after{content:" \2193";color:var(--gold)}
.formwrap .nextlink span,.nextlink.light span{color:var(--gold-soft)}
@media (max-width:620px){
  .nextlink{margin-left:0;align-items:flex-start;text-align:left;width:100%;padding-top:6px}
}

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .cols,.cols-3,.cols-2,.formgrid{grid-template-columns:1fr;gap:28px}
  nav.main{display:none}
  .facts-grid{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--line-dark);padding:22px 16px 4px}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(n+3){border-bottom:0}
  .hero-figure img{height:clamp(380px,58vh,520px)}
  .rail{
    right:0;left:0;top:auto;bottom:0;transform:none;flex-direction:row;
    background:var(--navy-deep);border-top:1px solid var(--line-dark);gap:0;
  }
  .rail a,.rail .qm-btn{flex:1;height:52px;width:auto;border:0;border-right:1px solid var(--line-dark)}
  .rail .qm-btn:last-child{border-right:0}
  .rail a:last-child{border-right:0}
  body{padding-bottom:52px}
}
@media (max-width:620px){
  /* the render is 16:9 — serve the portrait crop so phones see the towers,
     not a sliver of facade */
  .hero-figure .d{display:none}
  .hero-figure .m{display:block}
  .hero-figure img{height:auto;max-height:76vh}
  .wordmark{letter-spacing:.22em;text-indent:.22em}
  .tagline .t2{white-space:normal}
  .hero-cta .btn{width:100%;text-align:center}
}
@media (max-width:520px){
  .brand .mark{width:30px;height:30px}
  .brand b{font-size:12px;letter-spacing:.2em}
  .bar{gap:10px}
}
@media (max-width:355px){
  /* at this width the mark, the wordmark, the language switch and the button
     cannot all sit on one row — the wordmark goes and the mark carries the
     brand */
  .brand b{display:none}
  .lang{display:none}
  .btn-sm{padding:9px 13px;letter-spacing:.08em}
}
@media (max-width:420px){
  .facts-grid{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line-dark)}
  .fact:last-child{border-bottom:0}
}

/* ============================================================
   ONE TYPE SYSTEM — added 2026-09-21.
   Two text sizes only: body 16px and small print 13px, both in
   one colour. Headings: one size, weight and colour per level,
   the same on every section. Anything earlier in this stylesheet
   that set a different size or colour for running text is
   overridden here on purpose.
   ============================================================ */

/* --- body copy: one size, one colour, one weight --- */
p, li, dd, .lead, ol.reasons li, dl.hl dd, ul.steps p, .contactcol p,
.plans figcaption, .trio figcaption, .gproj figcaption,
.progcards figcaption, article.news details .body{
  font-size:16px;font-weight:300;line-height:1.72;color:var(--graphite);
}
dt, dl.hl dt, ol.reasons b, .plans figcaption b, .trio figcaption b,
.progcards figcaption b, figcaption b{
  font-size:16px;font-weight:500;line-height:1.72;color:var(--graphite);
}
.lead{max-width:82ch}
.statement{font-size:16px;font-weight:500;color:var(--graphite)}
.muted, p.quiet, .contactcol .quiet{color:var(--graphite)}
ul.ticks li, ul.facilities li{font-size:16px;font-weight:300;color:var(--graphite)}
dl.spec dt, dl.spec dd{font-size:16px;font-weight:300;color:var(--graphite)}
dl.spec dt{font-weight:500}
.hero-copy .narrow p{font-size:16px;line-height:1.78;color:rgba(255,255,255,.80)}
.hero-copy .narrow p:first-child{color:rgba(255,255,255,.88)}
/* the hero lockup is the one place type is deliberately larger */
p.tagline{font-size:inherit;color:var(--gold-soft)}
.tagline .t1{font-size:clamp(13px,1.62vw,21px);font-weight:300}
.tagline .t2{font-size:clamp(14px,2.02vw,26px);font-weight:300}
.gproj .place, .gproj .count, .gproj .unit{color:var(--graphite)}
.gproj .count{font-size:clamp(34px,4.4vw,48px);font-weight:200;color:var(--tan)}
.gproj .place{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.gproj .unit{font-size:13px;font-weight:300}
ul.steps .n, .plans-group a{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
ul.steps p{font-size:16px;font-weight:300;color:var(--graphite)}
.reason p{font-size:16px;font-weight:300;color:var(--graphite)}
.reason h3{font-size:20px;font-weight:500;color:var(--navy)}

/* ---------- news as a timeline: image, headline, two lines, read more ---------- */
.timeline{margin-top:14px}
.tl{display:grid;grid-template-columns:118px 1fr;gap:0 30px}
.tl > time{
  display:block;font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tan);padding-top:2px;
}
.tl-body{position:relative;border-left:1px solid var(--line);padding:0 0 40px 30px}
.tl:last-child .tl-body{border-left-color:transparent;padding-bottom:0}
.tl-body:before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;background:var(--gold)}
.tl-card{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.tl-card figure{margin:0}
.tl-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.tl-card figcaption{padding-top:8px;font-size:13px;color:var(--graphite)}
.tl h3{margin:0 0 9px}
.tl .excerpt{margin:0}
.tl details{margin-top:12px}
.tl details summary{
  cursor:pointer;list-style:none;font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tan);
}
.tl details summary::-webkit-details-marker{display:none}
.tl details summary:before{content:"Read more \2192"}
.tl details[open] summary:before{content:"Close \00D7"}
.tl details summary:hover{color:var(--gold)}
.tl details .more{padding-top:12px}
.tl details .more p{margin:0 0 .9em}
.tl details .more p:last-child{margin-bottom:0}
@media (max-width:900px){
  .tl{grid-template-columns:1fr;gap:10px}
  .tl-body{border-left:0;padding:0 0 34px}
  .tl-body:before{display:none}
  .tl-card{grid-template-columns:1fr;gap:16px}
  .tl-card img{max-width:420px}
}

/* ---------- horizontal, swipeable strips: construction and news ---------- */
.strip{position:relative;margin-top:18px}
.strip-track{
  display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 18px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--tan) transparent;
}
.strip-track::-webkit-scrollbar{height:4px}
.strip-track::-webkit-scrollbar-thumb{background:var(--tan)}
.strip-track::-webkit-scrollbar-track{background:rgba(40,41,74,.10)}
.strip-track > *{scroll-snap-align:start;flex:0 0 auto}
.strip-nav{position:absolute;top:-52px;right:0;display:flex;gap:8px}
.strip-nav button{
  width:38px;height:38px;border:1px solid var(--line);background:transparent;
  color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:.2s;
}
.strip-nav button:hover{background:var(--navy);color:var(--gold-soft);border-color:var(--navy)}
.strip-nav button:disabled{opacity:.3;cursor:default}
.strip-nav button:disabled:hover{background:transparent;color:var(--navy);border-color:var(--line)}
.strip-nav svg{width:15px;height:15px}

/* construction cards on the strip */
.progcards.strip-track{display:flex;grid-template-columns:none;margin-top:0}
.progcards.strip-track figure{width:300px}

/* news items on the strip */
.timeline.strip-track{display:flex;margin-top:0;padding-top:26px;position:relative}
.timeline.strip-track:before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line);
}
.strip-track .tl{display:block;width:330px;grid-template-columns:none;position:relative;padding-top:0}
.strip-track .tl > time{padding:0 0 14px}
.strip-track .tl-body{border-left:0;padding:0}
.strip-track .tl-body:before{display:none}
.strip-track .tl:before{content:"";position:absolute;left:0;top:-21px;width:9px;height:9px;background:var(--gold)}
.strip-track .tl-card{display:block}
.strip-track .tl-card figure{margin-bottom:14px}
.strip-track .tl-card img{aspect-ratio:3/2}
@media (max-width:640px){
  .strip-track .tl{width:76vw}
  .progcards.strip-track figure{width:76vw}
  .strip-nav{top:-48px}
}

/* ---------- quick menu, under the three chat buttons ---------- */
.rail .qm-btn{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:rgba(22,23,41,.92);color:var(--gold-soft);border:1px solid var(--line-dark);
  cursor:pointer;padding:0;font-family:inherit;
}
.rail .qm-btn:hover,.rail .qm-btn[aria-expanded="true"]{
  background:var(--gold-soft);color:#221B0B;border-color:var(--gold-soft);
}
.rail .qm-btn svg{width:21px;height:21px;display:block}
.qmenu{
  position:fixed;right:70px;top:50%;transform:translateY(-50%);z-index:71;
  background:var(--navy-deep);border:1px solid var(--line-dark);padding:16px 6px;
  min-width:212px;display:none;
}
.qmenu.open{display:block}
.qmenu a{
  display:block;padding:9px 18px;text-decoration:none;color:rgba(255,255,255,.82);
  font-size:13.5px;font-weight:300;
}
.qmenu a:hover{background:rgba(255,255,255,.07);color:var(--gold-soft)}
.qmenu b{
  display:block;padding:0 18px 10px;font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tan);
}
@media (max-width:900px){
  .qmenu{
    right:0;left:0;top:auto;bottom:52px;transform:none;min-width:0;
    max-height:58vh;overflow-y:auto;border-left:0;border-right:0;
    columns:2;column-gap:0;padding:14px 4px;
  }
  .qmenu b{columns:1;column-span:all}
}

/* --- small print: one size, one colour --- */
.fineprint, .note, .spec-cap, .measured, .formnote, .hero-fine, .legal,
.legal p, figcaption, .progcards .src, .trio figcaption, .gproj figcaption,
.plans figcaption, .address, p.counter, .footmark .cright{
  font-size:13px;font-weight:300;line-height:1.65;color:var(--graphite);opacity:1;
}
.plans figcaption, .trio figcaption, .progcards figcaption{font-size:13px}
.plans figcaption b, .trio figcaption b, .progcards figcaption b{font-size:13px}
.progcards.news figcaption{font-size:16px}
.progcards.news figcaption b{font-size:16px}
.progcards.news .src{font-size:13px}

/* --- headings: identical on every section --- */
h2, .shead h2{font-size:clamp(25px,3.2vw,37px);font-weight:300;color:var(--ink);letter-spacing:-.005em}
.section-tagline{font-size:clamp(18px,2.1vw,27px);font-weight:300;color:var(--gold)}
h3, .tb-head, .progcards.news h3{
  font-size:20px;font-weight:500;color:var(--navy);letter-spacing:.005em;line-height:1.38;
}
h4, .tb-sub, .snum, .plans-group, label, .contactcol h4, footer h4{
  font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
h4, .tb-sub, .snum, .plans-group, .contactcol h4{color:var(--tan)}
.plans-group{color:var(--graphite)}

/* --- the same two tiers, inverted, on dark ground --- */
.formwrap p, footer p, footer li, .proof p, .hero-copy p, .hero-inner p{
  color:rgba(255,255,255,.80);
}
footer h4, .rail a, .frame figcaption b{color:var(--gold-soft)}
.legal, .legal p, .footmark .cright, .hero-fine, p.counter{color:rgba(255,255,255,.55)}
.frame figcaption, .frame figcaption span{color:rgba(255,255,255,.88)}
#s12 label, .formcard label{color:var(--graphite)}
.formcard .consent, .formcard .consent span{color:var(--graphite);font-size:13px}
.formcard .formnote{color:var(--graphite)}

/* --- contact fields: a visible outline on every input --- */
#s12 input[type=text],#s12 input[type=tel],#s12 select{
  background:#fff;border:1px solid rgba(40,41,74,.45);color:var(--ink);
  font-size:16px;font-weight:400;padding:15px 14px;
}
#s12 input::placeholder{color:rgba(40,41,74,.45)}
#s12 input:hover,#s12 select:hover{border-color:rgba(40,41,74,.72)}
#s12 input:focus,#s12 select:focus{
  border-color:var(--navy);outline:2px solid var(--gold);outline-offset:1px;
}
#s12 label{margin-bottom:9px;color:var(--navy)}
.formcard .consent input{width:19px;height:19px;accent-color:var(--navy);
  border:1px solid rgba(40,41,74,.45)}
#s12 select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}

/* --- messaging icons in the rail and the footer --- */
.rail a svg{width:21px;height:21px;display:block}
.rail a{font-size:0}
.flinks .ic{display:inline-flex;align-items:center;gap:9px}
.flinks .ic svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}
.shead h2.section-tagline{font-size:clamp(18px,2.1vw,27px);font-weight:300;color:var(--gold);letter-spacing:0;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* keyboard focus — every interactive element shows a visible ring */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:0}
.rail a:focus-visible,.rail button:focus-visible{outline-color:var(--gold-soft);outline-offset:3px}

/* touch targets: 44px minimum on coarse pointers */
@media (pointer:coarse){
  header nav a,.qmenu a,footer .flinks a{min-height:44px;display:flex;align-items:center}
  .rail a,.rail .qm-btn{min-width:44px;min-height:44px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* hit areas: keep the drawn size, widen what the finger can reach.
   Nothing here changes how the page looks on a mouse-driven screen. */
.lang a{position:relative}
.lang a::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px}
.dots .dot{position:relative}
.dots .dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:32px;height:32px}
@media (pointer:coarse){
  .dots .dot::after{width:44px;height:44px}
}