/* ═══════════════════════════════════════════════════════════════════════
   AstroGanesh — proposed homepage (proof of concept)
   Palette + type lifted verbatim from the live AstroShop theme tokens in
   apps/web/src/app/globals.css so the two surfaces read as one brand.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cream:#f7f2e8;
  --paper:#fffdf8;
  --ink:#2b2620;
  --ink-2:#857c6c;
  --ink-3:#9a917f;
  --olive:#7c8a66;
  --olive-deep:#5e6c49;
  --olive-mist:#eef0e6;
  --gold:#b8902f;
  --gold-lit:#e7b730;
  --gold-soft:#f0d99a;
  --maroon:#823232;
  --line:#ece2cf;
  --line-strong:#cdd6bb;
  --night:#1c160e;
  --night-2:#2b2620;
  --shadow-card:0 18px 36px rgba(80,60,30,.12);
  --shadow-lift:0 26px 52px rgba(80,60,30,.18);
  --rail:1240px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --util:"Jost","DM Sans",-apple-system,"Segoe UI",Arial,sans-serif;
}
/* The shop commits to a single cream world; keep it in every host theme
   rather than inverting into a look the brand does not have. */
:root:not([data-theme="light"]),:root[data-theme="dark"]{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Something in the WordPress stack ships
   [type="button"],[type="submit"],button{color:#c36;white-space:nowrap}.
   An attribute selector outranks a bare element one, so it beat this reset
   whatever the load order — turning every .svc card title pink and stopping
   the card descriptions from wrapping. Matching its specificity fixes both. */
button,[type="button"],[type="submit"]{font:inherit;color:inherit;cursor:pointer;white-space:normal}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:6px}
::selection{background:var(--olive);color:#fff}
.rail{max-width:var(--rail);margin-inline:auto;padding-inline:24px}
.hide{display:none!important}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}

/* ── shared type roles ────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--util);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--olive);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow .sp{color:var(--gold)}
.h-sec{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.01em}
.h-sub{font-size:14.5px;color:var(--ink-2);max-width:56ch}
.sec{padding:66px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:30px}
.sec-head .h-sub{text-align:right;max-width:34ch}
@media(max-width:720px){.sec{padding:48px 0}.sec-head .h-sub{text-align:left}}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;border:1px solid transparent;padding:0 24px;height:46px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s,color .18s,border-color .18s,transform .18s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--olive);color:#fff;box-shadow:0 8px 22px rgba(124,138,102,.28)}
.btn-primary:hover{background:var(--olive-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-onnight{border-color:rgba(255,253,248,.55);color:#fffdf8;background:transparent}
.btn-onnight:hover{background:#fffdf8;color:var(--night)}
.btn-sm{height:38px;padding:0 18px;font-size:11.5px}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#a37f24}

/* ── announcement + header ────────────────────────────────────────────── */
#top-shell{position:fixed;inset:0 0 auto 0;z-index:70}
.offers{
  background:var(--olive-deep);color:var(--olive-mist);height:32px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding-inline:16px;text-align:center;
}
.offers span{transition:opacity .38s,transform .38s}
.offers .fade{opacity:0;transform:translateY(8px)}
.offers b{color:var(--gold-soft);font-weight:600}
.hdr{
  background:rgba(247,242,232,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(236,226,207,.7);box-shadow:0 4px 20px rgba(43,38,32,.05);
}
.hdr-in{max-width:1440px;margin-inline:auto;padding-inline:24px;height:70px;display:flex;align-items:center;gap:26px}
.mark{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1}
.mark i{font-style:normal;color:var(--gold)}
.mark-div{width:1px;height:21px;background:#d8cdb6}
.mark-sub{font-family:var(--util);font-size:12.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);padding-top:3px}
nav.main{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:14px;font-weight:500}
nav.main a{position:relative;padding:6px 0;color:var(--ink);transition:color .18s}
nav.main a:hover{color:var(--olive)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .22s}
nav.main a.on{color:var(--olive)}
nav.main a.on::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:10px;margin-left:6px}
.burger{display:none;background:none;border:0;padding:6px;color:var(--ink)}
@media(max-width:1040px){nav.main{display:none}.burger{display:block}.hdr-cta{margin-left:auto}}
@media(max-width:520px){.hdr-cta .btn{padding:0 15px;font-size:11px}.mark-div,.mark-sub{display:none}}
.spacer{height:102px}

/* mobile drawer */
.mnav{position:fixed;inset:0;z-index:90;background:rgba(28,22,14,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s}
.mnav.open{opacity:1;pointer-events:auto}
.mnav-panel{position:absolute;inset:0 auto 0 0;width:min(300px,84vw);background:var(--paper);padding:26px 24px;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:20px}
.mnav.open .mnav-panel{transform:none}
.mnav-panel a{font-family:var(--serif);font-size:21px;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-wrap{padding:14px 0 0}
.hero{
  position:relative;border-radius:24px;overflow:hidden;background:var(--night);
  min-height:520px;display:flex;align-items:center;isolation:isolate;
}
#hero-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 74% at 16% 46%,rgba(28,22,14,.86) 0%,rgba(28,22,14,.42) 46%,rgba(28,22,14,0) 74%),
    radial-gradient(46% 62% at 88% 8%,rgba(184,144,47,.20),transparent 66%),
    radial-gradient(70% 80% at 62% 118%,rgba(124,138,102,.26),transparent 68%);
}
.hero-in{position:relative;z-index:2;padding:56px 8vw 56px 6vw;max-width:760px;color:#fffdf8}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(38px,6.1vw,68px);line-height:1.04;
  letter-spacing:-.015em;margin:16px 0 0;color:#fffdf8;
}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lede{margin-top:18px;font-size:16.5px;line-height:1.65;color:#e6ddcb;max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,253,248,.16)}
.hero-trust div{display:flex;flex-direction:column;gap:2px}
.hero-trust b{font-family:var(--serif);font-size:25px;font-weight:600;color:#fffdf8;line-height:1}
.hero-trust span{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b9ae97}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(240,217,154,.45);
  border-radius:999px;padding:6px 15px 6px 11px;font-family:var(--util);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);background:rgba(240,217,154,.08);
}
.pulse{width:7px;height:7px;border-radius:50%;background:#8fd18a;box-shadow:0 0 0 0 rgba(143,209,138,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(143,209,138,0)}100%{box-shadow:0 0 0 0 rgba(143,209,138,0)}}
@media(max-width:760px){.hero{min-height:0}.hero-in{padding:44px 26px 46px}.hero-trust{gap:18px}}

/* ── ₹399 offer band ──────────────────────────────────────────────────── */
.offer-band{
  margin-top:16px;border:1px solid var(--line);border-radius:20px;background:var(--paper);
  display:flex;align-items:center;gap:28px;padding:22px 28px;flex-wrap:wrap;
  background-image:radial-gradient(120% 160% at 100% 0%,rgba(240,217,154,.36),transparent 58%);
}
.offer-price{font-family:var(--serif);font-size:52px;font-weight:600;line-height:.9;letter-spacing:-.02em}
.offer-price sup{font-size:22px;top:-.7em;color:var(--ink-2)}
.offer-copy{flex:1;min-width:220px}
.offer-copy b{font-size:16px}
.offer-strike{color:var(--ink-3);text-decoration:line-through;margin-left:8px}
.offer-tag{display:inline-block;background:var(--maroon);color:#fff;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 8px;margin-left:8px}

/* ── generic card ─────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px}

/* ── services ─────────────────────────────────────────────────────────── */
.svc-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);
  border-radius:999px;padding:7px 16px;font-size:13px;transition:all .16s;
}
.chip:hover{border-color:var(--olive);color:var(--ink)}
.chip.on{background:var(--olive);border-color:var(--olive);color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.svc{
  position:relative;text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:9px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.svc:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.svc-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--olive-mist);color:var(--olive-deep)}
.svc-h{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15}
.svc-d{display:block;font-size:13px;color:var(--ink-2);line-height:1.5}
.svc-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.svc-price{font-size:13.5px;font-weight:600}
.svc-price small{color:var(--ink-3);font-weight:400}
.svc-go{font-family:var(--util);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);display:inline-flex;align-items:center;gap:6px}
.svc:hover .svc-go svg{transform:translateX(3px)}
.svc-go svg{transition:transform .2s}

/* ── astrologers ──────────────────────────────────────────────────────── */
.astro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.astro{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s;
}
.astro:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.astro-media{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,#efe6d2,#e2d8c0);overflow:hidden}
.astro-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.astro:hover .astro-media img{transform:scale(1.045)}
.astro-media::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(28,22,14,.62),transparent)}
.avail{
  position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,253,248,.94);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600;letter-spacing:.02em;
}
.avail.later{color:var(--ink-2)}
.avail .dot{width:6px;height:6px;border-radius:50%;background:#4c9a45}
.avail.later .dot{background:var(--gold)}
.rate-pill{
  position:absolute;top:12px;right:12px;z-index:3;background:rgba(255,253,248,.94);border-radius:999px;
  padding:5px 10px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px;
}
.rate-pill i{font-style:normal;color:var(--gold-lit)}
.hear{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:3;height:38px;border-radius:999px;border:1px solid rgba(255,253,248,.5);
  background:rgba(28,22,14,.42);backdrop-filter:blur(6px);color:#fffdf8;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--util);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s;
}
.hear:hover{background:rgba(28,22,14,.68)}
.astro-body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.astro-name{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.12}
.astro-title{font-size:12.5px;color:var(--ink-2);margin-top:-4px}
.meta-row{display:flex;flex-wrap:wrap;gap:6px}
.ag-tag{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--ink-2)}
.ag-tag.spec{background:var(--olive-mist);border-color:#dfe4d3;color:var(--olive-deep)}
.kv{display:flex;gap:8px;font-size:12.5px;color:var(--ink-2)}
.kv b{color:var(--ink);font-weight:600}
.astro-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.astro-price{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1}
.astro-price small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--ink-2)}
.astro.tbc{border-style:dashed;border-color:var(--line-strong);background:rgba(255,253,248,.5)}
.tbc-media{aspect-ratio:1/1;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#f3ecdd 0 10px,#efe7d5 10px 20px);color:var(--ink-3);text-align:center;padding:24px;gap:10px}
.tbc-list{font-size:12.5px;color:var(--ink-2);display:grid;gap:5px;padding:0;margin:0;list-style:none}
.tbc-list li{display:flex;gap:8px;align-items:center}
.tbc-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);flex:none}

