/* ============================================================================
   BCM — COMPONENTS: nav, eyebrow, buttons, cards, hero, dark band, footer, motion
   ============================================================================ */

/* ============================================================
   EYEBROW LABEL (kicker)
   ============================================================ */
.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bcm-blue);
  padding:6px 16px;
  background:rgba(30,79,168,.08);
  border:1px solid var(--bcm-hairline);
  border-radius:999px;
  margin-bottom:var(--s-2);
}
.bcm-dark .eyebrow{ color:var(--bcm-blue-soft); background:rgba(125,163,232,.12); border-color:rgba(125,163,232,.25); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-size:15px; font-weight:600; letter-spacing:.01em;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.btn-primary{ background:var(--bcm-blue); color:#fff; }
.btn-primary:hover{ background:var(--bcm-blue-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,79,168,.30); }
.btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn-ghost:hover{ background:#fff; color:var(--bcm-ink); border-color:#fff; transform:translateY(-2px); }

/* ============================================================
   NAV — sticky / condensing, transparent over hero
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--gutter);
  transition:background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), padding .35s var(--ease-out);
}
.nav-logo img{ height:46px; width:auto; transition:height .35s var(--ease-out), filter .35s var(--ease-out); }
.nav-menu{ display:flex; align-items:center; gap:36px; list-style:none; }
.nav-menu a{
  position:relative; font-family:var(--font-sans); font-size:15px; font-weight:500;
  letter-spacing:.01em; color:#fff;
  transition:color .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--bcm-blue); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease-out);
}
.nav-menu a:hover{ transform:translateY(-1px); }
.nav-menu a:hover::after{ transform:scaleX(1); }
.nav-cta{ /* keep the quote link as a pill in the menu */ }

/* Scrolled: frosted-white condensing bar */
.nav.scrolled{
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--bcm-shadow-sm); padding-top:12px; padding-bottom:12px;
}
.nav.scrolled .nav-logo img{ height:40px; }
.nav.scrolled .nav-menu a{ color:var(--bcm-ink); }
.nav.scrolled .nav-menu a:hover{ color:var(--bcm-blue); }
/* A filtered ancestor becomes the containing block for position:fixed children. The
   scrolled nav's backdrop-filter would trap the full-screen menu overlay inside the
   short nav bar — so drop it while the menu is open and let the overlay cover the bar. */
.nav.menu-open{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* the floating CTA sits above the menu overlay; hide it while the menu is open */
.nav.menu-open ~ .sticky-cta{ opacity:0; visibility:hidden; pointer-events:none; }
/* Logo is a full-color mark; invert to white only while transparent over the dark hero */
.nav:not(.scrolled) .nav-logo img{ filter:brightness(0) invert(1); }
/* ...but restore full color + lift above the overlay when the mobile menu is open */
.nav.menu-open .nav-logo{ position:relative; z-index:1100; }
.nav.menu-open .nav-logo img{ filter:none !important; }

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle{ display:none; background:none; border:0; width:40px; height:40px; position:relative; z-index:1100; }
.nav-toggle span{ display:block; width:24px; height:2px; margin:5px auto; background:#fff; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.nav.scrolled .nav-toggle span,
.nav.menu-open .nav-toggle span{ background:var(--bcm-ink); }
/* open state morphs the three bars into an X (close affordance) */
.nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   STICKY FLOATING CTA
   ============================================================ */
.sticky-cta{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:1200;
  padding:14px 24px; border:0; border-radius:999px;
  font-family:var(--font-sans); font-size:15px; font-weight:600; color:#fff; background:var(--bcm-blue);
  box-shadow:var(--bcm-shadow-lg);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), background-color .2s var(--ease-out);
}
.sticky-cta.show{ opacity:1; transform:none; pointer-events:auto; }
.sticky-cta:hover{ background:var(--bcm-blue-deep); transform:translateY(-2px); }
/* smaller footprint on phones so it covers less content while scrolling */
@media (max-width:560px){
  .sticky-cta{ padding:10px 18px; font-size:13px; }
}

/* "Request a Quote" item inside the nav menu — mobile overlay only */
.menu-cta-item{ display:none; }

/* ============================================================
   HERO — full-bleed video
   ============================================================ */
/* background = on-brand dark so the hero never flashes white before the poster/video paints */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bcm-ink); }
.hero-media{ position:absolute; inset:0; z-index:0;
  /* inline low-res hero frame: paints with first CSS apply so the hero is never blank while the poster/video download */
  background:center/cover no-repeat url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBARXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAADwAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/+ICpElDQ19QUk9GSUxFAAEBAAAClGFwcGwCEAAAbW50clJHQiBYWVogB9UABAABAAEAAQABYWNzcEFQUEwAAAAAQVBQTAAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1hcHBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMZGVzYwAAARQAAABfY3BydAAAAXQAAAAid3RwdAAAAZgAAAAUclhZWgAAAawAAAAUZ1hZWgAAAcAAAAAUYlhZWgAAAdQAAAAUclRSQwAAAegAAAAOdmNndAAAAfgAAAAwbmRpbgAAAigAAAA+Y2hhZAAAAmgAAAAsYlRSQwAAAegAAAAOZ1RSQwAAAegAAAAOZGVzYwAAAAAAAAAFSERUVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdGV4dAAAAABDb3B5cmlnaHQgMjAwNyBBcHBsZSBJbmMuAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9jdXJ2AAAAAAAAAAEB9gAAdmNndAAAAAAAAAABAAEAAAAAAAAAAQAAAAEAAAAAAAAAAQAAAAEAAAAAAAAAAQAAbmRpbgAAAAAAAAA2AACj1wAAVHsAAEzNAACZmgAAJmYAAA9cAABQDQAAVDkAAfYEAAH2BAAB9gQAAAAAAAAAAHNmMzIAAAAAAAEMQgAABd7///MmAAAHkwAA/ZD///ui///9owAAA9wAAMBu/8AAEQgADwAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACQkJCQkJEAkJEBYQEBAWHhYWFhYeJh4eHh4eJi4mJiYmJiYuLi4uLi4uLjc3Nzc3N0BAQEBASEhISEhISEhISP/bAEMBCwwMEhESHxERH0szKjNLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS//dAAQAAv/aAAwDAQACEQMRAD8AqLd6nId8ELcjBXHBIqfSr3XvtRFxF5K7TnAI57d66lWU+o+lRhrV52gBYuoBPJ6GtFPlVotmThd3aRmr5rRGRUXduIw2R0P8q4rWrm8m5kddgONiZx9a9IMMY6FhWZcabaT53D9Oap1XLSTEqaWqR//Z); }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
/* the video surface can render blank between poster-drop and first decoded frame
   (seconds on cold loads; Safari drops the poster at load-start) -- keep the sharp
   poster img underneath and only reveal the video once it is truly playing */
.hero-fallback{ position:absolute; inset:0; }
.hero-media video{ position:relative; z-index:1; opacity:0; transition:opacity .5s ease; }
.hero-media video.bcm-playing{ opacity:1; }
/* cinematic scrim for legible white type */
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,27,61,.30) 0%, rgba(15,27,61,.10) 35%, rgba(15,27,61,.58) 100%),
    radial-gradient(90% 70% at 50% 60%, rgba(15,27,61,0) 40%, rgba(15,27,61,.38) 100%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; padding:0 var(--gutter); max-width:1000px; }
.hero h1{
  font-size:var(--fs-display); line-height:1.04; letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 30px rgba(15,27,61,.45);
}
.hero h1 em{ color:#fff; }
.hero-sub{
  font-family:var(--font-sans); font-size:clamp(15px,1.7vw,20px); font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.88); margin:18px 0 32px; text-shadow:0 1px 14px rgba(15,27,61,.5);
}
/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; }
.scroll-cue i{ display:block; width:14px; height:14px;
  border-right:2px solid rgba(255,255,255,.85); border-bottom:2px solid rgba(255,255,255,.85);
  animation:cue 1.8s infinite ease-in-out; }
