/* ============================================================================
   METAHOLISTIC - BRAND LAYER (brand.css)
   The "Soft Signature" system, extracted verbatim from the approved homepage
   (final/index.html) + For Individuals page so every page shares ONE source.

   LOAD ORDER (required):
       <link rel="stylesheet" href="../shared/base.css">    (locked tokens + primitives)
       <link rel="stylesheet" href="../shared/brand.css">   (this file - Soft Signature + chrome)
       <style> ...page-unique sections... </style>          (inline; wins ties by source order)

   base.css ships the SATURATED gradient, GOLD cloud mesh, and saturated aspect
   hues as defaults. This file overrides them to the Soft Signature palette Karim
   approved (cream + softened violet/magenta/teal + softened aspect pastels) and
   adds the shared chrome (nav, footer, cloud-header mesh, buttons, rhythm,
   reveal, hero entrance, three-layer cards).

   What stays page-local: hero art direction (.hero/.hero-head sizing, .hero-mark,
   .scroll-cue), and each page's own section components.
   See BRAND.md for the full system + the new-page recipe.
   ============================================================================ */

/* ---- Soft Signature tokens (override base.css defaults) --------------------- */
:root{
  /* signature gradient, softened - the DEFAULT everywhere (cloud mesh, accents, rules) */
  --grad:linear-gradient(118deg,#6E63C4 0%,#C188D6 52%,#7FC6D0 100%);
  /* a deeper tint for large gradient-clipped numerals (keeps AA on cream) */
  --grad-display:linear-gradient(118deg,#5B4FB0 0%,#9A52B6 50%,#3E8C99 100%);
  /* the solid purple used for primary buttons / nav CTA / accents on white-text fills */
  --accent-solid:#6B4FC0; --accent-press:#5B4FB0;
  /* the six Experience Layers / dimensions - SOFTENED aspect pastels (pair with ink text) */
  --metasensory:#F4B26B; --sensory:#EE7FA0; --physical:#7FBFAE;
  --cognitive:#8A8FF0; --metacognitive:#C98FD9; --emotional:#7FC1E8;
}

/* ---- primary button: SOLID purple (not base.css's gradient fill) ----------- */
.btn-grad{ color:#fff; background:var(--accent-solid); box-shadow:0 2px 14px rgba(91,79,176,.22); }
.btn-grad:hover{ filter:brightness(1.06); }
.btn-grad:active{ transform:translateY(1px); }

/* Rotating CTA verb (cta-rotator.js): a fixed lead line + the swapping verb on
   its own centered line below, in a heavier weight. An invisible "ghost" (the
   widest word) reserves the slot width so line 2 never shifts; the live word
   rises + fades. No overflow clip (descenders safe, baseline = ghost). */
.cta-label{ display:flex; flex-direction:column; align-items:center; gap:.18em; line-height:1.12; }
.cta-rot{ position:relative; display:inline-block; text-align:center; font-weight:700; }
.cta-rot .cta-ghost{ visibility:hidden; }
.cta-rot .cta-word{
  position:absolute; left:0; right:0; top:0; text-align:center; white-space:nowrap;
  opacity:0; transform:translateY(0.5em);
  transition:transform .55s cubic-bezier(.22,.7,.2,1), opacity .45s ease;
}
.cta-rot .cta-word.on{ opacity:1; transform:translateY(0); }
.cta-rot .cta-word.out{ opacity:0; transform:translateY(-0.5em); }
@media (prefers-reduced-motion: reduce){ .cta-rot .cta-word{ transition:none; } }

/* ---- cloud-header mesh: recolored gold -> soft violet/magenta/teal --------- */
.rpt-head .hdr-grad{
  background:
    radial-gradient(46% 60% at 20% 28%, rgba(110,99,196,.62), transparent 58%),
    radial-gradient(52% 62% at 80% 28%, rgba(193,136,214,.70), transparent 60%),
    radial-gradient(64% 72% at 56% 86%, rgba(127,198,208,.66), transparent 58%),
    radial-gradient(38% 48% at 88% 70%, rgba(244,178,107,.32), transparent 62%),
    #EFE9DD;
  background-size:240% 240%;
  animation:hdrdrift 13s ease-in-out infinite alternate;  /* livelier breathing (base was 18s) */
}
@media(prefers-reduced-motion:reduce){ .rpt-head .hdr-grad{ animation:none; } }

/* ---- rhythm helpers -------------------------------------------------------- */
section{ padding-block:clamp(60px,10vw,120px); }
.column-wide{ max-width:var(--content); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section-line{ border:0; border-top:1px solid var(--line-2); max-width:var(--content); margin:0 auto; }

/* ---- the centered "movement" intro block (kicker + h2 + standfirst) -------- */
.movement{ text-align:center; }
.movement .kicker{ display:block; margin-bottom:16px; }
.movement h2{
  font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.08;
  letter-spacing:-.012em; color:var(--ink);
  font-size:clamp(28px,5.2vw,46px); margin:0 auto; max-width:18ch;
}
.movement .standfirst{
  margin:20px auto 0; max-width:56ch; color:var(--soft);
  font-size:clamp(16px,2.2vw,19px); line-height:1.7;
}
.serif-it{ color:var(--ink); }
.movement .standfirst .serif-it{ color:var(--soft); }
.sig-rule{ height:3px; width:60px; margin:26px auto 0; background:var(--grad); border-radius:2px; border:0; }
.center-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }

/* ---- reveal-on-scroll (JS-gated; no-JS keeps content visible) -------------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--d,0) * 70ms); }
.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---- hero entrance: staggered rise + one-time headline shimmer -------------
   Requires the page to (a) swap no-js->js on <html>, (b) add .in to .hero on load.
   Hero LAYOUT (sizing, marks, scroll cue) stays page-local. */
.hero h1 .serif-it{ color:var(--purple); font-weight:500; position:relative; }
.hero h1 .serif-it{ background:linear-gradient(100deg, var(--purple) 0%, var(--purple) 38%, #C188D6 50%, var(--purple) 62%, var(--purple) 100%); background-size:240% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.js .hero.in h1 .serif-it{ animation:shimmer 1.5s ease-out 1.05s 1 both; }
@keyframes shimmer{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
.js .hero .hero-eyebrow, .js .hero h1, .js .hero .hero-sub, .js .hero .hero-cta, .js .hero .scroll-cue{ opacity:0; transform:translateY(20px); }
.js .hero.in .hero-eyebrow{ animation:heroRise .7s cubic-bezier(.2,.75,.25,1) .10s both; }
.js .hero.in h1{ animation:heroRise .8s cubic-bezier(.2,.75,.25,1) .22s both; }
.js .hero.in .hero-sub{ animation:heroRise .8s cubic-bezier(.2,.75,.25,1) .40s both; }
.js .hero.in .hero-cta{ animation:heroRise .8s cubic-bezier(.2,.75,.25,1) .56s both; }
.js .hero.in .scroll-cue{ animation:heroRise .8s cubic-bezier(.2,.75,.25,1) .72s both; }
@keyframes heroRise{ to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  .js .hero .hero-eyebrow, .js .hero h1, .js .hero .hero-sub, .js .hero .hero-cta, .js .hero .scroll-cue{ opacity:1; transform:none; animation:none; }
  .js .hero.in h1 .serif-it{ animation:none; }
  .hero h1 .serif-it{ background:none; -webkit-text-fill-color:var(--purple); color:var(--purple); }
}

/* ---- the three "layers of advice" cards (depth icon + 01/02/03 + kicker) --- */
.layers{ display:grid; grid-template-columns:1fr; gap:18px; max-width:var(--content); margin:0 auto; }
@media(min-width:820px){ .layers{ grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } }
.layer{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px 28px; overflow:hidden; }
.layer::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:rgba(110,99,196,.28); }
.layer:nth-child(2)::before{ background:rgba(110,99,196,.55); }
.layer.is-meta::before{ background:var(--grad); }
.layer.is-meta{ border-color:transparent; box-shadow:0 14px 36px rgba(91,79,176,.13); background:linear-gradient(180deg, rgba(110,99,196,.07), var(--paper) 42%); }
.layer-ic{ color:var(--purple); display:block; }
.layer-ic svg{ width:26px; height:26px; }
.layer.is-meta .layer-ic{ color:var(--accent-solid); }
.layer-n{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:14px; color:var(--faint); margin-top:12px; }
.layer-k{ display:block; margin-top:4px; font-family:"Montserrat",sans-serif; font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); }
.layer.is-meta .layer-k{ color:var(--accent-solid); }
.layer h3{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(20px,2.6vw,24px); line-height:1.16; letter-spacing:-.01em; color:var(--ink); margin:12px 0 8px; }
.layer p{ margin:0; color:var(--soft); font-size:15.5px; line-height:1.62; }

/* ============================================================================ NAV
   Canonical header. HTML block lives in BRAND.md (paste verbatim per page;
   set aria-current="page" + class="active" on the current page's link). */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(242,236,225,.55);
  -webkit-backdrop-filter:saturate(1.1) blur(9px); backdrop-filter:saturate(1.1) blur(9px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled{ background:rgba(247,242,233,.93); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(60,40,90,.06); }
.nav .gradbar{ height:3px; }
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:11px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav a.brand{ display:inline-flex; align-items:center; min-height:44px; }
.nav .brand-logo{ height:24px; }
@media(min-width:768px){ .nav .brand-logo{ height:28px; } }
.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{ font-family:"Montserrat",sans-serif; font-weight:500; font-size:12.5px; letter-spacing:.04em; color:var(--soft); display:inline-flex; align-items:center; white-space:nowrap; min-height:44px; padding:0 13px; border-radius:8px; }
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.nav-cta{ color:#fff; background:var(--accent-solid); padding:0 16px; letter-spacing:.1em; text-transform:uppercase; font-size:12px; box-shadow:0 2px 12px rgba(91,79,176,.22); }
.nav-links a.nav-cta:hover{ filter:brightness(1.06); background:var(--accent-solid); }
/* Client Login: round power button that expands to reveal its label on hover/focus */
.nav-links a.client-btn{ padding:0; gap:0; height:42px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--soft); overflow:hidden; transition:border-color .2s, color .2s, background .2s; }
.client-btn .client-ic{ width:40px; height:40px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.client-btn .client-ic svg{ width:18px; height:18px; }
.client-btn .client-txt{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; font-family:"Montserrat",sans-serif; font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; transition:max-width .32s ease, opacity .22s ease, padding .32s ease; }
.nav-links a.client-btn:hover, .nav-links a.client-btn:focus-visible{ color:var(--accent-solid); border-color:var(--accent-solid); background:var(--card); }
.client-btn:hover .client-txt, .client-btn:focus-visible .client-txt{ max-width:140px; opacity:1; padding-right:16px; }
.nav-toggle{ display:none; }
.nav-burger{ display:none; cursor:pointer; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.nav-burger span,.nav-burger span::before,.nav-burger span::after{ content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
.nav-burger span::before{ position:absolute; top:-6px; }
.nav-burger span::after{ position:absolute; top:6px; }
@media(max-width:860px){
  .nav-burger{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 18px;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .28s ease, opacity .2s ease; box-shadow:0 14px 30px rgba(60,40,90,.08);
  }
  .nav-links a{ min-height:48px; padding:0 14px; font-size:15px; justify-content:flex-start; }
  .nav-links a.nav-cta{ justify-content:center; margin-top:6px; }
  /* in the mobile menu, show the Client Login label inline (no hover to expand) */
  .nav-links a.client-btn{ height:48px; border-radius:10px; gap:6px; padding:0 8px; justify-content:flex-start; }
  .client-btn .client-txt{ max-width:none; opacity:1; padding:0; font-size:15px; letter-spacing:.04em; text-transform:none; }
  .nav-toggle:checked ~ .nav-links{ max-height:520px; opacity:1; pointer-events:auto; }
}

/* ============================================================================ FOOTER
   Canonical footer. HTML block lives in BRAND.md. */
.footer{ background:var(--mgr-header-bg); border-top:1px solid var(--mgr-header-line); }
.footer .gradbar{ height:3px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:52px var(--gutter) 38px; display:grid; grid-template-columns:1fr; gap:30px; align-items:start; }
@media(min-width:760px){ .footer-inner{ grid-template-columns:1.5fr 1fr 1.1fr; gap:40px; } }
/* footer links: label on top, links split into two columns */
.footer-nav{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:2px; }
.footer-nav .flabel{ grid-column:1 / -1; }
.footer-nav a{ color:var(--soft); font-size:15px; min-height:40px; display:inline-flex; align-items:center; }
.footer-nav a:hover{ color:var(--ink); }
/* Explore / Connect headings: brand accent, Fraunces, larger */
.flabel{ display:block; margin-bottom:12px; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:17px; letter-spacing:0; text-transform:none; color:var(--accent-solid); }
.footer-brand .brand-logo{ height:28px; margin-bottom:16px; }
.footer-brand p{ margin:0; color:var(--soft); font-size:14.5px; line-height:1.6; max-width:44ch; }
.footer-brand .creds{ display:block; margin-top:6px; color:var(--faint); font-size:13px; }
.footer-contact{ display:flex; flex-direction:column; gap:4px; }
.footer-contact a{ color:var(--soft); font-size:15px; min-height:40px; display:inline-flex; align-items:center; }
.footer-contact a:hover{ color:var(--ink); }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; color:var(--soft); background:var(--card); transition:color .2s, border-color .2s, transform .15s; }
.socials a:hover{ color:var(--accent-solid); border-color:var(--accent-solid); transform:translateY(-2px); }
.socials svg{ width:19px; height:19px; }
.footer-bottom{ border-top:1px solid var(--mgr-header-line); padding:18px var(--gutter); text-align:center; font-family:"Montserrat",sans-serif; font-weight:400; font-size:12px; letter-spacing:.06em; color:var(--faint); }