/* BrightHire PH: site styles.
   Tokens follow DESIGN.md. Class names use a bh- prefix so they don't collide with WordPress core or plugin styles. */

/* ---------- Fonts ---------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600.woff2) format("woff2"); }
/* Inter: body copy in the Why BrightHire section. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --bh-canopy-teal: #0C5468;
  --bh-sunlit-gold: #FBC22D;
  --bh-sunlit-gold-deep: #E9B01B;
  --bh-deep-bark: #1C2B33;
  --bh-river-slate: #5A6A70;
  --bh-paper: #FFFFFF;
  --bh-warm-mist: #F4F4F2;
  --bh-hairline: #E3E8EA;
  --bh-field-line: #C9D6DA;
  --bh-field-line-hover: #8FA3AA;
  --bh-draft-dash: #A9B6BB;
  --bh-paper-edge: #E7E7E3;

  --bh-font: Poppins, system-ui, sans-serif;
  --bh-font-text: Inter, system-ui, sans-serif;
  --bh-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bh-mobile-bar-h: 0px;

  /* Sticky header height; main.js re-measures it. */
  --bh-header-h: 77px;
  --bh-screen: calc(100vh - var(--bh-header-h));

  /* Fit scale: every section is one screen tall, so on desktop type and vertical spacing shrink with the
     screen height. Both act like "1px" in calc(N * var(--bh-fit)): 1px on tall screens, less on short ones.
     --bh-fit (type) bottoms out at 0.8px so copy stays readable; --bh-space (gaps, padding) gives way first. */
  --bh-fit: 1px;
  --bh-space: 1px;
  --bh-section-space: clamp(80px, 10vw, 140px);

  /* Hero diagonal seam: x-position of the cut at the top and bottom edge, and the white gap width. */
  --bh-seam-top: 57%;
  --bh-seam-bottom: 45%;
  --bh-seam-gap: 10px;
}
@supports (height: 100svh) {
  :root { --bh-screen: calc(100svh - var(--bh-header-h)); }
}
/* Below 900px sections stack into columns that can't fit one screen anyway, so the scale stays at 1. */
@media (min-width: 900px) {
  :root {
    --bh-fit: clamp(0.8px, calc(var(--bh-screen) / 860), 1px);
    --bh-space: clamp(0.3px, calc((var(--bh-screen) - 480px) / 520), 1px);
    --bh-section-space: calc(96 * var(--bh-space));
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--bh-draft-dash) var(--bh-warm-mist); }
body {
  margin: 0;
  background: var(--bh-paper);
  color: var(--bh-deep-bark);
  font-family: var(--bh-font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--bh-canopy-teal); text-decoration: none; }
a:hover { color: var(--bh-deep-bark); }
input, textarea, select, button { font-family: inherit; }
::placeholder { color: var(--bh-river-slate); opacity: 1; }
::selection { background: var(--bh-sunlit-gold); color: var(--bh-deep-bark); }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--bh-sunlit-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bh-deep-bark);
}
[hidden] { display: none !important; }

.bh-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--bh-deep-bark);
  color: #fff;
  border-radius: 4px;
}
.bh-skip-link:focus { top: 16px; color: #fff; }

/* ---------- Layout helpers ---------- */
.bh-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.bh-section { padding-top: var(--bh-section-space); padding-bottom: var(--bh-section-space); }
.bh-band--mist { background: var(--bh-warm-mist); }
section[id] { scroll-margin-top: var(--bh-header-h); }

/* Every section fills at least one screen below the header, with its content centred in it.
   min-height rather than height: if content still runs long (narrow columns, an open accordion row) the section grows instead of clipping.
   Exception: the "How an engagement runs" band is a short interlude, so it keeps its natural height. */
main section:where(:not(#how-we-work)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--bh-screen);
}
main section > .bh-container { flex: none; }

.bh-split-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 80px;
  align-items: end;
}

/* ---------- Type ---------- */
.bh-h2 {
  margin: 0;
  font-size: clamp(calc(32 * var(--bh-fit)), 4vw, calc(48 * var(--bh-fit)));
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.bh-intro {
  margin: 0;
  max-width: 440px;
  font-size: calc(16 * var(--bh-fit));
  line-height: 1.85;
  color: var(--bh-river-slate);
  text-wrap: pretty;
}
.bh-intro--wide { max-width: 480px; }
.bh-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bh-canopy-teal);
}
.bh-label--slate { color: var(--bh-river-slate); }

