/* ============================================================
   ELEV8DEPICTIONS v3 · "One brand, one world"
   Deep-space design system. Palette sampled from the real
   Facebook cover (social-assets/facebook-cover-v3.jpg).
   Hex tokens on purpose: oklch() breaks Chrome <=110 white-page
   (see house memory), and prospects run old machines.
   ============================================================ */

:root{
  /* space ramp (dark -> lit) */
  --space-0:#07030f;
  --space-1:#0d061e;
  --space-2:#110823;
  --indigo:#151225;
  --violet-1:#230e49;
  --violet-2:#2d115b;
  --violet-3:#401e7c;
  --violet-glow:#6b46c9;

  /* light */
  --star:#ece9fc;            /* headline lavender-white */
  --star-dim:#c3bade;        /* secondary text, 7.8:1 on space-1 */
  --star-faint:#9d92c2;      /* captions/meta, 4.9:1 on space-1 */

  /* signals */
  --ember:#ff9818;           /* CTA orange, sampled from cover */
  --amber:#f0a832;           /* brand amber (Stripe equity) */
  --ember-ink:#1c0e00;       /* text on ember */
  --spark:#23d6ec;           /* cyan, rare: live pulses + focus */

  /* surfaces */
  --panel:rgba(38,22,74,.38);        /* violet panel on space */
  --panel-solid:#1a0f38;
  --line:rgba(176,150,255,.16);
  --line-bright:rgba(196,170,255,.34);

  /* type */
  --font-display:"Bricolage Grotesque",system-ui,Segoe UI,sans-serif;
  --font-voice:"Source Serif 4",Georgia,serif;   /* italic accent only */
  /* type: designed at 390px first, enhanced upward */
  --fs-hero:clamp(2.7rem,11vw,5.2rem);
  --fs-h2:clamp(2.05rem,8vw,3rem);
  --fs-h3:clamp(1.35rem,5vw,1.7rem);
  --fs-lead:clamp(1.1rem,4.4vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:.95rem;

  /* rhythm: tighter on phones, generous on desktop */
  --sect:clamp(4rem,13vw,9rem);
  --sect-tight:clamp(2.75rem,8vw,5.5rem);
  --gutter:clamp(1.15rem,4.5vw,2.5rem);
  --wrap:74rem;
  --wrap-narrow:46rem;

  /* motion */
  --ease-out:cubic-bezier(.19,1,.22,1);          /* expo-out */
  --ease-swift:cubic-bezier(.22,.9,.24,1);
  --dur:.7s;

  /* z scale (semantic only) */
  --z-space:-1;
  --z-raise:2;
  --z-nav:80;
  --z-scrim:70;
  --z-modal:90;
  --z-toast:95;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  background:var(--space-1);
  color:var(--star-dim);
  font-family:var(--font-display);
  font-weight:380;
  font-size:var(--fs-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
a{color:var(--star);text-decoration:none}
p a,li a:not([class]){color:var(--star);text-decoration:underline;text-decoration-color:rgba(255,152,24,.55);text-underline-offset:3px}
p a:hover,li a:not([class]):hover{text-decoration-color:var(--ember)}
::selection{background:var(--violet-3);color:var(--star)}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--star);
  line-height:1.06;
  letter-spacing:-.022em;
  font-weight:640;
  text-wrap:balance;
  font-variation-settings:"opsz" 48;
}
h1{font-size:var(--fs-hero);font-weight:700}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.22}
.voice{
  font-family:var(--font-voice);
  font-style:italic;
  font-weight:480;
  color:var(--amber);
  letter-spacing:0;
  line-height:1.35;
}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--star-dim);max-width:62ch;text-wrap:pretty}
.small{font-size:var(--fs-small);color:var(--star-faint)}
strong{color:var(--star);font-weight:620}

