/* ===========================================================
   DAMAC Islands, Dubailand, Dubai - lead generation landing page
   House landing page template (Century Astoria v10) in DAMAC's own look (damacproperties.com,
   DAMAC Islands community page): the lagoon water of the developer's project background under the
   whole page, white text on it, white content cards, sand-gold pill buttons, lagoon-night bands,
   Archivo Expanded headings (open stand-in for DAMAC's Termina) + Roboto text.
   =========================================================== */

/* ============ FONTS (self-hosted Latin subsets, OFL) ============
   damacproperties.com sets headings, buttons and labels in Termina (Fort Foundry, commercial) and
   text in Roboto. Archivo is the closest open face to Termina: pinned at its widest width (125%) it
   matches Termina's cap height (0.69 against 0.70 em) and the width of the alphabet (33.0 against
   32.7 cap heights, measured on 24 Sep 2026 in DAMAC's own page and in ours). The file is the
   Google Fonts variable font instanced with fontTools at wdth 125, weights 300 to 700 (32 KB).
   This stylesheet is inlined into index.html, so url() resolves against the PAGE (fonts/ is right). */
@font-face{font-family:"Archivo Expanded";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/archivo-expanded-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/roboto-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* metric-matched fallbacks (fontTools: frequency-weighted advance width and typo metrics against Arial;
   capitals for the display face, since it is always set in uppercase) */
@font-face{font-family:"Archivo Expanded Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo"),local("Helvetica Neue"),local("Helvetica");size-adjust:129.77%;ascent-override:67.66%;descent-override:16.18%;line-gap-override:0%}
@font-face{font-family:"Roboto Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo"),local("Helvetica Neue"),local("Helvetica");size-adjust:100.53%;ascent-override:92.28%;descent-override:24.28%;line-gap-override:0%}

