/* ============================================================
   HealthCompass - Design Elevation E1
   v2.28.0

   Loaded AFTER index.html's inline <style>, so equal-specificity
   rules here win. Nothing is !important except the reduced-motion
   block, which must be able to stop anything.

   WHAT THIS CHANGES, AND WHY

   1. THE HERO WAS A CENTERED CORPORATE HERO.
      .hchero was align-items:center + justify-content:center +
      text-align:center - precisely the pattern the standing design
      directive forbids. It is now an asymmetric editorial split:
      type on the left holding the baseline, the compass offset right
      and allowed to run large. On mobile it collapses to a single
      column (type first, compass beneath) because a 2-up split below
      900px is just two cramped columns.

   2. THE TYPE NEVER GOT LOUD.
      The old display size topped out at clamp(2.75rem, 7vw, 5rem) -
      80px. For a site whose whole identity is editorial authority
      that is a caption, not a masthead. The display tier now runs to
      9rem/144px with tightened tracking and optical hanging.

   3. THERE WAS NO MOTION SYSTEM.
      23 separate `transition: all` declarations, no shared easing,
      no scroll choreography. `transition: all` animates layout
      properties too (width/height/top), which forces reflow on every
      frame. Motion now comes from tokens, and moves transform and
      opacity only.

   BRAND IS LOCKED. No new colours, no new families. Navy / teal /
   coral and Fraunces / Inter / Space Grotesk are unchanged - this is
   composition, scale and motion, not a repaint.
   ============================================================ */

:root {
  /* --- Motion tokens ---------------------------------------- */
  /* The house curve: fast departure, long soft settle. */
  --e-out:    cubic-bezier(.25, 1, .5, 1);
  --e-in:     cubic-bezier(.5, 0, .75, 0);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);

  --d-fast: 180ms;   /* hovers, taps - must feel instant */
  --d-base: 280ms;   /* the default micro-interaction */
  --d-slow: 420ms;   /* entrances, reveals */

  /* --- Display type tier ------------------------------------ */
  --fs-display: clamp(3.25rem, 10.5vw, 9rem);
  --fs-title:   clamp(2.25rem, 5vw, 3.75rem);
  --fs-lede:    clamp(1.02rem, 1.5vw, 1.22rem);

  --tr-display: -.045em;   /* large Fraunces needs real negative tracking */
  --lh-display: .92;
}

/* ============================================================
   1. HERO - asymmetric editorial composition
   ============================================================ */

.hchero {
  display: block;                 /* was flex-column-centered */
  text-align: left;               /* was center */
  padding: clamp(3.5rem, 7vw, 7.5rem) clamp(1.25rem, 5vw, 4rem)
           clamp(3rem, 6vw, 6rem);
}

.hchero-in {
  max-width: 1240px;              /* was 820px - the type needs room */
  margin: 0 auto;
  display: grid;
  /* Deliberately NOT 1fr 1fr. The 1.15/.85 split is the asymmetry. */
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  text-align: left;
}

.hchero-copy { min-width: 0; }

/* The compass: offset, oversized, optically bled off the grid. */
.hchero-compass {
  justify-self: end;
  /* Composes the Celestial easter-egg rotation (js/celestial.js writes
     --hc-egg-spin) so the egg never has to overwrite this transform and
     lose the hero offset. The element opts in via data-egg-composes. */
  transform: translateX(clamp(0px, 2vw, 34px)) rotate(var(--hc-egg-spin, 0deg));
  cursor: pointer;
  filter: drop-shadow(0 18px 60px rgba(0, 180, 162, .28));
  transition: transform var(--d-slow) var(--e-out),
              filter var(--d-slow) var(--e-out);
}

.hchero-compass:hover {
  transform: translateX(clamp(0px, 2vw, 34px)) rotate(var(--hc-egg-spin, 0deg)) scale(1.035);
  filter: drop-shadow(0 22px 74px rgba(0, 180, 162, .42));
}

/* --- Masthead ---------------------------------------------- */
.hcht {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  /* Stack the two words so "Compass" lands under "Health" - the
     wordmark reads as a masthead instead of a run-on line. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Optical alignment: Fraunces' left side-bearing makes a capital H
   look inset against a hard left edge. Pull it back a hair. */
.hcht > span:first-child { margin-left: -.045em; }

.hcht .tc {
  color: var(--hc-teal);
  /* A restrained gradient on the accent word only - depth without
     the cliché of a gradient headline. */
  background: linear-gradient(96deg, var(--hc-teal) 12%, #4fe3d2 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hcey {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  margin-bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

/* Hairline rule leading the eyebrow - a masthead convention, and it
   anchors the new left edge. */
.hcey::before {
  content: "";
  width: clamp(20px, 4vw, 46px);
  height: 1px;
  background: var(--hc-teal);
  opacity: .55;
}

.hcdesc {
  font-size: var(--fs-lede);
  line-height: 1.68;
  color: rgba(255, 255, 255, .66);
  max-width: 46ch;                /* 46ch keeps the measure readable */
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

/* ============================================================
   2. GOAL CHIPS - icon + label, centre-out underline
   ============================================================ */

.hcgoals-lbl {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: .85rem;
}

.hcgoals-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-start;
}

.hcgoal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.05rem;
  min-height: 44px;               /* P2 touch target */
  border-radius: 44px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .88);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* Named properties only - never `all`. */
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}

/* Accent wash that grows from the centre on hover. Uses transform on
   a pseudo-element, so no layout work per frame. */
.hcgoal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg,
    rgba(0, 180, 162, .22), rgba(0, 180, 162, .06));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--d-base) var(--e-out);
  z-index: 0;
}