/* Section eyebrow: gold rule + spaced caps above a section heading. */
.bh-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 calc(21 * var(--bh-space));
  font-family: var(--bh-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bh-canopy-teal);
}
.bh-eyebrow::before { content: ""; display: block; width: 28px; height: 2px; background: var(--bh-sunlit-gold); }

/* Draft tag: the dashed placeholder for every fact BrightHire hasn't confirmed yet. */
.bh-draft {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border: 1px dashed var(--bh-draft-dash);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bh-river-slate);
}
.bh-draft--spaced { margin-top: 16px; }
.bh-draft--on-dark { border-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.86); }

/* ---------- Buttons ---------- */
.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bh-btn svg { flex: none; }
.bh-btn--primary { background: var(--bh-sunlit-gold); color: var(--bh-deep-bark); }
.bh-btn--primary:hover { background: var(--bh-sunlit-gold-deep); color: var(--bh-deep-bark); }
.bh-btn--solid { height: 52px; padding: 0 24px; gap: 10px; background: var(--bh-canopy-teal); color: #fff; font-size: 14px; }
.bh-btn--solid:hover { background: var(--bh-deep-bark); color: #fff; }
.bh-btn--outline { border-color: var(--bh-canopy-teal); background: transparent; color: var(--bh-canopy-teal); }
.bh-btn--outline:hover { background: var(--bh-canopy-teal); color: #fff; }
.bh-btn--outline-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.bh-btn--outline-light:hover { background: #fff; color: var(--bh-canopy-teal); }
.bh-btn--sm { height: 44px; padding: 0 18px; gap: 10px; font-size: 13px; }
.bh-btn--header { height: auto; padding: 14px 22px; }

.bh-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 600;
  color: var(--bh-canopy-teal);
  transition: color 0.2s;
}
.bh-link-cta:hover { color: var(--bh-deep-bark); }

/* Restrained text link with a gold underline and a diagonal arrow, matching the Why BrightHire link. */
.bh-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bh-canopy-teal);
  transition: color 0.2s;
}
.bh-arrow-link span { padding-bottom: 2px; border-bottom: 2px solid var(--bh-sunlit-gold-deep); }
.bh-arrow-link svg { flex: none; margin-bottom: 4px; transition: transform 0.2s var(--bh-ease-out); }
.bh-arrow-link:hover { color: var(--bh-deep-bark); }
.bh-arrow-link:hover svg { transform: translate(2px, -2px); }

/* ---------- Header ---------- */
.bh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bh-hairline);
}
.bh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.bh-header__logo { display: flex; align-items: center; }
.bh-header__logo img { display: block; width: auto; height: 48px; }

.bh-nav { display: flex; align-items: center; gap: 36px; }
.bh-nav__list { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.bh-nav__list a { display: block; padding: 12px 0; font-size: 14px; color: var(--bh-deep-bark); }
.bh-nav__list a:hover { color: var(--bh-canopy-teal); }

.bh-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bh-field-line);
  border-radius: 4px;
  background: #fff;
  color: var(--bh-deep-bark);
  cursor: pointer;
}
.bh-menu-toggle__close { display: none; }
.bh-menu-toggle[aria-expanded="true"] .bh-menu-toggle__open { display: none; }
.bh-menu-toggle[aria-expanded="true"] .bh-menu-toggle__close { display: block; }

.bh-mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--bh-hairline);
}
.bh-mobile-nav a {
  padding: 16px 0;
  border-bottom: 1px solid var(--bh-hairline);
  font-size: 18px;
  font-weight: 500;
  color: var(--bh-deep-bark);
}

