/* =================================================================
   PREMIUM LAYER — Lush gradients, glows, and depth
   Loaded LAST so it can layer on top of base styles
   ================================================================= */

/* ===== Ambient body aurora — slowly drifting gradients ===== */
body {
  background:
    radial-gradient(ellipse 70vw 60vh at 12% 8%,  rgba(14,61,51,0.10), transparent 60%),
    radial-gradient(ellipse 60vw 50vh at 92% 22%, rgba(210,106,79,0.07), transparent 60%),
    radial-gradient(ellipse 80vw 40vh at 50% 100%, rgba(14,61,51,0.06), transparent 65%),
    var(--bone);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 600px at var(--mx, 30%) var(--my, 25%), rgba(14,61,51,0.06), transparent 55%),
    radial-gradient(700px 500px at calc(100% - var(--mx, 30%)) var(--my, 70%), rgba(210,106,79,0.05), transparent 60%);
  animation: auroraDrift 36s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}
@keyframes auroraDrift {
  0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  50%  { transform: translate(-2%, 1.5%) rotate(2deg) scale(1.04); }
  100% { transform: translate(1%, -1.5%) rotate(-1deg) scale(1.02); }
}

/* ===== HERO — coral+jade aurora field behind the logo ===== */
.hero {
  background:
    radial-gradient(circle 80vmin at 50% 56%, rgba(216,181,127,0.10), transparent 50%),
    radial-gradient(circle 60vmin at 50% 56%, rgba(210,106,79,0.16), transparent 45%),
    radial-gradient(circle 50vmin at 50% 56%, rgba(14,61,51,0.20), transparent 50%),
    radial-gradient(ellipse 60vw 70vh at 12% 88%, rgba(14,61,51,0.14), transparent 65%),
    radial-gradient(ellipse 60vw 70vh at 88% 88%, rgba(210,106,79,0.10), transparent 65%),
    linear-gradient(180deg, var(--bone) 0%, color-mix(in oklab, var(--bone) 88%, var(--jade) 12%) 100%);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 50% 54%,
      transparent 0deg,
      rgba(210,106,79,0.05) 60deg,
      transparent 120deg,
      rgba(14,61,51,0.08) 200deg,
      transparent 260deg,
      rgba(210,106,79,0.04) 320deg,
      transparent 360deg);
  filter: blur(20px);
  animation: orbit 90s linear infinite;
  opacity: 0.9;
  z-index: 1;
}

/* Heart-shaped glow halo behind the hero mark (pulses with heartbeat) */
.hero-mark::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 50% 50%, rgba(210,106,79,0.45), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(14,61,51,0.30), transparent 58%),
    radial-gradient(circle at 35% 40%, rgba(216,181,127,0.18), transparent 42%);
  filter: blur(56px);
  animation: heartbeat var(--beat) ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Iridescent secondary glow that orbits */
.hero-mark::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(210,106,79,0.18) 0deg,
    transparent 60deg,
    rgba(14,61,51,0.22) 140deg,
    transparent 200deg,
    rgba(216,181,127,0.16) 280deg,
    transparent 340deg,
    rgba(210,106,79,0.18) 360deg);
  filter: blur(40px);
  animation: orbit 36s linear infinite;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-mark-img {
  /* slight gradient color shift over the silhouette */
  filter:
    brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(750%)
    hue-rotate(115deg) brightness(0.7) contrast(1.2)
    drop-shadow(0 0 80px rgba(210,106,79,0.35))
    drop-shadow(0 0 40px rgba(14,61,51,0.5));
  opacity: 0.22;
}

/* Hero italic accents — gradient fill for the editorial em words */
.hero-headline em {
  background: linear-gradient(120deg,
    var(--jade) 0%,
    var(--jade-2) 35%,
    var(--coral) 70%,
    var(--coral-2) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ===== DARK SECTIONS — jade aurora + grain ===== */
.on-dark,
.viz,
.footer {
  background:
    radial-gradient(ellipse 100vw 50vh at 10% 0%, rgba(14,61,51,0.45), transparent 60%),
    radial-gradient(ellipse 80vw 40vh at 90% 30%, rgba(210,106,79,0.10), transparent 60%),
    radial-gradient(ellipse 70vw 50vh at 50% 100%, rgba(14,61,51,0.35), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 85%, var(--jade) 15%) 100%);
  position: relative;
  isolation: isolate;
}
.on-dark::before,
.viz::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(210,106,79,0.06), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(14,61,51,0.20), transparent 45%);
  filter: blur(40px);
  animation: auroraDrift 30s ease-in-out infinite alternate;
}
.on-dark > *, .viz > *, .footer > * { position: relative; z-index: 2; }

