/* Xander Ward Coaching / The Om State */
:root{
    --ground:#E9ECE8; --surface:#F4F6F3; --raise:#FFFFFF;
    --ink:#131A18; --ink-soft:#55625E; --ink-faint:#5E6B67;
    --line:#D3DAD4; --line-soft:#E0E5DF; --line-strong:#808984;
    --accent:#1E5449; --accent-ink:#F4F6F3; --accent-soft:#2E6B5D; --accent-wash:#DCE6E1;
    --orb-a:227,168,95; --orb-b:196,114,110; --orb-c:107,91,138;
    --orb-alpha:.44; --img-filter:saturate(.92) contrast(1.02);
    --star:#A87C3E;
    --serif:"Hoefler Text","Iowan Old Style",Charter,Baskerville,"Times New Roman",Georgia,serif;
    --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --measure:37rem;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0E1413; --surface:#161F1C; --raise:#1B2522;
      --ink:#E7EBE7; --ink-soft:#97A5A0; --ink-faint:#8B9793;
      --line:#222D2A; --line-soft:#1C2624; --line-strong:#676E6A;
      --accent:#74BCA9; --accent-ink:#0E1413; --accent-soft:#8FD0BF; --accent-wash:#1A2925;
      --orb-alpha:.56; --img-filter:saturate(.86) contrast(1.04) brightness(.92);
      --star:#C9A063;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0E1413; --surface:#161F1C; --raise:#1B2522;
    --ink:#E7EBE7; --ink-soft:#97A5A0; --ink-faint:#8B9793;
    --line:#222D2A; --line-soft:#1C2624; --line-strong:#676E6A;
    --accent:#74BCA9; --accent-ink:#0E1413; --accent-soft:#8FD0BF; --accent-wash:#1A2925;
    --orb-alpha:.56; --img-filter:saturate(.86) contrast(1.04) brightness(.92);
    --star:#C9A063;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.25rem}
  body{margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--serif); font-size:1.0625rem; line-height:1.72; overflow-x:hidden}
  ::selection{background:var(--accent); color:var(--accent-ink)}
  a{color:inherit}
  img{max-width:100%; display:block}
  .wrap{max-width:76rem; margin:0 auto; padding:0 1.5rem}
  .skip{position:absolute; left:-9999px}
  .skip:focus{position:fixed; left:1rem; top:1rem; z-index:60; left:1rem;
    background:var(--raise); color:var(--ink); border:1px solid var(--accent);
    border-radius:.5rem; padding:.7rem 1rem; font-family:var(--sans); font-size:.875rem}

  .label{font-family:var(--sans); font-size:.6875rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0}
  h1,h2,h3{margin:0; font-weight:400; text-wrap:balance; letter-spacing:-.018em}
  h1{font-size:clamp(2.5rem,6.4vw,4.25rem); line-height:1.02}
  h2{font-size:clamp(1.85rem,3.6vw,2.6rem); line-height:1.1}
  h3{font-size:1.1875rem; line-height:1.35; letter-spacing:-.01em}
  p{margin:0}

  header.nav{position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid transparent; transition:border-color .3s ease}
  header.nav.stuck{border-bottom-color:var(--line)}
  .nav-in{display:flex; align-items:center; gap:2rem; height:4.25rem}
  .mark{font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; margin-right:auto; display:flex;
    align-items:center; gap:.6rem; white-space:nowrap}
  .mark span{color:var(--ink-faint); font-weight:500; letter-spacing:.1em}
  .mark svg{width:1.35rem; height:1.35rem; color:var(--accent); flex:none}
  .nav-links{display:flex; gap:1.35rem; font-family:var(--sans); font-size:.8125rem; white-space:nowrap}
  .nav-links a{color:var(--ink-soft); text-decoration:none; transition:color .18s ease}
  .nav-links a:hover{color:var(--ink)}
  @media (max-width:1080px){.nav-links{display:none}}
  /* below this the nowrap logo would push the CTA off-screen, so drop the second word */
  @media (max-width:600px){
    .nav-in{gap:1rem}
    .mark span{display:none}
    .mark{font-size:.75rem; letter-spacing:.1em}
  }

  .btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans);
    font-size:.875rem; font-weight:550; padding:.8rem 1.35rem; border-radius:2rem;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:all .2s ease; white-space:nowrap}
  .btn-primary{background:var(--accent); color:var(--accent-ink)}
  .btn-primary:hover{background:var(--accent-soft)}
  .btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent}
  .btn-ghost:hover{border-color:var(--ink-faint); background:var(--surface)}
  .btn-sm{padding:.6rem 1.1rem; font-size:.8125rem}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px}

  /* hero + canvas breath field */
  .hero{position:relative; padding:clamp(4rem,11vh,7.5rem) 0 clamp(4.5rem,9vh,7rem); overflow:hidden}
  #breathfield{position:absolute; inset:0; width:100%; height:100%; z-index:0;
    pointer-events:none; opacity:var(--orb-alpha)}
  .hero-in{position:relative; z-index:1; max-width:44rem}
  .hero .label{margin-bottom:1.75rem}
  .hero h1{margin-bottom:.15em}
  .hero .thesis{font-size:clamp(1.6rem,3.4vw,2.35rem); line-height:1.22; font-style:italic;
    color:var(--accent); letter-spacing:-.015em; margin-bottom:1.6rem}
  .hero p.lede{max-width:32rem; color:var(--ink-soft); font-size:1.125rem; margin-bottom:2.25rem}
  .cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
  .breath-note{margin-top:1.75rem; font-family:var(--sans); font-size:.75rem;
    letter-spacing:.04em; color:var(--ink-faint); max-width:25rem; line-height:1.6}

  /* personal hero: greeting + portrait side by side */
  .hero-grid{position:relative; z-index:1; display:grid;
    grid-template-columns:minmax(0,34rem) 18rem; gap:3.5rem; align-items:center}
  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr; gap:2rem; max-width:34rem}
    .hero-portrait{order:-1; max-width:13rem}
  }
  .hero-portrait{border-radius:1rem; overflow:hidden; border:1px solid var(--line);
    background:var(--surface); margin:0}
  .hero-portrait img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; filter:var(--img-filter)}
  .hero-copy{display:flex; flex-direction:column; gap:1.15rem}
  .hero-copy .thesis{margin:.35rem 0 .6rem}
  .hero-copy p.lede{margin-bottom:0}

  /* the three doors */
  .door .price-line{font-family:var(--sans); font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint)}
  .door .btn{align-self:flex-start; margin-top:auto}

  /* the arc diagram */
  .arc{display:flex; flex-direction:column; gap:1.25rem}
  .arc-figure{margin:0; border:1px solid var(--line); border-radius:.85rem;
    background:var(--surface); padding:1.5rem 1.25rem 1rem}
  .arc-figure svg{width:100%; height:auto; display:block; overflow:visible}
  .arc-track{fill:none; stroke:var(--line-strong); stroke-width:1.5; stroke-dasharray:2 6; stroke-linecap:round}
  .arc-line{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
  .arc-dot{fill:var(--surface); stroke:var(--accent); stroke-width:2.5}
  .arc-num{fill:var(--accent); font-family:var(--sans); font-size:13px; font-weight:600; text-anchor:middle}
  .arc-axis{fill:var(--ink-faint); font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
  .arc-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1.25rem}
  .arc-step{display:flex; flex-direction:column; gap:.3rem}
  .arc-step .n{display:inline-flex; align-items:center; justify-content:center;
    width:1.5rem; height:1.5rem; border-radius:50%; border:1.5px solid var(--accent);
    color:var(--accent); font-family:var(--sans); font-size:.75rem; font-weight:600}
  .arc-step h3{font-size:1.0625rem}
  .arc-step p{font-size:.9375rem; line-height:1.6; color:var(--ink-soft)}
  @media (prefers-reduced-motion:no-preference){
    .js .arc-line{stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.4s ease .15s}
    .js .rv.in .arc-line{stroke-dashoffset:0}
    .js .arc-dot, .js .arc-num{opacity:0; transition:opacity .5s ease}
    .js .rv.in .arc-dot, .js .rv.in .arc-num{opacity:1}
    .js .rv.in .arc-dot:nth-of-type(1){transition-delay:.5s}
    .js .rv.in .arc-dot:nth-of-type(2){transition-delay:1.0s}
    .js .rv.in .arc-dot:nth-of-type(3){transition-delay:1.6s}
    .js .rv.in .arc-dot:nth-of-type(4){transition-delay:2.2s}
  }

  /* full-bleed photography */
  .photo-band{margin:0; width:100%; position:relative; background:var(--surface);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .photo-band{overflow:hidden}
  .photo-band img{width:100%; height:auto; aspect-ratio:2.4; object-fit:cover;
    display:block; filter:var(--img-filter); will-change:transform}
  .js .photo-band img{transform:translate3d(0, var(--drift, 0px), 0) scale(1.16)}
  @media (prefers-reduced-motion:reduce){ .js .photo-band img{transform:none} }
  .photo-band figcaption{max-width:76rem; margin:0 auto; padding:.85rem 1.5rem;
    font-family:var(--sans); font-size:.75rem; letter-spacing:.03em; color:var(--ink-faint)}
  @media (max-width:700px){ .photo-band img{aspect-ratio:1.6} }

  /* an image sitting inside a content block */
  .inline-photo{margin:0; border-radius:.85rem; overflow:hidden;
    border:1px solid var(--line); background:var(--surface)}
  .inline-photo img{width:100%; height:auto; aspect-ratio:1.5; object-fit:cover;
    display:block; filter:var(--img-filter)}
  .inline-photo.wide img{aspect-ratio:2.2}
  .inline-photo.tall img{aspect-ratio:4/5}
  .inline-photo figcaption{padding:.75rem 1rem; border-top:1px solid var(--line);
    font-family:var(--sans); font-size:.75rem; color:var(--ink-faint); line-height:1.5}

  section.band{border-top:1px solid var(--line); padding:clamp(3.5rem,8vh,6rem) 0}
  .grid{display:grid; grid-template-columns:11rem minmax(0,var(--measure)); gap:0 4rem; align-items:start}
  .grid.wide{grid-template-columns:11rem minmax(0,52rem)}
  @media (max-width:900px){.grid,.grid.wide{grid-template-columns:1fr; gap:1.5rem 0}}
  .rail{position:sticky; top:6rem; display:flex; flex-direction:column; gap:1rem}
  .rail svg{width:2.25rem; height:2.25rem; color:var(--accent); opacity:.8}
  @media (max-width:900px){.rail{position:static; flex-direction:row; align-items:center; gap:.75rem}
    .rail svg{width:1.5rem; height:1.5rem}}
  .col{display:flex; flex-direction:column; gap:1.5rem}
  .col p{color:var(--ink-soft)}
  .lead{color:var(--ink) !important; font-size:1.1875rem}

  .stack{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft)}
  .item{padding:1.4rem 0; border-bottom:1px solid var(--line-soft);
    display:grid; grid-template-columns:2.5rem 1fr; gap:1.25rem; align-items:start}
  .item svg{width:2rem; height:2rem; color:var(--accent); opacity:.85; margin-top:.15rem}
  .item h3{margin-bottom:.4rem}
  .item p{color:var(--ink-soft)}
  @media (max-width:560px){.item{grid-template-columns:1fr; gap:.75rem}}

  .modes{display:grid; gap:1px; background:var(--line-soft);
    border:1px solid var(--line-soft); border-radius:.75rem; overflow:hidden}
  .mode{background:var(--surface); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.55rem}
  .mode svg{width:2.1rem; height:2.1rem; color:var(--accent); margin-bottom:.2rem}
  .mode .label{color:var(--accent)}
  .mode p{font-size:1rem}

  /* the thesis line: same voice as the hero thesis and the closing question */
  .pull{font-size:clamp(1.45rem,3vw,2.05rem); line-height:1.26; font-style:italic;
    color:var(--accent); letter-spacing:-.015em; margin:.75rem 0}

  /* practices */
  .practices{display:grid; grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr)); gap:1rem}
  .practice{background:var(--surface); border:1px solid var(--line); border-radius:.75rem;
    padding:1.5rem 1.35rem; display:flex; flex-direction:column; gap:.6rem}
  .practice svg{width:1.9rem; height:1.9rem; color:var(--accent)}
  .practice h3{font-size:1.0625rem}
  .practice p{font-size:.9375rem; line-height:1.6; color:var(--ink-soft)}

  /* service cards (sessions page) */
  .services{display:grid; gap:1rem}
  .service{border:1px solid var(--line); border-radius:.85rem; padding:1.6rem;
    background:var(--surface); display:grid; grid-template-columns:2.6rem 1fr auto;
    gap:.5rem 1.25rem; align-items:start}
  .service > svg{width:2.1rem; height:2.1rem; color:var(--accent); grid-row:span 2}
  .service-head{display:flex; flex-direction:column; gap:.15rem}
  .service h3{font-size:1.25rem}
  .service .dur{font-family:var(--sans); font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint)}
  .service .amount{grid-column:3; justify-self:end; font-family:var(--sans); font-size:1.5rem;
    font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;
    white-space:nowrap; letter-spacing:-.01em}
  .service > p:not(.amount){grid-column:2 / -1; font-size:1rem; color:var(--ink-soft)}
  .service .btn{grid-column:2 / -1; justify-self:start; margin-top:.5rem}
  @media (max-width:620px){
    .service{grid-template-columns:2.6rem 1fr}
    .service .amount{grid-column:2; justify-self:start; font-size:1.25rem}
    .service > p:not(.amount){grid-column:1 / -1}
    .service p, .service .btn{grid-column:1 / -1}
  }

  /* group band */
  .group-band{border:1px solid var(--accent); border-radius:.85rem; padding:2rem;
    background:var(--accent-wash); display:flex; flex-direction:column; gap:1rem}
  .group-list{display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0}
  .group-list span{font-family:var(--sans); font-size:.8125rem; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:2rem; padding:.35rem .8rem; background:var(--surface)}

  /* cross-link to the other page */
  .crosslink{border:1px solid var(--line); border-radius:.85rem; padding:1.5rem 1.6rem;
    background:var(--surface); display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap;
    text-decoration:none; transition:border-color .2s ease, background .2s ease}
  .crosslink:hover{border-color:var(--accent); background:var(--raise)}
  .crosslink svg{width:2.2rem; height:2.2rem; color:var(--accent); flex:none}
  .crosslink .cl-copy{flex:1 1 16rem; display:flex; flex-direction:column; gap:.25rem}
  .crosslink h3{font-size:1.0625rem}
  .crosslink p{font-size:.9375rem; color:var(--ink-soft)}
  .crosslink .cl-go{font-family:var(--sans); font-size:.8125rem; color:var(--accent); white-space:nowrap}

  /* ripple hero (sessions page) */
  .ripple-hero{position:absolute; right:-10rem; top:50%; transform:translateY(-50%);
    width:44rem; height:44rem; color:var(--accent); pointer-events:none; z-index:0; opacity:.5}
  .ripple-hero circle{opacity:0; transform-origin:200px 200px;
    animation:pulse 9s cubic-bezier(.22,.61,.36,1) infinite}
  .ripple-hero circle:nth-child(2){animation-delay:1.8s}
  .ripple-hero circle:nth-child(3){animation-delay:3.6s}
  .ripple-hero circle:nth-child(4){animation-delay:5.4s}
  .ripple-hero circle:nth-child(5){animation-delay:7.2s}
  @keyframes pulse{
    0%{transform:scale(.18); opacity:0}
    12%{opacity:.55}
    100%{transform:scale(1); opacity:0}
  }
  @media (max-width:900px){.ripple-hero{right:-18rem; opacity:.3}}

  /* breath pacer */
  .pacer{border-top:1px solid var(--line); background:var(--surface);
    padding:clamp(3.5rem,8vh,5.5rem) 0}
  .pacer-in{display:grid; grid-template-columns:19rem minmax(0,30rem); gap:4rem;
    align-items:center; justify-content:center}
  @media (max-width:860px){.pacer-in{grid-template-columns:1fr; gap:2.5rem; justify-items:center; text-align:center}}
  .ring-wrap{position:relative; width:19rem; height:19rem; display:grid; place-items:center}
  .ring-wrap svg{position:absolute; inset:0; width:100%; height:100%}
  #pacerRing{transition:none; transform-origin:center}
  .ring-core{position:relative; z-index:1; text-align:center; display:flex;
    flex-direction:column; gap:.35rem; align-items:center}
  #pacerPhase{font-size:1.5rem; font-style:italic; color:var(--accent); letter-spacing:-.01em}
  #pacerCount{font-family:var(--sans); font-size:.75rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums}
  .pacer-copy{display:flex; flex-direction:column; gap:1.25rem}
  .pacer-copy p{color:var(--ink-soft)}

  .about-grid{display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:3.5rem; align-items:start}
  /* the About prose is long; keep his face beside it rather than orphaned at the top */
  .about-grid > .inline-photo{position:sticky; top:6.5rem}
  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr; gap:2rem}
    .about-grid > .inline-photo{position:static; max-width:20rem}
  }
  .portrait{position:relative; border-radius:.75rem; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); margin:0}
  .portrait img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
    object-position:50% 26%; filter:var(--img-filter)}
  .portrait figcaption{font-family:var(--sans); font-size:.75rem; letter-spacing:.03em;
    color:var(--ink-faint); padding:.85rem 1rem; border-top:1px solid var(--line); line-height:1.5}
  .training{display:grid; grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr)); gap:.75rem; margin-top:.5rem}
  .chip{display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.8125rem;
    color:var(--ink-soft); border:1px solid var(--line); border-radius:.6rem;
    padding:.7rem .85rem; background:var(--surface)}
  .chip svg{width:1.15rem; height:1.15rem; color:var(--accent); flex:none}

  /* rotating pull-quote above the reviews */
  .snip{min-height:9rem; display:flex; flex-direction:column; justify-content:center;
    gap:.9rem; padding:1.75rem 0 .25rem; position:relative}
  .snip blockquote{margin:0; font-size:clamp(1.35rem,2.9vw,1.95rem); line-height:1.28;
    font-style:italic; color:var(--accent); letter-spacing:-.015em; text-wrap:balance}
  .snip cite{font-family:var(--sans); font-size:.75rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-faint); font-style:normal}
  .snip-body{transition:opacity .5s ease}
  .snip.fading .snip-body{opacity:0}
  .snip-dots{display:flex; gap:.45rem; margin-top:.35rem}
  .snip-dots button{width:.45rem; height:.45rem; padding:0; border-radius:50%;
    border:none; background:var(--line-strong); cursor:pointer; transition:background .3s ease}
  .snip-dots button[aria-current="true"]{background:var(--accent)}
  @media (prefers-reduced-motion:reduce){ .snip-body{transition:none} }

  /* reviews */
  .reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1rem}
  .review{border:1px solid var(--line); border-radius:.75rem; padding:1.4rem;
    background:var(--surface); display:flex; flex-direction:column; gap:.85rem}
  .stars{display:flex; gap:.15rem; color:var(--star)}
  .stars svg{width:.9rem; height:.9rem}
  .review blockquote{margin:0; font-size:1.0625rem; line-height:1.6; color:var(--ink)}
  .review cite{font-family:var(--sans); font-size:.75rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-faint); font-style:normal; margin-top:auto}
  .review-src{font-family:var(--sans); font-size:.6875rem; color:var(--ink-faint); text-decoration:none}
  .review-src:hover{text-decoration:underline}

  .offers{display:grid; gap:1rem}
  .offer{border:1px solid var(--line); border-radius:.75rem; padding:1.5rem;
    background:var(--surface); display:flex; flex-direction:column; gap:.7rem}
  .offer.feature{border-color:var(--accent); background:var(--raise)}
  .offer-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
  .price{font-family:var(--sans); font-size:.9375rem; color:var(--ink-faint);
    font-variant-numeric:tabular-nums; white-space:nowrap}
  .offer p{font-size:1rem}
  .offer .btn{align-self:flex-start; margin-top:.35rem}

  .terms{display:flex; flex-direction:column; gap:1.1rem; padding-left:0; margin:0; list-style:none}
  .terms li{display:grid; grid-template-columns:1.25rem 1fr; gap:.85rem; color:var(--ink-soft)}
  .terms li::before{content:""; width:.5rem; height:.5rem; margin-top:.62rem;
    border-radius:50%; background:var(--accent)}

  details{border-bottom:1px solid var(--line-soft); padding:1.1rem 0}
  details:first-of-type{border-top:1px solid var(--line-soft)}
  summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
    gap:1.5rem; align-items:baseline; font-size:1.0625rem}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; font-family:var(--sans); color:var(--ink-faint); font-size:1.1rem; line-height:1}
  details[open] summary::after{content:"\2212"}
  details p{margin-top:.85rem; color:var(--ink-soft)}

  .close{border-top:1px solid var(--line); padding:clamp(4.5rem,10vh,7.5rem) 0;
    position:relative; overflow:hidden}
  .close-in{max-width:42rem; position:relative; z-index:1}
  .close .q{font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.3; font-style:italic;
    letter-spacing:-.015em; margin-bottom:2rem}
  .close .q span{color:var(--accent)}
  .ripple{position:absolute; right:-8rem; top:50%; transform:translateY(-50%);
    width:34rem; height:34rem; color:var(--accent); opacity:.13; pointer-events:none; z-index:0}
  @media (max-width:900px){.ripple{opacity:.07; right:-14rem}}

  footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem;
    font-family:var(--sans); font-size:.8125rem; color:var(--ink-faint)}
  .foot-grid{display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start; justify-content:space-between}
  footer a{color:var(--ink-soft); text-decoration:none}
  footer a:hover{color:var(--ink); text-decoration:underline}
  .foot-col{display:flex; flex-direction:column; gap:.5rem; max-width:24rem; line-height:1.65}
  .crisis{color:var(--ink-soft); font-size:.8125rem; line-height:1.6}

  .js .rv{opacity:0; transform:translateY(6px); transition:opacity .7s ease, transform .7s ease}
  .js .rv.in{opacity:1; transform:none}

  @media (prefers-reduced-motion:reduce){
    .js .rv{opacity:1; transform:none; transition:none}
    html{scroll-behavior:auto}
    .ripple-hero circle{animation:none; opacity:.3}
  }