/* ---------- layout shells ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.wrap-narrow{width:min(var(--wrap-narrow),100% - 2*var(--gutter));margin-inline:auto}
section{position:relative;padding-block:var(--sect)}
.sect-tight{padding-block:var(--sect-tight)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;
  font-weight:640;font-size:1.02rem;letter-spacing:.005em;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s ease;
  will-change:transform;
}
.btn-ember{
  background:var(--ember);color:var(--ember-ink);
  box-shadow:0 0 0 0 rgba(255,152,24,0), 0 10px 34px -10px rgba(255,152,24,.55);
}
.btn-ember:hover{transform:translateY(-2px);box-shadow:0 0 26px 2px rgba(255,152,24,.28), 0 16px 42px -10px rgba(255,152,24,.6)}
.btn-ghost{
  color:var(--star);border:1px solid var(--line-bright);
  background:rgba(30,16,60,.35);
}
.btn-ghost:hover{border-color:var(--star-faint);transform:translateY(-2px);background:rgba(44,24,88,.5)}
.btn:active{transform:translateY(0) scale(.985)}
@media (max-width:30rem){
  .cta-stack .btn{width:100%;justify-content:center}
}
.cta-stack{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* WhatsApp floating action, phones only, never over the footer close */
.wa-fab{position:fixed;right:.8rem;bottom:.8rem;z-index:var(--z-toast);width:50px;height:50px;border-radius:50%;
  display:none;align-items:center;justify-content:center;background:var(--ember);color:var(--ember-ink);
  box-shadow:0 8px 24px -6px rgba(255,152,24,.5);transition:transform .3s var(--ease-out);opacity:.94}
.wa-fab:hover{transform:translateY(-2px)}
.wa-fab svg{width:25px;height:25px}
@media (max-width:55rem){.wa-fab{display:flex}}
body.menu-open .wa-fab{display:none}

/* subpages: the section's headline becomes the page h1 */
.as-page-title{font-size:clamp(2.35rem,9.2vw,3.7rem)}
.page-first{padding-top:calc(var(--sect-tight) + 4.2rem)}

/* page hero for subpages: short arrival, mobile-first */
.page-hero{padding-block:calc(var(--sect-tight) + 3.4rem) var(--sect-tight);position:relative}
.page-hero h1{font-size:clamp(2.35rem,9.4vw,4rem);margin-bottom:.7rem}
.page-hero .lead{max-width:34ch}
@media (min-width:47.5rem){.page-hero .lead{max-width:56ch}}

/* closing CTA strip on subpages */
.close-strip{border-top:1px solid var(--line);text-align:center}
.close-strip h2{font-size:clamp(1.7rem,7vw,2.4rem);margin-bottom:.9rem}
.close-strip .voice{display:block;margin-bottom:1.6rem;font-size:clamp(1.05rem,4.2vw,1.25rem)}
.close-strip .cta-stack{justify-content:center}
.close-strip .small{margin-top:1rem}

/* ---------- review stars ----------
   Shared by the /reviews wall, the homepage strip and any card
   js/reviews-live.js appends after the daily refresh. These live in the design
   system rather than in a section <style> block on purpose: when they sat in
   the /reviews block the homepage strip loaded the markup without the rules and
   rendered five black stars on a black panel. */
.rev-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rev-stars{display:inline-flex;line-height:0}
.rev-stars svg{display:block}
.rev-star-on{fill:var(--amber)}
.rev-star-off{fill:none;stroke:var(--line-bright);stroke-width:1.2}

/* ---------- panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
}

/* ---------- space canvases ---------- */
.space-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.space-layer canvas{position:absolute;inset:0;width:100%;height:100%}
.above-space{position:relative;z-index:var(--z-raise)}

/* ---------- reveals (content visible by default; JS opts in) ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
}

/* line-mask headline reveal */
.linewrap{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.linewrap>span{display:block;transform:none}
.js .linewrap>span{transform:translateY(110%);transition:transform 1s var(--ease-out)}
.js .on .linewrap>span{transform:none}
.js .on .linewrap:nth-child(2)>span{transition-delay:.09s}
.js .on .linewrap:nth-child(3)>span{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.js .linewrap>span{transform:none;transition:none}}

/* ---------- skip link ---------- */
.skip{position:absolute;left:1rem;top:-3.5rem;z-index:var(--z-toast);background:var(--ember);color:var(--ember-ink);padding:.6rem 1.1rem;border-radius:8px;font-weight:640;transition:top .2s ease}
.skip:focus{top:1rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}