@keyframes cue{ 0%,100%{ transform:rotate(45deg) translate(-3px,-3px); opacity:.45; } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1; } }

/* ============================================================
   PAGE HERO (interior pages) — compact dark band that also keeps
   the transparent white nav legible at the top of light pages.
   ============================================================ */
.page-hero{
  padding-top:calc(var(--nav-h) + var(--s-5));
  padding-bottom:var(--s-6);
  text-align:center;
}
.page-hero h1{ color:#fff; font-size:var(--fs-h1); }
.page-hero .lead{ color:rgba(255,255,255,.82); margin-top:var(--s-3); }

/* Simple "coming next cycle" placeholder for scaffolded pages */
.placeholder{ text-align:center; }
.placeholder .tag{
  display:inline-block; font-family:var(--font-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bcm-blue); padding:6px 16px; border:1px solid var(--bcm-hairline); border-radius:999px; margin-bottom:var(--s-3);
}

/* ============================================================
   SECTION HEADER (eyebrow + title centered opener)
   ============================================================ */
.section-head{ text-align:center; max-width:760px; margin:0 auto var(--s-5); }
.section-head h2{ margin-top:var(--s-1); }
.section-head .lead{ margin-top:var(--s-3); color:var(--bcm-gray); }

/* ============================================================
   CINEMATIC DARK BAND
   ============================================================ */
.bcm-dark{
  background-color:var(--bcm-ink);
  background-image:radial-gradient(115% 80% at 50% 45%, #1d3a6b 0%, rgba(15,27,61,0) 70%);
}
.bcm-dark h1,.bcm-dark h2,.bcm-dark h3,.bcm-dark h4{ color:#fff; }
.bcm-dark p{ color:rgba(255,255,255,.82); }

/* spec callouts (How We Build) */
.spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s-3); margin-top:var(--s-5); }
.spec{ padding:var(--s-3); border:1px solid rgba(125,163,232,.22); border-radius:10px; background:rgba(125,163,232,.05); }
.spec .n{ font-family:var(--font-display); font-size:clamp(24px,2.4vw,32px); color:#fff; display:block; }
.spec .l{ font-family:var(--font-sans); font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.6); margin-top:6px; display:block; }

/* ============================================================
   CARDS (services / mosaic tiles)
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.card{
  border:1px solid var(--bcm-hairline); border-radius:10px; overflow:hidden; background:var(--bcm-white);
  box-shadow:var(--bcm-shadow-md);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); border-color:var(--bcm-blue); box-shadow:var(--bcm-shadow-lg); }
.card-media{ aspect-ratio:4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-body{ padding:var(--s-3) var(--s-3) var(--s-4); }
.card-body h3{ margin-bottom:var(--s-1); }
.card-num{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:3px; color:var(--bcm-blue); display:block; margin-bottom:8px; }

/* ============================================================
   SPLIT (asymmetric image + copy) — breaks centered monotony
   ============================================================ */
.split{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-6); align-items:center; }
.split.reverse{ grid-template-columns:5fr 7fr; }
.split-media{ border-radius:12px; overflow:hidden; box-shadow:var(--bcm-shadow-lg); }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{ display:flex; justify-content:center; gap:clamp(32px,6vw,96px); flex-wrap:wrap; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-size:clamp(40px,5vw,64px); font-weight:420; color:var(--bcm-ink); line-height:1; display:block; }
.stat .label{ font-family:var(--font-sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--bcm-gray); margin-top:10px; display:block; }

/* ============================================================
   CONTACT BANNER (full-bleed)
   ============================================================ */
.banner{ position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.banner-media{ position:absolute; inset:0; }
.banner-media img{ width:100%; height:100%; object-fit:cover; }
.banner-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(15,27,61,.55),rgba(15,27,61,.62)); }
.banner-inner{ position:relative; z-index:2; text-align:center; padding:0 var(--gutter); }
.banner-inner h2{ color:#fff; margin-bottom:var(--s-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bcm-ink); color:rgba(255,255,255,.7); padding:var(--s-6) 0 var(--s-4); }
.footer .container{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); flex-wrap:wrap; }
.footer-logo img{ height:34px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.footer-nav{ display:flex; gap:var(--s-4); list-style:none; flex-wrap:wrap; }
.footer-nav a{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .25s; }
.footer-nav a:hover{ color:#fff; }
.footer-meta{ text-align:right; font-size:14px; }
.footer-meta a{ color:rgba(255,255,255,.8); }
.footer-copy{ display:block; margin-top:var(--s-2); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.58); }

/* ============================================================
   HERO ENTRANCE — kinetic mask-reveal of the headline (one giant moment)
   ============================================================ */
.hero h1 .line-mask{ display:block; overflow:hidden; }
.hero h1 .line{ display:block; }
@media (prefers-reduced-motion:no-preference){
  .hero h1 .line{ transform:translateY(112%); animation:heroLine .6s var(--ease-out) forwards; }
  .hero h1 .line-mask:nth-child(2) .line{ animation-delay:.08s; }
  .hero-sub{ opacity:0; animation:heroFade .5s .3s var(--ease-out) forwards; }
  .hero .btn{ opacity:0; animation:heroFade .5s .4s var(--ease-out) forwards; }
  .scroll-cue{ opacity:0; animation:heroFade .5s .55s var(--ease-out) forwards; }
}
@keyframes heroLine{ to{ transform:none; } }
@keyframes heroFade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ============================================================
   PROCESS STEP TIMELINE (How We Build)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-3); margin-top:var(--s-5); text-align:left; }
.step{ padding-top:var(--s-2); border-top:2px solid rgba(125,163,232,.35); }
.step .sn{ font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--bcm-blue-soft); }
.step .st{ font-family:var(--font-display); color:#fff; font-size:clamp(17px,1.7vw,21px); margin-top:6px; }

/* ============================================================
   CASE-STUDY META ROW (Proof)
   ============================================================ */
.meta-row{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin:var(--s-3) 0 var(--s-2); }
.meta .k{ display:block; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bcm-blue); }
.meta .v{ font-family:var(--font-display); font-size:18px; color:var(--bcm-ink); }

/* ============================================================
   FULL-BLEED STATEMENT BREAK (cinematic atmosphere — no factual claim)
   ============================================================ */
