/* ==========================================================================
   TAROT PAGE — Section 1: Recognition (hero)
   ==========================================================================
   Background matches the Tarot pillar's tone on the parent Services page
   (#2b1730) — a visitor arriving via "Explore Tarot →" lands on a color
   that continues rather than resets, so the click-through feels like one
   continuous motion rather than a page reload into somewhere new.
   ========================================================================== */

/* ==========================================================
   TAROT HERO
   Editorial / Cinematic Layout
   ========================================================== */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            #0b0710 0%,
            #160b19 34%,
            #241027 62%,
            #2b1730 100%
        );

    padding-block: clamp(4.5rem, 6vw, 6.5rem);
}


/* ==========================================================
   ATMOSPHERIC BACKGROUND
   ========================================================== */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 42% 48%,
            transparent 0,
            transparent 80px,
            rgba(201, 168, 97, 0.075) 81px,
            rgba(201, 168, 97, 0.075) 82px,
            transparent 83px
        ),
        radial-gradient(
            circle at 42% 48%,
            transparent 0,
            transparent 140px,
            rgba(201, 168, 97, 0.055) 141px,
            rgba(201, 168, 97, 0.055) 142px,
            transparent 143px
        ),
        radial-gradient(
            circle at 42% 48%,
            transparent 0,
            transparent 205px,
            rgba(201, 168, 97, 0.04) 206px,
            rgba(201, 168, 97, 0.04) 207px,
            transparent 208px
        ),
        radial-gradient(
            circle at 42% 48%,
            transparent 0,
            transparent 275px,
            rgba(201, 168, 97, 0.025) 276px,
            rgba(201, 168, 97, 0.025) 277px,
            transparent 278px
        );

    pointer-events: none;
    z-index: -3;
}


/* Soft plum atmosphere */

.hero::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: -300px;
    top: -180px;

    background:
        radial-gradient(
            circle,
            rgba(104, 54, 98, 0.18) 0%,
            rgba(104, 54, 98, 0.06) 42%,
            transparent 72%
        );

    pointer-events: none;
    z-index: -3;
}


/* ==========================================================
   INNER LAYOUT
   ========================================================== */

.hero__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: clamp(3rem, 5vw, 6rem);

    min-height: min(760px, 78vh);

    text-align: left;
}


/* ==========================================================
   LEFT CONTENT
   ========================================================== */

.hero__content {
    position: relative;
    z-index: 3;

    max-width: 620px;
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.hero__eyebrow {
    margin: 0 0 var(--space-5);

    color: var(--color-gold);

    font-size: 0.7rem;
    line-height: 1.4;

    font-weight: var(--weight-medium);

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


/* ==========================================================
   HEADLINE
   ========================================================== */

.hero__headline {
    margin: 0;

    max-width: 13ch;

    font-family: var(--font-display);

    font-weight: var(--weight-regular);

    font-size:
        clamp(
            3rem,
            4.5vw,
            4.8rem
        );

    line-height: 1.03;

    letter-spacing: -0.025em;

    color: var(--color-paper);
}


/* Gold emphasis */

.hero__headline .mark-gold-deep {
    color: var(--color-gold-deep);

    font-weight: var(--weight-regular);
}


/* ==========================================================
   DIVIDER
   ========================================================== */

.hero__divider {
    display: flex;

    align-items: center;

    width: min(100%, 500px);

    margin-top: clamp(2rem, 3vw, 2.5rem);

    gap: 0.7rem;
}


.hero__divider > span:first-child,
.hero__divider > span:last-child {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(201, 168, 97, 0.02),
            rgba(201, 168, 97, 0.65)
        );
}


.hero__divider > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 168, 97, 0.65),
            rgba(201, 168, 97, 0.02)
        );
}


.hero__divider-mark {
    flex: 0 0 auto;

    color: var(--color-gold);

    font-family: var(--font-display);

    font-size: 1.25rem;

    line-height: 1;

    transform: translateY(-1px);
}


