/* =========================================================
   Ohio Valley Strategy — homepage
   Loaded only on index.html, after styles.css.
   Sections, in page order:
     1. Shared homepage pieces
     2. Hero + momentum map
     3. Fact strip
     4. Centered section heading
     5. Services index
     6. How OVS works
     7. Walker
     8. Closing call to action
     9. Motion (all of it lives here)
    10. Responsive
   ========================================================= */

/* ---------- 1. Shared homepage pieces ---------- */
.page-home main > section{position:relative}
.h-head{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.h-head h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08}
.h-head--split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap}
.h-head--split h2{max-width:18ch}

.h-quiet{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;color:#fff;border-bottom:1px solid rgba(232,209,182,.45);padding-top:2px;transition:color .2s,border-color .2s}
.h-quiet svg{width:18px;height:18px;transition:transform .25s}
.h-quiet:hover{color:var(--sand);border-color:var(--sand)}
.h-quiet:hover svg{transform:translateX(4px)}
.h-quiet--dark{color:var(--forest);border-color:var(--line-strong)}
.h-quiet--dark:hover{color:var(--green-700);border-color:var(--green-700)}

.btn-lg{min-height:56px;padding:1rem 1.6rem;font-size:1.02rem}

/* ---------- 2. Hero + momentum map ---------- */
.h-hero{background:var(--forest-900);color:rgba(255,255,255,.8);overflow:hidden;isolation:isolate}
.h-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(820px 520px at 78% 30%,rgba(62,117,86,.42),transparent 70%),
             radial-gradient(640px 420px at 8% 100%,rgba(232,209,182,.07),transparent 70%)}
.h-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:url("contours.svg") center/cover no-repeat;opacity:.28;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:end;
  min-height:min(740px,calc(100svh - var(--header-h)))}
.h-hero-copy{align-self:center;padding:clamp(40px,6vh,80px) 0 clamp(64px,9vh,104px);position:relative;z-index:1}
.h-kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin:0 0 1.5rem;display:flex;align-items:center;gap:12px}
.h-kicker::before{content:"";width:28px;height:2px;background:var(--sand);flex-shrink:0}
.h-hero h1{color:#fff;font-size:clamp(2.5rem,4.3vw,3.9rem);line-height:1.04;letter-spacing:-.025em;margin:0 0 1.4rem;max-width:15ch}
.h-hero h1 span{display:block}
.h-hero h1 .h1-b{color:var(--sand)}
.h-lead{font-size:clamp(1.08rem,1.45vw,1.25rem);line-height:1.55;max-width:34em;margin:0 0 2.1rem;color:rgba(255,255,255,.82)}
.h-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}