/* ---------- Hero (split photos) ---------- */
.bh-stage { position: relative; }

.bh-hero {
  position: relative;
  height: var(--bh-screen);
  min-height: 560px;
  overflow: hidden;
  background: var(--bh-paper);
}
.bh-hero__panel { position: absolute; inset: 0; will-change: transform; }
.bh-hero__panel--left {
  clip-path: polygon(0 0, calc(var(--bh-seam-top) - var(--bh-seam-gap) / 2) 0, calc(var(--bh-seam-bottom) - var(--bh-seam-gap) / 2) 100%, 0 100%);
}
.bh-hero__panel--right {
  clip-path: polygon(calc(var(--bh-seam-top) + var(--bh-seam-gap) / 2) 0, 100% 0, 100% 100%, calc(var(--bh-seam-bottom) + var(--bh-seam-gap) / 2) 100%);
}

/* Each photo only fills the area its panel shows, so object-fit crops it sensibly. */
.bh-hero__media { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.bh-hero__panel--left .bh-hero__media { left: 0; right: calc(100% - var(--bh-seam-top)); }
.bh-hero__panel--right .bh-hero__media { left: var(--bh-seam-bottom); right: 0; }
.bh-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh-hero__panel--left img { object-position: 30% 75%; }
.bh-hero__panel--right img { object-position: 40% 30%; }

/* Bark-tinted shade so the white copy reads over the bright sky. */
.bh-hero__media::after { content: ""; position: absolute; inset: 0; }
.bh-hero__panel--left .bh-hero__media::after {
  background:
    linear-gradient(to top, rgba(18, 32, 38, 0.86) 0%, rgba(18, 32, 38, 0.5) 45%, rgba(18, 32, 38, 0.1) 100%),
    linear-gradient(to right, rgba(18, 32, 38, 0.35) 0%, rgba(18, 32, 38, 0) 70%);
}
.bh-hero__panel--right .bh-hero__media::after {
  background: linear-gradient(to top, rgba(18, 32, 38, 0.35) 0%, rgba(18, 32, 38, 0) 40%);
}

.bh-hero__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px clamp(48px, 9vh, 96px);
  color: #fff;
  pointer-events: none;
}
.bh-hero__copy-inner { max-width: min(640px, calc(var(--bh-seam-bottom) + 8vw)); }

/* The one allowed kicker (see DESIGN.md, No-Kicker Rule). */
.bh-hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 calc(28 * var(--bh-space));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bh-hero__label::before { content: ""; display: block; width: 34px; height: 2px; background: var(--bh-sunlit-gold); }
.bh-hero__title {
  margin: 0;
  font-size: clamp(40px, 6vw, calc(84 * var(--bh-fit)));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.bh-hero__lead {
  margin: calc(28 * var(--bh-space)) 0 0;
  max-width: 520px;
  font-size: calc(17 * var(--bh-fit));
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}
.bh-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: calc(36 * var(--bh-space));
  pointer-events: auto;
}

/* ---------- Why BrightHire ---------- */
/* In split mode this whole section sits behind the hero, so its first screen is what the split reveals.
   Colours and Inter body type are local to this section, matched to the approved why.png mockup. */
.bh-why {
  --bh-why-bg: #F7F8F9;
  --bh-why-ink: #0B2A35;
  --bh-why-text: #4A5A63;
  --bh-why-muted: #8798A1;
  --bh-why-rule: #C7D1D6;
  --bh-why-gold: #F2B523;

  padding: var(--bh-section-space) 0;
  background: var(--bh-why-bg);
  color: var(--bh-why-text);
  font-family: var(--bh-font-text);
}