/* JADE PULL section — richer gradient */
.pull {
  background:
    radial-gradient(ellipse 70vw 60vh at 50% 50%, rgba(31,111,96,0.40), transparent 60%),
    radial-gradient(ellipse 50vw 40vh at 20% 100%, rgba(210,106,79,0.18), transparent 60%),
    radial-gradient(ellipse 50vw 40vh at 80% 0%, rgba(210,106,79,0.12), transparent 60%),
    linear-gradient(135deg, #0E3D33 0%, #163C32 50%, #0A2A24 100%);
}
.pull::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(210,106,79,0.06) 60deg,
    transparent 120deg,
    rgba(255,255,255,0.04) 180deg,
    transparent 240deg,
    rgba(210,106,79,0.05) 300deg,
    transparent 360deg);
  animation: orbit 80s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* ===== BUTTON — animated gradient shine ===== */
.btn-primary {
  background:
    linear-gradient(120deg,
      var(--ink) 0%,
      color-mix(in oklab, var(--ink) 85%, var(--jade) 15%) 50%,
      var(--ink) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position 0.8s var(--ease-out), transform 0.4s var(--ease-out), color 0.3s;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.12) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(120deg,
    var(--coral) 0%,
    color-mix(in oklab, var(--coral) 80%, var(--jade) 20%) 50%,
    var(--coral) 100%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  color: var(--cream);
  box-shadow:
    0 14px 40px -16px rgba(210,106,79,0.55),
    0 0 0 1px rgba(210,106,79,0.3);
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-primary.on-dark-bg {
  background: linear-gradient(120deg, var(--bone) 0%, #FBF8EC 50%, var(--bone) 100%);
  color: var(--ink);
}
.btn-primary.on-dark-bg:hover {
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-2) 50%, var(--coral) 100%);
  color: var(--cream);
  box-shadow: 0 18px 44px -16px rgba(210,106,79,0.7);
}

.btn-ghost {
  position: relative;
  overflow: hidden;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--jade), var(--ink));
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
  z-index: 0;
}
.btn-ghost:hover::before { transform: translateY(0); }
.btn-ghost > * { position: relative; z-index: 1; }

