/* ============================================================================
   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:nowrap;
  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%;
  transform:translate3d(0, 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-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;
  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{
  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{
  position:absolute; top:-18px; right:12px; z-index:30; 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 24px 50px rgba(0,0,0,.6), 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);
}
@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:-12px; 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; gap:6px; margin:20px 0 0; margin-left:0;
  min-height:44px; padding:10px 22px; border-radius:999px; text-decoration:none;
  border:1.5px solid rgba(212,175,55,.8); color:var(--gold);
  background:rgba(212,175,55,.07); font-weight:700; font-size:1rem; white-space:nowrap;
  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;}

/* 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:hidden; padding:6px 0 14px;}
.rail{
  display:flex; gap:14px; width:max-content; padding:4px 6px;
  animation:qmpRail 46s linear infinite;
}
.rail-wrap:hover .rail, .rail-wrap.paused .rail{animation-play-state:paused;}
@keyframes qmpRail{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.rail-card{
  width:250px; flex:0 0 auto; 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;}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:28px;}
@media (max-width: 860px){ .f-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 520px){ .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;}
  .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;}
}