.bh-why__head {
  display: grid;
  grid-template-columns: minmax(0, 555px) minmax(0, 452px);
  justify-content: space-between;
  column-gap: 48px;
  margin-bottom: calc(48 * var(--bh-space));
}
.bh-why__label { grid-column: 1 / -1; }
.bh-why .bh-eyebrow::before { background: var(--bh-why-gold); }
.bh-why__title {
  margin: 0;
  font-family: var(--bh-font);
  font-size: clamp(calc(34 * var(--bh-fit)), 3.4vw, calc(48 * var(--bh-fit)));
  line-height: 1.135;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bh-why-ink);
}
.bh-why__aside { padding-top: 12px; }
.bh-why__intro {
  margin: 0;
  font-size: calc(17 * var(--bh-fit));
  line-height: 1.7;
  color: var(--bh-why-text);
  text-wrap: pretty;
}
.bh-why__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(36 * var(--bh-space));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bh-canopy-teal);
  transition: color 0.2s;
}
.bh-why__link span { padding-bottom: 2px; border-bottom: 2px solid var(--bh-why-gold); }
.bh-why__link svg { flex: none; margin-bottom: 4px; transition: transform 0.2s var(--bh-ease-out); }
.bh-why__link:hover { color: var(--bh-why-ink); }
.bh-why__link:hover svg { transform: translateX(3px); }

.bh-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 56px;
}
.bh-pillar { padding-top: calc(28 * var(--bh-space)); border-top: 1px solid var(--bh-why-rule); }
.bh-pillar__num {
  display: block;
  font-family: var(--bh-font);
  font-size: calc(40 * var(--bh-fit));
  font-weight: 300;
  line-height: 1;
  color: var(--bh-why-muted);
}
.bh-pillar__title {
  margin: calc(24 * var(--bh-space)) 0 0;
  font-family: var(--bh-font);
  font-size: calc(23 * var(--bh-fit));
  line-height: 1.25;
  font-weight: 600;
  color: var(--bh-why-ink);
  text-wrap: balance;
}
.bh-pillar__short { margin: calc(10 * var(--bh-space)) 0 0; font-size: calc(15 * var(--bh-fit)); line-height: 1.6; color: var(--bh-canopy-teal); }
.bh-pillar__points { display: flex; flex-direction: column; gap: calc(20 * var(--bh-space)); margin: calc(28 * var(--bh-space)) 0 0; padding: 0; list-style: none; }
.bh-pillar__points strong { display: block; font-size: calc(16 * var(--bh-fit)); line-height: 1.5; font-weight: 600; color: var(--bh-why-ink); }
.bh-pillar__points span {
  display: block;
  margin-top: 3px;
  font-size: calc(16 * var(--bh-fit));
  line-height: 1.6;
  color: var(--bh-why-text);
}

.bh-why__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-top: calc(72 * var(--bh-space));
  padding-top: calc(36 * var(--bh-space));
  border-top: 1px solid var(--bh-why-rule);
}
.bh-why__cta-title {
  margin: 0;
  font-family: var(--bh-font);
  font-size: calc(22 * var(--bh-fit));
  line-height: 1.25;
  font-weight: 600;
  color: var(--bh-why-ink);
}
.bh-why__cta-text { margin: calc(10 * var(--bh-space)) 0 0; font-size: calc(15 * var(--bh-fit)); line-height: 1.6; color: var(--bh-why-text); }
.bh-why__cta-btn { height: 48px; padding: 0 27px; font-size: 15px; }

/* ---------- Process ---------- */
.bh-process { padding-top: var(--bh-section-space); padding-bottom: var(--bh-section-space); }
.bh-process__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.bh-process__title { margin: 0; font-size: clamp(calc(28 * var(--bh-fit)), 3.2vw, calc(40 * var(--bh-fit))); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }

.bh-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 36px 32px;
  margin: calc(56 * var(--bh-space)) 0 0;
  padding: 0;
  list-style: none;
}
.bh-step { position: relative; padding-top: 22px; border-top: 1px solid var(--bh-field-line); }
.bh-step::before { content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 6px; background: var(--bh-sunlit-gold); }
.bh-step__num { display: block; font-size: 12px; font-weight: 600; color: var(--bh-canopy-teal); }
.bh-step__title { display: block; margin-top: 12px; font-size: calc(18 * var(--bh-fit)); font-weight: 500; }
.bh-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--bh-river-slate); }