/* ==========================================================
   RECOGNITION GRID
   ========================================================== */

.hero__body {
    display: none;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        1.35rem
        2.5rem;

    max-width: 600px;

    margin-top: 2rem;
}


.hero__point {
    position: relative;

    min-width: 0;

    padding-left: 1.15rem;
}


.hero__point::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.25rem;

    width: 1px;
    height: 2.5rem;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(201, 168, 97, 0.9),
            rgba(201, 168, 97, 0.15)
        );
}


.hero__point p {
    margin: 0;

    max-width: 30ch;

    color:
        rgba(255, 248, 243, 0.84);

    font-size: 0.9rem;

    line-height: 1.7;

    letter-spacing: 0.005em;

    transition:
        color 240ms ease,
        transform 240ms ease;
}


.hero__point:hover p {
    color: var(--color-paper);

    transform: translateX(3px);
}


/* ==========================================================
   WHISPER
   ========================================================== */

.hero__whisper {
    margin:
        2rem
        0
        0;

    max-width: 560px;

    color:
        rgba(255, 248, 243, 0.7);

    font-family: var(--font-display);

    font-size: 1rem;

    line-height: 1.65;

    font-style: italic;
}


.hero__whisper span {
    color: var(--color-gold);

    opacity: 0.95;
}


/* ==========================================================
   CTA
   ========================================================== */

.hero__cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 1.3rem;

    margin-top: 1.75rem;

    padding:
        0.9rem
        1.55rem;

    border-radius: 999px;

    background:
        rgba(75, 24, 67, 0.78);

    border: 1px solid
        rgba(201, 168, 97, 0.04);

    color: var(--color-gold);

    text-decoration: none;

    font-size: 0.9rem;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2);

    transition:
        transform 240ms ease,
        background 240ms ease,
        box-shadow 240ms ease;
}


.hero__cta-arrow {
    font-size: 1.15rem;

    transition:
        transform 240ms ease;
}


.hero__cta:hover {
    transform: translateY(-2px);

    background:
        rgba(91, 29, 81, 0.9);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.32);
}


.hero__cta:hover .hero__cta-arrow {
    transform: translateX(4px);
}


/* ==========================================================
   RIGHT VISUAL
   ========================================================== */

.hero__visual {
    position: relative;

    min-height: min(760px, 72vh);

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
}


.hero__image-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: 10px;
    box-shadow:
        0 20px 45px rgba(11, 7, 16, 0.22),
        0 8px 20px rgba(76, 36, 68, 0.18);
    transform: translateY(-4px);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero__image-wrap:hover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 55px rgba(11, 7, 16, 0.26),
        0 10px 26px rgba(76, 36, 68, 0.22);
}


/* ==========================================================
   IMAGE — CINEMATIC BLEND
   ========================================================== */

.hero__image-wrap::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #0b0710 0%,
            rgba(11, 7, 16, 0.94) 4%,
            rgba(11, 7, 16, 0.72) 11%,
            rgba(11, 7, 16, 0.35) 21%,
            rgba(11, 7, 16, 0.08) 34%,
            transparent 46%
        );

    pointer-events: none;
}


/* Bottom fade into section */

.hero__image-wrap::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(11, 7, 16, 0.32),
            transparent
        );

    pointer-events: none;
}


.hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(0.94)
        contrast(1.04);

    transform: scale(1.015);
    border-radius: 10px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .hero__inner {
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(0, 1.22fr);

        gap: 3rem;
    }


    .hero__headline {
        font-size:
            clamp(
                2.8rem,
                5vw,
                4rem
            );
    }


    .hero__visual {
        min-height: 600px;
    }


    .hero__image-wrap {
        width: 100%;
        margin: 0;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .hero {
        padding-block:
            var(--space-8)
            var(--space-9);
    }


    .hero__inner {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        min-height: auto;

        gap: 3rem;

        text-align: left;
    }


    .hero__content {
        max-width: none;
    }


    .hero__eyebrow {
        margin-bottom: 1.15rem;

        font-size: 0.64rem;

        letter-spacing: 0.18em;
    }


    .hero__headline {
        max-width: 13ch;

        font-size:
            clamp(
                2.65rem,
                11.5vw,
                4rem
            );

        line-height: 1.03;
    }


    .hero__divider {
        margin-top: 1.9rem;
    }


    .hero__body {
        grid-template-columns: 1fr;

        gap: 1.35rem;

        margin-top: 1.8rem;
    }


    .hero__point p {
        max-width: 38ch;

        font-size: 0.86rem;

        line-height: 1.65;
    }


    .hero__whisper {
        margin-top: 1.8rem;

        font-size: 0.95rem;

        line-height: 1.6;
    }


    .hero__cta {
        margin-top: 1.6rem;
    }


    /* Hide the hero image on mobile */

    .hero__visual {
        display: none;
    }


    .hero__image-wrap {
        display: none;
    }


    /* On mobile the fade comes from top */

    .hero__image-wrap::before {
        background:
            linear-gradient(
                to bottom,
                rgba(11, 7, 16, 0.5) 0%,
                rgba(11, 7, 16, 0.14) 20%,
                transparent 42%
            );
    }


    .hero__image-wrap::after {
        height: 22%;

        background:
            linear-gradient(
                to top,
                rgba(11, 7, 16, 0.28),
                transparent
            );
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 420px) {

    .hero__headline {
        font-size: 2.45rem;
    }


    .hero__point {
        padding-left: 1rem;
    }


    .hero__point p {
        font-size: 0.82rem;
    }


    .hero__visual {
        min-height: 290px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero__point p,
    .hero__cta,
    .hero__cta-arrow {
        transition: none;
    }

}


/* ==========================================================================
   TAROT PAGE — Section 2: Gentle Introduction
   ==========================================================================
   50/50 split, .section--paper — the first breath of light on the page
   after the dark hero, and the first image. Personal, first-person
   copy, so the layout gives it a face (image) rather than another
   block of centered type.
   ========================================================================== */




   .intro__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }
}

.intro__content > * + * {
  margin-top: var(--space-4);
}

.intro__content h2 {
  max-width: 18ch;
  color: var(--color-gold-deep);
}

@media (max-width: 767px) {
  .intro__content h2 { font-size: var(--text-xl); }
}

.intro__content p {
  line-height: var(--leading-loose);
}

/* ---- The poetic triplet -------------------------------------------------
   A small stair-step indent per line — enough to read as a breath, not
   a bulleted list. */

.intro__conversation {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink-soft);
}

@media (max-width: 767px) {
  .intro__conversation { display: none; }
}

.intro__conversation-lead {
  margin: 0;
}

.intro__conversation-line {
  margin-top: var(--space-1);
}

/* .intro__conversation-line:nth-child(2) { margin-left: var(--space-3); }
.intro__conversation-line:nth-child(3) { margin-left: var(--space-5); }
.intro__conversation-line:nth-child(4) { margin-left: var(--space-6); } */

.intro__whisper {
  margin-top: var(--space-6) !important;
}

.intro__media {
  position: relative;
}

.intro__media picture,
.intro__media--mobile picture {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 18px 24px 38px rgba(17, 10, 18, 0.20), 0 12px 22px rgba(75, 24, 67, 0.14);
  background: rgba(17, 10, 18, 0.04);
}

.intro__media img,
.intro__media--mobile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.intro__media--mobile {
  display: none;
}