.hcgoal:hover::before,
.hcgoal:focus-visible::before { transform: scaleX(1); }

.hcgoal:hover,
.hcgoal:focus-visible {
  border-color: rgba(0, 180, 162, .5);
  color: #fff;
  transform: translateY(-2px);
}

.hcgoal > * { position: relative; z-index: 1; }

.hcgoal-ic {
  display: inline-flex;
  align-items: center;
  color: var(--hc-teal);
  transition: transform var(--d-base) var(--e-out);
}

.hcgoal:hover .hcgoal-ic { transform: scale(1.12) rotate(-4deg); }

.hcgoal-ar {
  transition: transform var(--d-base) var(--e-out);
  opacity: .6;
}

.hcgoal:hover .hcgoal-ar { transform: translateX(4px); opacity: 1; }

.hcgoal:focus-visible {
  outline: 3px solid var(--hc-teal);
  outline-offset: 3px;
}

/* ============================================================
   3. ICON SYSTEM
   ============================================================ */

.hci {
  display: block;
  flex: none;
  /* Inherits colour from the parent, which is the whole point:
     `color: var(--acc)` on a card themes its icon for free. */
}

/* Emoji sat on the text baseline and looked dropped-in. A geometric
   mark wants a real container. */
.hcb-ic,
.hctools-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--acc, var(--hc-teal)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, var(--hc-teal)) 26%, transparent);
  color: var(--acc, var(--hc-teal));
  transition: transform var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}

/* ============================================================
   4. SCROLL REVEAL
   Paired with js/reveal.js. The no-JS / reduced-motion state is
   always fully visible - content is never hidden behind motion.
   ============================================================ */

/* The hidden state is gated behind .hc-rv-ready, which js/reveal.js
   sets on <html> ONLY once it knows it can reveal again. If reveal.js
   fails to load, is blocked, or bails for reduced-motion, this rule
   never matches and every .rv element renders normally. Content must
   never be trapped behind motion. */
.hc-rv-ready .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out);
  transition-delay: var(--rv-d, 0ms);
  will-change: transform, opacity;
  /* CSS-ONLY FAILSAFE (v2.38.0). The gate above protects against
     reveal.js never LOADING. This protects against the worse case:
     it loads, sets the gate, then fails before or during arming - and
     the content is then invisible with no JS left to rescue it. That
     is exactly the shape of the v2.37.0 bug, where SPA-mounted nodes
     were gated but never observed.
     A pure-CSS animation cannot fail with the JS, so after 3s any .rv
     resolves to its visible state no matter what happened. JS normally
     reveals within ~100ms, so this never runs in a healthy page.

     CONSTRAINT: this is only free because ALL FOUR .rv elements on the
     site are in the homepage hero, i.e. always above the fold and meant
     to reveal immediately. If .rv is ever applied BELOW the fold, this
     3s timer will pre-empt the scroll reveal for it - because the timer
     starts when the element renders, not when it is scrolled to. Either
     raise the delay or scope this rule at that point. */
  animation: hc-rv-failsafe .01s linear 3s forwards;
}

@keyframes hc-rv-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

.hc-rv-ready .rv-in {
  opacity: 1;
  transform: none;
  will-change: auto;              /* release the layer after settling */
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hchero-in {
    grid-template-columns: 1fr;   /* a 2-up split below 900 is two cramped columns */
    gap: 2.25rem;
  }

  .hchero-compass {
    justify-self: center;
    order: -1;                    /* compass leads on mobile; it is the brand mark */
    transform: rotate(var(--hc-egg-spin, 0deg));
  }

  .hchero-compass:hover { transform: rotate(var(--hc-egg-spin, 0deg)) scale(1.02); }

  .hcdesc { max-width: 100%; }
}

@media (max-width: 560px) {
  :root { --fs-display: clamp(2.9rem, 15vw, 4.4rem); }
  .hcgoals-row { gap: .5rem; }
  .hcgoal { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   6. REDUCED MOTION
   Must be able to override everything above, hence !important.
   Reveals resolve to their visible state rather than being skipped,
   so no content is ever lost.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .rv,
  .hc-rv-ready .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    /* The failsafe is a motion effect too; under reduced motion the
       content is simply visible from the start. */
    animation: none !important;
  }

  .hchero-compass,
  .hcgoal,
  .hcgoal::before,
  .hcgoal-ic,
  .hcgoal-ar,
  .hcb-ic {
    transition: none !important;
  }

  .hchero-compass:hover,
  .hcgoal:hover { transform: none !important; }

  .hcgoal:hover::before { transform: scaleX(1) !important; }
}