/* ── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--color-ivory);
      color: var(--color-oud);
      -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }

    /* ── HERO (full-bleed bg image) ───────────────────── */
    .hero-title {
      font-family: var(--font-brand);
      font-weight: 400;
      font-size: clamp(2.6rem, 4.2vw, 4.6rem);
      line-height: 1.05;
      letter-spacing: 0em;
      color: var(--color-on-dark);
      margin-bottom: 14px;
      text-shadow: 0 2px 24px rgba(10,4,0,0.55);
    }
    .hero-title em {
      font-family: var(--font-brand);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(2rem, 3.2vw, 3.4rem);
      color: rgba(250,247,242,0.88);
      display: block;
      margin-top: 8px;
      letter-spacing: 0em;
    }
    .hero-script-line {
      font-family: var(--font-display);
      font-weight: 300;
      font-style: italic;
      font-size: clamp(2rem, 3.2vw, 3.4rem);
      color: rgba(250,247,242,0.88);
      line-height: 1.1;
      margin-bottom: 32px;
      display: block;
      text-shadow: 0 2px 16px rgba(10,4,0,0.45);
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
    /* trust strip removed — redundant with cert pill */

    .hero-cert-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(20,14,8,0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 0.5px solid rgba(234,224,206,0.4);
      border-radius: var(--card-radius);
      padding: 12px 18px;
      white-space: nowrap;
      margin-top: 20px;
      text-decoration: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .hero-cert-pill:hover {
      border-color: rgba(234,224,206,0.7);
      background: rgba(20,14,8,0.6);
    }
    .hero-cert-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(201,168,76,0.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .hero-cert-icon svg { width: 14px; height: 14px; fill: var(--color-gold); }
    .hero-cert-photo {
      width: 48px; height: 48px;
      border-radius: 50%;
      overflow: hidden;
      border: 1.5px solid rgba(201,168,76,0.6);
      flex-shrink: 0;
    }
    .hero-cert-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
      transform: scale(2.4);
      transform-origin: 51% 33%;
    }
    .hero-cert-label { font-size: 0.9rem; color: rgba(250,247,242,0.92); font-weight: 500; }
    .hero-cert-sub { font-size: 0.75rem; color: rgba(250,247,242,0.6); margin-top: 2px; }
    .hero-subtext {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 1.5vw, 1.1rem);
      color: var(--color-ivory);
      line-height: 1.85;
      margin-bottom: 20px;
      opacity: 0.85;
    }
    .hero-meta {
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: var(--color-ivory);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.65;
      text-shadow: 0 2px 12px rgba(10,4,0,0.4);
      margin-bottom: 32px;
    }

    /* ── HERO ENTRANCE — signature moment ────────────────
       Cascading reveal on load, timed to the copy itself:
       the page literally says "Awaken the healer within you" —
       so the content wakes up in that order, with the gold
       "within you" line getting an extra glow-in as the payoff.
       ───────────────────────────────────────────────────── */
    @keyframes heroReveal {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* Dedicated end-opacity keyframes for elements with a resting opacity
       below 1 — heroReveal's "to" hard-codes opacity:1, and with
       animation-fill-mode:forwards that permanently overrides any static
       opacity on the element once the animation completes, no matter what
       the class rule itself specifies. */
    @keyframes heroRevealFade85 {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 0.85; transform: translateY(0); }
    }
    @keyframes heroRevealFade65 {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 0.65; transform: translateY(0); }
    }
    @keyframes heroGlow {
      0%   { opacity: 0; transform: translateY(14px) scale(0.97); text-shadow: 0 2px 16px rgba(10,4,0,0.45); }
      60%  { opacity: 1; transform: translateY(0) scale(1.01); }
      100% { opacity: 1; transform: translateY(0) scale(1); text-shadow: 0 2px 16px rgba(10,4,0,0.45); }
    }
    .hero-text-col .eyebrow          { opacity: 0; animation: heroReveal 0.8s cubic-bezier(.22,1,.36,1) 0.15s forwards; }
    .hero-text-col .hero-title       { opacity: 0; animation: heroReveal 0.8s cubic-bezier(.22,1,.36,1) 0.32s forwards; }
    .hero-text-col .hero-script-line { opacity: 0; animation: heroGlow   1.1s cubic-bezier(.22,1,.36,1) 0.55s forwards; }
    .hero-text-col .hero-subtext     { opacity: 0; animation: heroRevealFade85 0.8s cubic-bezier(.22,1,.36,1) 0.85s forwards; }
    .hero-text-col .hero-meta        { opacity: 0; animation: heroRevealFade65 0.8s cubic-bezier(.22,1,.36,1) 1.15s forwards; }
    .hero-text-col .hero-actions     { opacity: 0; animation: heroReveal 0.8s cubic-bezier(.22,1,.36,1) 1.3s  forwards; }
    .hero-text-col .hero-cert-pill   { opacity: 0; animation: heroReveal 0.8s cubic-bezier(.22,1,.36,1) 1.45s forwards; }
    @media (prefers-reduced-motion: reduce) {
      .hero-text-col .eyebrow, .hero-text-col .hero-title,
      .hero-text-col .hero-actions, .hero-text-col .hero-cert-pill {
        animation: none; opacity: 1; transform: none;
      }
      .hero-text-col .hero-subtext { animation: none; opacity: 0.85; transform: none; }
      .hero-text-col .hero-meta    { animation: none; opacity: 0.65; transform: none; }
      .hero-text-col .hero-script-line {
        animation: none; opacity: 1; transform: none;
        text-shadow: 0 2px 16px rgba(10,4,0,0.45);
      }
    }

    /* ── MARQUEE ───────────────────────────────────────── */
    .marquee-strip { background: var(--color-oud); padding: 15px 0; overflow: hidden; }
    .marquee-track {
      display: flex;
      gap: 44px;
      align-items: center;
      animation: marquee 30s linear infinite;
      white-space: nowrap;
    }
    @keyframes marquee { to { transform: translateX(-50%); } }
    .marquee-track span {
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(250,247,242,0.6);
      flex-shrink: 0;
    }
    .marquee-track .dot { color: var(--color-gold); font-size: 0.6rem; }

    /* ── WHY GRID ──────────────────────────────────────── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: var(--border-default);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--card-shadow);
    }
    .why-card {
      padding: 48px 38px;
      background: var(--color-ivory);
      border-right: var(--border-default);
      transition: background 0.2s;
    }
    .why-card:last-child { border-right: none; }
    .why-card:hover { background: var(--hover-card-bg); }
    .why-icon {
      width: 44px;
      height: 44px;
      color: var(--color-gold);
      margin-bottom: 22px;
    }
    .why-icon svg { width: 100%; height: 100%; }
    .why-title {
      font-family: var(--font-display);
      font-size: 1.45rem;
      font-weight: var(--fw-display-impact);
      color: var(--color-oud);
      margin-bottom: 12px;
    }
    .why-desc { font-size: 1rem; color: var(--color-cognac); line-height: 1.82; }

    /* ── PROCESS ───────────────────────────────────────── */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: var(--border-default);
      border-radius: var(--card-radius);
      /* overflow:hidden removed so hover lift isn't clipped */
      box-shadow: var(--card-shadow);
    }
    .process-step {
      padding: 44px 34px;
      background: var(--color-ivory);
      border-right: var(--border-default);
      position: relative;
      transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.2s;
      cursor: default;
    }
    /* Preserve corner rounding without overflow:hidden */
    .process-step:first-child { border-radius: var(--card-radius) 0 0 var(--card-radius); }
    .process-step:last-child  { border-right: none; border-radius: 0 var(--card-radius) var(--card-radius) 0; }
    .process-step:hover {
      background: var(--hover-card-bg);
      transform: translateY(-7px);
      box-shadow: 0 14px 36px rgba(42,27,18,0.13);
      z-index: 2;
    }
    .process-num {
      font-family: var(--font-brand);
      font-size: 3rem;
      color: var(--color-gold);
      line-height: 1;
      margin-bottom: 22px;
      font-weight: var(--fw-display-impact);
    }
    .process-title {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: var(--fw-display-impact);
      color: var(--color-oud);
      margin-bottom: 12px;
    }
    .process-desc { font-size: 1rem; color: var(--color-cognac); line-height: 1.8; }

    /* ── TESTIMONIALS ──────────────────────────────────── */
    .testimonials-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 800px; margin: 0 auto; }
    .testimonial-card {
      background: rgba(250,247,242,0.04);
      border: 0.5px solid rgba(201,168,76,0.18);
      border-radius: var(--card-radius);
      padding: 36px 30px;
    }
    .testimonial-stars { display: flex; gap: 4px; margin-bottom: 20px; }
    .star {
      width: 10px; height: 10px;
      background: var(--color-gold);
      clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    }
    .testimonial-quote {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-style: italic;
      font-weight: var(--fw-display-regular);
      color: rgba(250,247,242,0.82);
      line-height: 1.72;
      margin-bottom: 22px;
    }
    .testimonial-author { font-size: 0.85rem; color: rgba(250,247,242,0.55); letter-spacing: 0.08em; }

    /* ── CTA ───────────────────────────────────────────── */
    .cta-section { background: var(--color-linen); padding: var(--section-padding) 0; text-align: center; }
    .cta-section h2 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 3.8vw, 3.4rem);
      font-weight: var(--fw-display-impact);
      color: var(--color-oud);
      line-height: 1.1;
      margin-bottom: 18px;
    }
    .cta-section p { font-size: 1rem; color: var(--color-cognac); line-height: 1.9; max-width: 420px; margin: 0 auto 40px; }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ── RESPONSIVE ────────────────────────────────────── */
    @media (max-width: 960px) {
      .why-grid { grid-template-columns: 1fr; }
      .why-card { border-right: none; border-bottom: var(--border-default); }
      .process-steps { grid-template-columns: 1fr 1fr; }
      .testimonials-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 var(--container-mobile); }
      .pkg-row { grid-template-columns: 1fr; }
      .process-steps { grid-template-columns: 1fr; }
    }