/* Teal band: light type on Canopy Teal, gold for the accents. */
.bh-band--teal { background: var(--bh-canopy-teal); color: #fff; }
.bh-band--teal .bh-link-cta { color: #fff; border-bottom-color: var(--bh-sunlit-gold); }
.bh-band--teal .bh-link-cta:hover { color: var(--bh-sunlit-gold); }
.bh-band--teal .bh-step { border-top-color: rgba(255, 255, 255, 0.3); }
.bh-band--teal .bh-step__num { color: var(--bh-sunlit-gold); }
.bh-band--teal .bh-step p { color: rgba(255, 255, 255, 0.82); }

/* ---------- Services accordion ---------- */
.bh-accordion { margin-top: calc(40 * var(--bh-space)); border-top: 1px solid var(--bh-deep-bark); }
.bh-accordion__item { border-bottom: 1px solid var(--bh-hairline); }
.bh-accordion__heading { margin: 0; font: inherit; }
.bh-accordion__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: calc(6px + calc(16 * var(--bh-space))) 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s;
}
.bh-accordion__toggle:hover { background: var(--bh-warm-mist); }
.bh-accordion__label { display: flex; flex-direction: column; gap: 6px; }
/* Desktop: summary beside the title rather than under it, so all six rows fit one screen. */
@media (min-width: 900px) {
  .bh-accordion__label { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: baseline; gap: 24px; }
}
.bh-accordion__title {
  font-size: clamp(calc(19 * var(--bh-fit)), 2vw, calc(24 * var(--bh-fit)));
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--bh-deep-bark);
  transition: color 0.2s;
}
.bh-accordion__summary {
  font-family: var(--bh-font-text);
  font-size: calc(15 * var(--bh-fit));
  line-height: 1.5;
  color: var(--bh-river-slate);
}
.bh-accordion__icon {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bh-field-line);
  border-radius: 50%;
  color: var(--bh-canopy-teal);
  transition: transform 0.35s var(--bh-ease-out);
}
.bh-accordion__toggle[aria-expanded="true"] .bh-accordion__title { color: var(--bh-canopy-teal); }
.bh-accordion__toggle[aria-expanded="true"] .bh-accordion__icon { transform: rotate(45deg); }

/* Expanded row: "Ideal for" and "How we support you" side by side, the CTA at the right (own line below 900px). */
.bh-accordion__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(28 * var(--bh-space)) 64px;
  padding: 4px 8px calc(12px + calc(24 * var(--bh-space)));
  font-family: var(--bh-font-text);
}
.bh-accordion__panel p:not(.bh-label) { margin: 10px 0 0; max-width: 46ch; font-size: calc(15 * var(--bh-fit)); line-height: 1.7; color: var(--bh-river-slate); }
.bh-accordion__cta { grid-column: 1 / -1; justify-self: end; }
.bh-accordion__cta .bh-arrow-link { font-family: var(--bh-font); }
/* Desktop: the CTA joins the same line, bottom-aligned, so an open row stays within one screen. */
@media (min-width: 900px) {
  .bh-accordion__panel { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; column-gap: 48px; }
  .bh-accordion__cta { grid-column: auto; align-self: end; }
}
@media (max-width: 719.98px) {
  .bh-accordion__panel { grid-template-columns: minmax(0, 1fr); }
  .bh-accordion__cta { justify-self: start; }
}

.bh-services__link { margin-top: calc(28 * var(--bh-space)); }

/* Faint splash tree behind the services list, rooted in the bottom edge of the section.
   The artwork is cropped on the right and where the trunk ends (about 83% down), so both cuts sit outside the
   section: flush with the right of the screen, and pushed 19% below the section's bottom edge.
   Sized by viewport, not section height, so opening a row doesn't resize the tree. */