.statement{ position:relative; min-height:62vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.statement-media{ position:absolute; inset:0; }
.statement-media img{ width:100%; height:100%; object-fit:cover; }
.statement-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(15,27,61,.46),rgba(15,27,61,.52)); }
.statement-inner{ position:relative; z-index:2; text-align:center; padding:0 var(--gutter); max-width:900px; }
.statement-inner p{ font-family:var(--font-display); font-style:italic; color:#fff; font-size:clamp(26px,4vw,52px); line-height:1.18; }

/* ============================================================
   CREDIBILITY LINE (Trust)
   ============================================================ */
.creds{ text-align:center; margin-top:var(--s-4); font-family:var(--font-sans); font-size:14px;
  letter-spacing:.06em; color:var(--bcm-gray); }
.creds b{ color:var(--bcm-ink); font-weight:600; }

/* ============================================================
   CAROUSEL (reusable — credibility, testimonials, services later)
   ============================================================ */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{ flex:0 0 clamp(280px,42%,460px); scroll-snap-align:start; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--bcm-hairline);
  background:#fff; color:var(--bcm-ink); box-shadow:var(--bcm-shadow-md); cursor:pointer; font-size:18px;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.carousel-btn:hover{ background:var(--bcm-blue); color:#fff; border-color:var(--bcm-blue); }
.carousel-prev{ left:-14px; } .carousel-next{ right:-14px; }
@media (max-width:991px){ .carousel-btn{ display:none; } .carousel-slide{ flex-basis:82%; } }

/* Credibility card (carousel slide) */
.cred-card{
  height:100%; padding:var(--s-4); border:1px solid var(--bcm-hairline); border-radius:12px;
  background:var(--bcm-white); box-shadow:var(--bcm-shadow-sm);
}
.cred-card .eyebrow{ margin-bottom:var(--s-2); }
.cred-card h3{ margin-bottom:var(--s-2); }
.cred-card p{ font-size:15px; }

/* Quote / testimonial slide */
.quote-card{ height:100%; padding:var(--s-4); border-radius:12px; background:var(--bcm-soft); border:1px solid var(--bcm-hairline); }
.quote-card .q{ font-family:var(--font-display); font-style:italic; color:var(--bcm-ink); font-size:clamp(19px,2vw,24px); line-height:1.45; }
.quote-card .by{ font-family:var(--font-sans); font-size:14px; color:var(--bcm-gray); margin-top:var(--s-3); }
.quote-card .by b{ color:var(--bcm-ink); font-weight:600; }

/* ============================================================
   PARTNER / MATERIAL LOGO WALL (placeholders until real logos supplied)
   ============================================================ */
.logo-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-3); align-items:center; }
.logo-wall .logo{
  height:72px; display:grid; place-items:center; border:1px dashed var(--bcm-hairline); border-radius:10px;
  font-family:var(--font-sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bcm-gray); opacity:.7;
}

/* ============================================================
   PROCESS STAGE (How We Build) — number + video/copy split
   ============================================================ */
.stage-num{ font-family:var(--font-display); font-size:clamp(40px,5vw,72px); color:var(--bcm-hairline); line-height:1; display:block; margin-bottom:var(--s-2); }
.bcm-dark .stage-num{ color:rgba(125,163,232,.35); }
.split-media video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   FAMILY / FOUNDERS — portraits (real photos drop into the frames)
   ============================================================ */
.founders{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.founder{ text-align:center; }
.founder-photo{
  aspect-ratio:2/3; /* matches the photos (1066x1600) so the whole frame shows, no crop */
  border-radius:12px; overflow:hidden; background:var(--bcm-soft);
  box-shadow:var(--bcm-shadow-md); margin-bottom:var(--s-2);
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* placeholder state until a real photo is added */
.founder-photo.placeholder{
  display:grid; place-items:center; border:1px dashed var(--bcm-hairline);
  color:var(--bcm-gray); font-family:var(--font-sans); font-size:13px; letter-spacing:.08em;
}
.founder h3{ font-size:var(--fs-h3); margin-bottom:2px; }
.founder .role{ font-family:var(--font-sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--bcm-blue); }
.founder .bio{ font-size:15px; margin-top:var(--s-2); }
/* a single large family/team frame (homepage feature) */
.family-frame{ aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:var(--bcm-soft); box-shadow:var(--bcm-shadow-lg); }
.family-frame img{ width:100%; height:100%; object-fit:cover; }
.family-frame.placeholder{ display:grid; place-items:center; border:1px dashed var(--bcm-hairline); color:var(--bcm-gray); font-family:var(--font-sans); font-size:14px; letter-spacing:.06em; text-align:center; padding:var(--s-4); }
.founders.two{ grid-template-columns:repeat(2,1fr); max-width:740px; margin:0 auto; }
/* Homepage: two founder portraits side by side in the family section */
.family-duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.family-duo .founder-photo{ margin-bottom:var(--s-1); }
.family-duo .name{ font-family:var(--font-display); font-size:18px; color:var(--bcm-ink); }
.family-duo .role{ font-family:var(--font-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bcm-blue); display:block; }
@media (max-width:991px){ .founders{ grid-template-columns:1fr; max-width:360px; margin:0 auto; gap:var(--s-5); } .founders.two{ grid-template-columns:1fr 1fr; max-width:420px; } }

/* ============================================================
   FORMS (inquiry / Request a Quote)
   ============================================================ */
.form{ max-width:680px; margin:0 auto; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.field{ margin-bottom:var(--s-3); }
.field label{
  display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bcm-ink); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-sans); font-size:16px; /* 16px avoids iOS zoom-on-focus */
  color:var(--bcm-ink); background:var(--bcm-white);
  border:1px solid var(--bcm-hairline); border-radius:8px; padding:13px 14px;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field input::placeholder,.field textarea::placeholder{ color:#9AA6B4; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--bcm-blue); box-shadow:0 0 0 3px rgba(30,79,168,.12);
}
.field textarea{ min-height:130px; resize:vertical; }
.field select{ cursor:pointer; }
.form .btn{ width:100%; justify-content:center; margin-top:var(--s-1); }
.form-note{ text-align:center; font-size:13px; color:var(--bcm-gray); margin-top:var(--s-2); }
.form-success{ text-align:center; padding:var(--s-5) 0; display:none; }
.form-success.show{ display:block; }
.form-success h3{ margin-bottom:var(--s-2); }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   SKIP LINK (keyboard / screen-reader a11y)
   ============================================================ */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:3000;
  background:var(--bcm-blue); color:#fff; padding:10px 18px; border-radius:8px;
  font-family:var(--font-sans); font-size:14px; transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:16px; }

/* ============================================================
   MOTION — scroll reveal + reduced-motion fallback
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-photo{ animation:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .grid-3{ grid-template-columns:1fr; gap:var(--s-4); }
  .split,.split.reverse{ grid-template-columns:1fr; gap:var(--s-4); }
  .steps{ grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .nav-menu{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:var(--s-4);
    background:var(--bcm-white); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    transform:translateX(100%); transition:transform .4s var(--ease-out);
  }
  .nav-menu a{ color:var(--bcm-ink); font-size:20px; }
  .nav.menu-open .nav-menu{ transform:none; }
  .nav-toggle{ display:block; }
  /* conversion CTA at the bottom of the mobile menu */
  .menu-cta-item{ display:block; margin-top:var(--s-2); }
  .nav-menu a.menu-cta{
    display:inline-block; background:var(--bcm-blue); color:#fff; font-size:17px; font-weight:600;
    padding:14px 30px; border-radius:999px; box-shadow:var(--bcm-shadow-md);
  }
  .footer .container{ flex-direction:column; }
  .footer-meta{ text-align:left; }
}

/* ============================================================
   SURFACING TRIPTYCH — base -> color -> lines, left to right.
   Portrait clips shown 3-up on desktop; a scroll-snap carousel
   on phones (78% wide so the next panel peeks and invites swipe).
   ============================================================ */
.tri-head{ text-align:center; max-width:640px; margin:var(--s-6) auto var(--s-4); }
.tri-head h2{ font-family:var(--font-serif); font-weight:340; font-size:clamp(24px,3vw,34px);
  line-height:1.12; letter-spacing:-.015em; color:var(--bcm-ink); }
.tri-head p{ font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--bcm-gray); margin-top:10px; }

.tri{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.tri-panel{ position:relative; margin:0; border-radius:14px; overflow:hidden;
  background:var(--bcm-ink); box-shadow:var(--bcm-shadow-lg); aspect-ratio:9/16; }
.tri-panel video{ width:100%; height:100%; object-fit:cover; display:block; }
/* scrim: darkens top for the step chip and bottom for the caption, clear through the middle */
.tri-panel::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,27,61,.34) 0%, rgba(15,27,61,0) 26%,
    rgba(15,27,61,0) 46%, rgba(15,27,61,.82) 100%); }
