/* ==========================================================================
   SERVICES PAGE — page-specific overrides
   ==========================================================================
   No new color tokens defined here. .section--plum (layout.css) already
   handles the dark-background text cascade; .card, .eyebrow, .lead,
   .whisper, .statement, .btn--text (components.css) are all reused as-is.
   Everything below is layout/spacing/illustration specific to this hero.
   ========================================================================== */

/* ------------------------------------------------------------------------
   HERO v2 — orientation, not just introduction.
   Structure: illustration → headline → lead → bridge line → 3 path
   cards → closing statement → scroll cue. Two distinct visual anchors
   (illustration, then cards) instead of one long reading block, per the
   "quicker comprehension" direction: where am I / what exists / what do
   I do next, inside five seconds.
   ------------------------------------------------------------------------ */
.page-services .hero {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  /* background-color: var(--color-plum);
  color: var(--color-paper); */
  background: linear-gradient(
    180deg,
    #2c1732 0%,
    #241228 35%)

}

.hero {
  position: relative;   /* zaroori hai — warna glow poore page pe fail jayega */
  overflow: hidden;      /* glow ke edges ko section ke andar hi crop karta hai */
}

.hero::before {
  content: "";
  position: absolute;
  inset: -12% -8% auto -8%;
  height: 62%;
  background-image:
    radial-gradient(
      circle at 50% 42%,
      rgba(226, 215, 197, 0.18) 0%,
      rgba(208, 207, 204, 0.10) 24%,
      rgba(249, 248, 247, 0.05) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 50% 30%,
      rgba(248, 229, 229, 0.06) 0%,
      transparent 60%
    );
  background-repeat: no-repeat;
  filter: blur(28px);
  opacity: 0.8;
  pointer-events: none;   /* clicks/hover glow ke through niche wale content tak jaayen */
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;   /* content ko glow ke upar rakhta hai */
}

.hero .container {
  text-align: center;
}

/* ---- Illustration ------------------------------------------------------
   One origin point, three diverging paths — a visual echo of the closing
   statement ("different approaches, one intention"), and spatially
   foreshadows the 3-card row beneath it. Decorative only; the same idea
   is stated in words, so it's aria-hidden rather than needing its own
   accessible name. */



.hero__visual {
  max-width: 26rem;
  margin: 0 auto var(--space-6);
}

.hero__visual-svg {
  width: 100%;
  height: auto;
  display: none;
}

.hero__visual-path {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
}

.hero__visual-path--a {
  stroke: var(--color-blush);
  opacity: 0.55;
}

.hero__visual-path--b {
  stroke: var(--color-paper);
  opacity: 0.65;
}

.hero__visual-path--c {
  stroke: var(--color-gold);
  opacity: 0.6;
}

.hero__visual-node {
  fill: none;
  stroke-width: 1.25;
}

.hero__visual-node--a {
  stroke: var(--color-blush);
}

.hero__visual-node--b {
  stroke: var(--color-paper);
}

.hero__visual-node--c {
  stroke: var(--color-gold);
}

.hero__visual-origin {
  fill: var(--color-gold);
}

/* ---- Headline / lead / bridge ------------------------------------------ */

.hero__headline {
  font-size: var(--text-3xl);
  max-width: 18ch;
  margin-inline: auto;
  color: var(--color-gold);
}

@media (min-width: 1024px) {
  .hero__headline {
    font-size: var(--text-4xl);
  }
}

.hero__lead {
  margin-top: var(--space-4);
  max-width: 42ch;
  margin-inline: auto;
  display: none;
}

.hero__bridge {
  margin-top: var(--space-4);
  margin-inline: auto;

}

/* ---- Path cards ---------------------------------------------------------
   The redesigned centerpiece: a meaningful, clickable visual element
   in place of the old decorative timeline. Each card is a single link
   (whole surface tappable, not just the footer text) so a visitor can
   go from "orienting" to "acting" without a second decision. .grid
   handles the responsive column collapse (1 → 2 → 3) automatically. */

.hero__paths {
  margin-top: var(--space-7);
  text-align: left;
}

.hero__path-card {
  display: flex;
}

.hero__path-card:hover,
.hero__path-card:focus-visible {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px rgba(228, 168, 62, 0.16), 0 18px 40px rgba(228, 168, 62, 0.16);
  transform: translateY(-2px);
}



.hero__path-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.hero__path-cta-arrow {
  display: inline-block;
  transition: var(--transition-transform);
}

.hero__path-card:hover .hero__path-cta-arrow,
.hero__path-card:focus-visible .hero__path-cta-arrow {
  transform: translateX(3px);
}

/* ---- Statement ----------------------------------------------------------
   Reuses the shared .statement component. Centered here as a hero-scoped
   override — the component's default is left-aligned for in-page use
   (e.g. inside cards); the accent rule above it needs to center along
   with the text in this centered context. */

.hero__statement {
  margin-inline: auto;
  text-align: center;
  color: #fff
}

.hero__statement::before {
  margin-inline: auto;
}

.hero__statement-sub {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 34ch;
  color: var(--color-gold);
  margin-inline: auto;
}

/* ---- CTA ------------------------------------------------------------
   .btn--text is the existing lowest-emphasis button variant — this is
   a "keep scrolling for full detail" nudge, distinct from a path card
   click (which is already a complete action in itself). */

.hero__cta {
  margin-top: var(--space-7);
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  background-color: #d5c4c4;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  color: var(--color-blush);
  text-decoration-color: var(--color-blush);
  background-color: var(--color-plum2);
}

.hero__cta-arrow {
  display: inline-block;
  color: var(--color-accent);
  animation: hero-cta-drift var(--duration-ambient) var(--ease-soft) infinite;
}
.hero__cta:hover .hero__cta-arrow{
  color: var(--color-blush);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta-arrow {
    animation: none;
  }
}

@keyframes hero-cta-drift {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

/* ------------------------------------------------------------------------
   STARTING POINT — Section 2
   Left/right split: text + CTA on the left, three staggered "floating"
   image cards on the right. Reuses the .card, .whisper, .btn--secondary,
   and .image-placeholder components as-is. The staggered offsets and
   image-crop treatment mirror the technique already used in Home's
   .paths-section, re-implemented here (not shared) since page CSS stays
   page-scoped per the existing convention.
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
   STARTING POINT — Section 2
   Single vertical flow: centered intro, then a flat 3-up card row
   (same row pattern as the hero) — no column split, no stagger.
   ------------------------------------------------------------------------ */

.starting-point__intro {
  max-width: 44rem;
  margin-inline: auto;
}

.starting-point__intro>*+* {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
}

.starting-point__intro h2 {
  max-width: 32ch;
  margin-inline: auto;
  color: #290924;
}

.starting-point__whisper {
  margin-top: var(--space-6) !important;
  margin-inline: auto;
  color: var(--color-ink-soft);
}

.starting-point__cta {
  margin-top: var(--space-6);
  display: none;
}

/* ---- Card row ------------------------------------------------------- */

.starting-point__cards {
  margin-top: var(--space-8);
  text-align: left;
  /* cards read left-aligned, same as the hero's card row */
}

.starting-point__card {
  background-color: var(--color-accent);
}

/* Fixed 220×120 thumbnail — not proportional, per spec. max-width keeps
   it from overflowing a card column narrower than 220px on small screens. */
.starting-point__card-image {
  width: 220px;
  height: 120px;
  max-width: 100%;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper-deep);
}

.starting-point__card-image img,
.starting-point__card-image .image-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  transition: transform 700ms var(--ease-soft);
}

