/* ============================================================
   BEAVER HUB — LANDING (reference-style rebuild, navy brand)
   Bone-white canvas · deep-navy dark sections · orange accent
   Sections: pill nav / hero / solutions hover-list / why-BH
   space band / product feature rows / how-it-works / partner
   strip / CTA + form + footer
   ============================================================ */

:root{
  --bh-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --bh-mono:"Geist Mono",ui-monospace,monospace;

  --bh-bone:#ECEDEA;          /* page canvas */
  --bh-bone-2:#E4E5E1;        /* slightly deeper band */
  --bh-ink:#04203B;           /* deep navy — text + dark sections */
  --bh-ink-2:#062A4D;         /* dark section alt */
  --bh-navy:#00478f;          /* brand navy */
  --bh-orange:#FF5D00;        /* accent (reference's lime role) */
  --bh-gray:#5C6670;          /* body copy */
  --bh-dim:#9AA1A6;           /* inactive / labels */
  --bh-faint:#C6CAC7;         /* scrub-fill start */
  --bh-line:rgba(4,32,59,.14);/* hairlines on bone */
  --bh-line-l:rgba(255,255,255,.14);

  --nch:clamp(20px,3.4vw,48px); /* notch chamfer size */
  --bh-ease:cubic-bezier(.22,1,.36,1);
}

.bh, .bh-end{ font-family:var(--bh-sans); }
.bh{ background:var(--bh-bone); color:var(--bh-ink); position:relative; overflow-x:clip; }
.bh ::selection, .bh-end ::selection{ background:var(--bh-orange); color:#fff; }

.bh-wrap{ width:min(1240px, calc(100% - clamp(2rem,6vw,7rem))); margin-inline:auto; position:relative; }
.bh-section{ padding-block:clamp(4rem,12vh,9rem); position:relative; }
/* anchored sections land below the floating pill nav, not under it */
#solutions, #products, #process, #clients, #contact{ scroll-margin-top:92px; }

/* ---------- type ---------- */
.bh-h2{
  font-weight:500; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(2rem,4.6vw,3.9rem);
}
.bh-kicker{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bh-dim);
  display:flex; align-items:center; gap:.55rem;
}
.bh-kicker--light{ color:rgba(255,255,255,.45); }

/* word-fill spans (populated by JS) — global so split titles never italicize
   or wrap mid-word, wherever the splitter runs */
.bh-w{ display:inline-block; }
.bh-w > i{ font-style:normal; display:inline-block; }

/* ============================================================
   PRELOADER
   ============================================================ */
.bh-loader{
  position:fixed; inset:0; z-index:200; background:var(--bh-bone);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--bh-ease), visibility .7s;
}
.bh-loader.is-done{ opacity:0; visibility:hidden; }
/* stop the infinite pulse once hidden — otherwise it ticks style recalcs forever */
.bh-loader.is-done .bh-loader__mark{ animation:none; }
.bh-loader__mark{ display:flex; align-items:center; gap:.7rem; animation:bhPulse 1.6s ease-in-out infinite; }
.bh-loader__mark img{ width:40px; height:40px; object-fit:contain; }
.bh-loader__mark span{ font-family:var(--bh-sans); font-weight:600; font-size:1.25rem; color:var(--bh-ink); letter-spacing:-.02em; }
@keyframes bhPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ============================================================
   NAV — floating dark pill (overrides styles.css .nav)
   ============================================================ */
.nav{
  position:fixed; top:clamp(.6rem,1.6vh,1.1rem); left:50%; transform:translateX(-50%);
  width:min(980px, calc(100% - 1.4rem));
  height:58px; padding:0 .55rem 0 1.1rem;
  display:flex; align-items:center; gap:1rem;
  background:rgba(4,26,47,.78);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  z-index:120;
  transition:background .4s;
}
.nav.is-scrolled{ background:rgba(4,26,47,.92); }
/* the pill floats over the hero frame-scrub canvas; its backdrop blur is
   re-computed on every canvas repaint on Android — solid fill on touch */