.tri-panel figcaption{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; color:#fff; }
.tri-num{ display:block; font-family:var(--font-sans); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.tri-name{ display:block; font-family:var(--font-serif); font-size:23px; font-weight:420;
  margin-top:5px; line-height:1.15; }
.tri-desc{ display:block; font-family:var(--font-sans); font-size:13.5px; line-height:1.5;
  color:rgba(255,255,255,.88); margin-top:7px; max-width:26ch; }
.tri-step{ position:absolute; top:16px; left:18px; z-index:2; width:30px; height:30px;
  border-radius:50%; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); display:flex;
  align-items:center; justify-content:center; color:#fff; font-family:var(--font-sans);
  font-size:12.5px; font-weight:700; }

@media (max-width:860px){
  .tri{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 0 14px; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter);
    padding-right:var(--gutter); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tri::-webkit-scrollbar{ display:none; }
  .tri-panel{ flex:0 0 78%; scroll-snap-align:center; }
}

/* Wide base-coat banner: the base coat was shot landscape, so it gets a full-width
   cinematic slot of its own rather than being cropped into a vertical panel. */
.tri-banner{ position:relative; margin:0 0 20px; border-radius:14px; overflow:hidden;
  background:var(--bcm-ink); box-shadow:var(--bcm-shadow-lg); aspect-ratio:21/9; }
.tri-banner video{ width:100%; height:100%; object-fit:cover; display:block; }
.tri-banner::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,27,61,.34) 0%, rgba(15,27,61,0) 30%,
    rgba(15,27,61,0) 40%, rgba(15,27,61,.84) 100%); }
.tri-banner figcaption{ position:absolute; left:24px; right:24px; bottom:20px; z-index:2; color:#fff; }
.tri-banner .tri-desc{ max-width:44ch; }
@media (max-width:860px){
  .tri-banner{ aspect-ratio:16/10; margin-bottom:14px; }
  .tri-banner figcaption{ left:18px; right:18px; bottom:16px; }
}

/* In the 2-up layout the portrait panels are twice as wide as they were at 3-up, so a
   full 9:16 made them ~900px tall. Crop to 4:5 and bias the framingtoward the court
   (the sky is the least interesting part of these clips). Mobile keeps 9:16 — the
   carousel panels are narrow, so they need the height. */
@media (min-width:861px){
  .tri-panel{ aspect-ratio:4/5; }
  .tri-panel video{ object-position:center 62%; }
}

/* ============================================================
   HERO LEGIBILITY — buttons and type must hold over moving video.
   Translucent "ghost" buttons wash out against bright court/sky
   footage, so the hero gets a solid primary and a reinforced
   secondary. Contrast checked against the brightest hero frames.
   ============================================================ */
.hero .btn-ghost{
  background:#fff; color:var(--bcm-ink); border-color:#fff;
  box-shadow:0 10px 30px rgba(10,18,41,.35);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.hero .btn-ghost:hover{ background:var(--bcm-blue); color:#fff; border-color:var(--bcm-blue); }
.hero .btn-line{
  background:rgba(15,27,61,.42) !important; border-color:rgba(255,255,255,.85) !important;
  color:#fff !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(10,18,41,.28);
}
.hero .btn-line:hover{ background:rgba(15,27,61,.72) !important; border-color:#fff !important; }
/* deepen the scrim through the middle band where the headline and buttons sit */
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(15,27,61,.40) 0%, rgba(15,27,61,.16) 26%,
      rgba(15,27,61,.46) 52%, rgba(15,27,61,.66) 100%),
    radial-gradient(78% 56% at 50% 52%, rgba(15,27,61,.50) 0%, rgba(15,27,61,0) 78%) !important;
}

/* Small stage marker in the hero: ties the hero clip to the stages below without
   competing with the centred headline. Sits bottom-left, clear of the scroll cue. */
.hero-stage{
  position:absolute; left:var(--gutter); bottom:30px; z-index:3;
  font-family:var(--font-sans); font-size:12.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.82); padding:8px 15px; border-radius:999px;
  background:rgba(15,27,61,.42); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-stage b{ font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-right:8px; }
@media (max-width:700px){
  .hero-stage{ left:50%; transform:translateX(-50%); bottom:72px; font-size:11.5px; }
}
/* the sequence section sits tight under the hero — it is a continuation, not a new chapter */
#sequence{ padding-top:var(--s-6); }
#sequence .tri-head{ margin-top:0; }

/* ============================================================
   HERO VIDEO WALL — base coat across the top half, color coats
   and line work splitting the bottom half. Each clip keeps a
   shape close to how it was shot; the portrait clips are framed
   low (object-position) so the crop lands on the court and the
   crew rather than empty sky.
   ============================================================ */
.hero-wall{ position:absolute; inset:0; display:flex; flex-direction:column; gap:2px; background:var(--bcm-ink); }
.hw-top{ flex:1 1 50%; }
.hw-bottom{ flex:1 1 50%; display:flex; gap:2px; }
.hw-bottom .hw-cell{ flex:1 1 50%; }
.hw-cell{ position:relative; margin:0; overflow:hidden; background:var(--bcm-ink); }
.hw-cell video{ width:100%; height:100%; object-fit:cover; display:block; }
/* portrait sources cropped into wide cells: bias the visible band downward */
.hw-bottom .hw-cell video{ object-position:center 64%; }
.hw-cell figcaption{
  position:absolute; left:18px; bottom:14px; z-index:4;
  font-family:var(--font-sans); font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.9); padding:6px 13px; border-radius:999px;
  background:rgba(15,27,61,.5); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hw-cell figcaption b{ font-weight:700; letter-spacing:.14em; color:#fff; margin-right:7px; }
@media (max-width:700px){
  .hw-cell figcaption{ left:10px; bottom:10px; font-size:10px; padding:5px 10px; }
  .hw-bottom .hw-cell:last-child figcaption{ left:auto; right:10px; }
}

/* The legacy single-hero rule hides .hero-media video until a .bcm-playing class that
   the old script added. The wall has no such handoff — each cell shows its poster
   immediately and the video simply plays over it — so opt these back into view and
   keep the scrim layered above them. */
.hero-wall{ z-index:0; }
.hw-cell video{ opacity:1 !important; position:absolute; inset:0; z-index:0; }
.hero-media::after{ z-index:1; }
.hero-inner{ z-index:2; }

/* Lift the hero copy so it sits wholly within the top (base-coat) cell — the 50/50
   seam was cutting through the headline. The lower cells then read as pure imagery. */
.hero .hero-inner{ transform:translateY(-7%); }
/* label placement: 01 top-right of the wide cell, 03 right-aligned so it clears the
   centred scroll cue */
.hw-top figcaption{ left:auto; right:22px; top:22px; bottom:auto; }
.hw-bottom .hw-cell:last-child figcaption{ left:auto; right:22px; }
@media (max-width:700px){
  .hero .hero-inner{ transform:translateY(-5%); }
  .hw-top figcaption{ right:12px; top:80px; }
}

/* 01 sits bottom-left of the wide cell: top-right collided with the nav links. */
.hw-top figcaption{ left:22px; right:auto; top:auto; bottom:16px; }
@media (max-width:700px){ .hw-top figcaption{ left:12px; right:auto; top:auto; bottom:12px; } }
@media (max-width:700px){
  /* extra clearance so the 01 chip never crowds the sub-headline on narrow screens */
  .hero .hero-inner{ transform:translateY(-10%); }
  .hw-top figcaption{ bottom:14px; }
}

/* ============================================================
   HERO BRIGHTNESS — the earlier scrim was tuned when the buttons
   were translucent and needed heavy backing. They're solid now,
   so pull the veil back and let the footage read. Legibility is
   carried by a tighter text-shadow behind the type instead of a
   blanket of navy over the whole wall.
   ============================================================ */
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(15,27,61,.26) 0%, rgba(15,27,61,.06) 30%,
      rgba(15,27,61,.14) 55%, rgba(15,27,61,.40) 100%),
    radial-gradient(70% 46% at 50% 46%, rgba(15,27,61,.30) 0%, rgba(15,27,61,0) 76%) !important;
}
.hero h1{ text-shadow:0 2px 18px rgba(10,18,41,.62), 0 1px 3px rgba(10,18,41,.45); }
.hero-sub{ text-shadow:0 1px 10px rgba(10,18,41,.72), 0 1px 2px rgba(10,18,41,.5); }
/* Concentrate what shade remains directly behind the headline block rather than
   spreading it across the wall — keeps the courts bright, keeps the type readable. */
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(15,27,61,.24) 0%, rgba(15,27,61,.05) 32%,
      rgba(15,27,61,.10) 58%, rgba(15,27,61,.38) 100%),
    radial-gradient(56% 30% at 50% 38%, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 72%) !important;
}