@media (max-width: 767px) {
  .intro__media { display: none; }
  .intro__media--mobile {
    display: block;
    margin-top: var(--space-7);
  }
  .intro__media--mobile img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ==========================================================================
   TAROT PAGE — Section 3: Different Depths (main section)
   ==========================================================================
   Deliberately NOT a 3-card grid — Services already has that pattern.
   Instead: a tall pinned "scrollytelling" wrapper (Apple product-page
   style). .branches is 320vh tall; .branches__sticky pins for that
   entire scroll distance right below the global nav (using the same
   --site-nav-height var set sitewide by animation.js); scroll position
   within that tall wrapper decides which of the 3 stacked panels is
   active. Below 1024px this whole mechanism is disabled — see the
   mobile overrides — and panels just stack normally.
   ========================================================================== */

.branches-intro {
  text-align: center;
  padding-block: var(--space-9);
  background: linear-gradient(
        180deg,
        #2b1730 0%,
        #221226 35%,
        #130d15 70%,
        #000000 100%
    );
}

.branches-intro h2 {
  color: var(--color-gold-deep);
  max-width: 24ch;
  margin-inline: auto;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-7);
  font-size: var(--text-2xl);
}

@media (max-width: 767px) {
  .branches-intro h2 { font-size: var(--text-xl); }
}

.branches-intro__body {
  margin-top: var(--space-3);
  max-width: 44ch;
  margin-inline: auto;
  line-height: var(--leading-loose);
  color: var(--color-blush);
}


.branches-intro__whisper {
  margin-top: var(--space-5) !important;
  margin-inline: auto;
}

/* ---- Pinned wrapper ------------------------------------------------- */

.branches {
  position: relative;
  height: 320vh;
}

.branches__sticky {
  position: sticky;
  top: var(--site-nav-height, 4.5rem);
  height: calc(100vh - var(--site-nav-height, 4.5rem));
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .branches { height: auto; }
  .branches__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding-block: var(--space-8);
  }
}

.branches__layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--space-9);
  width: 100%;
  align-items: center;
}

@media (max-width: 1023px) {
  .branches__layout { display: block; }
}

/* ---- Vertical timeline ------------------------------------------------ */

.branches__timeline {
  position: relative;
}

@media (max-width: 1023px) {
  .branches__timeline { display: none; }
}

.branches__timeline-list {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.branches__timeline-list::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background-color: var(--color-line);
  z-index: 0;
}

.branches__timeline-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  transition: color var(--duration-base) var(--ease-soft);
}

.branches__timeline-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.4px solid var(--color-line);
  background-color: var(--color-paper);
  transition: background-color var(--duration-base) var(--ease-soft),
              border-color var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft);
}

.branches__timeline-node:hover { color: var(--color-ink); }

.branches__timeline-node.is-active {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

.branches__timeline-node.is-active .branches__timeline-dot {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.3);
}

/* ---- Crossfading panels ------------------------------------------------ */

.branches__panels {
  display: grid;
}

.branches__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft), visibility 0s linear 500ms;
}

.branches__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .branches__panel { transform: none; }
}

@media (max-width: 1023px) {
  .branches__panels {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .branches__panel {
    position: static;
    grid-template-columns: 1fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin-bottom: 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl, 1.5rem);
    background-color: color-mix(in srgb, var(--color-ink) 3%, var(--color-paper));
    border: 1px solid var(--color-line);
  }

  .branches__panel-media {
    margin-top: var(--space-5);
  }
}

@media (max-width:767px){
  .branches__panel{
    padding: var(--space-3)
  }
}

.branches__panel-text {
  max-height: calc(100vh - var(--site-nav-height, 4.5rem) - var(--space-9) * 2);
  overflow-y: auto;
  padding-right: var(--space-2);
}

@media (max-width: 1023px) {
  .branches__panel-text { max-height: none; overflow-y: visible; padding-right: 0; }
}

.branches__panel-media {
  max-width: 280px;
  margin-inline: auto;
}

/* ---- Text content ------------------------------------------------------ */

.branches__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.branches__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
}

.branches__tagline {
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--color-ink-soft);
}

.branches__panel-text > p {
  margin-top: var(--space-3);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.branches__note {
  font-size: var(--text-sm);
  font-style: italic;
}

@media (max-width: 1023px) {
  .branches__note { display: none; }
}

.branches__offers { margin-top: var(--space-4); }

.branches__offers-heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.branches__offers ul { list-style: none; }

.branches__offers li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.branches__offers li + li { margin-top: var(--space-2); }

.branches__offers li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.branches__bridge {
  margin-top: var(--space-5) !important;
}

.branches__meta {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.branches__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.branches__meta-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.branches__meta-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.branches__cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full, 999px);
  background-color: var(--color-accent);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition: background-color var(--duration-base) var(--ease-soft);
}

