/* ============================================================================
   MAP — AI-Powered Marketing for Modern Realtors
   Apple-grade editorial system. White / near-black / navy + Apple blue.
   SF Pro (subset WOFF2) with -apple-system fallback.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* SF Pro — prefer the user's locally-installed Apple fonts (local() first);
   the subset WOFF2 is only used on machines without SF Pro installed. */
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Ultralight"),local("SFProDisplay-Ultralight"),url("/map/fonts/SFProDisplay-Ultralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Light"),local("SFProDisplay-Light"),url("/map/fonts/SFProDisplay-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Regular"),local("SFProDisplay-Regular"),url("/map/fonts/SFProDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Medium"),local("SFProDisplay-Medium"),url("/map/fonts/SFProDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Semibold"),local("SFProDisplay-Semibold"),url("/map/fonts/SFProDisplay-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:local("SF Pro Display Bold"),local("SFProDisplay-Bold"),url("/map/fonts/SFProDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Text";src:local("SF Pro Text Regular"),local("SFProText-Regular"),url("/map/fonts/SFProText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Text";src:local("SF Pro Text Medium"),local("SFProText-Medium"),url("/map/fonts/SFProText-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"SF Pro Text";src:local("SF Pro Text Semibold"),local("SFProText-Semibold"),url("/map/fonts/SFProText-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
.map-landing{
  --font-display:var(--font-app); /* unified to canonical SF Pro/system app font (per user) */
  --font-text:var(--font-app);

  --paper:#ffffff;
  --bg-light:#ffffff;       /* was #F5F5F7 — set to white per the user so no gray seam/cut between sections */
  --black:#000000;          /* pure neutral black — shared by the hero/proof/weare dark run, NO blue tint */
  --ink:#222326;            /* near-black headings/primary text (image 2) */
  --ink-soft:rgba(31,32,37,0.72); /* secondary text — bolder & legible (paired with weight 500) */
  --ink-strong:#0a0a0a;
  --ink-2:var(--ink-soft);  /* repointed: all secondary text now uses the soft, readable token */
  --ink-3:var(--ink-soft);
  --body-ink:rgba(0,0,0,.6); /* canonical body text color (light sections); .choice overrides to white-60 */
  --hairline:rgba(0,0,0,.10);
  --hairline-2:rgba(0,0,0,.055);
  --tint:rgba(10,37,64,.04);

  --accent:#0071e3;
  --accent-press:#0064c8;
  --accent-soft:rgba(0,113,227,.10);
  --navy:#0a2540;
  --navy-2:#0a1b30;

  --ink-bg:#0a0a0b;
  --ink-bg-2:#070708;
  --on-dark:#f5f5f7;
  --on-dark-2:rgba(255,255,255,0.7);  /* secondary text on dark sections */
  --on-dark-3:#7c7c83;
  --hairline-dark:rgba(255,255,255,.14);
  --hairline-dark-2:rgba(255,255,255,.07);

  --maxw:1200px;
  --maxw-narrow:920px;
  --gutter:clamp(20px,5vw,64px);
  --space-section:clamp(88px,11vw,168px);
  --space-head:clamp(40px,4.5vw,64px);

  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-q:cubic-bezier(.22,1,.36,1);

  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 16px 40px -18px rgba(10,30,60,.18);
  --shadow-lift:0 2px 8px rgba(16,24,40,.06),0 40px 80px -26px rgba(10,30,60,.30);
}

/* ---------- Reset / base ---------- */
.map-landing *, .map-landing *::before, .map-landing *::after{box-sizing:border-box;}
.map-landing{-webkit-text-size-adjust:100%;}
.map-landing{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-weight:500;font-size:17px;line-height:1.55;  /* 500 base: no thin secondary anywhere */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;overflow-x:clip;   /* clip (not hidden) so position:sticky still works */
}
.map-landing img, .map-landing video{max-width:100%;display:block;}
.map-landing a{color:inherit;}
.map-landing h1, .map-landing h2, .map-landing h3, .map-landing p, .map-landing ul, .map-landing ol, .map-landing figure{margin:0;}
.map-landing ul, .map-landing ol{list-style:none;padding:0;}
.map-landing button{font:inherit;color:inherit;}
.map-landing ::selection{background:rgba(0,113,227,.18);}
.map-landing :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px;}
.map-landing #top:focus, .map-landing #top:focus-visible{outline:none;}

.map-landing .icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:inline-block;flex:none;}

/* ---------- Reveal system ----------
   Content is VISIBLE by default (opacity:1). The reveal is opt-in via the
   `.reveal-anim` class that main.js adds to a target ONLY when it is still below
   the viewport at init — so on-screen / already-scrolled-past content can never
   be stuck hidden (the bug where fast Lenis scrolling outran the IntersectionO-
   bserver and left whole sections blank). `.is-in` plays the entrance. */
.map-landing.js [data-reveal].reveal-anim{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.05s var(--ease);will-change:opacity,transform;}
.map-landing.js [data-reveal].reveal-anim.is-in{opacity:1;transform:none;}

/* ---------- Typography utilities ---------- */
/* Headings — image 2: SF Pro Display 600, tight negative tracking, tight leading */
.map-landing .display-1{font-family:var(--font-display);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.5rem,5.6vw,5rem);}
.map-landing .display-2{font-family:var(--font-display);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);text-wrap:balance;}
.map-landing .kicker{font-family:var(--font-text);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;display:inline-flex;align-items:center;gap:9px;}
.map-landing .kicker::before{content:"";width:18px;height:1.5px;background:currentColor;display:inline-block;border-radius:2px;opacity:.7;}
.map-landing .kicker--invert{color:#5aa6ff;}
/* Secondary / sub text — image 2: SF Pro Text, weight 500 (bolder, legible), soft ink */
.map-landing .lede{font-family:var(--font-text);font-weight:400;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.45;letter-spacing:normal;max-width:40ch;margin-top:24px;}
.map-landing .section__head--center .lede{margin-left:auto;margin-right:auto;}
.map-landing .lede--invert{color:var(--on-dark-2);}
.map-landing .lede--tight{margin-top:18px;font-size:clamp(1rem,1.3vw,1.15rem);}
.map-landing .display--invert{color:var(--on-dark);}
.map-landing .body-lg{font-family:var(--font-text);font-weight:400;font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.55;letter-spacing:normal;color:var(--body-ink);}
.map-landing .footnote{font-family:var(--font-text);font-weight:400;font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);color:var(--body-ink);letter-spacing:normal;line-height:1.45;margin-top:34px;max-width:60ch;}
.map-landing .footnote--center{margin-left:auto;margin-right:auto;text-align:center;}
.map-landing .measure-wide{max-width:62ch;}

/* ---------- Section scaffold ---------- */
.map-landing .section{padding:var(--space-section) 0;position:relative;}
.map-landing .section[id], .map-landing [id].section{scroll-margin-top:64px;}
.map-landing .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.map-landing .section__head{max-width:var(--maxw-narrow);margin-bottom:var(--space-head);}
.map-landing .section__head--center{text-align:center;margin-left:auto;margin-right:auto;}

/* INTRO (greeting -> Start -> film) was REMOVED — its ~25 .intro/.water/
   .start-btn/.skip-btn rules + @keyframes waveScroll were deleted as dead CSS. */

/* ============================================================================
   NAV
   ========================================================================== */
.map-landing .nav{position:fixed;top:0;left:0;right:0;z-index:900;
  transition:opacity 1.3s var(--ease),transform 1.3s var(--ease),filter 1.3s var(--ease),background .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;}
.map-landing .nav::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,7,12,.5),rgba(4,7,12,0));
  opacity:1;transition:opacity .4s var(--ease);}
.map-landing .nav.scrolled::before{opacity:0;}
.map-landing .nav__inner{position:relative;z-index:1;}
.map-landing .nav[data-state="hidden"]{opacity:0;transform:translateY(-14px);filter:blur(14px);pointer-events:none;}
.map-landing .nav[data-state="shown"]{opacity:1;transform:none;filter:blur(0);}
.map-landing.no-js .nav{opacity:1;transform:none;filter:none;pointer-events:auto;}
.map-landing .nav.scrolled{background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--hairline-2);}
.map-landing .nav.scrolled .nav__mark{background:var(--ink-strong);}
.map-landing .nav.scrolled .nav__word{color:var(--ink);}
.map-landing .nav.scrolled .nav__links a{color:var(--ink-2);}
.map-landing .nav.scrolled .nav__links a:hover{color:var(--ink);}
.map-landing .nav.scrolled .nav__toggle span, .map-landing .nav.menu-open .nav__toggle span{background:var(--ink);}
.map-landing .nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.map-landing .nav__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.map-landing .nav__logo{height:24px;width:auto;display:block;filter:invert(1);transition:filter .35s var(--ease);}
.map-landing .nav.scrolled .nav__logo{filter:none;}
.map-landing .nav__mark{width:20px;height:20px;border-radius:6px;background:#fff;position:relative;transition:background .35s var(--ease);}
.map-landing .nav__mark::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.6px solid var(--accent);}
.map-landing .nav__word{font-family:var(--font-display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;color:#fff;transition:color .35s var(--ease);}
.map-landing .nav__dot{color:var(--accent);}
.map-landing .nav__links{display:flex;gap:30px;}
.map-landing .nav__links a{font-size:.92rem;color:rgba(255,255,255,.82);text-decoration:none;transition:color .25s;}
.map-landing .nav__links a:hover{color:#fff;}
.map-landing .nav__cta{padding:9px 18px;font-size:.9rem;}
.map-landing .nav__toggle{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.map-landing .nav__toggle span{width:20px;height:1.6px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .25s,background .35s var(--ease);}
.map-landing .nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg);}
.map-landing .nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg);}
.map-landing .nav__menu{display:none;}

/* ============================================================================
   HERO (post-video)
   ========================================================================== */
.map-landing .hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;overflow:hidden;background:var(--black);}
.map-landing .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transition:filter 1.4s var(--ease),transform 1.6s var(--ease);}
.map-landing .hero--revealed .hero__video{filter:blur(3px) brightness(.86) saturate(1.02);transform:scale(1.06);}
/* Hero ships `hero--revealed` and the intro reveal was removed, so the scrim/
   black/title/sub/scroll-cue are shown in their final state directly — no
   opacity:0 base, no --reveal-dur (it was only set by the deleted revealHero).
   Keeping the title visible unconditionally is the failsafe against a black hero. */
.map-landing .hero__scrim{position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(125% 100% at 50% 32%,rgba(4,7,12,.06) 0%,rgba(4,7,12,.42) 52%,rgba(4,7,12,.86) 100%),
    linear-gradient(to top,rgba(4,7,12,.92) 0%,rgba(4,7,12,.30) 42%,rgba(4,7,12,.42) 100%);}
.map-landing .hero__black{position:absolute;inset:0;z-index:2;background:var(--black);opacity:.5;}
.map-landing .hero__inner{position:relative;z-index:3;width:100%;max-width:1100px;margin:0 auto;text-align:center;
  padding:0 var(--gutter);}
.map-landing .hero__title{font-family:var(--font-display);color:#fff;font-weight:600;letter-spacing:-.03em;line-height:1.015;
  font-size:clamp(2.6rem,7.4vw,6.4rem);margin:0;text-shadow:0 2px 40px rgba(0,0,0,.35);}
.map-landing .hero__title .line{display:block;}
.map-landing .hero__title .word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em;}
.map-landing .hero__title .word>span{display:inline-block;transform:none;}
.map-landing .hero__sub{margin:clamp(20px,3vh,30px) auto 0;max-width:42ch;color:var(--on-dark-2);
  font-family:var(--font-text);font-weight:400;font-size:clamp(1rem,1.5vw,1.28rem);letter-spacing:normal;line-height:1.35;}
.map-landing .scroll-cue{position:absolute;left:50%;bottom:clamp(26px,5vh,46px);transform:translateX(-50%);z-index:3;
  display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  color:rgba(245,245,247,.72);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;}
.map-landing .scroll-cue .icon{width:20px;height:20px;animation:cueBob 2.4s var(--ease) infinite;}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* ============================================================================
   PROOF / STATS — gapless bento
   ========================================================================== */