/* ============================================================
   HERO: copy up top, actions down low. The buttons sat dead
   centre over the busiest part of the wall; moving them to the
   lower third leaves the headline alone and puts the actions
   where the eye lands last before scrolling.
   ============================================================ */
.hero .hero-inner{ transform:none; margin-bottom:15vh; }
.hero-cta{
  position:absolute; left:50%; bottom:11vh; transform:translateX(-50%);
  z-index:3; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
@media (max-width:700px){
  .hero .hero-inner{ margin-bottom:22vh; }
  .hero-cta{ bottom:9vh; gap:12px; }
}

/* ============================================================
   NAV — outline pills on every link, Contact as the solid one.
   Gives the links a defined edge against moving video and marks
   Contact as the end of the line.
   ============================================================ */
.nav-menu{ gap:9px; }
.nav-menu a{
  padding:9px 17px; border-radius:999px; border:1px solid transparent;
  transition:background-color .25s var(--ease-out), border-color .25s var(--ease-out),
             color .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-menu a::after{ display:none; }           /* the underline fought the pill */
/* transparent-over-video state */
.nav:not(.scrolled) .nav-menu a{
  border-color:rgba(255,255,255,.34); background:rgba(15,27,61,.30);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.nav:not(.scrolled) .nav-menu a:hover{ background:rgba(15,27,61,.55); border-color:rgba(255,255,255,.7); }
/* Contact: the solid one */
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta){
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
  box-shadow:0 8px 22px rgba(30,79,168,.34);
}
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta):hover{
  background:var(--bcm-blue-deep); border-color:var(--bcm-blue-deep);
}
/* scrolled / frosted-white bar state */
.nav.scrolled .nav-menu a{ border-color:var(--bcm-hairline); background:rgba(15,27,61,.045); }
.nav.scrolled .nav-menu a:hover{ background:rgba(30,79,168,.10); border-color:rgba(30,79,168,.35); }
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta){
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
}
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta):hover{ background:var(--bcm-blue-deep); }
@media (max-width:1100px) and (min-width:992px){
  .nav-menu{ gap:6px; }
  .nav-menu a{ padding:8px 13px; font-size:14px; }
}
/* keep headline AND tagline together inside the top cell — the tagline was landing
   just below the seam, splitting the copy block across two panels */
.hero .hero-inner{ margin-bottom:21vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:26vh; } }
.hero .hero-inner{ margin-bottom:28vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:30vh; } }

/* ============================================================
   HERO TYPE — dialled back so the footage stays the subject.
   Headline drops from clamp(40,6.5vw,92) to roughly two-thirds
   that, and the whole block sits lower, over the open stretch of
   fresh coating rather than across the crew and the fence line.
   ============================================================ */
.hero h1{ font-size:clamp(30px, 4.3vw, 58px); line-height:1.06; }
.hero-sub{ font-size:clamp(12.5px, 1.15vw, 15.5px); letter-spacing:.06em;
  margin:12px 0 0; color:rgba(255,255,255,.82); }
.hero .hero-inner{ margin-bottom:11vh; }
@media (max-width:700px){
  .hero h1{ font-size:clamp(27px, 8vw, 38px); }
  .hero-sub{ font-size:12.5px; }
  .hero .hero-inner{ margin-bottom:16vh; }
}
/* sit the (now smaller) block over the open stretch of fresh coating, with the
   tagline finishing just above the seam rather than spilling into the lower panels */
.hero .hero-inner{ margin-bottom:22vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:26vh; } }
/* drop the copy block ~1in lower so it reads as centred in the hero */
.hero .hero-inner{ margin-bottom:0; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:2vh; } }

/* ============================================================
   Give the base-coat shot more of the frame (60/40 instead of
   50/50) and drop the copy roughly half an inch. Together the
   text reads as centred while still sitting wholly inside the
   top panel rather than straddling the seam.
   ============================================================ */
.hw-top{ flex:1 1 60%; }
.hw-bottom{ flex:1 1 40%; }
.hero .hero-inner{ margin-bottom:8vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:8vh; } }
/* the lower cells are shorter now, so pull their framing up slightly to keep the
   court and crew in view rather than the foreground tarmac */
.hw-bottom .hw-cell video{ object-position:center 58%; }

/* ============================================================
   REVERT the 60/40 split back to even halves, and stop dulling
   the footage. The remaining navy wash was flattening the clips;
   the veil now only exists as a soft pool behind the headline
   and a short gradient at the very bottom for the labels. The
   filter puts the colour back where the source footage had it.
   ============================================================ */
.hw-top{ flex:1 1 50%; }
.hw-bottom{ flex:1 1 50%; }
.hw-bottom .hw-cell video{ object-position:center 64%; }
.hero .hero-inner{ margin-bottom:22vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:26vh; } }

.hw-cell video{ filter:saturate(1.16) brightness(1.07) contrast(1.05); }
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(15,27,61,.20) 0%, rgba(15,27,61,0) 18%,
      rgba(15,27,61,0) 82%, rgba(15,27,61,.30) 100%),
    radial-gradient(46% 22% at 50% 40%, rgba(15,27,61,.34) 0%, rgba(15,27,61,0) 74%) !important;
}
/* type carries its own contrast now that the wall is bright */
.hero h1{ text-shadow:0 2px 16px rgba(10,18,41,.78), 0 1px 3px rgba(10,18,41,.6); }
.hero-sub{ text-shadow:0 1px 10px rgba(10,18,41,.85), 0 1px 2px rgba(10,18,41,.7); }

/* ============================================================
   One CTA, sized down, sitting with the copy. "See our work"
   duplicated the Work link in the nav, and a pair of large
   buttons floating mid-wall ate the centre of the frame.
   ============================================================ */
.hero-cta-single{
  display:inline-flex; margin-top:18px;
  padding:12px 26px; font-size:14.5px;
  box-shadow:0 8px 24px rgba(10,18,41,.34);
}
@media (max-width:700px){
  .hero-cta-single{ margin-top:16px; padding:12px 24px; font-size:14px; }
}
/* the block grew by the height of the button, so lift it to keep the whole group
   (headline, tagline, CTA) inside the base-coat panel */
.hero .hero-inner{ margin-bottom:28vh; }
@media (max-width:700px){ .hero .hero-inner{ margin-bottom:32vh; } }

/* ============================================================
   NAV PILLS v2 — white glass instead of navy, with a real
   hover highlight. Over daylight footage the dark pills read as
   heavy smudges; white glass sits on the video like frosted
   signage and inverts to solid white on hover so there's an
   unmistakable "this is a button" response.
   ============================================================ */