.bh-services { position: relative; overflow: hidden; isolation: isolate; }
.bh-services__tree {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  height: clamp(454px, 50.2vw, 713px);
  aspect-ratio: 798 / 1111;
  transform: translateY(19%);
  opacity: 0.14;
  pointer-events: none;
}
.bh-tree__art { position: absolute; left: 0; top: 0; width: 798px; height: 1111px; transform-origin: 0 0; }
.bh-tree__art > * { position: absolute; display: block; max-width: none; }
.bh-tree__branches { left: 0; top: 0; width: 798px; height: 1111px; }
.bh-tree__leaf { background-repeat: no-repeat; background-size: 1024px 335px; }
/* Only while the branches grow (main.js): the masked wrapper and the image inside it scale on the GPU. */
.bh-tree__reveal { will-change: transform; }
.bh-tree__reveal > .bh-tree__branches { position: absolute; display: block; max-width: none; will-change: transform; }
@media (max-width: 719.98px) {
  .bh-services__tree { display: none; }
}

/* ---------- About ---------- */
.bh-about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: calc(48 * var(--bh-space)) 80px;
  align-items: center;
}
/* The stacked logo sits in the photo's old frame, contained so the tree and wordmark are never cropped. */
.bh-about__logo { display: grid; place-items: center; aspect-ratio: 4 / 3.4; }
.bh-about__logo img { display: block; width: auto; height: min(88%, 420px); max-width: 100%; object-fit: contain; }
.bh-about__text { margin-top: calc(28 * var(--bh-space)); }

.bh-about__values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 480px;
  margin: calc(32 * var(--bh-space)) 0 0;
  padding: calc(18 * var(--bh-space)) 0 0;
  list-style: none;
  border-top: 1px solid var(--bh-field-line);
}
.bh-about__values li { display: flex; flex-direction: column; gap: 6px; }
.bh-about__num {
  font-family: var(--bh-font);
  font-size: calc(17 * var(--bh-fit));
  font-weight: 300;
  line-height: 1;
  color: var(--bh-draft-dash);
}
.bh-about__values strong { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--bh-deep-bark); }

.bh-about__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px 36px;
  margin: calc(60 * var(--bh-space)) 0 0;
}
.bh-about__fact { padding-top: calc(20 * var(--bh-space)); border-top: 1px solid var(--bh-field-line); }
.bh-about__fact dt {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bh-river-slate);
}
.bh-about__fact dd { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--bh-river-slate); }
.bh-about__fact dd.bh-about__fact-value {
  font-family: var(--bh-font);
  font-size: calc(18 * var(--bh-fit));
  line-height: 1.35;
  color: var(--bh-deep-bark);
}
@media (max-width: 479.98px) {
  .bh-about__values { grid-template-columns: minmax(0, 1fr); }
}

.bh-team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: calc(96 * var(--bh-space));
  padding-top: calc(28 * var(--bh-space));
  border-top: 1px solid var(--bh-field-line);
}
.bh-team-head__title { margin: 0; font-size: clamp(calc(22 * var(--bh-fit)), 2.2vw, calc(26 * var(--bh-fit))); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Careers ---------- */
.bh-careers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: calc(56 * var(--bh-space)) 80px;
  align-items: start;
}
.bh-careers__text { margin-top: calc(24 * var(--bh-space)); }
.bh-careers__cta { margin-top: calc(34 * var(--bh-space)); }

/* Faint splash globe + paper plane behind the careers copy, mirroring the services tree: anchored to the
   bottom-left corner and bleeding past the left and bottom edges. Artwork is 851 × 1285 (globe in the
   lower two thirds, plane and trail above it). */
.bh-careers-section { position: relative; overflow: hidden; isolation: isolate; }
.bh-careers__globe {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  height: clamp(504px, 55.8vw, 792px);
  aspect-ratio: 851 / 1285;
  transform: translate(-22%, 14%);
  opacity: 0.14;
  pointer-events: none;
}
.bh-globe__art { position: absolute; left: 0; top: 0; width: 851px; height: 1285px; transform-origin: 0 0; }
.bh-globe__art > * { position: absolute; display: block; max-width: none; }
@media (max-width: 719.98px) {
  .bh-careers__globe { display: none; }
}

.bh-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.bh-list-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.bh-list-head--openings { margin-top: calc(48 * var(--bh-space)); scroll-margin-top: calc(var(--bh-header-h) + 20px); }