.map-landing .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.map-landing .stat{grid-column:span 3;background:#fbfbfd;border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  padding:34px 30px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s;}
.map-landing .stat--feature{grid-column:span 6;min-height:230px;background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 100%);}
.map-landing .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:transparent;}
.map-landing .stat__num{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(2.6rem,4.4vw,4rem);color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.map-landing .stat--feature .stat__num{font-size:clamp(3.2rem,6vw,5.4rem);
  background:none;color:var(--navy);}
.map-landing .stat__label{font-size:1rem;color:var(--ink-2);letter-spacing:-.01em;}

/* ============================================================================
   PROOF — full-black single-row logo marquee
   LogoSlider progressive-blur edge shell + a duplicated-track seamless loop
   (variable-width logos break the per-item % math, so we clone the set once
   and translateX(-50%) — gapless with any widths).
   ========================================================================== */
.map-landing .section--proof{background:var(--black);}   /* pure #000000, full-bleed — matches .weare seamlessly, no seam */

.map-landing .logoband__eyebrow{text-align:center;text-transform:uppercase;letter-spacing:-.03em;
  color:#8a8a8e;font-family:var(--font-text);font-weight:600;font-size:1.125rem;line-height:1.5;
  margin:0 auto clamp(32px,4.5vw,52px);max-width:92%;}
.map-landing .logoband__rows{display:block;}

/* --- edge-blur shell (from the LogoSlider) --- */
.map-landing .logo-slider{ --speed:60; --blurs:8; --blur:1; width:100%; overflow:hidden; }
.map-landing .logo-slider__container{ position:relative; width:100%; min-height:56px; display:grid;
  mask:linear-gradient(90deg, transparent, black 15% 85%, transparent);
  -webkit-mask:linear-gradient(90deg, transparent, black 15% 85%, transparent); }
.map-landing .logo-slider__blur{ position:absolute; top:0; bottom:0; width:25%; z-index:10; pointer-events:none; }
.map-landing .logo-slider__blur--left{ left:0; transform:rotate(180deg); }
.map-landing .logo-slider__blur--right{ right:0; }
.map-landing .logo-slider__blur > div{
  position:absolute; inset:0; z-index:var(--blur-index);
  mask:linear-gradient(90deg,
    transparent calc(var(--blur-index) * calc((100 / var(--blurs)) * 1%)),
    black calc((var(--blur-index) + 1) * calc((100 / var(--blurs)) * 1%)),
    black calc((var(--blur-index) + 2) * calc((100 / var(--blurs)) * 1%)),
    transparent calc((var(--blur-index) + 3) * calc((100 / var(--blurs)) * 1%)));
  -webkit-mask:linear-gradient(90deg,
    transparent calc(var(--blur-index) * calc((100 / var(--blurs)) * 1%)),
    black calc((var(--blur-index) + 1) * calc((100 / var(--blurs)) * 1%)),
    black calc((var(--blur-index) + 2) * calc((100 / var(--blurs)) * 1%)),
    transparent calc((var(--blur-index) + 3) * calc((100 / var(--blurs)) * 1%)));
  backdrop-filter:blur(calc((var(--blur-index,0) * var(--blur,0)) * 1px));
  -webkit-backdrop-filter:blur(calc((var(--blur-index,0) * var(--blur,0)) * 1px)); }

/* --- seamless duplicated-track marquee --- */
.map-landing .logo-slider__track{ display:flex; align-items:center; width:max-content; margin:0; padding:0; list-style:none;
  animation:logo-marquee var(--dur,60s) linear infinite; will-change:transform; }
@keyframes logo-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.map-landing .logo-slider__container[data-pause-on-hover="true"]:hover .logo-slider__track{ animation-play-state:paused; }

/* --- logos float directly on black: natural aspect, capped height, no box, no clip --- */
.map-landing .logo-slider__item{ flex:none; display:flex; align-items:center; justify-content:center;
  margin:0 32px; }   /* ~64px between logos; symmetric margins keep the -50% wrap gapless */
.map-landing .logo-slider__item img{ display:block; height:34px; width:auto;
  min-width:120px; max-width:220px; object-fit:contain;
  /* one white tone + glow on the SHAPE (drop-shadow follows the logo's alpha,
     never a box; no background/border/box-shadow anywhere on the item). Radius
     kept tight (8px) so the glow hugs each letter instead of merging into a
     soft rectangle on densely-packed logos. */
  filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.3));
  opacity:.8; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.map-landing .logo-slider__item:hover img{ opacity:1; transform:scale(1.06); }

/* --- responsive: smaller logos on mobile, blur edges intact --- */
@media (max-width:700px){
  .map-landing .logo-slider__item{ margin:0 22px; }
  .map-landing .logo-slider__item img{ height:28px; min-width:96px; max-width:170px; }
}

/* --- reduced motion: static centered single row, no scroll, no edge blur --- */
@media (prefers-reduced-motion:reduce){
  .map-landing .logo-slider__container{ mask:none; -webkit-mask:none; }
  .map-landing .logo-slider__blur{ display:none; }
  .map-landing .logo-slider__track{ animation:none; flex-wrap:wrap; justify-content:center; width:100%; gap:20px 30px; }
}

/* ============================================================================
   STORIES — real-work band (bevel.health behavior)
   Same slider engine as the proof band (duplicated track -> translateX(-50%)
   loop, 8-layer progressive edge blur, edge-fade mask, hover pause) but on
   WHITE with full-colour photo cards: fixed height, natural width, rounded.
   ========================================================================== */
/* (The sticky-freeze + fade-to-white handoff that lived here was removed
   2026-06-12 by user request — sections join plainly now.) */