.nav-menu a{
  font-weight:600;
  transition:background-color .22s var(--ease-out), border-color .22s var(--ease-out),
             color .22s var(--ease-out), transform .22s var(--ease-out),
             box-shadow .22s var(--ease-out);
}
/* --- transparent over the hero --- */
.nav:not(.scrolled) .nav-menu a{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.62); color:#fff;
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 2px 12px rgba(10,18,41,.18);
}
.nav:not(.scrolled) .nav-menu a:hover,
.nav:not(.scrolled) .nav-menu a:focus-visible{
  background:#fff; border-color:#fff; color:var(--bcm-ink);
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(10,18,41,.34);
}
/* Contact = the filled one, so it still reads as the action */
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta){
  background:#fff; border-color:#fff; color:var(--bcm-ink);
  box-shadow:0 6px 20px rgba(10,18,41,.28);
}
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta):hover{
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(30,79,168,.42);
}
/* --- scrolled: white bar, so the pills invert to navy on hover --- */
.nav.scrolled .nav-menu a{
  background:#fff; border-color:var(--bcm-hairline); color:var(--bcm-ink);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.nav.scrolled .nav-menu a:hover,
.nav.scrolled .nav-menu a:focus-visible{
  background:var(--bcm-ink); border-color:var(--bcm-ink); color:#fff;
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,27,61,.24);
}
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta){
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
}
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta):hover{
  background:var(--bcm-blue-deep); border-color:var(--bcm-blue-deep); color:#fff;
}
/* the in-view section indicator, restyled for pills */
.nav:not(.scrolled) .nav-menu a.active{ background:rgba(255,255,255,.34); border-color:#fff; }
.nav.scrolled .nav-menu a.active{ border-color:var(--bcm-blue); color:var(--bcm-blue); }

/* ============================================================
   NAV PILLS v3 — every link matches the Contact treatment:
   solid white, navy text, and a brand-blue fill on hover.
   ============================================================ */
.nav:not(.scrolled) .nav-menu a,
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta){
  background:#fff; border-color:#fff; color:var(--bcm-ink);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 6px 20px rgba(10,18,41,.26);
}
.nav:not(.scrolled) .nav-menu a:hover,
.nav:not(.scrolled) .nav-menu a:focus-visible,
.nav:not(.scrolled) .nav-menu a[href="#contact"]:not(.menu-cta):hover{
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(30,79,168,.42);
}
/* scrolled: same pills, hairline edge so they separate from the white bar */
.nav.scrolled .nav-menu a,
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta){
  background:#fff; border-color:var(--bcm-hairline); color:var(--bcm-ink); box-shadow:none;
}
.nav.scrolled .nav-menu a:hover,
.nav.scrolled .nav-menu a:focus-visible,
.nav.scrolled .nav-menu a[href="#contact"]:not(.menu-cta):hover{
  background:var(--bcm-blue); border-color:var(--bcm-blue); color:#fff;
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,79,168,.34);
}
.nav:not(.scrolled) .nav-menu a.active{ background:#fff; border-color:var(--bcm-blue); }
.nav.scrolled .nav-menu a.active{ border-color:var(--bcm-blue); color:var(--bcm-blue); }

/* ============================================================
   HERO LAYOUT — copy hugs the bottom of the base-coat panel and
   the CTA anchors to the opposite corner. The crew works across
   the upper two-thirds of that shot for the whole loop, so the
   only reliably empty ground is the strip just above the seam.
   Absolute positioning (not flex centring) so the copy tracks
   the seam exactly regardless of viewport height.
   ============================================================ */
.hero .hero-inner{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:51%; margin-bottom:0; width:100%; max-width:1000px;
  padding:0 var(--gutter);
}
.hero-cta-single{
  position:absolute; z-index:3; margin-top:0;
  right:clamp(20px, 3.4vw, 46px); bottom:clamp(22px, 4vh, 40px);
}
@media (max-width:700px){
  .hero .hero-inner{ bottom:52%; }
  .hero-cta-single{ right:16px; bottom:74px; }   /* clear of the scroll cue */
}

/* ============================================================
   HERO BAND — the copy gets its own strip between the top clip
   and the lower pair. Nothing is overlaid, so no court surface
   is ever covered; the band reads as a deliberate divider.
   And because no type sits on video any more, the scrim can go
   entirely — the footage runs at full brightness.
   ============================================================ */
.hero-band{
  position:relative; z-index:2; flex:0 0 auto;
  background:var(--bcm-ink);
  display:flex; align-items:center; justify-content:center;
  padding:26px clamp(20px,4vw,56px);
  text-align:center;
}
.hero-band .hero-inner{
  position:static; transform:none; left:auto; bottom:auto;
  margin:0 auto; padding:0; width:auto; max-width:900px;
}
.hero-band .hero-cta-single{
  position:absolute; right:clamp(20px,3.4vw,46px); top:50%;
  transform:translateY(-50%); margin:0;
}
/* compact type so the band stays a strip, not a chapter */
.hero-band h1{ font-size:clamp(26px, 3.4vw, 46px); line-height:1.05; text-shadow:none; }
.hero-band .hero-sub{ margin:9px 0 0; color:rgba(255,255,255,.72); text-shadow:none; }
/* no text over footage now, so drop the veil completely */
.hero-media::after{ background:none !important; }

@media (max-width:860px){
  .hero-band{ flex-direction:column; gap:14px; padding:22px 20px 24px; }
  .hero-band .hero-cta-single{ position:static; transform:none; right:auto; top:auto; }
}

/* ============================================================
   HERO COPY — back over the full-bleed wall, sitting a little
   lower, with a soft focus pad behind it instead of a hard card
   or a blanket scrim. The pad blurs and gently darkens only the
   footage directly behind the words, and its edges are masked
   to nothing, so the court work stays visible right up to the
   type with no visible box.
   ============================================================ */
.hero-band{ display:none; }                    /* band retired */
.hero-media::after{ background:none !important; }   /* no blanket veil */

.hero .hero-inner{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:44%; margin:0; padding:0 var(--gutter);
  width:100%; max-width:1000px; z-index:2;
}
.hero .hero-inner::before{
  content:""; position:absolute; z-index:-1;
  top:-42px; bottom:-34px; left:50%; width:min(1180px, 108%);
  transform:translateX(-50%);
  -webkit-backdrop-filter:blur(16px) saturate(1.05) brightness(.88);
  backdrop-filter:blur(16px) saturate(1.05) brightness(.88);
  background:rgba(15,27,61,.16);
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 38%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 38%, transparent 78%);
  pointer-events:none;
}
.hero h1{ font-size:clamp(30px, 4.3vw, 58px); text-shadow:0 2px 14px rgba(10,18,41,.55); }
.hero-sub{ color:rgba(255,255,255,.86); text-shadow:0 1px 8px rgba(10,18,41,.6); }

.hero-cta-single{
  position:absolute; z-index:3; margin:0;
  right:clamp(20px, 3.4vw, 46px); bottom:clamp(22px, 4vh, 40px);
}
@media (max-width:860px){
  .hero .hero-inner{ bottom:46%; }
  .hero .hero-inner::before{ top:-30px; bottom:-26px; width:118%; }
  .hero-cta-single{ right:16px; bottom:74px; }
}

/* ============================================================================
   HERO TEXT TREATMENTS — three research-led variants, switched with ?hero=
   Studied 13 premium sites (Arc'teryx, Belmond, Pella, Olson Kundig, Kith,
   Heath, BIG, Allbirds, Soho House, Peloton, Aman, Marvin, Rockwell). The
   dominant pattern is: darken ONE EDGE of the frame with a directional
   gradient and sit the type in it, with a TIGHT 1-3px shadow. Nobody blurs a
   pad behind a headline, and nobody uses a big soft glow.
   ============================================================================ */
