/* ============================================================================
   Q.M.P — V4 design system (identity restoration: NAVY + GOLD, dark)
   ONE identity: deep navy foundation, luxury gold, the living gold Circuit Q
   logo. This is the owner's approved V3 identity (navy #0a192f family, Space
   Grotesk display + Inter body) carrying the V4 feature layer — floating pill
   nav, mega panel, accounts, theme worlds — on top. Transform/opacity motion
   only; honors prefers-reduced-motion.
   ============================================================================ */

:root{
  color-scheme:dark;
  --gold:#d4af37;
  --gold-hi:#ffe9a8;
  --gold-text:#e6c65c;          /* text-grade gold (reads on navy) */
  --gold-deep:#e6c65c;          /* links / icons / marks on the dark base */
  --gold-soft:rgba(212,175,55,.08);   /* translucent gold wash / band */
  --gold-line:rgba(212,175,55,.38);   /* gold-tinted hairline */
  --paper:#0a192f;              /* page base — deep navy */
  --paper-2:#12233f;            /* raised surface (legacy var) */
  --ink:#e9edf5;                /* primary text — soft white */
  --ink-soft:#9fb0c9;           /* secondary text — muted blue-grey */
  --line:rgba(233,237,245,.13);
  --surface:#0e1a30;
  --surface-2:#12233f;
  --shadow:0 14px 40px rgba(2,6,16,.5);
  --shadow-lg:0 30px 70px rgba(2,6,16,.6);
  --radius:18px;
  /* Legacy vars still referenced by the search / FAQ-chat widget styles
     that ship in each page's tail — they resolve to the DARK palette. */
  --navy:#0a192f;
  --navy-2:#12233f;
  --navy-deep:#060d1a;
  --card-text:#e9edf5;
  --card-sub:#9fb0c9;
  --font-disp:'Space Grotesk','Playfair Display',Georgia,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box;}
/* The hidden attribute is state, not a suggestion. Author display rules
   (e.g. .abar-btn's inline-flex) must never resurrect a hidden element —
   left unguarded, that is exactly what once rendered the signed-in and
   signed-out auth controls side by side in the bar. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(212,175,55,.07), rgba(212,175,55,0) 60%),
    linear-gradient(180deg, #0a192f 0%, #081426 100%);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--gold-deep);}
h1,h2,h3{font-family:var(--font-disp); line-height:1.16; color:var(--ink); font-weight:700; letter-spacing:.012em;}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px;}
.gold{color:var(--gold-deep);}
::selection{background:var(--gold-hi); color:#23180a;}
input::placeholder, textarea::placeholder{color:#67799a; opacity:1;}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:15px 32px; border-radius:999px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:1.03rem; text-decoration:none;
  border:1.5px solid rgba(255,233,168,.9); cursor:pointer; position:relative;
  box-shadow:0 0 0 1px rgba(212,175,55,.28), 0 8px 24px rgba(0,0,0,.5),
    0 0 18px -6px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:20px; height:20px; stroke:currentColor; flex:0 0 auto;}
.btn-gold{
  color:#1a1202; border-color:#ffe9a8;
  background:linear-gradient(165deg, #f2da8a 0%, var(--gold) 52%, #b28c27 100%);
}
.btn-gold:hover{
  background:linear-gradient(165deg, #f7e29b 0%, #e3c458 52%, #bd982f 100%);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 14px 30px rgba(0,0,0,.55),
    0 0 30px -4px rgba(212,175,55,.8), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-outline, .btn-navy{
  background:linear-gradient(165deg, rgba(20,34,66,.72), rgba(7,13,30,.78));
  color:#fff; border-color:rgba(212,175,55,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-outline:hover, .btn-navy:hover{
  background:linear-gradient(165deg, rgba(30,50,95,.82), rgba(10,19,42,.88));
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 14px 30px rgba(0,0,0,.55),
    0 0 30px -4px var(--w-glow, rgba(212,175,55,.6)), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.day-badge{
  display:inline-block; background:linear-gradient(165deg, rgba(20,34,66,.72), rgba(7,13,30,.78));
  color:var(--gold); font-weight:700; letter-spacing:.03em;
  border:1.5px solid rgba(212,175,55,.8); border-radius:999px; padding:7px 18px; font-size:.95rem;
  box-shadow:0 0 18px -6px var(--w-glow, rgba(212,175,55,.6)), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ===================== LAYER MAP — LOGO NON-OVERLAP CONTRACT =====================
   Back → front: .world-bg -3 (V3 living world backdrop: drift · scene ·
   grade) · body::before -2 (star dust) · body::after -1 (world glow) ·
   page content 0 · hero portal layers 0-4 · portal content 5 · sticky
   Apple bar 120 · mega panels 130 · mobile menu overlay 150 · lightbox 200.
   The logo only ever sits in normal-flow boxes with reserved space —
   bar brand (flex row, flex:none), hero emblem (own block in the portal
   stack, fixed gap to the headline), auth card (centered block), footer
   (own grid cell), overlay brand row. Nothing is positioned over it:
   the spark travels INSIDE .world-bg behind all content, and the
   floating pills hide while a logo zone is on screen. */