.map-landing .section--stories{ background:#ffffff; padding-left:0; padding-right:0; }
/* Apple-award style laurel badge: gray laurels + small map. mark + SF text */
.map-landing .stories__badge{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.1vw,14px);
  margin:0 auto clamp(28px,4vw,44px); color:#8e8e93; }
.map-landing .stories__laurel{ width:clamp(24px,2.9vw,36px); height:auto; flex:none; }
.map-landing .stories__laurel--right{ transform:scaleX(-1); }
.map-landing .stories__badge-center{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.map-landing .stories__badge-logo{ width:clamp(30px,3.1vw,40px); height:auto; opacity:.62; }
.map-landing .stories__badge-text{ margin:0; text-align:center; font-family:var(--font-display);
  font-weight:600; font-size:clamp(.82rem,1.4vw,1.08rem); line-height:1.18;
  letter-spacing:-.012em; color:#8a8a8e; }
.map-landing .stories__band{ width:100%; }

/* engine overrides for photo cards (the white logo filter must NOT apply) */
.map-landing .logo-slider--stories .logo-slider__container{ min-height:0; padding:18px 0 30px; } /* room for the card shadows */
/* bevel behavior = pure edge FADE; the progressive backdrop-blur stacks paint
   black artifacts over a white background (Chromium mask+backdrop-filter), so
   the stories variant relies on the container mask alone. */
.map-landing .logo-slider--stories .logo-slider__blur{ display:none; }
.map-landing .story-card{ flex:none; margin:0 18px; }   /* symmetric margins keep the -50% wrap gapless */
.map-landing .story-card img, .map-landing .story-card video{ display:block; height:clamp(300px,36vw,460px); width:auto; min-width:0; max-width:none;
  object-fit:cover; border-radius:18px; filter:none; opacity:1;
  /* border + drop-shadow removed per user: the row of soft grey shadows merged
     into an ugly horizontal grey band under the cards. Clean white now, no grey. */
  border:none;
  box-shadow:none; }
/* 9:16 clips: reserve the card's width while only the poster/metadata is
   loaded so the track never reflows mid-loop. White (not grey) placeholder so
   an unpainted clip never flashes a grey slab. */
.map-landing .story-card video{ aspect-ratio:9 / 16; background:#ffffff; }

/* LANDSCAPE band: shorter cards (16:9 at full height would be huge) */
.map-landing .story-card--wide video{ aspect-ratio:16 / 9; height:clamp(180px,21vw,280px); }
.map-landing .stories__badge--wide{ margin-top:clamp(40px,5.5vw,72px); }

@media (max-width:700px){
  .map-landing .story-card{ margin:0 10px; }
  .map-landing .story-card img, .map-landing .story-card video{ height:clamp(240px,52vw,320px); border-radius:14px; }
  .map-landing .story-card--wide video{ height:clamp(150px,34vw,200px); }
}

/* ============================================================================
   PHOTO SPACE — pinned 3D camera pull-back (AE-style zoom out)
   The .zoomspace__world carries ONE translateZ scrubbed by scroll
   (setupZoomSpace); each .zoomcard sits at a fixed translate3d position, so
   the camera appears to fly backwards through a cloud of listing photos.
   Background: pure #000 (brand dark rule) + soft blue radial glows.
   ========================================================================== */
/* Runway: 100vh visible + 260vh of scrub distance. NO overflow on the section
   itself (overflow:hidden on a sticky ancestor kills stickiness). Section AND
   pin are TRANSPARENT during the approach — the frozen stories page (painted
   behind, whitening + blurring) shows straight through, so the transition is
   a pure edgeless fade, not a sliding panel. The stage's own gray gradient
   lives in .zoomspace__bg and fades in via applyStage(). */
.map-landing .zoomspace{ position:relative; height:360vh; background:transparent; }
.map-landing .zoomspace__pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* lucien-style soft veils, but in Left Coast gray-white: huge blurred light
   pools drifting very slowly. Carries the base gradient too (the pin itself
   stays translucent during the glass phase). */
.map-landing .zoomspace__bg{ position:absolute; inset:-14%; pointer-events:none;
  background:
    radial-gradient(44% 40% at 24% 26%, rgba(255,255,255,.95), transparent 72%),
    radial-gradient(38% 36% at 78% 70%, rgba(214,217,223,.85), transparent 72%),
    radial-gradient(54% 48% at 60% 12%, rgba(238,239,242,.9), transparent 74%),
    radial-gradient(40% 44% at 12% 82%, rgba(224,226,231,.8), transparent 72%),
    linear-gradient(180deg,#FAFAFB 0%,#F2F3F5 48%,#E9EAEE 100%);
  filter:blur(60px); animation:zoomspace-drift 26s ease-in-out infinite alternate; }
@keyframes zoomspace-drift{
  from{ transform:translate3d(-1.5%,-1%,0) scale(1); }
  to{   transform:translate3d(1.5%,1.2%,0) scale(1.06); } }
.map-landing .zoomspace__cam{ position:absolute; inset:0; perspective:1100px; perspective-origin:50% 50%; }
.map-landing .zoomspace__world{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.map-landing .zoomcard{ position:absolute; left:50%; top:50%; margin:0; will-change:opacity,filter; }
/* espaciolanube-style dreamy edges: no border, no hard shadow — the photo
   melts out at its corners via a radial feather mask; per-card blur (depth of
   field + blur-in) is driven from setupZoomSpace(). */
.map-landing .zoomcard img{ display:block; width:var(--w,340px); height:auto; border-radius:18px;
  -webkit-mask-image:radial-gradient(135% 135% at 50% 50%, #000 48%, rgba(0,0,0,.6) 72%, transparent 98%);
  mask-image:radial-gradient(135% 135% at 50% 50%, #000 48%, rgba(0,0,0,.6) 72%, transparent 98%); }
.map-landing .zoomspace__core{ position:absolute; left:50%; top:50%; width:max-content; max-width:86vw;
  transform:translate(-50%,-50%) translateZ(-60px); text-align:center; will-change:opacity,filter; }
.map-landing .zoomspace__title{ margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.06; letter-spacing:-.03em; color:var(--ink); }

/* ============================================================================
   AI VIDEO — Sui.io hero clone (design + behavior)
   Canvas glow sequence, noise overlay, gradient-blur stack, gradient headline,
   split-line subhead, per-letter CTA reveal. Scroll-scrub parallax, no pin.
   ========================================================================== */
.map-landing .aivideo{ position:relative; background:var(--black); }
.map-landing .aivideo__heroblock{ position:relative; min-height:clamp(640px,74vh,956px); overflow:hidden;
  background:linear-gradient(180deg,#020408 0%,#061428 16%,#0b2f6e 38%,#1a5fcc 58%,#6eaef0 78%,#c8ddf5 100%);
  isolation:isolate; }
.map-landing .aivideo__overlay{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:soft-light; }
.map-landing .aivideo__noise{ display:block; width:100%; height:100%; opacity:.15; }
.map-landing .aivideo__canvas-wrap{ position:absolute; inset:0; z-index:1; will-change:transform; }
.map-landing .aivideo__sequence{ display:block; width:100%; height:100%; }
.map-landing .aivideo__first{ position:relative; z-index:2; min-height:clamp(520px,55.2vh,711px);
  display:flex; align-items:center; justify-content:center; padding:clamp(72px,12vh,120px) var(--gutter) 0; }
.map-landing .aivideo__gradient-blur{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.map-landing .aivideo__gradient-blur > div{ position:absolute; inset:0; }
.map-landing .aivideo__gradient-blur > div:nth-child(1){ backdrop-filter:blur(2.8px); -webkit-backdrop-filter:blur(2.8px); }
.map-landing .aivideo__gradient-blur > div:nth-child(2){ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.map-landing .aivideo__text-layers{ position:relative; z-index:2; width:min(100%,1145px); text-align:center; }
.map-landing .aivideo__headline-wrap{ position:relative; display:inline-block; }
.map-landing .aivideo__heading{ margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.8rem,12.2vw,9.84rem); line-height:1.1; letter-spacing:-.03em;
  text-wrap:balance; will-change:transform,opacity,filter; }
.map-landing .aivideo__heading--sharp{
  background:radial-gradient(circle, #fff 0%, #fff 44%, #298dff 85%, rgba(41,141,255,.1) 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.map-landing .aivideo__heading--blur{ position:absolute; inset:0; color:rgba(255,255,255,.82);
  filter:blur(22px); transform:translateX(16px) scaleX(1.1);
  -webkit-mask-image:linear-gradient(90deg, transparent 6%, #000 36%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 6%, #000 36%, #000 100%); pointer-events:none; }
.map-landing .aivideo__subblock{ position:relative; z-index:4; margin-top:clamp(-118px,-12vh,-88px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.4vh,28px);
  padding:0 var(--gutter) clamp(48px,8vh,88px); text-align:center; }
.map-landing .aivideo__sub{ margin:0; max-width:46ch; font-family:var(--font-text); font-weight:400;
  font-size:clamp(.98rem,1.46vw,1.17rem); line-height:1.2; letter-spacing:normal;
  color:#fff; }
.map-landing .aivideo__split-mask{ display:block; overflow:hidden; }
.map-landing .aivideo__split-line{ display:block; will-change:transform; }
.map-landing .aivideo__cta{ display:grid; grid-template-columns:repeat(2,minmax(120px,auto)); gap:0;
  min-height:43px; align-items:center; justify-content:center; }
.map-landing .aivideo__btn{ display:inline-flex; align-items:center; justify-content:center; min-width:120px;
  min-height:43px; padding:0 22px; border-radius:6px; font-family:var(--font-text); font-weight:400;
  font-size:.78rem; letter-spacing:-.005em; text-decoration:none;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.map-landing .aivideo__btn-label{ position:relative; display:block; overflow:hidden; line-height:1.2; }
.map-landing .aivideo__char{ display:inline-block; will-change:transform; }
.map-landing .aivideo__btn--dark{ background:#000; color:#fff; border:1px solid rgba(255,255,255,.06); }
.map-landing .aivideo__btn--dark:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(0,0,0,.65); }
.map-landing .aivideo__btn--light{ background:#fff; color:#000; border:1px solid rgba(255,255,255,.92); }
.map-landing .aivideo__btn--light:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(255,255,255,.45); }
/* pre-entrance (GSAP takes over when available) */
.map-landing.js .aivideo__heroblock:not(.in) .aivideo__heading--sharp{ opacity:0; filter:blur(16px); transform:translateY(24px) scale(1.02); }
.map-landing.js .aivideo__heroblock:not(.in) .aivideo__heading--blur{ opacity:0; }
.map-landing.js .aivideo__heroblock:not(.in) .aivideo__split-line{ transform:translateY(110%); }
.map-landing.js .aivideo__heroblock:not(.in) .aivideo__char{ transform:translateY(110%); }
.map-landing.js .aivideo__heroblock:not(.in) .aivideo__cta{ opacity:0; }

/* ============================ dark body blocks ============================ */
.map-landing .aivideo__dark{ background:var(--black); color:#fff; position:relative; }
.map-landing .aivideo__label{ margin:0 0 16px; font-family:var(--font-text); font-weight:600; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.map-landing .aivideo__dh{ margin:0; font-family:var(--font-display); font-weight:400; color:#fff;
  text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,3.3rem); line-height:1.12; letter-spacing:.01em; }
.map-landing .aivideo__dh--row{ margin-bottom:clamp(28px,4vw,54px); }
.map-landing .aivideo__dp{ margin:0; font-family:var(--font-text); font-weight:400; letter-spacing:normal; color:rgba(255,255,255,.62);
  font-size:clamp(.92rem,1.05vw,1rem); line-height:1.6; }
/* outline pill + watch link (ref CTA pair) */
.map-landing .aivideo__obtn{ display:inline-block; padding:11px 24px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.32); color:#fff; font-family:var(--font-text); font-weight:600;
  font-size:.88rem; transition:background .3s,border-color .3s; }
.map-landing .aivideo__obtn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6); }
.map-landing .aivideo__watch{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.85);
  font-family:var(--font-text); font-weight:600; font-size:.88rem; text-decoration:none; }
.map-landing .aivideo__playdot{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.32);
  display:inline-grid; place-items:center; position:relative; }
.map-landing .aivideo__playdot::after{ content:""; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff; margin-left:2px; }

/* 2 · about grid */
.map-landing .aivideo__about{ padding:clamp(70px,9vw,130px) 0; }
.map-landing .aivideo__about-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(34px,6vw,90px); align-items:center; }
.map-landing .aivideo__about-img{ margin:0; border-radius:8px; overflow:hidden; }
.map-landing .aivideo__about-img img{ display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(130% 120% at 50% 45%, #000 58%, transparent 96%);
  mask-image:radial-gradient(130% 120% at 50% 45%, #000 58%, transparent 96%); }
.map-landing .aivideo__about-copy .aivideo__dh{ margin-bottom:20px; }
.map-landing .aivideo__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.map-landing .aivideo__tags span{ padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.7); font-family:var(--font-text); font-weight:500; font-size:.76rem; }
.map-landing .aivideo__about-copy .aivideo__dp{ max-width:46ch; margin-bottom:26px; }
.map-landing .aivideo__dctas{ display:flex; align-items:center; gap:24px; }

/* 3 · service cards */
.map-landing .aivideo__services{ padding:clamp(60px,8vw,110px) 0; }
.map-landing .aivideo__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.map-landing .aivideo__card{ background:#0E0F11; border:1px solid rgba(255,255,255,.07); border-radius:14px;
  padding:34px 28px; text-align:center; transition:transform .5s var(--ease), border-color .4s, background .4s; }
.map-landing .aivideo__card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.16); background:#121316; }
.map-landing .aivideo__cicon{ width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; }
.map-landing .aivideo__cicon svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.map-landing .aivideo__card h4{ margin:0 0 12px; font-family:var(--font-text); font-weight:600; letter-spacing:-.03em; font-size:1.02rem; color:#fff; }
.map-landing .aivideo__card p{ margin:0 0 18px; font-family:var(--font-text); font-weight:400; letter-spacing:normal; font-size:.88rem;
  line-height:1.55; color:rgba(255,255,255,.55); }
.map-landing .aivideo__card a{ color:rgba(255,255,255,.8); font-family:var(--font-text); font-weight:600;
  font-size:.82rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }

/* 4 · limitless row */
.map-landing .aivideo__limitless{ padding:clamp(60px,8vw,110px) 0; }
.map-landing .aivideo__lim-grid{ display:grid; grid-template-columns:auto 1.1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; }
.map-landing .aivideo__lim-tabs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.map-landing .aivideo__lim-tabs li{ font-family:var(--font-text); font-weight:500; font-size:.92rem;
  color:rgba(255,255,255,.38); cursor:default; }
.map-landing .aivideo__lim-tabs li.on{ color:#fff; }
.map-landing .aivideo__lim-img{ margin:0; border-radius:8px; overflow:hidden; }
.map-landing .aivideo__lim-img img{ display:block; width:100%; height:auto; }
.map-landing .aivideo__lim-article h4{ margin:0 0 14px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.25; color:#fff; letter-spacing:-.03em; }
.map-landing .aivideo__lim-article .aivideo__dp{ margin-bottom:22px; max-width:42ch; }
.map-landing .aivideo__lim-meta{ display:flex; justify-content:space-between; gap:18px; margin-top:26px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--font-text); font-weight:500; font-size:.78rem; color:rgba(255,255,255,.45); }

/* 5 · voices */
.map-landing .aivideo__voices{ padding:clamp(60px,8vw,110px) 0; }
.map-landing .aivideo__voices-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(34px,6vw,90px); align-items:start; }
.map-landing .aivideo__voices-head .aivideo__dp{ margin-top:18px; max-width:40ch; }
.map-landing .aivideo__quotes{ display:flex; flex-direction:column; gap:14px; }
.map-landing .aivideo__quote{ margin:0; background:#0E0F11; border:1px solid rgba(255,255,255,.07); border-radius:14px;
  padding:22px 24px; display:flex; flex-direction:column; gap:14px; }
.map-landing .aivideo__quote p{ margin:0; font-family:var(--font-text); font-weight:400; letter-spacing:normal; font-size:.95rem;
  line-height:1.5; color:rgba(255,255,255,.78); }
.map-landing .aivideo__quote footer{ display:flex; align-items:center; gap:12px; font-family:var(--font-text);
  font-weight:600; font-size:.85rem; color:#fff; }
.map-landing .aivideo__ava{ width:34px; height:34px; border-radius:50%; background:#1C1D21; color:rgba(255,255,255,.75);
  display:inline-grid; place-items:center; font-size:.7rem; font-weight:700; letter-spacing:.04em; }

/* 6 · dive banner */
.map-landing .aivideo__dive{ position:relative; min-height:clamp(380px,56vh,560px); display:grid; align-items:center;
  overflow:hidden; }
.map-landing .aivideo__dive-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
  filter:grayscale(1) contrast(1.05); }
.map-landing .aivideo__dive::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%); }
.map-landing .aivideo__dive-inner{ position:relative; z-index:1; display:flex; flex-direction:column; gap:22px;
  align-items:flex-start; padding-top:clamp(40px,8vh,80px); padding-bottom:clamp(40px,8vh,80px); }
.map-landing .aivideo__playbtn{ width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer; transition:background .3s, transform .3s; }
.map-landing .aivideo__playbtn:hover{ background:rgba(255,255,255,.18); transform:scale(1.06); }
.map-landing .aivideo__playbtn svg{ width:26px; height:26px; fill:#fff; }
.map-landing .aivideo__dive .aivideo__dp{ max-width:44ch; }

@media (max-width:900px){
  .map-landing .aivideo__heading{ font-size:clamp(2.2rem,12vw,4rem); }
  .map-landing .aivideo__heading--blur{ filter:blur(14px); transform:translateX(8px) scaleX(1.05); }
  .map-landing .aivideo__cta{ grid-template-columns:1fr; gap:10px; }
  .map-landing .aivideo__about-grid, .map-landing .aivideo__voices-grid{ grid-template-columns:1fr; }
  .map-landing .aivideo__cards{ grid-template-columns:1fr; }
  .map-landing .aivideo__lim-grid{ grid-template-columns:1fr; }
  .map-landing .aivideo__lim-tabs{ flex-direction:row; gap:16px; }
}
@media (prefers-reduced-motion:reduce){
  .map-landing.js .aivideo__heroblock .aivideo__heading--sharp, .map-landing.js .aivideo__heroblock .aivideo__heading--blur, .map-landing.js .aivideo__heroblock .aivideo__split-line, .map-landing.js .aivideo__heroblock .aivideo__char, .map-landing.js .aivideo__heroblock .aivideo__cta{ opacity:1; filter:none; transform:none; }
}

/* ============================================================================
   WEAVE — counter-scrolling editorial photo wall (Counterweave)
   Four columns of 3:2 listing photos; columns translate at different signed
   speeds while the section traverses the viewport (no pin), images parallax
   inside their rounded crops, the whole grid shears a degree on fast flicks.
   All transforms driven by setupWeave() in main.js (rAF, IO-gated).
   ========================================================================== */
.map-landing .weave{ background:var(--bg-light); padding:clamp(70px,10vw,140px) clamp(18px,3vw,44px); overflow:hidden; }

/* (Removed .map-seam-fade: the Sui hero below is now plain white with only the
   blurred headline, so there's no dark hero top edge to blend into.) */
/* headroom >= the columns' max upward excursion at section entry (travel/2),
   so rising frames never reach the headline; z-index as the safety net */
.map-landing .weave .section__head{ position:relative; z-index:2; margin-bottom:clamp(110px,16vh,190px); }
.map-landing .weave__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,26px);
  max-width:1560px; margin:0 auto; --shear:0deg; position:relative; z-index:1; }
.map-landing .weave__col{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,26px);
  will-change:transform; transform:skewY(var(--shear)); }
.map-landing .weave__col:nth-child(2){ padding-top:11vh; }
.map-landing .weave__col:nth-child(4){ padding-top:7vh; }
.map-landing .weave__frame{ margin:0; aspect-ratio:3/2; border-radius:20px; overflow:hidden; position:relative;
  background:#EEEFF2; }
.map-landing .weave__frame img{ display:block; position:absolute; top:-9%; left:0; width:100%; height:118%;
  object-fit:cover; will-change:transform; }  /* centred slack: ±9% headroom for parallax */
/* blur-materialize entry (site language), staggered per frame via inline delay.
   The TITLE materializes with the exact same recipe — it belongs to the wall. */
.map-landing.js .weave__frame, .map-landing.js .weave__title{ opacity:0; filter:blur(14px); transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1); }
.map-landing.js .weave__frame.in, .map-landing.js .weave__title.in{ opacity:1; filter:blur(0); transform:none; }
@media (prefers-reduced-motion:reduce){
  .map-landing.js .weave__title{ opacity:1; filter:none; transform:none; transition:none; }
}
@media (max-width:900px){
  .map-landing .weave__grid{ grid-template-columns:repeat(2,1fr); }
  .map-landing .weave__col:nth-child(3){ padding-top:9vh; }
}
/* mobile: shrink the oversized header gap so the photo wall sits closer */
@media (max-width:700px){
  .map-landing .weave .section__head{ margin-bottom:clamp(40px,9vh,70px); }
}
/* ------------------------------------------------------------------
   MOBILE (≤640px) — diagonal card-stack "deal" on scroll (technology
   style, redesigned per user). ~10 listing photos are stacked and fanned
   toward the bottom-right like a photo pile; a STICKY grid inside a tall
   section lets setupWeave()'s rAF (dealStack) map scroll progress to a
   sequential deal — the front card lifts UP + rotates AWAY, revealing the
   next, until all are dealt. DESKTOP/TABLET keep the 4-col counter-scroll
   wall untouched — this whole block is mobile-only. The absolute stack is
   `.js`-gated so a no-JS render stays a normal grid (progressive enh.).
   NOTE: base `.weave` is overflow:hidden (breaks position:sticky), so we
   override overflow:visible here. ------------------------------------- */
@media (max-width:640px){
  /* Mobile: the SAME vertical "pitch-deck fan" conveyor as desktop, but stacked
     single-column (title above, full-width fan stage below) since the desktop
     2-col beat is too wide for a phone. fanLayout() owns the transforms; cards
     cascade DOWN and melt into white fog at the stage top + bottom, auto-playing
     exactly like desktop. (Replaced the old scroll-coupled deal-stack.) */
  .map-landing .weave{ position:relative; overflow:hidden;
    padding:clamp(28px,7vw,48px) clamp(16px,4vw,22px) clamp(20px,5vw,32px); }
  .map-landing .weave .section__head{ margin-bottom:clamp(32px,9vw,56px); }
  .map-landing .weave__grid.weave--ready{ position:relative; display:block;
    height:min(60svh,540px); max-width:none; margin:0; gap:0; overflow:visible;
    /* clip cards at the top/bottom edges only (they slide under the fog then get
       cut here); -8vw sides leave the horizontal fan-out free, like desktop */
    -webkit-clip-path:inset(0 -8vw 0 -8vw); clip-path:inset(0 -8vw 0 -8vw); }
  .map-landing .weave--ready .weave__col{ display:contents; }
  .map-landing .weave--ready .weave__frame{ position:absolute; left:0; top:0; margin:0;
    width:min(76vw,320px); aspect-ratio:16/10; border-radius:18px;
    border:4px solid #fff; background:#fff;
    box-shadow:0 24px 60px -24px rgba(15,18,32,.35), 0 6px 18px rgba(15,18,32,.10);
    opacity:0; will-change:transform,opacity; backface-visibility:hidden;
    transition:none; filter:none; }   /* JS (fanLayout) owns transform/opacity/z */
  .map-landing .weave--ready .weave__frame img{ position:absolute; inset:0; top:0;
    width:100%; height:100%; object-fit:cover; border-radius:14px; }
  /* white "fog" melting the cards at the stage top + bottom (a mobile-simple
     gradient stand-in for the desktop .weave__fanmask blur bands) */
  .map-landing .weave__grid.weave--ready::before,
  .map-landing .weave__grid.weave--ready::after{ content:""; position:absolute;
    left:-8vw; right:-8vw; height:18%; z-index:1200; pointer-events:none; }
  .map-landing .weave__grid.weave--ready::before{ top:0;
    background:linear-gradient(to bottom, var(--bg-light) 14%, rgba(255,255,255,0)); }
  .map-landing .weave__grid.weave--ready::after{ bottom:0;
    background:linear-gradient(to top, var(--bg-light) 14%, rgba(255,255,255,0)); }
}
@media (prefers-reduced-motion:reduce){
  .map-landing.js .weave__frame{ opacity:1; filter:none; transform:none; transition:none; }
  .map-landing .weave__col{ transform:none; }
}

/* ------------------------------------------------------------------
   DESKTOP (>640px) — VERTICAL "pitch-deck fan" (reference: the user's
   text.mp4 = Noteform template, portrait beat). Two-column stage: the
   20 listing photos cascade DOWN a vertical arc on the LEFT (hidden hub
   off-screen left: the middle card protrudes right-most, cards above/
   below recede left + tilt radially), the section title sits centered
   on the RIGHT. Motion (measured off text.mp4): a STEPPED loop — glide
   ~1.8s (deep cubic in-out velocity bell), rest ~0.9s, one card per
   step, entering from the TOP and sliding UNDER the card below it.
   fanLayout() in main.js setupWeave() drives it. Gated on
   `.weave--ready` (the #weave wrapper never gets `.js`) and
   (min-width:641px) so the MOBILE deal-stack block above is untouched.
   The base 4-col grid remains the no-JS fallback. The top/bottom cuts
   dissolve under `.weave__fanmask` white blur bands (panstage recipe). */
@media (min-width:641px){
  /* two-column beat: fan column LEFT, title RIGHT, vertically centered.
     No vertical padding — the stage's top/bottom edges ARE the section
     edges (the reference cards are cut by the frame edge). */
  .map-landing .weave{ display:grid; grid-template-columns:46% 1fr; align-items:center;
    column-gap:clamp(20px,3vw,56px); padding-top:0; padding-bottom:0; }
  .map-landing .weave .container{ grid-column:2; grid-row:1; margin:0; max-width:none; }
  .map-landing .weave .section__head{ margin:0 auto; }
  .map-landing .weave__grid.weave--ready{ grid-column:1; grid-row:1; display:block;
    position:relative; height:max(560px, 100svh); max-width:none;
    margin:0; overflow:visible;   /* full viewport height: the melt edges sit AT the screen edges when the section is in view (the old 900px cap left a floating gap on tall monitors = cards looked "pushed up") */
    /* clip cards at the TOP/BOTTOM edges only (cards slide under the fog then
       get cut here — "chui vào sương rồi khuất", no fade); the -9999px sides
       leave the horizontal fan-out free */
    -webkit-clip-path:inset(0 -9999px 0 -9999px); clip-path:inset(0 -9999px 0 -9999px); }
  .map-landing .weave--ready .weave__col{ display:contents; }
  .map-landing .weave--ready .weave__frame{ position:absolute; left:0; top:0; margin:0;
    width:clamp(300px,26vw,460px); aspect-ratio:16/10; border-radius:18px;
    border:4px solid #fff; background:#fff;
    box-shadow:0 24px 60px -24px rgba(15,18,32,.35), 0 6px 18px rgba(15,18,32,.10);
    opacity:0; will-change:transform,opacity; backface-visibility:hidden;
    transition:none; filter:none; }   /* JS (fanLayout) owns transform/opacity/z */
  .map-landing .weave--ready .weave__frame img{ position:absolute; inset:0; top:0;
    width:100%; height:100%; object-fit:cover; transform:none; border-radius:14px; }
  /* progressive blur + white fade at the section's top/bottom edges (full
     width) — the EXACT panstage hand+iPhone recipe the user approved: the
     .rsblur/.rsfade layer rules are SHARED with .panstage__mask (see the
     panstage mask block), so both scenes dissolve identically. z:2 keeps it
     above the clipped grid (one stacking unit) but BELOW the fixed nav (z:100). */
  .map-landing .weave{ position:relative; }
  .map-landing .weave__fanmask{ position:absolute; left:0; right:0; bottom:0;
    height:13%; z-index:2; pointer-events:none; overflow:hidden; }   /* thin: cards stay solid almost to the edge and melt only in the last beat (22% ate them ~200px early = "pushed up") */
  .map-landing .weave__fanmask--top{ bottom:auto; top:0; transform:rotate(180deg); }
}
@media (max-width:640px){ .map-landing .weave__fanmask{ display:none; } }

/* Fallback (reduced motion / no GSAP): no pin, flat composed grid */
.map-landing .zoomspace--flat{ height:auto; padding:clamp(60px,8vw,110px) 24px; }
.map-landing .zoomspace--flat .zoomspace__pin{ position:static; height:auto; overflow:visible;
  background:linear-gradient(180deg,#FAFAFB 0%,#F2F3F5 48%,#E9EAEE 100%); }
.map-landing .zoomspace--flat .zoomspace__cam{ position:static; perspective:none; }
.map-landing .zoomspace--flat .zoomspace__world{ position:static; display:flex; flex-wrap:wrap;
  gap:18px; justify-content:center; align-items:center; }
.map-landing .zoomspace--flat .zoomcard{ position:static; }
.map-landing .zoomspace--flat .zoomcard img{ width:min(38vw,260px); }
.map-landing .zoomspace--flat .zoomspace__core{ position:static; transform:none; width:100%; flex-basis:100%;
  order:-1; margin-bottom:26px; }

/* ============================================================================
   WE ARE map. — cinematic statement
   Scroll-scrubbed gradient REVEAL -> ZOOM -> FLIP TO WHITE.
   Both eyebrow + logo sample one shared gradient that runs colour
   (blue -> cyan -> slate) into a faint near-navy gray. setupWeAre() drives
   --reveal (0..1) from the pinned scroll: 0 = faint gray, 1 = fully coloured,
   sliding the gradient position so the colour fills in left -> right.
   ========================================================================== */
.map-landing .weare{position:relative;height:100vh;height:100svh;overflow:hidden;
  background:var(--black);display:grid;place-items:center;   /* pure #000000 resting state — matches .section--proof */
  /* colour (blue->cyan->slate) running into a faint low-opacity WHITE so the
     resting state reads as ~rgba(255,255,255,.10) on pure black */
  --helix:linear-gradient(100deg,
    #1E3A8A 0%, #7DD3FC 24%, #64748B 46%, rgba(255,255,255,.10) 56%, rgba(255,255,255,.10) 100%);}

.map-landing .weare__group{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.6vw,30px);padding:0 24px;transform:translateZ(0);}  /* single cheap compositor layer; will-change removed (the scrub animation that needed it no longer runs, so leaving it permanently just wasted GPU + caused a raster hitch) */

/* White only (per user): the blue->cyan --helix reveal gradient is removed; both
   WE ARE and the map. logo are a solid white fill (the scrub still scales/exits). */
.map-landing .weare__eyebrow, .map-landing .weare__logo{--reveal:1;
  background-image:none;background-color:#ffffff;}

.map-landing .weare__eyebrow{display:none;   /* "We are" hidden per user; element kept in DOM so setupWeAre()'s guard passes and the pin/zoom/white transition still runs */
  margin:0;font-family:var(--font-text);
  font-weight:600;   /* match .logoband__eyebrow "Trusted by": same font + color */
  text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(.82rem,1.7vw,1.25rem);
  background:none;color:#8a8a8e;}

.map-landing .weare__logo{width:clamp(248px,52vw,720px);aspect-ratio:793 / 308;
  -webkit-mask:url("/map/logos/map-logo.png") center / contain no-repeat;
          mask:url("/map/logos/map-logo.png") center / contain no-repeat;}
  /* drop-shadow glow removed: a 34px-blur shadow on this ~720px masked logo was
     rasterized as the section scrolled in, dropping one frame (the scroll hitch);
     the reveal it grew with no longer runs, so the glow was a static, costly no-op */

/* white wash lands on the Founder section's off-white (#F3F6F7) for a seamless
   hand-off — not pure #fff, so there is no flash-then-shift between sections. */
/* white wash for PHASE 3 — fades in only after the text has fully exited, on an
   empty black stage. Lands on pure #FFFFFF for a seamless hand-off to Founder. */
.map-landing .weare__flash{position:absolute;inset:0;z-index:5;background:#FFFFFF;opacity:0;pointer-events:none;}

@media (max-width:600px){
  .map-landing .weare__logo{width:min(78vw,420px);}
  .map-landing .weare__eyebrow{letter-spacing:-.03em;}
}

/* Reduced motion: setupWeAre() skips pin/scrub/zoom; show the statement FULLY
   COLOURED on black (no reveal), then a normal scroll into the white section. */
@media (prefers-reduced-motion:reduce){
  .map-landing .weare__eyebrow, .map-landing .weare__logo{--reveal:1;}
  .map-landing .weare__flash{display:none;}
}

/* While the black WE ARE section is pinned under the nav, force the nav fully
   transparent with light marks (setupWeAre toggles .nav--dark) so there is no
   white bar over the black field. Placed after the .nav.scrolled rules so it
   wins on equal specificity. */
.map-landing .nav.nav--dark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;}
.map-landing .nav.nav--dark::before{opacity:0;}
.map-landing .nav.nav--dark .nav__logo{filter:invert(1);}
.map-landing .nav.nav--dark .nav__links a{color:rgba(255,255,255,.82);}
.map-landing .nav.nav--dark .nav__links a:hover{color:#fff;}
.map-landing .nav.nav--dark .nav__toggle span{background:#fff;}

/* ============================================================================
   FOUNDER — pure white. Long note on the left, STICKY warm portrait on the
   right with a "Marcus Aurelius" (Great Vibes) signature centered beneath it.
   The reveal fires the instant the section enters, overlapping the WE ARE white
   flip so there is no empty white gap.
   ========================================================================== */
/* Pure white. Snug top padding so the title sits near the section top and enters
   right as the WE ARE flip finishes (no long blank white band). */
.map-landing .founder{background:#FFFFFF;color:#111111;padding:clamp(36px,5vh,72px) 0 clamp(80px,12vh,150px);overflow:visible;}
.map-landing .founder__inner{width:min(1140px,92vw);margin:0 auto;
  display:grid;grid-template-columns:1fr clamp(380px,40vw,520px);gap:clamp(44px,6vw,88px);
  align-items:stretch;}  /* media column stretches to copy height so the photo can stay sticky across it */

.map-landing .founder__copy{max-width:28rem;}  /* narrower so the long note is taller than the photo -> real sticky travel */
.map-landing .founder__title{margin:0 0 clamp(26px,3.2vw,40px);
  font-family:var(--font-display);
  font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--ink);
  font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);}
.map-landing .founder__body{margin:0 0 1.15em;
  font-family:var(--font-text);
  font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.55;}
.map-landing .founder__body:last-child{margin-bottom:0;}

/* sticky portrait column */
.map-landing .founder__media{position:relative;}
.map-landing .founder__sticky{position:sticky;top:clamp(88px,12vh,118px);
  display:flex;flex-direction:column;align-items:center;}
.map-landing .founder__frame{position:relative;margin:0;width:100%;max-width:480px;border-radius:24px;overflow:hidden;
  box-shadow:0 28px 60px -34px rgba(17,17,17,.30);transform:translateX(clamp(0px,6vw,100px));}  /* nudged toward the right edge per user */
.map-landing .founder__photo{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;
  will-change:transform,clip-path;}

@media (max-width:860px){
  .map-landing .founder__inner{grid-template-columns:1fr;gap:clamp(34px,7vw,48px);}
  .map-landing .founder__copy{max-width:none;order:1;}
  .map-landing .founder__media{order:2;width:100%;max-width:400px;margin:0 auto;}
  .map-landing .founder__sticky{position:static;top:auto;}
  .map-landing .founder__frame{transform:none;}  /* no right-shift on stacked mobile */
}

/* ============================================================================
   PROBLEM — clean white pain section (bevel style): centered header + 3 soft
   pale-blue cards, each with a bottom-anchored phone mockup.
   ========================================================================== */
.map-landing .problem{background:#FFFFFF;color:#1D1D1F;padding:clamp(72px,11vh,140px) 0 clamp(78px,11vh,140px);}
.map-landing .problem__inner{width:min(1200px,92vw);margin:0 auto;}

.map-landing .problem__head{max-width:820px;margin:0 auto clamp(40px,6vw,72px);text-align:center;}
.map-landing .problem__title{font-family:var(--font-display);font-weight:600;color:#1D1D1F;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);margin:0;text-wrap:balance;}
/* matched to .stories__badge-text ("Your personal brand, crafted like this") per user */
.map-landing .problem__sub{font-family:var(--font-display);font-weight:400;color:var(--body-ink);line-height:1.18;letter-spacing:normal;
  font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);margin:clamp(18px,2.4vw,26px) auto 0;max-width:60ch;}

.map-landing .problem__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,30px);align-items:stretch;}
.map-landing .paincard{background:#E9EEF6;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(30px,2.6vw,42px) clamp(26px,2vw,36px) 0;min-height:clamp(440px,44vw,560px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
/* bevel.health Strain/Sleep/Recovery palette: shared pale-blue top, a distinct soft
   pastel blooming from the bottom behind the phone (peach / lavender / mint). */
/* Card bg tuned to match each phone photo's palette: 1=lavender/violet (purple watch),
   2=silver/white (chrome pebble), 3=neutral charcoal-grey (dark tech flatlay). */
.map-landing .problem__cards .paincard:nth-child(1){background:linear-gradient(180deg,#ece7fb 0%,#d8cff4 50%,#c2b6f0 100%);}
.map-landing .problem__cards .paincard:nth-child(2){background:linear-gradient(180deg,#f5f7fa 0%,#e8edf2 50%,#d8dfe7 100%);}
.map-landing .problem__cards .paincard:nth-child(3){background:linear-gradient(180deg,#edeef1 0%,#dee0e4 50%,#caccd1 100%);}
.map-landing .paincard__title{font-family:var(--font-display);font-weight:600;color:#1D1D1F;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.297rem, 0.8rem + 1.325vw, 2rem);margin:0 0 12px;}
.map-landing .paincard__desc{font-family:var(--font-display);font-weight:400;color:var(--body-ink);line-height:1.18;letter-spacing:normal;
  font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);margin:0;max-width:36ch;}
.map-landing .paincard__media{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;
  padding-top:clamp(26px,3vw,40px);}
.map-landing .paincard__img{display:block;width:min(92%,400px);height:auto;}  /* bottom-anchored; bleeds to card edge */
/* pain card iPhone mockup: transparent PNG frame on top + photo behind, clipped to
   the measured screen hole (491x1024: 2.34% top/bottom, 4.28% sides, 11.6%/6.6%
   corner) so the photo never pokes past the bezel. Bottom-anchored, bleeds off the
   card bottom like the placeholder. */
.map-landing .paincard__phone{position:relative;width:min(92%,400px);aspect-ratio:491 / 683;overflow:hidden;}  /* clip window: shows the top ~2/3 of the phone, bottom bleeds off the card like the placeholder */
.map-landing .paincard__phone-inner{position:relative;width:100%;}  /* the FULL phone (taller than the window); top-aligned so the bottom third is clipped */
.map-landing .paincard__frame{position:relative;z-index:2;display:block;width:100%;height:auto;}
.map-landing .paincard__screen{position:absolute;z-index:1;top:2.34%;left:4.28%;right:4.28%;bottom:2.34%;overflow:hidden;border-radius:11.6% / 6.6%;background:#000;}
.map-landing .paincard__screen img{display:block;width:100%;height:100%;object-fit:cover;}
/* hover lift — selector specificity beats the reveal .is-in transform:none */
@media (hover:hover){
  .map-landing .problem__cards .paincard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(31,45,61,.3);}
}
@media (max-width:860px){
  .map-landing .problem__cards{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .map-landing .paincard{min-height:0;}
  /* restore title vs description hierarchy on mobile (desktop type is too flat
     when scaled down) */
  .map-landing .paincard__desc{font-size:clamp(1rem, 3.4vw, 1.125rem);}
  .map-landing .problem__sub{font-size:clamp(1.05rem, 3.6vw, 1.2rem);max-width:34ch;}
}
@media (prefers-reduced-motion:reduce){
  .map-landing .paincard{transition:none;}
}

/* ============================================================================
   COST — Paylo-style glass dashboard floating over a villa scene (day / night)
   ========================================================================== */
.map-landing .costsec{position:relative;color:#1D1D1F;
  padding:clamp(64px,9vh,120px) 0 clamp(72px,11vh,140px);background:var(--paper);}
.map-landing .costsec__head{position:relative;z-index:1;width:min(1180px,92vw);margin:0 auto clamp(30px,4.5vw,52px);text-align:center;}
.map-landing .costsec__title{font-family:var(--font-display);font-weight:600;color:#1D1D1F;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);margin:0;}
.map-landing .costsec__sub{font-family:var(--font-text);font-weight:400;color:var(--body-ink);line-height:1.5;letter-spacing:normal;
  font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);margin:16px auto 0;}

/* villa "stage": a smaller, rounded, contained photo box that the glass
   dashboard floats on (NOT a full-bleed section background). */
.map-landing .dash-stage{position:relative;width:min(1120px,92vw);margin:0 auto;
  border-radius:clamp(20px,2.4vw,32px);overflow:hidden;padding:clamp(18px,2.6vw,40px);
  background-image:var(--scene-bg);background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#0a0f18;box-shadow:0 40px 90px -44px rgba(0,0,0,.45);}

/* dashboard container (fills the stage) */
.map-landing .dash{position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);
  font-size:clamp(13px,1.05vw,15.5px);color:#fff;}
.map-landing .dash__bar{display:flex;align-items:center;justify-content:space-between;padding:0 2px;}
.map-landing .dash__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  font-size:1.4em;letter-spacing:-.02em;text-shadow:0 1px 16px rgba(0,0,0,.55);}
.map-landing .dash__mark{width:1.7em;height:1.7em;border-radius:50%;background:#0A84FF;color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.78em;}
.map-landing .dash__chip{font-family:var(--font-text);font-weight:600;font-size:.95em;color:#fff;
  padding:.55em 1.1em;border-radius:999px;text-shadow:0 1px 6px rgba(0,0,0,.5);}

.map-landing .dash__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(12px,1.2vw,18px);align-items:stretch;}
.map-landing .dash__main{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);}

/* glass panel: .liquid-glass = blur + edge + inset; __body = dark scrim (legible
   white data) + padding. Keeps the villa visible through the glass. */
.map-landing .dpanel{position:relative;border-radius:18px;}
.map-landing .dpanel__body{position:relative;height:100%;border-radius:inherit;display:flex;flex-direction:column;
  padding:clamp(14px,1.3vw,20px);background:rgba(8,11,16,.3);}  /* lighter so the villa shows through the glass */
.map-landing .dpanel .accent{color:#0A84FF;}

/* hero */
.map-landing .dhero .dpanel__body{background:linear-gradient(135deg,rgba(10,132,255,.26),rgba(8,11,16,.5) 62%);}
.map-landing .dhero__title{font-family:var(--font-display);font-weight:500;font-size:1.55em;letter-spacing:-.02em;margin:0;}
.map-landing .dhero__title b{font-weight:700;}
.map-landing .dhero__sub{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.74);margin:.5em 0 1.1em;}
.map-landing .dprog{height:.72em;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.map-landing .dprog__fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#0A84FF,#7cc0ff);transition:width 1.5s var(--ease);}
.map-landing .dprog__meta{display:flex;justify-content:space-between;align-items:center;margin-top:.7em;font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.82);}
.map-landing .dprog__meta .accent{color:#fff;font-weight:700;}
.map-landing .dprog__note{color:rgba(255,255,255,.55);}

/* stats */
.map-landing .dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,16px);}
.map-landing .dstat .dpanel__body{gap:.4em;}
.map-landing .dstat__label{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.7);font-size:.95em;}
.map-landing .dstat__num{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.85em;line-height:1;font-variant-numeric:tabular-nums;}
.map-landing .dstat__num.accent{color:#0A84FF;}
.map-landing .dstat__hint{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.5);font-size:.86em;}
.map-landing .dspark{width:100%;height:2em;margin-top:auto;}
.map-landing .dbars{display:flex;align-items:flex-end;gap:3px;height:2em;margin-top:auto;}
.map-landing .dbars i{flex:1;height:var(--h);background:linear-gradient(180deg,#0A84FF,#0a3a66);border-radius:2px;}

/* table */
.map-landing .dtable__title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.1em;margin-bottom:.6em;}
.map-landing .dtable__title span{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.5);font-size:.78em;}
.map-landing .dtbl{width:100%;border-collapse:collapse;font-family:var(--font-text);}
.map-landing .dtbl th{text-align:left;font-weight:600;color:rgba(255,255,255,.5);font-size:.82em;padding:0 0 .55em;border-bottom:1px solid rgba(255,255,255,.12);}
.map-landing .dtbl td{padding:.52em 0;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-weight:500;}
.map-landing .dtbl td small{color:rgba(255,255,255,.45);}
.map-landing .dtbl .r{text-align:right;font-family:var(--font-display);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;}
.map-landing .dtbl tbody tr{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.map-landing .dtbl tbody tr.row-in{opacity:1;transform:none;}
.map-landing .dtable__total{margin-top:auto;padding-top:.8em;display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid rgba(255,255,255,.18);}
.map-landing .dtable__total span{font-family:var(--font-text);font-weight:600;color:rgba(255,255,255,.8);}
.map-landing .dtable__total b{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:1.85em;color:#0A84FF;font-variant-numeric:tabular-nums;}

/* where it goes */
.map-landing .dwhere__title{font-family:var(--font-display);font-weight:600;font-size:1.15em;margin:0 0 1em;}
.map-landing .wbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9em;}
.map-landing .wbars li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25em .6em;}
.map-landing .wbar__name{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.78);font-size:.95em;}
.map-landing .wbar__amt{font-family:var(--font-display);font-weight:600;font-size:.95em;color:#fff;font-variant-numeric:tabular-nums;}
.map-landing .wbar__track{grid-column:1 / -1;height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;}
.map-landing .wbar__fill{display:block;height:100%;width:var(--w);transform:scaleX(0);transform-origin:left;border-radius:4px;background:linear-gradient(90deg,#0A84FF,#7cc0ff);transition:transform .9s var(--ease);}
.map-landing .dwhere.is-drawn .wbar__fill{transform:scaleX(1);}
.map-landing .dwhere__cap{font-family:var(--font-text);font-weight:500;color:rgba(255,255,255,.6);font-size:.86em;line-height:1.45;margin:auto 0 0;padding-top:1em;}

/* ============================================================================
   COST DASHBOARD — BENTO MINIMAL (redesign per the user): one calm white area of
   soft-gray rounded tiles — no borders, no photo, no glass — big numbers, ONE
   soft blue accent (#0A84FF) on the total + mini-bars. Replaces the old dark
   photo/glass dashboard. */
.map-landing .costsec .dash-stage{background:transparent;box-shadow:none;padding:0;overflow:visible;}
.map-landing .costsec .dash{color:#1d1d1f;gap:clamp(12px,1.2vw,16px);}
.map-landing .cost-title{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08;color:#1d1d1f;font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);margin:0 0 clamp(18px,2vw,28px);}
.map-landing .bento{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,16px);}
.map-landing .bento__cats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.2vw,16px);}
.map-landing .bento__cell{background:#f6f6f7;border-radius:clamp(16px,1.6vw,22px);padding:clamp(18px,1.9vw,30px);}
/* hero tile */
.map-landing .bento__cell--hero{display:flex;flex-direction:column;gap:.4em;}
.map-landing .bento__label{font-family:var(--font-text);font-weight:500;color:rgba(31,32,37,.55);font-size:1.05em;}
.map-landing .bento__total{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(2.6rem,5.4vw,4.2rem);font-variant-numeric:tabular-nums;}
.map-landing .bento__total.accent{color:#1d1d1f;} /* white+black only (per user): was blue */
.map-landing .bento__meta{font-family:var(--font-text);font-weight:500;color:rgba(31,32,37,.5);font-size:.95em;}
/* category tiles */
.map-landing .bento__cell--cat{display:flex;flex-direction:column;gap:.5em;min-height:7em;}
.map-landing .bento__cat{font-family:var(--font-text);font-weight:600;color:rgba(31,32,37,.7);font-size:.92em;}
.map-landing .bento__amt{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:#1d1d1f;font-size:1.55em;line-height:1;font-variant-numeric:tabular-nums;}
.map-landing .bento__bar{display:block;height:5px;border-radius:999px;background:rgba(0,0,0,.1);overflow:hidden;margin-top:auto;}
.map-landing .bento__bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:#1d1d1f;}
/* itemized list tile */
.map-landing .bento__cell--list{display:flex;flex-direction:column;}
.map-landing .bento__listhead{font-family:var(--font-display);font-weight:600;font-size:1.1em;color:#1d1d1f;margin-bottom:.3em;}
.map-landing .bento__items{list-style:none;margin:0;padding:0;}
.map-landing .bento__items li{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding:.6em 0;border-bottom:1px solid rgba(0,0,0,.06);font-family:var(--font-text);}
.map-landing .bento__item-name{font-weight:500;color:rgba(31,32,37,.92);}
.map-landing .bento__item-name small{color:rgba(31,32,37,.42);font-weight:500;margin-left:.55em;}
.map-landing .bento__items li b{font-family:var(--font-display);font-weight:600;color:#1d1d1f;font-variant-numeric:tabular-nums;}
.map-landing .bento__total-row{display:flex;align-items:baseline;justify-content:space-between;padding-top:.85em;}
.map-landing .bento__total-row span{font-family:var(--font-text);font-weight:600;color:rgba(31,32,37,.7);}
.map-landing .bento__total-row b{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.6em;color:#1d1d1f;font-variant-numeric:tabular-nums;}
@media (max-width:860px){.map-landing .bento__cats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.map-landing .bento__cats{grid-template-columns:1fr;}}

/* dashboard glass panels stay static on hover (no lift / glow / sweep).
   Primary CTAs keep their normal button hover. */

/* theme: scene background image var (day now; night = scaffold) */
.map-landing{--scene-bg:url("/map/images/villa-day.png");}
.map-landing[data-theme="day"]{--scene-bg:url("/map/images/villa-day.png");}
.map-landing[data-theme="night"]{--scene-bg:url("/map/images/villa-night.png");}

/* day / night toggle (fixed corner) */
.map-landing .theme-toggle{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:1200;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#0a2540;
  background:rgba(255,255,255,.6);transition:transform .3s var(--ease);}
.map-landing[data-theme="night"] .theme-toggle{color:#eaf2ff;background:rgba(20,26,40,.55);}
.map-landing .theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.map-landing .theme-toggle__moon{fill:currentColor;stroke:none;display:none;}
.map-landing[data-theme="night"] .theme-toggle__sun{display:none;}
.map-landing[data-theme="night"] .theme-toggle__moon{display:block;}
.map-landing .theme-toggle:hover{transform:translateY(-2px);}

@media (max-width:860px){
  .map-landing .dash__grid{grid-template-columns:1fr;}
  .map-landing .dstats{grid-template-columns:repeat(3,1fr);}
  .map-landing .dtbl td:nth-child(2), .map-landing .dtbl th:nth-child(2){display:none;}
}
@media (max-width:520px){
  .map-landing .dstats{grid-template-columns:1fr;}
  .map-landing .dtbl td:nth-child(3), .map-landing .dtbl th:nth-child(3){display:none;}
}
@media (prefers-reduced-motion:reduce){
  .map-landing .dprog__fill, .map-landing .wbar__fill, .map-landing .dtbl tbody tr, .map-landing .theme-toggle{transition:none;}
}

/* ============================================================================
   PAN STAGE — pinned, scrub-scrubbed horizontal camera pan from the bridge
   question into the phone scene. One wide stage; vertical scroll pans the
   camera left->right (the question slides out left, the phone scene arrives at
   the right and the transparent hand+phone slides UP into place). A thin
   bottom-only frosted band (on the stage, not the camera) quietly softens the
   seam without panning, and NEVER climbs onto the phone. All pure #FFFFFF.
   ========================================================================== */
.map-landing .panstage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#FFFFFF;}
/* the camera = the panning layer (GSAP translateX). Holds both panels. */
.map-landing .panstage__camera{position:absolute;inset:0;z-index:1;will-change:transform;}

/* LEFT panel — the bridge question, centred, global display heading. */
.map-landing .pan-text{position:absolute;inset:0;display:grid;place-items:center;padding:0 6vw;will-change:transform,opacity;}
.map-landing .pan-text__line{font-family:var(--font-display);font-weight:600;color:var(--ink);letter-spacing:-.03em;
  line-height:1.06;text-align:center;text-wrap:balance;max-width:18ch;margin:0;
  font-size:clamp(2rem,5.2vw,4.4rem);}

/* RIGHT panel — the phone scene. Offset off-screen right on desktop (JS), then
   panned to centre. Holds the ghosted wordmark + the transparent clip. */
.map-landing .pan-phone{position:absolute;inset:0;z-index:1;will-change:transform;}
/* BACK — large, ghosted "map." wordmark, centred (slightly high so the phone
   reads as emerging in front of it). Same mask asset as WE ARE for one wordmark. */
.map-landing .reveal-scene__map{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  z-index:1;width:clamp(280px,62vw,920px);aspect-ratio:793 / 308;opacity:.07;
  background:var(--ink);
  -webkit-mask:url("/map/logos/map-logo.png") center / contain no-repeat;
          mask:url("/map/logos/map-logo.png") center / contain no-repeat;}
/* VIDEO — transparent hand + phone. The wrapper slides UP (GSAP yPercent); it
   holds the centring translateX so the rise composes cleanly. */
.map-landing .reveal-scene__phone{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  z-index:2;width:min(96vw,1120px);will-change:transform,opacity;}
.map-landing .reveal-scene__video{display:block;width:100%;height:auto;background:transparent;
  /* iOS fix: the transparent HEVC-alpha .mov was composited on a hardware video
     OVERLAY that renders the alpha matte as GREY around the hand (only on a real
     iPhone in Safari/Chrome, not desktop emulation; a screenshot captures the
     corrected frame so it "looks fine" when captured). A fully-opaque mask forces
     the video off the overlay into the normal masked-compositing path, so the
     alpha shows the white page instead of grey. No visual change where it already
     worked. translateZ(0) keeps it on its own crisp layer. */
  -webkit-mask-image: -webkit-linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);}

/* THIN BOTTOM SEAM BAND — moderate, low, bottom-only. 4 light backdrop-blur
   layers + a small white floor. Lives on the stage (sibling of the camera), so
   it stays pinned to the bottom edge and does NOT pan. Its top feathers to
   nothing well below the phone, so the phone/hand/"map." stay crisp. The band
   is deliberately NOT a backdrop root (no isolation/opacity/filter) so the
   layers can sample the camera content painted behind them. */
.map-landing .panstage__mask{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:3;
  pointer-events:none;overflow:hidden;}
/* shared blur layer. Mask "to top" (0% = band bottom, 100% = band top): solid
   up to --to, holds ~.85 through the middle, transparent by --from. --from >
   --to always => terminates transparent at the top edge (no hard line). */
.map-landing .panstage__mask .rsblur, .map-landing .weave__fanmask .rsblur{position:absolute;inset:0;display:block;pointer-events:none;
  -webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b));
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 var(--to),
    rgba(0,0,0,.85) calc((var(--from) + var(--to)) / 2),rgba(0,0,0,0) var(--from));
          mask-image:linear-gradient(to top,#000 0%,#000 var(--to),
    rgba(0,0,0,.85) calc((var(--from) + var(--to)) / 2),rgba(0,0,0,0) var(--from));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;}
/* weakest (2px) layer: feather to transparent at BOTH ends so the lightest blur
   eases in at the very top too — guarantees zero onset edge below the phone. */
.map-landing .panstage__mask .rsblur:nth-of-type(1), .map-landing .weave__fanmask .rsblur:nth-of-type(1){
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0%,#000 16%,#000 var(--to),
    rgba(0,0,0,.85) calc((var(--from) + var(--to)) / 2),rgba(0,0,0,0) var(--from));
          mask-image:linear-gradient(to top,rgba(0,0,0,0) 0%,#000 16%,#000 var(--to),
    rgba(0,0,0,.85) calc((var(--from) + var(--to)) / 2),rgba(0,0,0,0) var(--from));}
/* small two-part WHITE floor (front-most, pure paint). Thin: reaches #FFFFFF
   only at the very bottom and fades to nothing by the band top. */
.map-landing .panstage__mask .rsfade, .map-landing .weave__fanmask .rsfade{position:absolute;inset:0;pointer-events:none;}
.map-landing .panstage__mask .rsfade--wash, .map-landing .weave__fanmask .rsfade--wash{background:linear-gradient(to top,
  rgba(255,255,255,.16) 0%,rgba(255,255,255,.09) 42%,rgba(255,255,255,.03) 72%,rgba(255,255,255,0) 100%);}
.map-landing .panstage__mask .rsfade--solid, .map-landing .weave__fanmask .rsfade--solid{background:linear-gradient(to top,
  #FFFFFF 0%,#FFFFFF 16%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.46) 66%,
  rgba(255,255,255,.16) 86%,rgba(255,255,255,0) 100%);}

@media (max-width:860px){
  .map-landing .pan-phone .reveal-scene__phone{width:112vw;}
  .map-landing .reveal-scene__map{width:86vw;opacity:.06;}
  .map-landing .panstage__mask{height:20%;}
  /* Phone stays at the section BOTTOM (base bottom:0) so the white fade band
     (.panstage__mask, anchored bottom:0) dissolves the hand/phone bottom into the
     background EXACTLY like desktop — a previous phone-lift (bottom:7vw) + a
     padding-bottom pushed the phone ABOVE the mask, leaving a visible non-white
     "cut". The gap to the next section is a MARGIN (outside the section) so it
     never shifts the mask off the phone. */
  .map-landing .panstage--static{padding:clamp(40px,9vw,72px) 0 0; margin-bottom:clamp(48px,12vw,96px);}
  .map-landing .panstage--static .pan-text{min-height:auto;}
  .map-landing .panstage--static .pan-phone{min-height:calc(122vw / 1.768 + 40px);}
}

/* No-pan fallback — applied by JS (.panstage--static) when GSAP is missing, and
   mirrored under prefers-reduced-motion: the stage flows normally, the question
   stacks above a STATIC phone scene (first frame), thin band intact, no pin. */
.map-landing .panstage--static{height:auto;overflow:visible;}
.map-landing .panstage--static .panstage__camera{position:static;}
.map-landing .panstage--static .pan-text{position:static;min-height:clamp(180px,18vh,220px);transform:none;opacity:1;}
/* size the phone box to the CLIP (sized in vw: min(96vw,1120px), aspect 1.77 =>
   height min(54.2vw,633px)) + a constant top gap, so the gap to the question is
   stable across viewport heights (a single vh value let the bottom-pinned clip
   overflow up into the question on wide/short screens). max(46vh,…) floors it for
   very tall viewports and the 122vw mobile clip. */
.map-landing .panstage--static .pan-phone{position:relative;min-height:max(46vh,calc(min(54.2vw,633px) + 96px));transform:none;}
.map-landing .panstage--static .reveal-scene__phone{opacity:1;transform:translateX(-50%);}
@media (prefers-reduced-motion:reduce){
  .map-landing .panstage{height:auto;overflow:visible;}
  .map-landing .panstage__camera{position:static;}
  .map-landing .pan-text{position:static;min-height:clamp(180px,18vh,220px);transform:none;opacity:1;}
  .map-landing .pan-phone{position:relative;min-height:max(46vh,calc(min(54.2vw,633px) + 96px));transform:none;}
  .map-landing .reveal-scene__phone{opacity:1;transform:translateX(-50%);}
}

/* ============================================================================
   SERVICES — folder + memoji hero (transparent clip on pure white)
   ========================================================================== */
/* SCROLL-SCRUBBED, NOT PINNED. The page scrolls normally; the clip's
   currentTime is scrubbed by the section's natural position in the viewport
   (top bottom -> bottom top), so the animation plays along as the section
   scrolls up. The heading sits in the container; the video is near full-bleed. */
.map-landing .servicesfolder{background:#FFFFFF;}
.map-landing .servicesfolder .section__head{margin-bottom:clamp(26px,4vw,56px);}
.map-landing .servicesfolder__sub{max-width:46ch;}
.map-landing .servicesfolder__title{text-wrap:initial;} /* explicit <br> break — don't re-balance */
/* ForgeUI-style word reveal: setupTextReveal() splits [data-textreveal] copy
   into .tr-word spans and sets a per-word inline transition-delay (0.2s
   stagger); .tr-in on the element starts the staggered blur/fade-up. */
.map-landing.js [data-textreveal] .tr-word{
  display:inline-block;opacity:0;filter:blur(8px);transform:translateY(0.32em);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,filter,transform;
}
.map-landing.js [data-textreveal].tr-in .tr-word{opacity:1;filter:blur(0);transform:none;}
@media (prefers-reduced-motion:reduce){
  .map-landing.js [data-textreveal] .tr-word{opacity:1;filter:none;transform:none;transition:none;}
}
/* BIG: ~full section width (cap 1500px), centred. aspect-ratio reserves space
   => no layout shift while the clip preloads. */
.map-landing .servicesfolder__stage{position:relative;width:min(96vw, 1500px);margin:0 auto;
  aspect-ratio:1200 / 906;will-change:opacity;}
.map-landing .servicesfolder__video{display:block;width:100%;height:100%;object-fit:contain;
  background:transparent;transform:translateZ(0);}  /* alpha clip — no box, just the folder */
@media (max-width:700px){
  .map-landing .servicesfolder__stage{width:96vw;}
}

/* ============================================================================
   SERVICES
   ========================================================================== */
.map-landing .services{display:flex;flex-direction:column;}
.map-landing .service{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,5vw,80px);
  padding:clamp(40px,5vw,60px) 0;border-top:1px solid var(--hairline);}
.map-landing .service:first-child{border-top:none;padding-top:0;}
.map-landing .service__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:24px;
  background:var(--accent-soft);color:var(--accent);}
.map-landing .service__icon .icon{width:28px;height:28px;}
.map-landing .service__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.297rem, 0.8rem + 1.325vw, 2rem);
  letter-spacing:-.03em;line-height:1.05;margin-bottom:12px;}
.map-landing .service__tag{font-family:var(--font-text);font-weight:400;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);letter-spacing:normal;line-height:1.4;max-width:24ch;}
.map-landing .service__detail{align-self:center;}
.map-landing .ticks{display:flex;flex-direction:column;gap:14px;}
.map-landing .ticks li{position:relative;padding-left:32px;font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.5;}
.map-landing .ticks li::before{content:"";position:absolute;left:0;top:.16em;width:20px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:18px;}
.map-landing .delivery{margin-top:24px;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:500;font-size:.96rem;color:var(--navy);background:var(--tint);
  padding:10px 18px;border-radius:var(--r-pill);}
.map-landing .delivery__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}

/* ============================================================================
   COMPARISON
   ========================================================================== */
.map-landing .compare{max-width:1000px;margin:0 auto;border:1px solid var(--hairline);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);}
.map-landing .compare__head, .map-landing .compare__row{display:grid;grid-template-columns:1.15fr 1fr 1fr;}
.map-landing .compare__cell{padding:18px clamp(16px,2.4vw,28px);display:flex;align-items:center;font-size:1.02rem;}
.map-landing .compare__cell--rowlabel{color:var(--ink-3);font-size:.95rem;}
.map-landing .compare__head .compare__cell{padding-top:24px;padding-bottom:24px;border-bottom:1px solid var(--hairline);}
.map-landing .compare__col--map{background:var(--navy);color:#fff;font-weight:500;}
.map-landing .compare__col--trad{color:var(--ink-2);}
.map-landing .compare__head .compare__col--map{justify-content:flex-start;}
.map-landing .compare__brand{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;}
.map-landing .compare__brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.3);}
.map-landing .compare__head .compare__col--trad{font-family:var(--font-display);font-weight:500;color:var(--ink-2);font-size:1.05rem;}
.map-landing .compare__row{border-bottom:1px solid var(--hairline-2);transition:background .25s;}
.map-landing .compare__row:last-child{border-bottom:none;}
.map-landing .compare__row:hover{background:rgba(10,37,64,.02);}
.map-landing .compare__row:hover .compare__col--map{background:#0d2c4c;}

/* ============================================================================
   PRICING
   ========================================================================== */
/* Pricing reskinned to bevel.health's card system: soft pastel section, white cards with
   24px radius + soft even shadow (no harsh border) + airy padding; featured card a subtle
   blue-tint lift. Brand blue accent kept (bevel's teal would clash with the rest of the site). */
.map-landing .section--pricing{background:#fff;}
.map-landing .plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.28fr);gap:16px;align-items:start;}
.map-landing .plan{background:#fff;border:1px solid rgba(16,24,40,.05);border-radius:var(--r-lg);padding:clamp(34px,3.2vw,50px);position:relative;box-shadow:var(--shadow-card);}
.map-landing .plan--featured{border:1.5px solid var(--accent);box-shadow:var(--shadow-lift);background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);}
.map-landing .plan__flag{position:absolute;top:-13px;left:clamp(30px,3vw,44px);background:var(--accent);color:#fff;
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);}
.map-landing .plan__head{padding-bottom:28px;border-bottom:1px solid var(--hairline-2);margin-bottom:28px;}
.map-landing .plan__name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.297rem, 0.8rem + 1.325vw, 2rem);letter-spacing:-.03em;line-height:1.05;display:flex;align-items:center;gap:12px;}
.map-landing .plan__chip{font-family:var(--font-text);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:var(--r-pill);}
.map-landing .plan__price{margin:18px 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.map-landing .plan__was{flex-basis:100%;font-family:var(--font-display);font-size:1.4rem;color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px;line-height:1;margin-bottom:2px;}
.map-landing .plan__amount{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;font-size:clamp(2.6rem,4.6vw,3.4rem);color:var(--ink-strong);}
.map-landing .plan__per{color:var(--ink-3);font-size:1rem;}
.map-landing .plan__pitch{font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);margin:12px 0 24px;line-height:1.5;}
.map-landing .plan__cta{width:100%;justify-content:center;}
.map-landing .plan__group{margin-top:26px;}
.map-landing .plan__group-title{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
.map-landing .plan__feats{gap:13px;}
.map-landing .plan__feats li{font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1rem, 0.88rem + 0.5vw, 1.1875rem);line-height:1.5;}
.map-landing .plan__sub{margin:18px 0 14px;font-weight:600;color:var(--ink);font-size:1rem;}
.map-landing .plan__note{margin-top:14px;font-size:.86rem;color:var(--ink-3);font-style:italic;padding-left:4px;}
.map-landing .plan__excluded{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline-2);}
.map-landing .plan__excluded-label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.map-landing .plan__excluded-list{font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);}
.map-landing .plan__guarantee{margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline-2);text-align:center;
  color:var(--ink-2);font-size:.92rem;letter-spacing:.005em;}

/* ============================================================================
   BONUS — dark, navy-rich
   ========================================================================== */
/* Light Apple restyle 2026-06-10 (was dark navy): white like the Pricing
   section above; cards = Apple's quiet #F5F5F7 tiles, no borders, soft lift. */
.map-landing .section--bonus{background:var(--bg-light);color:var(--ink);}
.map-landing .bonus{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;}
.map-landing .bcard{background:#F5F5F7;border:none;border-radius:var(--r-lg);
  padding:30px 26px 28px;transition:transform .6s var(--ease),background .4s,box-shadow .5s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.03);}
.map-landing .bcard:hover{transform:translateY(-5px);background:#FFFFFF;
  box-shadow:0 22px 48px -24px rgba(17,20,30,.16),0 2px 8px rgba(0,0,0,.04);}
.map-landing .bcard--hero{grid-row:span 1;background:linear-gradient(165deg,#EAF3FF 0%,#F6FAFF 100%);}
.map-landing .bcard--hero:hover{background:linear-gradient(165deg,#E4F0FF 0%,#FFFFFF 100%);}
.map-landing .bcard__value{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--accent);
  margin-bottom:18px;padding:5px 12px;border-radius:var(--r-pill);background:rgba(0,113,227,.08);letter-spacing:-.01em;}
.map-landing .bcard__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.297rem, 0.8rem + 1.325vw, 2rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:10px;color:var(--ink);}
.map-landing .bcard__body{font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.5;}

/* ============================================================================
   PREMIUM SERVICE
   ========================================================================== */
.map-landing .premium__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:start;}
.map-landing .premium__head{position:sticky;top:clamp(90px,16vh,160px);margin-bottom:0;}
.map-landing .premium__list{display:flex;flex-direction:column;}
.map-landing .premium__item{display:flex;gap:20px;padding:26px 0;border-top:1px solid var(--hairline);}
.map-landing .premium__item:first-child{border-top:none;padding-top:0;}
.map-landing .premium__tick{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);position:relative;}
.map-landing .premium__tick .icon{width:20px;height:20px;stroke-width:2.2;}
.map-landing .premium__item h3{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-.03em;margin-bottom:4px;}
.map-landing .premium__item p{font-weight:400;letter-spacing:normal;color:var(--ink-2);font-size:1rem;}

/* --- tick motion (Apple-style): the circle springs in, a soft ring ripples
   out once, then the checkmark DRAWS itself stroke-by-stroke. Staggered per
   row via --d; everything triggers off the row's .is-in reveal. --- */
.map-landing .premium__item:nth-child(1){--d:.05s;}
.map-landing .premium__item:nth-child(2){--d:.17s;}
.map-landing .premium__item:nth-child(3){--d:.29s;}
.map-landing .premium__item:nth-child(4){--d:.41s;}
.map-landing .premium__item:nth-child(5){--d:.53s;}
.map-landing .premium__tick .icon path{stroke-dasharray:21;stroke-dashoffset:21;}
.map-landing .premium__item.is-in .premium__tick{animation:tick-pop .55s cubic-bezier(.34,1.45,.45,1) var(--d,0s) both;}
.map-landing .premium__item.is-in .premium__tick::after{content:"";position:absolute;inset:0;border-radius:inherit;
  animation:tick-ring .8s ease-out calc(var(--d,0s) + .12s) both;}
.map-landing .premium__item.is-in .premium__tick .icon path{animation:tick-draw .45s cubic-bezier(.6,0,.3,1) calc(var(--d,0s) + .24s) forwards;}
@keyframes tick-pop{0%{transform:scale(.3);opacity:0;}62%{transform:scale(1.09);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes tick-ring{0%{box-shadow:0 0 0 0 rgba(0,113,227,.28);}100%{box-shadow:0 0 0 18px rgba(0,113,227,0);}}
@keyframes tick-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){
  .map-landing .premium__tick .icon path{stroke-dasharray:none;stroke-dashoffset:0;}
  .map-landing .premium__item.is-in .premium__tick, .map-landing .premium__item.is-in .premium__tick::after, .map-landing .premium__item.is-in .premium__tick .icon path{animation:none;}
}

/* --- PREMIUM STAGE: floating titanium card + orbiting perk chips --- */
.map-landing .premium__stage{position:relative;max-width:1100px;margin:clamp(16px,3vw,40px) auto 0;
  height:clamp(520px,46vw,640px);}

/* the card: brushed titanium, soft top highlight, slow levitation + a
   specular sheen sweeping across every few seconds */
.map-landing .pcard{position:absolute;left:50%;top:50%;width:clamp(300px,34vw,430px);aspect-ratio:1.586;
  margin:0;transform:translate(-50%,-50%);border-radius:24px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(135deg,#3A3D44 0%,#191A1E 46%,#2E3138 72%,#1A1B1F 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.4),
    0 40px 80px -28px rgba(10,12,18,.5), 0 10px 26px -12px rgba(10,12,18,.32);
  animation:pcard-float 7s ease-in-out infinite alternate;will-change:transform;}
.map-landing .pcard__sheen{position:absolute;inset:-2%;pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.13) 46%,
    rgba(255,255,255,.04) 54%, transparent 68%);
  transform:translateX(-130%);animation:pcard-sheen 6s ease-in-out infinite;}
.map-landing .pcard__logo{position:absolute;left:30px;top:28px;width:clamp(64px,6vw,84px);height:auto;
  filter:invert(1) brightness(1.15);opacity:.95;}
.map-landing .pcard__label{position:absolute;left:30px;bottom:26px;margin:0;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:rgba(255,255,255,.92);}
@keyframes pcard-float{
  from{transform:translate(-50%,-50%) translateY(-8px) rotate(-.4deg);}
  to{transform:translate(-50%,-50%) translateY(10px) rotate(.5deg);}}
@keyframes pcard-sheen{0%,52%{transform:translateX(-130%);}88%,100%{transform:translateX(130%);}}

/* perk chips: small white cards drifting gently around the card */
.map-landing .premium__orbit{list-style:none;margin:0;padding:0;}
.map-landing .premium__chip{position:absolute;width:clamp(200px,22vw,250px);
  border-top:none;padding:14px 16px;gap:12px;border-radius:16px;background:#fff;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 18px 44px -22px rgba(17,20,30,.22), 0 2px 8px rgba(0,0,0,.04);}
.map-landing .premium__chip h3{font-size:.98rem;margin-bottom:2px;}
.map-landing .premium__chip p{font-size:.84rem;line-height:1.4;}
.map-landing .premium__chip .premium__tick{width:32px;height:32px;}
.map-landing .premium__chip .premium__tick .icon{width:16px;height:16px;}
.map-landing .premium__chip:nth-child(1){left:4%;top:4%;}
.map-landing .premium__chip:nth-child(2){right:5%;top:9%;}
.map-landing .premium__chip:nth-child(3){left:1%;top:60%;}
.map-landing .premium__chip:nth-child(4){right:2%;top:64%;}
.map-landing .premium__chip:nth-child(5){left:50%;top:88%;transform:translateX(-50%);}
/* gentle drift, each chip on its own rhythm (starts once revealed) */
.map-landing .premium__chip.is-in:nth-child(1){animation:chip-float-a 5.6s ease-in-out infinite alternate;}
.map-landing .premium__chip.is-in:nth-child(2){animation:chip-float-b 6.8s ease-in-out infinite alternate;}
.map-landing .premium__chip.is-in:nth-child(3){animation:chip-float-b 6.1s ease-in-out .6s infinite alternate-reverse;}
.map-landing .premium__chip.is-in:nth-child(4){animation:chip-float-a 7.2s ease-in-out .3s infinite alternate;}
.map-landing .premium__chip.is-in:nth-child(5){animation:chip-float-c 6.4s ease-in-out infinite alternate;}
@keyframes chip-float-a{from{transform:translateY(-7px) rotate(-.6deg);}to{transform:translateY(9px) rotate(.4deg);}}
@keyframes chip-float-b{from{transform:translateY(8px) rotate(.5deg);}to{transform:translateY(-9px) rotate(-.5deg);}}
@keyframes chip-float-c{from{transform:translateX(-50%) translateY(-6px);}to{transform:translateX(-50%) translateY(8px);}}

/* small screens: card on top, chips stack below as a simple list */
@media (max-width:860px){
  .map-landing .premium__stage{height:auto;}
  .map-landing .pcard{position:relative;left:auto;top:auto;transform:none;margin:0 auto 28px;animation:none;}
  .map-landing .premium__orbit{display:flex;flex-direction:column;gap:12px;}
  .map-landing .premium__chip{position:static;width:100%;}
  .map-landing .premium__chip.is-in{animation:none;}
  .map-landing .premium__chip:nth-child(5){transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .map-landing .pcard, .map-landing .pcard__sheen, .map-landing .premium__chip.is-in{animation:none!important;}
}

/* ============================================================================
   FAQ
   ========================================================================== */
.map-landing .faq__grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:start;}
.map-landing .faq__head{position:sticky;top:clamp(90px,16vh,160px);margin-bottom:0;}
.map-landing .faq{display:flex;flex-direction:column;}
.map-landing .faq__item{border-top:1px solid var(--hairline);}
.map-landing .faq__item:last-child{border-bottom:1px solid var(--hairline);}
.map-landing .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:-.015em;color:var(--ink);}
.map-landing .faq__plus{position:relative;flex:none;width:22px;height:22px;}
.map-landing .faq__plus::before, .map-landing .faq__plus::after{content:"";position:absolute;background:var(--ink-2);border-radius:2px;transition:transform .4s var(--ease),background .25s;}
.map-landing .faq__plus::before{top:50%;left:0;width:100%;height:1.8px;transform:translateY(-50%);}
.map-landing .faq__plus::after{left:50%;top:0;width:1.8px;height:100%;transform:translateX(-50%);}
.map-landing .faq__q[aria-expanded="true"] .faq__plus::after{transform:translateX(-50%) scaleY(0);}
.map-landing .faq__q[aria-expanded="true"] .faq__plus::before{background:var(--accent);}
.map-landing .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.map-landing .faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr;}
.map-landing .faq__a-inner{overflow:hidden;}
.map-landing .faq__a-inner p{font-weight:400;letter-spacing:normal;color:var(--ink-2);font-size:1.06rem;line-height:1.6;max-width:60ch;padding-bottom:28px;}
.map-landing.no-js .faq__a{grid-template-rows:1fr;}

/* ============================================================================
   SCARCITY — dark
   ========================================================================== */
.map-landing .section--scarcity{background:var(--ink-bg);color:var(--on-dark);}
.map-landing .scarcity{max-width:var(--maxw-narrow);margin:0 auto;text-align:center;}
.map-landing .scarcity__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:clamp(40px,5vw,60px) 0;text-align:left;}
.map-landing .scarcity__list li{background:rgba(255,255,255,.05);border:1px solid var(--hairline-dark-2);border-radius:var(--r-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -30px rgba(0,0,0,.6);}
.map-landing .scarcity__big{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(2.4rem,4vw,3.2rem);color:#5aa6ff;line-height:1;}
.map-landing .scarcity__big small{font-size:.5em;color:var(--on-dark-2);font-weight:500;}
.map-landing .scarcity__txt{font-weight:400;letter-spacing:normal;color:var(--on-dark-2);font-size:1rem;line-height:1.45;}

/* ============================================================================
   FINAL CTA
   ========================================================================== */
.map-landing .section--final{background:linear-gradient(180deg,#0a0a0b 0%,#06182d 100%);color:var(--on-dark);text-align:center;}
.map-landing .section--final .display-1{color:var(--on-dark);}
.map-landing .choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:clamp(50px,6vw,76px) auto;text-align:left;}
.map-landing .choice{--body-ink:rgba(255,255,255,.6);border-radius:var(--r-xl);padding:clamp(30px,3.4vw,44px);border:1px solid var(--hairline-dark-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 52px -30px rgba(0,0,0,.6);}
.map-landing .choice--old{background:rgba(255,255,255,.03);}
.map-landing .choice--new{background:linear-gradient(165deg,rgba(0,113,227,.20),rgba(255,255,255,.03));border-color:rgba(90,166,255,.32);}
.map-landing .choice__title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.594rem, 1.6rem + 2.65vw, 4rem);letter-spacing:-.03em;margin-bottom:14px;color:var(--on-dark);}
.map-landing .choice--old .choice__title{color:var(--on-dark-2);}
.map-landing .choice__body{font-weight:400;letter-spacing:normal;color:var(--body-ink);font-size:clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);line-height:1.55;}
.map-landing .final__cta{display:flex;flex-direction:column;align-items:center;gap:30px;}
.map-landing .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.map-landing .chips li{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-2);font-size:.92rem;
  padding:9px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--hairline-dark-2);}
.map-landing .chips .icon{width:16px;height:16px;color:#5aa6ff;}

/* ============================================================================
   FOOTER
   ========================================================================== */
.map-landing .footer{background:var(--ink-bg-2);color:var(--on-dark);padding:clamp(70px,9vh,120px) 0 60px;}
.map-landing .footer__inner{display:grid;gap:24px;}
.map-landing .footer__logo{height:30px;width:auto;display:block;filter:invert(1);}
.map-landing .footer__tag{color:var(--on-dark-2);font-size:1.05rem;margin-top:6px;}
.map-landing .footer__promise{font-family:var(--font-display);font-weight:500;color:var(--on-dark);font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em;max-width:30ch;line-height:1.3;}
.map-landing .footer__contact{display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--on-dark-2);font-size:.98rem;margin-top:8px;}
.map-landing .footer__contact a{color:var(--on-dark-2);text-decoration:none;transition:color .2s;}
.map-landing .footer__contact a:hover{color:var(--on-dark);}
.map-landing .footer__copy{color:var(--on-dark-3);font-size:.8rem;letter-spacing:.04em;margin-top:24px;padding-top:28px;border-top:1px solid var(--hairline-dark-2);}

/* ---------- Buttons ---------- */
.map-landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-text);font-weight:500;
  font-size:1rem;line-height:1;padding:14px 26px;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:transform .5s var(--ease),background .25s,color .25s,box-shadow .5s var(--ease);
  -webkit-tap-highlight-color:transparent;min-height:46px;}
.map-landing .btn .icon{width:18px;height:18px;transition:transform .5s var(--ease);}
.map-landing .btn--primary{background:var(--accent);color:#fff;}
.map-landing .btn--primary:hover{background:var(--accent-press);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,113,227,.65);}
.map-landing .btn--primary:hover .icon{transform:translateX(4px);}
.map-landing .btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline);}
.map-landing .btn--ghost:hover{background:rgba(0,0,0,.04);transform:translateY(-2px);}
.map-landing .btn--xl{font-size:1.1rem;padding:20px 42px;min-height:60px;}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .map-landing .pain__grid{grid-template-columns:1fr;gap:48px;}
  .map-landing .pain__head{position:static;}
  .map-landing .premium__grid, .map-landing .faq__grid{grid-template-columns:1fr;gap:40px;}
  .map-landing .premium__head, .map-landing .faq__head{position:static;}
  .map-landing .bonus{grid-template-columns:repeat(2,1fr);}
  .map-landing .plans{grid-template-columns:1fr;max-width:620px;margin:0 auto;}
  /* stacked ascending: Starter -> Growth -> Branding (natural DOM order) */
}
@media (max-width:860px){
  .map-landing .nav__links, .map-landing .nav__cta{display:none;}
  .map-landing .nav__toggle{display:flex;}
  .map-landing .nav.menu-open{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--hairline-2);}
  .map-landing .nav__menu{display:flex;flex-direction:column;gap:4px;padding:8px var(--gutter) 22px;}
  .map-landing .nav__menu[hidden]{display:none;}
  .map-landing .nav__menu a{padding:14px 4px;font-size:1.05rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-2);}
  .map-landing .nav__menu .btn{margin-top:14px;border:none;}
  .map-landing .bento{grid-template-columns:repeat(2,1fr);gap:12px;}
  .map-landing .stat, .map-landing .stat--feature{grid-column:span 1;min-height:170px;padding:26px 24px;}
  .map-landing .cards-3{grid-template-columns:1fr;}
  .map-landing .service{grid-template-columns:1fr;gap:24px;}
  .map-landing .service__detail{align-self:start;}
  .map-landing .scarcity__list{grid-template-columns:1fr;}
  .map-landing .choices{grid-template-columns:1fr;}
  .map-landing .compare__head{display:none;}
  .map-landing .compare__row{grid-template-columns:1fr;gap:0;padding:6px 0 18px;border-bottom:8px solid var(--hairline-2);}
  .map-landing .compare__cell{padding:8px clamp(18px,5vw,24px);}
  .map-landing .compare__cell--rowlabel{padding-top:18px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);}
  .map-landing .compare__col--map, .map-landing .compare__col--trad{background:transparent;color:var(--ink);align-items:flex-start;gap:10px;}
  .map-landing .compare__col--map{color:var(--ink);font-weight:500;}
  .map-landing .compare__col--map::before{content:"MAP";flex:none;min-width:96px;color:var(--accent);font-weight:600;font-size:.82rem;}
  .map-landing .compare__col--trad::before{content:"Traditional";flex:none;min-width:96px;color:var(--ink-3);font-size:.82rem;}
}
@media (max-width:560px){
  .map-landing{font-size:16px;}
  .map-landing .section{padding:clamp(64px,11vh,90px) 0;}
  .map-landing .bento{grid-template-columns:1fr;}
  .map-landing .bonus{grid-template-columns:1fr;}
  .map-landing .stat__num{font-size:3rem;}
  .map-landing .hero__title{font-size:clamp(2.4rem,10vw,3.6rem);}
  .map-landing .footer__contact{flex-direction:column;gap:2px;}
  .map-landing .footer__contact a{display:inline-block;padding:8px 0;}
  /* PRICING — reclaim card width on narrow phones */
  .map-landing .plan{padding:24px 20px;}
  /* FOUNDER — lower the oversized desktop type on narrow phones */
  .map-landing .founder__body{font-size:clamp(1rem, 4.4vw, 1.15rem);line-height:1.5;}
  .map-landing .founder__title{font-size:clamp(1.9rem, 8vw, 2.4rem);}
}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .map-landing *, .map-landing *::before, .map-landing *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .map-landing.js [data-reveal]{opacity:1!important;transform:none!important;}
  .map-landing.js .hero__title .word>span{transform:none!important;}
  .map-landing.js .hero__sub, .map-landing.js .scroll-cue{opacity:1!important;transform:none!important;}
  .map-landing .transition__line .w{color:#f5f5f7!important;}
  .map-landing .orb__core, .map-landing .orb__glow, .map-landing .orb__ring{animation:none!important;}
  .map-landing .scroll-cue .icon{animation:none!important;}
}