/* ===== ROW-TAG: gradient italic num ===== */
.row-tag .num {
  background: linear-gradient(120deg, var(--jade), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.on-dark .row-tag .num,
.viz .row-tag .num,
.footer .row-tag .num {
  background: linear-gradient(120deg, var(--coral-2), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== STAT NUMBERS — gradient fill on the big numerals ===== */
.stat .num {
  background: linear-gradient(180deg, var(--bone) 0%, #C4BCA5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat .num em {
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== CARDS — cursor-aware gradient sweeps ===== */
.do-item, .pillar-item, .process-step, .bundle-card, .equip, .team-card, .service-row {
  --gx: 50%; --gy: 50%;
  position: relative;
}
.do-item::before,
.pillar-item::before,
.process-step::before,
.bundle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--gx) var(--gy),
    rgba(210,106,79,0.10),
    rgba(14,61,51,0.06) 30%,
    transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.do-item:hover::before,
.pillar-item:hover::before,
.process-step:hover::before,
.bundle-card:hover::before { opacity: 1; }
.do-item > *, .pillar-item > *, .process-step > *, .bundle-card > * {
  position: relative;
  z-index: 1;
}

/* Dark equip cards — different glow color */
.equip {
  --gx: 50%; --gy: 50%;
}
.equip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--gx) var(--gy),
    rgba(210,106,79,0.10),
    rgba(14,61,51,0.18) 35%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.equip:hover::before { opacity: 1; }
.equip > * { position: relative; z-index: 1; }

/* Pillar item icon dot - gradient */
.do-mark {
  background: linear-gradient(135deg, var(--ink) 0%, var(--jade) 60%, var(--ink-2) 100%);
  box-shadow:
    0 8px 24px -10px rgba(14,61,51,0.5),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.do-item:hover .do-mark {
  background: linear-gradient(135deg, var(--coral) 0%, var(--jade) 100%);
  box-shadow:
    0 14px 28px -10px rgba(210,106,79,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Bundle card — richer gradient base */
.bundle-card {
  background:
    radial-gradient(ellipse 100% 60% at 0% 0%, rgba(14,61,51,0.06), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 92%, var(--jade) 8%) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 20px 60px -30px rgba(14,61,51,0.25);
}
.bundle-card.peak {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgba(210,106,79,0.20), transparent 55%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(14,61,51,0.50), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 80%, var(--jade) 20%) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 70px -30px rgba(210,106,79,0.40);
}

/* Bundle big price - gradient */
.bundle-card .b-price {
  background: linear-gradient(120deg, var(--jade) 0%, var(--coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bundle-card.peak .b-price {
  background: linear-gradient(120deg, var(--coral) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Team portrait gradient overlay ===== */
.team-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(11,22,20,0.55) 100%),
    radial-gradient(circle at 50% 30%, transparent 60%, rgba(11,22,20,0.15) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s;
}
.team-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14,61,51,0.18) 0%, transparent 40%, rgba(210,106,79,0.10) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.team-card:hover .team-portrait::before { opacity: 1; }

/* ===== Marquee — gradient text ===== */
.marquee-item em {
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== CART — gradient panel ===== */
.cart {
  background:
    radial-gradient(ellipse 100% 50% at 100% 0%, rgba(210,106,79,0.16), transparent 55%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(14,61,51,0.35), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 85%, var(--jade) 15%) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 60px -30px rgba(11,22,20,0.6);
}
.cart-grand-val {
  background: linear-gradient(120deg, var(--coral-2) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== CHART — softer gradient on grid & fill ===== */
.chart {
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(210,106,79,0.10), transparent 60%),
    linear-gradient(180deg, rgba(242,237,223,0.03) 0%, transparent 50%);
}

/* ===== FOOTER WORDMARK — gradient stroke ===== */
.footer-wordmark {
  -webkit-text-stroke: 0;
  background: linear-gradient(120deg,
    rgba(242,237,223,0.10) 0%,
    rgba(210,106,79,0.35) 40%,
    rgba(216,180,127,0.30) 60%,
    rgba(242,237,223,0.12) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShift 14s ease-in-out infinite;
  text-shadow: none;
}
.footer-wordmark em { color: transparent; }

/* ===== NAV scrolled — gradient frosted ===== */
.nav.scrolled {
  background: linear-gradient(180deg,
    rgba(242,237,223,0.85) 0%,
    rgba(242,237,223,0.65) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 10px 40px -20px rgba(14,61,51,0.10);
}

/* ===== Map gradient overlay ===== */
.map {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(210,106,79,0.18), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,61,51,0.35), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, #0A1614 100%);
}

/* ===== Contact icon — gradient ===== */
.contact-icon {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%),
    linear-gradient(135deg, var(--bone-2) 0%, var(--bone-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ===== Subtle vignette on hero edges ===== */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(11,22,20,0.06) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ===== Section gradient washes ===== */
#philosophy {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(14,61,51,0.08), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(210,106,79,0.06), transparent 60%);
}
#team {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(14,61,51,0.07), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(210,106,79,0.05), transparent 60%);
}
#measure {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(14,61,51,0.05), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(210,106,79,0.04), transparent 60%);
}
#process {
  background:
    radial-gradient(ellipse 50% 50% at 0% 50%, rgba(14,61,51,0.06), transparent 55%);
}
#services {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(210,106,79,0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(14,61,51,0.05), transparent 60%);
}
#contact {
  background:
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(14,61,51,0.06), transparent 60%);
}

/* ===== Section dividers — subtle radial halos ===== */
.section + .section,
.section + .on-dark,
.on-dark + .section,
.pull + .section,
.viz + .section,
.section + .pull {
  position: relative;
}

/* ===== Team portrait tag — gradient bg ===== */
.team-portrait .tag {
  background:
    linear-gradient(135deg, rgba(11,22,20,0.85), rgba(14,61,51,0.85));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 16px -6px rgba(0,0,0,0.4);
}

/* ===== Pillars ribbon — gradient row depth ===== */
.pillars-ribbon {
  background:
    linear-gradient(180deg, transparent 0%, rgba(14,61,51,0.04) 100%);
}
.pillar-item h4 em {
  background: linear-gradient(120deg, var(--jade) 0%, var(--coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== Service row selected — gradient accent ===== */
.service-row.selected {
  background: linear-gradient(90deg, rgba(14,61,51,0.04), transparent);
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--jade), var(--coral)) 1;
  padding-left: 16px !important;
  margin-left: -19px !important;
}
.service-row .check {
  background: linear-gradient(135deg, transparent, rgba(14,61,51,0.05));
}
.service-row.selected .check {
  background: linear-gradient(135deg, var(--jade) 0%, var(--coral) 100%);
  border-color: var(--coral);
  box-shadow: 0 6px 16px -6px rgba(210,106,79,0.4);
}

/* ===== Bundle card includes pills — gradient borders ===== */
.bundle-card .b-includes span {
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.bundle-card.peak .b-includes span {
  background: linear-gradient(135deg, rgba(210,106,79,0.10), rgba(14,61,51,0.10));
  border-color: rgba(216,181,127,0.20);
  color: var(--bone);
}

/* ===== Modal — gradient panel ===== */
.modal {
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(14,61,51,0.45), rgba(11,22,20,0.75));
}
.modal-card {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(210,106,79,0.06), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 40px 120px -30px rgba(11,22,20,0.5);
}

/* ===== Equip visuals — pulse glow ===== */
.equip-visual {
  filter: drop-shadow(0 0 20px rgba(210,106,79,0.25));
}
.equip:hover .equip-visual {
  filter: drop-shadow(0 0 40px rgba(210,106,79,0.5));
}

/* ===== Process step :hover gradient bar ===== */
.process-step::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--jade), var(--coral), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
  z-index: 2;
}
.process-step:hover::after { transform: scaleX(1); }

/* ===== Cart bundle button gradient on hover ===== */
.bundles .bundle-btn:hover {
  background: linear-gradient(120deg, var(--bone) 0%, var(--coral-soft) 100%);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(210,106,79,0.4);
}
.bundles .bundle-btn.active {
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-2) 100%);
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(210,106,79,0.55);
}

/* ===== Iridescent shimmer for the very large display text ===== */
.split-body p strong {
  background: linear-gradient(120deg, var(--ink) 0%, var(--jade) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
  font-weight: 500;
}