/* ============================================================================
   Scout Your Stars — v2 repositioning layer
   ----------------------------------------------------------------------------
   The palette was never the problem. Gold #C6A75E on ink #111111 is 8.17:1 —
   rich and legible. The old site put that same gold on white (2.31:1) and ran a
   saturated marigold #A86122 as the page ground, which reads as a festival
   banner rather than a consultant with a Michigan Tech degree.

   So: ink is the default ground, gold lives on ink, marigold is demoted to an
   accent, and the lavender #B18AFF (1.81:1 on orange — effectively invisible)
   is gone entirely.

   Display face is Instrument Serif, self-hosted. Every astrology site in India
   runs the same geometric sans; an editorial serif reads as journal, not funnel.
   ========================================================================== */

@import url("/premium/fonts/instrument-serif.css");

:root {
  --v2-ink:        #111111;
  --v2-ink-2:      #1a1917;
  --v2-ink-3:      #242328;
  --v2-gold:       #c6a75e;
  --v2-gold-lift:  #dcc184;
  --v2-cream:      #ebdcb8;
  --v2-rust:       #973114;
  --v2-marigold:   #c7801c;   /* accent only, never a ground */
  --v2-paper:      #f6f1e7;

  --v2-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --v2-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* One rhythm for vertical space, so sections can't drift apart. */
  --v2-gutter: clamp(20px, 5vw, 72px);
}

/* ------------------------------------------------------------------- hero  */

.v2-hero {
  position: relative;
  background: transparent;
  color: var(--u-head);
  padding: clamp(72px, 11vh, 132px) var(--v2-gutter) clamp(56px, 9vh, 104px);
  overflow: hidden;
  isolation: isolate;
}

/* A slow, low glow rather than a stock zodiac wheel. Suggests sky without
   drawing one. */
.v2-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(60% 50% at 22% 8%, var(--u-glow-1), transparent 62%),
    radial-gradient(45% 45% at 88% 86%, var(--u-glow-2), transparent 65%);
  z-index: -1;
  pointer-events: none;
}

.v2-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.82fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

.v2-eyebrow {
  font-family: var(--v2-body);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 600;
  letter-spacing: 0.44em;
  text-indent: 0.44em;     /* letter-spacing pads only the right edge */
  text-transform: uppercase;
  color: var(--u-sub);
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.v2-eyebrow::after {
  content: "";
  flex: 0 0 clamp(36px, 7vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, var(--u-eyebrow-line), transparent);
}

.v2-hero__title {
  font-family: var(--v2-display);
  font-weight: 400;
  /* Instrument Serif is drawn tight; it needs room to breathe at display size. */
  font-size: clamp(2.6rem, 5.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--u-head);
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  max-width: 15ch;
}

.v2-hero__title em {
  font-style: italic;
  color: var(--u-gold-text);
}

.v2-hero__lede {
  font-family: var(--v2-body);
  font-size: clamp(0.95rem, 1.08vw, 1.12rem);
  line-height: 1.68;
  color: var(--u-text);
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  max-width: 46ch;
}

/* ------------------------------------------------------------- credential  */
/* The whole repositioning rests on this block, so it is set as evidence:
   monospaced-feeling, ruled, quiet. Not a badge, not a marketing flourish. */

.v2-cred {
  list-style: none;
  margin: 0 0 clamp(28px, 3.6vw, 42px);
  padding: 0;
  border-top: 1px solid var(--u-rule);
  display: grid;
  gap: 0;
  max-width: 54ch;
}

.v2-cred li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--u-rule);
  font-family: var(--v2-body);
  font-size: clamp(0.8rem, 0.92vw, 0.92rem);
  line-height: 1.5;
  color: var(--u-text);
}

.v2-cred b {
  font-weight: 700;
  color: var(--u-gold-text);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  min-width: 5.4em;
}

.v2-cred span {
  color: var(--u-mute);
}

/* -------------------------------------------------------------------- cta  */

.v2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--v2-body);
  font-size: clamp(0.76rem, 0.86vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border-radius: 2px;
  transition: transform 0.45s var(--v2-ease), background 0.45s var(--v2-ease),
              color 0.45s var(--v2-ease), border-color 0.45s var(--v2-ease);
}

.v2-btn--gold {
  background: var(--u-btn);
  color: var(--u-btn-text);
  border: 1px solid var(--u-btn-border);
}

.v2-btn--gold:hover {
  background: var(--u-btn-hover);
  border-color: var(--u-btn-border);
  transform: translateY(-2px);
  color: var(--u-btn-text);
}

.v2-btn--ghost {
  background: transparent;
  color: var(--u-head);
  border: 1px solid var(--u-gold-soft);
}

.v2-btn--ghost:hover {
  border-color: var(--u-rule-strong);
  color: var(--u-ink);
  transform: translateY(-2px);
}

.v2-btn__arrow {
  transition: transform 0.45s var(--v2-ease);
}

.v2-btn:hover .v2-btn__arrow {
  transform: translateX(4px);
}