.starting-point__card:hover .starting-point__card-image img,
.starting-point__card:hover .starting-point__card-image .image-placeholder {
  transform: scale(1.04);
}

.starting-point__card:hover {
  box-shadow: var(--shadow-accent-glow), var(--shadow-lg);
}

.starting-point__card .card__title {
  margin-bottom: var(--space-2);
  color: #d5c4c4
}

.starting-point__card .card__hook {
  font-family: var(--font-display);
  color: var(--color-paper);
}

/* ==========================================================================
   PILLARS — Section 3 (the page's main section)
   ==========================================================================
   Deliberately self-contained: no .card / .btn / .eyebrow / .whisper /
   .image-placeholder from components.css. Colors and spacing pull from
   tokens.css where it made sense (so text still sits inside the site's
   real palette), everything else here is hand-written for this section
   only, per instruction.
   ========================================================================== */

/* ---- Intro --------------------------------------------------------------- */

.pillars {
  padding-block: var(--space-8);
  background-color: #2c1732;
  padding-bottom: 0;
}

.pillars__intro {
  text-align: center;
  padding-block: var(--space-9) var(--space-8);
  background-color: antiqueWhite;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-accent-glow), var(--shadow-lg);
}

@media (max-width: 767px) {
  .pillars__intro {
            margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px);
  }
}