.motion-lite .nav{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(4,26,47,.94);
}
.nav .brand{ margin-right:auto; }
.nav .brand__name{ color:#fff; }   /* pill is always dark — keep the wordmark legible regardless of page text color */
.nav__links{ display:flex; align-items:center; gap:1.4rem; }
.nav__links > a{
  font-size:.82rem; font-weight:500; color:rgba(255,255,255,.85);
  letter-spacing:.01em; transition:color .25s;
}
.nav__links > a:hover{ color:#fff; }
/* quick-menu trigger is a <button> styled in styles.css — match it to the links above */
.nav__links .sp-menu__trigger{
  font-size:.82rem; font-weight:500; color:rgba(255,255,255,.85);
  letter-spacing:.01em;
}
.nav__links .sp-menu__trigger:hover{ color:#fff; }
.nav__links-cta{ display:none !important; }
.nav__cta{ display:none !important; }
.nav__actions{ display:flex; align-items:center; gap:.45rem; }
.nav__pill-btn{
  font-family:var(--bh-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.72rem 1.15rem; border-radius:8px; line-height:1;
  transition:transform .25s var(--bh-ease), filter .25s;
}
.nav__pill-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.nav__pill-btn--demo{ background:#fff; color:var(--bh-ink); }
.nav__pill-btn--contact{ background:#fff; color:var(--bh-ink); }

@media (max-width:880px){
  .nav{ height:54px; }
  .nav__links{
    position:absolute; top:calc(100% + .5rem); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(4,26,47,.97); border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:.6rem;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:.3s var(--bh-ease);
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__links > a{ padding:.8rem .7rem; }
  .nav__actions{ margin-left:auto; }
  .nav__pill-btn--demo{ display:none; }
}

/* Narrow phones: the floating CONTACT pill overlapped the "Beaver Hub"
   wordmark. The hamburger already carries Contact and Book a demo, so drop the
   duplicate rather than shrink the brand. NOTE this rule has to live here, not
   in styles.css — landing.css loads second and its unconditional
   `.nav__actions{display:flex}` above outranks any same-specificity rule there. */
@media (max-width:430px){
  .nav__actions{ display:none; }
}

/* ============================================================
   SEP — curved shoulder separator between sections.
   Container paints the section above (--from); the svg path is
   the section below (--to) rising with a soft central plateau.
   ============================================================ */
.bh-sep{
  display:block; width:100%; height:clamp(26px,3.9vw,56px);
  background:var(--from); line-height:0; position:relative; z-index:2;
}
.bh-sep svg{ width:100%; height:100%; display:block; }
.bh-sep path{ fill:var(--to); }
/* media-bleed variants: the section's video runs behind the separator,
   so only the shoulder corners are painted and the rest stays transparent */
.bh-sep--into-media{ background:transparent; margin-bottom:calc(clamp(26px,3.9vw,56px) * -1); }
.bh-sep--into-media path{ fill:var(--from); }
.bh-sep--from-media{ background:transparent; margin-top:calc(clamp(26px,3.9vw,56px) * -1); }

/* ============================================================
   PATHS — thin rounded circuit lines with traveling pulses
   ============================================================ */
/* contain:paint — the dash pulses repaint every animation tick; without
   containment that invalidation spills into the whole section's paint */
.bh-paths{ position:absolute; inset:0; pointer-events:none; overflow:hidden; contain:paint; }
.bh-paths svg{ width:100%; height:100%; }
.bh-paths path{
  fill:none; stroke:rgba(4,32,59,.10); stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.bh-paths--dark path{ stroke:rgba(255,255,255,.08); }
.bh-paths .bh-pulse{
  stroke:rgba(255,93,0,.55); stroke-width:1.5;
  stroke-dasharray:64 936; stroke-linecap:round;
  /* steps(): dashoffset isn't compositable, every tick is a repaint —
     ~20 repaints/s (2.8 path-units per step) reads identical to linear */
  animation:bhDash 18s infinite steps(360);
}
.bh-paths--dark .bh-pulse{ stroke:rgba(255,124,60,.5); }
.bh-paths .bh-pad{ fill:rgba(255,93,0,.55); stroke:none; }
.bh-paths .bh-pathglow{ fill:rgba(255,124,60,.16); stroke:none; }
@keyframes bhDash{ to{ stroke-dashoffset:-1000; } }

/* ============================================================
   LOGO WALL — hairline grid + flickering crosses
   ============================================================ */
/* quiet proof strip: deeper band + hairline edges so it reads as its own
   compact section, not a second display-heading after how-we-work */
.bh-logowall{
  padding-top:clamp(2.6rem,6vh,4rem); padding-bottom:0;
  background:var(--bh-bone-2);
  border-top:1px solid var(--bh-line);
}
.bh-logowall__label{ justify-content:center; margin-bottom:clamp(2rem,5vh,3rem); }

/* footer partners — small white-knocked marks under the brand */
.bh-foot__partners{ margin-top:1.5rem; }
.bh-foot__partners-label{
  display:block; margin-bottom:.75rem;
  font-family:var(--bh-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.38);
}
.bh-foot__partners-logos{ display:flex; align-items:center; gap:1.3rem; }
.bh-foot__partners-logos img{
  height:20px; width:auto; object-fit:contain;
  opacity:.85;                       /* original colors, slightly settled */
  transition:opacity .3s var(--bh-ease);
}
.bh-foot__partners-logos img:hover{ opacity:1; }
.bh-logogrid{ position:relative; border-top:1px solid var(--bh-line); }
.bh-logogrid__row{
  display:grid; grid-template-columns:repeat(9,1fr);
  border-bottom:1px solid var(--bh-line);
}
.bh-logogrid__row--4{ grid-template-columns:repeat(4,1fr); }
.bh-logogrid__row--3{ grid-template-columns:repeat(3,1fr); }
.bh-logogrid__row--2{ grid-template-columns:repeat(2,1fr); }
.bh-logo{
  max-height:clamp(30px,4.2vw,46px); max-width:min(60%,220px);
  width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter .3s, opacity .3s;
}
.bh-cell:hover .bh-logo{ filter:grayscale(0); opacity:1; }
.bh-logogrid__row--empty .bh-cell{ height:clamp(90px,16vh,170px); }
.bh-cell{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; min-height:clamp(72px,10vh,104px); padding:1rem .6rem;
  border-right:1px solid var(--bh-line);
}
.bh-cell:last-child{ border-right:0; }
.bh-cell--glow::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 100%, rgba(255,93,0,.14), transparent 70%);
  pointer-events:none;
}
.bh-wordmark{
  font-family:var(--bh-sans); font-weight:600; font-size:clamp(.72rem,1.05vw,1rem);
  letter-spacing:.06em; color:#3F4B55; opacity:.75; white-space:nowrap;
  filter:grayscale(1);
}
.bh-wordmark--lg{ font-size:clamp(1.05rem,1.9vw,1.7rem); letter-spacing:-.01em; opacity:.9; }
.bh-cell__tag{
  font-family:var(--bh-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bh-dim);
}
.bh-cell--link{ transition:background .3s; }
.bh-cell--link:hover{ background:rgba(4,32,59,.04); }
.bh-cell--link:hover .bh-wordmark{ color:var(--bh-navy); opacity:1; }

/* cross marks at grid intersections */
.bh-cross{
  position:absolute; width:15px; height:15px; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.5;
}
.bh-cross::before, .bh-cross::after{
  content:""; position:absolute; background:var(--bh-ink);
}
.bh-cross::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.bh-cross::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.bh-cross.is-flick{ animation:bhFlick 2.4s steps(2,end) infinite; }
@keyframes bhFlick{ 0%,58%,100%{ opacity:.5; } 60%,72%{ opacity:.06; } 74%,86%{ opacity:.5; } 88%{ opacity:.1; } }

/* ============================================================
   INTRO — big statement, word-by-word scrub fill
   ============================================================ */
.bh-intro{ padding-block:clamp(5rem,16vh,11rem); }
.bh-intro__text{
  font-weight:500; letter-spacing:-.028em; line-height:1.16;
  font-size:clamp(1.6rem,3.4vw,2.9rem);
  max-width:34ch; margin-inline:auto; text-align:center;
}
.bh-intro--kicked .bh-kicker{ justify-content:center; margin-bottom:1.6rem; }
.bh-scrubfill .bh-w > i{ color:var(--bh-faint); transition:none; }
.bh-scrubfill .bh-w > i.is-lit{ color:inherit; }

/* ============================================================
   SOLUTIONS — hover list left, media panel right
   ============================================================ */
/* wider canvas than the default 1240px wrap — the section should own the screen */
.bh-sol > .bh-wrap{ width:min(1480px, calc(100% - clamp(1.6rem,4vw,4rem))); }
.bh-sol__head{ text-align:center; }
.bh-sol__head .bh-kicker{ justify-content:center; }
.bh-sol__head .bh-h2{ margin-inline:auto; }
.bh-sol__grid{
  display:grid; grid-template-columns:1fr minmax(380px,46%);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:stretch;
  margin-top:clamp(2.8rem,7vh,5rem);
}
.bh-sol__list{ display:flex; flex-direction:column; justify-content:center; }
.bh-sol__item{
  position:relative;
  display:flex; align-items:baseline; gap:clamp(1rem,2.4vw,2rem);
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:clamp(1.35rem,3.2vh,2.1rem) .35rem;
  border-top:1px solid rgba(10,18,36,.12);
}
/* auto-cycle progress: an orange line fills along the active item's top edge,
   showing the list advances on its own (and inviting interaction) */
.bh-sol__list.is-auto .bh-sol__item.is-active::before{
  content:""; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:var(--bh-orange);
  transform-origin:left; transform:scaleX(0);
  animation:bhSolProg 4.5s linear forwards;   /* duration = SOL_STEP in landing.js */
}
@keyframes bhSolProg{ to{ transform:scaleX(1); } }
.bh-sol__item:last-child{ border-bottom:1px solid rgba(10,18,36,.12); }
.bh-sol__body{ flex:1; min-width:0; }
.bh-sol__name{
  display:block; font-weight:500; letter-spacing:-.022em; line-height:1.12;
  font-size:clamp(1.5rem,2.6vw,2.3rem);
  /* rest = neutral gray; hover/active = brand navy */
  color:#7B7D87; transition:color .35s var(--bh-ease);
}
.bh-sol__desc{
  display:block; font-size:clamp(.92rem,1vw,1.02rem); line-height:1.55; color:var(--bh-dim);
  max-width:48ch; overflow:hidden;
  max-height:0; opacity:0; margin-top:0;
  transition:max-height .5s var(--bh-ease), opacity .4s var(--bh-ease), margin-top .5s var(--bh-ease);
}
.bh-sol__arrow{
  font-size:1.05rem; color:#7B7D87;
  transition:color .35s var(--bh-ease), transform .35s var(--bh-ease);
}
.bh-sol__item:hover .bh-sol__name{ color:var(--bh-navy); }
.bh-sol__item.is-active .bh-sol__name{ color:var(--bh-navy); }
.bh-sol__item.is-active .bh-sol__desc{ max-height:6em; opacity:1; margin-top:.55rem; }
.bh-sol__item.is-active .bh-sol__arrow{ color:var(--bh-orange); transform:translateX(4px); }
.bh-sol__item:focus-visible{ outline:2px solid var(--bh-orange); outline-offset:4px; border-radius:6px; }

.bh-sol__panel{
  position:relative; min-height:min(560px,72vh); border-radius:18px; overflow:hidden;
  background:var(--bh-ink);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}

@media (max-width:880px){
  .bh-sol__grid{ display:flex; flex-direction:column-reverse; gap:1.4rem; }
  .bh-sol__panel{ min-height:0; height:38vh; }
  .bh-sol__name{ font-size:1.2rem; }
  .bh-sol__desc{ font-size:.88rem; }
}

/* ============================================================
   FEATURE STEPS — sticky media panel right, advancing text left
   ============================================================ */
/* generous bottom band so the sticky panel never touches the shoulder below */
.bh-steps{ position:relative; padding-bottom:clamp(4rem,12vh,9rem); }
.bh-steps__grid{
  display:grid; grid-template-columns:1fr minmax(340px,46%);
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
.bh-steps__text{ padding-block:14vh; }
.bh-steps__counter{
  position:sticky; top:47vh; height:0; overflow:visible;
  display:flex; align-items:baseline; gap:.5rem;
  font-family:var(--bh-mono); color:var(--bh-dim); font-size:.78rem;
}
.bh-pad{ display:inline-flex; overflow:hidden; height:1.15em; color:var(--bh-ink); }
.bh-pad__reel{ display:inline-flex; flex-direction:column; line-height:1.15;
  transition:transform .7s var(--bh-ease); }
.bh-pad__reel i{ font-style:normal; height:1.15em; }
.bh-steps__of{ letter-spacing:.12em; }

.bh-step{ min-height:58vh; display:flex; align-items:center; padding-left:clamp(4.5rem,6vw,6rem); }
.bh-step p{
  font-weight:500; letter-spacing:-.025em; line-height:1.22;
  font-size:clamp(1.5rem,2.5vw,2.15rem); max-width:17ch;
  color:var(--bh-faint); transition:color .5s var(--bh-ease);
}
.bh-step p em{ font-style:normal; color:inherit; transition:color .5s var(--bh-ease); }
.bh-step.is-active p{ color:var(--bh-ink); }
.bh-step.is-active p em{ color:var(--bh-orange); }

.bh-steps__panelcol{ position:relative; height:100%; }
.bh-steps__panel{
  position:sticky; top:9vh; height:82vh; min-height:420px;
  border-radius:18px; overflow:hidden; background:var(--bh-ink);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}
.bh-media{
  position:absolute; inset:0; opacity:0;
  /* visibility flips only after the fade — faded-out layers stop painting */
  visibility:hidden; transition:opacity .6s var(--bh-ease), visibility 0s .6s;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(0,71,143,.5), transparent 60%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/44px 44px,
    var(--bh-ink);
}
.bh-media.is-on{ opacity:1; visibility:visible; transition:opacity .6s var(--bh-ease), visibility 0s; }
.bh-media video, .bh-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bh-media__label{
  font-family:var(--bh-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.45); border:1px dashed rgba(255,255,255,.25);
  padding:.7rem 1rem; border-radius:8px;
}

@media (max-width:880px){
  .bh-steps__grid{ display:flex; flex-direction:column; align-items:stretch; }
  /* the COLUMN is sticky (its bound is the whole flex container), so the
     media panel rides along all four steps; solid bone backdrop lets the
     step text slide cleanly out of view beneath it */
  .bh-steps__panelcol{
    order:-1; position:sticky; top:60px; z-index:2; height:auto;
    background:var(--bh-bone); padding-bottom:.6rem;
  }
  .bh-steps__panel{ position:static; height:40vh; min-height:280px; }
  .bh-steps__text{ padding-block:4vh; position:relative; z-index:1; }
  .bh-step{ min-height:52vh; padding-left:0; }
  .bh-steps__counter{ display:none; }
}

/* ============================================================
   BHOS — pinned dark punchline (dotted grid, notched top)
   ============================================================ */
.bh-os-holder{ height:210vh; position:relative; }
.bh-os{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--bh-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-inline:1.2rem;
}
.bh-os__space{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.bh-os__space canvas, .bh-os__light canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.bh-os__dots{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.6px) 0 0/46px 46px,
    radial-gradient(70% 55% at 50% 60%, rgba(0,71,143,.35), transparent 70%);
}
/* WebGL sky live: black space behind the stars, dot grid off (glow stays) */
.bh-os.has-space{ background:#02070F; }
.bh-os.has-space .bh-os__dots{
  background:radial-gradient(70% 55% at 50% 60%, rgba(0,71,143,.28), transparent 70%);
}
/* light phase: bone bg + fine square grid, fades in over the dark layer */
.bh-os__light{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; overflow:hidden;
  background:
    linear-gradient(rgba(4,32,59,.06) 1px, transparent 1px) 0 0/78px 78px,
    linear-gradient(90deg, rgba(4,32,59,.06) 1px, transparent 1px) 0 0/78px 78px,
    var(--bh-bone);
}
.bh-os__pre{
  font-size:clamp(.95rem,1.4vw,1.2rem); color:rgba(255,255,255,.45);
  margin-bottom:1.1rem; position:relative; z-index:2;
}
.bh-os__title{
  position:relative; z-index:2; color:#fff; font-weight:500;
  font-size:clamp(2.4rem,6.4vw,5.6rem); letter-spacing:-.03em; line-height:1.04;
  max-width:14ch;
  transform-style:preserve-3d;
}
.bh-os__title .bh-l{ display:inline-block; will-change:transform,opacity; }
.bh-os__acro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  z-index:2; color:var(--bh-ink); font-weight:500; line-height:1;
  font-size:clamp(5rem,17vw,14rem); letter-spacing:-.02em;
  opacity:0; visibility:hidden;
}
.bh-os__acro sup{
  font-size:.22em; font-weight:600; vertical-align:super;
  position:relative; top:-.35em;
}
.bh-os__tm{
  position:absolute; left:clamp(1rem,4vw,3rem); bottom:1.4rem; z-index:2;
  font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.2em;
  color:rgba(255,255,255,.3);
}
/* WHY-BH variant — compact band, no pin: the swap scrubs as it passes by */
/* label speaks in the site's kicker voice, like every other section */
.bh-os--why .bh-os__pre{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
}
.bh-os-holder--short{ height:auto; }
.bh-os--why{
  position:relative; top:auto; height:clamp(480px,68vh,740px);
}
.bh-os--why .bh-os__title{
  max-width:20ch; font-size:clamp(1.9rem,4.2vw,3.6rem);
}
.bh-os--why .bh-os__acro{
  font-size:clamp(1.7rem,3.6vw,3.1rem); letter-spacing:-.025em; line-height:1.14;
  max-width:20ch; width:max-content;
}
/* light phase: COOL WHITE, not bone — bone-on-bone made the band melt into
   the products section below; a cooler, brighter sky keeps the divide */
.bh-os--why .bh-os__light{
  background:
    linear-gradient(rgba(4,32,59,.07) 1px, transparent 1px) 0 0/78px 78px,
    linear-gradient(90deg, rgba(4,32,59,.07) 1px, transparent 1px) 0 0/78px 78px,
    #F8FAFC;
}

/* ============================================================
   BENEFITS — one pinned screen; media + caption swap on scroll
   ============================================================ */
.bh-benefits-holder{ height:250vh; position:relative; }
.bh-benefits-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
}
.bh-benefits__media{ position:relative; flex:1; min-height:0; }
/* bone overlay: curved shoulders + center notch tab over the video's top edge */
.bh-benefits__mask{
  position:absolute; top:-1px; left:0; right:0; height:clamp(28px,3.9vw,56px);
  z-index:3; pointer-events:none; line-height:0;
}
.bh-benefits__mask svg{ width:100%; height:100%; display:block; }
.bh-benefits__mask path{ fill:var(--bh-bone); }
.bh-full{
  position:absolute; inset:0; margin:0; overflow:hidden;
  opacity:0;
  /* visibility flips only after the fade — faded-out layers stop painting */
  visibility:hidden; transition:opacity .6s var(--bh-ease), visibility 0s .6s;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(0,71,143,.45), transparent 65%),
    linear-gradient(180deg,#0A2540 0%, #04203B 100%);
  display:flex; align-items:center; justify-content:center;
}
.bh-full.is-on{ opacity:1; visibility:visible; transition:opacity .6s var(--bh-ease), visibility 0s; }
.bh-full video, .bh-full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bh-full__label{
  font-family:var(--bh-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.4); border:1px dashed rgba(255,255,255,.22);
  padding:.7rem 1rem; border-radius:8px; position:relative;
}
/* segment progress over the media — shows there are 3 benefits */
.bh-benefits__progress{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem; z-index:2;
}
.bh-benefits__num, .bh-benefits__of{
  font-family:var(--bh-mono); font-size:.7rem; letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}
.bh-benefits__num{ color:#fff; }
.bh-bp{
  width:clamp(38px,6vw,72px); height:2px; border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.bh-bp i{
  display:block; height:100%; background:var(--bh-orange);
  transform:scaleX(0); transform-origin:left;
}
.bh-bp.is-on{ background:rgba(255,255,255,.3); }

.bh-benefits__caption{
  position:relative; background:var(--bh-bone);
  display:grid; grid-template-areas:"cap";
  align-items:start;
}
.bh-benefit{
  grid-area:cap;
  display:grid; grid-template-columns:minmax(280px,1fr) 1.15fr;
  gap:clamp(1.6rem,5vw,5rem);
  padding-block:clamp(1.8rem,5vh,3.2rem);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--bh-ease), transform .5s var(--bh-ease);
  pointer-events:none;
}
.bh-benefit.is-on{ opacity:1; transform:none; pointer-events:auto; }
.bh-benefit__no{
  font-size:1.05rem; color:var(--bh-dim); margin-bottom:.9rem;
}
.bh-benefit__title{
  font-weight:500; letter-spacing:-.025em; line-height:1.18;
  font-size:clamp(1.35rem,2.1vw,1.8rem); max-width:16ch;
}
.bh-benefit__title u{ text-underline-offset:.14em; text-decoration-thickness:1.5px; }
.bh-benefit__desc{
  color:var(--bh-gray); font-size:.98rem; line-height:1.65; max-width:62ch;
  align-self:start; padding-top:1.6rem;
}
@media (max-width:760px){
  .bh-benefit{ grid-template-columns:1fr; gap:1rem; }
  .bh-benefit__desc{ padding-top:0; font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce){
  .bh-benefits-holder{ height:auto; }
  .bh-benefits-pin{ position:relative; height:auto; }
  .bh-benefits__media{ height:60vh; }
  .bh-full:not(.is-on){ display:none; }
  .bh-benefit{ opacity:1; transform:none; position:relative; }
}

/* ============================================================
   PRODUCT WALL
   ============================================================ */
.bh-products{ padding-top:0; }
.bh-cell--link .bh-cell__tag{ margin-top:.1rem; }
.bh-logogrid--products .bh-cell{ min-height:clamp(120px,18vh,190px); }

/* ============================================================
   PRODUCTS — 4×2 compact grid (row 2 = reserved slots);
   minimum motion: hover only
   ============================================================ */
.bh-products > .bh-wrap{ width:min(1400px, calc(100% - clamp(1.6rem,4vw,4.5rem))); }
.bh-prod__head{ text-align:center; margin-bottom:clamp(2.8rem,7vh,4.8rem); }
.bh-prod__head .bh-kicker{ justify-content:center; }
.bh-prod__head .bh-h2{ margin-inline:auto; }
.bh-prod__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.5vw,1.3rem);
}
.bh-prod{ display:flex; flex-direction:column; min-width:0; }
.bh-prod__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; margin:0;
  border-radius:14px; background:var(--bh-ink);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.bh-prod__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform .55s var(--bh-ease);
}
.bh-prod__num{
  position:absolute; top:.85rem; left:1rem;
  font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.14em;
  color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.bh-prod__body{ display:flex; flex-direction:column; flex:1; padding:1rem .2rem 0 .3rem; }
.bh-prod__tag{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bh-orange);
}
.bh-prod__name{
  margin-top:.4rem; font-weight:500; letter-spacing:-.018em; line-height:1.1;
  font-size:clamp(1.15rem,1.5vw,1.4rem); color:var(--bh-ink);
}
.bh-prod__sum{
  margin-top:.5rem; font-size:.86rem; line-height:1.55; color:var(--bh-gray);
}
.bh-prod__more{
  margin-top:auto; padding-top:.9rem; align-self:flex-start;
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--bh-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bh-ink);
}
.bh-prod__more span{ transition:transform .35s var(--bh-ease), color .35s; }
.bh-prod__more::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--bh-orange); transition:width .4s var(--bh-ease);
}
a.bh-prod:hover .bh-prod__media img{ transform:scale(1.06); }
a.bh-prod:hover .bh-prod__more::after{ width:100%; }
a.bh-prod:hover .bh-prod__more span{ transform:translateX(4px); color:var(--bh-orange); }
a.bh-prod:focus-visible{ outline:2px solid var(--bh-orange); outline-offset:4px; border-radius:8px; }

/* reserved slots — quiet dashed frames holding row 2 until products ship */
.bh-prod--soon{
  align-items:center; justify-content:center; gap:.6rem;
  min-height:100%; border:1.5px dashed rgba(4,32,59,.22); border-radius:14px;
  padding:2rem 1rem;
}
.bh-prod__soonnum{
  font-family:var(--bh-mono); font-weight:600; font-size:clamp(2rem,3.4vw,2.8rem);
  line-height:1; color:transparent; -webkit-text-stroke:1.2px rgba(4,32,59,.18);
}
@supports not (-webkit-text-stroke: 1px black){
  .bh-prod__soonnum{ color:var(--bh-faint); }
}
.bh-prod__soontext{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bh-dim);
}

/* ---------- "coming soon" badge (FlexPlan / Workbench / Condominium cards) ---------- */
.bh-prod__soon-badge{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  background:var(--bh-orange); color:#fff; font-family:var(--bh-mono);
  font-size:.64rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:.35rem .6rem; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.22);
}