.bh-apply,
.bh-openings { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bh-deep-bark); }
.bh-apply li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  padding: calc(6px + calc(10 * var(--bh-space))) 0;
  border-bottom: 1px solid var(--bh-hairline);
}
.bh-apply__num { padding-top: 2px; font-size: 12px; font-weight: 600; color: var(--bh-canopy-teal); }
.bh-apply strong { display: block; font-size: calc(15 * var(--bh-fit)); font-weight: 500; }
.bh-apply strong + span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--bh-river-slate); }

.bh-openings li { padding: calc(8px + calc(12 * var(--bh-space))) 4px; border-bottom: 1px solid var(--bh-hairline); }
.bh-openings strong { display: block; font-size: calc(16 * var(--bh-fit)); font-weight: 500; }
.bh-openings span { display: block; margin-top: 4px; font-size: 13px; color: var(--bh-river-slate); }

/* ---------- Contact ---------- */
.bh-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: calc(56 * var(--bh-space)) 80px;
  align-items: start;
}
.bh-contact__text { max-width: 420px; margin-top: calc(24 * var(--bh-space)); }

.bh-contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: calc(28 * var(--bh-space)) 28px;
  margin: calc(48 * var(--bh-space)) 0 0;
}
.bh-contact-details > div { padding-top: 18px; border-top: 1px solid var(--bh-field-line); }
.bh-contact-details dd { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 14px; line-height: 1.7; }

.bh-form-card { padding: clamp(24px, 4vw, calc(16px + calc(28 * var(--bh-space)))); border: 1px solid var(--bh-paper-edge); background: #fff; }
.bh-form { display: flex; flex-direction: column; gap: calc(10px + calc(12 * var(--bh-space))); }
.bh-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; }

.bh-field { display: flex; flex-direction: column; gap: 8px; }
.bh-field-label { padding: 0; font-size: 12px; font-weight: 600; color: var(--bh-deep-bark); }
.bh-field-optional { font-weight: 400; color: var(--bh-river-slate); }
.bh-field input,
.bh-field textarea {
  width: 100%;
  border: 1px solid var(--bh-field-line);
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  color: var(--bh-deep-bark);
  caret-color: var(--bh-canopy-teal);
}
.bh-field input { height: calc(40px + calc(8 * var(--bh-space))); padding: 0 14px; }
.bh-field textarea { padding: 12px 14px; line-height: 1.6; resize: vertical; height: calc(72px + calc(48 * var(--bh-space))); }
.bh-field input:hover,
.bh-field textarea:hover { border-color: var(--bh-field-line-hover); }
.bh-field input:focus-visible,
.bh-field textarea:focus-visible {
  outline: 2px solid var(--bh-canopy-teal);
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--bh-canopy-teal);
}

.bh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bh-chips legend { margin-bottom: 10px; }
.bh-chip { position: relative; }
.bh-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bh-chip span {
  display: inline-flex;
  align-items: center;
  height: calc(38px + calc(6 * var(--bh-space)));
  padding: 0 16px;
  border: 1px solid var(--bh-field-line);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--bh-deep-bark);
  cursor: pointer;
  transition: all 0.2s;
}
.bh-chip input:checked + span { border-color: var(--bh-canopy-teal); background: var(--bh-canopy-teal); color: #fff; }
.bh-chip input:focus-visible + span {
  outline: 3px solid var(--bh-sunlit-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bh-deep-bark);
}

.bh-form__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.bh-form__privacy { max-width: 280px; margin: 0; font-size: 12px; line-height: 1.6; color: var(--bh-river-slate); }
.bh-form__privacy a { text-decoration: underline; text-underline-offset: 3px; }

.bh-form-success { padding: 24px 0; }
.bh-form-success__bar { display: block; width: 56px; height: 3px; background: var(--bh-sunlit-gold); }
.bh-form-success__title { margin: 28px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.bh-form-success__text { max-width: 380px; margin: 14px 0 12px; font-size: 15px; line-height: 1.8; color: var(--bh-river-slate); }
.bh-form-success__reset { display: flex; margin-top: 28px; }

/* ---------- Footer ---------- */
.bh-footer { padding: 80px 0 calc(28px + var(--bh-mobile-bar-h)); }
.bh-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 40px; }
.bh-footer__logo { display: block; width: auto; height: 110px; }
.bh-footer__heading { margin: 0; font-size: 12px; font-weight: 600; }
.bh-footer__links { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--bh-river-slate); }
.bh-footer__links a,
.bh-footer__links span { display: inline-block; padding: 6px 0; color: var(--bh-river-slate); }
.bh-footer__links a:hover { color: var(--bh-canopy-teal); }
.bh-footer .bh-draft--spaced { margin-top: 8px; }

