/* ============================================================
   BEAVER HUB — LANDING v6 (reference-style rebuild, navy brand)
   Bone-white canvas · deep-navy dark sections · orange accent
   Sections: pill nav / logo wall / scrub-fill intros / sticky
   feature steps / pinned OS punchline / fullscreen benefits /
   product wall / quote / how-it-works / 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; }

/* ---------- 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; }
.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); }
.nav .brand{ margin-right:auto; }
.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; }
.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:var(--bh-orange); color:#fff; }

@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; }
}

/* ============================================================
   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
   ============================================================ */
.bh-paths{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.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;
  animation:bhDash 18s linear infinite;
}
.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
   ============================================================ */
.bh-logowall{ padding-bottom:0; }
.bh-logowall .bh-h2{ margin-bottom:clamp(3rem,7vh,5rem); }
.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-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; }

/* ============================================================
   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; transition:opacity .6s var(--bh-ease);
  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; }
.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:300vh; 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);
}

/* ============================================================
   BENEFITS — one pinned screen; media + caption swap on scroll
   ============================================================ */
.bh-benefits-holder{ height:340vh; 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; transition:opacity .6s var(--bh-ease);
  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; }
.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); }
@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
   ============================================================ */
.bh-how{ padding-block:clamp(6rem,18vh,11rem); overflow:hidden; }
.bh-how .bh-wrap{ position:relative; z-index:1; }
.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); }

/* ============================================================
   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.4fr 1fr 1fr 1.2fr;
  gap:clamp(2rem,4vw,3rem);
  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: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; }
  .bh-cross.is-flick{ animation:none; }
  .bh-paths .bh-pulse{ animation:none; visibility:hidden; }
}