.momentum{position:relative;margin:0;aspect-ratio:640/560;align-self:end;max-height:calc(100svh - var(--header-h) - 24px)}
.mm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mm-rings ellipse{fill:none;stroke:rgba(232,209,182,.13);stroke-width:1}
.mm-ridge.r1{fill:#2b4436;opacity:.6}
.mm-ridge.r2{fill:#1f3329}
.mm-ridge.r3{fill:var(--forest-950)}
.mm-river-glow{fill:none;stroke:#9cc4a8;stroke-width:16;stroke-linecap:round;opacity:.12}
.mm-river{fill:none;stroke:url(#mmRiver);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.mm-node circle{fill:var(--sand)}
.mm-node .mm-halo{fill:rgba(232,209,182,.16);stroke:rgba(232,209,182,.5);stroke-width:1}
.mm-labels{position:absolute;inset:0;pointer-events:none}
.mm-label{position:absolute;display:flex;flex-direction:column;gap:2px;translate:18px calc(-100% - 12px);white-space:nowrap}
.mm-label strong{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.mm-label{font-family:var(--font-display);font-size:1.12rem;line-height:1.2;color:#fff}
.mm-label.mm-idea{translate:18px 12px}
.mm-label.mm-traction{translate:calc(-100% - 18px) calc(-100% + 4px);text-align:right;align-items:flex-end}
.mm-label.mm-scale{translate:calc(-100% - 20px) -50%;text-align:right;align-items:flex-end}

/* ---------- 3. Fact strip (centered, icon-led) ---------- */
.h-facts{background:var(--white);padding:clamp(64px,8vw,104px) 0;overflow:hidden;isolation:isolate}
.h-facts::before{content:"";position:absolute;left:50%;top:-40%;width:1100px;height:180%;translate:-50% 0;z-index:-1;
  background:url("contours.svg") center/contain no-repeat;opacity:.07}
.facts{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;text-align:center}
.facts li{display:flex;flex-direction:column;align-items:center;padding:0 clamp(18px,3vw,40px);position:relative}
.facts li + li::before{content:"";position:absolute;left:0;top:28px;bottom:10px;width:1px;background:linear-gradient(180deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent)}
.fact-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--forest);color:var(--sand);margin-bottom:1.2rem;
  box-shadow:0 0 0 8px var(--green-100),0 12px 28px -10px rgba(22,36,29,.45);transition:transform .3s}
.fact-ic svg{width:28px;height:28px}
.facts li:hover .fact-ic{transform:translateY(-3px) rotate(-4deg)}
.fact-t{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-700);margin:0 0 .7rem}
.facts p{margin:0;font-family:var(--font-display);font-size:clamp(1.2rem,1.7vw,1.42rem);line-height:1.32;color:var(--ink);max-width:22ch}

/* ---------- 4. Centered section heading (used by Services) ---------- */
.h-head--center{margin-left:auto;margin-right:auto;text-align:center;max-width:720px}
.h-head--center .eyebrow{justify-content:center}

/* ---------- 5. Services (centered cards) ---------- */
.h-services{background:var(--cream);padding:clamp(88px,10vw,136px) 0 clamp(72px,9vw,128px)}

/* seam between the fact strip and Services: emblem medallion on the section edge with fading rules */
.h-seam{position:absolute;left:50%;top:0;translate:-50% -50%;z-index:2;display:flex;align-items:center;gap:18px;width:min(880px,calc(100% - 2 * var(--gutter)))}
.seam-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 45%,var(--sand))}
.seam-line:last-child{background:linear-gradient(270deg,transparent,var(--line-strong) 45%,var(--sand))}
.seam-line::after{content:"";display:block;width:7px;height:7px;margin:-3px 0 0 auto;rotate:45deg;background:var(--sand)}
.seam-line:last-child::after{margin:-3px auto 0 0}
.seam-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--white);flex-shrink:0;
  box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--cream),0 0 0 9px var(--line),0 14px 30px -14px rgba(22,36,29,.35)}
.seam-mark img{width:40px;height:auto}
.svc-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.svc-grid li{flex:0 1 calc((100% - 36px) / 3);display:flex}
.svc-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;padding:34px 26px 28px;
  background:var(--white);border:1px solid var(--line);border-radius:18px;color:var(--ink);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svc-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--green),var(--sand))}
.svc-num{position:absolute;top:16px;right:20px;font-family:var(--font-display);font-size:.95rem;color:var(--green-700);transition:color .3s}
.svc-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--forest);color:var(--sand);margin-bottom:1.1rem;box-shadow:0 0 0 8px var(--green-100);transition:background-color .3s,color .3s,box-shadow .3s}
.svc-ic svg{width:28px;height:28px}
.svc-name{font-family:var(--font-display);font-size:1.4rem;line-height:1.18;margin-bottom:.55rem;transition:color .3s}
.svc-desc{font-size:1rem;line-height:1.5;color:var(--body);max-width:30ch;margin-bottom:1rem;transition:color .3s}
.svc-for{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--green-700);padding:5px 12px;border-radius:999px;background:var(--cream);border:1px solid var(--line);margin-bottom:1.2rem;transition:background-color .3s,color .3s,border-color .3s}
.svc-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;color:var(--forest);transition:color .3s}
.svc-go svg{width:16px;height:16px;transition:transform .25s}
.svc-card:hover,.svc-card:focus-visible{transform:translateY(-5px);box-shadow:0 24px 44px -20px rgba(22,36,29,.5);border-color:var(--forest)}
.svc-card:hover::before,.svc-card:focus-visible::before{transform:none}
.svc-card:hover .svc-name,.svc-card:focus-visible .svc-name{color:#fff}
.svc-card:hover .svc-desc,.svc-card:focus-visible .svc-desc{color:rgba(255,255,255,.8)}
.svc-card:hover .svc-num,.svc-card:focus-visible .svc-num,.svc-card:hover .svc-go,.svc-card:focus-visible .svc-go{color:var(--sand)}
.svc-card:hover .svc-for,.svc-card:focus-visible .svc-for{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--sand)}
.svc-card:hover .svc-ic,.svc-card:focus-visible .svc-ic{background:var(--sand);color:var(--forest);box-shadow:0 0 0 8px rgba(255,255,255,.08)}
.svc-card:hover .svc-go svg{transform:translateX(4px)}
.svc-card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.svc-foot{display:flex;justify-content:center;margin-top:36px}