.branches__cta:hover {
  background-color: var(--color-accent-deep, var(--color-accent));
}

/* ==========================================================================
   TAROT PAGE — Section 4: Quick Compare (plum)
   ==========================================================================
   Same #2b1730 as this page's hero/pillar — continuity, not a new tone.
   Still not a table: no cell borders, no shadows. --color-line (a dark
   ink-based token) wouldn't read on this background, so dividers and
   hover states here use translucent --color-paper instead.
   ========================================================================== */

.quick-compare {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #130d15 30%,
    #221226 65%,
    #2b1730 100%
);
}

.quick-compare__heading {
  margin-bottom: var(--space-8);
  color: var(--color-gold-deep);
}

.quick-compare__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .quick-compare__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.quick-compare__column {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  text-align: center;
  transition: background-color var(--duration-base) var(--ease-soft);
}

.quick-compare__column + .quick-compare__column {
  border-left: 1px solid color-mix(in srgb, var(--color-paper) 18%, transparent);
}

@media (max-width: 767px) {
  .quick-compare__column + .quick-compare__column {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--color-paper) 18%, transparent);
    padding-top: var(--space-6);
  }
}

.quick-compare__column:hover {
  background-color: color-mix(in srgb, var(--color-paper) 6%, transparent);
}

.quick-compare__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-paper);
}

.quick-compare__duration {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-gold);
}

.quick-compare__tagline {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-paper);
}

.quick-compare__theme {
  margin-top: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-blush);
}

.quick-compare__price {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 18%, transparent);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-paper);
}

/* ==========================================================================
   TAROT PAGE — Section 5: Process
   ==========================================================================
   Horizontal row on desktop (→), vertical stack on mobile (↓) — same
   markup, the arrow glyph just rotates 90deg at the small breakpoint
   instead of needing separate content for each layout.
========================================================================== */


.process {
  padding-block: var(--space-11);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.75px, transparent 0.75px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025));
  background-size: 16px 16px, 100% 100%;
}

   .process__heading {
  margin-bottom: var(--space-8);
  color: var(--color-ink);
}

.process__steps {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .process__steps {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 8rem;
  text-align: center;
}

.process__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-gold-deep);
}

.process__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.process__arrow {
  color: var(--color-line);
  font-size: var(--text-lg);
  flex-shrink: 0;
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .process__arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   TAROT PAGE — Section 6: Closing
   ==========================================================================
   Same quiet signature-style closing as the Services page's final
   section — no boxed button, first-person voice, the exhale after the
   pricing/process sections. .section--blush for alternation, since
   Process (right before this) already used .section--paper.
   ========================================================================== */

   .closing {
    background: linear-gradient(
        180deg,
        #2b1730 0%,
        #221226 35%,
        #130d15 70%,
        #000000 100%
    );
    padding-block: var(--space-9);
  }
    
.closing h2 {
  color: var(--color-gold-deep);
  margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
  .closing h2 { font-size: var(--text-xl); }
}

   .closing__inner {
  max-width: 40rem;
  margin-inline: auto;
}

.closing__body {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

@media (max-width: 767px) {
  .closing__body { font-size: var(--text-sm); }
}



.closing__signature {
  margin-top: var(--space-6) !important;
  margin-inline: auto;
}

.closing__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  background: transparent;
  transition: background-color 250ms var(--ease-soft), color 250ms var(--ease-soft), transform 250ms var(--ease-soft);
  margin-top: var(--space-6);
}

.closing__cta:hover,
.closing__cta:focus-visible {
  color: var(--color-paper);
  background-color: var(--color-gold);
  transform: translateY(-1px);
}