/* ── how it works ─────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper)}
.step{padding:24px 22px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:relative}
.step:last-child{border-right:0}
.step-n{font-family:var(--util);font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.step h3{font-family:var(--serif);font-size:20px;font-weight:600}
.step p{font-size:13px;color:var(--ink-2);line-height:1.55}
@media(max-width:900px){.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}

/* ── deliverables + report preview ────────────────────────────────────── */
.deliver{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:920px){.deliver{grid-template-columns:1fr;gap:26px}}
.deliver-list{display:grid;gap:2px;margin-top:22px}
.dl{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl:last-child{border-bottom:0}
.dl-ico{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--olive-mist);color:var(--olive-deep)}
.dl b{display:block;font-size:14.5px;margin-bottom:2px}
.dl span{font-size:13px;color:var(--ink-2)}
.reader{background:var(--night-2);border-radius:20px;padding:18px;box-shadow:var(--shadow-lift)}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:#cfc5ae;font-size:12px}
.reader-bar .fname{font-family:var(--util);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;color:#9e947d}
.ag-page{background:#fffdf8;border-radius:10px;aspect-ratio:1/1.32;padding:26px 24px;position:relative;overflow:hidden;display:none;flex-direction:column}
.ag-page.on{display:flex;animation:pageIn .34s cubic-bezier(.16,1,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-kicker{font-family:var(--util);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.ag-page h4{font-family:var(--serif);font-size:26px;font-weight:600;margin:6px 0 2px;line-height:1.1}
.ag-page .thin{font-size:11.5px;color:var(--ink-2)}
.page-rule{height:1px;background:var(--line);margin:14px 0}
.mini-tbl{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.mini-tbl th{text-align:left;font-family:var(--util);font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:5px 4px;border-bottom:1px solid var(--line)}
.mini-tbl td{padding:5px 4px;border-bottom:1px solid #f4ecdd}
.mini-tbl td:first-child{font-weight:600}
.dasha-row{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:7px}
.dasha-row .nm{width:66px;flex:none;font-weight:600}
.dasha-bar{flex:1;height:8px;border-radius:99px;background:var(--olive-mist);overflow:hidden}
.dasha-bar i{display:block;height:100%;background:var(--olive);border-radius:99px}
.dasha-row .yr{width:82px;flex:none;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rem{display:flex;gap:9px;font-size:11.5px;padding:7px 0;border-bottom:1px solid #f4ecdd;line-height:1.45}
.rem b{color:var(--olive-deep)}
.reader-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.rdots{display:flex;gap:6px}
.rdots button{width:7px;height:7px;border-radius:50%;border:0;background:#5a5140;padding:0}
.rdots button.on{background:var(--gold-lit);width:20px;border-radius:99px}
.rbtn{width:34px;height:34px;border-radius:50%;border:1px solid #4a4232;background:transparent;color:#e6ddcb;display:grid;place-items:center}
.rbtn:hover{background:#3a3327}

/* ── consultation video mock ──────────────────────────────────────────── */
.vidbox{position:relative;border-radius:20px;overflow:hidden;background:var(--night);aspect-ratio:16/9;display:grid;place-items:center}
.vid-poster{position:absolute;inset:0;display:grid;place-items:center;gap:14px;text-align:center;padding:24px;
  background:radial-gradient(70% 90% at 50% 0%,rgba(124,138,102,.3),transparent 70%),var(--night);z-index:3}
.play{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,253,248,.6);background:rgba(255,253,248,.12);
  color:#fffdf8;display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .2s,background .2s}
.play:hover{transform:scale(1.07);background:rgba(255,253,248,.24)}
.mock-session{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;padding:12px;z-index:2}
.ms-tile{border-radius:12px;background:#241e15;border:1px solid #3a3227;position:relative;overflow:hidden;display:grid;place-items:center}
.ms-tile img{width:100%;height:100%;object-fit:cover;opacity:.92}
.ms-side{display:grid;grid-template-rows:auto 1fr;gap:10px;min-height:0}
.ms-chart{border-radius:12px;background:#241e15;border:1px solid #3a3227;padding:8px;display:grid;place-items:center}
.ms-notes{border-radius:12px;background:#241e15;border:1px solid #3a3227;padding:10px;overflow:hidden;min-height:0}
.ms-notes .nh{font-family:var(--util);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#8f846c;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.ms-line{font-size:10.5px;color:#ded4bd;padding:4px 0;border-bottom:1px solid #332c22;opacity:0;transform:translateY(6px)}
.ms-line.in{opacity:1;transform:none;transition:all .4s}
.ms-line b{color:var(--gold-soft);font-weight:600}
.badge-live{position:absolute;top:10px;left:10px;z-index:4;background:rgba(130,50,50,.9);color:#fff;border-radius:5px;font-size:9px;font-weight:700;letter-spacing:.14em;padding:3px 7px}
.cap{font-size:12px;color:var(--ink-3);margin-top:10px;display:flex;align-items:center;gap:7px}
.cap svg{flex:none}

/* ── reviews ──────────────────────────────────────────────────────────── */
.rev-view{overflow:hidden}
.rev-track{display:flex;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.rev-cell{flex:0 0 100%;padding-right:20px}
@media(min-width:760px){.rev-cell{flex-basis:50%}}
@media(min-width:1100px){.rev-cell{flex-basis:33.3333%}}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 22px;height:100%;display:flex;flex-direction:column;gap:14px}
.stars{color:var(--gold-lit);letter-spacing:2px;font-size:13px}
.rev p{font-size:14px;line-height:1.62;color:#443d33;flex:1}
.rev-who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line)}
.rev-who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.rev-who b{font-size:14px;display:block}
.rev-who span{font-size:12px;color:var(--ink-2)}
.rev-src{font-family:var(--util);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-left:auto;text-align:right}
.carousel-ctl{display:flex;align-items:center;gap:8px}
.cbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;display:grid;place-items:center;color:var(--ink);transition:all .18s}
.cbtn:hover{background:var(--olive);border-color:var(--olive);color:#fff}

/* ── video testimonials ───────────────────────────────────────────────── */
.vt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.vt{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/13;background:#241e15;display:grid;place-items:end;border:1px solid var(--line)}
.vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.vt::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,22,14,.86) 6%,rgba(28,22,14,.05) 58%)}
.vt-body{position:relative;z-index:2;padding:16px;color:#fffdf8;display:grid;gap:5px;width:100%}
.vt-body b{font-size:15px}
.vt-body span{font-size:12px;color:#c9bfa8}
.vt-play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px}
.vt-flag{position:absolute;z-index:3;top:12px;left:12px;background:rgba(255,253,248,.9);border-radius:6px;font-family:var(--util);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;color:var(--maroon);font-weight:600}

/* ── why ──────────────────────────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.why{padding:24px 22px;border-radius:18px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.why h3{font-family:var(--serif);font-size:21px;font-weight:600}
.why p{font-size:13.2px;color:var(--ink-2);line-height:1.55}
.why-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--cream);color:var(--gold);border:1px solid var(--line)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{max-width:800px;margin-inline:auto}
.q{border-bottom:1px solid var(--line)}
.q>button{width:100%;background:none;border:0;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;font-size:15.5px;font-weight:500}
.q>button svg{flex:none;transition:transform .22s;color:var(--ink-2)}
.q.open>button svg{transform:rotate(180deg)}
.a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.a p{padding:0 0 20px;font-size:14px;color:var(--ink-2);line-height:1.65;max-width:68ch}

/* ── closing cta ──────────────────────────────────────────────────────── */
.close-cta{position:relative;border-radius:24px;overflow:hidden;background:var(--night);padding:64px 6vw;text-align:center;isolation:isolate}
#cta-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.close-cta>*{position:relative;z-index:2}
.close-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,50px);color:#fffdf8;line-height:1.1;margin:14px 0 0}
.close-cta h2 em{font-style:italic;color:var(--gold-soft)}
.close-cta p{color:#cfc5ae;margin-top:14px;font-size:15px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:60px;padding:44px 0 34px}
.foot{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-col{display:grid;gap:9px;font-size:13.5px;color:var(--ink-2);align-content:start}
.foot-col b{font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.foot-note{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ═══ booking drawer ══════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(28,22,14,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;top:0;right:0;bottom:0;width:min(468px,100vw);background:var(--cream);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(28,22,14,.28);
}
.scrim.open .sheet{transform:none}
.sheet-hd{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;background:var(--paper)}
.sheet-hd .t{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1}
.sheet-hd .s{font-size:12px;color:var(--ink-2)}
.x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;flex:none}
.x:hover{background:var(--olive-mist)}
.sheet-body{flex:1;overflow-y:auto;padding:20px 22px 24px}
.sheet-foot{padding:16px 22px;border-top:1px solid var(--line);background:var(--paper);display:grid;gap:10px}
.progress{display:flex;gap:6px;padding:0 22px 14px;background:var(--paper)}
.progress i{flex:1;height:3px;border-radius:99px;background:var(--line)}
.progress i.on{background:var(--olive)}
.fgroup{display:grid;gap:7px;margin-bottom:16px}
.fgroup label{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.fgroup input,.fgroup select,.fgroup textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:11px 13px;
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{outline:none;border-color:var(--olive)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dur{display:grid;gap:10px;margin-bottom:6px}
.dopt{
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--paper);
  border-radius:16px;padding:14px 16px;text-align:left;transition:all .18s;position:relative;
}
.dopt:hover{border-color:var(--line-strong)}
.dopt.on{border-color:var(--olive);background:#f4f6ef;box-shadow:0 0 0 1px var(--olive)}
.dopt .radio{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center}
.dopt.on .radio{border-color:var(--olive)}
.dopt.on .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--olive)}
.dopt .dinfo{flex:1}
.dopt .dinfo b{font-family:var(--serif);font-size:20px;font-weight:600;display:block;line-height:1.15}
.dopt .dinfo span{font-size:12.2px;color:var(--ink-2)}
.dopt .dprice{font-family:var(--serif);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.dopt .best{position:absolute;top:-9px;right:14px;background:var(--gold);color:#fff;border-radius:5px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:9px 4px;font-size:13px;font-variant-numeric:tabular-nums;transition:all .16s}
.slot:hover{border-color:var(--line-strong)}
.slot.on{background:var(--olive);border-color:var(--olive);color:#fff}
.slot:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.who{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:11px 13px;width:100%;text-align:left;transition:all .16s;margin-bottom:9px}
.who.on{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive)}
.who img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
.who .ph{width:44px;height:44px;border-radius:12px;background:var(--olive-mist);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--olive-deep);flex:none}
.who b{font-size:14.5px;display:block;line-height:1.2}
.who span{font-size:12px;color:var(--ink-2)}
.summ{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}
.srow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.srow:last-of-type{border-bottom:0}
.srow span{color:var(--ink-2)}
.srow b{font-weight:600;text-align:right}
.stotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-strong)}
.stotal b{font-family:var(--serif);font-size:30px;font-weight:600}
.note{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5}
.done{display:grid;place-items:center;gap:14px;text-align:center;padding:34px 8px}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--olive-mist);color:var(--olive-deep);display:grid;place-items:center}
.done h3{font-family:var(--serif);font-size:28px;font-weight:600}

/* ═══ profile modal ═══════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:20px;
  background:rgba(28,22,14,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s}
.modal.open{opacity:1;pointer-events:auto}
.mbox{width:min(720px,100%);max-height:88vh;overflow-y:auto;background:var(--cream);border-radius:22px;
  transform:translateY(16px) scale(.98);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.modal.open .mbox{transform:none}
.mtop{display:grid;grid-template-columns:180px 1fr;gap:22px;padding:22px}
@media(max-width:620px){.mtop{grid-template-columns:1fr}}
.mtop .pic{border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:#efe6d2}
.mtop .pic img{width:100%;height:100%;object-fit:cover}
.mbio{font-size:13.8px;color:#4c453a;line-height:1.65;margin-top:10px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.mcell{background:var(--cream);padding:14px 20px}
.mcell span{font-family:var(--util);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:3px}
.mcell b{font-family:var(--serif);font-size:20px;font-weight:600}
.mfoot{padding:18px 22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}

/* audio intro player */
.intro-player{margin:16px 22px 6px;background:var(--night-2);border-radius:16px;padding:16px 18px;color:#e6ddcb}
.wave{display:flex;align-items:center;gap:3px;height:34px;margin:10px 0}
.wave i{flex:1;background:#4c4436;border-radius:99px;height:20%;transition:height .12s}
.wave i.hot{background:var(--gold-lit)}
.intro-cap{font-size:12.5px;line-height:1.55;color:#cfc5ae;min-height:38px}
.intro-meta{display:flex;justify-content:space-between;font-family:var(--util);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9e947d}

/* ═══ cosmic scroll rail (optional req 14) ════════════════════════════ */
.rail-journey{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;display:none;
  flex-direction:column;gap:2px;align-items:flex-end;
}
.rail-journey.on{display:flex}
@media(max-width:1180px){.rail-journey.on{display:none}}
.rj{display:flex;align-items:center;gap:10px;background:none;border:0;padding:5px 0;color:var(--ink-3);font-family:var(--util);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.rj .lbl{opacity:0;transform:translateX(6px);transition:all .2s}
.rail-journey:hover .rj .lbl,.rj.now .lbl{opacity:1;transform:none}
.rj .node{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--cream);flex:none;transition:all .25s}
.rj.done .node{background:var(--line-strong)}
.rj.now{color:var(--olive-deep)}
.rj.now .node{background:var(--olive);border-color:var(--olive);box-shadow:0 0 0 4px rgba(124,138,102,.18)}
.rj-line{width:1px;height:16px;background:var(--line-strong);margin-right:4px;align-self:flex-end}

/* ═══ requirement annotations + review sheet ══════════════════════════ */
.req-pin{
  display:none;align-items:center;gap:6px;background:var(--olive-mist);border:1px solid #dbe1cf;color:var(--olive-deep);
  border-radius:999px;padding:3px 11px;font-family:var(--util);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:12px;width:fit-content;
}
body.annot .req-pin{display:inline-flex}
body.annot [data-req]{position:relative}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%,100%{box-shadow:none}18%{box-shadow:0 0 0 4px rgba(184,144,47,.34)}}
.review-fab{
  position:fixed;right:18px;bottom:18px;z-index:95;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--cream);border:0;border-radius:999px;padding:0 20px;height:48px;
  font-family:var(--util);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 14px 32px rgba(28,22,14,.32);
}
.review-fab:hover{background:#3c352b}
.review-fab .n{background:var(--gold);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:2px 7px;letter-spacing:.04em}
.rsheet{position:absolute;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--cream);transform:translateX(100%);
  transition:transform .34s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(28,22,14,.28)}
.scrim.open .rsheet{transform:none}
.toggles{display:grid;gap:10px;padding:16px 22px;background:var(--paper);border-bottom:1px solid var(--line)}
.tg{display:flex;align-items:center;gap:12px;font-size:13.5px}
.tg .sw{width:40px;height:23px;border-radius:99px;background:var(--line-strong);position:relative;flex:none;transition:background .2s;border:0;padding:0}
.tg .sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg .sw[aria-checked="true"]{background:var(--olive)}
.tg .sw[aria-checked="true"]::after{transform:translateX(17px)}
.tg span{color:var(--ink-2);font-size:12.5px}
.rq{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:start}
.rq:last-child{border-bottom:0}
.rq-n{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink-3);line-height:1;min-width:24px;font-variant-numeric:tabular-nums}
.rq b{font-size:14.5px;display:block;margin-bottom:3px}
.rq p{font-size:13px;color:var(--ink-2);line-height:1.5}
.rq-foot{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.st{border-radius:6px;font-family:var(--util);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;font-weight:600}
.st.built{background:var(--olive-mist);color:var(--olive-deep)}
.st.input{background:#fbf1dc;color:#8a6a15}
.st.opt{background:#f1eee9;color:var(--ink-2)}
.jump{font-family:var(--util);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:5px}
.jump:hover{color:var(--olive-deep);text-decoration:underline}

/* ═══ "enter your universe" overlay (optional req 13) ═════════════════ */
#gate{position:fixed;inset:0;z-index:120;background:var(--night);display:none;place-items:center;text-align:center}
#gate.on{display:grid}
#gate canvas{position:absolute;inset:0;width:100%;height:100%}
.gate-in{position:relative;z-index:2;padding:24px;display:grid;gap:22px;justify-items:center;animation:gateIn 1.1s cubic-bezier(.16,1,.3,1)}
@keyframes gateIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gate-in h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(26px,4.6vw,44px);color:#fffdf8;line-height:1.25;max-width:18ch}
.gate-skip{position:absolute;top:20px;right:20px;z-index:3;background:none;border:0;color:#9e947d;font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.gate-skip:hover{color:#fffdf8}
.gate-note{font-family:var(--util);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7d735f}

/* ═══════════════════════════════════════════════════════════════════════
   Native Elementor compatibility layer
   ═══════════════════════════════════════════════════════════════════════
   The rules above assume the proposal's own markup — .hero h1, .step p,
   .hero-trust b and so on. A native Elementor widget emits its own tree
   (.elementor-widget-heading > .elementor-widget-container > h1), so those
   descendant selectors never match it.

   Rather than rewrite them and risk the legacy markup, this block adds a flat
   class per element. The class goes on the widget wrapper via Elementor's
   Advanced > CSS Classes field; every typography property inherits down to the
   inner tag, and the wrapper is the box in the flex flow, so margins and
   backgrounds belong on it anyway.

   Buttons are the one exception: Elementor's <a class="elementor-button"> is
   the visual box, and background/border/padding do not inherit — so those are
   styled through .ag-btn .elementor-button.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── containers ───────────────────────────────────────────────────────────
   Elementor lays a container out from custom properties: .e-con reads
   --display, --flex-direction, --gap and so on. Setting those here rather than
   the plain properties keeps the layering intact — our rule (0,2,0) beats
   Elementor's default (0,1,0), and the moment someone touches the Layout
   controls Elementor emits (0,3,0) and takes over, which is what we want. */
.e-con.hero-wrap,.e-con.sec,.e-con.cta-shell,.e-con.ag-footer-wrap,
.e-con.hero-in,.e-con.offer-copy,.e-con.foot-col,.e-con.step,.e-con.why,
.e-con.trust-item,.e-con.head-left{--gap:0px}

.e-con.hero{--display:flex;--flex-direction:row;--align-items:center;--gap:0px}
.e-con.hero-cta{--display:flex;--flex-direction:row;--flex-wrap:wrap;--gap:12px}
.e-con.hero-trust{--display:flex;--flex-direction:row;--flex-wrap:wrap;--gap:22px}
.e-con.offer-band{--display:flex;--flex-direction:row;--align-items:center;--flex-wrap:wrap;--gap:28px}
.e-con.sec-head{--display:flex;--flex-direction:row;--align-items:flex-end;--justify-content:space-between;--flex-wrap:wrap;--gap:28px}
.e-con.steps{--display:grid;--gap:0px}
.e-con.why-grid{--display:grid;--gap:16px}
.e-con.cta-btns{--display:flex;--flex-direction:row;--justify-content:center;--flex-wrap:wrap;--gap:12px}
.e-con.foot{--display:flex;--flex-direction:row;--justify-content:space-between;--flex-wrap:wrap;--gap:34px}
.e-con.foot-note{--display:flex;--flex-direction:row;--justify-content:space-between;--flex-wrap:wrap;--gap:16px}
.e-con.trust-item{--display:flex;--flex-direction:column;--gap:2px;width:auto}

/* .rail is a max-width wrapper; Elementor full-width containers are 100%. */
.e-con.rail{max-width:var(--rail);margin-inline:auto;padding-inline:24px}
.e-con.sec{padding-block:66px}
@media(max-width:720px){.e-con.sec{padding-block:48px}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6.1vw,68px);line-height:1.04;letter-spacing:-.015em;margin:16px 0 0;color:#fffdf8}
.hero-title em{font-style:italic;color:var(--gold-soft)}
.hero-lede{margin-top:18px;font-size:16.5px;line-height:1.65;color:#e6ddcb;max-width:50ch}
.trust-item{display:flex;flex-direction:column;gap:2px;width:auto}
.trust-value{font-family:var(--serif);font-size:25px;font-weight:600;color:#fffdf8;line-height:1}
.trust-label{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b9ae97}
.offer-headline{font-size:15px}
.offer-headline b{font-size:16px}

/* ── how it works / why / what you receive ────────────────────────────── */
.step-title{font-family:var(--serif);font-size:20px;font-weight:600}
.step-desc{font-size:13px;color:var(--ink-2);line-height:1.55}
.why-title{font-family:var(--serif);font-size:21px;font-weight:600}
.why-desc{font-size:13.2px;color:var(--ink-2);line-height:1.55}
.dl-title{display:block;font-size:14.5px;margin-bottom:2px}
.dl-desc{font-size:13px;color:var(--ink-2)}

/* ── closing call to action ───────────────────────────────────────────── */
.cta-title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,50px);color:#fffdf8;line-height:1.1;margin:14px 0 0}
.cta-title em{font-style:italic;color:var(--gold-soft)}
.cta-line{color:#cfc5ae;margin-top:14px;font-size:15px}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot-head{font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.foot-link{color:var(--ink-2);font-size:13px}
.foot-link:hover{color:var(--olive-deep)}

/* ── buttons as native Elementor Button widgets ───────────────────────── */
.ag-btn{width:auto}
.ag-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;border:1px solid transparent;padding:0 24px;height:46px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s,color .18s,border-color .18s,transform .18s;white-space:nowrap;
  background:transparent;
}
.ag-btn .elementor-button:hover{transform:translateY(-1px)}
.ag-btn-primary .elementor-button{background:var(--olive);color:#fff;box-shadow:0 8px 22px rgba(124,138,102,.28)}
.ag-btn-primary .elementor-button:hover{background:var(--olive-deep);color:#fff}
.ag-btn-gold .elementor-button{background:var(--gold);color:#fff}
.ag-btn-gold .elementor-button:hover{background:#a37f24;color:#fff}
.ag-btn-onnight .elementor-button{border-color:rgba(255,253,248,.55);color:#fffdf8;background:transparent}
.ag-btn-onnight .elementor-button:hover{background:#fffdf8;color:var(--night)}
.ag-btn-ghost .elementor-button{border-color:var(--ink);color:var(--ink);background:transparent}
.ag-btn-sm .elementor-button{height:38px;padding:0 18px;font-size:11.5px}

/* Elementor wraps button text in a span; the icon slot is unused here. */
.ag-btn .elementor-button-content-wrapper{gap:9px}
.ag-btn .elementor-button-text{flex-grow:0}

/* The starfield widget's canvas, wherever it is placed. */
.ag-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.elementor-widget-ag-starfield{position:absolute;inset:0;z-index:0;pointer-events:none}
.elementor-widget-ag-starfield .elementor-widget-container{width:100%;height:100%}

/* Native containers standing in for the proposal's own wrappers. */
.e-con.hero,.e-con.close-cta{position:relative;isolation:isolate;overflow:hidden}
.e-con.hero>.elementor-element,.e-con.close-cta>.elementor-element{position:relative;z-index:2}
.eyebrow-lit{color:var(--gold-soft)}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;flex-direction:row}
.sec-head-centred{display:block;text-align:center;margin-bottom:24px}
.ag-footer-wrap{border-top:1px solid var(--line);margin-top:60px;padding:44px 0 34px}
.foot-link-wrap{display:block}
.foot-brand{max-width:270px}
.foot-blurb{font-size:13px}
.foot-note-l,.foot-note-r{font-size:12px;color:var(--ink-3)}

/* ── reclaiming what the Global Kit styles directly ───────────────────────
   The kit writes .elementor-widget-heading .elementor-heading-title{color:…}
   and .elementor-widget-button .elementor-button{background:…}. Those set the
   property on the inner node, and a directly-set value always beats an
   inherited one however specific the wrapper rule is — so a class on the
   widget wrapper cannot win on colour alone.

   Each rule below therefore matches the widget class *and* Elementor's own
   class, giving (0,3,0) against the kit's (0,2,0). That is deterministic and
   does not depend on stylesheet order, which differs between the kit CSS and
   the theme CSS from page to page. The kit still styles anything new that
   Marketing drops on the page.
   ═══════════════════════════════════════════════════════════════════════ */
.elementor-widget-heading.hero-title .elementor-heading-title,
.elementor-widget-heading.cta-title .elementor-heading-title,
.elementor-widget-heading.trust-value .elementor-heading-title{color:#fffdf8}
.elementor-widget-heading.hero-title .elementor-heading-title em,
.elementor-widget-heading.cta-title .elementor-heading-title em{color:var(--gold-soft)}
.elementor-widget-heading.trust-label .elementor-heading-title{color:#b9ae97}
.elementor-widget-heading.hero-badge .elementor-heading-title,
.elementor-widget-heading.eyebrow-lit .elementor-heading-title{color:var(--gold-soft)}
.elementor-widget-heading.eyebrow .elementor-heading-title{color:var(--olive)}
.elementor-widget-heading.step-n .elementor-heading-title{color:var(--olive)}
.elementor-widget-heading.h-sec .elementor-heading-title,
.elementor-widget-heading.step-title .elementor-heading-title,
.elementor-widget-heading.why-title .elementor-heading-title,
.elementor-widget-heading.foot-head .elementor-heading-title,
.elementor-widget-heading.offer-price .elementor-heading-title,
.elementor-widget-heading.offer-headline .elementor-heading-title,
.elementor-widget-heading.mark .elementor-heading-title{color:var(--ink)}
.elementor-widget-heading.mark .elementor-heading-title i{color:var(--gold);font-style:normal}

.elementor-widget-text-editor.hero-lede{color:#e6ddcb}
.elementor-widget-text-editor.cta-line{color:#cfc5ae}

.ag-btn.ag-btn-primary .elementor-button{background-color:var(--olive);color:#fff}
.ag-btn.ag-btn-primary .elementor-button:hover{background-color:var(--olive-deep);color:#fff}
.ag-btn.ag-btn-gold .elementor-button{background-color:var(--gold);color:#fff}
.ag-btn.ag-btn-gold .elementor-button:hover{background-color:#a37f24;color:#fff}
.ag-btn.ag-btn-onnight .elementor-button{background-color:transparent;border-color:rgba(255,253,248,.55);color:#fffdf8}
.ag-btn.ag-btn-onnight .elementor-button:hover{background-color:#fffdf8;color:var(--night)}
.ag-btn.ag-btn-ghost .elementor-button{background-color:transparent;border-color:var(--ink);color:var(--ink)}

/* Widgets that must hug their content rather than fill the row. */
.elementor-widget.hero-badge,.elementor-widget.ag-btn{width:auto}
.e-con.trust-item{flex:0 0 auto}
.e-con.head-left{--gap:0px;flex:1 1 auto}
.e-con.sec-head .h-sub{text-align:right;max-width:34ch}
@media(max-width:720px){.e-con.sec-head .h-sub{text-align:left}}

/* Elementor sizes every element with width:var(--width) and defaults --width to
   100%. Anything that has to hug its content — a pill, a button, a stat, a
   column in a row — has to opt out through the variable, not through width. */
.elementor-element.hero-badge,
.elementor-element.ag-btn,
.elementor-element.offer-price,
.e-con.trust-item,
.e-con.head-left{--width:auto}
.e-con.offer-copy{--width:auto;flex:1 1 220px}
.e-con.head-left{flex:1 1 auto}

/* .hero-in is now a flex column, so its children stretch to the cross axis by
   default. An inline pill has to opt out with align-self; width:auto cannot
   beat align-items:stretch. */
.elementor-element.hero-badge,.elementor-element.eyebrow,.elementor-element.eyebrow-lit{align-self:flex-start}
.e-con.close-cta .elementor-element.eyebrow-lit{align-self:center}

/* Elementor gives every container 10px of block padding by default. The design
   sets its own spacing, so zero it on the containers this build generates —
   and only those, so anything Marketing adds still behaves normally. Padding
   set through the panel emits at (0,3,0) and still wins. */
.e-con.ag-c{--gap:0px;--row-gap:0px;--column-gap:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px}

/* Containers whose design does call for a gap, re-stated after the reset. */
.e-con.ag-c.hero-cta{--gap:12px}
.e-con.ag-c.hero-trust{--gap:22px}
.e-con.ag-c.offer-band{--gap:28px}
.e-con.ag-c.sec-head{--gap:28px}
.e-con.ag-c.why-grid{--gap:16px}
.e-con.ag-c.cta-btns{--gap:12px}
.e-con.ag-c.foot{--gap:34px}
.e-con.ag-c.foot-note{--gap:16px}
.e-con.ag-c.trust-item{--gap:2px}
.foot-link-wrap{margin:0}

/* Footer columns size to their content; only the brand column is capped. */
.e-con.ag-c.foot-col{--width:auto}
.e-con.ag-c.foot-brand{--width:auto;max-width:270px}

/* The kit also sets font-family directly on .elementor-heading-title, so the
   serif has to be reclaimed at the same specificity as the colours above. */
.elementor-widget-heading.hero-title .elementor-heading-title,
.elementor-widget-heading.cta-title .elementor-heading-title,
.elementor-widget-heading.h-sec .elementor-heading-title,
.elementor-widget-heading.trust-value .elementor-heading-title,
.elementor-widget-heading.step-title .elementor-heading-title,
.elementor-widget-heading.why-title .elementor-heading-title,
.elementor-widget-heading.offer-price .elementor-heading-title,
.elementor-widget-heading.mark .elementor-heading-title{font-family:var(--serif)}
.elementor-widget-heading.hero-badge .elementor-heading-title,
.elementor-widget-heading.eyebrow .elementor-heading-title,
.elementor-widget-heading.eyebrow-lit .elementor-heading-title,
.elementor-widget-heading.trust-label .elementor-heading-title,
.elementor-widget-heading.step-n .elementor-heading-title,
.elementor-widget-heading.foot-head .elementor-heading-title{font-family:var(--util)}
.elementor-widget-heading.offer-headline .elementor-heading-title{font-family:var(--sans)}

/* Inline SVG icons live in native HTML widgets; keep the original box. */
.elementor-widget-html.why-ico .elementor-widget-container{display:grid;place-items:center;width:100%;height:100%}

/* ── services as native elements ──────────────────────────────────────────
   Same declarations as the original .svc rules; only the carriers change. The
   card was a <button> and is now a container, so cursor and the focus ring are
   restated here and JS puts role/tabindex back for keyboard users. */
.e-con.ag-c.svc-filters{--display:flex;--flex-direction:row;--flex-wrap:wrap;--gap:8px}
.e-con.ag-c.svc-grid{--display:grid;--gap:14px}
.e-con.ag-c.svc{--gap:9px;--width:auto;cursor:pointer}
.e-con.ag-c.svc-foot{--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;--gap:0px;--width:auto;margin-top:auto}
.e-con.ag-c.svc:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.elementor-widget.svc-ico{--width:auto;width:40px;height:40px}
.elementor-widget.svc-ico .elementor-widget-container{width:40px;height:40px;display:grid;place-items:center}
.elementor-widget.svc-go{--width:auto}
.elementor-widget.svc-price{--width:auto}

.elementor-widget-heading.svc-h .elementor-heading-title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15;color:var(--ink)}
.elementor-widget-text-editor.svc-d{font-size:13px;color:var(--ink-2);line-height:1.5}
.elementor-widget-heading.svc-price .elementor-heading-title{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink)}
.elementor-widget-heading.svc-price .elementor-heading-title small{color:var(--ink-3);font-weight:400}

/* Filter chips as native Button widgets. */
.elementor-widget.chip-w{--width:auto}
.chip-w .elementor-button{
  border:1px solid var(--line-strong);background-color:transparent;color:var(--ink-2);
  border-radius:999px;padding:7px 16px;height:auto;font-family:var(--sans);font-size:13px;
  font-weight:400;letter-spacing:normal;text-transform:none;transition:all .16s;
}
.chip-w .elementor-button:hover{border-color:var(--olive);color:var(--ink);background-color:transparent;transform:none}
.chip-w.on .elementor-button{background-color:var(--olive);border-color:var(--olive);color:#fff}

.elementor-widget-text-editor.cap{font-size:12px;color:var(--ink-3);margin-top:10px}
.elementor-widget-text-editor.cap .elementor-widget-container{display:flex;align-items:center;gap:7px}

/* ── keeping the original cascade ─────────────────────────────────────────
   In the source design .sec{padding:66px 0} is a shorthand, so on a
   `sec rail` element it resets .rail's padding-inline to 0 and the content box
   is the full 1240px. The container version has to reproduce that, or the
   services grid loses a column. */
.e-con.ag-c.sec{padding-inline:0;--padding-inline-start:0px;--padding-inline-end:0px}

/* The kit sets font-family, size, weight and line-height directly on
   Elementor's inner nodes, which beats anything inherited from the wrapper.
   Making those nodes inherit hands typography back to the design's own classes
   on the wrapper — one rule instead of restating every heading. Panel edits
   still win: Elementor writes those at (0,4,0) against this (0,3,0). */
.e-con.ag-c .elementor-widget-heading .elementor-heading-title,
.e-con.ag-c .elementor-widget-text-editor .elementor-widget-container,
.e-con.ag-c .elementor-widget-text-editor .elementor-widget-container > *{
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;text-transform:inherit;color:inherit;
}
/* Text Editor adds a bottom margin to its paragraphs; the design does not. */
.e-con.ag-c .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* The kit sets font-family on the text-editor wrapper itself, so the inherit
   rule above never sees the design's font. */
.e-con.ag-c .elementor-widget-text-editor{font-family:var(--sans)}

/* Chip height comes from the original 7px padding plus a 23px line box. */
.chip-w .elementor-button{font-size:13px;line-height:23px}

/* Elementor sizes with max-width:var(--max-width,100%), so a design max-width
   has to be set through the variable as well as the property. */
.e-con.ag-c.sec-head .h-sub{--max-width:34ch;max-width:34ch}
.e-con.ag-c .h-sub{--max-width:56ch}

/* The source markup carries style="margin-top:10px" on the section h2 and lets
   the heading column shrink to its content; both restated as classes here. */
.ag-h-sec{margin-top:10px}
.e-con.ag-c.head-left{--width:auto;flex:0 1 auto}
.chip-w .elementor-button{line-height:1.6}

/* The kit colours .elementor-widget-text-editor at the same specificity as
   .h-sub, so the sub-heading needs the widget class spelled out too. */
.e-con.ag-c .elementor-widget-text-editor.h-sub{color:var(--ink-2)}

/* In the source markup the eyebrow is inline-flex inside a block, so it sits on
   the parent's 24px line box. As a flex child it would only be its own 18px,
   shortening every section head by 6px. */
.e-con.ag-c .elementor-widget.eyebrow{min-height:24px;display:flex;align-items:center}

/* Chips: the kit colours .elementor-widget-button .elementor-button at (0,2,0),
   so the chip rules need the widget class spelled out to reach (0,3,0). */
.elementor-widget-button.chip-w .elementor-button{
  border:1px solid var(--line-strong);background-color:transparent;color:var(--ink-2);
  border-radius:999px;padding:7px 16px;height:auto;font-family:var(--sans);font-size:13px;
  font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.6;transition:all .16s;
}
.elementor-widget-button.chip-w .elementor-button:hover{border-color:var(--olive);color:var(--ink);background-color:transparent;transform:none}
.elementor-widget-button.chip-w.on .elementor-button{background-color:var(--olive);border-color:var(--olive);color:#fff}


/* ── service filtering, done in CSS ───────────────────────────────────────
   One class on the grid decides what is visible. Toggling a class per card
   meant the filter depended on when Elementor had finished inserting them —
   it renders containers below the fold lazily — and it was lost whenever a
   card was re-rendered. A single class on the parent has neither problem. */
.svc-grid.filter-core .svc:not(.svc-cat-core),
.svc-grid.filter-relations .svc:not(.svc-cat-relations),
.svc-grid.filter-work .svc:not(.svc-cat-work),
.svc-grid.filter-life .svc:not(.svc-cat-life),
.svc-grid.filter-guidance .svc:not(.svc-cat-guidance),
.svc-grid.filter-timing .svc:not(.svc-cat-timing){display:none !important}


/* ── reviews as native elements ───────────────────────────────────────────
   Same declarations as the .rev rules above, restated on the containers and
   widget wrappers that now carry the classes. Two things are copied from what
   the original cascade actually rendered rather than from what .rev-src says:
   `.rev-who span` outranked it, so the badge is 12px in the muted ink, and the
   card gap and padding are set through Elementor's variables because .ag-c
   zeroes them. */
.e-con.ag-c.rev-view{overflow:hidden}
.e-con.ag-c.rev-track{--display:flex;--flex-direction:row;--gap:0px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.e-con.ag-c.rev-cell{--flex-grow:0;--flex-shrink:0;--flex-basis:100%;--padding-inline-end:20px;--gap:0px}
@media(min-width:760px){.e-con.ag-c.rev-cell{--flex-basis:50%}}
@media(min-width:1100px){.e-con.ag-c.rev-cell{--flex-basis:33.3333%}}
.e-con.ag-c.rev{--display:flex;--flex-direction:column;--gap:14px;--height:100%;
  --padding-block-start:24px;--padding-block-end:24px;--padding-inline-start:22px;--padding-inline-end:22px}
.e-con.ag-c.rev-who{--display:flex;--flex-direction:row;--align-items:center;--gap:11px;--padding-block-start:14px;--width:100%}
.e-con.ag-c.rev-id{--gap:0px;--width:auto;flex:0 1 auto}

.elementor-widget.stars{font-size:13px;letter-spacing:2px;color:var(--gold-lit);font-family:var(--sans)}
.e-con.ag-c .elementor-widget-text-editor.rev-text{--flex-grow:1;font-size:14px;line-height:1.62;color:#443d33}
/* Elementor 4 prints widgets without an .elementor-widget-container wrapper on
   the front end, so the image sits straight inside the widget element. */
.elementor-widget.rev-img{--width:auto;width:40px;height:40px;flex:0 0 40px;display:flex;line-height:0}
.elementor-widget.rev-img .elementor-widget-container{display:flex;width:40px;height:40px}
.rev-who .elementor-widget-image img{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover}
.elementor-widget.rev-name{font-size:14px;font-weight:700;color:var(--ink);font-family:var(--sans)}
/* In the source the role is a 12px inline span sitting on its parent's 15px/1.6
   line box, and `.rev p` only ever matched the quote — so the role's paragraph
   is made inline and the generic paragraph rule is undone on it. */
.e-con.ag-c .elementor-widget-text-editor.rev-role{font-size:15px;line-height:1.6;color:var(--ink-2)}
.e-con.ag-c .rev-role p{display:inline;font-size:12px;line-height:1.6;color:var(--ink-2);flex:none;margin:0}
.elementor-widget.rev-src{--width:auto;margin-inline-start:auto;text-align:right;
  font-family:var(--util);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.elementor-widget.carousel-ctl-w{--width:auto}

/* The eyebrow's star is a centred flex item in the source (.eyebrow is
   inline-flex with an 8px gap). The Heading widget's text node has to be the
   flex container, or the star sits a pixel low on the baseline. */
.e-con.ag-c .elementor-widget.eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px}


/* ── faq as native elements ───────────────────────────────────────────────
   The question row was a <button>; it is now the q-head container, so its
   padding, layout and typography are restated on the container and the
   Heading inside it. The answer keeps `.a p` for the paragraph itself. */
.e-con.ag-c.faq{--max-width:800px;max-width:800px;--margin-inline-start:auto;--margin-inline-end:auto;margin-inline:auto}
.e-con.ag-c.q{--gap:0px;border-bottom:1px solid var(--line)}
.e-con.ag-c.q-head{--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;--gap:18px;
  --padding-block-start:20px;--padding-block-end:20px;cursor:pointer}
.e-con.ag-c.q-head:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.elementor-widget.fq-q{--width:auto;flex:1 1 auto;font-size:15.5px;font-weight:500;color:var(--ink);font-family:var(--sans);text-align:left}
.elementor-widget.q-chev{--width:auto;flex:none;color:var(--ink-2);line-height:0}
.q-chev svg{transition:transform .22s;display:block}
.q.open .q-chev svg{transform:rotate(180deg)}
.e-con.ag-c.a{--gap:0px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.e-con.ag-c .elementor-widget-text-editor.fq-a{font-size:14px;color:var(--ink-2);line-height:1.65}

/* Centred section head (FAQ): the source is a text-align:center block. */
.e-con.ag-c.sec-head-centred{--display:block;display:block;text-align:center;margin-bottom:24px}
.e-con.ag-c.sec-head-centred .e-con.head-left{--width:100%;--align-items:center;align-items:center}
.e-con.ag-c.sec-head-centred .elementor-widget.eyebrow{align-self:center}

/* ── video testimonials as native elements ────────────────────────────────
   The card was a <button> with the browser's 1px 6px padding, and the
   poster, flag and play glyph are absolutely positioned inside it — so the
   widget wrappers take those positions and the card keeps its padding. */
.e-con.ag-c.vt-grid{--display:grid;--gap:16px}
.e-con.ag-c.vt{--gap:0px;--padding-block-start:1px;--padding-block-end:1px;--padding-inline-start:6px;--padding-inline-end:6px;
  --width:auto;display:grid;place-items:end;text-align:center}
.e-con.ag-c.vt:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.elementor-widget.vt-img{position:absolute;inset:0;--width:100%;width:100%;height:100%;z-index:0;line-height:0}
.elementor-widget.vt-img a{display:block;width:100%;height:100%}
.elementor-widget.vt-flag{position:absolute;z-index:3;top:12px;left:12px;--width:auto;width:auto;
  background:rgba(255,253,248,.9);border-radius:6px;font-family:var(--util);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 8px;color:var(--maroon);font-weight:600}
.elementor-widget.vt-play-w{position:absolute;inset:0;--width:100%;z-index:3;pointer-events:none}
.elementor-widget.vt-play-w .play{pointer-events:auto}
.e-con.ag-c.vt-body{position:relative;z-index:2;--padding-block-start:16px;--padding-block-end:16px;--padding-inline-start:16px;--padding-inline-end:16px;
  --gap:5px;--width:100%;color:#fffdf8}
.elementor-widget.vt-name{font-size:15px;font-weight:700;color:#fffdf8;font-family:var(--sans)}
.e-con.ag-c .elementor-widget-text-editor.vt-who{font-size:12px;color:#c9bfa8}


/* ── Text Editor typography, restated at (0,3,0) ─────────────────────────
   Elementor's per-page CSS writes
     .elementor-widget-text-editor{font-size:var(--e-global-typography-text-font-size)}
   for every Text Editor. The variable is undefined, so the declaration
   resolves to `inherit` — but it still outranks the design's single-class
   rules by source order, and every paragraph came out at the body's 15px.
   Each Text Editor class is therefore restated here with the widget class,
   which beats the page CSS and still loses to anything set in the panel. */
.e-con.ag-c .elementor-widget-text-editor.hero-lede{font-size:16.5px;line-height:1.65;color:#e6ddcb}
.e-con.ag-c .elementor-widget-text-editor.offer-note{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:4px}
.e-con.ag-c .elementor-widget-text-editor.h-sub{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.step-desc{font-size:13px;line-height:1.55;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.why-desc{font-size:13.2px;line-height:1.55;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.cta-line{font-size:15px;line-height:1.6;color:#cfc5ae}
.e-con.ag-c .elementor-widget-text-editor.foot-blurb{font-size:13px;line-height:1.6;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.foot-link-wrap{font-size:13.5px;line-height:1.6}
.e-con.ag-c .elementor-widget-text-editor.foot-note-l,
.e-con.ag-c .elementor-widget-text-editor.foot-note-r{font-size:12px;line-height:1.6;color:var(--ink-3)}
.e-con.ag-c .elementor-widget-text-editor.svc-d{font-size:13px;line-height:1.5;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.cap{font-size:12px;line-height:1.6;color:var(--ink-3)}


/* ── corrections found by measuring against the proposal file ────────────
   Each of these is a place where Elementor's own markup or CSS changed a
   number the design fixes. Verified by build/../metrics: every section's
   size and offset now equals the proposal's. */

/* .hero-wrap{padding:14px 0 0} is a shorthand in the design, so it zeroes
   .rail's inline padding — the hero runs the full 1240px. */
.e-con.ag-c.hero-wrap{padding-inline:0;--padding-inline-start:0px;--padding-inline-end:0px}

/* .hero h1{margin:16px 0 0} and .close-cta h2{margin:14px 0 0} now match the
   tag inside the Heading widget as well as the wrapper that carries the same
   class — the margin belongs to the wrapper only. */
.e-con.ag-c .elementor-widget-heading .elementor-heading-title{margin:0}

/* The badge is inline-flex in the design so its pulse dot is a 7px flex item;
   the Heading widget's text node has to be the flex container. */
.e-con.ag-c .elementor-widget.hero-badge .elementor-heading-title{display:inline-flex;align-items:center;gap:9px}

/* Buttons: the page CSS applies the kit's accent typography (Jost 500) to
   every Button widget at (0,2,0); the design's DM Sans 600 is restated at
   (0,3,0). line-height matches the body so the label sits where it did. */
.elementor-widget-button.ag-btn .elementor-button{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
.elementor-widget-button.ag-btn.ag-btn-sm .elementor-button{font-size:11.5px}

/* Footer: the mark and the column heads carry the design's small margins on
   the widget wrapper, where Elementor's own margin rule would otherwise win;
   heads are <b> in the design (bold), links inherit the column's 13.5px. */
.e-con.ag-c .elementor-widget.foot-mark{margin-block-end:4px}
.e-con.ag-c .elementor-widget.foot-head{margin-block-end:2px;font-weight:700}
.foot-link{font-size:13.5px}


/* The closing section is <section class="rail" style="padding-bottom:20px">. */
.e-con.ag-c.cta-shell{--padding-block-end:20px}

/* Filter chips are Button widgets too, so they must undo the .ag-btn
   typography above at one higher specificity. */
.elementor-widget-button.ag-btn.chip-w .elementor-button{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.6}

/* Footer links are grid items in the design, so each is a block. */
.foot-link{display:block}

/* The eyebrow: in the design an 11px inline-flex pill sitting on its parent's
   15px/1.6 line box, baseline-aligned — so it sits 5px below the line-box
   top, not centred in it. The wrapper reproduces the parent line box and the
   Heading's text node reproduces the pill. */
.e-con.ag-c .elementor-widget.eyebrow{display:block;min-height:0;font-size:15px;line-height:1.6;letter-spacing:normal;text-transform:none}
.e-con.ag-c .elementor-widget.eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--util);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.6;color:var(--olive)}
.e-con.ag-c .elementor-widget.eyebrow.eyebrow-lit .elementor-heading-title{color:var(--gold-soft)}

/* Hello Elementor's reset makes <small> 80%; the design has the browser's `smaller`. */
.e-con.ag-c .elementor-heading-title small{font-size:smaller}

/* Colours are now set per element in the Style tab (see native_tree.py), which
   Elementor writes at (0,4,0). The active filter chip is toggled by JavaScript,
   so its state must outrank that. */
.e-con.ag-c .elementor-widget-button.chip-w.on .elementor-button,
.e-con.ag-c .elementor-widget-button.chip-w.on .elementor-button:hover{background-color:var(--olive);border-color:var(--olive);color:#fff}


/* ── astrologers as native elements ───────────────────────────────────────
   Same declarations as the .astro rules above, on the containers and widget
   wrappers that now carry the classes. The photo, the two pills and the
   "Hear from" button are absolutely positioned inside .astro-media exactly as
   before; only their carriers changed. */
.e-con.ag-c.astro-sec{background:linear-gradient(180deg,rgba(238,240,230,.5),transparent 40%);border-radius:26px}
.e-con.ag-c.astro-grid{--display:grid;--gap:20px}
.e-con.ag-c.astro{--gap:0px;--width:auto;--display:flex;--flex-direction:column}
.e-con.ag-c.astro-media{--gap:0px;--width:100%}
.elementor-widget.astro-img{position:absolute;inset:0;--width:100%;width:100%;height:100%;z-index:0;line-height:0}
.astro-media .elementor-widget-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.astro-img-anil img{object-position:50% 18%}
.astro-img-surbhi img{object-position:50% 22%}
.astro-img-raazi img{object-position:50% 20%}
.elementor-widget.avail,.elementor-widget.rate-pill{--width:auto;width:auto}
.elementor-widget.avail .elementor-heading-title{display:inline-flex;align-items:center;gap:6px}
.elementor-widget.rate-pill .elementor-heading-title{display:flex;align-items:center;gap:4px}
.elementor-widget.hear-w{position:absolute;inset:0;--width:100%;z-index:3;pointer-events:none;line-height:0}
.elementor-widget.hear-w .hear{pointer-events:auto;line-height:normal}
.e-con.ag-c.astro-body{--display:flex;--flex-direction:column;--gap:9px;--flex-grow:1;
  --padding-block-start:16px;--padding-inline-start:17px;--padding-inline-end:17px;--padding-block-end:18px}
.e-con.ag-c .elementor-widget-text-editor.astro-title{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:-4px}
.e-con.ag-c.meta-row{--display:flex;--flex-direction:row;--flex-wrap:wrap;--gap:6px}
.elementor-widget.ag-tag{--width:auto;width:auto;font-family:var(--sans)}
/* .kv is display:flex with an 8px gap between the <b> and the text. */
.e-con.ag-c .elementor-widget-text-editor.kv{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.e-con.ag-c .kv p{display:flex;gap:8px;margin:0}
.e-con.ag-c.astro-foot{--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;--gap:10px;
  --padding-block-start:14px;margin-top:auto}
.elementor-widget.astro-price-w{--width:auto;font-family:var(--sans)}
.astro-price-muted{color:var(--ink-3)}
.e-con.ag-c.astro-btns{--display:flex;--flex-direction:row;--gap:8px;--width:auto}
.astro-name-muted{color:var(--ink-2)}
.e-con.ag-c.tbc-media{--display:grid;--gap:10px;--padding-block-start:24px;--padding-block-end:24px;--padding-inline-start:24px;--padding-inline-end:24px;
  place-items:center;text-align:center}
.elementor-widget.tbc-ico{--width:auto;line-height:0;color:var(--ink-3)}
.elementor-widget.tbc-kicker{font-family:var(--serif);font-size:20px;color:var(--ink-2)}
.elementor-widget.tbc-note{color:var(--ink-3)}
.tbc-list-w ul{font-size:12.5px;color:var(--ink-2);display:grid;gap:5px;padding:0;margin:0;list-style:none}
.tbc-list-w li{display:flex;gap:8px;align-items:center}
.tbc-list-w li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);flex:none}
.elementor-widget.tbc-btn{opacity:.45;pointer-events:none}

/* In the editor, clicks on the buttons inside HTML widgets select the widget
   instead of pressing the button, so every element stays reachable. */
.elementor-editor-active .carousel-ctl-w .cbtn,.elementor-editor-active .hear-w .hear,
.elementor-editor-active .vt-play-w .play,.elementor-editor-active .q-chev svg{pointer-events:none}

/* ── profile pop-up content ──────────────────────────────────────────────
   Native text the JavaScript copies into the pop-up. Hidden on the page,
   laid out as plain editable blocks in the editor. */
body:not(.elementor-editor-active) .e-con.ag-profiles{display:none}
.e-con.ag-profiles{--gap:18px;padding-block:30px}
.e-con.ag-profiles-list{--gap:18px}
.e-con.ag-prof{--gap:8px;border:1px dashed var(--line-strong);border-radius:14px;
  --padding-block-start:16px;--padding-block-end:16px;--padding-inline-start:18px;--padding-inline-end:18px}
.ag-editor-note{font-family:var(--util);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.prof-label{font-family:var(--serif);font-size:20px;font-weight:600}
.prof-title,.prof-bio,.prof-intro,.prof-creds{font-size:13.5px;color:var(--ink-2)}


/* ── what you receive as native elements ─────────────────────────────── */
.e-con.ag-c.deliver{--display:grid;--gap:36px;gap:36px;--align-items:center;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:920px){.e-con.ag-c.deliver{grid-template-columns:1fr;--gap:26px;gap:26px}}
.e-con.ag-c.deliver-l,.e-con.ag-c.deliver-r{--gap:0px;gap:0px;--width:auto;min-width:0}
.e-con.ag-c .elementor-widget-text-editor.rcv-sub{margin-top:14px}
.e-con.ag-c.deliver-list{--gap:2px;gap:2px;margin-top:22px}
.e-con.ag-c.dl{--display:flex;--flex-direction:row;--gap:14px;gap:14px;--padding-block-start:14px;--padding-block-end:14px;border-bottom:1px solid var(--line)}
.e-con.ag-c.dl:last-child{border-bottom:0}
.elementor-widget.dl-ico{--width:auto;flex:none;width:32px;height:32px}
.e-con.ag-c.dl-txt{--gap:0px;gap:0px;--width:auto;flex:1 1 auto}
.elementor-widget.dl-title{font-size:14.5px;font-weight:700;margin-bottom:2px}
.e-con.ag-c .elementor-widget-text-editor.dl-desc{font-size:13px;color:var(--ink-2)}

.e-con.ag-c.reader{--gap:0px;gap:0px;--padding-block-start:18px;--padding-block-end:18px;--padding-inline-start:18px;--padding-inline-end:18px}
.e-con.ag-c.reader-bar{--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;--gap:12px;gap:12px;margin-bottom:14px;color:#cfc5ae;font-size:12px}
.elementor-widget.fname,.elementor-widget.page-of{--width:auto}
.elementor-widget.page-of{color:#cfc5ae;font-size:12px}
.e-con.ag-c.ag-page{--gap:0px;gap:0px;--padding-block-start:26px;--padding-block-end:26px;--padding-inline-start:24px;--padding-inline-end:24px;--flex-direction:column}
.e-con.ag-c.ag-page.on{--display:flex}
.elementor-widget.page-kicker{font-family:var(--util);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.e-con.ag-c .elementor-widget-text-editor.thin{font-size:11.5px;color:var(--ink-2)}
.e-con.ag-c .elementor-widget-text-editor.page-chart-cap{margin-bottom:10px}
.e-con.ag-c.page-rule{height:1px;min-height:1px;--min-height:1px;background:var(--line);margin:14px 0;--margin-block-start:14px;--margin-block-end:14px;flex:none}
.e-con.ag-c.page-fill{--flex-grow:1;--gap:0px;gap:0px;min-height:0}
.e-con.ag-c.page-centre{--display:grid;display:grid;place-items:center}
.elementor-widget.page-chart{--width:auto;width:auto}
.e-con.ag-c .elementor-widget-text-editor.page-foot{font-size:11px;color:var(--ink-2);line-height:1.5}
.e-con.ag-c .elementor-widget-text-editor.page-table{font-size:11px}
.e-con.ag-c.dasha-row{--display:flex;--flex-direction:row;--align-items:center;--gap:8px;gap:8px;font-size:11px;margin-bottom:7px;--margin-block-end:7px}
.elementor-widget.nm{--width:66px;width:66px;flex:none;font-weight:600}
.e-con.ag-c.dasha-bar{--display:block;--flex-grow:1;--width:auto;height:8px;--min-height:8px;border-radius:99px;background:var(--olive-mist);overflow:hidden}
.e-con.ag-c.dasha-fill{--height:100%;height:100%;min-height:8px;background:var(--olive);border-radius:99px}
.elementor-widget.yr{--width:82px;width:82px;flex:none;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.e-con.ag-c .elementor-widget-text-editor.page-callout{margin-top:14px;padding:11px 12px;background:var(--olive-mist);border-radius:9px;font-size:11px;line-height:1.55;color:#414a33}
.e-con.ag-c.rem{--display:flex;--flex-direction:row;--gap:9px;gap:9px;font-size:11.5px;--padding-block-start:7px;--padding-block-end:7px;border-bottom:1px solid #f4ecdd;line-height:1.45}
.elementor-widget.rem-label{--width:auto;color:var(--olive-deep);font-weight:700}
.e-con.ag-c .elementor-widget-text-editor.rem-text{font-size:11.5px;--width:auto;flex:1 1 auto}
.elementor-widget.reader-nav-w{margin-top:0}

/* ── watch a session as native elements ──────────────────────────────── */
.e-con.ag-c.vidbox{--gap:0px;gap:0px;position:relative;display:grid;place-items:center}
.e-con.ag-c.mock-session{--display:grid;display:grid;grid-template-columns:1.25fr 1fr;--gap:10px;gap:10px;--padding-block-start:12px;--padding-block-end:12px;--padding-inline-start:12px;--padding-inline-end:12px}
.e-con.ag-c.ms-tile{--gap:0px;gap:0px;display:grid;place-items:center}
.elementor-widget.ms-face-w{width:100%;height:100%;position:absolute;inset:0}
.elementor-widget.ms-face-w img{width:100%;height:100%;object-fit:cover;opacity:.92;display:block}
.elementor-widget.badge-live{--width:auto;position:absolute;top:10px;left:10px;z-index:4;background:rgba(130,50,50,.9);color:#fff;border-radius:5px;font-size:9px;font-weight:700;letter-spacing:.14em;padding:3px 7px}
.e-con.ag-c.ms-side{--display:grid;display:grid;grid-template-rows:auto 1fr;--gap:10px;gap:10px;min-height:0}
.e-con.ag-c.ms-chart{--gap:0px;gap:0px;display:grid;place-items:center;--padding-block-start:8px;--padding-block-end:8px;--padding-inline-start:8px;--padding-inline-end:8px}
.elementor-widget.ms-chart-svg{--width:auto;width:auto;line-height:0}
.e-con.ag-c.ms-notes{--gap:0px;gap:0px;--padding-block-start:10px;--padding-block-end:10px;--padding-inline-start:10px;--padding-inline-end:10px}
.elementor-widget.nh{font-family:var(--util);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#8f846c;margin-bottom:7px}
.e-con.ag-c.ms-lines{--gap:0px;gap:0px}
.e-con.ag-c .elementor-widget-text-editor.ms-line{font-size:10.5px;color:#ded4bd;padding:4px 0;border-bottom:1px solid #332c22}
.e-con.ag-c.vid-poster{--display:grid;display:grid;place-items:center;--gap:14px;gap:14px}
.elementor-widget.vid-play-w{--width:auto}
.elementor-widget-button.vid-play-w .elementor-button{width:64px;height:64px;padding:0;border-radius:50%;border:1px solid rgba(255,253,248,.6);background-color:rgba(255,253,248,.12);color:#fffdf8;display:grid;place-items:center;backdrop-filter:blur(6px)}
.elementor-widget-button.vid-play-w .elementor-button:hover{transform:scale(1.07);background-color:rgba(255,253,248,.24);color:#fffdf8}
.elementor-widget-button.vid-play-w .elementor-button-icon{font-size:22px;line-height:1}
.elementor-widget.poster-title{color:#e6ddcb;font-size:14px}
.elementor-widget.poster-note{color:#7d735f}
.e-con.ag-c.vid-poster.hide{display:none!important}

/* ── header as native elements ───────────────────────────────────────── */
.e-con.ag-c.ag-top{--gap:0px;gap:0px}
.e-con.ag-c.offers{--display:flex;--flex-direction:row;--align-items:center;--justify-content:center;--gap:0px;gap:0px;--padding-inline-start:16px;--padding-inline-end:16px}
.offers .offer-msg{display:none;--width:auto;transition:opacity .38s,transform .38s}
.offers .offer-msg.on{display:block}
.offers .offer-msg.fade{opacity:0;transform:translateY(8px)}
.e-con.ag-c.hdr{--gap:0px;gap:0px}
.e-con.ag-c.hdr-in{--display:flex;--flex-direction:row;--align-items:center;--gap:26px;gap:26px;max-width:1440px;margin-inline:auto;padding-inline:24px;--padding-inline-start:24px;--padding-inline-end:24px;height:70px}
.elementor-widget.hdr-mark{--width:auto}
.elementor-widget.hdr-mark .elementor-heading-title a{display:flex;align-items:center;gap:10px;color:var(--ink)}
.e-con.ag-c.nav-main{--display:flex;--flex-direction:row;--align-items:center;--gap:26px;gap:26px;--width:auto;margin-left:auto;font-size:14px;font-weight:500}
.elementor-widget.nav-link{--width:auto;font-size:14px;font-weight:500}
.nav-main .nav-link a{position:relative;padding:6px 0;color:var(--ink);transition:color .18s;display:inline-block}
.nav-main .nav-link a:hover,.nav-main .nav-link a.on{color:var(--olive)}
.nav-main .nav-link a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav-main .nav-link a.on::after{transform:scaleX(1)}
.e-con.ag-c.hdr-cta{--display:flex;--flex-direction:row;--align-items:center;--gap:10px;gap:10px;--width:auto;margin-left:6px}
.elementor-widget.burger-w{--width:auto;display:none}
@media(max-width:1040px){.e-con.ag-c.nav-main{display:none}.elementor-widget.burger-w{display:block}.e-con.ag-c.hdr-cta{margin-left:auto}}
.e-con.ag-c.spacer{height:102px;--min-height:102px}

/* ── the editor shows what the page hides ─────────────────────────────
   Pages 2–4 of the report, the five other ticker messages and the session
   notes are all hidden or animated on the live page; in the editor they are
   laid out plainly so every one can be selected and edited. */
body.elementor-editor-active .e-con.ag-c.ag-page{display:flex;--display:flex;aspect-ratio:auto;margin-bottom:12px;animation:none}
body.elementor-editor-active .offers{height:auto;flex-direction:column;--flex-direction:column;padding:6px 16px}
body.elementor-editor-active .offers .offer-msg{display:block;opacity:1;transform:none}
body.elementor-editor-active .e-con.ag-c .elementor-widget-text-editor.ms-line{opacity:1;transform:none}
body.elementor-editor-active .e-con.ag-c.vidbox{aspect-ratio:auto;display:block;overflow:visible}
body.elementor-editor-active .e-con.ag-c.mock-session{position:relative;aspect-ratio:16/9}
body.elementor-editor-active .e-con.ag-c.vid-poster{position:relative;inset:auto;margin-top:12px;border-radius:14px}