.bh-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--bh-hairline);
  font-size: 12px;
  color: var(--bh-river-slate);
}
.bh-footer__legal { display: flex; gap: 24px; }
.bh-footer__legal a { color: var(--bh-river-slate); }
.bh-footer__legal a:hover { color: var(--bh-canopy-teal); }

/* ---------- Mobile action bar ---------- */
.bh-mobile-bar { display: none; }

/* ---------- Scroll reveal (only armed by main.js when motion is allowed) ---------- */
.bh-reveal-armed [data-bh-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--bh-ease-out), transform 0.9s var(--bh-ease-out);
}
.bh-reveal-armed [data-bh-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Below 900px ---------- */
@media (max-width: 899.98px) {
  :root { --bh-mobile-bar-h: calc(68px + env(safe-area-inset-bottom, 0px)); }

  .bh-why__head { grid-template-columns: minmax(0, 1fr); }
  .bh-why__aside { padding-top: 24px; }

  .bh-nav { display: none; }
  .bh-menu-toggle { display: flex; }

  /* No split on mobile: the buildings photo fills the hero on its own, and the Why section follows below. */
  .bh-hero__panel--right { display: none; }
  .bh-hero__panel--left { clip-path: none; }
  .bh-hero__panel--left .bh-hero__media { right: 0; }
  .bh-hero__panel--left img { object-position: 40% 50%; }
  .bh-hero__panel--left .bh-hero__media::after {
    background: linear-gradient(to top, rgba(18, 32, 38, 0.9) 0%, rgba(18, 32, 38, 0.55) 60%, rgba(18, 32, 38, 0.25) 100%);
  }
  .bh-hero__copy { padding-bottom: calc(var(--bh-mobile-bar-h) + 40px); }
  .bh-hero__copy-inner { max-width: none; }
  .bh-hero__lead { font-size: 16px; }
  /* The fixed mobile bar already carries both actions. */
  .bh-hero__actions { display: none; }

  .bh-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bh-hairline);
    background: #fff;
    box-shadow: 0 -6px 20px rgba(28, 43, 51, 0.06);
  }
  .bh-mobile-bar .bh-btn { height: 48px; padding: 0 12px; font-size: 14px; }
}

/*
  Split mode (html.bh-split, set in <head> when motion is allowed): the Why section sits behind
  the hero inside the pinned stage, and the hero halves slide apart to reveal it. Without it the
  page is a plain hero followed by the teal section.
*/
.bh-split .bh-stage { overflow: hidden; } /* clips the halves as they slide off */
.bh-split .bh-hero { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: transparent; }
/* Let clicks fall through to the Why section underneath; the hero buttons opt back in via .bh-hero__actions. */
.bh-split .bh-hero { pointer-events: none; }
.bh-hero__seam { display: none; }
.bh-split .bh-hero__seam {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--bh-paper);
  /* Only the strip between the two photos shows; it fades out as the split begins. */
  clip-path: polygon(calc(var(--bh-seam-top) - var(--bh-seam-gap)) 0, calc(var(--bh-seam-top) + var(--bh-seam-gap)) 0, calc(var(--bh-seam-bottom) + var(--bh-seam-gap)) 100%, calc(var(--bh-seam-bottom) - var(--bh-seam-gap)) 100%);
}