/* ---------- 6. How OVS works ---------- */
.h-how{background:var(--forest);color:rgba(255,255,255,.78);padding:clamp(72px,9vw,128px) 0;overflow:hidden;isolation:isolate}
.h-how::after{content:"";position:absolute;inset:0;z-index:-1;background:url("contours.svg") center/cover no-repeat;opacity:.18}
.h-how h2{color:#fff;max-width:22ch}
.h-how .eyebrow{color:var(--sand)}
.how-track{position:relative;padding-top:8px}
.how-line{position:absolute;left:0;right:0;top:0;width:100%;height:60px;overflow:visible}
.how-line path{fill:none;stroke:var(--sand);stroke-width:2;stroke-linecap:round;opacity:.7;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.stage{position:relative;padding-top:64px}
.stage-dot{position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;background:var(--forest);border:3px solid var(--sand);box-shadow:0 0 0 6px rgba(232,209,182,.12)}
.stage-word{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--sand);letter-spacing:-.02em;margin-bottom:1rem}
.stage h3{color:#fff;font-size:1.3rem;margin-bottom:.55rem}
.stage p{color:rgba(255,255,255,.76);margin:0;max-width:34ch}

/* ---------- 7. Walker ---------- */
.h-walker{background:var(--sand-200);padding:clamp(72px,9vw,128px) 0}
.walker-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.walker-photo{position:relative;margin:0;max-width:400px;justify-self:end;width:100%}
.wp-frame{position:relative}
.wp-frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--forest);border-radius:4px;opacity:.35}
.walker-photo img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:4px;box-shadow:var(--shadow-lg);background:var(--forest)}
.walker-photo figcaption{position:relative;margin-top:34px;font-size:.92rem;color:var(--body)}
.walker-photo figcaption strong{display:block;font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--ink)}
.walker-story h2{font-size:clamp(2rem,3.4vw,2.8rem);max-width:17ch;margin-bottom:1.2rem}
.walker-intro{font-size:1.12rem;line-height:1.6;color:var(--ink);max-width:36em;margin-bottom:1.6rem}
.walker-path{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--line-strong)}
.walker-path li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--line-strong)}
.walker-path span{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);padding-top:.3em}
.walker-path p{margin:0;color:var(--body)}
.walker-close{font-family:var(--font-display);font-size:clamp(1.3rem,1.9vw,1.55rem);line-height:1.3;color:var(--forest);margin:0 0 1.4rem;max-width:30ch}

/* ---------- 8. Closing call to action ---------- */
.h-close{background:var(--white);padding:clamp(72px,9vw,120px) 0 clamp(120px,12vw,170px);overflow:hidden}
.close-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px 64px}
.close-grid > div{max-width:640px}
.close-grid h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.04;margin-bottom:1rem}
.close-grid p:not(.eyebrow){font-size:1.12rem;margin:0}
.close-river{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,8vw,120px)}
.cr-ridge{fill:var(--forest-950)}
.cr-river{fill:none;stroke:var(--sand);stroke-width:2;opacity:.55;vector-effect:non-scaling-stroke}