.v2-btn:focus-visible {
  outline: 2px solid var(--u-gold-deep);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ plate  */
/* The portrait sits on a flat marigold ground that cannot be keyed out (his
   skin tone is too close to it). So the colour block is made deliberate:
   framed, ruled in gold, captioned — an editorial portrait plate rather than a
   cut-out floating on dark. */

.v2-hero__plate {
  margin: 0;
  position: relative;
  justify-self: end;
  width: min(100%, 420px);
}

.v2-hero__plate::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--u-frame);
  border-radius: 2px;
  z-index: 0;
}

.v2-hero__plate img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  /* Settle the marigold further back so gold type stays dominant. */
  filter: saturate(0.92) contrast(1.02);
}

.v2-hero__plate figcaption {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-family: var(--v2-body);
  font-size: clamp(0.66rem, 0.76vw, 0.74rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--u-sub);
  line-height: 1.6;
}

/* ------------------------------------------------------------- responsive  */

@media (max-width: 900px) {
  .v2-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .v2-hero__plate {
    justify-self: start;
    width: min(100%, 320px);
    order: -1;          /* face first on a phone; it is the trust signal */
  }

  .v2-hero__title {
    max-width: 18ch;
  }

  .v2-cta {
    width: 100%;
  }

  .v2-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------- reduced motion  */

@media (prefers-reduced-motion: reduce) {
  .v2-btn,
  .v2-btn__arrow {
    transition: none !important;
  }
}

/* ============================================================================
   Header — ink, not marigold
   ----------------------------------------------------------------------------
   The lavender logo measured 1.81:1 on the old orange bar: effectively
   invisible, and a WCAG failure. On ink the same mark measures 7.15:1, so the
   logo never needed changing — only the ground behind it.
   ========================================================================== */

#masthead,
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .site-primary-header-wrap {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 0 !important;
}

#masthead .main-header-menu > li > a,
#masthead .ast-builder-menu a,
#masthead .menu-link {
  color: var(--u-nav) !important;
  font-family: var(--v2-body);
  font-size: 0.86rem !important;
  letter-spacing: 0.04em;
  transition: color 0.35s var(--v2-ease);
}

#masthead .main-header-menu > li > a:hover,
#masthead .ast-builder-menu a:hover,
#masthead .menu-link:hover,
#masthead .current-menu-item > a {
  color: var(--u-ink) !important;
}

/* Sub-menus inherit the dark ground too, or they flash white on hover. */
#masthead .sub-menu,
#masthead .astra-full-megamenu-wrapper {
  background-color: var(--u-card) !important;
  border: 1px solid var(--u-line) !important;
}

#masthead .ast-mobile-menu-trigger-minimal,
#masthead .ast-mobile-menu-buttons svg,
#masthead .ast-button-wrap .menu-toggle {
  color: var(--u-head) !important;
  fill: var(--u-head) !important;
  background: transparent !important;
}

/* ============================================================================
   Button reset
   ----------------------------------------------------------------------------
   Astra underlines links globally, which put a line through both hero CTAs and
   made the gold button read as a hyperlink rather than a button.
   ========================================================================== */

.v2-cta .v2-btn,
.v2-cta .v2-btn:hover,
.v2-cta .v2-btn:focus {
  text-decoration: none !important;
  box-shadow: none !important;
}

.v2-btn--gold,
.v2-btn--gold:hover,
.v2-btn--gold:focus {
  color: var(--u-btn-text) !important;
}

.v2-btn--ghost,
.v2-btn--ghost:focus {
  color: var(--u-head) !important;
}

.v2-btn--ghost:hover {
  color: var(--u-ink) !important;
}

/* ============================================================================
   Credential rows — corrections
   ----------------------------------------------------------------------------
   Flex made the bare text node, the <b> and the <span> three separate flex
   items, so long entries wrapped into a ragged third column. Block flow with an
   inline-block label keeps each row a single readable line.
   ========================================================================== */

.v2-cred li {
  display: block;
  padding: 14px 2px;
}

.v2-cred b {
  display: inline-block;
  min-width: 6.2em;
  margin-right: 4px;
}

.v2-cred span {
  display: inline;
  white-space: nowrap;
}

/* Frame overhangs the image by 16px, so the caption needs to clear it. */
.v2-hero__plate figcaption {
  margin-top: 34px;
}

/* Frame belongs to the image, not the whole figure — otherwise the rule is
   drawn around the caption too and the two collide. */
.v2-hero__plate::before { content: none; }

.v2-plate__frame {
  position: relative;
}

.v2-plate__frame::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--u-frame);
  border-radius: 2px;
  z-index: 0;
}

.v2-hero__plate figcaption {
  margin-top: 30px;
  color: var(--u-sub);
}

.v2-cred { max-width: 58ch; }

/* Astra's scroll-to-top ships default blue, which is the only non-palette
   colour left on the page once the header goes dark. */
#ast-scroll-top {
  background-color: var(--u-card) !important;
  color: var(--u-gold-text) !important;
  border-radius: 2px !important;
  transition: background-color 0.35s var(--v2-ease), transform 0.35s var(--v2-ease);
}