.pillars__intro-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  max-width: 26ch;
  margin-inline: auto;
}

@media(max-width: 767px) {
  .pillars__intro-heading {
    font-size: var(--text-lg);
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .pillars__intro-heading {
    font-size: var(--text-4xl);
  }
}

.pillars__intro-lede {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
}

@media (min-width: 1024px) {
  .pillars__intro-lede {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
  }

}

.pillars__intro-body {
  margin-top: var(--space-3);
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-ink-soft);
}

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

/* ---- Sticky scroll-spy tracker --------------------------------------------
   A slim glass bar. Sticks to just below the global nav once this
   section reaches the top of the viewport (see --site-nav-height, set
   by animation.js), and scrolls away once .pillars ends, since it's a
   direct child of that section (its sticky containing block). */

.pillars__tracker {
  position: sticky;
  top: var(--site-nav-height, 4.5rem);
  z-index: 40;
  background: rgba(36, 18, 40, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pillars__tracker-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-3);
}

.pillars__tracker-label {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-blush);
  display: none;
}

@media (min-width: 640px) {
  .pillars__tracker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
}

.pillars__tracker-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  max-width: 22rem;
}

.pillars__tracker-progress {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right,
      var(--color-gold) calc(var(--progress) * 100%),
      rgba(255, 255, 255, 0.18) calc(var(--progress) * 100%));
  transform: translateY(-50%);
  transition: background 500ms var(--ease-soft);
  z-index: 0;
}

.pillars__tracker-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-blush);
  transition: color var(--duration-base) var(--ease-soft);
}

.pillars__tracker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.4px solid var(--color-blush);
  background: rgba(36, 18, 40, 1);
  transition: background-color var(--duration-base) var(--ease-soft),
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft);
}

.pillars__tracker-node:hover {
  color: var(--color-paper);
}

.pillars__tracker-node.is-active {
  color: var(--color-gold);
}

.pillars__tracker-node.is-active .pillars__tracker-dot {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  transform: scale(1.35);
}

/* ---- Pillar articles -------------------------------------------------- */

.pillar {
  padding-block: var(--space-10);
}

@media (max-width: 767px) {
  .pillar {
    padding-block: var(--space-8);
  }
}

/* Anchor-jump offset — matches nav + tracker height so a direct link
   (from the hero cards, footer, or the tracker itself) doesn't land
   with the heading hidden behind the sticky bars. */
.pillar {
  scroll-margin-top: calc(var(--site-nav-height, 4.5rem) + 3.25rem);
}

.pillar--tarot {
  background-color: #2b1730;
}

.pillar--nlp {
  background-color: #34203f;
}