/* ===================== V3 WORLD PALETTES (per-page <html> class) ===================== */
html.world-mars         { --navy:#33150a; --navy-2:#57230f; --navy-deep:#1f0d06; --w-glow:#ff9a56; --w-img:url("space/mars.jpg");
  --paper:#150905; --paper-2:#221006; --line:#57331a; }
html.world-nebula       { --navy:#1c0f3d; --navy-2:#2e1a5e; --navy-deep:#120826; --w-glow:#a58bff; --w-img:url("space/nebula.jpg");
  --paper:#0b0618; --paper-2:#160c2c; --line:#37256b; }
html.world-station      { --navy:#0d2440; --navy-2:#173d66; --navy-deep:#081627; --w-glow:#6fc3ff; --w-img:url("space/station.jpg");
  --paper:#040d19; --paper-2:#081a30; --line:#274a75; }
html.world-aurora       { --navy:#07301f; --navy-2:#0c4a30; --navy-deep:#04190f; --w-glow:#3fe0a8; --w-img:url("space/aurora.jpg");
  --paper:#02100a; --paper-2:#052117; --line:#14513c; }
html.world-asteroids    { --navy:#2b1e0c; --navy-2:#4a3413; --navy-deep:#1a1206; --w-glow:#ffb84d; --w-img:url("space/asteroids.jpg");
  --paper:#100a03; --paper-2:#1d1206; --line:#4f3a16; }
html.world-solar        { --navy:#3d0d12; --navy-2:#61161c; --navy-deep:#26060a; --w-glow:#ff7847; --w-img:url("space/solar.jpg");
  --paper:#150405; --paper-2:#24070b; --line:#5e2126; }
html.world-constellation{ --navy:#131f4d; --navy-2:#21337a; --navy-deep:#0a1030; --w-glow:#8fb0ff; --w-img:url("space/constellation.jpg");
  --paper:#050922; --paper-2:#0a1334; --line:#2b3f85; }
html.world-earth        { --navy:#0a2e3a; --navy-2:#11495c; --navy-deep:#06222b; --w-glow:#39d0c4; --w-img:url("space/earth.jpg");
  --paper:#031318; --paper-2:#06222c; --line:#175263; }
html.world-earthrise    { --navy:#2a1e24; --navy-2:#45303a; --navy-deep:#191016; --w-glow:#ffc98a; --w-img:url("space/earthrise.jpg");
  --paper:#110a0e; --paper-2:#1e1219; --line:#52393f; }
html.world-deepfield    { --navy:#0c1730; --navy-2:#16264d; --navy-deep:#05070f; --w-glow:#7f9cc9; --w-img:url("space/deepfield.jpg");
  --paper:#03050c; --paper-2:#070e1e; --line:#22355c; }
html.world-dock         { --navy:#0c2b2e; --navy-2:#17464c; --navy-deep:#071a1c; --w-glow:#4fd8c8; --w-img:url("space/dock.jpg");
  --paper:#031112; --paper-2:#061e20; --line:#1b4b50; }
html.world-hq           { --navy:#12283f; --navy-2:#1f4066; --navy-deep:#0b1727; --w-glow:#ffd98a; --w-img:url("space/hq.jpg");
  --paper:#050e18; --paper-2:#0a1a2e; --line:#2a4a6b; }
html.world-satellite    { --navy:#1a1440; --navy-2:#2c2169; --navy-deep:#0d0a24; --w-glow:#59e0ff; --w-img:url("space/satellite.jpg");
  --paper:#07051a; --paper-2:#0f0a2f; --line:#372b75; }
html.world-legal { --navy:#0d1f42; --navy-2:#12294f; --navy-deep:#050b1a; --w-glow:#8fb0ff; --w-img:none;
  --paper:#070d1f; --paper-2:#0b1526; --ink:#e8edf7; --ink-soft:#aebadd; --line:#26355c;
  --shadow:0 14px 34px rgba(0,0,0,.55); }
html[class*="world-"]{ --ink:#edf1fa; --ink-soft:#a9b6cf; --shadow:0 14px 34px rgba(0,0,0,.5); }
html.world-legal{ --ink:#e8edf7; --ink-soft:#aebadd; }

/* ===================== OVERFLOW SAFETY NET =====================
   clip (not hidden): clips stray wide elements without creating a
   scroll container, so the sticky Apple bar keeps sticking. */
html, body{ overflow-x:clip; }

/* ===================== AMBIENT SKY: star dust + drifting world glow ===================== */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 160px, rgba(212,175,55,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 70px 190px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(55% 38% at 82% 0%, rgba(212,175,55,.06), transparent 70%);
  background-size:340px 240px, 340px 240px, 340px 240px, 340px 240px, 340px 240px, 100% 100%;
  animation:qmpStarPulse 5.4s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:-6%; z-index:-1; pointer-events:none; opacity:.13; will-change:transform;
  background:
    radial-gradient(52% 38% at 80% 6%, var(--w-glow, rgba(212,175,55,.5)), transparent 70%),
    radial-gradient(44% 34% at 10% 94%, var(--w-glow, rgba(212,175,55,.5)), transparent 70%);
  animation:qmpDrift 19s ease-in-out infinite alternate;
}
@keyframes qmpDrift{ from{ transform:translate3d(-1.5%, -1%, 0) scale(1); } to{ transform:translate3d(1.5%, 1.5%, 0) scale(1.05); } }
@keyframes qmpStarPulse{ from{ opacity:.72; } to{ opacity:1; } }

/* ===================== V3 LIVING WORLD BACKDROP (JS injects .world-bg) =====================
   The page's world scene as a fixed full-page landscape behind
   EVERYTHING — hero, services, packages, gallery, trust, booking.
   Only this backdrop is themed / moves in 3D (drift + --depth travel).
   V4 extras ride inside it, behind all content: the gold spark host
   and the ambient dust particles. */
.world-bg{
  position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:var(--navy-deep);
}
.wb-drift{
  position:absolute; inset:-4%; will-change:transform;
  animation:qmpDrift 26s ease-in-out infinite alternate;
}
.wb-scene{
  position:absolute; inset:-7%;
  background-image:var(--w-img);
  background-size:cover; background-position:center 42%;
  filter:saturate(1.32) contrast(1.07) brightness(.96);
  transform:translate3d(0, calc(var(--depth, 0) * -38px), 0) scale(1.13);
  will-change:transform;
}
.world-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 92% at 50% 44%, transparent 52%, rgba(2,4,10,.50) 100%),
    radial-gradient(58% 34% at 84% -4%, var(--w-glow, rgba(212,175,55,.5)), transparent 70%),
    linear-gradient(180deg, rgba(3,6,14,.46) 0%, rgba(3,6,14,.34) 30%, rgba(3,6,14,.38) 68%, rgba(2,4,10,.74) 100%);
  opacity:.92;
}
html.world-legal .wb-scene{
  background-color:#050b1a;
  background-image:
    radial-gradient(1.5px 1.5px at 26px 30px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 140px 70px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 250px 24px, rgba(212,175,55,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 84px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 80px 150px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(70% 46% at 50% 0%, rgba(143,176,255,.14), transparent 70%);
  background-size:360px 200px, 360px 200px, 360px 200px, 360px 200px, 360px 200px, 100% 100%;
  filter:none;
}
.world-bg .bg-sparkHost{ position:absolute; inset:0; }
.world-bg .bg-particles{ position:absolute; inset:0; overflow:hidden; }
.world-bg .bg-particles i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,168,.9) 0%, rgba(212,175,55,.32) 55%, transparent 72%);
  opacity:0; animation:qmpAmbient linear infinite;
}
.world-bg.bg-paused *{ animation-play-state:paused !important; }

/* ===================== APPLE-STYLE TOP BAR =====================
   Slim, quiet, full-width. In normal flow AND sticky: it reserves
   its own space, so it can never overlap page content. The gold
   ribbon is gone — nothing competes with the bar. */
.abar{
  position:sticky; top:0; z-index:120;
  background:rgba(6,11,24,.78);
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid rgba(212,175,55,.45);
  box-shadow:0 10px 34px rgba(2,6,16,.42);
  font-family:'Inter',sans-serif;
}
.abar-in{
  max-width:1180px; margin:0 auto; padding:0 20px; min-height:58px;
  display:flex; align-items:center; gap:16px; position:relative;
}
.abar-brand{flex:none; display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
.abar-logo{width:30px; height:30px; border-radius:8px; object-fit:contain; display:block;
  transition:transform .4s ease, filter .4s ease;}
.abar-brand:hover .abar-logo, .abar-brand:focus-visible .abar-logo{
  filter:drop-shadow(0 0 9px rgba(212,175,55,.9)); transform:scale(1.07);}
.abar-name{font-family:var(--font-disp); font-weight:700; font-size:1.02rem; letter-spacing:.04em; white-space:nowrap;}
.abar-links{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:2px;}
.abar-links > li{list-style:none; display:flex; align-items:center;}
.abar-link{
  display:inline-flex; align-items:center; gap:5px; min-height:42px;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:9px 12px; border-radius:999px; border:0; background:none; cursor:pointer;
  font-family:inherit; white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.abar-link:hover, .abar-link:focus-visible{background:rgba(212,175,55,.13); color:var(--gold-text);}
.abar-link svg{width:13px; height:13px; stroke:var(--gold-text); transition:transform .35s ease;}
.abar-mega-btn[aria-expanded="true"]{background:rgba(212,175,55,.13); color:var(--gold-text);}
.abar-mega-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.abar .nav-search-btn{
  background:none; border:1.6px solid var(--gold-line); border-radius:999px; color:var(--gold-text);
  cursor:pointer; padding:7px 11px; font-size:.95rem; line-height:1; min-height:38px;
}
.abar .nav-search-btn:hover{border-color:var(--gold); background:rgba(212,175,55,.1);}
.abar-auth{flex:none; display:flex; align-items:center; gap:8px; margin-left:auto;}
.abar-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px;
  font-family:inherit; font-weight:700; font-size:.88rem; text-decoration:none;
  padding:8px 18px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:transform .25s ease, box-shadow .3s ease, background .25s ease, color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.abar-btn-line{color:var(--ink); border:1.6px solid var(--gold-text); background:rgba(212,175,55,.05);}
.abar-btn-line:hover{box-shadow:0 10px 24px -10px rgba(212,175,55,.5); background:rgba(212,175,55,.12);}
.abar-btn-gold{
  color:#23180a; border:1.6px solid var(--gold);
  background:linear-gradient(145deg,#ffe9a8 0%, var(--gold) 55%, #c39a2b 100%);
  box-shadow:0 8px 22px -8px rgba(212,175,55,.8);
}
.abar-btn-gold:hover{transform:translateY(-1px);}
.abar-btn-ghost{color:var(--ink-soft); border:1.6px solid transparent; background:none;}
.abar-btn-ghost:hover{color:var(--ink); border-color:var(--gold-line);}
.abar-hello{color:var(--ink-soft); font-size:.9rem; font-weight:600; white-space:nowrap;}
.abar-hello b{color:var(--gold-text);}
.abar-burger{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:50%; flex:none;
  border:1.6px solid var(--gold-line); background:rgba(212,175,55,.05); cursor:pointer;
  align-items:center; justify-content:center;
}
.abar-burger svg{width:21px; height:21px; stroke:var(--gold-text);}

/* ---- Apple-style mega panels (full-width, under the bar) ---- */
.abar-panel{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(7,12,26,.97);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid rgba(212,175,55,.4);
  box-shadow:0 34px 60px -18px rgba(2,6,16,.75);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .38s cubic-bezier(.22,.8,.3,1), transform .38s cubic-bezier(.22,.8,.3,1), visibility .38s;
  z-index:130;
}
.abar-panel.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.abar-panel-in{max-width:1180px; margin:0 auto; padding:26px 20px 30px;}
.abar-panel-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.v4mega-card{
  display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--ink);
  padding:11px; border-radius:16px; border:1px solid var(--line);
  background:var(--surface); transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.v4mega-card:hover, .v4mega-card:focus-visible{
  border-color:var(--gold); box-shadow:0 14px 30px -14px rgba(2,6,16,.7), 0 0 22px -8px var(--w-glow, rgba(212,175,55,.6)); transform:translateY(-2px);
}
.v4mega-img{
  flex:0 0 62px; width:62px; height:62px; border-radius:13px;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 14px rgba(2,6,16,.5);
}
.v4mega-tx strong{display:block; font-size:.99rem; line-height:1.25; font-family:var(--font-disp);}
.v4mega-tx small{display:block; color:var(--ink-soft); font-size:.83rem; margin-top:2px; line-height:1.35;}
.abar-more{display:grid; grid-template-columns:220px 1fr; gap:12px 44px;}
.abar-col-h{color:var(--gold-text); font-size:.72rem; letter-spacing:.2em; font-weight:700; margin:2px 0 10px; text-transform:uppercase;}
.abar-col > a{
  display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:.97rem;
  padding:8px 10px; border-radius:10px;
}
.abar-col > a:hover{background:rgba(212,175,55,.1); color:var(--gold-text);}
.abar-legal-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 26px;}
.abar-legal-grid a{
  display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:.97rem;
  padding:8px 10px; border-radius:10px;
}
.abar-legal-grid a:hover{background:rgba(212,175,55,.1); color:var(--gold-text);}

/* Tightening band: keeps every control inside the bar at 941–1100px */
@media (max-width: 1100px) and (min-width: 941px){
  .abar-link{padding:9px 9px; font-size:.92rem;}
  .abar-hello{display:none;}
  .abar-btn{padding:8px 15px;}
}
/* Mobile chrome: quiet bar + burger; links/auth move to the overlay */
@media (max-width: 940px){
  .abar-links, .abar-auth{display:none;}
  .abar-burger{display:inline-flex;}
  .abar-panel{display:none;}
}

/* ---- Full-screen mobile menu overlay ---- */
.amenu{
  position:fixed; inset:0; z-index:150; overflow-y:auto;
  display:flex; flex-direction:column;
  padding:12px 22px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(8,15,32,.98), rgba(4,8,18,.99));
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.amenu.open{opacity:1; visibility:visible;}
.amenu-top{display:flex; align-items:center; justify-content:space-between; min-height:48px;}
.amenu-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-disp); font-weight:700; font-size:1.05rem; letter-spacing:.04em;}
.amenu-brand img{width:30px; height:30px; border-radius:8px; display:block;}
.amenu-close{
  width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer;
  border:1.6px solid var(--gold-line); background:rgba(212,175,55,.05);
  display:inline-flex; align-items:center; justify-content:center;
}
.amenu-close svg{width:20px; height:20px; stroke:var(--gold-text);}
.amenu-links{display:flex; flex-direction:column; margin-top:14px;}
.amenu-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  color:var(--ink); text-decoration:none; text-align:left;
  font-family:var(--font-disp); font-weight:600; font-size:clamp(1.55rem, 6.2vw, 2.1rem);
  letter-spacing:-.01em; line-height:1.15;
  padding:11px 2px; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1);
}
.amenu.open .amenu-link{opacity:1; transform:none; transition-delay:var(--d, 0s);}
.amenu-link svg{width:20px; height:20px; stroke:var(--gold-text); flex:none; transition:transform .35s ease;}
.amenu-expand[aria-expanded="true"] svg{transform:rotate(180deg);}
.amenu-sub{display:none; padding:4px 0 10px 16px; border-bottom:1px solid var(--line);}
.amenu-sub.open{display:block;}
.amenu-sub a{
  display:block; color:var(--ink-soft); text-decoration:none; font-weight:600;
  font-size:1.12rem; padding:9px 0;
}
.amenu-sub a:hover, .amenu-sub a:focus-visible{color:var(--gold-text);}
.amenu-auth{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:auto; padding-top:24px;}
.amenu-auth .abar-btn{min-height:48px; padding:11px 22px; font-size:.95rem;}
.amenu-foot{
  margin:18px 0 0; text-align:center; color:var(--ink-soft);
  font-size:.72rem; letter-spacing:.22em; font-weight:600;
}
body.amenu-lock{overflow:hidden;}
@media (min-width: 941px){ .amenu{display:none !important;} }

/* ---- Floating action buttons (kept from the pill era; used by the
        JS-injected mobile Book / Sign Up pills) ---- */
.v4btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px;
  font-family:inherit; font-weight:700; font-size:.93rem; text-decoration:none;
  padding:10px 22px; border-radius:999px; cursor:pointer; white-space:normal;
  text-align:center;
  transition:transform .25s ease, box-shadow .3s ease, background .25s ease, color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.v4btn-outline{color:var(--ink); border:1.6px solid var(--gold-text); background:rgba(212,175,55,.05);}
.v4btn-outline:hover{box-shadow:0 10px 24px -10px rgba(212,175,55,.5); background:rgba(212,175,55,.12);}
.v4btn-gold{
  color:#23180a; border:1.6px solid var(--gold);
  background:linear-gradient(145deg,#ffe9a8 0%, var(--gold) 55%, #c39a2b 100%);
  box-shadow:0 8px 22px -8px rgba(212,175,55,.8);
}
.v4btn-gold:hover{transform:translateY(-1px);}
.v4btn-ghost{color:var(--ink-soft); border:1.6px solid transparent; background:none;}
.v4btn-ghost:hover{color:var(--ink); border-color:var(--gold-line);}

/* ===================== PORTAL HERO (V3, restored) =====================
   The hero sits IN the world: the page backdrop is the full-page
   world scene, and the hero's portal is a gold-rimmed opening onto
   layered depths of that same world. Content stacks in clean flow
   inside .portal-content — emblem block, then headline a full gap
   below it. No layering of type over emblem, ever. */
.hero{
  position:relative; overflow:hidden; isolation:isolate; perspective:1200px;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(170deg, #05070f 0%, var(--navy-deep) 55%, #04060d 100%);
  padding:clamp(26px, 5vw, 54px) 14px clamp(44px, 6vw, 66px);
  text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:-16% 0; z-index:0;
  background-image:linear-gradient(180deg, rgba(5,6,14,.25) 0%, rgba(5,6,14,.06) 42%, rgba(5,6,14,.45) 100%), var(--w-img);
  background-size:cover; background-position:center 38%;
  /* Cursor parallax: --mx is only ever set by v4.js under fine pointers
     without reduced motion, so at rest (and for reduced motion) this
     renders exactly as before — motion only, look unchanged. */
  transform:translate3d(calc(var(--mx, 0) * -8px), var(--py, 0px), 0) scale(1.04);
  will-change:transform;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 110px 80px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 190px 20px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 260px 110px, rgba(212,175,55,.85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 60px 150px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 320px 60px, rgba(255,255,255,.7) 50%, transparent 52%);
  background-size:340px 190px;
  animation:qmpTwinkle 4.6s ease-in-out infinite alternate;
}
@keyframes qmpTwinkle{ from{ opacity:.45; } to{ opacity:1; } }
.hero > *{ position:relative; z-index:2; }
.hero h1, .hero .tagline, .hero .subtag{ text-shadow:0 2px 20px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.7); }
.hero.has-portal::before{ display:none; }

/* The glowing rim — an irregular rounded frame, gold light edge */
.portal-rim{
  max-width:1060px; margin:0 auto; position:relative; z-index:2;
  padding:clamp(6px, 1.1vw, 11px);
  border-radius:172px 248px 196px 288px / 138px 178px 228px 158px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 26%, #6e5511 52%, var(--gold) 78%, #ffe9a8 100%);
  box-shadow:
    0 0 64px -10px rgba(212,175,55,.55),
    0 0 130px -30px var(--w-glow, rgba(212,175,55,.6)),
    0 34px 80px rgba(0,0,0,.65),
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -3px 6px rgba(0,0,0,.45);
  transform:rotateX(calc(var(--my, 0) * -1.7deg)) rotateY(calc(var(--mx, 0) * 1.7deg))
    scale(calc(1 - var(--py2, 0) * .028));
  transform-style:preserve-3d;
  will-change:transform;
}
.portal{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:164px 240px 188px 280px / 130px 170px 220px 150px;
  background:#070b18;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -40px 80px rgba(0,0,0,.5);
}
/* Layered scene inside the portal — true parallax depths */
.pl{ position:absolute; pointer-events:none; will-change:transform; }
.pl-sky{
  inset:-9% -6%; z-index:0;
  background:url("space/hero-sky.jpg") center 32% / cover no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -7px), calc(var(--py2, 0) * 12px), 0) scale(1.06);
}
.pl-land{
  inset:-9% -6%; z-index:1;
  background:url("space/hero-mars.jpg") center 58% / cover no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -14px), calc(var(--py2, 0) * 26px), 0) scale(1.09);
  transition:opacity .5s ease;
}
.hero.qworld-switching .pl-land{opacity:0;}
.pl-stars{
  inset:0; z-index:2;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 110px 80px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 190px 20px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 260px 110px, rgba(255,233,168,.9) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 60px 150px, rgba(255,255,255,.55) 50%, transparent 52%);
  background-size:340px 190px;
  animation:qmpTwinkle 5.2s ease-in-out infinite alternate;
}
.pl-ridge{
  left:-7%; right:-7%; bottom:-4%; height:44%; z-index:3;
  background:url("space/hero-ridge.jpg") center 68% / cover no-repeat;
  filter:brightness(.82) saturate(1.12);
  -webkit-mask-image:linear-gradient(to top, #000 42%, transparent 97%);
  mask-image:linear-gradient(to top, #000 42%, transparent 97%);
  transform:translate3d(calc(var(--mx, 0) * -22px), calc(var(--py2, 0) * 40px), 0) scale(1.1);
}
.pl-shade{
  inset:0; z-index:4;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(3,5,12,.42) 100%),
    linear-gradient(180deg, rgba(4,6,16,.42) 0%, rgba(4,6,16,.05) 32%, rgba(4,6,16,.10) 60%, rgba(4,6,16,.58) 100%);
}
.portal-content{
  position:relative; z-index:5; text-align:center;
  padding:clamp(30px, 5.5vw, 56px) clamp(18px, 5vw, 54px) clamp(52px, 8vw, 84px);
  transform:translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 4px), 0);
  will-change:transform;
}
@media (max-width:720px){
  .portal-rim{ border-radius:104px 138px 112px 152px / 84px 104px 128px 96px; }
  .portal{ border-radius:98px 132px 106px 146px / 78px 98px 122px 90px; }
  .portal-content{ padding-bottom:58px; }
  .pl-ridge{ height:38%; }
}

/* ---- Hero content stack (clean flow — emblem, gap, headline) ---- */
.hero .logo-mark{
  width:min(190px, 62vw); margin:0 auto; position:relative; z-index:4;
  /* NO transform, ever: the emblem cannot drift toward the headline. */
}
.hero .logo-mark img{width:100%; height:auto; display:block; border-radius:18px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));}
.hero h1{
  /* Apple discipline: one calm headline, tight tracking, soft white,
     a single gold accent phrase (the .gold span). */
  font-size:clamp(2.75rem, 7.4vw, 4.9rem); font-weight:700; letter-spacing:-0.02em;
  margin:26px 0 0; line-height:1.05; position:relative; z-index:2; color:#f4f7fc;
}
.hero h1 .gold{color:var(--gold-text);}
.hero .tagline{
  color:var(--gold-text); font-weight:700; letter-spacing:.3em;
  font-size:clamp(.82rem, 2.3vw, 1.05rem); margin:16px 0 0; text-transform:uppercase;
}
.hero .subtag{color:#ccd6ea; font-size:clamp(1.02rem, 2.6vw, 1.22rem); margin:14px auto 0; max-width:640px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.hero-facts{
  display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; margin-top:30px;
  color:#b7c3da; font-size:.98rem;
}
.hero-facts b{color:var(--gold-text);}
.hero .day-badge{margin-top:16px;}
.hero .theme-strip{margin-top:38px;}

/* Ambient life layer inside the portal (particles injected by JS) */
.portal .ambient{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden;}
.ambient i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,168,.95) 0%, rgba(212,175,55,.35) 55%, transparent 72%);
  opacity:0; animation:qmpAmbient linear infinite;
}
.ambient.fx-snow i{background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(210,230,255,.4) 55%, transparent 72%);}
.ambient.fx-bubbles i{background:radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(160,220,255,.35) 60%, rgba(160,220,255,.05) 75%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.ambient.fx-neon i{background:radial-gradient(circle, rgba(170,245,255,.95) 0%, rgba(255,90,220,.45) 55%, transparent 72%);}
.ambient.fx-petals i{background:radial-gradient(circle, rgba(255,208,228,.95) 0%, rgba(244,160,195,.4) 55%, transparent 72%);}
.ambient.fx-glints i{background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,226,160,.45) 55%, transparent 72%);}
.ambient.fx-rain i{background:linear-gradient(180deg, rgba(174,194,255,.95), rgba(174,194,255,.15)); border-radius:2px;}
.ambient.fx-leaves i{background:radial-gradient(circle, rgba(245,158,11,.95) 0%, rgba(194,65,12,.5) 55%, transparent 72%); border-radius:60% 40% 55% 45%;}