/* ---------- "coming soon" modal (opened from the badge cards above) ---------- */
.bh-soon{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  padding:1.4rem; background:rgba(4,32,59,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--bh-ease), visibility .25s;
}
.bh-soon.is-open{ opacity:1; visibility:visible; }
.bh-soon__card{
  position:relative; width:min(420px,100%); background:#fff; border-radius:20px;
  padding:clamp(2rem,4vw,2.6rem) clamp(1.6rem,4vw,2.2rem); text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.4);
  transform:translateY(12px) scale(.97); transition:transform .3s var(--bh-ease);
}
.bh-soon.is-open .bh-soon__card{ transform:translateY(0) scale(1); }
.bh-soon__close{
  position:absolute; top:.9rem; right:.9rem; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--bh-line); background:var(--bh-bone); color:var(--bh-ink);
  font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.bh-soon__close:hover{ background:var(--bh-bone-2); }
.bh-soon__eyebrow{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bh-orange); margin-bottom:.5rem;
}
.bh-soon__title{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.4rem;
  color:var(--bh-ink); margin-bottom:.7rem; letter-spacing:-.01em;
}
.bh-soon__body{ color:var(--bh-gray); font-size:.94rem; line-height:1.6; margin-bottom:1.5rem; }
.bh-soon__cta{ display:inline-flex; }