.pillar--reiki {
  background-color: #241228;
}

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

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

  .pillar__grid--reverse .pillar__content {
    order: 1;
  }

  .pillar__grid--reverse .pillar__media {
    order: 2;
  }
}

/* ---- Media (self-built placeholder, no .image-placeholder reuse) ------- */

.pillar__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}

.pillar__media-frame {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.pillar__media-caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: rgba(243, 232, 220, 0.55);
}

/* ---- Content ------------------------------------------------------------ */

.pillar__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  color: var(--color-gold);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.pillar__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-paper);
  max-width: 20ch;
}

@media (max-width: 767px) {
  .pillar__heading {
    font-size: var(--text-xl);
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .pillar__heading {
    font-size: var(--text-3xl);
  }
}

.pillar__content p {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-paper-deep);
}

@media (max-width: 767px) {
  .pillar__content p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
  }
}

.pillar__content p strong {
  color: var(--color-paper);
  font-weight: var(--weight-semibold);
}

.pillar__lede-line {
  font-style: italic;
  color: var(--color-blush) !important;
}

.pillar__whisper {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-blush) !important;
}

.pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  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);
}

.pillar__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-soft);
}

.pillar__cta:hover {
  color: var(--color-paper);
}

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

/* ------------------------------------------------------------------------
   CONVERSATION CTA — closing section
   Editorial bookend to the hero: same centered structure, same question
   ("Where Might You Begin?" → "Not Sure Where to Begin?"), and a tiny
   3-dot motif echoing the hero's origin/paths illustration colors —
   the visual resolution after three dark pillar sections.
   ------------------------------------------------------------------------ */

.conversation-cta {
  padding-block: var(--space-9);}
   .conversation-cta__inner {
  max-width: 36rem;
  margin-inline: auto;
}

.conversation-cta__marks {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.conversation-cta__mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.conversation-cta__mark--a {
  background-color: var(--color-blush);
}

.conversation-cta__mark--b {
  background-color: var(--color-gold);
}

.conversation-cta__mark--c {
  background-color: var(--color-accent);
}

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

.conversation-cta__copy p+p {
  margin-top: var(--space-3);
}

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

.conversation-cta__closing {
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--color-blush);
}

.conversation-cta__cta {
  margin-top: var(--space-7);
}

.conversation-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.35rem);
  line-height: 0.95;
  color: var(--color-gold-deep);
  
  margin-inline: auto;
}

/* ------------------------------------------------------------------------
   CLOSING — final section of the page
   Quietest section on the page by design: no card, no boxed button,
   just Aarati's own voice closing the page the way a person would end
   a real conversation. .section--paper (fixed above) gives it the
   lightest, calmest background on the page — after two dark pillar
   dives and two blush sections, this is the exhale.
  
   ------------------------------------------------------------------------ */

.section--plum2 {
  padding-block: var(--space-11);
}

@media (max-width: 767px) {
  .section--plum2 {
    padding-block: var(--space-9);
  }
}

.closing{
  background: linear-gradient(
    0deg,
    #1a111d 0%,
    #3d1a39 70%,
    #3d1a39 100%
);
}

.closing__inner {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  max-width: 72rem;
  margin-inline: auto;
  text-align: left;
}

@media (max-width: 767px) {
  .closing__inner {
    gap: var(--space-6);
  }
}

@media (min-width: 900px) {
  .closing__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: var(--space-11);
  }
}

.closing__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .closing__intro {
    align-items: start;
    text-align: left;
    gap: var(--space-4);
  }
}

.closing__heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.35rem);
  line-height: 0.95;
  color: var(--color-blush);
  max-width: 10ch;
}

@media (max-width: 767px) {
  .closing__heading {
    font-size: var(--text-2xl);
    max-width: 100%;
  }
}

.closing__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.closing__body {
  margin-top: 0;
  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: 0 !important;
  margin-inline: 0;
  color: var(--color-ink-soft);
}

.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);
}

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