/* neutralise the previous blur-pad treatment for a/b/c */
.hv-a .hero .hero-inner::before,
.hv-b .hero .hero-inner::before,
.hv-c .hero .hero-inner::before{ display:none; }

/* ---------- A · ARC'TERYX: bottom-edge gradient, type bottom-left ----------
   The scrim is transparent across the top two-thirds, so the court and crew
   are untouched; it only deepens the foreground where the type sits. */
.hv-a .hero-media::after{
  background:linear-gradient(180deg, transparent 42%, rgba(8,14,32,.30) 66%, rgba(8,14,32,.80) 100%) !important;
}
.hv-a .hero .hero-inner{
  left:0; transform:none; bottom:9%;
  max-width:none; padding:0 clamp(24px,5vw,72px); text-align:left;
}
.hv-a .hero h1{
  font-size:clamp(30px,4.1vw,54px); line-height:1.04;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}
.hv-a .hero-sub{
  margin:12px 0 0; color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.hv-a .hero-sub::before{
  content:""; display:block; width:44px; height:2px;
  background:rgba(255,255,255,.85); margin:0 0 14px;
}

/* ---------- B · PELLA: no overlay at all, tight shadow only ----------
   Maximum footage visibility — nothing is darkened anywhere. Legibility comes
   purely from a crisp, small shadow the way Pella and BIG do it. */
.hv-b .hero-media::after{ background:none !important; }
.hv-b .hero .hero-inner{ bottom:46%; text-align:center; }
.hv-b .hero h1{
  font-size:clamp(30px,4.3vw,56px);
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.55);
}
.hv-b .hero-sub{
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.6);
}

/* ---------- C · TOP BAND: type over the house and sky, court untouched ----------
   Follows the rule literally — the scrim and the type both live above the
   court line, so not a single pixel of the surface is covered. */
.hv-c .hero-media::after{
  background:linear-gradient(180deg, rgba(8,14,32,.78) 0%, rgba(8,14,32,.42) 46%, transparent 78%) !important;
}
.hv-c .hero .hero-inner{
  bottom:auto; top:clamp(96px,13vh,150px); text-align:center;
}
.hv-c .hero h1{
  font-size:clamp(28px,3.7vw,48px);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.hv-c .hero-sub{ color:rgba(255,255,255,.88); text-shadow:0 1px 3px rgba(0,0,0,.55); }

/* Nav is solid from first paint (no transparent-over-video state), so give it a
   defined edge and make sure it never renders in the inverted-white treatment. */
.nav{ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(15,27,61,.08), var(--bcm-shadow-sm);
  padding-top:12px; padding-bottom:12px; }
.nav .nav-logo img{ filter:none !important; height:40px; }

/* ============================================================================
   TAGLINE TREATMENTS — ?tag=a|b|c
   The sub-line was the weakest element: 12.5-15.5px at weight 500 is simply too
   small to hold over moving daylight footage, and none of the 13 premium sites
   studied place small descriptive copy BELOW a headline on video.
   ============================================================================ */
.hero .hero-inner{ display:flex; flex-direction:column; }

/* ---------- A · EYEBROW above the headline (the premium-site pattern) ----------
   Uppercase with wide tracking: no descenders, distinct letterforms, so it stays
   legible at small sizes over busy video in a way lowercase never does. Reads as
   category first, promise second. */
.tg-a .hero-sub{
  order:-1; margin:0 0 16px;
  font-size:clamp(11.5px,1vw,13px); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.tg-a .hero-sub::before{ display:none; }
.hv-a.tg-a .hero-sub::before{
  display:block; content:""; width:38px; height:2px;
  background:rgba(255,255,255,.9); margin:0 0 14px;
}

/* ---------- B · Same position, properly sized ----------
   Keeps the original order but fixes the actual defect: bigger, heavier, full
   white, tighter tracking. */
.tg-b .hero-sub{
  font-size:clamp(15.5px,1.5vw,19px); font-weight:600;
  letter-spacing:.01em; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.5);
  margin-top:14px;
}

/* ---------- C · No tagline at all ----------
   Headline plus CTA only. The three services are already in the nav and own a
   full section below, so this line may not be earning its place. */
.tg-c .hero-sub{ display:none; }



/* ---------- C refined ----------
   The wall is three separate clips, so a bottom-edge scrim (the pattern the
   research sites use for ONE video) would darken an entire time-lapse. Here the
   scrim is confined to the top strip only — sky, rooflines and fence — and the
   type is sized to sit inside that same band. Court surface and both lower
   clips are untouched. */
.hv-c .hero-media::after{
  background:linear-gradient(180deg, rgba(8,14,32,.70) 0%, rgba(8,14,32,.40) 34%, transparent 56%) !important;
}
.hv-c .hero .hero-inner{ top:clamp(74px,9.5vh,104px); }
.hv-c .hero h1{ font-size:clamp(25px,3.1vw,40px); line-height:1.06; }
.hv-c.tg-a .hero-sub{ margin-bottom:11px; }
@media (max-width:700px){
  .hv-c .hero .hero-inner{ top:82px; }
  .hv-c .hero h1{ font-size:clamp(23px,6.4vw,32px); }
}

/* ============================================================================
   HERO — DEFAULT: headline only, centred on the seam.
   No tagline, no band, no blur pad. Contrast comes from a tight shadow plus a
   soft radial that darkens only the centre where the words sit, so all three
   clips stay visible and ungraded everywhere else.
   ============================================================================ */
.hero .hero-inner{
  position:absolute; left:50%; top:50%; bottom:auto;
  transform:translate(-50%,-50%);
  width:100%; max-width:1000px; padding:0 var(--gutter);
  text-align:center; margin:0; z-index:2;
}
.hero .hero-inner::before{ display:none; }        /* retire the blur pad */
.hero .hero-sub{ display:none; }                  /* tagline removed from the hero */
.hero h1{
  font-size:clamp(30px, 4.3vw, 58px); line-height:1.06;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.45);
}
.hero-media::after{
  background:radial-gradient(52% 26% at 50% 50%, rgba(8,14,32,.42) 0%,
    rgba(8,14,32,.18) 52%, transparent 76%) !important;
}
@media (max-width:700px){
  .hero h1{ font-size:clamp(27px, 7.6vw, 38px); }
  .hero-media::after{
    background:radial-gradient(72% 22% at 50% 50%, rgba(8,14,32,.46) 0%,
      rgba(8,14,32,.20) 54%, transparent 78%) !important;
  }
}

/* Logo scaled up so "BELLAMY COURT MANAGEMENT" is legible at a glance rather than
   just the mark. The nav grows with it; padding trimmed slightly to compensate. */
.nav .nav-logo img{ height:54px !important; }
.nav{ padding-top:10px; padding-bottom:10px; }
@media (max-width:700px){ .nav .nav-logo img{ height:44px !important; } }

/* Trim the header's vertical padding so the bar is ~12% shorter and hands that
   height back to the time-lapse. Logo size is untouched — only the space around
   it shrinks, which is the only lever that doesn't cost logo legibility. */
.nav{ padding-top:5px; padding-bottom:5px; }
@media (max-width:700px){ .nav{ padding-top:6px; padding-bottom:6px; } }
/* the logo <img> was inline, so the line-box descender was padding the bar with
   ~10px of invisible space — block display removes it at no visual cost */
.nav-logo{ display:flex; align-items:center; line-height:0; }
.nav-logo img{ display:block; }
/* .nav.scrolled (always on now) outranks a bare .nav selector, so the trim has to
   match that specificity or the 12px padding wins */
