/* ============ TOKENS ============ */
  :root{
    --purple:#471b66;
    --purple-deep:#2c0f40;
    --purple-mid:#5c2680;
    --gold:#c49941;
    --gold-soft:#e2c988;
    --charcoal:#292f30;
    --ink:#5a6263;
    --paper:#ffffff;
    --panel:#f7f5f1;
    --panel-soft:#faf8f4;
    --line:#e0e0e0;

    --display: "Libre Caslon Display", ui-serif, Georgia, serif;
    --display-text: "Libre Caslon Text", ui-serif, Georgia, serif;
    --body: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

    --container: 1240px;
    --gutter: clamp(24px, 6vw, 80px);
    --section-pad: clamp(72px, 11vw, 156px);

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    font-family:var(--body);
    color:var(--charcoal);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }

  img{ max-width:100%; display:block; }

  a{ color:inherit; }

  .container{
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  h1,h2,h3,h4{
    font-family:var(--display-text);
    font-weight:400;
    line-height:1.16;
    margin:0;
    color:var(--charcoal);
    letter-spacing:-0.005em;
  }
  h1, .section-head h2, .uncertain h2, .insight-grid h2, .statement blockquote,
  .closing h2, .principal-grid h2, .about-copy h2{
    font-family:var(--display);
    font-weight:400;
  }

  /* ---- reusable "major inner-page heading" treatment: strong purple
     proposition/section headings, consistent across inner pages ---- */
  .heading-strong{
    font-family:var(--display);
    font-weight:400;
    color:var(--purple);
    font-size:clamp(31px,3.8vw,44px);
    line-height:1.16;
  }
  .heading-strong--hero{
    font-size:clamp(38px,4.2vw,50px);
    line-height:1.14;
  }

  p{ margin:0; }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--body);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .eyebrow.on-dark{ color:var(--gold-soft); }

  .mark-spark{ flex:none; display:block; }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--purple);
    outline-offset:3px;
    border-radius:2px;
  }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--body);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.02em;
    text-decoration:none;
    padding:15px 30px;
    border-radius:2px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--purple);
    color:#fff;
  }
  .btn-primary:hover{ background:var(--purple-deep); }
  .btn-primary.on-dark{ background:var(--gold); color:var(--purple-deep); }
  .btn-primary.on-dark:hover{ background:var(--gold-soft); }

  .btn-ghost{
    background:transparent;
    color:var(--charcoal);
    border-color:var(--charcoal);
  }
  .btn-ghost:hover{ border-color:var(--purple); color:var(--purple); }
  .btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,0.55); }
  .btn-ghost.on-dark:hover{ border-color:#fff; }

  .link-arrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.02em;
    text-decoration:none;
    color:var(--purple);
    padding-bottom:2px;
    border-bottom:1px solid transparent;
    transition:border-color .25s var(--ease), gap .25s var(--ease), color .25s var(--ease);
  }
  .link-arrow:hover{ border-color:currentColor; gap:13px; }
  .link-arrow.on-dark{ color:#fff; }
  .link-arrow svg{ transition:transform .25s var(--ease); }
  .link-arrow:hover svg{ transform:translateX(2px); }

  /* ============ HEADER ============ */
  .site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:2px solid var(--gold);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .brand{
    display:flex;
    align-items:center;
    flex:none;
  }
  .brand:focus-visible{ outline-offset:6px; }
  .brand img{
    height:56px;
    width:auto;
    display:block;
  }

  @media (max-width: 640px){
    .brand img{ height:40px; }
    .header-inner{ padding-top:16px; padding-bottom:16px; }
  }

  .main-nav{
    display:flex;
    align-items:center;
    gap:clamp(20px,3vw,40px);
  }
  .main-nav a{
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--charcoal);
    position:relative;
    padding-bottom:4px;
  }
  .main-nav a::after{
    content:"";
    position:absolute;
    left:0; right:100%; bottom:0;
    height:1px;
    background:var(--gold);
    transition:right .25s var(--ease);
  }
  .main-nav a:hover::after{ right:0; }

  .header-actions{ display:flex; align-items:center; gap:28px; }

  .nav-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    flex-direction:column;
    gap:5px;
  }
  .nav-toggle span{
    width:22px; height:1.5px; background:var(--charcoal); display:block;
    transition:transform .25s var(--ease), opacity .25s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  @media (max-width: 900px){
    .main-nav{
      position:fixed;
      top:65px; right:0; bottom:0; left:0;
      height:calc(100vh - 65px);
      background:#fff;
      flex-direction:column;
      align-items:flex-start;
      padding:36px var(--gutter);
      gap:28px;
      transform:translateY(-8px);
      opacity:0;
      pointer-events:none;
      transition:opacity .3s var(--ease), transform .3s var(--ease);
      overflow-y:auto;
    }
    .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
    .main-nav a{ font-size:17px; }
    .header-actions .btn-primary span{ display:none; }
    .nav-toggle{ display:flex; }
    .header-actions .desktop-cta{ display:none; }
  }

  /* ============ SECTION SCAFFOLD ============ */
  section{ position:relative; }
  .section-pad{ padding-block:var(--section-pad); }
  .on-panel{ background:var(--panel); }

  .section-head{
    max-width:760px;
    margin-bottom:clamp(36px,5vw,64px);
  }
  .section-head h2{
    font-size:clamp(31.5px,3.8vw,46px);
    margin-top:14px;
  }
  .kicker-line{
    display:block;
    font-family:var(--body);
    font-size:15px;
    font-weight:600;
    color:var(--purple);
    margin-top:14px;
  }

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* Finer-grained entrance for selected elements — major purple headings,
     gold eyebrows, CTAs — used where a section benefits from a brief
     staggered sequence rather than fading in as one block. Shares the
     same IntersectionObserver/trigger as .reveal (see site.js); this is
     just a lighter, quicker variant with its own optional stagger delay
     via data-reveal-order. */
  .reveal-up{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal-up.is-visible{ opacity:1; transform:translateY(0); }

  /* Stronger tier, reserved for major purple headings specifically — a
     little more upward travel and a touch slower than .reveal-up so the
     page's main statements register more clearly as they enter. Same
     shared observer/stagger mechanism. */
  .reveal-heading{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal-heading.is-visible{ opacity:1; transform:translateY(0); }

  /* ============ HERO ============ */
  .hero{
    background:var(--paper);
    overflow:hidden;
    padding-top:clamp(48px,6vw,64px);
    padding-bottom:clamp(72px,9vw,120px);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.04fr 0.96fr;
    gap:clamp(28px,5vw,64px);
    align-items:center;
  }
  .hero-copy h1{
    font-size:clamp(38px,4.2vw,50px);
    margin-top:18px;
    max-width:15ch;
    color:var(--purple);
  }
  /* Brand statement — now a genuine full-width row spanning the whole hero
     container, above the two-column grid, so it reads as a real statement
     of authority rather than a confined eyebrow. Uses the site's loaded
     bold weight (not italic — no bold-italic face is loaded for this
     family) for real visual weight, not a synthetic approximation. */
  .hero-tagline{
    display:flex;
    flex-wrap:nowrap;
    align-items:baseline;
    justify-content:flex-start;
    column-gap:0.45em;
    margin:0 0 clamp(28px,4vw,44px);
    font-family:var(--display-text);
    font-style:normal;
    font-weight:700;
    font-size:clamp(26px,3.05vw,45px);
    line-height:1.2;
    color:var(--gold);
    white-space:nowrap;
  }
  .hero-tagline .mark-spark{ flex:none; align-self:center; }
  @media (max-width:900px){
    .hero-tagline{
      flex-wrap:wrap;
      white-space:normal;
      justify-content:flex-start;
      column-gap:12px;
      row-gap:10px;
    }
  }
  .hero-lede{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:46ch;
    font-size:16.5px;
    color:var(--ink);
  }
  .promise-block{
    margin-top:36px;
    padding-top:30px;
    border-top:1px solid var(--line);
    max-width:48ch;
  }
  .promise-block .promise{
    font-family:var(--display-text);
    font-style:normal;
    font-weight:400;
    font-size:clamp(20px,2.1vw,24px);
    color:var(--purple);
    line-height:1.38;
    letter-spacing:-0.005em;
  }
  .promise-block .support{
    margin-top:12px;
    font-size:15.5px;
    color:var(--ink);
    max-width:44ch;
  }
  .hero-ctas{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:28px;
    margin-top:40px;
  }

  .hero-visual{
    position:relative;
    width:100%;
  }
  .hero-visual svg.cx-graphic{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
  }
  .cx-node{ transform-box:fill-box; transform-origin:center; }

  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ max-width:300px; margin-inline:auto; margin-top:8px; }
  }

  /* ============ SECTION 2 : UNCERTAIN PATH ============ */
  .uncertain{
    background:var(--panel-soft);
    text-align:center;
  }
  .uncertain .inner{
    max-width:700px;
    margin-inline:auto;
  }
  .uncertain h2{
    font-size:clamp(31px,3.8vw,44px);
    font-weight:400;
    color:var(--purple);
  }
  .uncertain p{
    margin-top:22px;
    font-size:17.5px;
    color:var(--ink);
    line-height:1.75;
  }
  .rule-mark{
    display:flex;
    justify-content:center;
    margin-bottom:26px;
  }
  /* A gold rule marks this as a clear new chapter of the homepage, distinct
     from the hero above, without needing a background change. Sized as a
     share of the main site content container (not the narrower text
     column below it), so it reads as a genuinely broad transition. */
  .chapter-rule{
    width:clamp(90px,78%,860px);
    height:2px;
    background:var(--gold);
    margin:0 auto 32px;
  }
  /* Capability strip — same visual language as the About Jocelen attribute
     list lower on the page: a small gold diamond per item and a fine
     separator line, arranged as three editorial columns of two. */
  .capability-wrap{
    max-width:860px;
    margin-inline:auto;
  }
  .capability-grid{
    margin-top:48px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;
    gap:14px 32px;
    list-style:none;
    padding:0;
  }
  .capability-grid li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--charcoal);
    text-align:left;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .capability-grid li svg{ flex:none; }
  @media (max-width:900px){
    .capability-grid{
      grid-template-columns:repeat(2,1fr);
      grid-template-rows:repeat(3,auto);
    }
  }
  @media (max-width:560px){
    .capability-grid{
      grid-template-columns:1fr;
      grid-template-rows:none;
      grid-auto-flow:row;
    }
  }

  /* ============ SECTION 3 : INSIGHT TO ACTION ============ */
  .insight{
    background:var(--paper);
  }
  .insight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px,6vw,90px);
    align-items:center;
  }
  .insight h2{ font-size:clamp(31px,3.8vw,44px); color:var(--purple); font-weight:400; }
  .insight .core-line{
    margin-top:22px;
    font-family:var(--display-text);
    font-weight:400;
    font-size:clamp(19px,2vw,22px);
    color:var(--purple);
    line-height:1.5;
  }
  .insight .support-line{
    margin-top:20px;
    font-size:16px;
    color:var(--ink);
    max-width:42ch;
  }
  .insight-graphic{ position:relative; }
  .insight-graphic svg.cx-graphic{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
  }
  @media (max-width: 900px){
    .insight-grid{ grid-template-columns:1fr; }
    .insight-graphic{ order:-1; max-width:320px; margin-inline:auto; }
  }

  /* ============ SECTION 4 : STATEMENT ============ */
  .statement{
    background:var(--purple);
    color:#fff;
    text-align:center;
    padding-block:clamp(96px,13vw,168px);
  }
  .statement .spark{ margin-bottom:34px; }
  .statement blockquote{
    margin:0 auto;
    max-width:920px;
    font-family:var(--display);
    font-weight:400;
    font-style:italic;
    font-size:clamp(26px,4vw,46px);
    line-height:1.32;
    color:#fff;
  }
  .statement blockquote::before,
  .statement blockquote::after{ content:""; }

  /* ============ SECTION 5 : HOW WE HELP ============ */
  .help-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:32px;
    flex-wrap:wrap;
  }
  .help-intro p{
    font-size:17.5px;
    color:var(--ink);
    max-width:32ch;
  }
  .help-intro h2{ font-size:clamp(31px,3.8vw,44px); color:var(--purple); font-weight:400; }
  .help-grid{
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .help-card{
    background:#fff;
    padding:clamp(30px,3.4vw,46px);
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .help-card .num{
    font-family:var(--display-text);
    font-size:14px;
    color:var(--gold);
    font-weight:400;
    letter-spacing:0.04em;
  }
  .help-card h3{
    font-size:clamp(20px,2vw,24px);
    font-weight:400;
  }
  .help-card p{
    font-size:15.5px;
    color:var(--ink);
    line-height:1.7;
  }
  .help-cta{ margin-top:52px; }
  @media (max-width: 720px){
    .help-grid{ grid-template-columns:1fr; }
  }

  /* ============ SECTION 6 : APPROACH ============ */
  .approach{ background:var(--panel); }
  .approach .section-head{ max-width:920px; }
  .approach .section-head h2{
    margin-top:0;
    color:var(--purple);
    font-weight:400;
    font-size:clamp(27px,3vw,34px);
    white-space:nowrap;
  }
  .approach .kicker-line{ margin-top:6px; font-family:var(--display-text); font-style:italic; font-weight:400; font-size:19px; }
  @media (max-width:760px){
    .approach .section-head h2{ white-space:normal; }
  }

  .approach-path{
    position:relative;
    margin-top:64px;
  }
  .approach-line{
    position:absolute;
    top:22px;
    left:0; right:0;
    height:1px;
    background:var(--line);
  }
  .approach-line-fill{
    position:absolute;
    top:22px;
    left:0;
    height:1px;
    background:var(--gold);
    width:0%;
    transition:width 1.1s var(--ease);
  }
  .approach-steps{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:auto auto 1fr;
    grid-auto-flow:column;
    gap:16px 28px;
  }
  .approach-step{ display:contents; }
  .approach-step .node{
    width:44px; height:44px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--gold);
    color:var(--purple);
    font-family:var(--display-text);
    font-weight:400;
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
    z-index:1;
  }
  .approach-step h3{
    font-size:18.5px;
    font-weight:600;
    font-family:var(--body);
    letter-spacing:0.01em;
    align-self:start;
  }
  .approach-step p{
    font-size:14.5px;
    color:var(--ink);
    line-height:1.65;
    align-self:start;
  }

  @media (max-width: 980px){
    .approach-line, .approach-line-fill{ display:none; }
    .approach-steps{
      grid-template-columns:1fr;
      grid-auto-flow:row;
      gap:0;
    }
    .approach-step{
      display:flex;
      flex-direction:column;
      gap:16px;
      position:relative;
      padding-left:32px;
      padding-bottom:40px;
      border-left:1px solid var(--line);
      margin-left:21px;
    }
    .approach-step:last-child{ border-color:transparent; padding-bottom:0; }
    .approach-step .node{
      position:absolute;
      left:-22px; top:0;
      width:44px; height:44px;
    }
    .approach-step > *:not(.node){ padding-left:8px; }
  }

  .approach-cta{ margin-top:56px; }

  /* ============ SECTION 7 : ABOUT ============ */
  .about-grid{
    display:grid;
    grid-template-columns:0.62fr 1fr;
    gap:clamp(40px,6vw,90px);
    align-items:start;
  }
  .about-portrait{
    position:relative;
  }
  .portrait-frame{
    aspect-ratio:3/4;
    overflow:hidden;
    border-radius:2px;
    position:relative;
    background:var(--charcoal);
  }
  .portrait-frame img{
    width:100%; height:100%; object-fit:cover; object-position:50% 18%;
    filter:saturate(0.94) contrast(1.02);
  }
  .portrait-rule{
    position:absolute;
    left:-22px; top:28px; bottom:28px;
    width:1px;
    background:var(--gold);
  }
  @media (max-width: 640px){ .portrait-rule{ display:none; } }

  .about-copy h2{ font-size:clamp(31px,3.8vw,44px); color:var(--purple); font-weight:400; }
  .about-copy .lede{
    margin-top:22px;
    font-size:17px;
    color:var(--ink);
    max-width:56ch;
    line-height:1.75;
  }
  .attr-list{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px 28px;
    list-style:none;
    padding:0;
  }
  .attr-list li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:600;
    color:var(--charcoal);
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .attr-list li svg{ flex:none; }
  .about-cta{ margin-top:44px; }

  @media (max-width: 900px){
    .about-grid{ grid-template-columns:1fr; }
    .about-portrait{ max-width:320px; }
    .attr-list{ grid-template-columns:1fr; }
  }

  /* ============ SECTION 8 : PRINCIPAL-LED ============ */
  .principal{ background:var(--panel); }
  .principal-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(36px,6vw,90px);
  }
  .principal-grid h2{ font-size:clamp(31px,3.8vw,44px); color:var(--purple); font-weight:400; }
  .principal-body p{
    font-size:16.5px;
    color:var(--ink);
    line-height:1.8;
  }
  .principal-body p + p{ margin-top:20px; }
  .discretion-note{
    margin-top:32px;
    padding-left:24px;
    border-left:2px solid var(--gold);
  }
  .discretion-note p{
    font-family:var(--display-text);
    font-style:italic;
    font-size:17px;
    color:var(--charcoal);
    line-height:1.65;
  }
  @media (max-width: 900px){ .principal-grid{ grid-template-columns:1fr; } }

  /* ============ SECTION 9 : CLOSING CTA ============ */
  .closing{
    background:var(--purple-deep);
    color:#fff;
    text-align:center;
  }
  .closing h2{
    color:#fff;
    font-size:clamp(31.5px,4.4vw,52.5px);
    max-width:18ch;
    margin-inline:auto;
  }
  .closing .lede{
    margin-top:22px;
    font-size:17.5px;
    color:rgba(255,255,255,0.82);
    max-width:52ch;
    margin-inline:auto;
  }
  .closing .invite{
    margin-top:14px;
    font-size:15.5px;
    color:rgba(255,255,255,0.62);
    max-width:52ch;
    margin-inline:auto;
  }
  .closing .btn{ margin-top:44px; }

  /* ============ FOOTER ============ */
  .site-footer{
    background:var(--charcoal);
    color:rgba(255,255,255,0.72);
    padding-block:64px 40px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
    padding-bottom:44px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-logo{
    height:38px;
    width:auto;
    display:block;
  }
  .footer-tagline{
    margin-top:18px;
    font-size:13.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5);
  }
  .footer-nav{
    display:flex;
    flex-wrap:wrap;
    gap:14px 32px;
  }
  .footer-nav a{
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    color:rgba(255,255,255,0.72);
    transition:color .2s var(--ease);
  }
  .footer-nav a:hover{ color:#fff; }

  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    padding-top:32px;
    font-size:14px;
  }
  .footer-contact{
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
  }
  .footer-contact a{ text-decoration:none; color:rgba(255,255,255,0.78); }
  .footer-contact a:hover{ color:#fff; }
  .footer-social{ display:flex; align-items:center; gap:16px; }
  .footer-social a{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:50%;
    color:rgba(255,255,255,0.8);
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
  .footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
  .footer-legal{
    margin-top:28px;
    font-size:12.5px;
    color:rgba(255,255,255,0.4);
  }
  .footer-legal a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color .2s var(--ease);
  }
  .footer-legal a:hover{ color:rgba(255,255,255,0.75); }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  a.visually-hidden:focus{
    position:fixed;
    top:12px; left:12px;
    width:auto; height:auto;
    overflow:visible;
    clip:auto;
    white-space:normal;
    margin:0;
    padding:12px 20px;
    background:var(--purple);
    color:#fff;
    font-family:var(--body);
    font-weight:600;
    font-size:14px;
    border-radius:4px;
    z-index:1000;
  }

  /* ============ PASS 2 / 2B / 2C / 2D — CONSTELLATION & MICRO-INTERACTION MOTION ============ */
  /* A continuous, looping background system (see site.js for the timeline
     controller). Timings here are the "how it looks" half; the "when it
     happens" half — the travel/pause/rest schedule — lives in JS because it
     depends on each SVG's real path length and waypoint positions. */

  /* Purple signal stars — a clearly visible ambient signal layer (roughly
     50–75% of the destination's presence at peak). Runs continuously and
     independently of the gold-route cycle. */
  .cx-graphic .cx-accents path{
    transform-box: fill-box;
    transform-origin: center;
    animation: cxStarTwinkle 5.6s var(--ease) infinite;
    animation-play-state: paused;
  }
  .cx-graphic.cx-active .cx-accents path{ animation-play-state: running; }
  @keyframes cxStarTwinkle{
    0%, 100%{ transform:scale(1); opacity:var(--star-min, .35); filter:brightness(.88); }
    50%{ transform:scale(1.3); opacity:var(--star-max, 1); filter:brightness(1.6) saturate(1.2); }
  }
  /* Distinct duration/delay per star (4.5–7s) so they never pulse together */
  .cx-graphic .cx-accents path:nth-child(1){ animation-duration:4.8s; animation-delay:0s; }
  .cx-graphic .cx-accents path:nth-child(2){ animation-duration:6.2s; animation-delay:1.1s; }
  .cx-graphic .cx-accents path:nth-child(3){ animation-duration:5.4s; animation-delay:2.4s; }
  .cx-graphic .cx-accents path:nth-child(4){ animation-duration:6.8s; animation-delay:.6s; }
  .cx-graphic .cx-accents path:nth-child(5){ animation-duration:5.0s; animation-delay:3.1s; }
  .cx-graphic .cx-accents path:nth-child(6){ animation-duration:6.4s; animation-delay:1.8s; }
  .cx-graphic .cx-accents path:nth-child(7){ animation-duration:4.6s; animation-delay:2.6s; }
  .cx-graphic .cx-accents path:nth-child(8){ animation-duration:5.8s; animation-delay:2.9s; }
  .cx-graphic .cx-accents path:nth-child(9){ animation-duration:6.6s; animation-delay:.9s; }

  /* Gold route — dasharray/dashoffset driven by site.js's looping timeline */
  .cx-graphic .cx-path{ will-change: stroke-dashoffset; }

  /* Intermediate waypoints — a substantially stronger arrival response
     (roughly 60–75% of the destination's emphasis) but brief: the route
     moves on again shortly after, so this never becomes a permanent state. */
  .cx-graphic .cx-waypoint circle{
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .cx-graphic .cx-waypoint.is-active circle{ opacity:.8; transform:scale(1.14); }
  .cx-graphic .cx-waypoint.is-active .cx-node{ animation: cxWaypointPulse .6s var(--ease); }

  /* Final gold destination — the clear "arrival" moment: noticeably
     stronger than the purple stars and the intermediate waypoints. A quick
     punch on arrival, then a lasting (but elegant) elevated glow for as
     long as it's held, which eases back down when it settles. */
  .cx-graphic .cx-destination circle{
    transform-box: fill-box;
    transform-origin: center;
    transition: filter .5s var(--ease);
  }
  .cx-graphic .cx-destination.is-active circle{
    filter: brightness(1.35);
    animation: cxRingExpand 1.3s var(--ease);
  }
  .cx-graphic .cx-destination .cx-node--final{
    transition: filter .5s var(--ease), transform .5s var(--ease);
  }
  .cx-graphic .cx-destination.is-active .cx-node--final{
    filter: brightness(1.5) saturate(1.25);
    transform: scale(1.22);
    animation: cxDestinationPulse 1.3s var(--ease);
  }

  @keyframes cxNodePulse{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.18); }
    100%{ transform:scale(1); }
  }
  @keyframes cxWaypointPulse{
    0%{ transform:scale(1); filter:brightness(1); }
    45%{ transform:scale(1.35); filter:brightness(1.55) saturate(1.15); }
    100%{ transform:scale(1); filter:brightness(1); }
  }
  @keyframes cxDestinationPulse{
    0%{ transform:scale(1); filter:brightness(1); }
    50%{ transform:scale(1.55); filter:brightness(1.85) saturate(1.35); }
    100%{ transform:scale(1.22); filter:brightness(1.5) saturate(1.25); }
  }
  @keyframes cxRingExpand{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.38); opacity:0; }
  }

  /* Five stage labels — Understand / Identify / Shape / Execute / Measure.
     Only present on the three smaller constellation instances (Home's
     "From insight to action", How We Help, Our Approach); the top hero
     graphic has no .cx-stage-label elements, so none of this applies to it.
     Each label appears briefly as the gold route passes its point, then
     fades — restrained, integrated, never a fixture on the illustration. */
  .cx-graphic .cx-stage-label{
    font-family:var(--body);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    fill:var(--gold);
    text-anchor:start;
    opacity:0;
    transition:opacity .6s var(--ease);
    pointer-events:none;
  }
  .cx-graphic .cx-stage-label.is-active{ opacity:1; }
  /* The medium graphics (How We Help / Our Approach) render at a smaller
     on-screen scale than the homepage's "From insight to action" graphic
     (400px cap vs ~500px+ rendered width), so the same SVG-unit font-size
     ends up visibly smaller on screen. Bumped here so the rendered label
     size matches the homepage version's actual visual weight. */
  .cx-graphic--intro .cx-stage-label{ font-size:12.5px; }

  /* Five-stage Approach process — one stage at a time, each held and settled
     before the next activates; line and node states loop with a quiet rest.
     Text and headings are never dimmed or hidden by this. */
  .approach-line-fill{ transition: width .9s var(--ease); }
  .approach-step .node{ transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
  .approach-step .node.is-active{
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(196,153,65,.14);
    animation: cxNodePulse .6s var(--ease);
  }

  /* About & Experience — restrained portrait entrance, riding on the existing .reveal fade */
  .portrait-frame{
    transform: scale(.98);
    transition: transform 1s var(--ease) .12s;
  }
  .about-portrait.is-visible .portrait-frame{ transform: scale(1); }

  /* Section eyebrow markers — a single subtle glow the moment their section
     first reveals (existing .reveal/.is-visible system; no new observer) */
  .reveal .eyebrow .mark-spark,
  .reveal .rule-mark svg{
    transform-origin: center;
    transition: opacity .5s var(--ease) .1s;
  }
  .reveal.is-visible .eyebrow .mark-spark,
  .reveal.is-visible .rule-mark svg{
    animation: cxMarkGlow .9s var(--ease) .1s;
  }
  @keyframes cxMarkGlow{
    0%{ filter:brightness(1); transform:scale(1); }
    50%{ filter:brightness(1.5); transform:scale(1.2); }
    100%{ filter:brightness(1); transform:scale(1); }
  }

  /* Button micro-interaction — subtle lift (transform already in .btn's transition list) */
  .btn:hover{ transform: translateY(-1px); }

  @media (prefers-reduced-motion: reduce){
    .cx-graphic .cx-accents path{ animation: none !important; }
    .cx-graphic .cx-path{ transition: none !important; stroke-dashoffset:0 !important; }
    .cx-graphic .cx-waypoint circle{ transform: none !important; }
    .cx-graphic .cx-waypoint.is-active .cx-node,
    .cx-graphic .cx-destination.is-active circle,
    .cx-graphic .cx-destination.is-active .cx-node--final,
    .approach-step .node.is-active,
    .reveal.is-visible .eyebrow .mark-spark,
    .reveal.is-visible .rule-mark svg{ animation: none !important; }
    .approach-line-fill{ transition: none !important; }
    .portrait-frame{ transform:none !important; transition:none !important; }
    .btn:hover{ transform:none !important; }
    .cx-graphic .cx-stage-label{ transition:none !important; opacity:0 !important; }
  }