#ast-scroll-top:hover {
  background-color: var(--u-band) !important;
  transform: translateY(-2px);
}

#ast-scroll-top svg,
#ast-scroll-top .ast-icon { fill: var(--u-gold-text) !important; }

/* Mobile toggle — Astra draws it from its own colour vars, which still hold the
   old theme blue. Setting the icon colour alone is not enough; the SVG inherits
   from a currentColor fill. */
#masthead .ast-button-wrap .ast-mobile-menu-trigger-minimal,
#masthead .ast-button-wrap .ast-mobile-menu-trigger-fill,
#masthead .ast-button-wrap .menu-toggle,
.ast-mobile-header-wrap .menu-toggle {
  background: transparent !important;
  color: var(--u-head) !important;
  border-color: var(--u-line) !important;
}

#masthead .menu-toggle .ast-mobile-svg,
#masthead .menu-toggle svg,
.ast-mobile-header-wrap .menu-toggle svg {
  fill: var(--u-head) !important;
  color: var(--u-head) !important;
}

#masthead .menu-toggle:hover svg { fill: var(--u-gold-text) !important; }

/* Mobile off-canvas / dropdown panel */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-popup,
.ast-mobile-header-wrap .main-header-bar-navigation {
  background-color: var(--u-ground) !important;
}

.ast-mobile-popup-drawer .menu-link,
.ast-mobile-header-wrap .menu-link {
  color: var(--u-head) !important;
}

@media (max-width: 900px) {
  /* The portrait is the trust signal so it leads, but a full screen of it
     pushes the headline below the fold entirely. */
  .v2-hero__plate { width: min(100%, 268px); }
  .v2-hero { padding-top: clamp(40px, 6vh, 64px); }
}

/* Page heading for templates that never had one (the blog index). */
.v2-pagetitle {
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--u-head) !important;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 88px) var(--v2-gutter) 0;
}

/* ============================================================================
   Original hero, dark theme  (client feedback 2026-09-24)
   ----------------------------------------------------------------------------
   Their own hero container, verbatim. Only the ground changes: marigold -> ink.
   Their white text reads better on ink than it did on orange, so it is left
   alone. Their hero image has the marigold baked in (no transparency), so it
   is framed as a gold-ruled plate — the same treatment the client approved on
   the portrait.
   ========================================================================== */

.elementor-6 .elementor-element.elementor-element-83b5178,
.elementor-element-83b5178:not(.elementor-motion-effects-element-type-background) {
  background-color: transparent !important;
  background-image:
    radial-gradient(60% 55% at 18% 10%, var(--u-glow-1), transparent 62%),
    radial-gradient(45% 45% at 90% 90%, var(--u-glow-2), transparent 65%) !important;
  padding-top: clamp(48px, 8vh, 96px) !important;
  padding-bottom: clamp(48px, 8vh, 96px) !important;
}

.elementor-element-83b5178::before { background-color: transparent !important; }

/* The image plate.
   Elementor 4's image widget has no inner wrapper, so there is nothing to hang
   a ::before frame on that matches the image's bounds. Instead the frame is
   drawn on the <img> itself with two stacked shadows: an ink rectangle 1px
   smaller sitting on top of a gold one, both offset down-right, so exactly a
   1px gold hairline shows — the same offset rule as the approved portrait. */
.elementor-element-144e450 .elementor-widget-image img {
  border-radius: 2px;
  filter: saturate(0.94) contrast(1.02);
  box-shadow:
    16px 16px 0 -1px var(--u-ground),
    16px 16px 0 0 var(--u-frame);
}

/* Their heading and paragraph: keep colour, soften the paragraph slightly so
   the headline leads. */
.elementor-element-82b243e .elementor-heading-title {
  color: var(--u-head) !important;
}

.elementor-element-82b243e h4.elementor-heading-title,
.elementor-element-82b243e .elementor-widget-heading:not(:first-child) .elementor-heading-title {
  color: var(--u-text) !important;
}

/* Secondary link under "Book Your Consultations" (cream section below). */
.v2-howlink {
  text-align: center;
  margin: 14px 0 0;
  font-family: var(--v2-body);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

.v2-howlink a {
  color: var(--u-gold-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--u-line);
  padding-bottom: 2px;
  transition: border-color 0.35s var(--v2-ease), color 0.35s var(--v2-ease);
}

.v2-howlink a:hover {
  border-bottom-color: var(--u-gold-text);
}

.v2-howlink a span {
  display: inline-block;
  transition: transform 0.35s var(--v2-ease);
}

.v2-howlink a:hover span { transform: translateX(3px); }

/* Portrait caption: may run wider than the portrait (there is room beside it),
   but never wider than the screen — so a 320px phone wraps cleanly instead of
   scrolling sideways. "Life&nbsp;coach" in the markup keeps the last role in one
   piece, so a wrap can never strand a lone "COACH". */
.v2-hero__plate figcaption {
  width: max-content;
  max-width: calc(100vw - 2 * var(--v2-gutter));
}

@media (max-width: 900px) {
  .v2-hero__plate figcaption { letter-spacing: 0.1em; }
}