@media (max-width:1024px){
  .bh-prod__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .bh-prod__grid{ grid-template-columns:1fr; }
  .bh-prod--soon{ min-height:0; padding:1.4rem 1rem; }
}
@media (max-width:760px){
  .bh-logogrid__row{ grid-template-columns:repeat(3,1fr); }
  .bh-logogrid__row--4{ grid-template-columns:repeat(2,1fr); }
  .bh-logogrid__row .bh-cell:nth-child(n+7){ display:none; }
  .bh-logogrid__row--4 .bh-cell{ display:flex !important; }
  .bh-cell{ border-bottom:1px solid var(--bh-line); }
}

/* ============================================================
   QUOTE — over full-bleed media slot
   ============================================================ */
.bh-quote{
  position:relative; min-height:96vh; display:flex; align-items:center;
  text-align:center; overflow:hidden; background:#071B30; color:#fff;
  padding-block:clamp(5rem,14vh,9rem);
}
.bh-quote__bg{
  position:absolute; inset:0;
  background:#0A2540;
}
.bh-quote__bg video, .bh-quote__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bh-quote__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 30% 40%, rgba(0,71,143,.5), transparent 65%),
    linear-gradient(180deg, rgba(4,32,59,.4), rgba(4,32,59,.85));
}
.bh-quote .bh-wrap{ position:relative; }
.bh-quote__text{
  font-weight:500; letter-spacing:-.025em; line-height:1.25;
  font-size:clamp(1.5rem,3vw,2.5rem); max-width:30ch; margin:0 auto 2.6rem;
}
.bh-quote .bh-scrubfill .bh-w > i{ color:rgba(255,255,255,.28); }
.bh-quote .bh-scrubfill .bh-w > i.is-lit{ color:#fff; }
.bh-quote__who{ font-weight:600; font-size:1.02rem; }
.bh-quote__org{ color:rgba(255,255,255,.55); font-size:.92rem; margin-top:.5rem; }

/* ============================================================
   HOW IT WORKS — bone + faint path background
   ============================================================ */
/* deeper band + hairline = a quiet but visible break from products above */
.bh-how{
  padding-block:clamp(6rem,18vh,11rem); overflow:hidden;
  background:var(--bh-bone-2); border-top:1px solid var(--bh-line);
}
.bh-how .bh-wrap{
  position:relative; z-index:1;
  width:min(1400px, calc(100% - clamp(1.6rem,4vw,4.5rem)));  /* fill the screen */
}
.bh-ulink{
  display:inline-block; margin-top:clamp(2rem,5vh,3.2rem);
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bh-ink);
  padding-bottom:.45rem; border-bottom:1.5px solid var(--bh-ink);
  transition:color .25s, border-color .25s;
}
.bh-ulink:hover{ color:var(--bh-orange); border-color:var(--bh-orange); }