/* ============ TOKENS ============ */
:root{
  /* The page sits on lagoon water, so the default tokens are the ON-WATER colours (white text);
     every white card re-declares the on-paper set (see DAMAC LAGOON SKIN). Contrast on the water
     tile (mean #167984): white 5.1:1, sand #f0dfb2 3.8:1 (large text only). */
  --ink:#ffffff;
  --indigo:#ffffff;
  --indigo-deep:#07343b;      /* lagoon night: table heads, the active tab, dark buttons */
  --indigo-night:#05272d;     /* lagoon night: stat strip, dark bands, footer */
  --royal:#0f5e68;
  --gold:#ceba82;             /* DAMAC gold, the sand of the buttons */
  --gold-soft:#ecdcb0;
  --gold-bright:#f1e2b8;      /* sand on the lagoon-night bands */
  --gold-ink:#ffffff;         /* small labels on the water: white (sand fails AA at 10px) */
  --copper:#f0dfb2;           /* the second line of a heading, large text only */
  --rose:#b5b4b1;
  --cream:#f4f1ea;
  --cream-2:#e7eeee;
  --paper:#ffffff;
  --white:#ffffff;
  --muted:rgba(255,255,255,.9);
  --muted-light:rgba(255,255,255,.8);
  --line:rgba(255,255,255,.22);
  --line-gold:rgba(241,226,184,.5);
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow-soft:0 24px 70px -35px rgba(0,30,36,.55);
  --shadow-card:0 30px 90px -40px rgba(0,30,36,.6), 0 4px 18px -8px rgba(0,30,36,.22);
  --r-outer:.5rem;
  --r-inner:.3rem;
  --btn-r:999px;
  --display:"Archivo Expanded","Archivo Expanded Fallback",Arial,sans-serif;
  --text:"Roboto","Roboto Fallback",Arial,-apple-system,"Segoe UI",sans-serif;
  --mark:"Archivo Expanded","Archivo Expanded Fallback",Arial,sans-serif;

  --dark-rgb:4,30,36;
  --shadow-rgb:0,30,36;
  --royal-rgb:18,110,122;
  --accent-rgb:206,186,130;
  --tint-rgb:241,226,184;
  --paper-rgb:255,255,255;
  --paper2-rgb:244,241,234;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
.trust-item,.rera-inline,table.facts td,.foot-rera{overflow-wrap:anywhere}
html{scroll-behavior:smooth}
body{
  font-family:var(--text);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#fff}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
h1,h2,h3,.serif{font-family:var(--display);font-weight:300;letter-spacing:0;text-transform:uppercase}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}

/* grain */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ BELOW THE FOLD ============ */
/* The page is about 24,000 px tall on a phone. Without this the first frame lays out and
   paints all of it before anything shows; with it, each section is rendered as it nears the
   viewport. The hero is a <header>, so it is never skipped. */
/* content-visibility:auto was removed on 23 Sep 2026: its 1000px placeholders sent the nav links
   to the wrong place on a fresh visit and kept off-screen headings out of the accessibility tree */
@media(max-width:900px){.grain{display:none}}

/* ============ REVEAL ============ */
/* opacity + lift only: a blur filter here cost about a second of first-frame paint on phones */
.js .rv{opacity:0;transform:translateY(42px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .rv.in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:1.1rem 1rem 0;pointer-events:none}
.nav-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.4rem;
  background:rgba(var(--dark-rgb),.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(206,186,130,.22);
  border-radius:999px;
  padding:.55rem .65rem .55rem 1.35rem;
  box-shadow:0 18px 50px -20px rgba(var(--dark-rgb),.7);
  transition:background .5s var(--ease),transform .5s var(--ease);
  max-width:100%;
}
.nav.scrolled .nav-pill{background:rgba(var(--dark-rgb),.88)}
.nav-logo{display:flex;flex-direction:column;line-height:1.05;color:#fff;text-decoration:none;white-space:nowrap}
.nav-logo .l1{font-family:var(--mark);font-size:.95rem;letter-spacing:.12em;font-weight:400;color:var(--gold-bright)}
.nav-logo .l1 em{font-style:normal;color:#fff;font-weight:400}
.nav-logo .l2{font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:.25rem;font-weight:600}
.nav-links{display:flex;gap:1.15rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.8)}
.nav-links a{text-decoration:none;transition:color .4s var(--ease)}
.nav-links a:hover{color:var(--gold-bright)}
.nav-cta{
  display:flex;align-items:center;gap:.55rem;
  background:var(--gold);
  color:#0a0a0a;font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:.62rem .62rem .62rem 1.1rem;
  text-decoration:none;white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.nav-cta .dot{width:1.65rem;height:1.65rem;border-radius:999px;background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(var(--accent-rgb),.8)}
.nav-cta:hover .dot{transform:translate(2px,-1px) scale(1.06)}
.nav-cta:active{transform:scale(.98)}
.nav-phone{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.88);font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap}
.nav-phone:hover{color:var(--gold-bright)}
@media(max-width:900px){.nav-links,.nav-phone{display:none}.nav-pill{gap:.9rem}}
@media(max-width:640px){
  .nav{padding:.8rem .75rem 0}
  .nav-pill{width:100%;justify-content:space-between;gap:.5rem;padding:.45rem .45rem .45rem .95rem;overflow:hidden}
  .nav-logo{min-width:0}
  .nav-logo .l1{font-size:.72rem;letter-spacing:.14em}
  .nav-logo .l2{display:none}
  .nav-cta{font-size:.7rem;padding:.6rem .95rem;flex:none}
  .nav-cta .dot{display:none}
}

/* ============ HERO (mobile first) ============
   The developer's own hero: a photo banner (the family on the balcony) with the name and the
   price hook on its dark side, and nothing laid over the people. The lead form sits right under
   the banner, overlapping its bottom edge, so it is the next thing a thumb reaches.
   Phones: the portrait photo is pinned to the bottom of the banner at full width (its top is
   near black, the banner colour), and the bottom padding reserves 80vw for the family, so the
   faces always land below the text whatever the text height. */
.hero{position:relative;color:#fff;background:var(--cream)}
.hero-banner{position:relative;isolation:isolate;overflow:hidden;background:#0d0906;padding:5.6rem 1rem calc(80vw + 1.6rem)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img,.hero-bg video{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none}
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--dark-rgb),.38) 0%,rgba(var(--dark-rgb),.32) 32%,rgba(var(--dark-rgb),.22) 47%,rgba(var(--dark-rgb),0) 60%)}
.hero-wrap{width:min(1200px,100%);margin:0 auto}
.hero-copy{max-width:34rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(206,186,130,.35);
  background:rgba(255,255,255,.05);
  color:var(--gold-bright);
  border-radius:999px;padding:.4rem .95rem;
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.eyebrow .spark{width:5px;height:5px;border-radius:99px;background:var(--gold-bright);box-shadow:0 0 12px 2px rgba(var(--tint-rgb),.9)}
.hero h1{font-size:min(2rem,calc((100vw - 2.2rem)/12.7));line-height:1.14;font-weight:400;margin:1.1rem 0 .7rem;letter-spacing:.01em}
.hero h1 .gold{display:block;color:var(--gold-bright);margin-top:.12em}
.hero h1 .sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-at{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
/* price hook, in the developer's own two-part box */
.hero-price{display:inline-flex;align-items:stretch;margin-top:1.1rem;border:1px solid rgba(206,186,130,.55);background:rgba(13,9,6,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-price>div{display:flex;flex-direction:column;justify-content:center;gap:.32rem;padding:.75rem .95rem}
.hero-price .hp-at{border-left:1px solid rgba(206,186,130,.45)}
.hero-price .hp-big{font-family:var(--display);font-size:1.22rem;line-height:1;color:var(--gold-bright);text-transform:uppercase}
.hero-price .hp-lbl{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap}
.hero-price .hp-at .hp-lbl{color:var(--gold-bright)}
.hero-price .hp-val{font-family:var(--display);font-size:1.5rem;line-height:1;color:#fff;white-space:nowrap}
.hero-note{position:absolute;left:1rem;right:1rem;bottom:2.3rem;font-size:.55rem;letter-spacing:.04em;color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.hero-rule{width:3.2rem;height:1px;background:linear-gradient(90deg,var(--gold-bright),transparent);margin:1.3rem 0 0}

/* the band under the banner: the form card first, then the lead-in and the brochure */
.hero-lower{position:relative;z-index:2;color:var(--ink);padding:0 1rem 2.4rem}
.hero-lower-wrap{width:min(1200px,100%);margin:0 auto}
.hero-more{margin-top:1.8rem}
.hero-sub{font-family:var(--text);font-size:.95rem;line-height:1.6;color:var(--muted);max-width:40rem}
.hero-side{margin-top:1.2rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--white);border:1px solid var(--cream-2);
  border-radius:999px;padding:.42rem .85rem;
  font-size:.7rem;font-weight:600;color:var(--ink);
}
.chip svg{color:var(--gold)}

/* form card: double bezel (site visit section, on the dark band) */
.form-shell{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(206,186,130,.28);
  border-radius:var(--r-outer);
  padding:.45rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 100px -40px rgba(var(--dark-rgb),.85);
}
/* hero form: a white card on the ivory band, pulled up over the photo's bottom edge */
.hero .form-shell{
  position:relative;margin-top:-1.6rem;padding:0;
  background:var(--white);
  border:1px solid var(--cream-2);
  border-radius:.6rem;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 70px -36px rgba(var(--shadow-rgb),.5),0 6px 18px -10px rgba(var(--shadow-rgb),.18);
}
.form-core{background:var(--paper);border-radius:var(--r-inner);padding:1.7rem 1.6rem 1.45rem;color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.hero .form-core{background:transparent;border-radius:.6rem;padding:1.4rem 1.15rem 1.2rem;box-shadow:none}
.form-core h3,.form-core .form-title{font-size:1.3rem;font-weight:400;line-height:1.2}
.form-core .fsub{font-size:.78rem;color:var(--muted);margin:.4rem 0 1.15rem}
.fld{margin-bottom:.8rem}
.fld label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.fld input,.fld select{
  width:100%;border:1px solid var(--line);background:var(--white);
  border-radius:.45rem;padding:.8rem 1rem;font-size:.95rem;color:var(--ink);
  outline:none;transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.fld select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c6473' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fld input:focus,.fld select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.25)}
.telwrap{display:flex;align-items:stretch;width:100%}
.telwrap select.cc{
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--line);border-right:none;border-radius:.45rem 0 0 .45rem;
  background:var(--cream) url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235d5d5d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .5rem center;
  font-size:.78rem;font-weight:700;color:var(--ink);
  padding:0 1.3rem 0 .6rem;max-width:6.4rem;outline:none;
}
.telwrap select.cc:focus{border-color:var(--gold)}
.telwrap input{border-radius:0 .45rem .45rem 0;flex:1;min-width:0}
.fld .err{display:none;font-size:.7rem;color:#b3403f;margin-top:.3rem;font-weight:600}
.fld.bad input{border-color:#c96a5a}
.fld.bad .err{display:block}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:var(--btn-r);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.95rem 1.05rem .95rem 1.5rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
  text-decoration:none;white-space:nowrap;
}
.btn .ic{width:1.9rem;height:1.9rem;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease);flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translate(2px,-2px) scale(1.07)}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:#0a0a0a;width:100%;box-shadow:0 16px 40px -18px rgba(var(--accent-rgb),.65)}
.btn-gold .ic{background:rgba(0,0,0,.12)}
.btn-gold:hover{background:var(--gold-soft);box-shadow:0 20px 46px -16px rgba(var(--accent-rgb),.85)}
.btn-ghost{border:1px solid var(--line);color:var(--indigo);background:var(--white)}
.btn-ghost .ic{background:rgba(var(--shadow-rgb),.07)}
.btn-ink{background:var(--indigo-deep);color:#fff;box-shadow:0 16px 40px -18px rgba(var(--shadow-rgb),.7)}
.btn-ink .ic{background:rgba(255,255,255,.12)}
.btn-fit{width:auto}
.btn-line{border:1px solid rgba(206,186,130,.45);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn-line .ic{background:rgba(255,255,255,.12)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.form-alt{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.85rem}
.form-alt button{font-size:.8rem;font-weight:700;color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.consent{font-size:.62rem;color:var(--muted);line-height:1.5;margin-top:.9rem}
.consent a{color:var(--indigo);font-weight:700}
.nw{white-space:nowrap}

@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
/* the glint: a narrow bright band crosses the button in 1.3 s, then 3 s of rest, so it reads as light on metal
   and not as a moving smudge (a wide half-white band on the old sand looked like a stain, 25 Sep 2026) */
@keyframes ctaShine{0%{transform:translateX(-160%) skewX(-20deg)}30%,100%{transform:translateX(430%) skewX(-20deg)}}
.cta-anim{position:relative;overflow:hidden;animation:ctaPulse 2.6s var(--ease) infinite}
.cta-anim::before{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:0;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 100%);animation:ctaShine 4.2s cubic-bezier(.45,.05,.25,1) infinite;pointer-events:none}
.cta-anim:hover{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.cta-anim{animation:none}.cta-anim::before{animation:none;display:none}}

/* tablets and wide phones: bigger type and a two-column form. Upright tablets keep the phone
   composition (the portrait photo pinned to the banner bottom, the text on its dark top, the family
   below), so the photo shows through behind the text as on phones; 76vw stays free for the family. */
@media(min-width:641px){
  .hero-banner{padding:7rem 1.5rem calc(76vw + 1.6rem)}
  .hero h1{font-size:clamp(2rem,4.4vw,2.6rem)}
  .hero-at{font-size:.68rem}
  .hero-note{left:auto;right:1.5rem;max-width:32rem;text-align:right}
  .hero-lower{padding:0 1.5rem 3rem}
  .hero .form-core{padding:1.6rem 1.5rem 1.3rem}
  #heroForm{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  #heroForm .btn-gold{grid-column:1/-1}
  .hero-more{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem 2.4rem;align-items:start}
  .hero-side{margin-top:0}
}
/* phones and small tablets held sideways: the desktop banner composition fitted to a short screen,
   the landscape photo covering the banner, text on its dark left, the family on the right */
@media(max-width:980px) and (orientation:landscape){
  .hero-banner{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:5.1rem 1.25rem 4rem}
  .hero-bg img,.hero-bg video{top:0;height:100%;object-fit:cover;object-position:0% 40%}
  .hero-veil{background:
    linear-gradient(90deg,rgba(var(--dark-rgb),.66) 0%,rgba(var(--dark-rgb),.42) 36%,rgba(var(--dark-rgb),0) 58%),
    linear-gradient(180deg,rgba(var(--dark-rgb),.45) 0%,rgba(var(--dark-rgb),0) 22%)}
  .hero-copy{max-width:min(26rem,48%)}
  .hero h1{font-size:clamp(1.3rem,3.2vw,1.8rem);margin:.7rem 0 .45rem}
  .eyebrow{font-size:.52rem;padding:.3rem .75rem}
  .hero-price{margin-top:.8rem}
  .hero-note{bottom:2.4rem}
}
/* very short sideways screens (iPhone SE and similar, about 320 px tall): name and price only */
@media(max-width:980px) and (orientation:landscape) and (max-height:360px){
  .hero-banner{padding-top:4.5rem}
  .eyebrow,.hero-at{display:none}
  .hero-copy{max-width:min(24rem,58%)}
  .hero h1{font-size:1.15rem;margin-top:0}
}
/* desktop: the developer's banner at its own 20:9 shape, text on its dark left, the family
   whole on the right; the form becomes one bar across the banner's bottom edge */
@media(min-width:981px){
  .hero-banner{display:flex;align-items:center;min-height:45vw;padding:7.2rem 1.5rem 5.4rem}
  .hero-bg img,.hero-bg video{top:0;height:100%;object-fit:cover;object-position:62% 40%}
  .hero-veil{top:0;height:auto;background:
    linear-gradient(90deg,rgba(var(--dark-rgb),.6) 0%,rgba(var(--dark-rgb),.36) 30%,rgba(var(--dark-rgb),0) 50%),
    linear-gradient(180deg,rgba(var(--dark-rgb),.45) 0%,rgba(var(--dark-rgb),0) 18%),
    linear-gradient(0deg,rgba(var(--dark-rgb),.35) 0%,rgba(var(--dark-rgb),0) 22%)}
  .hero h1{font-size:clamp(2.1rem,2.9vw,2.6rem);margin:1.3rem 0 .8rem}
  .hero-price>div{padding:.85rem 1.15rem}
  .hero-price .hp-big{font-size:1.35rem}
  .hero-price .hp-val{font-size:1.7rem}
  .hero-note{bottom:4.1rem}
  .hero .form-shell{margin-top:-3.3rem}
  .hero .form-core{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t s a" "f f f" "c c c";column-gap:1.4rem;align-items:baseline;padding:1.25rem 1.6rem 1rem}
  .hero .form-core .form-title{grid-area:t;font-size:1.15rem;line-height:1.2}
  .hero .form-core .fsub{grid-area:s;margin:0;font-size:.78rem}
  #heroForm{grid-area:f;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.9fr);gap:0 1rem;margin-top:1rem;align-items:start}
  #heroForm .fld{margin-bottom:.6rem}
  .hero .form-alt{grid-area:a;justify-content:flex-end;margin-top:0}
  .hero .consent{grid-area:c;margin-top:.2rem}
  .hero-lower{padding:0 1.5rem 3.2rem}
  .hero-more{margin-top:2.2rem;align-items:center}
  .hero-sub{font-size:1rem}
}
@media(min-width:1180px){
  #heroForm{grid-template-columns:1fr 1.2fr .9fr auto}
  #heroForm .btn-gold{grid-column:auto;width:auto;align-self:start;margin-top:calc(.62rem * 1.5 + .35rem);padding:.62rem .62rem .62rem 1.3rem}
}
@media(max-width:640px){
  .sec{padding-top:2.6rem;padding-bottom:2.6rem}
  .sec-head{margin-bottom:1.4rem}
  .sec-head .lead{font-size:.9rem}
  .band{padding:3.5rem 1.1rem}
  .visit-grid{gap:1.6rem}
  .answer-grid{gap:1.5rem}
  .ov-grid{gap:1.5rem}
  .loc-grid{gap:1.4rem}
  .gal-grid{gap:.7rem}
}
@media(max-width:400px){
  .hero-price>div{padding:.65rem .75rem}
  .hero-price .hp-cfg .hp-lbl{white-space:normal;line-height:1.35}
  .hero-price .hp-big{font-size:1.08rem}
  .hero-price .hp-val{font-size:1.3rem}
}
@media(max-width:420px){
  .hero-banner{padding-left:.95rem;padding-right:.95rem}
  .hero-lower{padding-left:.8rem;padding-right:.8rem}
  .eyebrow{font-size:.52rem;letter-spacing:.14em;white-space:normal;line-height:1.6}
  .form-core{padding:1.3rem 1rem 1.1rem}
  .btn{white-space:normal;font-size:.72rem;letter-spacing:.1em;padding:.85rem .9rem .85rem 1.1rem}
  .sec{padding-left:1rem;padding-right:1rem}
}

/* ============ SECTIONS ============ */
.sec{padding:4.8rem 1.25rem}
.wrap{width:min(1160px,100%);margin:0 auto}
.sec-head{max-width:46rem;margin-bottom:2.2rem}
.sec-head h2{font-size:clamp(1.55rem,2.8vw,2.4rem);line-height:1.2;font-weight:400;letter-spacing:.01em;margin-top:1.1rem}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em{font-style:normal;font-weight:400;color:var(--copper)}
.visit h2 em{color:var(--gold-bright)}
.sec-head .lead{margin-top:1.1rem;color:var(--muted);font-size:.98rem}
.eyebrow-dark{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line-gold);background:rgba(var(--accent-rgb),.10);
  color:var(--gold-ink);border-radius:999px;padding:.36rem .9rem;
  font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
}
.eyebrow-dark::before{content:"";width:1.1rem;height:1px;background:var(--gold)}

/* project stat strip */
.trust{background:var(--indigo-night);color:#fff;padding:0 1.25rem;position:relative;border-top:1px solid rgba(206,186,130,.25)}
.trust-wrap{width:min(1160px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr)}
.pstat{padding:1.2rem .6rem;text-align:center;border-left:1px solid rgba(255,255,255,.08)}
.pstat:first-child{border-left:none}
.pstat .v{font-family:var(--display);font-size:1.21rem;color:var(--gold-bright);font-weight:400;line-height:1.15;overflow-wrap:anywhere}
.pstat .k{font-size:.54rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:.3rem}
@supports (grid-template-rows: subgrid){.pstat{display:grid;grid-row:span 2;grid-template-rows:subgrid}.pstat .v{align-self:end}.pstat .k{align-self:start}}
@media(max-width:1199px){.trust-wrap{grid-template-columns:repeat(4,1fr)}.pstat:nth-child(5){border-left:none}}
@media(max-width:619px){.trust-wrap{grid-template-columns:repeat(2,1fr)}.pstat{border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:.85rem .5rem}.pstat:nth-child(-n+2){border-top:none}}

/* answer + facts */
.answer-band{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.answer-line{font-family:var(--display);font-size:clamp(1.33rem,2.4vw,1.79rem);line-height:1.32;font-weight:500}
.answer-line strong{font-weight:700;color:var(--indigo)}
.answer-more{margin-top:1.2rem;font-size:.95rem;color:var(--muted);line-height:1.75}
.answer-more b{color:var(--ink);font-weight:700}
.answer-cta{margin-top:1.4rem}
.facts-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.facts-core{border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden}
table.facts{width:100%;border-collapse:collapse;font-size:.86rem}
table.facts td{padding:.72rem 1.1rem;vertical-align:top}
table.facts tr+tr td{border-top:1px solid var(--line)}
table.facts td:first-child{font-weight:700;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:38%;padding-top:.85rem}
table.facts td:last-child{font-weight:600}
@media(max-width:900px){.answer-grid{grid-template-columns:1fr;gap:2rem}}

/* overview split */
.ov-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.ov-img-shell{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card);transform:rotate(1deg)}
.ov-img-shell img{border-radius:var(--r-inner);width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.imgcap{font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem;text-align:right;padding-right:.4rem}
.feature-list{display:grid;gap:.85rem;margin-top:1.6rem}
.feature{display:flex;gap:.85rem;align-items:flex-start}
.feature .fi{flex:none;width:2.1rem;height:2.1rem;border-radius:.6rem;background:rgba(var(--accent-rgb),.12);border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.feature p{font-size:.9rem;color:var(--ink)}
.feature p b{font-weight:700}
.ebro-side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:3rem;height:3rem;border-radius:999px;
  background:rgba(255,255,255,.96);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
  transition:all .4s var(--ease);
}
.ebro-side:hover{background:var(--gold);color:#fff;transform:translateY(-50%) scale(1.06)}
.ebro-side.prev{left:.9rem}
.ebro-side.next{right:.9rem}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr;gap:2rem}.ov-img-shell{transform:none}}
@media(max-width:640px){.ebro-side{width:2.6rem;height:2.6rem}.ebro-side.prev{left:.5rem}.ebro-side.next{right:.5rem}}

/* price table */
.price-band{background:var(--cream)}
.price-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.price-core{border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden}
.price-scroll{overflow-x:auto}
table.price{width:100%;border-collapse:collapse;min-width:640px}
table.price th{background:var(--indigo-deep);color:#fff;text-align:left;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.95rem 1.25rem}
table.price td{padding:1.05rem 1.25rem;font-size:.92rem;border-top:1px solid var(--line);vertical-align:middle}
table.price .cfg{font-family:var(--display);font-size:1.15rem;font-weight:400;display:flex;flex-direction:column;line-height:1.05;gap:.18rem}
table.price .cfg .c-sm{font-family:var(--text);font-size:.52rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
table.price .pr{font-weight:700;color:var(--gold-ink);white-space:nowrap}
table.price .act button{font-size:.7rem;font-weight:700;color:var(--indigo);border:1px solid var(--line-gold);padding:.5rem .95rem;border-radius:999px;white-space:nowrap;transition:all .4s var(--ease);animation:gpGlow 2.8s var(--ease) infinite}
@keyframes gpGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.28)}}
table.price tbody tr:nth-child(2) .act button{animation-delay:.35s}
table.price tbody tr:nth-child(3) .act button{animation-delay:.7s}
table.price tbody tr:nth-child(4) .act button{animation-delay:1.05s}
table.price tbody tr:nth-child(5) .act button{animation-delay:1.4s}
table.price tbody tr:nth-child(6) .act button{animation-delay:1.75s}
table.price .act button:hover{animation-play-state:paused;background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
@media (prefers-reduced-motion: reduce){table.price .act button{animation:none}}
.price-notes{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-top:1.2rem;font-size:.68rem;color:var(--muted)}
.price-notes span{display:inline-flex;gap:.4rem;align-items:center}
.pay-line{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;background:var(--white);border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1.15rem}
.pay-line h3{font-family:var(--text);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pay-line p{font-size:.82rem;color:var(--muted)}
.price-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
@media(max-width:760px){
  .price-scroll table.price{min-width:0}
  .price-scroll table.price th:nth-child(2),.price-scroll table.price td:nth-child(2){display:none}
  .price-scroll table.price th{padding:.8rem .7rem;font-size:.58rem;letter-spacing:.1em}
  .price-scroll table.price td{padding:.9rem .7rem}
  .price-scroll table.price .pr{white-space:normal}
  .price-scroll table.price .act button{padding:.45rem .7rem;font-size:.66rem}
  table.price .cfg{font-size:1rem;gap:0}
  /* the SEO label around the configuration name ("DAMAC Islands 4 Bedroom Townhouse Price") stays in
     the markup but leaves the narrow phone column to the name itself */
  table.price .cfg .c-sm{font-size:.5rem;letter-spacing:.12em}   /* visible on phones too: hidden keyword text is a mobile-first indexing risk (gate, 24 Sep 2026) */
}

/* location */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
.loc-groups{display:grid;gap:1rem}
.loc-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.35rem 1.45rem;box-shadow:var(--shadow-soft)}
.loc-card h3{font-size:.66rem;font-weight:700;font-family:var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.loc-card ul{list-style:none;display:grid;gap:.5rem}
.loc-card li{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}
.loc-card li b{font-weight:600}
.loc-card li span{color:var(--muted);white-space:nowrap;font-weight:700;font-size:.78rem}
.loc-map{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.loc-map img{border-radius:var(--r-inner);width:100%;aspect-ratio:1600/1540;object-fit:cover}
.growth{margin-top:1.2rem;display:grid;gap:.7rem}
.growth p{display:flex;gap:.7rem;font-size:.88rem;align-items:flex-start}
.growth svg{flex:none;margin-top:.2rem;color:var(--gold)}
.map-embed{border-radius:var(--r-inner);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);margin-top:1.4rem}
.map-embed iframe{display:block;width:100%;height:280px;border:0}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr;gap:1.8rem}}

/* full-bleed band */
.band{position:relative;color:#fff;padding:6.5rem 1.25rem;isolation:isolate;text-align:center}
.band-bg{position:absolute;inset:0;z-index:-2}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.band-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(var(--dark-rgb),.86),rgba(var(--dark-rgb),.32) 45%,rgba(var(--dark-rgb),.55))}
.band h2{font-size:clamp(1.9rem,3.7vw,3.2rem);font-weight:500;line-height:1.14}
.band h2 em{color:var(--gold-bright)}
.band p{max-width:38rem;margin:1.2rem auto 0;color:rgba(255,255,255,.88);font-size:.95rem}
.band .imgcap-l{position:absolute;bottom:1rem;right:1.4rem;font-size:.58rem;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase}
.band .band-rule{width:4rem;height:1px;background:var(--gold-bright);margin:0 auto 1.4rem;opacity:.8}

/* construction / status */
.pos-note{margin-top:2rem;display:flex;gap:1rem;align-items:flex-start;background:rgba(var(--accent-rgb),.08);border:1px solid var(--line-gold);border-radius:1rem;padding:1.3rem 1.5rem;max-width:52rem}
.pos-note svg{flex:none;color:var(--gold-ink);margin-top:.15rem}
.pos-note p{font-size:.9rem}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.status-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.3rem 1.3rem;box-shadow:var(--shadow-soft)}
.status-card .n{font-family:var(--display);font-size:1.55rem;font-weight:400;color:var(--indigo);line-height:1.1}
.status-card .t{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
@media(max-width:900px){.status-grid{grid-template-columns:repeat(2,1fr)}}

/* floor plans */
.fp-band{background:var(--cream)}
.fp-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2rem}
.fp-hint{display:inline-flex;align-items:center;gap:.45rem;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem}
.fp-hint svg{color:var(--gold)}
.fp-tab{
  border:1px solid var(--line-gold);background:var(--white);color:var(--ink);
  border-radius:999px;padding:.7rem 1.3rem;font-size:.8rem;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.12);
  transition:all .45s var(--ease);
  animation:gpGlow 2.8s var(--ease) infinite;
}
.fp-tab:nth-child(2){animation-delay:.3s}.fp-tab:nth-child(3){animation-delay:.6s}.fp-tab:nth-child(4){animation-delay:.9s}.fp-tab:nth-child(5){animation-delay:1.2s}.fp-tab:nth-child(6){animation-delay:1.5s}
.fp-tab:hover{transform:translateY(-2px);background:rgba(var(--accent-rgb),.14);animation-play-state:paused}
.fp-tab.on{animation:none;background:var(--indigo-deep);border-color:var(--indigo-deep);color:#fff;box-shadow:0 12px 30px -14px rgba(var(--shadow-rgb),.6)}
@media (prefers-reduced-motion: reduce){.fp-tab{animation:none}}
.fp-panel{display:none;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.fp-panel.on{display:grid;animation:fpin .7s var(--ease)}
@keyframes fpin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fp-img-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.fp-img-shell img{border-radius:var(--r-inner);width:100%;height:auto;background:#fff;object-fit:contain;max-height:470px;padding:.9rem}
.fp-meta h3{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:400;margin-bottom:.5rem;line-height:1.2}
.fp-meta .sub{color:var(--muted);font-size:.88rem;margin-bottom:1.3rem}
.fp-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.5rem}
.fp-spec{background:var(--white);border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1rem}
.fp-spec .v{font-family:var(--display);font-size:1.38rem;font-weight:400;color:var(--indigo);line-height:1.1}
.fp-spec .k{font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.fp-pts{display:grid;gap:.5rem;margin-bottom:1.6rem}
.fp-pts p{display:flex;gap:.6rem;font-size:.86rem;align-items:center}
.fp-pts svg{color:var(--gold);flex:none}
@media(max-width:900px){.fp-panel{grid-template-columns:1fr;gap:1.6rem}.fp-specs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.fp-spec .v{font-size:1.2rem}}

/* half-visible tease: image sharp on top, lower half frosted with the CTA */
.gate2{position:relative;overflow:hidden;border-radius:var(--r-inner);background:#fff}
.gate2 img{display:block;width:100%;height:auto}
.g2-ov{
  position:absolute;left:0;right:0;bottom:0;height:58%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  text-align:center;padding:1.4rem 1rem .9rem;
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(var(--paper2-rgb),.82));
  mask-image:linear-gradient(180deg,transparent 0,#000 22%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
}
.gate-lock{width:2.9rem;height:2.9rem;border-radius:999px;background:var(--indigo-deep);color:var(--gold-bright);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(var(--shadow-rgb),.6)}
.gate-note{font-size:.7rem;font-weight:700;color:var(--indigo);max-width:16rem}

/* amenities */
.amen-hero{border-radius:var(--r-outer);overflow:hidden;position:relative;box-shadow:var(--shadow-card);margin-bottom:2.6rem;border:1px solid var(--line)}
.amen-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.amen-hero .tag{position:absolute;left:1.4rem;bottom:1.2rem;background:rgba(var(--dark-rgb),.72);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(206,186,130,.3);border-radius:999px;padding:.5rem 1.1rem;font-size:.7rem;font-weight:700;letter-spacing:.08em}
.amen-hero .cap{position:absolute;right:1.2rem;bottom:1.2rem;font-size:.56rem;color:rgba(255,255,255,.6);letter-spacing:.1em;text-transform:uppercase}
.amen-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.amen-col{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.5rem 1.5rem 1.2rem;box-shadow:var(--shadow-soft)}
.amen-col h3{font-family:var(--text);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1rem;display:flex;gap:.5rem;align-items:center}
.amen-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.amen-tags span{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:.38rem .8rem;font-size:.72rem;font-weight:600;color:var(--ink)}
@media(max-width:900px){.amen-cols{grid-template-columns:1fr}.amen-hero img{aspect-ratio:16/10}}

/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gal-item{border-radius:.9rem;overflow:hidden;border:1px solid var(--line);position:relative;box-shadow:var(--shadow-soft)}
.gal-item img{aspect-ratio:4/2.9;object-fit:cover;width:100%;transition:transform 1.2s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item span{position:absolute;left:.85rem;bottom:.7rem;color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.gal-item .tag2{left:auto;right:.85rem;font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.75;font-size:.56rem}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr)}.gal-item .tag2{display:none}}

/* master plan */
.mp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.8rem;align-items:center}
.mp-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.mp-shell img{border-radius:var(--r-inner);width:100%;background:#fff;aspect-ratio:1600/1439;object-fit:cover}
.mp-pts{display:grid;gap:.8rem;margin-top:1.4rem}
.mp-pts p{display:flex;gap:.7rem;font-size:.9rem;align-items:flex-start}
.mp-pts svg{flex:none;margin-top:.2rem;color:var(--gold)}
@media(max-width:900px){.mp-grid{grid-template-columns:1fr;gap:1.8rem}}

/* specifications */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem}
.spec-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.35rem 1.4rem;box-shadow:var(--shadow-soft)}
.spec-card h3{font-family:var(--text);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem}
.spec-card p{font-size:.84rem;color:var(--muted)}
@media(max-width:900px){.spec-grid{grid-template-columns:1fr}}

/* developer */
.dev-band{background:var(--indigo-night);color:#fff;position:relative;overflow:hidden}
.dev-band::before{content:"";position:absolute;width:60rem;height:60rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--royal-rgb),.6),transparent 60%);top:-30rem;right:-20rem;pointer-events:none}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.dev-band .eyebrow-dark{border-color:rgba(206,186,130,.4);background:rgba(206,186,130,.08);color:var(--gold-bright)}
.dev-band h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.14;margin-top:1.1rem;color:#fff}
.dev-band h2 em{color:var(--gold-bright)}
.dev-copy p{font-size:.95rem;color:rgba(255,255,255,.86);margin-top:1.1rem}
.dev-copy p b{color:#fff}
.dev-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.dev-stat{background:rgba(255,255,255,.05);border:1px solid rgba(206,186,130,.22);border-radius:1rem;padding:1.4rem;box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.dev-stat .n{font-family:var(--display);font-size:2.15rem;color:var(--gold-bright);font-weight:400;line-height:1}
.dev-stat .n span{color:rgba(255,255,255,.7);font-size:1.1rem}
.dev-stat .t{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.5rem}
@media(max-width:900px){.dev-grid{grid-template-columns:1fr}}
@media(max-width:640px){.dev-stats{gap:.7rem}.dev-stat{padding:1.05rem 1rem}.dev-stat .n{font-size:1.55rem}.dev-stat .n span{font-size:.9rem}}

/* site visit band */
.visit{background:linear-gradient(160deg,var(--indigo-deep),var(--indigo-night));color:#fff;position:relative;overflow:hidden}
.visit::after{content:"";position:absolute;width:44rem;height:44rem;border-radius:99rem;background:radial-gradient(circle,rgba(206,186,130,.12),transparent 62%);bottom:-24rem;left:-14rem;pointer-events:none}
.visit-grid{display:grid;grid-template-columns:1fr .95fr;gap:3.4rem;align-items:center;position:relative;z-index:1}
.visit h2{font-size:clamp(1.85rem,3.4vw,2.85rem);font-weight:500;line-height:1.14}
.visit .vp{color:rgba(255,255,255,.86);margin-top:1.2rem;font-size:.95rem;max-width:30rem}
.visit-usps{display:grid;gap:.75rem;margin-top:1.8rem}
.visit-usps p{display:flex;gap:.65rem;align-items:center;font-size:.88rem;color:rgba(255,255,255,.88)}
.visit-usps svg{color:var(--gold-bright);flex:none}
.visit-alt{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media(max-width:900px){.visit-grid{grid-template-columns:1fr;gap:2.2rem}}

/* FAQ */
.faq-list{max-width:52rem}
details.faq{background:var(--white);border:1px solid var(--line);border-radius:.9rem;margin-bottom:.8rem;overflow:hidden;box-shadow:var(--shadow-soft);transition:box-shadow .5s var(--ease)}
details.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.4rem;cursor:pointer;font-weight:700;font-size:.95rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .pm{flex:none;width:1.8rem;height:1.8rem;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--indigo);transition:transform .5s var(--ease),background .5s var(--ease);position:relative}
details.faq[open] summary .pm{transform:rotate(45deg);background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
details.faq summary .pm::before,details.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
details.faq summary .pm::before{width:.8rem;height:2px}
details.faq summary .pm::after{width:2px;height:.8rem}
details.faq summary:hover .pm{border-color:var(--indigo)}
.faq-hint{margin:.7rem 0 0}
details.faq .fa{padding:0 1.4rem 1.3rem;font-size:.9rem;color:var(--muted)}

/* footer */
footer{background:var(--indigo-night);color:rgba(255,255,255,.65);padding:4rem 1.25rem 8rem;font-size:.8rem;border-top:1px solid rgba(206,186,130,.2)}
.foot-wrap{width:min(1160px,100%);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .l1{font-family:var(--mark);font-size:1.05rem;color:var(--gold-bright);letter-spacing:.14em;font-weight:400}
.foot-brand .l1 em{font-style:normal;color:#fff;font-weight:400}
.foot-brand .l2{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.74);margin-top:.35rem}
.foot-brand p{margin-top:1.1rem;max-width:30rem;line-height:1.7}
footer h3{color:#fff;font-family:var(--text);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;overflow-wrap:anywhere}
.foot-rera{font-size:.78rem;line-height:1.8}
.foot-rera b{color:#fff;word-break:break-all}
.foot-rera a{color:var(--gold-bright);font-weight:700}
.disclaimer{margin-top:2rem;font-size:.68rem;line-height:1.75;color:rgba(255,255,255,.74)}
.copyline{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.68rem;color:rgba(255,255,255,.74)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr}}

/* sticky mobile bar: the developer's own, flush plum blocks and a rose-gold price button.
   Visible from the first paint (no JS needed); app.js adds .hide only while the visitor is typing
   in a form, when the on-screen keyboard is up, and removes it the moment typing stops. */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:0 0 env(safe-area-inset-bottom);
  background:var(--indigo-night);
  display:flex;gap:0;
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.5);
  transform:translateY(0);
  transition:transform .35s var(--ease);
}
.sticky-bar.hide{transform:translateY(110%)}
.sticky-bar a,.sticky-bar button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.45rem;border-radius:0;padding:1.1rem .4rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sb-call{background:var(--indigo-night);color:#fff}
.sb-wa{background:#188246;color:#fff}
/* three equal thirds, same type and icon size, as the user asked (23 Sep 2026) */
.sticky-bar .sb-cta{background:linear-gradient(90deg,#e6dab4 0%,#b5b4b1 50%,#e6dab4 100%);color:var(--indigo-night)}
.sticky-bar svg{width:15px;height:15px;flex:none}
@media(max-width:480px){.sticky-bar a,.sticky-bar button{padding:1.05rem .25rem;font-size:.64rem;letter-spacing:.07em;gap:.38rem}.sticky-bar svg{width:13px;height:13px}}
@media(max-width:374px){.sticky-bar a,.sticky-bar button{font-size:.6rem;letter-spacing:.05em;gap:.3rem}.sticky-bar .sb-cta svg{display:none}}
@media(min-width:901px){.sticky-bar{display:none}footer{padding-bottom:4rem}}

/* side enquire tab (desktop) */
.side-tab{
  position:fixed;right:0;top:50%;z-index:56;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  background:var(--gold);color:#0a0a0a;
  font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.1rem .68rem;border-radius:0 .6rem .6rem 0;
  box-shadow:-8px 8px 30px -12px rgba(var(--accent-rgb),.7);
  transition:transform .45s var(--ease);
  display:none;
}
.side-tab:hover{transform:translateY(-50%) rotate(180deg) translateY(-3px)}
@media(min-width:901px){.side-tab{display:block}}

/* WA float (desktop, bottom-left) */
.wa-float{position:fixed;left:1.4rem;bottom:1.4rem;z-index:54;width:3.4rem;height:3.4rem;border-radius:999px;background:#1ea952;color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 18px 44px -14px rgba(30,169,82,.7);transition:transform .45s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
@media(min-width:901px){.wa-float.enabled{display:flex}}

/* lightbox */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(var(--dark-rgb),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb.open{display:flex}
.lb img{max-width:min(1150px,94vw);max-height:80vh;object-fit:contain;border-radius:.6rem;background:#fff;box-shadow:0 50px 130px -40px rgba(0,0,0,.9)}
.lb-cap{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.88);font-size:.76rem;font-weight:700;background:rgba(var(--dark-rgb),.75);border:1px solid rgba(206,186,130,.25);border-radius:999px;padding:.5rem 1.15rem;max-width:88vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-x{position:absolute;top:1.1rem;right:1.1rem;width:2.6rem;height:2.6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease)}
.lb-x:hover{background:rgba(255,255,255,.25)}

/* modal */
.modal{position:fixed;inset:0;z-index:70;display:none}
.modal.open{display:block}
.modal-veil{position:absolute;inset:0;background:rgba(var(--dark-rgb),.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
.modal.open .modal-veil{opacity:1}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);opacity:0;
  width:min(460px,calc(100% - 2rem));
  background:var(--paper);border-radius:1.2rem;
  box-shadow:0 60px 140px -40px rgba(var(--dark-rgb),.9);
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  overflow:hidden;border-top:3px solid var(--gold);
}
.modal.open .modal-card{transform:translate(-50%,-50%) scale(1);opacity:1}
@media(max-width:640px){
  /* a centred popup on phones too (it used to rise from the bottom); it scrolls inside
     itself when the keyboard or a short screen leaves less room than the form needs */
  .modal-card{width:calc(100% - 1.6rem);max-width:26rem;max-height:calc(100dvh - 2rem);overflow-y:auto;border-radius:1.1rem}
  .modal-head{padding:1.25rem 1.2rem .3rem}
  .modal-head h3{font-size:1.25rem}
  .modal-body{padding:.8rem 1.2rem 1.2rem}
  .succ{padding:2rem 1.2rem}
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.6rem .4rem}
.modal-head h3{font-size:1.4rem;font-weight:500;line-height:1.15}
.modal-head p{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.modal-x{flex:none;width:2.1rem;height:2.1rem;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .4s var(--ease)}
.modal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.modal-body{padding:1rem 1.6rem 1.6rem}
.succ{padding:2.4rem 1.7rem;text-align:center;display:none}
.succ .big{width:3.6rem;height:3.6rem;margin:0 auto 1.1rem;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.succ h3{font-size:1.45rem;font-weight:500}
.succ p{font-size:.84rem;color:var(--muted);margin:.6rem 0 1.4rem}
.succ .btn{width:100%;margin-bottom:.6rem}

/* ============ virtual tour ============ */
.tour{background:var(--indigo-night);color:#fff;position:relative;overflow:hidden}
.tour::before{content:"";position:absolute;width:52rem;height:52rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--royal-rgb),.55),transparent 60%);top:-26rem;left:-18rem;pointer-events:none}
.tour .wrap{position:relative;z-index:1}
.tour .eyebrow-dark{border-color:rgba(206,186,130,.4);background:rgba(206,186,130,.08);color:var(--gold-bright)}
.tour .sec-head h2 em{color:var(--gold-bright)}
.tour .sec-head .lead{color:rgba(255,255,255,.86)}
.tour-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-outer);overflow:hidden;isolation:isolate;background:#000;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.tour-stage picture{position:absolute;inset:0;display:block;z-index:0}
.tour-stage img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:transform 1.4s var(--ease)}
.tour-stage[data-state=idle]:hover img{transform:scale(1.035)}
.tour.teaser .tour-stage{cursor:pointer}
.tour.teaser .tour-stage img{object-position:center 45%}
.tour-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(var(--dark-rgb),.10),rgba(var(--dark-rgb),.16) 50%,rgba(var(--dark-rgb),.80));pointer-events:none}
/* the film itself, and the shield that keeps every click and hover away from it.
   The player is 30% taller than the stage and pulled up by half of that: the 16:9 film
   still fits the stage edge to edge, but the player's own title bar (top) and its
   "more videos" strip and logo (bottom) land in the letterbox bands, outside the frame. */
.tour-host{position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:1;opacity:0;background:#000;transition:opacity .6s var(--ease)}
.tour-host iframe,.tour-host div{display:block;width:100%;height:100%;border:0}
.tour-shield{position:absolute;inset:0;z-index:2;display:none;cursor:pointer}
/* armed: a cued player waits under the poster and the poster lets the tap through to it */
.tour-stage.armed[data-state=idle] picture,.tour-stage.armed[data-state=idle] .tour-veil,.tour-stage.armed[data-state=idle] .tour-play,.tour-stage.armed[data-state=idle] .tour-meta{pointer-events:none}
.tour-stage.armed[data-state=idle]{cursor:pointer}
/* a fully transparent cross-origin iframe does not get the click in Chrome; 1% keeps it invisible and clickable */
.tour-stage.armed[data-state=idle] .tour-host{opacity:.01}
.tour-stage.active .tour-shield{display:block}
.tour-stage.active:not([data-state=loading]) .tour-host{opacity:1}
.tour-stage.active:not([data-state=loading]) picture,.tour-stage.active:not([data-state=loading]) .tour-veil,.tour-stage.active .tour-meta{display:none}
/* the opening play button doubles as the loading indicator */
.tour-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6.4rem;height:6.4rem;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:#fff;z-index:3}
.tour-stage.active:not([data-state=loading]) .tour-play{display:none}
.tour-play .ring{position:absolute;inset:0;border-radius:99rem;border:1px solid rgba(206,186,130,.6);animation:tourRing 2.8s var(--ease) infinite}
.tour-play .ring.r2{animation-delay:1s}
@keyframes tourRing{0%{transform:scale(.72);opacity:.95}100%{transform:scale(1.85);opacity:0}}
.tour-play .disc{position:relative;width:4.8rem;height:4.8rem;border-radius:99rem;background:var(--gold);display:grid;place-items:center;box-shadow:0 22px 48px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .5s var(--ease)}
.tour-play:hover .disc,.tour-play:focus-visible .disc{transform:scale(1.08)}
.tour-play svg{margin-left:.3rem}
.tour-stage[data-state=loading] .tour-play{pointer-events:none}
.tour-stage[data-state=loading] .tour-play .ring{animation:none;opacity:0}
.tour-stage[data-state=loading] .tour-play .disc svg{opacity:.35}
.tour-stage[data-state=loading] .tour-play .disc::after{content:"";position:absolute;inset:-.55rem;border-radius:99rem;border:2px solid rgba(206,186,130,.25);border-top-color:var(--gold-bright);animation:tourSpin .9s linear infinite}
@keyframes tourSpin{to{transform:rotate(360deg)}}
.tour-meta{position:absolute;left:1.2rem;right:1.2rem;bottom:1.15rem;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;pointer-events:none}
.tour-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(var(--dark-rgb),.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.55rem .95rem}
.tour-tag svg{color:var(--gold-bright)}
.tour-cap{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* paused, gated and finished states sit on a heavy blur so none of the player's own
   chrome (title, end screen, suggested videos) is ever legible underneath */
.tour-dim{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;text-align:center;padding:1.5rem 1.5rem 5rem;background:rgba(var(--dark-rgb),.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tour-stage[data-state=paused] .tour-dim,.tour-stage[data-state=locked] .tour-dim,.tour-stage[data-state=ended] .tour-dim{display:flex}
.tour-stage[data-state=paused] .tour-dim{cursor:pointer}
.td{display:none;max-width:32rem}
.tour-stage[data-state=paused] .td-paused,.tour-stage[data-state=locked] .td-locked,.tour-stage[data-state=ended] .td-ended{display:block}
.td-ic{width:4.2rem;height:4.2rem;border-radius:99rem;margin:0 auto 1.1rem;display:grid;place-items:center;background:var(--gold);color:#fff;box-shadow:0 22px 48px -14px rgba(0,0,0,.7)}
.td-ic svg{margin-left:.15rem}
.td h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;color:#fff;line-height:1.15}
.td p{color:rgba(255,255,255,.88);font-size:.92rem;margin-top:.6rem}
.td .btn{margin-top:1.2rem}
.tp-loading,.tour-stage.stalled .tp-paused{display:none}
.tour-stage.stalled .tp-loading{display:inline}
.tour-stage.stalled .td-ic svg{animation:tourSpin 1.1s linear infinite;transform-origin:center}
.td-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.td-row .btn{margin-top:1.2rem}
/* our own control bar, the only controls the visitor ever sees */
.tour-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;align-items:center;gap:.8rem;padding:2rem 1.1rem .9rem;background:linear-gradient(180deg,rgba(var(--dark-rgb),0),rgba(var(--dark-rgb),.88));color:#fff}
.tour-stage.active:not([data-state=loading]) .tour-bar{display:flex}
.tb-play,.tb-mute{flex:none;width:2.4rem;height:2.4rem;border-radius:99rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s var(--ease)}
.tb-play:hover,.tb-mute:hover{background:rgba(255,255,255,.22)}
.tb-play svg,.tb-mute svg{display:none}
.tour-stage:not([data-state=playing]) .tb-play .i-play,.tour-stage[data-state=playing] .tb-play .i-pause{display:block}
.tour-stage:not(.muted) .tb-mute .i-vol,.tour-stage.muted .tb-mute .i-mute{display:block}
.tb-play .i-play{margin-left:.15rem}
.tb-time{font-size:.74rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);white-space:nowrap}
.tb-track{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;position:relative}
.tb-track::before{content:"";position:absolute;left:0;right:0;top:-.7rem;bottom:-.7rem}
.tb-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .25s linear}
.tour-unmute{position:absolute;top:1rem;left:1rem;z-index:4;display:none;align-items:center;gap:.45rem;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--gold);border:0;border-radius:999px;padding:.6rem 1rem;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.tour-stage.muted[data-state=playing] .tour-unmute{display:inline-flex}
.tour-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.4rem}
.tour-pt{display:flex;gap:.7rem;align-items:flex-start;margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1rem 1.15rem;font-size:.86rem;color:rgba(255,255,255,.86)}
.tour-pt svg{flex:none;color:var(--gold-bright);margin-top:.15rem}
@media (prefers-reduced-motion: reduce){.tour-play .ring{animation:none;opacity:.5}}
@media(max-width:760px){
  .tour-play{width:5.4rem;height:5.4rem}.tour-play .disc{width:4rem;height:4rem}
  .tour-pts{grid-template-columns:1fr;gap:.6rem}
  .tour-meta{flex-direction:column;align-items:flex-start;gap:.5rem}
  .tour-dim{padding:1rem 1rem 4.2rem}
  .td p{font-size:.84rem}
  .td-ic{width:3.4rem;height:3.4rem;margin-bottom:.8rem}
  .tour-bar{gap:.6rem;padding:1.6rem .8rem .7rem}
  .tb-time{font-size:.68rem}
  /* a 16:9 stage is only ~190px tall on a phone: the gate and end cards need more room,
     and while they are up the film is covered anyway */
  .tour-stage[data-state=locked],.tour-stage[data-state=ended]{aspect-ratio:auto;min-height:21rem}
}

/* ============ brochure ============ */
.bro{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.6rem;align-items:center}
.bro-copy{max-width:none;margin-bottom:0}
.bro-pts{display:grid;gap:.7rem;margin:1.6rem 0 1.9rem}
.bro-pts p{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;margin:0}
.bro-pts svg{flex:none;color:var(--gold-ink);margin-top:.2rem}
.bro-note{font-size:.74rem;color:var(--muted);margin-top:.9rem}
.bro-art{position:relative;border-radius:var(--r-outer);overflow:hidden;aspect-ratio:1/1;isolation:isolate;border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--indigo-deep)}
.bro-bg{position:absolute;inset:0;z-index:-1}
.bro-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.bro-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(var(--dark-rgb),.30),rgba(var(--dark-rgb),.66))}
.bro-book{position:absolute;margin:0;border-radius:.45rem;overflow:hidden;background:#fff;box-shadow:0 34px 60px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.22);transition:transform .8s var(--ease)}
.bro-book img{display:block;width:100%;height:auto}
/* both books are portrait covers (3:4): the brochure and the 3 BHK floor plan book */
.bro-book-1{width:43%;left:9%;top:8%;transform:rotate(-5deg);z-index:2}
.bro-book-2{width:43%;right:9%;bottom:8%;transform:rotate(5deg);z-index:1}
.bro-art:hover .bro-book-1{transform:rotate(-3deg) translateY(-6px)}
.bro-art:hover .bro-book-2{transform:rotate(4deg) translateY(-4px)}
.bro-badge{position:absolute;left:1.1rem;bottom:1.1rem;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(var(--dark-rgb),.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.55rem .95rem}
@media(max-width:900px){.bro-grid{grid-template-columns:1fr;gap:2.2rem}.bro-art{max-width:34rem;margin:0 auto;width:100%}}
@media(max-width:760px){.bro-art{aspect-ratio:1/1.05}.bro-book-1{width:47%;left:6%;top:7%}.bro-book-2{width:47%;right:6%;bottom:7%}}

/* ============ small phones: nothing wraps, nothing overlaps ============ */
/* 320 to 360 px screens (older iPhones, compact Androids): tighter price rows and spec
   tiles, one-line sticky bar buttons, and a smaller play button on the walkthrough poster so
   the tag underneath never touches it. The poster itself runs 4:3 on phones in teaser mode. */
@media(max-width:640px){.tour.teaser .tour-stage{aspect-ratio:4/3}}
@media(max-width:420px){
  .tour-play{width:4.6rem;height:4.6rem}.tour-play .disc{width:3.4rem;height:3.4rem}
  .tour-meta{left:.7rem;right:.7rem;bottom:.7rem}
  .tour-tag{font-size:.52rem;padding:.4rem .7rem;letter-spacing:.1em}
  .tour-cap{display:none}
}
@media(max-width:360px){
  .pstat .v{font-size:1.05rem}
  .price-scroll table.price th{padding:.7rem .45rem;font-size:.5rem;letter-spacing:.06em}
  .price-scroll table.price td{padding:.75rem .45rem;font-size:.82rem}
  .price-scroll table.price .cfg{font-size:.92rem}
  .price-scroll table.price .pr{font-size:.8rem}
  .price-scroll table.price .act button{padding:.4rem .55rem;font-size:.6rem}
  .fp-specs{gap:.45rem}
  .fp-spec{padding:.7rem .45rem}
  .fp-spec .v{font-size:1.02rem}
}

/* ============ Blue Moon register: wide-tracked grotesque labels, like the magazine ============ */
.eyebrow,.eyebrow-dark,.pstat .k,.bro-badge,.tour-tag,.hero-price .hp-lbl,.fld label,table.price th{font-family:var(--text);font-weight:600}
.answer-line{font-family:var(--text);font-weight:400;letter-spacing:0}
.answer-line strong{font-weight:700}
.pstat .v{font-weight:500}
.foot-brand .l1{font-family:var(--mark);letter-spacing:.14em;font-weight:400}

/* ============ floor plan gates that carry a representative photo, not a plan drawing ============ */
/* The developer has not published unit plans for this project, so each configuration's gate shows a
   representative interior from the developer's own material, frosted in its lower half like a plan gate. */
.fp-photo img{object-fit:cover;padding:0;aspect-ratio:4/3;max-height:none;background:var(--cream-2)}
.fp-img-shell .imgcap{margin:.55rem .2rem .1rem;text-align:left}

/* ============ The six islands: the destination around the homes ============ */
.imm{background:var(--indigo-night);color:#fff;position:relative;overflow:hidden}
.imm::before{content:"";position:absolute;width:56rem;height:56rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--royal-rgb),.55),transparent 62%);top:-28rem;left:-22rem;pointer-events:none}
.imm .wrap{position:relative;z-index:1}
.imm .eyebrow-dark{border-color:rgba(206,186,130,.4);background:rgba(206,186,130,.08);color:var(--gold-bright)}
.imm .sec-head h2{color:#fff}
.imm .sec-head h2 em{color:var(--gold-bright)}
.imm .sec-head .lead{color:rgba(255,255,255,.86)}
.imm-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.imm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:1rem;overflow:hidden}
.imm-stat{background:var(--indigo-night);padding:1.25rem 1.05rem}
.imm-stat .n{font-family:var(--display);font-size:1.6rem;font-weight:400;color:var(--gold-bright);line-height:1.05;letter-spacing:-.01em}
.imm-stat .n small{font-size:.62em;font-weight:400;color:rgba(255,255,255,.82);margin-left:.15rem}
.imm-stat .t{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:.5rem;line-height:1.45}
.imm-note{font-size:.7rem;color:rgba(255,255,255,.76);margin-top:1rem;line-height:1.6}
.imm-img{border-radius:var(--r-outer);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.85);position:relative}
.imm-img img{width:100%;aspect-ratio:4/3.3;object-fit:cover}
.imm-img .cap{position:absolute;right:1rem;bottom:.8rem;font-size:.56rem;color:rgba(255,255,255,.7);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.imm-cta{margin-top:1.6rem}
@media(max-width:900px){.imm-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:520px){.imm-stats{grid-template-columns:repeat(2,1fr)}.imm-stat .n{font-size:1.4rem}}

/* ============ design partners, under the master plan ============ */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.6rem}
.partner{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.4rem 1.5rem;box-shadow:var(--shadow-soft)}
.partner .k{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.partner h3{font-size:1.3rem;font-weight:500;margin:.4rem 0 .5rem;line-height:1.2}
.partner p{font-size:.86rem;color:var(--muted)}
@media(max-width:760px){.partners{grid-template-columns:1fr}}

/* ============ small phones: keep the short figures on one line ============ */
@media(max-width:520px){.status-card .n{font-size:1.22rem}}
@media(max-width:420px){
  .fp-specs{grid-template-columns:.95fr .95fr 1.1fr;gap:.5rem}
  .fp-spec{padding:.75rem .6rem}
}
@media(max-width:360px){.status-card{padding:1rem .85rem}.status-card .n{font-size:1.02rem}}
@media(max-width:340px){.btn{font-size:.66rem;letter-spacing:.05em;gap:.5rem;padding-left:.95rem;padding-right:.75rem}.btn .ic{width:1.6rem;height:1.6rem}}
@media(max-width:760px){.price-scroll table.price .pr-req{white-space:nowrap}}

/* ============ photo backgrounds for the developer and site-visit bands ============ */
/* Both images are the developer's own renderings. A dark gradient keeps the text and the form readable:
   heaviest behind the copy on the left, lighter towards the right, and even on phones where the
   columns stack. */
.dev-band,.visit{isolation:isolate}
.sec-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg::after{content:"";position:absolute;inset:0}
.sec-bg-dev img{object-position:center 58%}
.sec-bg-dev::after{background:linear-gradient(90deg,rgba(var(--dark-rgb),.93) 0%,rgba(var(--dark-rgb),.84) 42%,rgba(var(--dark-rgb),.58) 100%)}
.sec-bg-visit img{object-position:42% 60%}
.sec-bg-visit::after{background:linear-gradient(90deg,rgba(var(--dark-rgb),.92) 0%,rgba(var(--dark-rgb),.74) 48%,rgba(var(--dark-rgb),.5) 100%)}
.sec-bg-cap{position:absolute;right:3.4rem;bottom:.9rem;z-index:1;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none}
@media(max-width:900px){
  .sec-bg-dev::after,.sec-bg-visit::after{background:linear-gradient(180deg,rgba(var(--dark-rgb),.9) 0%,rgba(var(--dark-rgb),.8) 55%,rgba(var(--dark-rgb),.88) 100%)}
  .sec-bg-visit img{object-position:30% 50%}
  .sec-bg-cap{bottom:.6rem;right:.9rem}
}

/* =====================================================================================
   DAMAC LAGOON SKIN (24 Sep 2026)
   The page background is the teal water of the developer's own DAMAC Islands page
   (DAMAC_Islands-Project_BG_Image_16x9.jpg), chosen 24 Sep 2026. The whole page sits on that water: img/water-* is a
   seamless tile (the photo over its vertical mirror, darkened 20% so white text passes AA).
   Text on the water is white; content sits on white cards, which re-declare the on-paper tokens,
   so every rule written for the light template keeps working inside them. Buttons are sand pills
   (the beach against the lagoon), the dark bands are lagoon night. Type as on damacproperties.com:
   small, widely tracked capitals in the display face (Termina there, Archivo Expanded here) and
   Roboto for text.
   ===================================================================================== */
body{
  background-color:#167984;
  background-image:url(img/water-1600.jpg);
  background-image:image-set(url(img/water-1600.avif) type("image/avif"),url(img/water-1600.webp) type("image/webp"),url(img/water-1600.jpg) type("image/jpeg"));
  background-size:max(1600px,100%) auto;background-repeat:repeat-y;background-position:50% 0;
  color:var(--ink);
}
@media(max-width:900px){
  body{
    background-image:url(img/water-900.jpg);
    background-image:image-set(url(img/water-900.avif) type("image/avif"),url(img/water-900.webp) type("image/webp"),url(img/water-900.jpg) type("image/jpeg"));
    background-size:900px auto;
  }
}
::selection{background:var(--gold-soft);color:#0e2a2f}

/* the light bands of the template are the water now; the alternate bands sit a shade deeper */
.hero,.answer-band,.bro{background:transparent}
.price-band,.fp-band{background:rgba(3,38,44,.24)}
.answer-band,.bro{border-color:rgba(255,255,255,.14)}

/* white cards: the on-paper token set */
.hero .form-shell,.form-core,.facts-shell,.price-shell,.pay-line,.loc-card,.loc-groups .growth,.loc-map,
.status-card,.fp-img-shell,.fp-spec,.fp-tab,.amen-col,.mp-shell,.spec-card,.partner,details.faq,
.modal-card,.chip,.ov-img-shell,.ebro-side,.map-embed{
  --ink:#0e2a2f;--indigo:#0e2a2f;--muted:#44595d;--muted-light:#5b6d70;
  --gold-ink:#0f6b76;--copper:#0f6b76;
  --line:rgba(14,42,47,.12);--line-gold:rgba(15,107,118,.32);
  --cream:#f4f1ea;--cream-2:#e7eeee;
  color:var(--ink);
}
.chip svg{color:#0f6b76}
.pos-note{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

/* type: DAMAC's small, tracked capitals */
h1,h2,h3,.serif{font-family:var(--display);font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.sec-head h2{font-size:clamp(1.45rem,2.25vw,1.9rem);line-height:1.3;font-weight:400;letter-spacing:.08em}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em{font-weight:400;color:var(--copper)}
.visit h2 em{color:var(--gold-bright)}
.hero h1{font-weight:600;letter-spacing:.07em}
.eyebrow,.eyebrow-dark,.bro-badge,.tour-tag{font-family:var(--display);font-weight:500;letter-spacing:.18em}
.pstat .v,.status-card .n,.fp-spec .v,.imm-stat .n,.dev-stat .n,.hero-price .hp-big,.hero-price .hp-val{font-family:var(--display);font-weight:600;letter-spacing:.04em}
.form-core h3,.form-core .form-title,.modal-head h3,.succ h3{font-family:var(--display);font-weight:500;letter-spacing:.06em}
.fp-meta h3,.partner h3,.dev-copy h3{letter-spacing:.07em}

/* buttons: pills, as on damacproperties.com. The gold is a metal, not sand (25 Sep 2026: the flat sand read as beige
   on the water and the flat lagoon-night buttons as dead black): champagne gold with a soft top sheen and a bevel,
   and the second choice in onyx with a gold rim, gold letters and a gold disc. Dark ink on the gold stays above 6:1
   at the deepest stop (#cc9f4a), gold on onyx above 11:1. */
:root{
  --gold-metal-flat:linear-gradient(120deg,#f9e9b8 0%,#e7c77c 30%,#cc9f4a 60%,#ecd291 85%,#fbefc8 100%);
  --gold-metal:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 60%),var(--gold-metal-flat);
  --gold-bevel:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(140,100,35,.35),inset 0 0 0 1px rgba(255,244,214,.45);
  --onyx:linear-gradient(180deg,#0f3e46 0%,#062b31 45%,#021a1e 100%);
  --onyx-rim:rgba(230,196,120,.7);
  --onyx-gold:#f3dfa6;
}
.btn{border-radius:999px;font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.12em}
.btn-gold,.btn-ink{transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease)}
.btn-gold{background:var(--gold-metal);color:#0e2a2f;box-shadow:var(--gold-bevel),0 12px 28px -12px rgba(160,115,35,.75)}
.btn-gold .ic{background:rgba(14,42,47,.12)}
.btn-gold:hover{background:var(--gold-metal);filter:brightness(1.06) saturate(1.08);box-shadow:var(--gold-bevel),0 18px 38px -14px rgba(190,140,50,.85)}
.btn-ink{background:var(--onyx);color:var(--onyx-gold);border:1px solid var(--onyx-rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 32px -14px rgba(0,14,18,.9)}
.btn-ink .ic{background:var(--gold-metal-flat);color:#0e2a2f}
.btn-ink:hover{filter:brightness(1.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 3px rgba(230,196,120,.14),0 18px 38px -14px rgba(0,14,18,.95)}
.btn-ink.cta-anim::before{background:linear-gradient(100deg,rgba(255,236,180,0) 0%,rgba(255,236,180,.1) 30%,rgba(255,236,180,.42) 50%,rgba(255,236,180,.1) 70%,rgba(255,236,180,0) 100%)}
.btn-line{border:1px solid rgba(255,255,255,.85);background:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-line:hover{background:rgba(255,255,255,.1)}
.btn-ghost{border:1px solid rgba(14,42,47,.28);color:#0e2a2f;background:#fff}
.nav-cta{background:var(--gold-metal);color:#0e2a2f;box-shadow:var(--gold-bevel);font-family:var(--display);font-weight:500;font-size:.6rem;letter-spacing:.14em}
.nav-cta:hover{box-shadow:var(--gold-bevel),0 12px 30px -12px rgba(190,140,50,.8)}
.nav-cta .dot{background:rgba(14,42,47,.12)}
/* the side tab is turned 180deg, so it takes the metal without the top sheen (the sheen would land at its foot) */
.side-tab{background:var(--gold-metal-flat);color:#0e2a2f;font-family:var(--display);font-weight:500;letter-spacing:.16em}
.sticky-bar .sb-cta{background:var(--gold-metal);color:#0e2a2f}
.sb-call{background:var(--onyx);color:var(--onyx-gold)}
.tour-play .disc,.td-ic{background:var(--gold-metal-flat);color:#0e2a2f}
/* the always-visible gold (nav and phone bar) glints half a cycle after the section buttons, so the two never flash
   together; transform only, on the compositor */
.nav-cta,.sticky-bar .sb-cta{position:relative;overflow:hidden}
.nav-cta::before,.sticky-bar .sb-cta::before{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-20deg);animation:ctaShine 4.2s cubic-bezier(.45,.05,.25,1) 2.1s infinite}
@media (prefers-reduced-motion: reduce){.nav-cta::before,.sticky-bar .sb-cta::before{animation:none;display:none}}
table.price .act button{border-color:rgba(15,107,118,.45);color:#0e2a2f;font-family:var(--display);font-weight:500;letter-spacing:.08em;font-size:.6rem;text-transform:uppercase}
table.price .act button:hover{background:var(--indigo-deep);border-color:var(--indigo-deep);color:#fff}
.fp-tab{font-family:var(--display);font-weight:500;letter-spacing:.06em;font-size:.62rem;text-transform:uppercase}
.fp-tab.on{background:var(--onyx);border-color:var(--onyx-rim);color:var(--onyx-gold)}
details.faq[open] summary .pm{background:var(--indigo-night);border-color:var(--indigo-night)}
.gate-lock{background:var(--indigo-night);color:var(--gold-bright)}

/* DAMAC Islands logo (the developer's own lockup, white) in the nav, the hero and the footer */
.nav-logo{flex-direction:row;align-items:center}
.nav-logo img{display:block;height:2.3rem;width:auto}
.nav-pill{background:rgba(var(--dark-rgb),.5);border-color:rgba(241,226,184,.26)}
.nav.scrolled .nav-pill{background:rgba(var(--dark-rgb),.86)}
.hero-logo{display:block;width:clamp(10.5rem,21vw,17rem);height:auto;margin:0 0 1rem;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.foot-logo{display:block;width:11rem;height:auto;margin-bottom:.9rem}
.dev-logo{display:block;width:10rem;height:auto;margin:0 0 1.3rem;opacity:.95}
@media(max-width:640px){.nav-logo img{height:2rem}.hero-logo{margin-bottom:.8rem}}

/* the developer's hero film behind the banner: loaded after the page, faded in when it plays */
.hero-bg video{opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none}
.hero-bg video.on{opacity:1}
@media (prefers-reduced-motion: reduce){.hero-bg video{display:none}}

/* =====================================================================================
   RESPONSIVE CORRECTIONS (23 Sep 2026, from the eight-device review)
   Placed LAST on purpose: some phone rules above were written before the base rules they
   meant to override, so they never applied. Everything below wins by order.
   ===================================================================================== */

/* sections and popup spacing on phones */
@media(max-width:640px){
  .sec{padding-top:2.8rem;padding-bottom:2.8rem}
  .sec-head{margin-bottom:1.4rem}
  .sec-head .lead{font-size:.92rem}
  .band{padding:3.6rem 1.1rem}
  .modal-head{padding:1.2rem 1.15rem .3rem}
  .modal-head h3{font-size:1.2rem}
  .modal-body{padding:.8rem 1.15rem 1.15rem}
  .succ{padding:2.4rem 1.2rem 1.6rem}
}
@media(max-width:420px){.sec{padding-left:1rem;padding-right:1rem}}

/* the popup always fits the screen; on short screens its title and close button stay in view */
.modal-card{max-height:calc(100% - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow-y:auto;overscroll-behavior:contain}
.modal-x{width:2.75rem;height:2.75rem}
.modal-head h3,.succ h3{text-wrap:balance}
.succ{position:relative}
.succ-x{position:absolute;top:.9rem;right:.9rem}
@media(max-height:680px){
  .modal-head{position:sticky;top:0;z-index:2;background:var(--paper);padding-top:1rem}
  .modal-body{padding-top:.5rem}
  #modalForm .fld{margin-bottom:.55rem}
}
@media(max-height:430px){#mSub{display:none}.modal-head h3{font-size:1.1rem}}

/* form fields at 16px on touch screens, so iPhone Safari does not zoom into the form */
@media(pointer:coarse),(max-width:900px){.fld input,.fld select,.telwrap select.cc{font-size:16px}}

/* comfortable tap targets on touch screens (the nav links and phone exist only above 900px) */
@media(pointer:coarse) and (min-width:901px){.nav-links a,.nav-phone{display:inline-flex;align-items:center;min-height:44px}}
@media(pointer:coarse){
  .nav-cta{min-height:44px}
  .hero .form-alt button{min-height:44px;padding:0 .8rem}
  table.price .act button{min-height:40px;padding-top:.55rem;padding-bottom:.55rem}
  .consent a,.foot-rera a,.copyline a{display:inline-block;padding:.5rem 0;margin:-.5rem 0}
}

/* readable labels: nothing under about 10px on phones and tablets, 10.5px on desktops */
@media(max-width:980px){
  .eyebrow,.eyebrow-dark,.tour-tag,.pstat .k,.hero-price .hp-lbl,.hero-note,.fp-spec .k,.amen-hero .cap,.sec-bg-cap,.imgcap,.imgcap-l,.imm-stat .t,.fld label,.gal-item span,.status-card .t,.dev-stat .t,.partner .k,.fp-hint{font-size:.64rem}
  .eyebrow,.hero-price .hp-lbl{letter-spacing:.12em}
  .consent,.price-notes,.disclaimer,.imm-note,.gate-note,.bro-note{font-size:.75rem;line-height:1.55}
}
@media(max-width:365px){.eyebrow .eb-dev{display:none}}
@media(min-width:981px){
  .pstat .k,.hero-price .hp-lbl,.fp-spec .k,.gal-item .tag2,.imgcap,.hero-note,.eyebrow-dark,.sec-bg-cap,.amen-hero .cap{font-size:.66rem}
  table.price .cfg .c-sm{font-size:.6rem}
}

/* facts table: labels never break mid-word; on phones each label sits above its value;
   the K-RERA number breaks only after a slash (<wbr> in the HTML) */
table.facts td:first-child{overflow-wrap:normal}
[data-rera]{overflow-wrap:normal;word-break:normal}
.foot-rera b{word-break:normal}
@media(max-width:640px){
  table.facts,table.facts tbody,table.facts tr,table.facts td{display:block;width:auto}
  table.facts td:first-child{width:auto;padding:.85rem 1rem 0}
  table.facts td:last-child{padding:.25rem 1rem .85rem}
  table.facts tr+tr td:last-child{border-top:0}
}

/* overview caption keeps two lines of room, so the page never jumps when the slide changes */
@media(max-width:640px){#ovCap{min-height:3.3em}}

/* amenities: caption on a backing; top-right on phones clear of the name pill; drawings shown whole */
.amen-hero .cap{background:rgba(var(--dark-rgb),.5);padding:.25rem .6rem;border-radius:999px;color:rgba(255,255,255,.88)}
@media(max-width:640px){.amen-hero .cap{top:.8rem;right:.8rem;bottom:auto}}
.amen-hero img.fit-contain{object-fit:contain;background:var(--cream-2)}
@media(min-width:901px){.amen-hero img.fit-contain-lg{object-fit:contain;background:var(--cream-2)}}

/* floor plan tabs in one row on phones */
@media(max-width:640px){.fp-tabs{flex-wrap:nowrap;gap:.4rem}.fp-tab{flex:1 1 auto;justify-content:center;white-space:nowrap;padding-left:.6rem;padding-right:.6rem;font-size:.74rem}}
@media(max-width:360px){.fp-tabs{gap:.3rem}.fp-tab{padding-left:.4rem;padding-right:.4rem;font-size:.66rem}}

/* brochure: the second book clears the page-count badge on phones */
@media(max-width:760px){.bro-book-2{bottom:18%}}

/* the T&C note stays above the phone bar on short phones */
@media(max-width:640px) and (max-height:700px){.hero-note{bottom:3.4rem}}

/* balanced headings and captions, no orphan words; short links never split */
.sec-head h2,.dev-band h2,.visit h2,.band h2,.form-core .form-title,.imgcap,.imm-stat .t{text-wrap:balance}
.consent a,.copyline a{white-space:nowrap}

/* lightbox: captions wrap; the location map opens in a pannable view on phones */
.lb-cap{white-space:normal;text-overflow:clip;max-width:calc(100vw - 2rem);text-align:center;border-radius:.8rem}
@media(max-width:640px){
  .lb.open.pan{display:block;overflow:auto;padding:4.5rem 0 5rem}
  .lb.open.pan img{max-width:none;max-height:none;width:230vw;margin:0 1rem}
  .lb.open.pan .lb-x,.lb.open.pan .lb-cap{position:fixed}
}

/* specifications end with a call to action */
.spec-cta{margin-top:1.6rem}

/* desktop hero: the form never falls below the fold, and on wide screens the copy stays on the
   photo's dark left instead of drifting onto the family */
@media(min-width:981px){.hero-banner{min-height:min(45vw,calc(100vh - 9rem));min-height:min(45vw,calc(100svh - 9rem))}}
@media(min-width:1800px){
  .hero-banner .hero-wrap{width:auto;margin-left:6vw;margin-right:0}
  .hero-copy{max-width:32vw}
  .hero h1{font-size:clamp(2.6rem,1.9vw,4rem)}
  .hero .eyebrow{font-size:.72rem}
  .hero-at{font-size:.8rem}
  .hero-price .hp-big{font-size:1.6rem}
  .hero-price .hp-val{font-size:2rem}
  .hero-price .hp-lbl{font-size:.68rem}
}
@media(min-width:2200px){html{font-size:112.5%}.wrap,.trust-wrap{width:min(1360px,100%)}.hero-lower-wrap{width:min(1400px,100%)}}
@media(min-width:3000px){html{font-size:125%}.wrap,.trust-wrap{width:min(1520px,100%)}.hero-lower-wrap{width:min(1560px,100%)}}

/* floating CTAs never sit on content */
@media(min-width:901px){
  .hero-note,.band .imgcap-l{right:3.6rem}
  footer{padding-bottom:6.5rem}
  .wa-float.enabled{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  body.past-hero .wa-float.enabled{opacity:1;pointer-events:auto}
}
@media(min-width:901px) and (max-width:1279px){.side-tab{display:none}}

/* big phones held sideways (wider than 900px but short): the phone bar, not the desktop floats */
@media(min-width:901px) and (max-height:500px){
  .sticky-bar{display:flex}
  .side-tab,.wa-float.enabled{display:none}
  .nav-links,.nav-phone{display:none}
  footer{padding-bottom:8rem}
}
/* sideways phones: a slimmer nav and bar, and tall images capped to the screen */
@media(max-width:980px) and (orientation:landscape) and (max-height:500px){
  .nav{padding-top:.4rem}
  .nav-pill{padding-top:.3rem;padding-bottom:.3rem}
  .nav-logo .l2{display:none}
  .nav-cta{padding:.5rem 1rem}
  .nav-cta .dot{display:none}
  .sticky-bar a,.sticky-bar button{padding-top:.8rem;padding-bottom:.8rem}
  .ov-img-shell,.loc-map,.mp-shell,.imm-img,.bro-art{max-width:min(100%,120vh);margin-left:auto;margin-right:auto}
  .answer-more,.sec-head .lead{max-width:44rem}
}

/* hero form: no empty cell beside "Looking for" on tablets; a tidy right-aligned button at 981-1179 */
@media(min-width:641px) and (max-width:980px){#heroForm .btn-gold{grid-column:auto;align-self:start;margin-top:calc(.62rem * 1.5 + .35rem);padding:.62rem .62rem .62rem 1.3rem}}
@media(min-width:981px) and (max-width:1179px){#heroForm .btn-gold{width:auto;justify-self:end;padding-left:2rem;margin-top:.2rem;animation:none}.hero .consent{margin-top:.6rem}}

/* stat strips: every figure on one line */
@media(min-width:1200px){.pstat{padding-left:.4rem;padding-right:.4rem}.pstat .v{white-space:nowrap;overflow-wrap:normal}}
@media(min-width:901px) and (max-width:1199px){.imm-stat .n{white-space:nowrap;font-size:clamp(1.2rem,1.9vw,1.45rem)}}

/* location: the growth points sit under the distance cards and the Google map under the brochure map,
   so the two columns end together instead of leaving a 470px hole on the left */
.loc-groups .growth{margin-top:.4rem;padding:1.2rem 1.35rem;background:var(--white);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow-soft)}

/* comfortable line lengths */
.sec-head .lead{max-width:40rem}
details.faq .fa{max-width:46rem}
@media(min-width:1180px){.faq-list{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start}}
@media(min-width:901px){.pos-note{max-width:44rem}.imm-note{max-width:46rem}.disclaimer{columns:2;column-gap:3rem}}

/* nav jumps land below the fixed nav */
html{scroll-padding-top:5.5rem}

/* hero chips as a balanced 2 x 2 on desktop; gallery captions readable on bright photos */
@media(min-width:981px){.hero-chips{display:grid;grid-template-columns:repeat(2,max-content)}}
.gal-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,rgba(var(--dark-rgb),.62),transparent);pointer-events:none}
.gal-item span{z-index:1}

/* film: the control bar never blocks the lead button; the play button clears the tag on phones */
.tour-bar{pointer-events:none}
.tour-bar>*{pointer-events:auto}
@media(max-width:640px){.tour-play{width:4.6rem;height:4.6rem}.tour-play .disc{width:3.4rem;height:3.4rem}.tour-meta{left:.7rem;right:.7rem;bottom:.7rem}}

/* master plan gate: the lock and the button keep their shape on small phones */
.gate-lock,.g2-ov .btn{flex:none}
@media(max-width:360px){.g2-ov{padding:1rem .8rem .7rem;gap:.45rem}}

/* second pass (tablets and laptops) */
/* the iPad Pro 12.9 held upright (981-1100px, portrait) gets the portrait photo like other tablets */
@media(min-width:981px) and (max-width:1100px) and (orientation:portrait){
  .hero-banner{display:block;min-height:0;padding:7.2rem 1.5rem calc(76vw + 1.6rem)}
  .hero-bg img,.hero-bg video{top:auto;height:auto;object-fit:fill}
  .hero-veil{background:linear-gradient(180deg,rgba(var(--dark-rgb),.38) 0%,rgba(var(--dark-rgb),.32) 32%,rgba(var(--dark-rgb),.22) 47%,rgba(var(--dark-rgb),0) 60%)}
}
/* upright tablets: the legal note sits on the dark plants, not on the child's shoes */
@media(min-width:641px) and (max-width:1100px) and (orientation:portrait){.hero-note{left:1.5rem;right:auto;text-align:left}}
/* the WhatsApp float only where the page has a margin wide enough for it */
@media(min-width:901px) and (max-width:1319px){.wa-float.enabled{display:none}}
/* gallery: the image-type label moves to the top on tablets so it never meets the caption */
@media(max-width:900px){.gal-item .tag2{top:.6rem;bottom:auto}}
/* hero and every section share one 1160px grid */
.hero-wrap,.hero-lower-wrap{width:min(1160px,100%)}
/* short laptop windows (browser bars take height): the hero is trimmed so the form stays in view */
@media(min-width:981px) and (max-height:700px){
  .hero-banner{padding-top:6rem;padding-bottom:4.4rem}
  .hero h1{font-size:clamp(1.9rem,2.6vw,2.3rem);margin:1rem 0 .6rem}
  .hero-price>div{padding-top:.6rem;padding-bottom:.6rem}
}
/* upright tablets: specification cards in two columns, and body text at a readable measure */
@media(min-width:641px) and (max-width:900px){.spec-grid{grid-template-columns:1fr 1fr}.dev-copy p,.answer-more,.feature p{max-width:44rem}}
/* labels that more specific rules above kept under 10px */
@media(max-width:980px){
  .band .imgcap-l,.imm-img .cap,.gal-item .tag2,.foot-brand .l2,.tour-cap{font-size:.64rem}
  .price-scroll table.price th{font-size:.6rem}
  .price-scroll table.price .act button{font-size:.64rem}
}
@media(min-width:981px){.imm-stat .t,.imm-img .cap,.band .imgcap-l,.foot-brand .l2,.tour-cap,.gal-item span{font-size:.66rem}}
@media(min-width:981px) and (max-width:1799px){.hero .eyebrow{font-size:.66rem}}
/* iPads and other touch screens 901-1319px wide get the phone bar (no float or tab there) */
@media(min-width:901px) and (max-width:1319px) and (pointer:coarse){.sticky-bar{display:flex}footer{padding-bottom:8rem}}
/* last polish from the 26-size check */
@media(max-width:640px){.price-scroll table.price th{letter-spacing:.04em;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}}
@media(max-width:360px){.imm-stat .n{font-size:1.15rem;white-space:nowrap}}
@media(max-width:980px) and (orientation:landscape){.eyebrow .eb-dev{display:none}}
@media(min-width:761px) and (max-width:980px){table.price .cfg .c-sm{font-size:.6rem}}
/* floor plan tabs sit close together on phones: a softer glow that stays inside the gap */
@keyframes gpGlowSm{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.28)}50%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}}
@media(max-width:640px){.fp-tab:not(.on){animation-name:gpGlowSm}}
/* large screens: the form bar keeps the same width as the sections below it */
@media(min-width:2200px){.hero-lower-wrap{width:min(1360px,100%)}}
@media(min-width:3000px){.hero-lower-wrap{width:min(1520px,100%)}}
/* verifier refinements */
@media(max-width:980px) and (orientation:landscape){.hero-note{bottom:3.9rem}}
.lb-cap{left:1rem;right:1rem;transform:none;margin-left:auto;margin-right:auto;width:fit-content}
@media(max-width:360px){.telwrap select.cc{max-width:5.4rem;padding:0 1.1rem 0 .5rem;background-position:right .4rem center}}
@media(min-width:1200px){.pstat .k{letter-spacing:.12em}}
@supports (grid-template-rows:subgrid){.imm-stat{display:grid;grid-row:span 2;grid-template-rows:subgrid}.imm-stat .n{align-self:end}.imm-stat .t{align-self:start}}
@media(min-width:901px) and (max-width:1099px){table.facts td:first-child{width:33%}table.facts [data-rera]{font-size:.8rem}}
@media(max-width:360px){.pstat .k{letter-spacing:.1em}}

/* ============ SMALL PHONES 320-380 (device review, 23 Sep 2026) ============ */
/* legal note joins the flow under the price on upright phones, so the bar never covers it;
   the photo reserve shrinks by the note's height so the family stays where it was */
@media(max-width:640px) and (orientation:portrait){
  .hero-banner{padding-bottom:calc(80vw - 1.2rem)}
  .hero-note{position:static;margin-top:.75rem;max-width:21rem}
}
/* bar labels stay at 10px+ on the narrowest phones */
@media(max-width:374px){.sticky-bar a,.sticky-bar button{font-size:.64rem;letter-spacing:.03em;gap:.3rem}}
/* price table fits a 320px card: headers may wrap */
@media(max-width:380px){.price-scroll table.price th{white-space:normal;line-height:1.3}.price-scroll table.price .pr-req{white-space:normal}}
@media(max-width:980px){.price-scroll table.price th{font-size:.64rem}.bro-badge{font-size:.64rem}}
/* finger-sized targets on touch screens */
@media(pointer:coarse){
  .fp-tab{min-height:44px}
  .nav-logo{min-height:44px;justify-content:center}
  .consent a,.foot-rera a,.copyline a{padding:.7rem 0;margin:-.7rem 0}
}
/* upright tablets: the note sat on the bar's top edge (641-810 wide); same in-flow placement, reserve shrinks by the note's height */
@media(min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .hero-banner{padding-bottom:calc(76vw - .35rem)}
  .hero-note{position:static;margin-top:.9rem;max-width:32rem;text-align:left}
}

/* ============ COMPACT FOOTER WHERE THE PHONE BAR SHOWS (user, 23 Sep 2026: "footer bada hai") ============ */
/* The phone bar is about 3.4rem tall, so the footer keeps only that much room under it instead of 8rem. */
.disc-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.disc-more{display:none}
@media(max-width:900px){
  footer{padding:2.25rem 1.1rem calc(3.4rem + 1.25rem + env(safe-area-inset-bottom))}
  .foot-grid{gap:1.4rem;padding-bottom:1.4rem}
  footer .foot-note{display:none}   /* the disclaimer and the copyright line say the same */
  .foot-rera{line-height:1.6}
  .disclaimer{margin-top:1.3rem}
  .copyline{margin-top:1rem;gap:.35rem}
}
@media(min-width:901px) and (max-width:1319px) and (pointer:coarse),(min-width:901px) and (max-height:500px){
  footer{padding-bottom:calc(3.4rem + 1.5rem + env(safe-area-inset-bottom))}
}
/* phones: three lines of the disclaimer, the rest one tap away (all of it stays in the page for search) */
@media(max-width:640px){
  .disclaimer{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .disc-cb:checked + .disclaimer{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
  .disc-more{display:inline-block;padding:.55rem 0;font-size:.72rem;font-weight:600;color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .disc-cb:checked ~ .disc-more{display:none}
  .disc-cb:focus-visible ~ .disc-more{outline:2px solid var(--gold-bright);outline-offset:2px}
}


/* ============ DAMAC type scale: the hero heading and the stat tiles (24 Sep 2026, after the lagoon skin) ============
   damacproperties.com keeps its headings small and widely tracked under a large logo; the hero
   now carries the DAMAC Islands logo, so its heading steps down to the same register. The wide
   display face also needs smaller figures in the narrow status and plan tiles. */
.hero h1{font-size:min(1.42rem,calc((100vw - 2.2rem)/14.2));line-height:1.24;margin:.9rem 0 .6rem}
@media(min-width:641px){.hero h1{font-size:clamp(1.5rem,3.3vw,1.85rem)}}
@media(max-width:980px) and (orientation:landscape){.hero h1{font-size:clamp(1.1rem,2.6vw,1.45rem)}.hero-logo{width:clamp(8.5rem,17vw,11rem);margin-bottom:.6rem}}
@media(max-width:980px) and (orientation:landscape) and (max-height:360px){.hero h1{font-size:1rem}.hero-logo{display:none}}
@media(min-width:981px){.hero h1{font-size:clamp(1.6rem,2.05vw,2rem);margin:1rem 0 .7rem}}
@media(min-width:981px) and (max-height:700px){.hero h1{font-size:clamp(1.4rem,1.8vw,1.7rem)}.hero-logo{width:12rem;margin-bottom:.6rem}}
@media(min-width:1800px){.hero h1{font-size:clamp(2rem,1.5vw,2.8rem)}.hero-logo{width:clamp(17rem,16vw,24rem)}}
.status-card .n{font-size:1.12rem;line-height:1.2}
@media(max-width:520px){.status-card .n{font-size:1rem}}
@media(max-width:360px){.status-card .n{font-size:.9rem}}
.fp-spec .v{font-size:1.05rem;line-height:1.2}
@media(max-width:420px){.fp-spec .v{font-size:.95rem}}

/* ============ phones after the lagoon skin (24 Sep 2026, 375 px walk) ============
   The wide display face needs its own phone sizes: five plan tabs wrap onto two rows instead of
   running off screen, the stat strip and price box keep whole words, the price table keeps its
   Get Price column in view, and the hero drops the eyebrow (the DAMAC Islands logo now says it). */
.pstat .v{overflow-wrap:normal}
@media(max-width:640px){
  .hero .eyebrow{display:none}
  .hero-logo{width:10rem}
  .hero-price .hp-big{font-size:.98rem;letter-spacing:.03em}
  .hero-price .hp-val{font-size:1.28rem}
  .hero-price .hp-lbl{letter-spacing:.12em}
  .fp-tabs{flex-wrap:wrap;gap:.45rem}
  .fp-tab{flex:1 1 auto;font-size:.58rem;letter-spacing:.05em;padding:.62rem .7rem}
  .price-scroll table.price .cfg{font-size:.74rem;letter-spacing:.05em;line-height:1.2}
  .price-scroll table.price .pr{font-size:.76rem}
  table.price .act button{font-size:.5rem;letter-spacing:.04em;padding:.5rem .62rem}
  table.price th{letter-spacing:.1em}
  .band h2{font-size:clamp(1.25rem,6.4vw,1.6rem);line-height:1.3}
  .btn{letter-spacing:.09em}
}
@media(max-width:619px){.pstat .v{font-size:1rem;letter-spacing:.02em}}
@media(max-width:360px){.pstat .v{font-size:.9rem}.hero-price .hp-big{font-size:.9rem}.fp-tab{font-size:.54rem}}
/* the Astoria hero rule on phones and upright tablets: the photo (and the film over it) covers the
   WHOLE banner, so no flat dark band shows above it when the copy is taller than the free top of
   the 9:16 frame; the frame stays anchored at its bottom, where the lagoon is */
@media(max-width:980px) and (orientation:portrait){
  .hero-bg img,.hero-bg video{top:0;height:100%;object-fit:cover;object-position:50% 100%}
}
.hero-banner{background-color:var(--indigo-night)}
/* thank-you screen: a plain "Back to the page" link under the buttons (house rule book), 44px tall */
.succ-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .6rem;margin-top:.2rem;font-size:.84rem;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.succ-back:hover{color:var(--ink)}
/* "Last updated" line under the disclaimer: bump its <time> and the WebPage dateModified in the JSON-LD on every content change */
.updated{margin-top:1.2rem;font-size:.68rem;color:rgba(255,255,255,.66)}
/* 320-360 px phones (overflow scan, 24 Sep 2026): the long capitals of the wide face fit the column */
@media(max-width:640px){.visit h2{font-size:clamp(1.3rem,6.2vw,1.7rem);line-height:1.22}}
@media(max-width:360px){
  .imm-stat{padding:.95rem .75rem}
  .imm-stat .n{font-size:.92rem;letter-spacing:.01em}
  .hero-price>div{padding:.6rem .6rem}
  .hero-price .hp-val{font-size:1.12rem}
}

/* the hero carries no legal lines (24 Sep 2026): the T&C / conceptual image / channel partner note and the contact
   consent sit in one footer line, and the privacy page carries the full terms */
.foot-legal{margin-top:1rem;font-size:.66rem;line-height:1.6;color:rgba(255,255,255,.7);max-width:62rem}
.foot-legal a{color:rgba(255,255,255,.88);font-weight:600}
/* the attention glow on the Get Price buttons and the plan tabs, on the compositor (house rule book rev 4:
   a looping box-shadow repaints every frame, 15 to 22% of a phone's idle main thread on Kindle/Godrej).
   The ring is a ::after with a fixed box-shadow and only its opacity and scale animate. */
table.price .act button,.fp-tab{position:relative;animation:none!important}
table.price .act button::after,.fp-tab:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 7px rgba(var(--accent-rgb),.28);opacity:0;transform:scale(.96);animation:gpRing 2.8s var(--ease) infinite}
@media(max-width:640px){.fp-tab:not(.on)::after{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}}
table.price .act button:hover::after,.fp-tab:hover::after{animation-play-state:paused}
@keyframes gpRing{0%,100%{opacity:0;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){table.price .act button::after,.fp-tab::after{animation:none;opacity:0}}

/* the consent under the popup and walkthrough forms, one short line (24 Sep 2026); the full wording is in the
   footer line and on the privacy page */
.consent.consent-sm{font-size:.56rem;line-height:1.45;margin-top:.55rem;color:var(--muted)}
.consent.consent-sm a{font-weight:600}
@media(min-width:981px){.hero .consent.consent-sm{margin-top:.35rem}}
/* the popup card takes focus only so screen readers start inside the dialog; it is not a control, so no ring */
.modal-card:focus{outline:none}

/* the form consent line as on damacproperties.com's own enquiry form (read 24 Sep 2026): under the submit button,
   Roboto 12px in the ink colour, "Terms and Conditions" and "Privacy Policy" underlined at weight 500, no checkbox */
.consent.consent-sm{font-size:.75rem;line-height:1.5;margin-top:1rem;color:var(--ink)}
.consent.consent-sm a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ============ 27-size check (25 Sep 2026): laptops, small phones, smallest text ============ */
/* laptops: the hero tagline pill stays one line (at 981-1799px its 551px of text met a 544px column and broke into
   three stacked chunks), and on screens 701-820px tall the logo steps down so the form's field row sits inside the
   first screen at 1280x720 (it ended 24px below) */
@media(min-width:981px){.hero .eyebrow{white-space:nowrap;letter-spacing:.15em}}
@media(min-width:981px) and (min-height:701px) and (max-height:820px){.hero-logo{width:14rem;margin-bottom:.75rem}}
/* small phones: long buttons stay on one line where the width allows (tracking .05em, a little less padding); a label
   that still wraps at 320-360px breaks into two even lines, never one orphan word */
.btn{text-wrap:balance}
@media(max-width:400px){.btn{letter-spacing:.05em;gap:.5rem;padding-left:.95rem}}
/* nothing under 9.5px: the plan tabs (9.3px, 8.6px at 360) and the price table's keyword label (8px) */
@media(max-width:640px){.fp-tab{font-size:.6rem}table.price .cfg .c-sm{font-size:.6rem;letter-spacing:.1em}}
/* headings break into even lines ("LIVE THE ISLAND / STATE OF MIND", not "... STATE OF / MIND") */
h1,h2{text-wrap:balance}