/* Four Seasons Town — season switcher (themes block, homepage picker,
   Client Home). Standalone switchers hide until the seasons world is
   active; the [hidden] rule must beat the flex display above. */
.season-switch{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 2px;}
.season-switch[hidden]{display:none;}
.season-switch button{appearance:none; border:1px solid var(--gold-line); background:rgba(10,18,34,.55); color:var(--ink); border-radius:999px; padding:7px 14px; font:600 .88rem var(--font-disp); cursor:pointer;}
.season-switch button.active, .season-switch button[aria-pressed="true"]{background:var(--gold); color:#1a1206; border-color:var(--gold);}

/* Per-world scrim: an extra darkening grade on the full-page backdrop
   for the brightest entries only (daylight Paris, snowy mansion, white
   living room, the sunlit seasons). Never touches other worlds. */
.world-bg.wb-scrim .wb-scene::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(3,6,14,.30) 0%, rgba(3,6,14,.34) 50%, rgba(3,6,14,.42) 100%);}
.ambient.fx-rays{
  background:linear-gradient(115deg, transparent 30%, rgba(255,244,200,.16) 45%, transparent 58%, rgba(255,244,200,.10) 68%, transparent 82%);
  background-size:240% 100%; animation:qmpRays 11s ease-in-out infinite alternate;
}
@keyframes qmpAmbient{
  0%{transform:translate3d(0, 12px, 0); opacity:0;}
  14%{opacity:.85;}
  86%{opacity:.7;}
  100%{transform:translate3d(var(--drift, 14px), var(--rise, -40vh), 0); opacity:0;}
}
@keyframes qmpRays{from{background-position:88% 0;} to{background-position:8% 0;}}

/* ---- Living logo (artwork untouched — presentation only) ---- */
@keyframes qmpLogoIn{
  0%{opacity:.25; transform:scale(.94) translateY(8px); filter:blur(4px) drop-shadow(0 0 0 rgba(212,175,55,0));}
  55%{opacity:1; filter:blur(0) drop-shadow(0 0 30px rgba(212,175,55,.7));}
  100%{opacity:1; transform:scale(1) translateY(0); filter:blur(0) drop-shadow(0 0 13px rgba(212,175,55,.35));}
}
@keyframes qmpLogoPulse{
  0%,100%{filter:drop-shadow(0 0 11px rgba(212,175,55,.32));}
  50%{filter:drop-shadow(0 0 22px rgba(212,175,55,.6));}
}
.hero .logo-mark img, .auth-logo{
  animation:qmpLogoIn 1.1s cubic-bezier(.22,.8,.3,1) both, qmpLogoPulse 6s ease-in-out 1.2s infinite;
}
.hero.logo-tap .logo-mark img{animation:none; filter:drop-shadow(0 0 34px rgba(212,175,55,.95));}

/* ---- Gold spark guide (travels the homepage with scroll) ---- */
.spark{
  /* Lives inside .bg-sparkHost (background stack) — behind all content */
  position:absolute; right:26px; top:0; width:15px; height:15px;
  pointer-events:none; will-change:transform;
  transform:translate3d(0, 140px, 0);
}
.spark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, #fff6d8 0%, var(--gold) 45%, rgba(212,175,55,0) 72%);
  box-shadow:0 0 18px 5px rgba(212,175,55,.55), 0 0 44px 14px rgba(212,175,55,.22);
  animation:qmpSparkBreath 4.5s ease-in-out infinite;
}
.spark::after{ /* faint circuit trail above the spark */
  content:""; position:absolute; left:50%; bottom:100%; width:2px; height:44px;
  transform:translateX(-50%);
  background:linear-gradient(to top, rgba(212,175,55,.5), rgba(212,175,55,0));
  border-radius:2px;
}
@keyframes qmpSparkBreath{0%,100%{transform:scale(1);} 50%{transform:scale(1.22);}}
@media (max-width: 760px){ .spark{display:none;} }

/* ---- Calm reveals (JS adds .rv; no-JS keeps everything visible) ---- */
.rv{opacity:0; transform:translateY(16px);}
.rv.in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.22,.7,.3,1);}

/* ===================== SECTIONS & CONTENT ===================== */
main section{padding:60px 0;}
.sec-head{text-align:center; max-width:720px; margin:0 auto 34px;}
.sec-head h2{font-size:clamp(1.95rem, 4.6vw, 2.7rem); margin:0 0 10px;}
.sec-head p{color:var(--ink-soft); margin:0; font-size:1.06rem;}
.gold-rule{width:66px; height:3px; border-radius:2px; margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);}
.lead-center{text-align:center; max-width:720px; margin:0 auto; color:var(--ink-soft); font-size:1.08rem;}
.page-view{padding:26px 0 74px;}
.page-view.wrap{max-width:880px;}
.back-link{display:inline-block; margin:14px 0 4px; font-weight:700; color:var(--gold-text); text-decoration:none;}
.back-link:hover{text-decoration:underline;}
.band-gold, #packages, #offers, .quote-band, .cta-band{
  background:var(--gold-soft); box-shadow:0 0 0 100vmax var(--gold-soft); clip-path:inset(0 -100vmax);
}

/* Skyline photo band (home) */
.skyline{position:relative; max-width:1120px; margin:26px auto 0; padding:0 22px;}
.skyline img{width:100%; height:auto; display:block; border-radius:24px; box-shadow:var(--shadow);}
.skyline-cap{text-align:center; color:var(--ink-soft); margin-top:12px; font-size:.98rem;}