/* circuit lines stay out of the content zone — visible at the section's
   edges only, so they never run through the heading or the stepper */
.bh-how .bh-paths{
  -webkit-mask-image:radial-gradient(80% 74% at 50% 52%, transparent 50%, #000 78%);
  mask-image:radial-gradient(80% 74% at 50% 52%, transparent 50%, #000 78%);
}

/* process summary — 4 icon nodes strung on a hairline with a traveling pulse */
.bh-how__steps{
  position:relative; margin-top:clamp(3rem,7vh,5rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.2rem);
}
.bh-how__line{
  position:absolute; left:4%; right:4%; top:29px; height:2px;   /* node center */
  background:var(--bh-line); overflow:hidden; border-radius:1px;
}
/* orange pulse travels the line, same voice as the circuit traces */
.bh-how__line i{
  position:absolute; top:0; bottom:0; width:90px; left:-90px;
  background:linear-gradient(90deg, transparent, var(--bh-orange), transparent);
  animation:bhHowPulse 5.5s linear infinite;
}
@keyframes bhHowPulse{ to{ left:calc(100% + 90px); } }
.bh-how__step{ position:relative; text-align:center; }
.bh-how__node{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto;
  border-radius:50%; background:var(--bh-bone-2);
  border:1.5px solid rgba(4,32,59,.3);
  position:relative; z-index:1; color:var(--bh-ink);
  transition:border-color .3s var(--bh-ease), color .3s var(--bh-ease), transform .3s var(--bh-ease);
}
.bh-how__node svg{
  width:26px; height:26px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.bh-how__step:hover .bh-how__node{
  border-color:var(--bh-orange); color:var(--bh-orange); transform:translateY(-2px);
}

/* "See more" — expands the detailed version of the four steps in place */
.bh-how__moretoggle{
  margin-top:clamp(2rem,5vh,3.2rem);
  display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bh-ink);
  padding-bottom:.45rem; border-bottom:1.5px solid var(--bh-ink);
  transition:color .25s, border-color .25s;
}
.bh-how__moretoggle:hover{ color:var(--bh-orange); border-color:var(--bh-orange); }
.bh-how__moreicon{ font-size:1.05rem; line-height:1; transition:transform .35s var(--bh-ease); }
.bh-how__moretoggle.is-open .bh-how__moreicon{ transform:rotate(45deg); }  /* + → × */
/* grid-rows 0fr→1fr = smooth auto-height expand, no JS measuring */
.bh-how__more{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--bh-ease);
}
.bh-how__more.is-open{ grid-template-rows:1fr; }
.bh-how__more > div{ overflow:hidden; }
.bh-how__moregrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.2rem);
  padding-top:clamp(2rem,4.5vh,3rem); text-align:left;
  opacity:0; transform:translateY(12px);
  transition:opacity .45s var(--bh-ease), transform .5s var(--bh-ease);
}
.bh-how__more.is-open .bh-how__moregrid{ opacity:1; transform:none; transition-delay:.12s; }
.bh-how__morecell{
  border-top:1px solid var(--bh-line); padding-top:1rem;
  display:flex; flex-direction:column;
}
.bh-how__moreref{
  font-family:var(--bh-mono); font-size:.64rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bh-ink);
}
.bh-how__morecell p{
  margin-top:.6rem; font-size:.86rem; line-height:1.6; color:var(--bh-gray);
}
.bh-how__moredur{
  margin-top:auto; padding-top:.9rem;
  font-family:var(--bh-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bh-orange);
}
@media (max-width:880px){
  .bh-how__moregrid{ grid-template-columns:1fr; gap:1.4rem; }
}
.bh-how__no{
  display:block; margin-top:1.2rem;
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; color:var(--bh-orange);
}
.bh-how__name{
  margin-top:.4rem; font-weight:500; letter-spacing:-.018em;
  font-size:clamp(1.25rem,1.8vw,1.65rem); color:var(--bh-ink);
}
.bh-how__desc{
  margin:.6rem auto 0; max-width:27ch;
  font-size:clamp(.9rem,1vw,1rem); line-height:1.6; color:var(--bh-gray);
}
@media (max-width:880px){
  .bh-how__steps{ grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem; }
  .bh-how__line{ display:none; }
}
@media (max-width:480px){
  .bh-how__steps{ grid-template-columns:1fr; }
}

