/* Burj Near Dentalia — quotation page stylesheet.
   Tokens and components forked from the WSL/PrivateZone showcase design system
   (privatezone site.css); the scrub-cinema components at the bottom are this
   page's own, built from the same tokens. */
  :root{
    --green-900:#0e2019; --green-800:#12291f; --green-700:#16382a; --green-600:#1f4d39; --green-500:#2e6b52;
    --bg:#f3efe4; --surface:#fffdf8; --surface-2:#faf6ec;
    --ink:#1c241e; --ink-2:#464e45; --muted:#61685c;
    --gold:#b98f3e; --gold-soft:#d9c08a; --gold-tint:#f1e7cf;
    --line:#e7ddc8; --line-soft:#efe8d8;
    --e-out:cubic-bezier(.22,1,.36,1);
    --shadow-1:0 1px 2px rgba(14,32,25,.04), 0 8px 24px -12px rgba(14,32,25,.18);
    --shadow-2:0 2px 6px rgba(14,32,25,.06), 0 24px 48px -20px rgba(14,32,25,.28);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;background:var(--green-900);overscroll-behavior-y:none}
  body{background:var(--bg);color:var(--ink);
    font-family:"Readex Pro",system-ui,-apple-system,"Segoe UI","Tahoma",Arial,sans-serif;
    font-weight:400;line-height:1.5;font-variant-numeric:lining-nums tabular-nums;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color:transparent}
  em{font-style:normal}
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

  .wsl-logo{display:block;width:auto;color:#ece3cf}

  /* ─── PRIMARY CTA ───
     Gold is reserved: the only gold-FILLED surface on the page, so the one action
     reads as the one action. Shared by the CTA card, the mobile sticky pill and
     the footer close, which all open the same WhatsApp thread. */
  .cta-gold{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    background:linear-gradient(140deg,#e9d7ae 0%,#cfad66 48%,#b98f3e 100%);
    color:var(--green-900);text-decoration:none;font-family:inherit;font-weight:600;
    letter-spacing:.012em;border-radius:100px;border:1px solid rgba(255,255,255,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -12px rgba(120,86,20,.72);
    transition:filter .22s var(--e-out),transform .18s var(--e-out),box-shadow .22s var(--e-out)}
  .cta-gold:hover{filter:brightness(1.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 16px 30px -14px rgba(120,86,20,.85)}
  .cta-gold:active{transform:scale(.985)}
  .cta-gold:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
  .cta-gold svg{flex:none}

  /* ─── DOCUMENT SECTIONS (quotation body on the cream page) ─── */
  .terms,.includes{max-width:1220px;margin:0 auto clamp(28px,4vw,40px);
    padding:0 clamp(16px,4vw,32px);scroll-margin-top:16px}
  .terms:first-of-type{margin-top:clamp(28px,4vw,40px)}
  .includes{margin-bottom:clamp(16px,2vw,22px)}
  .terms-inner,.includes-inner{background:var(--surface);border:1px solid var(--line);
    border-radius:20px;padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-1)}
  .terms-inner h2,.includes-inner h2{color:var(--green-700);font-size:1.15rem;
    font-weight:600;margin-bottom:18px}
  .qlede{color:var(--muted);font-size:.9rem;font-weight:300;margin:-6px 0 18px;max-width:64ch}

  .inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 24px}
  .inc-item{display:flex;align-items:flex-start;gap:.65em}
  .inc-item svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--gold)}
  .inc-item b{color:var(--ink-2);font-size:.88rem;font-weight:400;line-height:1.5}
  .inc-item span{display:block;font-size:.74rem;color:var(--muted);font-weight:300;margin-top:2px}
  @media (max-width:840px){ .inc-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:420px){ .inc-grid{grid-template-columns:1fr} }

  /* quotation banner — the site's callout treatment (gold tint + gold-soft hairline) */
  .qbanner{max-width:1220px;margin:0 auto clamp(16px,2vw,22px);padding:0 clamp(16px,4vw,32px)}
  .qbanner-inner{display:flex;gap:12px;align-items:flex-start;
    background:var(--gold-tint);border:1px solid var(--gold-soft);
    border-radius:14px;padding:clamp(14px,2.4vw,18px) clamp(15px,2.6vw,20px)}
  .qbanner-inner svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold)}
  .qbanner-inner b{display:block;color:var(--green-700);font-weight:600;font-size:.98rem;margin-bottom:4px}
  .qbanner-inner p{font-size:.88rem;color:var(--ink-2);font-weight:300;line-height:1.65}

  /* single price card — the offer pages' .opt, marked selected (gold top bar) */
  .opts{display:grid;gap:14px;grid-template-columns:1fr;max-width:560px}
  .opt{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:clamp(16px,2.4vw,22px);text-align:start;font-family:inherit;width:100%;
    display:block;position:relative}
  .opt.on{border-color:var(--gold);box-shadow:var(--shadow-1)}
  .opt.on::before{content:"";position:absolute;inset-block-start:0;inset-inline:14px;
    height:3px;background:var(--gold);border-radius:0 0 3px 3px}
  .obadge{display:inline-block;background:var(--gold-tint);border:1px solid var(--gold-soft);
    color:#7a5c1e;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:100px;margin-bottom:9px}
  .oname{font-size:1.04rem;font-weight:600;color:var(--green-700)}
  .orooms{font-size:.8rem;color:var(--muted);margin-top:4px;font-weight:300}
  .oprice{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
  .oprice b{font-size:clamp(1.5rem,4vw,1.8rem);font-weight:600;color:var(--green-700);letter-spacing:-.02em}
  .oprice u{text-decoration:none;font-size:.86rem;font-weight:400;color:var(--muted)}
  .osub{font-size:.82rem;color:var(--muted);margin-top:4px;font-weight:300}
  .oindic{margin-top:10px;font-size:.74rem;color:var(--muted);font-weight:300;line-height:1.5}
  .opending{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
  .opending .note{background:var(--gold-tint);border:1px solid var(--gold-soft);color:#6b551f;
    border-radius:12px;padding:12px 14px;font-size:.86rem;line-height:1.6;font-weight:300}
  /* price rows — one line per floor/unit, label start, price end */
  .floors{list-style:none;margin-top:14px;padding-top:3px;border-top:1px solid var(--line-soft)}
  .floors li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .floors li:last-child{border-bottom:0}
  .floors span{font-size:.92rem;font-weight:300;color:var(--ink-2)}
  .floors b{font-size:1rem;font-weight:600;color:var(--green-700);white-space:nowrap}
  .floors u{text-decoration:none;font-size:.76rem;font-weight:400;color:var(--muted)}

  .ospec{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
  .ospec div{min-width:58px}
  .ospec span{display:block;font-size:.7rem;color:var(--muted);font-weight:300;margin-bottom:2px}
  .ospec b{font-size:.96rem;font-weight:600;color:var(--green-700)}

  /* floor picker — tap the floors you want, the .ospec row underneath sums them.
     aria-pressed carries the state, so it is both the a11y contract and the style hook. */
  .fpick{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
  .fpick > span{display:block;font-size:.7rem;color:var(--muted);font-weight:300;margin-bottom:8px}
  .fpick .chips{display:flex;flex-wrap:wrap;gap:8px}
  .fpick button{font-family:inherit;font-size:.95rem;font-weight:500;color:var(--ink-2);
    background:var(--surface);border:1px solid var(--line);border-radius:100px;
    min-width:44px;min-height:40px;padding:0 12px;cursor:pointer;transition:background .15s,border-color .15s}
  .fpick button[aria-pressed="true"]{background:var(--gold-tint);border-color:var(--gold);
    color:#7a5c1e;font-weight:600}
  .fpick .none{font-size:.82rem;color:var(--muted);font-weight:300;margin-top:14px}

  /* floor-plan schematic — privatezone's plan pattern, trimmed: tappable units +
     muted shared core, no side panel (the .ospec card under the svg is the panel).
     aria-pressed is the selection contract, same as .fpick. */
  .planbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:clamp(14px,2.4vw,20px)}
  .plancap{display:flex;align-items:center;gap:.6em;color:var(--muted);
    font-size:.85rem;font-weight:300;margin-bottom:10px}
  .plancap i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
  .planscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .planscroll::-webkit-scrollbar{display:none}
  .plan{display:block;width:100%;min-width:620px;height:auto}
  .plan .shell{fill:none;stroke:var(--green-700);stroke-width:3}
  .plan .room{cursor:pointer}
  .plan .room rect{fill:#e8efe6;stroke:var(--green-500);stroke-width:1.5;
    transition:fill .18s var(--e-out),stroke .18s ease}
  .plan .room text{fill:var(--green-700);pointer-events:none;font-family:inherit}
  .plan .room:hover rect{fill:#dce8d8}
  .plan .room[aria-pressed="true"] rect{fill:var(--green-700);stroke:var(--gold);stroke-width:2.5}
  .plan .room[aria-pressed="true"] text{fill:#fff}
  .plan .room:focus{outline:none}
  .plan .room:focus-visible rect{stroke:var(--gold);stroke-width:3}
  .plan .ctx rect{fill:#f0ead9;stroke:#ddd3bd;stroke-width:1}
  .plan .ctx path{fill:none;stroke:#ddd3bd;stroke-width:1.5}
  .plan .ctx text{fill:#a89f8a;font-weight:400;font-family:inherit}
  .plan .facade{fill:none;stroke:var(--gold);stroke-width:2;opacity:.75}
  .plan .flabel{fill:var(--gold);font-size:22px;font-family:inherit}
  .plan .door{fill:var(--surface);stroke:none}
  .planfoot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--ink-2)}
  .planfoot b{color:var(--green-700);font-weight:600;font-size:1.05rem;white-space:nowrap}

  /* ─── PHOTO / MAP CARDS (shared card: media on top, pinned caption row below) ─── */
  .geomap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
  .geomap > img{display:block;width:100%;height:auto}
  /* photo cards link to their own full-size file — the phone's viewer already pinch-zooms,
     which is the whole reason a client opens a marble or a pool shot at all */
  .geomap > a{display:block}
  .geomap > a > img{display:block;width:100%;height:auto}

  /* ─── PHOTO STRIP — one room per swipeable row ───
     A room set stacked vertically is ~4 phone screens per room; scroll-snap keeps the room
     together and the page walkable. The 86% width is load-bearing: the peek of the next
     card is the only affordance a thumb gets that the row scrolls at all. */
  .strip{display:flex;align-items:start;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:4px;
    scrollbar-width:none;margin-inline:-4px;padding:0 4px 4px}
  .strip::-webkit-scrollbar{display:none}
  /* snap to start, not center: centering can't be honoured by the first and last card,
     so those two snap somewhere the others don't and the row feels broken */
  .strip > .geomap{flex:0 0 86%;scroll-snap-align:start}
  @media (min-width:840px){ .strip > .geomap{flex:0 0 46%} }
  #map{width:100%;height:clamp(260px,48vw,400px);background:var(--surface-2)}
  .geofoot{display:flex;align-items:center;gap:9px;padding:13px 16px;
    border-top:1px solid var(--line-soft);background:var(--surface)}
  .geofoot svg{width:16px;height:16px;flex:none;color:var(--gold)}
  .geofoot span{font-size:.85rem;color:var(--ink-2);font-weight:300}
  /* shown only when Maps fails — a hole in the page in front of a client is worse than no map */
  .geofall{display:none;padding:clamp(22px,4vw,34px);text-align:center;background:var(--surface-2)}
  .geofall b{display:block;font-size:1rem;color:var(--green-700);font-weight:600;margin-bottom:6px}
  .geofall p{font-size:.88rem;color:var(--muted);font-weight:300}
  .geomap.failed #map{display:none}
  .geomap.failed .geofall{display:block}

  .ctacard{text-align:center}
  .ctacard p{margin:10px auto 0;max-width:54ch;color:var(--ink-2);font-size:.95rem;font-weight:300;line-height:1.7}
  .fcall{margin:16px 0 6px;padding:15px 30px;font-size:1.06rem}
  .fcall svg{width:19px;height:19px}
  .fcall:focus-visible{outline-color:var(--gold-soft)}
  .qfoot{margin-top:14px;font-size:.8rem;color:var(--muted);font-weight:300}

  /* ─── FOOTER ─── */
  .footer{background:var(--green-900);color:#cfe0d5;text-align:center;
    padding:clamp(30px,5vw,44px) 22px;position:relative}
  .footer::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(217,192,138,.5),transparent)}
  .wsl-foot{height:clamp(76px,9vw,98px);margin:0 auto}
  .footnote{font-size:.8rem;color:#9fb3a6;font-weight:300;margin-top:10px}

  /* ─── SCRUB CINEMA (this page's own component, villa-amwaj engine under WSL skin) ─── */
  .scrub{position:relative}
  .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
    background:
      radial-gradient(115% 90% at 82% -12%, rgba(46,107,82,.55) 0%, rgba(46,107,82,0) 52%),
      linear-gradient(158deg,#143024 0%,#0e2019 68%)}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  @media (min-width:840px){
    /* portrait frames stay a centered 9:16 pillar on wide screens — deliberate letterbox */
    .stage canvas{inset:0 auto;left:50%;transform:translateX(-50%);
      width:auto;aspect-ratio:9/16;max-width:100%;
      border-inline:1px solid rgba(217,192,138,.28)}
  }
  /* Static-photo hero: the same box as .stage for a page with no canvas to scrub.
     .scrim / .sbrand / .hint are position:absolute, so they drop in here unchanged. */
  .hero{position:relative;height:100vh;height:100dvh;overflow:hidden;
    background:
      radial-gradient(115% 90% at 82% -12%, rgba(46,107,82,.55) 0%, rgba(46,107,82,0) 52%),
      linear-gradient(158deg,#143024 0%,#0e2019 68%)}
  .hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  @media (min-width:840px){
    .hero > img{inset:0 auto;left:50%;transform:translateX(-50%);
      width:auto;aspect-ratio:9/16;max-width:100%;height:100%;object-fit:cover;
      border-inline:1px solid rgba(217,192,138,.28)}
  }

  .scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(to top, rgba(14,32,25,.82) 0%, rgba(14,32,25,0) 46%),
               linear-gradient(to bottom, rgba(14,32,25,.55) 0%, rgba(14,32,25,0) 24%)}
  .sprog{position:absolute;top:0;inset-inline:0;height:3px;background:var(--gold);
    transform:scaleX(0);transform-origin:100% 50%;z-index:3}
  html[dir="ltr"] .sprog{transform-origin:0 50%}

  .sbrand{position:absolute;top:calc(18px + env(safe-area-inset-top));inset-inline:0;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    color:#f4efe4;z-index:2;transition:opacity .6s var(--e-out)}
  .sbrand.hidden{opacity:0}
  .sbrand .wsl-logo{height:clamp(64px,9vw,92px);filter:drop-shadow(0 2px 14px rgba(9,22,16,.6))}
  .sbrand h1{font-size:clamp(1.25rem,5.2vw,1.7rem);font-weight:600;
    text-shadow:0 1px 12px rgba(9,22,16,.7)}
  .sbrand .eyebrow{font-size:.8rem;font-weight:300;color:var(--gold-soft);
    text-shadow:0 1px 10px rgba(9,22,16,.8)}

  .chapter-tag{position:absolute;top:calc(20px + env(safe-area-inset-top));inset-inline:0;
    margin-inline:auto;width:max-content;z-index:2;
    background:rgba(14,32,25,.55);border:1px solid rgba(217,192,138,.42);color:var(--gold-soft);
    font-size:.78rem;font-weight:500;padding:6px 16px;border-radius:100px;
    backdrop-filter:blur(6px)}

  .sets{position:absolute;inset-inline:0;bottom:calc(58px + env(safe-area-inset-bottom));
    min-height:120px;padding:0 22px;text-align:center;color:#f4efe4;z-index:2}
  .set{position:absolute;inset-inline:0;bottom:0;padding:0 22px;
    opacity:0;transform:translateY(14px);
    transition:opacity .6s var(--e-out),transform .6s var(--e-out);pointer-events:none}
  .set.on{opacity:1;transform:translateY(0)}
  .set h2{font-size:clamp(1.35rem,5.5vw,1.9rem);font-weight:600;text-shadow:0 1px 12px rgba(9,22,16,.65)}
  .set .divider{width:44px;height:2px;background:var(--gold);opacity:.85;margin:10px auto;border-radius:2px}
  .set ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
  .set li{font-size:.92rem;font-weight:300;color:rgba(244,239,228,.9);
    text-shadow:0 1px 8px rgba(9,22,16,.7);
    opacity:0;transform:translateY(8px);
    transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
  .set li::before{content:'✦';color:var(--gold-soft);font-size:.62rem;margin-inline-end:7px}
  .set.on li{opacity:1;transform:translateY(0)}
  .set.on li:nth-child(1){transition-delay:.15s}
  .set.on li:nth-child(2){transition-delay:.27s}
  .set.on li:nth-child(3){transition-delay:.39s}

  .hint{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));inset-inline:0;
    text-align:center;color:rgba(244,239,228,.85);font-size:.72rem;font-weight:300;
    letter-spacing:0;z-index:2;transition:opacity .6s}
  /* ≤840 the sticky WhatsApp pill owns the bottom edge — lift the overlays clear of it */
  @media (max-width:840px){
    .sets{bottom:calc(118px + env(safe-area-inset-bottom))}
    .hint{bottom:calc(78px + env(safe-area-inset-bottom))}
  }
  .hint .arrow{display:block;font-size:1.05rem;color:var(--gold-soft);animation:bob 1.6s var(--e-out) infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
  .hint.hidden{opacity:0}

  /* ─── LOADER ─── */
  .loader{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:18px;color:#f4efe4;
    background:
      radial-gradient(115% 90% at 82% -12%, rgba(46,107,82,.55) 0%, rgba(46,107,82,0) 52%),
      radial-gradient(90% 120% at 12% 128%, rgba(9,22,16,.9) 0%, rgba(9,22,16,0) 48%),
      linear-gradient(158deg,#143024 0%,#0e2019 68%);
    transition:opacity .6s var(--e-out)}
  .loader.done{opacity:0;pointer-events:none}
  .loader .wsl-logo{height:110px}
  .loader p{font-size:.9rem;font-weight:300;color:rgba(244,239,228,.85)}
  .loader .bar{width:200px;height:2px;background:rgba(217,192,138,.25);border-radius:2px;overflow:hidden}
  .loader .bar i{display:block;height:100%;width:100%;background:var(--gold);
    transform:scaleX(0);transform-origin:100% 50%;transition:transform .2s}

  /* ─── MOTION (transform-only entrances — opacity is never animated on .reveal,
        so content is always visible even if the animation never advances) ─── */
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* ─── MOBILE CALL CTA (revealed only ≤840) ─── */
  .mcall{display:none}
  @media (max-width:840px){
    /* persistent tap-to-chat — the page's core action, always within thumb reach.
       centred with inset+auto margins, NOT left:50%+translateX (that wrapped the label) */
    .mcall{display:inline-flex;white-space:nowrap;
      position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));
      inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:50;
      padding:14px 28px;font-size:1rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -8px rgba(14,32,25,.5)}
    .mcall svg{width:19px;height:19px}
    body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  }

  @media print{
    .mcall,.hint{display:none!important}
    .reveal{opacity:1!important;transform:none!important} /* unscrolled sections must still print */
    .opt,.terms-inner,.includes-inner,.fpick,.planbox{box-shadow:none;break-inside:avoid}
    section{break-inside:avoid}
    *{print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}
  }

  @media (prefers-reduced-motion:reduce){
    .hint .arrow{animation:none}
    .set,.set li,.sbrand,.reveal,.loader{transition:none}
    .reveal{opacity:1;transform:none}
  }