/* Services — V3 portal cards: a window into each service's world */
.svc-grid{display:block; max-width:840px; margin:0 auto;}
.svc{
  position:relative; display:block; margin:0 0 20px; isolation:isolate;
  padding:24px; border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.75);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  transition:box-shadow .4s ease, transform .45s cubic-bezier(.22,.7,.3,1), border-color .4s ease;
  /* Cards HUG their content: plain block flow, no min-height, no 3D
     rendering context (preserve-3d/translateZ let the scene window
     paint over the title on mobile browsers — removed for good). */
}
.svc:hover, .svc:focus-within, .svc.tilt-on{
  border-color:rgba(255,233,168,.95);
  box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px var(--w-glow, rgba(212,175,55,.6)), 0 0 38px -8px var(--w-glow, rgba(212,175,55,.6)),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.svc-portal{
  position:relative; z-index:1;
  margin:-24px -24px 18px; padding:4px;
  border-radius:74px 96px 74px 96px / 48px 58px 48px 58px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 30%, #6e5511 55%, var(--gold) 82%, #ffe9a8 100%);
  box-shadow:0 0 26px -8px var(--w-glow, rgba(212,175,55,.6)), 0 14px 30px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.4);
  /* In-flow window: its negative margins only bleed into the card's own
     padding; the +18px bottom margin guarantees it can never reach the
     title below it, at any width. */
}
.svc-portal-in{
  position:relative; overflow:hidden; height:158px;
  border-radius:70px 92px 70px 92px / 44px 54px 44px 54px;
  background-color:#070b18; background-size:cover; background-position:center 50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -26px 44px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
.svc-portal-in::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 95% at 50% 40%, transparent 56%, rgba(3,5,12,.40) 100%),
    linear-gradient(180deg, rgba(4,6,14,.05), rgba(4,6,14,.26));
}
.svc:hover .svc-portal-in, .svc.tilt-on .svc-portal-in{ transform:scale(1.045); }
.svc-tip{
  /* Clamped INSIDE its card (never above or past an edge) and layered
     BELOW the card's text: its soft shadow may fall on the scene
     window only — it can never wash the title or bullets again. */
  position:absolute; top:10px; right:10px; z-index:2; width:236px; max-width:74vw;
  border:1.5px solid rgba(255,233,168,.9); border-radius:22px; overflow:hidden;
  background:rgba(7,12,26,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 26px -8px var(--w-glow, rgba(212,175,55,.6));
  opacity:0; transform:translateY(12px) scale(.94); transform-origin:top right;
  pointer-events:none; transition:opacity .34s ease, transform .34s cubic-bezier(.22,.7,.3,1);
}
.svc-tip img{ display:block; width:100%; height:118px; object-fit:cover; }
.svc-tip span{
  display:block; padding:10px 14px; color:#f4f6fb; font-size:.8rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.svc-tip span i{ display:block; font-style:normal; color:var(--gold); font-size:.68rem; letter-spacing:.22em; margin-bottom:2px; }
.svc:hover .svc-tip, .svc:focus-within .svc-tip, .svc.tip-open .svc-tip{
  opacity:1; transform:translateY(0) scale(1);
}
/* Card text always paints above the peek and its shadow — titles
   render solid white at full opacity, no exceptions. */
.svc h3, .svc ul, .svc p, .svc .svc-more{ position:relative; z-index:3; }
/* The peek is a MOUSE pleasure only: on touch/coarse pointers it can
   never render — no tap-triggered, never-dismissing overlay. */
@media (hover: none), (pointer: coarse){
  .svc-tip{ display:none !important; }
}
/* While the page is scrolling, any visible peek dismisses at once
   (a parked cursor can otherwise hold :hover open over moving text). */
html.tips-suppressed .svc-tip{
  opacity:0 !important; transform:translateY(12px) scale(.94) !important;
}
@media (max-width:720px){
  .svc-portal{ margin:-18px -18px 16px; border-radius:52px 66px 52px 66px / 36px 42px 36px 42px; }
  .svc-portal-in{ height:132px; border-radius:48px 62px 48px 62px / 32px 38px 32px 38px; }
  .svc{ padding:18px; }
  .svc-tip{ width:206px; top:8px; right:8px; }
  .svc-tip img{ height:100px; }
}
.svc h3{margin:0; font-size:1.32rem;}
.svc ul{margin:8px 0 0;}
/* Icon guard: the card headings carry no icons by design. If one ever
   returns, it can only ever render at 24px — the unsized-SVG failure
   (browser-default sizing filling the heading, ~330px tall) is the
   bug that produced the giant YouTube glyph and the empty voids. */
.svc h3 svg{width:24px; height:24px; flex:0 0 auto;}
.svc p{margin:3px 0 0; color:var(--ink-soft); max-width:520px;}
.svc .svc-more{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:20px 0 0; margin-left:0;
  min-height:44px; max-width:100%; padding:10px 22px; border-radius:999px; text-decoration:none;
  border:1.5px solid rgba(212,175,55,.8); color:var(--gold);
  /* Labels WRAP inside the pill (the pill grows taller, text stays
     centered) — a long label can never run past the pill or the card
     again the way "More about Web Design & Development" did. */
  background:rgba(212,175,55,.07); font-weight:700; font-size:1rem; white-space:normal;
  text-align:center; line-height:1.3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px -8px var(--w-glow, rgba(212,175,55,.6));
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svc .svc-more:hover{
  background:rgba(212,175,55,.16); transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 22px -6px var(--w-glow, rgba(212,175,55,.6));
}
.svc-videos, #watch{text-align:center;}
.reel-wrap{max-width:430px; margin:0 auto;}
.reel-wrap video, .svc-videos video{width:100%; height:auto; border-radius:20px; box-shadow:var(--shadow); display:block; margin:0 auto;}
.reel-cap{color:var(--ink-soft); margin-top:12px;}

/* Packages / prices — V3 treatment */
.pkg-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  max-width:1060px; margin:10px auto 0; align-items:start;
}
.detail-main .pkg-grid{ grid-template-columns:1fr; max-width:560px; margin:6px 0 18px; }
@media (max-width: 860px){ .pkg-grid{grid-template-columns:1fr; max-width:520px;} .pkg-card.pkg-featured{margin-top:10px;} }
.pkg-card{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px;
  padding:24px; color:var(--card-text);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .35s cubic-bezier(.22,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.pkg-card:hover{
  transform:translateY(-4px); border-color:rgba(255,233,168,.95);
  box-shadow:0 28px 56px rgba(0,0,0,.6), 0 0 34px -8px var(--w-glow, rgba(212,175,55,.6)), inset 0 1px 0 rgba(255,255,255,.16);
}
.pkg-card.pkg-featured{
  border:2px solid rgba(255,233,168,.95);
  box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 40px -8px rgba(212,175,55,.65), inset 0 1px 0 rgba(255,255,255,.16);
}
.pkg-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(165deg, #f2da8a, var(--gold) 60%, #b28c27);
  color:#1a1202; font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.45), 0 0 18px -4px rgba(212,175,55,.8);
}
.pkg-tag{
  color:var(--w-glow, var(--gold-text)); font-size:.74rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; margin-bottom:6px;
}
.pkg-card h3{ color:var(--gold); font-size:1.32rem; margin:0 0 8px; letter-spacing:.02em; }
.pkg-price{ font-family:'Space Grotesk','Playfair Display',sans-serif; font-size:2.1rem; font-weight:700; color:#fff; line-height:1.15; margin:2px 0 14px; }
.pkg-price .from, .pkg-price .pkg-from, .pkg-from{
  font-size:.82rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--card-sub); vertical-align:.55em; font-family:'Inter',sans-serif;
}
.pkg-price .per{font-size:1.05rem; color:var(--card-sub); font-family:'Inter',sans-serif; font-weight:600;}
.pkg-quote, .pkg-price.pkg-quote{ font-family:'Space Grotesk','Playfair Display',sans-serif; font-size:1.45rem; font-weight:700; color:#fff; margin:2px 0 14px; }
.pkg-price.pkg-quote span{ display:block; font-size:.95rem; font-weight:500; color:var(--card-sub); letter-spacing:.02em; margin-top:2px; }
.pkg-card p{color:var(--ink-soft); margin:6px 0;}
.pkg-card ul{margin:10px 0 18px; padding:0; list-style:none;}
.pkg-card .ticks{ margin:0 0 20px; }
.pkg-card .ticks li{ color:var(--card-text); font-size:1rem; }
.pkg-btn{ margin-top:0; min-height:44px; padding:10px 22px; font-size:1rem; width:100%; justify-content:center; text-align:center; }
.pkg-deals, .offer-row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  max-width:1060px; margin:26px auto 6px;
}
.detail-main .pkg-deals{ justify-content:flex-start; margin:0 0 20px; }
.pkg-deal, .offer-row .pill{
  padding:9px 20px; border-radius:999px;
  border:1.5px solid rgba(212,175,55,.8); color:var(--gold);
  background:rgba(212,175,55,.08);
  font-family:'Space Grotesk',sans-serif; font-size:.86rem; font-weight:600; letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px -8px var(--w-glow, rgba(212,175,55,.6));
}
.deposit-note, .area-note, .note{color:var(--ink-soft); font-size:.95rem; text-align:center; margin-top:16px;}
.offer-art{max-width:820px; margin:0 auto;}
.fine-print{color:var(--ink-soft); font-size:.88rem;}
.offers-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px;}
.offer-card{border:1px solid rgba(212,175,55,.45); border-radius:14px; padding:22px; background:rgba(255,255,255,.04);}
.offer-card h3{color:var(--gold-text); margin:0 0 8px; font-size:1.25rem;}
.offer-card p{margin:0; color:var(--ink-soft); line-height:1.6;}
.offers-fineprint{margin-top:18px; text-align:center;}
@media(max-width:700px){.offers-grid{grid-template-columns:1fr;}}
.promo-bar{display:block; background:var(--gold); color:#0a192f; text-align:center; padding:10px 16px; font-weight:600; font-size:.95rem; line-height:1.4; text-decoration:none;}
.promo-bar:hover{filter:brightness(1.05);}
.promo-bar-cta{text-decoration:underline; white-space:nowrap;}

/* Trust / proof band (real facts only, flagship-calm) */
#trust .tgrid, .tgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media (max-width: 860px){ #trust .tgrid, .tgrid{grid-template-columns:1fr;} }
.tcard{
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px; padding:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  text-align:center;
}
.tcard h3{margin:0 0 6px; font-size:1.32rem;}
.tcard b{display:block; font-family:var(--font-disp); font-weight:700; font-size:1.32rem; color:var(--ink); margin:0 0 6px;}
.tcard span{color:var(--ink-soft); line-height:1.55;}
.tcard p{margin:0; color:var(--ink-soft);}
.strip{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px; padding:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
.strip-price b, .strip-referral b{color:var(--gold-text);}

/* Gallery — real photos, rounded frames */
.gal-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media (max-width: 860px){ .gal-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 540px){ .gal-grid{grid-template-columns:1fr;} }
.gal-item{margin:0; border-radius:20px; overflow:hidden; border:1.5px solid rgba(212,175,55,.65); background:var(--surface);}
.gal-item img, .gal-item video{width:100%; height:auto; display:block;}
.gal-item figcaption{padding:14px 18px; color:var(--ink-soft); font-size:.95rem;}
.gal-flyer{max-width:560px; margin:0 auto;}

/* Problems / values / about cards */
.prob-grid, .values-grid, .about-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media (max-width: 860px){ .prob-grid, .values-grid, .about-grid{grid-template-columns:1fr;} }
.prob-card, .value-card, .about-card{
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px; padding:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
.prob-card h3, .value-card h3, .about-card h3{margin:0 0 6px; font-size:1.32rem;}
.prob-card p, .value-card p, .about-card p{margin:0; color:var(--ink-soft);}
.prob-sub{text-align:center; color:var(--ink-soft);}
.about-img{border-radius:20px; box-shadow:var(--shadow); width:100%; height:auto; display:block;}
.who-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.who-tag{border:1.6px solid var(--gold); border-radius:999px; padding:8px 16px; font-weight:700; font-size:.93rem; color:var(--ink);}
.motto{font-family:var(--font-serif); font-style:italic; font-size:1.25rem; text-align:center; color:var(--ink);}
.steps{max-width:760px; margin:0 auto; padding-left:22px;}
.steps li{margin:10px 0;}
.quote-band .quote-text, .quote-text{font-family:var(--font-serif); font-style:italic; font-size:1.3rem; text-align:center; max-width:760px; margin:0 auto;}
.quote-by{text-align:center; color:var(--gold-text); font-weight:700; margin-top:10px;}

/* Detail pages */
.detail-grid{display:block; max-width:800px; margin:0 auto;}
.detail-main p, .detail-main li{color:#c3cee2;}
.detail-side{
  background:rgba(212,175,55,.07); border:1px solid var(--gold-line); border-radius:20px;
  padding:24px 26px; margin-top:28px;
}
.ticks{list-style:none; padding:0; margin:14px 0;}
.ticks li{padding:6px 0 6px 28px; position:relative;}
.ticks li::before{content:"✓"; position:absolute; left:2px; color:var(--gold-text); font-weight:800;}
.ticks-center{text-align:center;}
.ticks-center li{padding-left:0;}
.ticks-center li::before{position:static; margin-right:8px;}

/* Booking + forms */
.book-grid{display:grid; grid-template-columns:370px 1fr; gap:20px; align-items:start;}
@media (max-width: 860px){ .book-grid{grid-template-columns:1fr;} }
.contact-card{
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px; padding:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
.contact-card h3{margin-top:0; letter-spacing:.12em; font-size:1.05rem; font-family:'Inter',sans-serif; font-weight:800;}
.c-row{display:flex; gap:13px; align-items:flex-start; padding:9px 0;}
.c-row svg{width:22px; height:22px; stroke:var(--gold-text); flex:0 0 auto; margin-top:3px;}
.c-row .lbl{display:block; color:var(--ink-soft); font-size:.86rem; font-weight:600;}
.c-row a{font-weight:700; color:var(--ink); text-decoration:none;}
.c-row a:hover{color:var(--gold-text);}
.form-card{background:var(--surface); border:1.6px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow);}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width: 640px){ .f-grid{grid-template-columns:1fr;} }
.f-field{margin:0 0 14px; text-align:left;}
.f-field.full{grid-column:1 / -1;}
.f-field label{display:block; font-weight:600; font-size:.95rem; margin-bottom:6px;}
.f-field input, .f-field select, .f-field textarea,
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px; font-size:1rem; min-height:52px;
  border:1.6px solid rgba(159,176,201,.35); background:#0a1428; color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
}
.f-field textarea, .field textarea{min-height:110px;}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold-text);
}
.f-submit{width:100%; margin-top:6px;}
.f-sub{color:var(--ink-soft); font-size:.92rem; text-align:center;}
.f-error, .f-err{
  display:none; background:rgba(229,120,120,.10); border:1.4px solid rgba(240,160,160,.45); color:#f2bcbc;
  border-radius:12px; padding:11px 14px; font-size:.94rem; margin:12px 0; text-align:left;
}
.confirm{display:none; background:rgba(212,175,55,.08); border:1.6px solid var(--gold); border-radius:16px; padding:20px; margin-top:18px; text-align:left;}
.confirm.show{display:block;}
.confirm pre{white-space:pre-wrap; font-family:'Inter',sans-serif; font-size:.95rem; background:#0a1428; border:1px solid var(--line); border-radius:12px; padding:14px; color:var(--ink);}
.confirm .row{display:flex; gap:10px; flex-wrap:wrap;}
.stars{display:inline-flex; gap:4px;}
.star{background:none; border:0; cursor:pointer; font-size:1.7rem; line-height:1; color:#3d5173; padding:4px;}
.star.on{color:var(--gold);}
.r-confirm{display:none; background:rgba(212,175,55,.08); border:1.6px solid var(--gold); border-radius:16px; padding:18px; margin-top:16px;}
.r-confirm.show{display:block;}
.review-note{color:var(--ink-soft); font-size:.93rem;}
.book-world-note{
  margin:16px auto 0; max-width:640px; text-align:center;
  background:rgba(212,175,55,.08); border:1.4px solid var(--gold); color:var(--ink);
  border-radius:14px; padding:11px 16px; font-size:.98rem;
}
.book-world-note b{color:var(--gold-text);}

/* ===================== GATEWAYS (V3) — a portal into each page's world ===================== */
.gateway{
  position:relative; margin:4px 0 22px; padding:clamp(4px, .7vw, 7px);
  border-radius:96px 132px 96px 132px / 62px 78px 62px 78px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 26%, #6e5511 52%, var(--gold) 78%, #ffe9a8 100%);
  box-shadow:0 0 44px -10px var(--w-glow, rgba(212,175,55,.6)), 0 22px 48px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.4);
}
.gw-in{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(210px, 36vw, 360px);
  border-radius:90px 126px 90px 126px / 56px 72px 56px 72px;
  background:#070b18;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -34px 64px rgba(0,0,0,.5);
}
.gw-scene{
  position:absolute; inset:-13% 0; z-index:0;
  background-image:linear-gradient(180deg, rgba(4,6,14,.10), rgba(4,6,14,.30)), var(--w-img);
  background-size:cover; background-position:center 50%;
  filter:saturate(1.26) contrast(1.05);
  will-change:transform;
}
.gw-in::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(3,5,12,.38) 100%),
    radial-gradient(1.4px 1.4px at 30px 26px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 150px 66px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 262px 22px, rgba(255,233,168,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 74px, rgba(255,255,255,.55) 50%, transparent 52%);
  background-size:100% 100%, 360px 110px, 360px 110px, 360px 110px, 360px 110px;
}
.gateway.gw-legal .gw-in{ height:118px; }
.gateway.gw-legal .gw-scene{
  /* Conservative starfield — the legal pages' scene. It must READ as a
     starfield, not an empty navy frame: two star tiles (bright + faint)
     over a soft nebula wash on deep navy. No photo, by design. */
  background-image:
    radial-gradient(1.6px 1.6px at 26px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 96px 88px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 168px 44px, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 248px 22px, rgba(212,175,55,.9) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 318px 96px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 372px 58px, rgba(196,216,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 52px 66px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 140px 108px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 226px 78px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 296px 118px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 352px 12px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 404px 92px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(70% 100% at 50% 0%, rgba(143,176,255,.22), transparent 70%),
    radial-gradient(46% 70% at 84% 100%, rgba(212,175,55,.07), transparent 70%);
  background-size:420px 132px, 420px 132px, 420px 132px, 420px 132px, 420px 132px, 420px 132px,
    420px 132px, 420px 132px, 420px 132px, 420px 132px, 420px 132px, 420px 132px, 100% 100%, 100% 100%;
  background-color:#050b1a;
}
@media (max-width:720px){
  .gateway{ border-radius:56px 72px 56px 72px / 40px 48px 40px 48px; }
  .gw-in{ height:clamp(170px, 52vw, 230px); border-radius:52px 68px 52px 68px / 36px 44px 36px 44px; }
  .gateway.gw-legal .gw-in{ height:88px; }
}

/* ===================== GLASS PANELS + READABILITY (V3) ===================== */
.detail-main{
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px, 3.4vw, 32px);
  backdrop-filter:blur(10px) saturate(1.25); -webkit-backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.about-card, form, .strip-referral, .confirm{
  background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.page-view p, .page-view li,
.sec-head p, .skyline-cap, .gal-item figcaption{
  text-shadow:0 1px 12px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45);
}
.detail-main h3, form h3, .confirm h4, .about-card h3{ color:var(--gold); }
.detail-main a, .about-card a{ color:var(--gold); }
.gold-rule{
  width:88px; height:5px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, #ffe9a8 50%, var(--gold) 78%, transparent);
  box-shadow:0 0 14px -2px rgba(212,175,55,.7);
}
/* Trust cards + detail side panels join the glow family */
#trust .tcard, .detail-side{
  box-shadow:0 16px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition:box-shadow .35s ease, transform .35s ease;
}
#trust .tcard:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(0,0,0,.55), 0 0 0 1px var(--w-glow, rgba(212,175,55,.6)), 0 0 26px -8px var(--w-glow, rgba(212,175,55,.6));
}
.gal-item button, .svc-vid{ transition:box-shadow .35s ease; }
.gal-item button:hover, .svc-vid:hover{ box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 26px -8px var(--w-glow, rgba(212,175,55,.6)); }
.badge{ box-shadow:var(--shadow), 0 0 44px -12px rgba(212,175,55,.65); }

/* ===================== HEADING DISCIPLINE (Apple-style) =====================
   Sentence-case calm: tight tracking on H1/H2, confident scale,
   soft white with gold reserved for true accents. Words unchanged. */
h1, h2{ letter-spacing:-0.015em; }
.sec-head h2{
  font-size:clamp(1.9rem, 4.8vw, 2.7rem); letter-spacing:-0.015em; color:#f4f7fc;
  text-shadow:0 0 30px rgba(212,175,55,.25);
}

/* ===================== THEME STRIP (hero foot) ===================== */
.theme-strip{margin-top:34px; text-align:center;}
.theme-strip .ts-label{
  color:var(--gold-text); font-family:var(--font-disp); font-weight:700;
  letter-spacing:.24em; font-size:.8rem; text-transform:uppercase; margin:0 0 13px;
}
.theme-row{display:flex; gap:10px; justify-content:flex-start; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
@media (min-width: 780px){ .theme-row{justify-content:center; flex-wrap:wrap; overflow:visible;} }
.theme-card{
  flex:0 0 auto; scroll-snap-align:center; width:150px; text-align:left;
  border-radius:16px; border:1.6px solid var(--line); cursor:pointer;
  background:var(--surface); padding:0; overflow:hidden; color:var(--ink);
  font-family:'Inter',sans-serif; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-card:hover{transform:translateY(-3px);}
.theme-card .tc-img{display:block; height:62px; background-size:cover; background-position:center;}
.theme-card .tc-name{display:block; padding:8px 11px 10px; font-weight:700; font-size:.87rem;}
.theme-card .tc-name small{display:block; font-weight:500; color:var(--ink-soft); font-size:.72rem; margin-top:1px; line-height:1.35;}
.theme-card.active{border-color:var(--gold); box-shadow:0 0 0 1.6px var(--gold), 0 14px 30px -12px rgba(2,6,16,.7);}
.theme-strip .ts-note{color:#ccd6ea; font-size:.93rem; margin:6px auto 0; max-width:540px;}
.theme-strip .ts-note a{color:var(--gold-text); font-weight:700;}

/* ===================== THEMES PAGE — floating rail + designs ===================== */
.rail-stage{
  border:1px solid var(--gold-line); border-radius:24px; overflow:hidden; margin:8px 0 18px;
  box-shadow:var(--shadow); background:var(--surface);
}
.rail-stage .rs-scene{height:clamp(190px, 32vw, 300px); background-size:cover; background-position:center; position:relative; animation:qmpScenePan 48s ease-in-out infinite alternate;}
.rail-stage .rs-body{padding:20px 24px 24px;}
.rail-stage h3{margin:0 0 4px; font-size:1.55rem;}
.rail-stage p{margin:0 0 14px; color:var(--ink-soft);}
.rail-wrap{overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; padding:6px 0 14px;}
.rail{
  display:flex; gap:14px; width:max-content; padding:4px 6px;
}
.rail-card{
  width:250px; flex:0 0 auto; scroll-snap-align:start; text-align:left; cursor:pointer; color:var(--ink);
  border-radius:18px; overflow:hidden; border:1.6px solid var(--line); background:var(--surface); padding:0;
  font-family:'Inter',sans-serif; transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rail-card:hover{transform:translateY(-3px);}
.rail-card.active{border-color:var(--gold); box-shadow:0 0 0 1.6px var(--gold), 0 16px 34px -14px rgba(2,6,16,.7);}
.rail-card .rc-img{display:block; height:104px; background-size:cover; background-position:center;}
.rail-card .rc-tx{display:block; padding:11px 14px 13px;}
.rail-card .rc-tx strong{display:block; font-family:var(--font-disp); font-size:1.02rem;}
.rail-card .rc-tx small{display:block; color:var(--ink-soft); margin-top:2px; line-height:1.4;}
.world-block{margin:46px 0 6px;}
.world-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.world-head h3{margin:0; font-size:clamp(1.45rem, 3.4vw, 2rem);}
.world-head p{margin:4px 0 0; color:var(--ink-soft);}
.world-banner{
  height:clamp(150px, 26vw, 235px); border-radius:22px; background-size:cover; background-position:center;
  border:1px solid var(--gold-line); box-shadow:var(--shadow); margin-bottom:16px; position:relative; overflow:hidden;
  animation:qmpScenePan 58s ease-in-out infinite alternate;
}
.design-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
@media (max-width: 840px){ .design-row{grid-template-columns:1fr;} }
.design-card{
  border-radius:20px; overflow:hidden; text-align:left;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  box-shadow:0 10px 30px rgba(2,6,16,.35);
}
.design-scene{height:128px; background-size:cover; background-position:center; position:relative;}
.design-scene::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,13,26,0) 55%, rgba(6,13,26,.38));}
.design-body{padding:15px 17px 17px;}
.design-body h4{margin:0 0 4px; font-size:1.06rem; font-family:var(--font-disp);}
.design-body p{margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.55;}
.example-tag{
  display:inline-block; font-size:.67rem; font-weight:800; letter-spacing:.15em;
  color:#23180a; background:var(--gold); border-radius:999px; padding:3px 9px; margin-bottom:8px;
}
.design-actions{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap;}
.save-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; min-height:44px;
  border:1.6px solid var(--gold-line); background:rgba(212,175,55,.05); color:var(--ink);
  font-family:'Inter',sans-serif; font-weight:700; font-size:.86rem;
  padding:8px 15px; border-radius:999px; transition:all .3s ease;
}
.save-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;}
.save-btn.saved{border-color:var(--gold); color:var(--gold-text); background:rgba(212,175,55,.13);}
.save-btn.saved svg{fill:var(--gold); stroke:var(--gold-text);}
.build-btn{
  display:inline-flex; align-items:center; min-height:44px; text-decoration:none;
  color:#23180a; font-family:'Inter',sans-serif; font-weight:700; font-size:.86rem;
  padding:8px 15px; border-radius:999px; border:1.6px solid var(--gold);
  background:linear-gradient(145deg,#ffe9a8, var(--gold) 60%, #c39a2b);
}
.mock-ui{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:2;
  background:rgba(8,17,33,.82); border:1px solid rgba(212,175,55,.35); border-radius:11px;
  padding:8px 11px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(2,6,16,.5);
}
.mock-ui .mu-bar{display:flex; gap:4px; margin-bottom:6px;}
.mock-ui .mu-bar i{width:7px; height:7px; border-radius:50%; background:#54678a; display:block;}
.mock-ui .mu-bar i:first-child{background:var(--gold);}
.mock-ui .mu-line{height:6px; border-radius:3px; background:#43587a; margin:4px 0;}
.mock-ui .mu-line.short{width:55%;}
.mock-ui .mu-pill{display:inline-block; width:52px; height:13px; border-radius:7px; background:var(--gold); margin-top:3px;}
.aqua-note{
  display:flex; gap:12px; align-items:center; background:rgba(212,175,55,.07);
  border:1px solid var(--gold-line); border-radius:16px; padding:14px 18px; margin-top:14px;
  color:var(--ink); font-size:.96rem;
}

/* ===================== ACCOUNT PAGES ===================== */
.auth-wrap{max-width:500px; margin:0 auto; padding:8px 0 10px;}
.auth-card{
  background:var(--surface); border:1.6px solid var(--line); border-radius:24px;
  padding:clamp(24px, 5vw, 36px); box-shadow:var(--shadow);
}
.auth-logo{width:88px; height:88px; margin:0 auto 6px; display:block; border-radius:18px;}
.field{margin:15px 0; text-align:left;}
.field label{display:block; font-weight:600; font-size:.95rem; margin-bottom:6px;}
.field .hint{color:var(--ink-soft); font-size:.83rem; margin-top:5px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:74px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--gold-text); font-weight:700; cursor:pointer;
  font-size:.86rem; padding:9px 10px; font-family:'Inter',sans-serif; min-height:44px;
}
.form-err{
  display:none; background:rgba(229,120,120,.10); border:1.4px solid rgba(240,160,160,.45); color:#f2bcbc;
  border-radius:12px; padding:11px 14px; font-size:.94rem; margin:14px 0; text-align:left;
}
.form-err.show{display:block;}
.auth-card .btn{width:100%; margin-top:8px;}
.auth-alt{text-align:center; margin-top:18px; color:var(--ink-soft); font-size:.96rem;}
.auth-alt a{color:var(--gold-text); font-weight:700;}

/* Client Home */
.mw-hero{
  border-radius:24px; overflow:hidden; border:1px solid var(--gold-line);
  box-shadow:var(--shadow); margin:18px 0 8px; position:relative;
  min-height:225px; background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.mw-hero .mw-hero-in{width:100%; padding:20px 22px; color:var(--ink);
  background:linear-gradient(180deg, rgba(10,25,47,0) 0%, rgba(10,25,47,.85) 55%, rgba(10,25,47,.97) 100%);}
.mw-hero h3{margin:0; font-size:clamp(1.5rem, 4vw, 2.1rem);}
.mw-hero p{margin:4px 0 0; color:#c3cee2;}
.mw-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px;}
@media (max-width: 820px){ .mw-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 520px){ .mw-grid{grid-template-columns:1fr;} }
.mw-world{
  border-radius:16px; overflow:hidden; cursor:pointer; text-align:left; color:var(--ink);
  border:1.6px solid var(--line); background:var(--surface); padding:0; min-height:44px;
  font-family:'Inter',sans-serif; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mw-world:hover{transform:translateY(-3px);}
.mw-world .tc-img{display:block; height:74px; background-size:cover; background-position:center;}
.mw-world .tc-name{display:block; padding:9px 12px 11px; font-weight:700; font-size:.93rem;}
.mw-world.active{border-color:var(--gold); box-shadow:0 0 0 1.6px var(--gold), 0 14px 30px -12px rgba(2,6,16,.7);}
.mw-empty{color:var(--ink-soft); background:rgba(212,175,55,.04); border:1.6px dashed var(--gold-line); border-radius:16px; padding:18px;}
.proj-list{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
.proj-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 20px;
}
.proj-row .p-t{font-family:var(--font-disp); font-weight:700; font-size:1.12rem; margin-right:auto;}
.proj-status{font-weight:700; font-size:.9rem; color:var(--gold-text); white-space:nowrap;}
.proj-status.done{color:var(--gold-text);}
.proj-bar{flex:1 1 170px; height:9px; border-radius:5px; background:rgba(233,237,245,.12); overflow:hidden; min-width:140px;}
.proj-bar i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, #c39a2b, var(--gold)); transition:width 1s cubic-bezier(.22,.7,.3,1);}
.proj-check{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:var(--gold); color:#23180a; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1rem;
}
.demo-tag{font-size:.66rem; font-weight:800; letter-spacing:.14em; background:rgba(212,175,55,.16); color:var(--gold-text); border-radius:999px; padding:3px 8px; vertical-align:middle;}

/* ===================== FOOTER ===================== */
.site-footer{
  border-top:1px solid rgba(212,175,55,.4); margin-top:10px;
  padding:52px 0 34px; color:var(--ink-soft);
  /* The landscape's ground, not a flat block (V3) */
  background-color:rgba(3,6,14,.66);
  box-shadow:0 -1px 22px -8px rgba(212,175,55,.35);
  background-image:
    radial-gradient(1.2px 1.2px at 30px 26px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 170px 60px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 300px 20px, rgba(212,175,55,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 90px 110px, rgba(255,255,255,.35) 50%, transparent 52%);
  background-size:360px 150px;
}
.f-in{max-width:1120px; margin:0 auto; padding:0 22px;}
/* Scoped to the footer: the bare .f-grid selector also matches the
   booking form's field grid, and this later rule silently overwrote
   it with the footer's four columns — squeezing the form's fields
   until selects clipped and labels truncated (audit fix round). */
.site-footer .f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:28px;}
@media (max-width: 860px){ .site-footer .f-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 520px){ .site-footer .f-grid{grid-template-columns:1fr;} }
.f-logo{width:60px; height:60px; border-radius:14px; display:block; margin-bottom:12px;
  filter:drop-shadow(0 0 11px rgba(212,175,55,.5));}
.f-brand{font-family:var(--font-serif); font-weight:700; font-size:1.22rem; color:var(--ink);}
.f-brand .gold{color:var(--gold-text);}
.f-slogan{margin-top:6px; font-size:.96rem;}
.f-col-h{font-weight:800; letter-spacing:.16em; font-size:.74rem; color:var(--gold-text); margin-bottom:12px; font-family:'Inter',sans-serif;}
.f-links{list-style:none; margin:0; padding:0;}
.f-links li{margin:7px 0;}
.f-links a{color:var(--ink-soft); text-decoration:none; font-size:.97rem;}
.f-links a:hover{color:var(--gold-text); text-decoration:underline;}
.f-contact a{color:var(--ink); font-weight:700; text-decoration:none;}
.f-contact a:hover{color:var(--gold-text);}
.f-copy{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); font-size:.9rem; text-align:center;}

/* ===================== MOBILE FLOATING PILLS ===================== */
.mobile-pills{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:95;
  display:none; gap:9px; transition:opacity .4s ease, transform .4s ease;
}
.mobile-pills .v4btn{min-height:50px; padding:12px 22px; box-shadow:0 16px 36px -10px rgba(2,6,16,.65);}
.mobile-pills.hide{opacity:0; pointer-events:none; transform:translateY(14px);}
@media (max-width: 760px){ .mobile-pills{display:flex;} }
/* Short viewports: pills retire rather than crowd the hero emblem zone */
@media (max-height: 460px){ .mobile-pills{display:none !important;} }
/* Chat restack (mobile): the pills own the bottom-right corner
   (bottom 14px, ~50px tall). The chat fab/panel (styles live in each
   page's tail at lower specificity) lift clear above them — fab
   occupies 80–140px, panel starts at 152px — so site chrome can
   never stack on top of the Book / Sign Up pills again. */
@media (max-width: 760px){
  body .chat-fab{ bottom:calc(80px + env(safe-area-inset-bottom)); }
  body .chat-panel{ bottom:calc(152px + env(safe-area-inset-bottom)); }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1; transform:none;}
  .rail{animation:none;}
  .ambient i, .ambient.fx-rays{animation:none; display:none;}
  .spark{display:none;}
  .world-bg *{animation:none !important;}
  .wb-scene{transform:none;}
  body::before, body::after{animation:none;}
  .hero::before, .pl-sky, .pl-land, .pl-ridge, .portal-content, .portal-rim{transform:none;}
  .hero::after, .pl-stars{animation:none;}
  .world-banner[class*="scene-"], .rail-stage .rs-scene[class*="scene-"]{animation:none;}
  .abar-panel, .amenu, .svc, .svc-portal-in, .btn{transition:none;}
  .amenu .amenu-link{transition:none; transition-delay:0s;}
  .hero .logo-mark img, .auth-logo{animation:none; filter:drop-shadow(0 0 10px rgba(212,175,55,.35));}
  .abar-panel, .abar-link svg, .theme-card, .mw-world, .abar-logo, .proj-bar i, .v4mega-card{transition:none;}
  .btn:active{transform:none;}
  .svc:hover .svc-portal-in{transform:none;}
  .pkg-card{transition:none;}
  .pkg-card:hover{transform:none;}
}

/* ===================== GALLERY LIGHTBOX (index) ===================== */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; flex-direction:column; padding:20px;
  background:rgba(4,9,20,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lightbox.open{display:flex;}
.lightbox figure{margin:0; text-align:center; max-width:min(920px, 94vw);}
.lightbox img{max-width:100%; max-height:76vh; border-radius:18px; box-shadow:var(--shadow-lg);}
.lightbox figcaption{margin-top:12px; color:var(--ink-soft);}
.lb-btn{
  position:absolute; width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1.6px solid var(--gold); background:var(--surface); color:var(--gold-text);
  font-size:1.5rem; display:flex; align-items:center; justify-content:center;
}
.lb-btn:hover{background:rgba(212,175,55,.14);}
.lb-close{top:18px; right:18px;}
.lb-prev{left:14px; top:50%; transform:translateY(-50%);}
.lb-next{right:14px; top:50%; transform:translateY(-50%);}

/* Price-table micro classes (service plans) */
.price{font-weight:700; color:var(--ink);}
.amt{font-family:var(--font-disp); font-weight:700; font-size:1.25rem; color:var(--ink); white-space:nowrap;}
.badge{
  display:inline-block; background:var(--gold); color:#23180a; font-weight:800;
  font-size:.72rem; letter-spacing:.12em; padding:5px 12px; border-radius:999px; text-transform:uppercase;
}
.big{font-size:1.28em;}
.sm{font-size:.86em;}
.p-d{color:var(--ink-soft);}

/* Search bar sits under the Apple bar (v4.js relocates it there) */
.site-search{
  max-width:1120px; margin:10px auto 0; border-radius:16px;
  border:1px solid var(--gold-line); box-shadow:var(--shadow);
  background:var(--navy-deep);
}

/* ===================== SMALL-SCREEN LOGO SAFEGUARDS =====================
   Breakpoint math (360px): bar inner width = 360 - 2*12 padding = 336px —
   brand (28px logo + 8px gap + ~52px "Q.M.P" ≈ 88px) + burger 42px +
   10px bar gap ≈ 140px < 336px, so the bar logo can never reach the
   burger. Hero stack: the emblem is a normal-flow block (no transform),
   width min(168px, 52vw) = 168px at 360px, centered in portal-content
   (≥18px side padding) with the headline a fixed 24px below it — the
   two boxes can never intersect at any width. */
@media (max-width: 480px){
  .abar-in{gap:10px; padding:0 12px;}
  .abar-brand{gap:8px;}
  .abar-logo{width:28px; height:28px;}
  .abar-name{font-size:.95rem;}
  .hero .logo-mark{width:min(168px, 52vw);}
  .hero h1{margin-top:24px;}
}


/* =====================================================================
   GUARDIAN — in-page self-cure classes (applied ONLY by guardian.js
   when it detects a known failure shape on a visitor's device: an
   unsized icon swelling inside a heading, a label overflowing its
   pill, content escaping the viewport, a hover pop-up on touch, a
   broken image, fixed chrome parked over card text). None of these
   classes exist in any page's markup; a healthy page never wears
   one. Each cure is class-based and reversible — remove the class
   and the element is exactly as designed. Do not reuse these classes
   for styling; they are medicine, not wardrobe.
   ===================================================================== */

/* 1. Horizontal overflow: keep the escaping box inside the page.
      Width containment only — text is wrapped/clamped, never hidden. */
.guard-clamp{
  max-width:100% !important; min-width:0 !important;
  box-sizing:border-box !important;
}
/* …and only where nothing interactive lives inside, clip the spill. */
.guard-clampx{ overflow-x:clip !important; }

/* 2. Oversized icon inside a heading/button: back to icon size. */
.guard-icon{
  width:auto !important; height:auto !important;
  max-width:40px !important; max-height:40px !important;
  flex:0 0 auto !important;
}

/* 3. Button/link whose text is wider than its box: wrap, centered. */
.guard-fit{
  white-space:normal !important; text-overflow:clip !important;
  overflow:visible !important; height:auto !important;
  text-align:center !important; line-height:1.3 !important;
}

/* 4. Hover-only pop-up on a touch device: it simply never shows. */
.guard-nopeek{ display:none !important; }

/* 5. Broken image with no fallback left: no broken-image glyph. */
.guard-noimg{ display:none !important; }

/* 6. Fixed chrome (Book/Sign Up pills, chat button) parked on top of
      a heading or button while the visitor is NOT scrolling: fade
      back until the scroll resumes or 3 seconds pass. */
.guard-yield{
  opacity:.12 !important; pointer-events:none !important;
  transition:opacity .3s ease !important;
}

/* =====================================================================
   AUDIT FIX ROUND (Oct 23 critic audit) — mechanical fixes only.
   Appended last so these rules win the cascade at equal specificity.
   ===================================================================== */

/* Item 2 — booking form fits its panel at every width: the form's
   column can shrink, fields can shrink, controls never overflow. */
.book-grid{grid-template-columns:370px minmax(0, 1fr);}
.f-field{min-width:0;}
.f-field select{max-width:100%;}

/* Item 8 — service cards clip their portal window to the card shell:
   the scene can never paint past the border or its radius again,
   and the hover zoom (which scaled the window 4.5% past the card's
   edges) is replaced with a gentle brighten. Cards stay in plain
   block flow and hug their content. */
.svc{overflow:hidden;}
.svc:hover .svc-portal-in, .svc.tilt-on .svc-portal-in{transform:none; filter:brightness(1.07);}

/* Item 8 — gallery media fills its card: the button stretches with
   the grid row and the photo covers it, so no card is a thin strip
   over an empty void. The flyer keeps its full page visible
   (contain, never cropped) on the navy backdrop. */
.gal-item{display:flex; flex-direction:column;}
.gal-item button{
  flex:1 1 auto; display:block; width:100%; min-height:0;
  padding:0; border:0; background:none; cursor:zoom-in;
}
.gal-item img{width:100%; height:100%; object-fit:cover;}
.gal-item.gal-flyer img{object-fit:contain; background:#0a192f;}

/* Item 1 — gallery lightbox (built by v4.js when a gallery exists). */
.qmp-lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(3,6,14,.93);
}
.qmp-lightbox.open{display:flex;}
.lb-fig{margin:0; max-width:min(1080px, 94vw); text-align:center;}
.lb-img{
  max-width:100%; max-height:80vh; object-fit:contain; display:block;
  margin:0 auto; border-radius:14px; background:#0a192f;
  border:1.5px solid rgba(212,175,55,.65); box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.lb-cap{margin-top:14px; color:#f4f6fb; font-size:1rem; line-height:1.45;}
.lb-close{
  position:absolute; top:16px; right:16px; width:46px; height:46px;
  border-radius:50%; border:1.5px solid rgba(212,175,55,.8);
  background:rgba(7,12,26,.92); color:var(--gold); font-size:1.5rem;
  line-height:1; cursor:pointer;
}
body.lb-lock{overflow:hidden;}

/* Item 9 — video frames never crop their content: the frame follows
   each video's own aspect and any letterboxing lands on navy. */
.reel-wrap video, .svc-videos video{object-fit:contain; background:#070b18;}

/* Item 10 — example cards share one shell: scenes match, bodies
   stretch, and the action rows align across every card in a row. */
.design-card{display:flex; flex-direction:column;}
.design-body{display:flex; flex-direction:column; flex:1 1 auto;}
.design-actions{margin-top:auto; padding-top:13px;}

/* Item 7 — scene art sits on a navy placeholder while it loads, so a
   banner or thumbnail never renders as a broken empty frame. */
.world-banner, .design-scene, .rail-stage .rs-scene,
.rail-card .rc-img, .theme-card .tc-img{background-color:#070b18;}

/* ===================== PHASE 2 — service filter + before/after slider ===================== */
/* Filter chips (homepage #services). Real services only — no portfolio, no client claims. */
.svc-filter{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 12px;}
.svc-chip{background:var(--surface); border:1.6px solid var(--line); border-radius:999px; padding:9px 18px; color:var(--ink); font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600; cursor:pointer;}
.svc-chip.is-on{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-text);}
.svc-chip:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.svc-filter-note{text-align:center; color:var(--ink-soft); margin:0 0 20px;}
.svc.is-off{display:none;}

/* Before/after slider (homepage #compare). Styled-div mockups only — no
   screenshots, no client work; labelled as an illustrated example. */
.ba-wrap{position:relative; max-width:840px; margin:0 auto; aspect-ratio:16/10; border-radius:20px; overflow:hidden; border:1.5px solid rgba(212,175,55,.75); box-shadow:0 18px 42px rgba(0,0,0,.5);}
.ba-mock{position:absolute; inset:0; display:flex; flex-direction:column; padding:22px; gap:16px;}
.ba-plain{background:#e9ebef; z-index:1;}
.ba-qmp{background:linear-gradient(160deg, #0a192f, #071223 70%); z-index:2; clip-path:inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);}
.ba-bar{display:flex; align-items:center; gap:10px;}
.ba-dot{width:26px; height:26px; border-radius:50%; background:#b9bec7; flex:none;}
.ba-link{height:10px; width:64px; border-radius:6px; background:#c3c8d0;}
.ba-body{display:flex; flex-direction:column; gap:14px; flex:1; min-height:0;}
.ba-h{height:26px; width:72%; border-radius:8px; background:#9aa1ad;}
.ba-sub{height:12px; width:52%; border-radius:6px; background:#c3c8d0;}
.ba-btn{height:34px; width:150px; border-radius:999px; background:#9aa1ad;}
.ba-img{flex:1; border-radius:14px; background:#d3d7de;}
.ba-qbrand{color:var(--gold); font-family:var(--font-disp); font-weight:700; letter-spacing:.06em;}
.ba-qlink{height:10px; width:64px; border-radius:6px; background:rgba(212,175,55,.55);}
.ba-qhead{color:#fff; font-family:var(--font-disp); font-size:clamp(1.15rem, 4vw, 2rem); font-weight:700; margin:0; line-height:1.25;}
.ba-qhead span{color:var(--gold);}
.ba-qsub{color:#ccd6ea; margin:0;}
.ba-qbtn{display:inline-block; align-self:flex-start; background:var(--gold); color:#0a192f; font-weight:700; padding:10px 20px; border-radius:999px;}
.ba-qimg{flex:1; border-radius:14px; background:radial-gradient(80% 120% at 20% 0%, rgba(212,175,55,.35), transparent 60%), #101a30; border:1px solid rgba(212,175,55,.4);}
.ba-tag{position:absolute; top:12px; padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; z-index:2;}
.ba-tag-left{left:12px; background:rgba(0,0,0,.55); color:#fff;}
.ba-tag-right{right:12px; background:var(--gold); color:#0a192f;}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--ba-pos, 50%); width:3px; margin-left:-1.5px; background:var(--gold); z-index:3; pointer-events:none;}
.ba-handle span{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; background:var(--gold); color:#0a192f; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; box-shadow:0 4px 16px rgba(0,0,0,.5);}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:4; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none;}
.ba-wrap:has(.ba-range:focus-visible){outline:2px solid var(--gold); outline-offset:4px;}
.ba-note{text-align:center; color:var(--ink-soft); margin-top:14px;}
@media (prefers-reduced-motion: reduce){
  .ba-handle span{transition:none;}
}

/* ============ BATCH 3: FAQ accordions ============ */
.faq-sec{max-width:820px;margin:0 auto;}
.faq-sec details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 12px;background:rgba(255,255,255,.02);}
.faq-sec summary{cursor:pointer;font-weight:700;font-size:1.02rem;color:var(--ink);}
.faq-sec summary::marker{color:var(--gold);}
.faq-sec details p{margin:10px 0 0;color:var(--ink-soft);line-height:1.55;}
.faq-sec details p a{color:var(--gold-text);}
/* ============ BATCH 3: How it works timeline ============ */
.how-steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 20px;}
.how-step{border:1px solid var(--gold);background:transparent;color:var(--gold-text);border-radius:999px;padding:9px 18px;font-size:.95rem;font-weight:700;cursor:pointer;}
.how-step.is-on{background:var(--gold);color:var(--navy-deep);}
.how-detail{max-width:680px;margin:0 auto;text-align:center;border:1px solid var(--line);border-radius:16px;padding:24px;}
.how-detail-title{margin:0 0 8px;font-size:1.35rem;}
.how-detail-body{margin:0;color:var(--ink-soft);line-height:1.6;}
.how-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px;}
/* ============ BATCH 3: Service comparison chart ============ */
.cmp-scroll{overflow-x:auto;}
.cmp-table{width:100%;min-width:640px;border-collapse:collapse;text-align:left;}
.cmp-table th,.cmp-table td{border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:top;line-height:1.5;}
.cmp-table th{color:var(--gold-text);font-size:.92rem;letter-spacing:.03em;}
.cmp-table td{color:var(--ink-soft);}
.cmp-table td:first-child{color:var(--ink);font-weight:700;white-space:nowrap;}
.cmp-note{text-align:center;color:var(--ink-soft);margin-top:16px;line-height:1.6;}
.cmp-note a{color:var(--gold-text);}
/* ============ BATCH 3: Sticky help button ============ */
.help-fab{position:fixed;left:22px;bottom:22px;z-index:80;}
.help-fab summary{list-style:none;width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);}
.help-fab summary::-webkit-details-marker{display:none;}
.help-fab[open] .help-fab-panel{display:flex;}
.help-fab-panel{display:none;flex-direction:column;gap:8px;position:absolute;left:0;bottom:70px;background:#0e1a30;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 12px 40px rgba(0,0,.35);}
.help-fab-panel a{white-space:nowrap;color:var(--gold-text);font-weight:700;text-decoration:none;padding:6px 10px;border:1px solid var(--gold);border-radius:999px;text-align:center;}
@media (prefers-reduced-motion: reduce){
  .how-step,.help-fab summary{transition:none;}
}

/* ===================== CSS-PAINTED WORLDS (no image files) ===================== */
/* One shared scene class per world, painted on the full-page backdrop,
   the hero portal, rail cards, picker cards, banners and stage alike.
   Every scene stays dark-based (deep base + colored glows) so white
   and gold content stays readable on top. */
.scene-aurora-veil{
  background-color:#070313;
  background-image:
    radial-gradient(65% 45% at 20% 16%, rgba(45,212,191,.50), transparent 70%),
    radial-gradient(55% 42% at 80% 26%, rgba(167,139,250,.55), transparent 70%),
    radial-gradient(85% 55% at 50% 108%, rgba(76,29,149,.60), transparent 70%),
    linear-gradient(180deg, #0d0724 0%, #070313 55%, #04020c 100%);
}
.scene-ultraviolet{
  background-color:#0a0618;
  background-image:
    radial-gradient(60% 45% at 25% 20%, rgba(139,92,246,.55), transparent 70%),
    radial-gradient(55% 40% at 78% 30%, rgba(59,130,246,.50), transparent 70%),
    radial-gradient(80% 50% at 50% 105%, rgba(49,46,129,.65), transparent 70%),
    linear-gradient(180deg, #120a2e 0%, #0a0618 55%, #05030f 100%);
}
.scene-cyber-grid{
  background-color:#05030a;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    radial-gradient(50% 38% at 22% 22%, rgba(217,70,239,.45), transparent 70%),
    radial-gradient(50% 38% at 80% 70%, rgba(34,211,238,.40), transparent 70%),
    linear-gradient(180deg, #0a0518 0%, #05030a 60%, #020108 100%);
}
.scene-transformative-teal{
  background-color:#04201e;
  background-image:
    radial-gradient(65% 45% at 30% 20%, rgba(45,212,191,.45), transparent 70%),
    radial-gradient(60% 45% at 75% 65%, rgba(20,184,166,.40), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(6,95,85,.60), transparent 70%),
    linear-gradient(180deg, #083330 0%, #04201e 55%, #02100f 100%);
}
.scene-mocha-dusk{
  background-color:#17100a;
  background-image:
    radial-gradient(60% 42% at 28% 24%, rgba(217,160,102,.42), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(146,98,55,.45), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(69,39,16,.60), transparent 70%),
    linear-gradient(180deg, #241708 0%, #17100a 55%, #0a0704 100%);
}
.scene-terracotta-sun{
  background-color:#1c0e06;
  background-image:
    radial-gradient(55% 40% at 50% 78%, rgba(234,88,12,.55), transparent 70%),
    radial-gradient(45% 35% at 80% 30%, rgba(251,146,60,.35), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(124,45,18,.60), transparent 70%),
    linear-gradient(180deg, #2a1408 0%, #1c0e06 55%, #0d0703 100%);
}
.scene-sandstone{
  background-color:#14100b;
  background-image:
    radial-gradient(60% 42% at 30% 26%, rgba(214,186,140,.32), transparent 70%),
    radial-gradient(55% 40% at 74% 60%, rgba(180,150,105,.30), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(87,72,48,.55), transparent 70%),
    linear-gradient(180deg, #1e1810 0%, #14100b 55%, #0a0805 100%);
}
.scene-olive-grove{
  background-color:#0d120a;
  background-image:
    radial-gradient(60% 42% at 28% 24%, rgba(132,163,80,.40), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(101,140,90,.38), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(38,58,26,.60), transparent 70%),
    linear-gradient(180deg, #16220f 0%, #0d120a 55%, #060a04 100%);
}
.scene-lavender-fields{
  background-color:#120b1c;
  background-image:
    radial-gradient(60% 42% at 30% 22%, rgba(196,141,255,.45), transparent 70%),
    radial-gradient(55% 40% at 74% 60%, rgba(167,139,250,.40), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(76,29,149,.60), transparent 70%),
    linear-gradient(180deg, #1e1030 0%, #120b1c 55%, #080512 100%);
}
.scene-desert-rose{
  background-color:#1a0d12;
  background-image:
    radial-gradient(55% 40% at 32% 26%, rgba(251,113,133,.42), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(214,186,140,.30), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(88,28,44,.60), transparent 70%),
    linear-gradient(180deg, #26101c 0%, #1a0d12 55%, #0d060a 100%);
}
.scene-coral-sunset{
  background-color:#1c0d0b;
  background-image:
    radial-gradient(65% 40% at 50% 82%, rgba(255,127,80,.50), transparent 70%),
    radial-gradient(45% 35% at 82% 30%, rgba(251,191,150,.30), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(127,29,29,.55), transparent 70%),
    linear-gradient(180deg, #2a1210 0%, #1c0d0b 55%, #0e0605 100%);
}
.scene-retro-sunset{
  background-color:#120806;
  background-image:
    linear-gradient(180deg, transparent 0 52%, rgba(249,115,22,.38) 52% 55%, transparent 55% 59%, rgba(236,72,153,.30) 59% 62%, transparent 62% 66%, rgba(251,191,36,.28) 66% 69%, transparent 69%),
    radial-gradient(60% 40% at 50% 88%, rgba(234,88,12,.50), transparent 70%),
    linear-gradient(180deg, #1e0d07 0%, #120806 55%, #080302 100%);
}
.scene-vaporwave{
  background-color:#0d0518;
  background-image:
    radial-gradient(55% 40% at 26% 24%, rgba(244,114,182,.50), transparent 70%),
    radial-gradient(55% 40% at 78% 66%, rgba(34,211,238,.42), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(88,28,135,.60), transparent 70%),
    linear-gradient(180deg, #180a2e 0%, #0d0518 55%, #060310 100%);
}
.scene-cotton-candy{
  background-color:#120a1a;
  background-image:
    radial-gradient(55% 40% at 28% 26%, rgba(249,168,212,.38), transparent 70%),
    radial-gradient(55% 40% at 74% 60%, rgba(147,197,253,.36), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(134,25,143,.45), transparent 70%),
    linear-gradient(180deg, #1e0f2a 0%, #120a1a 55%, #090512 100%);
}
.scene-mint-horizon{
  background-color:#071310;
  background-image:
    radial-gradient(60% 42% at 30% 24%, rgba(110,231,183,.40), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(52,211,153,.36), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(6,78,59,.60), transparent 70%),
    linear-gradient(180deg, #0c201a 0%, #071310 55%, #030a08 100%);
}
.scene-autumn-ember{
  background-color:#180d05;
  background-image:
    radial-gradient(55% 40% at 30% 28%, rgba(245,158,11,.45), transparent 70%),
    radial-gradient(55% 40% at 74% 62%, rgba(194,65,12,.42), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(120,53,15,.60), transparent 70%),
    linear-gradient(180deg, #241304 0%, #180d05 55%, #0c0702 100%);
}
.scene-midnight-ember{
  background-color:#050403;
  background-image:
    radial-gradient(45% 32% at 50% 85%, rgba(249,115,22,.42), transparent 70%),
    radial-gradient(35% 26% at 78% 30%, rgba(234,88,12,.22), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(69,26,3,.55), transparent 70%),
    linear-gradient(180deg, #0d0705 0%, #050403 60%, #020101 100%);
}
.scene-nebula-dream{
  background-color:#0a0518;
  background-image:
    radial-gradient(50% 38% at 26% 26%, rgba(168,85,247,.50), transparent 70%),
    radial-gradient(45% 36% at 74% 58%, rgba(236,72,153,.42), transparent 70%),
    radial-gradient(40% 32% at 60% 18%, rgba(99,102,241,.35), transparent 70%),
    linear-gradient(180deg, #140a2e 0%, #0a0518 55%, #050310 100%);
}
.scene-lunar-glow{
  background-color:#0c0e13;
  background-image:
    radial-gradient(45% 38% at 72% 20%, rgba(226,232,240,.38), transparent 70%),
    radial-gradient(60% 42% at 30% 70%, rgba(148,163,184,.22), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(30,41,59,.60), transparent 70%),
    linear-gradient(180deg, #141a24 0%, #0c0e13 55%, #06070a 100%);
}
.scene-solar-flare{
  background-color:#170c03;
  background-image:
    radial-gradient(50% 42% at 50% 45%, rgba(251,191,36,.50), transparent 70%),
    radial-gradient(65% 45% at 50% 50%, rgba(249,115,22,.35), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(154,52,18,.55), transparent 70%),
    linear-gradient(180deg, #241303 0%, #170c03 55%, #0c0601 100%);
}
.scene-deep-kelp{
  background-color:#04120f;
  background-image:
    radial-gradient(60% 42% at 28% 26%, rgba(45,212,191,.38), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(16,185,129,.34), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(4,47,46,.65), transparent 70%),
    linear-gradient(180deg, #0a201b 0%, #04120f 55%, #020a08 100%);
}
.scene-blush-meadow{
  background-color:#150a12;
  background-image:
    radial-gradient(55% 40% at 30% 26%, rgba(251,207,232,.36), transparent 70%),
    radial-gradient(55% 40% at 74% 60%, rgba(244,114,182,.32), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(80,7,36,.55), transparent 70%),
    linear-gradient(180deg, #220f1e 0%, #150a12 55%, #0b0509 100%);
}
.scene-obsidian{
  background-color:#050507;
  background-image:
    radial-gradient(60% 42% at 30% 22%, rgba(148,163,184,.16), transparent 70%),
    radial-gradient(50% 36% at 78% 68%, rgba(100,116,139,.14), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(15,23,42,.60), transparent 70%),
    linear-gradient(180deg, #0b0d12 0%, #050507 55%, #020203 100%);
}
.scene-lagoon-glass{
  background-color:#04141a;
  background-image:
    radial-gradient(60% 42% at 28% 26%, rgba(103,232,249,.40), transparent 70%),
    radial-gradient(55% 40% at 76% 62%, rgba(45,212,191,.36), transparent 70%),
    radial-gradient(80% 50% at 50% 108%, rgba(8,51,68,.65), transparent 70%),
    linear-gradient(180deg, #0a2430 0%, #04141a 55%, #02090d 100%);
}

/* Preview-only 35% referral / blueprint edits: differentiators, deposit step, services glance */
.pkg-diff{color:#d4af37;font-size:.95rem;margin:2px 0 10px}
.deposit-step{border:1.6px solid #d4af37;border-radius:18px;padding:22px;margin:24px 0;background:rgba(10,25,47,.72)}
.deposit-step h3{color:#d4af37;margin-top:0}
.deposit-step .deposit-note{font-size:.9rem;opacity:.85}
.other-services-list{max-width:760px;margin:0 auto 18px;text-align:left}
.theme-strip-hero{text-align:center}