/* ============================================================
   CTA + FORM + FOOTER — deep navy close
   ============================================================ */
.bh-end{ background:var(--bh-ink); color:#fff; position:relative; overflow-x:clip; }
.bh-end > .bh-paths{ z-index:0; }
.bh-cta, .bh-form, .bh-foot{ position:relative; z-index:1; }
.bh-cta{
  text-align:center; padding:clamp(7rem,20vh,12rem) 1.2rem clamp(4rem,10vh,6rem);
}
.bh-cta__title{
  font-weight:500; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(2.2rem,5.4vw,4.6rem); max-width:18ch; margin:0 auto clamp(2.2rem,6vh,3.4rem);
}
.bh-cta .bh-fill .bh-w > i{ color:#fff; }
.bh-btn{
  display:inline-block; background:var(--bh-orange); color:#fff;
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border-radius:9px; border:0; cursor:pointer;
  transition:filter .25s;
  will-change:transform;
}
.bh-btn:hover{ filter:brightness(1.08); }
.bh-btn--big{ padding:1.25rem 2.4rem; }

.bh-form{ padding-block:clamp(3rem,8vh,5rem); }
.bh-form__grid{
  display:grid; grid-template-columns:minmax(280px,1fr) 1.1fr;
  gap:clamp(2.5rem,6vw,6rem);
  border-top:1px solid var(--bh-line-l);
  padding-top:clamp(3rem,8vh,5rem);
}
.bh-form__intro h3{
  font-weight:500; letter-spacing:-.025em; font-size:clamp(1.6rem,2.6vw,2.3rem);
  margin:1.2rem 0 1rem;
}
.bh-form__lede{ color:rgba(255,255,255,.55); line-height:1.65; max-width:38ch; }
/* white rounded card (reference form style) — dark text on white */
.bh-form__form{
  background:#fff; border:0; box-shadow:none;
  border-radius:22px; padding:clamp(1.6rem,3vw,2.4rem);
  display:block;
}
.bh-form__form .field{ margin-bottom:1.3rem; }
.bh-form__form label{
  display:block; font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bh-gray); margin-bottom:.5rem;
}
.bh-form__form input, .bh-form__form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(4,32,59,.2);
  color:var(--bh-ink); font-family:var(--bh-sans); font-size:1rem; padding:.55rem 0 .8rem;
  border-radius:0; transition:border-color .3s;
}
.bh-form__form input:focus, .bh-form__form textarea:focus{
  outline:none; border-color:var(--bh-orange);
}
.bh-form__form .contact__submit{ margin-top:.6rem; }
.bh-form__form .contact__note{ margin-top:1rem; color:var(--bh-gray); font-size:.9rem; }
@media (max-width:760px){ .bh-form__grid{ grid-template-columns:1fr; } }