.nav, .nav.scrolled{ padding-top:5px; padding-bottom:5px; }
@media (max-width:700px){ .nav, .nav.scrolled{ padding-top:6px; padding-bottom:6px; } }

/* ============================================================================
   MOBILE HERO — the three-panel wall is a desktop composition. At 375px the two
   lower cells are ~187px wide each: unreadable slivers, and they don't even
   stream (stills only) on phones. So below 700px the hero becomes a single
   full-bleed base-coat clip, which is also the shot that reads best small.
   ============================================================================ */
@media (max-width:700px){
  /* all three clips stay on phones (Lucas's call); the wall keeps its 50/50 split */
  .hero .hero-inner{ top:50%; }
}
/* Centre the mobile hero CTA without relying on transform (a later .btn rule was
   resetting it to identity, leaving the button pinned left). */
@media (max-width:700px){
  .hero-cta-single{
    left:0; right:0; margin:0 auto; width:max-content;
    transform:none; bottom:78px;
  }
}

/* ============================================================================
   MOBILE FIXES from real-device review
   ============================================================================ */
/* 1. The hero CTA sat on top of the footage on phones. The quote action is already
      in the opened menu and in the floating button that appears on scroll, so the
      hero itself stays clean. */
@media (max-width:700px){
  .hero-cta-single{ display:none; }
}

/* 2. "Lincoln Bellamy" wrapped to two lines while "Lucas Bellamy" fit on one,
      throwing the two cards out of alignment. Size the names to fit a single line
      in the narrow two-up columns. */
@media (max-width:860px){
  .founder h3{ font-size:clamp(15px, 4.3vw, 20px); white-space:nowrap; letter-spacing:-.01em; }
  .founder .role{ font-size:11.5px; letter-spacing:.10em; }
}

/* 3. The full-screen menu was using the DESKTOP pill gap (9px), so the options
      stacked almost touching. Restore generous spacing in the overlay only. */
@media (max-width:991px){
  .nav-menu{ gap:18px !important; }
  .nav-menu a{ padding:13px 30px; min-width:200px; text-align:center; }
  .menu-cta-item{ margin-top:var(--s-3); }
}
/* The nav links were inline elements, so their vertical padding overflowed the line
   box instead of occupying layout height — in the stacked mobile menu that made the
   pills sit on top of each other, and it also made min-width a no-op (both ignored
   on inline boxes). inline-block gives the pill a real box. */
.nav-menu a{ display:inline-block; }
@media (max-width:991px){
  .nav-menu li{ display:flex; justify-content:center; }
  .nav-menu a{ display:block; min-width:210px; }
}

/* Frame-sequence fallback for iOS Low Power Mode, where video autoplay is blocked at
   the OS level. Animated images are not restricted, so the cell keeps moving. */
.hw-frames{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; display:block;
}
.hw-bottom .hw-cell .hw-frames{ object-position:center 64%; }
.hw-cell.frames-on video{ opacity:0 !important; }

/* ============================================================================
   DEEP MOBILE AUDIT FIXES
   ============================================================================ */
/* 1. LANDSCAPE MENU WAS UNREACHABLE. Six 61px items plus gaps is ~477px of content;
      in a 390px-tall landscape window the first item sat above the top edge and the
      last below the bottom, with overflow:visible so neither could be scrolled to.
      `safe center` stops flexbox from centring content out of reach, and the menu
      now scrolls. Short viewports also get a more compact set. */
@media (max-width:991px){
  .nav-menu{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    justify-content:safe center;
    padding:84px 20px 32px;
  }
}
@media (max-width:991px) and (max-height:560px){
  .nav-menu{ gap:10px !important; padding-top:72px; }
  .nav-menu a{ padding:10px 26px; font-size:17px; min-width:190px; }
  .menu-cta-item{ margin-top:8px; }
}

/* 2. TAP TARGETS below the 44px guideline — all in the footer, plus the two email
      links and the hero scroll arrow. Padding gives them a real hit area without
      changing how they look. */
.footer-nav a, .footer a[href^="mailto:"], .creds a[href^="mailto:"],
#contact a[href^="mailto:"]{
  display:inline-block; padding:12px 6px; margin:-12px -6px;
}
.footer-logo{ display:inline-block; padding:8px 0; }
/* the scroll cue was a 14x14 hit area; keep the mark the same size, enlarge the target */
.scroll-cue{ padding:16px 22px; margin:-16px -22px; }

/* 3. "CO-FOUNDER" was 11.5px — nudge to the 12px floor for small caps. */
.founder .role{ font-size:12px; }

/* Footer: name the service area outright — the copyright line was the only
   place the site said where it works. */
.footer-area{ display:block; margin-top:8px; font-size:13px;
  color:rgba(255,255,255,.72); letter-spacing:.01em; }

/* ============================================================================
   HERO STRIP — "Building · Resurfacing · Restoration" along the bottom edge.
   The words used to sit under the headline (.hero-sub) where they crowded it,
   so they were hidden. Here they answer "what do you actually do" on the first
   screen without touching the headline or covering court surface.
   Seated clear of the scroll cue, whose tap target reaches 72px off the bottom.
   ============================================================================ */
.hero-strip{
  /* Paired with the headline instead of pinned to the hero's lower edge — at
     ~190px off the bottom it read as a detached caption rather than part of the
     title. It now sits inside .hero-inner directly under the h1, so headline and
     line move together at every viewport height. This position is only viable
     because of the shade below it: on bare footage this band is one of the
     brightest parts of the frame. */
  position:relative; z-index:3;
  margin:clamp(13px, 2vh, 22px) auto 0; text-align:center;
  /* Weight 700 is the ceiling the Inter variable file actually carries
     (declared 400 700) — anything higher clamps there or gets faked. Size is
     unchanged; the weight and a tighter dark edge do the work instead. */
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(10px, 1vw, 12px);
  letter-spacing:.26em; text-transform:uppercase;
  color:#fff;
  /* Inter stops at 700, and 600->700 only gained 0.8px across the whole line.
     Thickening the strokes themselves adds the weight the font can't, with the
     point size untouched. 0.3px keeps the counters in B/R/G open at 10px. */
  -webkit-text-stroke:0.3px #fff;
  /* The hard near-black edge made the letters stand out by fighting the frame.
     Softer, wider shadows instead — the lift now comes from the shade below,
     not from a crisp outline. */
  text-shadow:
    0 1px 3px rgba(8,14,34,.55),
    0 2px 12px rgba(8,14,34,.5),
    0 0 26px rgba(8,14,34,.42);
}
.hero-strip span{ margin:0 .5em; opacity:.5; }

/* A soft pool of shade under the words only — roughly 620x64, fading to nothing
   at its edges, so it reads as depth in the footage rather than a bar laid over
   it. Confined to the line: it covers about 3% of the hero and never touches the
   playing surface in the lower panels. z-index:-1 keeps it behind the text but
   inside the strip's own stacking context, so the video is untouched. */
.hero-strip::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  /* Deeper than the first pass: paired with the headline the line sits on the
     pale fresh coating, the brightest band in the frame (2.2:1 bare). The
     falloff is unchanged so it still reads as shade, not a bar. */
  width:min(660px, 96vw); height:70px;
  background:radial-gradient(ellipse 52% 50% at 50% 50%,
    rgba(8,14,34,.68) 0%,
    rgba(8,14,34,.48) 42%,
    rgba(8,14,34,.2) 70%,
    rgba(8,14,34,0) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero-strip{ opacity:0; animation:heroFade .5s .45s var(--ease-out) forwards; }
}
/* At 360px the line runs 318px wide — fits, but wraps on a 320px phone.
   Tighten the tracking slightly rather than let it break to two lines. */
@media (max-width:400px){
  .hero-strip{ letter-spacing:.18em; }
}