/* ---------- 9. Motion ---------- */
@keyframes mm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mm-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mm-halo{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes h-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .h-kicker,.h-hero h1,.h-lead,.h-actions{animation:h-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .h-hero h1{animation-delay:.08s}.h-lead{animation-delay:.16s}.h-actions{animation-delay:.24s}
  .mm-river{animation:mm-draw 2.2s .35s cubic-bezier(.6,.1,.3,1) both}
  .mm-node{transform-box:fill-box;transform-origin:center;animation:mm-pop .6s ease both}
  .mm-node .mm-halo{transform-box:fill-box;transform-origin:center;animation:mm-halo .9s ease both}
  .mm-label{animation:mm-pop .6s ease both}
  .mm-idea,.mm-idea .mm-halo{animation-delay:.9s}
  .mm-traction,.mm-traction .mm-halo{animation-delay:1.55s}
  .mm-scale,.mm-scale .mm-halo{animation-delay:2.25s}
  .mm-rings,.mm-ridges{will-change:transform}


  /* section entry: JS adds .reveal to [data-reveal] elements below the fold */
  .page-home .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .page-home .reveal.in{opacity:1;transform:none}

  /* process line: drawn once when the section scrolls into view */
  .how-track.draw-ready .how-line path{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,.1,.3,1)}
  .how-track.draw-ready .stage-dot{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
  .how-track.is-drawn .how-line path{stroke-dashoffset:0}
  .how-track.is-drawn .stage-dot{transform:scale(1)}
  .how-track.is-drawn .stage:nth-child(2) .stage-dot{transition-delay:.6s}
  .how-track.is-drawn .stage:nth-child(3) .stage-dot{transition-delay:1.2s}
}

/* ---------- 10. Responsive ---------- */
@media (max-width:1180px){
  .svc-grid li{flex-basis:calc((100% - 18px) / 2)}
}
@media (max-width:960px){
  .h-hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .h-hero-copy{padding:56px 0 8px}
  .h-hero h1{max-width:15ch}
  .momentum{margin:0 calc(var(--gutter) * -1);max-height:none}
  .stages{grid-template-columns:minmax(0,1fr);gap:0;border-left:2px solid rgba(232,209,182,.45);margin-left:8px}
  .how-line{display:none}
  .stage{padding:0 0 36px 32px}
  .stage:last-child{padding-bottom:0}
  .stage-dot{left:-10px;top:6px}
  .stage-word{font-size:2.2rem;margin-bottom:.6rem}
  .walker-grid{grid-template-columns:minmax(0,1fr)}
  .walker-photo{justify-self:start;max-width:360px}
  .close-grid{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media (max-width:640px){
  .seam-mark{width:64px;height:64px}
  .seam-mark img{width:34px}
  .h-seam{gap:12px}
  .facts{grid-template-columns:minmax(0,1fr);gap:40px}
  .facts li + li::before{left:50%;top:-20px;bottom:auto;width:60px;height:1px;translate:-50% 0;background:var(--line-strong)}
  .svc-grid li{flex-basis:100%}
  .h-hero-copy{padding-top:44px}
  .h-kicker{font-size:.72rem;letter-spacing:.12em;margin-bottom:1.1rem}
  .h-hero h1{font-size:clamp(2.35rem,10.5vw,2.9rem)}
  .h-lead{font-size:1.06rem;margin-bottom:1.6rem}
  .h-actions{flex-direction:column;align-items:stretch;gap:10px}
  .h-actions .btn{white-space:normal;text-align:center;line-height:1.3}
  .h-quiet{align-self:flex-start}
  .mm-label{font-size:1rem}
  .mm-label strong{font-size:.68rem;letter-spacing:.14em}
  .walker-photo{max-width:none}
  .wp-frame::before{inset:12px -10px -12px 12px}
  .walker-path li{grid-template-columns:minmax(0,1fr);gap:4px}
  .close-grid .btn{width:100%;white-space:normal;text-align:center;line-height:1.3}
}

/* =========================================================
   v26 — centered homepage hero (.h-hero--center)
   Complexity (loose edge paths) → clarity (convergence) →
   system (symmetrical bundles) → growth (paths open upward)
   ========================================================= */
.h-hero--center{--hc-t1:.021em;--hc-t2:-.035em;--hc-t3:-.034em;--hc-ivory:#F6F1E7;--hc-sand:#D8B58A;--hc-sage:#CFD8D1;--hc-line:#A8B9AD;position:relative}
.h-hero--center::before{background:radial-gradient(760px 420px at 50% 42%,rgba(62,117,86,.34),transparent 72%)}
.h-hero--center::after{opacity:.2;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 45%,transparent 38%,#000 78%);mask-image:radial-gradient(ellipse 58% 62% at 50% 45%,transparent 38%,#000 78%)}
.hc-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:min(740px,calc(100svh - var(--header-h)));padding-top:clamp(56px,7vh,88px);padding-bottom:clamp(104px,13vw,168px)}
.hc-group{text-align:center;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hc-kicker{margin:0 0 1.4rem;font-size:.78rem;font-weight:700;letter-spacing:.2em;color:var(--hc-sand)}
.h-hero--center h1.hc-title{max-width:none;margin:0 0 1.5rem;color:var(--hc-ivory);font-size:clamp(2.3rem,5.4vw,4.75rem);line-height:1.03;letter-spacing:-.02em;text-wrap:initial}
.hc-line{display:block;white-space:nowrap}
.hc-line--1{letter-spacing:var(--hc-t1,0em)}
.hc-line--2{letter-spacing:var(--hc-t2,0em)}
.hc-line--3{color:var(--hc-sand);letter-spacing:var(--hc-t3,0em)}
.hc-lead{margin:0 0 2.1rem;max-width:36em;font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.6;color:var(--hc-sage);text-wrap:balance}
.hc-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px}
.hc-btn{background:var(--hc-sand);border-color:var(--hc-sand);color:var(--forest-950);font-weight:650;padding-inline:1.5rem;transition:background-color .2s,transform .2s,box-shadow .2s}
.hc-btn svg{width:18px;height:18px;transition:transform .2s}
.hc-btn:hover{background:#e4c7a0;border-color:#e4c7a0;color:var(--forest-950);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.hc-btn:hover svg{transform:translateX(3px)}
.hc-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;color:var(--hc-ivory);border-bottom:1px solid rgba(216,181,138,.55);transition:color .2s,border-color .2s}
.hc-link svg{width:18px;height:18px;transition:transform .2s}
.hc-link:hover{color:var(--hc-sand);border-color:var(--hc-sand)}
.hc-link:hover svg{transform:translateX(4px)}
.hc-btn:focus-visible,.hc-link:focus-visible{outline:3px solid var(--hc-ivory);outline-offset:4px;border-radius:6px}

/* contour art */
.hc-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hc-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hc-rings ellipse{fill:none;stroke:var(--hc-line);stroke-opacity:.07;stroke-width:1;vector-effect:non-scaling-stroke}
.hc-path{fill:none;stroke:var(--hc-line);stroke-opacity:.34;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hc-path[style*="--i:1"],.hc-path[style*="--i:2"]{stroke-opacity:.42}
.hc-node{pointer-events:auto;cursor:default}
.hc-node-dot{fill:var(--hc-sand)}
.hc-node-halo{fill:rgba(216,181,138,.12);stroke:rgba(216,181,138,.45);stroke-width:1;transition:fill .3s,stroke .3s}
.hc-node:hover .hc-node-halo{fill:rgba(216,181,138,.24);stroke:rgba(216,181,138,.8)}
.hc-mini{display:none}

/* landscape bands */
.hc-bands{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(88px,11vw,160px);z-index:0}
.hc-band.b1{fill:#2b4436;opacity:.6}
.hc-band.b2{fill:#1f3329}
.hc-band.b3{fill:var(--forest-950)}

/* entrance: one coordinated sequence (~1.9s), then still */
@keyframes hc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hc-line-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hc-node-on{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.h-hero--center h1.hc-title,.h-hero--center .hc-lead,.h-hero--center .hc-actions{animation:none}
@media (prefers-reduced-motion:no-preference){
  .hc-kicker{animation:hc-rise .5s cubic-bezier(.2,.7,.2,1) both}
  .hc-line{animation:hc-line-in .55s cubic-bezier(.2,.7,.2,1) both}
  .hc-line--1{animation-delay:.15s}.hc-line--2{animation-delay:.3s}.hc-line--3{animation-delay:.45s}
  .hc-lead{animation:hc-rise .55s .68s cubic-bezier(.2,.7,.2,1) both!important}
  .hc-actions{animation:hc-rise .55s .84s cubic-bezier(.2,.7,.2,1) both!important}
  .hc-path{stroke-dasharray:1;stroke-dashoffset:1;animation:hc-draw 1.05s cubic-bezier(.45,.05,.25,1) forwards;animation-delay:calc(.45s + var(--i) * .05s)}
  .hc-node{transform-box:fill-box;transform-origin:center;opacity:0;animation:hc-node-on .45s ease-out forwards}
  .hc-node.n-conv{animation-delay:1.18s}
  .hc-node.n-open{animation-delay:1.45s}
}

/* tablet: smaller headline, paths pulled in */
@media (max-width:1024px){
  .hc-svg{inset:0 -4%;width:108%}
}
@media (max-width:900px){
  .hc-svg{inset:auto;left:50%;top:47%;width:clamp(900px,132%,1200px);height:auto;aspect-ratio:1440/740;transform:translate(-50%,-50%)}
  .hc-inner{padding-bottom:clamp(96px,16vw,140px)}
  .hc-svg{width:min(max(1120px,140%),1300px)}
}
/* mobile: peripheral art replaced by a compact motif under the actions */
@media (max-width:640px){
  .hc-art{display:none}
  .hc-mini{display:block;width:min(100%,300px);height:auto;margin:26px auto 0;overflow:visible}
  .hc-mini .hc-path{stroke-opacity:.4}
  .hc-inner{min-height:0;padding-top:48px;padding-bottom:84px}
  .hc-kicker{font-size:.68rem;letter-spacing:.14em;margin-bottom:1.1rem}
  .h-hero--center h1.hc-title{font-size:min(10.2vw,2.7rem);margin-bottom:1.1rem}
  .hc-lead{font-size:1.02rem;margin-bottom:1.6rem}
  .hc-actions{flex-direction:column;align-items:stretch;width:100%;gap:8px}
  .hc-btn{white-space:normal;justify-content:center}
  .hc-link{align-self:center}
  .hc-bands{height:72px}
}

/* =========================================================
   v27 — homepage typeface + topographic valley framing
   Libre Caslon Text: a classic American book face — established,
   plain-spoken, credible — used for homepage display type only.
   ========================================================= */
.page-home{--font-display:"Libre Caslon Text","Newsreader",Georgia,"Times New Roman",serif}
.h-hero--center h1.hc-title{font-weight:400;font-size:clamp(2.1rem,5vw,4.4rem);line-height:1.08;letter-spacing:-.018em}
@media (max-width:640px){.h-hero--center h1.hc-title{font-size:min(9.6vw,2.6rem)}}

/* two hills either side of the valley where the message sits */
.hc-contour{fill:none;stroke:var(--hc-line);stroke-opacity:.16;stroke-width:1;vector-effect:non-scaling-stroke}
.hc-contour.is-index{stroke-opacity:.3}
.hc-summit-ring{fill:none;stroke:rgba(216,181,138,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.hc-summit-dot{fill:var(--hc-sand);opacity:.85}
.hc-river{fill:none;stroke:var(--hc-sand);stroke-opacity:.38;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hc-bands .hc-river{stroke-opacity:.32}

@keyframes hc-contour-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes hc-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  /* contours settle in from the summit outward, once */
  .hc-hill .hc-contour{transform-box:view-box;opacity:0;animation:hc-contour-in .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--k) * .08s)}
  .hc-hill--l .hc-contour{transform-origin:52px 452px}
  .hc-hill--r .hc-contour{transform-origin:1392px 286px}
  .hc-river{stroke-dasharray:1;stroke-dashoffset:1;animation:hc-draw 1.4s .6s cubic-bezier(.45,.05,.25,1) forwards}
  .hc-summit{opacity:0;animation:hc-fade .6s 1.2s ease forwards}
}
.hc-summit{pointer-events:auto}
.hc-summit:hover .hc-summit-ring{stroke:rgba(216,181,138,.8)}
@media (max-width:640px){
  .hc-mini{width:100%;max-width:340px;margin-top:22px}
  .hc-mini .hc-contour{stroke-opacity:.22}
  .hc-mini .hc-contour.is-index{stroke-opacity:.34}
  .hc-mini .hc-contour{transform-origin:center}
}

/* =========================================================
   v28 — hero art: Direction → Structure → Progress
   alignment mark · measured rails · milestone path
   ========================================================= */
.bp-grid{opacity:.07}
.bp-loose{fill:none;stroke:var(--hc-line);stroke-opacity:.26;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bp-ring{fill:none;stroke:var(--hc-line);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-ring--outer{stroke-opacity:.2;stroke-dasharray:2 5}
.bp-cross{fill:none;stroke:var(--hc-line);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-needle path{fill:none;stroke:var(--hc-sand);stroke-opacity:.85;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bp-pin{fill:var(--hc-sand)}
.bp-rail{fill:none;stroke:var(--hc-line);stroke-opacity:.42;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-tick{fill:none;stroke:var(--hc-line);stroke-opacity:.3;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-bracket{fill:none;stroke:var(--hc-line);stroke-opacity:.6;stroke-width:1.1;vector-effect:non-scaling-stroke}
.bp-path{fill:none;stroke:var(--hc-line);stroke-opacity:.5;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bp-node{fill:var(--forest-900);stroke:var(--hc-line);stroke-opacity:.75;stroke-width:1.1;vector-effect:non-scaling-stroke}
.bp-goal-ring{fill:rgba(216,181,138,.08);stroke:var(--hc-sand);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .3s,stroke-opacity .3s}
.bp-goal{pointer-events:auto}
.bp-goal:hover .bp-goal-ring{fill:rgba(216,181,138,.2);stroke-opacity:.9}

@keyframes bp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bp-in{from{opacity:0}to{opacity:1}}
@keyframes bp-mark{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes bp-needle{from{transform:rotate(-38deg)}to{transform:none}}
@keyframes bp-pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* one assembly, ~2s: grid → loose lines find the mark → rails lock in → path moves outward */
  .bp-grid{opacity:0;animation:bp-in .8s .15s ease forwards}
  .bp-grid{--bp-grid-o:.07}
  .bp-loose,.bp-rail,.bp-path{stroke-dasharray:1;stroke-dashoffset:1}
  .bp-loose{animation:bp-draw .85s cubic-bezier(.45,.05,.25,1) forwards;animation-delay:calc(.35s + var(--i) * .08s)}
  .bp-compass{transform-box:fill-box;transform-origin:center;opacity:0;animation:bp-mark .5s 1s cubic-bezier(.2,.7,.2,1) forwards}
  .bp-needle{transform-box:fill-box;transform-origin:center;animation:bp-needle .9s 1s cubic-bezier(.2,.8,.2,1) both}
  .bp-rail{animation:bp-draw .6s 1.15s cubic-bezier(.45,.05,.25,1) forwards}
  .bp-ticks,.bp-bracket,.bp-rails .bp-pin{opacity:0;animation:bp-in .4s 1.5s ease forwards}
  .bp-path{animation:bp-draw .7s 1.45s cubic-bezier(.45,.05,.25,1) forwards}
  .bp-node{transform-box:fill-box;transform-origin:center;opacity:0;animation:bp-pop .35s ease-out forwards;animation-delay:calc(1.55s + var(--n) * .12s)}
  .bp-goal{transform-box:fill-box;transform-origin:center;opacity:0;animation:bp-pop .45s 2s ease-out forwards}
}
@keyframes bp-in-grid{to{opacity:.07}}
@media (prefers-reduced-motion:no-preference){.bp-grid{animation:bp-in-grid .8s .15s ease forwards}}
@media (max-width:640px){
  .hc-mini{max-width:320px;margin-top:24px}
  .hc-mini .bp-loose{stroke-opacity:.35}
}

/* =========================================================
   v29 — "The Level Line" homepage hero
   The OVS mark appears; a sand level line draws outward from it and becomes the
   river running to both edges. The name rises above the line (strategy);
   Walker's headline drops below it (execution).
   Display face on the homepage: Source Serif 4 — sober, corporate, highly legible.
   ========================================================= */
.page-home{--font-display:"Source Serif 4","Newsreader",Georgia,"Times New Roman",serif}
.page-home h1,.page-home h2,.page-home h3.stage-word{font-weight:600}
.h-hero--level .hc-inner{padding-top:clamp(48px,7vh,80px)}
.lv-group{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:1040px;margin:0 auto}
.lv-mark{width:58px;height:auto;margin-bottom:clamp(18px,2.4vh,26px)}
.lv-above,.lv-below{overflow:hidden;padding:0 .1em}
.lv-above{padding-bottom:.16em;margin-bottom:-.1em}
.h-hero h1.lv-name{max-width:none;margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(2.7rem,6.6vw,5.9rem);line-height:1.02;letter-spacing:-.022em;color:var(--hc-ivory);font-optical-sizing:auto;white-space:nowrap}
.h-hero h1.lv-name span{display:inline}
.lv-line{position:relative;width:100%;height:clamp(56px,7vw,76px)}
.lv-svg{position:absolute;left:50%;top:50%;width:100vw;max-width:none;height:240px;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.lv-river{fill:none;stroke:var(--hc-sand);stroke-opacity:.8;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lv-bank{fill:none;stroke:var(--hc-line);stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke}
.lv-bank[style*="--k:2"],.lv-bank[style*="--k:3"]{stroke-opacity:.12}
.lv-dot{fill:var(--hc-sand)}
.lv-tagline{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.3rem,2.35vw,2.05rem);line-height:1.25;letter-spacing:-.01em;color:var(--hc-ivory)}
.lv-accent{color:var(--hc-sand)}
.lv-lead{margin:clamp(18px,2.4vh,26px) 0 2rem;max-width:34em;font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--hc-sage)}

/* opening sequence (~2s, runs once) */
@keyframes lv-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes lv-drop{from{transform:translateY(-105%)}to{transform:none}}
@keyframes lv-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lv-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:none}}
@keyframes lv-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .lv-mark{animation:lv-fade-up .55s cubic-bezier(.2,.7,.2,1) both}
  .lv-dot{transform-box:fill-box;transform-origin:center;animation:lv-pop .45s .3s ease-out both}
  .lv-river{stroke-dasharray:1;stroke-dashoffset:1;animation:lv-draw 1.1s .4s cubic-bezier(.55,.05,.25,1) forwards}
.h-hero h1.lv-name{animation:none}
  .h-hero h1.lv-name{animation:lv-rise .85s .62s cubic-bezier(.2,.75,.2,1) both}
  .lv-tagline{animation:lv-drop .85s .78s cubic-bezier(.2,.75,.2,1) both}
  .lv-bank{stroke-dasharray:1;stroke-dashoffset:1;animation:lv-draw 1s cubic-bezier(.45,.05,.25,1) forwards;animation-delay:calc(1s + var(--k) * .09s)}
  .lv-lead{animation:lv-fade-up .6s 1.25s cubic-bezier(.2,.7,.2,1) both}
  .lv-actions{animation:lv-fade-up .6s 1.42s cubic-bezier(.2,.7,.2,1) both!important}
}
@media (max-width:640px){
  .lv-mark{width:48px}
  .h-hero h1.lv-name{font-size:min(15vw,3.4rem);line-height:1}
  .h-hero h1.lv-name span{display:block}
  .lv-line{height:52px}
  .lv-svg{height:130px}
  .lv-tagline{font-size:min(5.6vw,1.35rem)}
  .lv-tagline span{display:block}
  .lv-lead{font-size:1.02rem;margin-bottom:1.6rem}
}

/* =========================================================
   v31 — homepage hero type in Poppins (the face used for the
   "Ohio Valley Strategy" name beside the logo); logo removed from
   the hero; descenders (g, y) never clipped by the reveal mask.
   ========================================================= */
.h-hero--level .lv-above{padding:0 .1em .32em;margin-bottom:-.32em}
.h-hero--level .lv-below{padding:.12em .1em .2em;margin:-.12em 0 -.2em}
.h-hero h1.lv-name{font-family:"Poppins",var(--font-body);font-weight:600;letter-spacing:-.025em;line-height:1.08;font-size:clamp(2.4rem,5.5vw,4.8rem)}
.lv-tagline{font-family:"Poppins",var(--font-body);font-weight:500;letter-spacing:-.01em;font-size:clamp(1.15rem,2vw,1.75rem)}
.lv-lead{font-family:"Poppins",var(--font-body);font-weight:400;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7}
.h-hero--level .hc-inner{padding-top:clamp(56px,9vh,104px)}
@media (max-width:640px){
  .h-hero h1.lv-name{font-size:min(12.6vw,3rem);line-height:1.1}
  .lv-tagline{font-size:min(5vw,1.2rem)}
  .lv-lead{font-size:.98rem}
}
/* mask padding measured in the headline's own em (the wrappers carry the type size) */
.h-hero--level .lv-above{font-size:clamp(2.4rem,5.5vw,4.8rem);padding:0 .1em .34em;margin-bottom:-.34em}
.h-hero--level .lv-above h1.lv-name{font-size:1em}
.h-hero--level .lv-below{font-size:clamp(1.15rem,2vw,1.75rem);padding:.15em .1em .3em;margin:-.15em 0 -.3em}
.h-hero--level .lv-below .lv-tagline{font-size:1em}
@media (max-width:640px){
  .h-hero--level .lv-above{font-size:min(12.6vw,3rem)}
  .h-hero--level .lv-below{font-size:min(5vw,1.2rem)}
}
.h-hero--level .lv-above{padding-top:.2em;margin-top:-.2em}

/* v34 — hero type back to Source Serif 4 (the v29 face); descender-safe mask kept */
.h-hero h1.lv-name{font-family:"Source Serif 4","Newsreader",Georgia,serif;font-weight:600;letter-spacing:-.022em;line-height:1.06}
.lv-tagline{font-family:"Source Serif 4","Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.01em}
.lv-lead{font-family:"Source Serif 4","Newsreader",Georgia,serif;font-weight:400;line-height:1.6}

/* v35 — first-visit "gy" fix.
   1) No clipping box around the headline: the reveal uses clip-path on the text itself,
      and the finished state clips nothing, so descenders can never be cut off.
   2) The whole hero sequence waits until the web font has loaded (.hero-go from site.js). */
.h-hero--level .lv-above,.h-hero--level .lv-below{overflow:visible}
@keyframes lv-rise2{from{transform:translateY(45%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(-60% -10% -60% -10%)}}
@keyframes lv-drop2{from{transform:translateY(-45%);clip-path:inset(100% 0 0 0)}to{transform:none;clip-path:inset(-60% -10% -60% -10%)}}
@media (prefers-reduced-motion:no-preference){
  .h-hero h1.lv-name{animation:lv-rise2 .85s .62s cubic-bezier(.2,.75,.2,1) both}
  .lv-tagline{animation:lv-drop2 .85s .78s cubic-bezier(.2,.75,.2,1) both}
  .js-hero:not(.hero-go) .h-hero--level *{animation-play-state:paused!important}
}