.bh-foot{ padding-top:clamp(3rem,8vh,5rem); }
.bh-foot__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1.3fr .85fr 1.05fr;
  gap:clamp(1.5rem,3vw,2.6rem);
  border-top:1px solid var(--bh-line-l);
  padding-top:clamp(3rem,7vh,4.5rem);
}
.bh-foot .brand__name{ color:#fff; }
.bh-foot__badge{
  margin-top:2rem; display:inline-flex; align-items:center; gap:.9rem;
  border:1px solid var(--bh-line-l); border-radius:10px; padding:.9rem 1.1rem;
  max-width:220px;
}
.bh-foot__badge strong{ font-size:1.3rem; font-weight:600; letter-spacing:-.02em; }
.bh-foot__badge span{ font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.55); }
.bh-foot__col h4{
  font-family:var(--bh-mono); font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1.3rem;
}
.bh-foot__col a{
  display:block; color:rgba(255,255,255,.85); font-size:.95rem; padding-block:.42rem;
  transition:color .25s;
}
.bh-foot__col a:hover{ color:var(--bh-orange); }
.bh-foot__reach{ font-size:.98rem; margin-bottom:.6rem; }
.bh-foot__dim{ color:rgba(255,255,255,.35); font-size:.85rem; margin-top:.2rem; }
.bh-foot__social{ display:flex; gap:.9rem; margin-top:1.4rem; }
.bh-foot__social a{
  display:inline-flex; padding:.45rem; color:rgba(255,255,255,.7);
  border:1px solid var(--bh-line-l); border-radius:8px; transition:color .25s, border-color .25s;
}
.bh-foot__social a:hover{ color:var(--bh-orange); border-color:var(--bh-orange); }
.bh-foot__bar{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:2.2rem; margin-top:clamp(2.5rem,6vh,4rem);
  border-top:1px solid var(--bh-line-l);
  font-size:.8rem; color:rgba(255,255,255,.35);
}
@media (max-width:1100px){
  .bh-foot__grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:880px){
  .bh-foot__grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- reveal helpers ---------- */
.bh-up{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--bh-ease), transform .9s var(--bh-ease); }
.bh-up.is-in{ opacity:1; transform:none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .bh-loader{ display:none; }
  .bh-up{ opacity:1; transform:none; }
  .bh-scrubfill .bh-w > i{ color:inherit !important; }
  .bh-os-holder{ height:auto; }
  .bh-os{ position:relative; height:auto; padding-block:6rem; }
  .bh-os__light, .bh-os__acro{ display:none; }
  /* why-BH variant: keep sentence 2 as a static line under the title */
  .bh-os--why .bh-os__acro{
    display:block; position:static; transform:none; opacity:1; visibility:visible;
    margin-top:1.2rem; color:rgba(255,255,255,.75);
    font-size:clamp(1.15rem,2.4vw,1.6rem); width:auto;
  }
  .bh-cross.is-flick{ animation:none; }
  .bh-paths .bh-pulse{ animation:none; visibility:hidden; }
}