/* ==========================================================
   Brightstead.com v3 — additions layered on the EXISTING design
   language (doors, pillars, proof, why-grid). Tokens only — no
   hardcoded brand values. Loaded after styles + design-overrides
   + redesign-shim so .door / .pillar rules are already in scope.
   ========================================================== */

/* ---------- Status pill (sits inside a door card) ---------- */
.v-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: var(--fs-pill);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--rule-dark);
  color: var(--muted-on-dark);
}
.v-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Design pass: all three status pills carry the same visual weight (mariner
   label, matching border, glowing dot) — they differ only by their label text.
   The "live now" pulse is layered on is-live alone on inner pages (v2-inner). */
.v-status.is-live,
.v-status.is-soon,
.v-status.is-future { color: var(--mariner); border-color: rgba(45, 109, 217, 0.45); }
.v-status.is-live::before,
.v-status.is-soon::before,
.v-status.is-future::before { box-shadow: 0 0 10px var(--mariner); }

/* ---------- Hero CTA row ----------
   Centered by default (matches the centered hero at <=980px); left-aligned
   only on desktop, where the hero column is left-aligned (see min-width rule). */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 18px;
  margin-top: 40px;
}

/* CTAs reuse the nav button's orbiting border-glow, but with NO fill —
   transparent background, glowing animated ring, white label. The orbit
   ring (::before) + sizing come from the global .nav-cta rules. */
.nav-cta.is-ghost {
  background: transparent !important;
}
.nav-cta.is-ghost:hover {
  background: rgba(45, 109, 217, 0.16) !important;
  transform: translateY(-1px) !important;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--mariner);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--chathams-blue); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: #D5E8F0; /* Design pass: secondary-CTA resting color = brand Light Blue; stays subordinate to the filled primary CTA */
  transition: color 0.2s, gap 0.2s;
}
.btn-ghost:hover { color: var(--white); gap: 14px; }
.btn-ghost .arrow { color: var(--mariner); }

/* Section-level CTA (under a pillar / why grid) */
.section-cta { margin-top: 44px; }

/* ---------- Door grid variants (portfolio = 2-up, routing = 3-up) ---------- */
.door-grid.is-2 { grid-template-columns: 1fr 1fr; gap: 28px; }

/* Routing doors (home BEAT 5 "Find the right conversation") are 3-up on
   desktop but must never overflow. The old `1fr 1fr 1fr` kept three rigid
   columns from ~760–1100px, where the long mailto/URL CTAs set a min-content
   floor the tracks couldn't shrink past — so the third card spilled off the
   right edge. A fluid auto-fit grid flows 3 → 2 → 1 across every viewport with
   no fixed-column dead zone; `min(280px, 100%)` guards against overflow on
   very narrow screens. */
/* There are exactly three routing cards, so any 2-up step orphans the third
   on a half-empty second row. Skip it: 3-up on wide screens, then straight to
   1-up (three rows). The 1-up switch happens at 1200px — below that a 3-up
   card is too narrow to hold the longest no-wrap address (~252px) on one line
   (measured: at 1101px a 3-up card gives only ~241px and clips it). */
.door-grid:not(.is-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .door-grid:not(.is-2) { grid-template-columns: 1fr; }
}
/* Let grid items shrink below content width so tracks never force overflow. */
.door-grid > .door { min-width: 0; }

/* Routing CTAs are email/URL addresses that must NEVER wrap — they stay on a
   single line at every width. The 312px min track above keeps each card wide
   enough for the longest address (≈232px) plus padding, so the grid drops to
   fewer columns (more rows) rather than ever breaking an address. When a card
   is too narrow to hold the address AND the arrow on one line, the arrow alone
   wraps to a second line beneath the address. */
.door.is-route .door-cta { flex-wrap: wrap; }
.door.is-route .door-cta > span:not(.arrow) {
  white-space: nowrap;   /* address stays on one line */
  flex: 0 0 auto;        /* keep its intrinsic width; never squeeze the text */
}
.door.is-route .door-cta .arrow { flex: 0 0 auto; }

/* The 2-up portfolio doors are much wider than the canonical 3-up cards, so
   the default .door-inner padding (28px) read as cramped. Give them room.
   (Padding + the textured panel live on .door-inner; .door is padding:0.) */
.door-grid.is-2 .door-inner { padding: 44px; }
.door.is-route .door-inner { padding: 38px; min-height: auto; }

/* Portfolio doors carry a status pill + a stat list, so they run taller. */
.door .door-status { align-self: flex-start; margin-bottom: 20px; }

/* Stat list inside a portfolio door — mariner tick + serif line. */
.door-stats {
  list-style: none;
  margin: 0 0 auto;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.door-stats li {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--rock-blue);
}
.door-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1px;
  background: var(--mariner);
}

/* Routing doors are short — they hold a number, a label, a line, a CTA. */
.door.is-route { min-height: 280px; }
.door.is-route .door-body { margin-bottom: auto; }

/* ZH Standard beat (home) — bold-lead-in bullet list. Home-native dash markers
   (mirrors .door-stats) with white lead-ins (mirrors .section-lede strong). */
.zh-bullets {
  list-style: none;
  margin: 0 0 44px;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.zh-bullets li {
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--rock-blue);
}
.zh-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--mariner);
}
.zh-bullets strong { color: var(--white); font-weight: 700; }

.portfolio-aside {
  margin-top: 36px;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-aside);
  letter-spacing: 0.04em;
  color: var(--muted-on-dark);
}

/* ============================================================
   HERO — left-aligned column, clean heading break, bigger + animated
   B mark. (Beacon halo/rays already animate; the MARK itself was static.)
   ============================================================ */
/* Heading: drop the italic accent onto its own line so it never breaks
   mid-phrase against the white lead-in. */
.hero h1 .accent { display: block; }
/* Desktop only: left-aligned hero column (per Vanja). Below 980px the design's
   own responsive layout takes over — hero recenters and the beacon drops below
   the copy — so we must NOT force left-align there. */
@media (min-width: 981px) {
  .hero .hero-inner { text-align: left; }
  .hero-ctas { justify-content: flex-start; }
  .hero .hero-inner > .hero-beacon.as-closing {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero beacon position/size restored (centered, ~380px, sitting below the
   CTAs) — the centering comes from the rule above. */
.hero-beacon.as-closing {
  margin-top: 56px;
}
.hero-beacon.as-closing .closing-mark {
  width: 380px;
}
@media (max-width: 600px) {
  .hero-beacon.as-closing .closing-mark { width: 240px; }
}

/* ============================================================
   BEACON PERFORMANCE REBUILD (hero + footer share .closing-mark /
   .closing-halo / .closing-rays). The original beacon was beautiful but
   unusable: an 8-layer drop-shadow up to 520px blur on the mark, a 130vw
   blurred spinning conic for the rays, and mix-blend-mode: screen on every
   layer — all re-composited every frame. Keep the look (bright B in a pool
   of blue light) but make it paint ONCE and cost nothing on scroll:
     - kill the spinning blurred rays entirely
     - make the halo static, no blur, no screen blend
     - replace the 8 drop-shadows with a light 2-layer bloom
   ============================================================ */
.closing-rays {
  display: none !important;
}
/* Match the "Why this work" funnel hub: a white-cored radial glow pool
   (white -> light blue -> mariner -> transparent), painted ONCE. No blur
   filter, no screen blend, no animation -> zero per-frame cost. */
.closing-halo {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(170, 200, 255, 0.50) 13%,
    rgba(45, 109, 217, 0.28) 32%,
    rgba(45, 109, 217, 0.10) 54%,
    transparent 74%
  ) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  will-change: auto !important;
}
/* Match the funnel hub-mark exactly: bright, lit-from-within, glow capped at
   70px (the original beacon went to 520px — that was the killer). */
.closing-mark {
  filter:
    brightness(1.25)
    drop-shadow(0 0 4px rgba(255, 255, 255, 1))
    drop-shadow(0 0 14px rgba(220, 235, 255, 0.95))
    drop-shadow(0 0 34px rgba(45, 109, 217, 0.85))
    drop-shadow(0 0 70px rgba(45, 109, 217, 0.6)) !important;
}
/* Footer B halo: the base .closing-halo is a fixed 1400px, but the footer mark
   is only 192px — so its glow disc was ~5x the mark (vs the hero B's ~2.9x),
   reading as an oversized "pasted-on" disc against the ambient footer glow.
   Size it to the SAME mark-to-halo ratio as the hero (1100/380 ≈ 2.9) so all
   three B marks share an identical glow. (Hero uses .hero-beacon, footer uses
   .closing-mark-block, so this targets the footer only.) */
.closing-mark-block .closing-halo {
  width: 560px !important;
  height: 560px !important;
}

/* ============================================================
   HOW WE OPERATE — the canonical centered intro centers the eyebrow +
   title, but the body lede was missing the matching auto margins, so it
   sat left while the title was centered (the "misalignment"). Center it.
   ============================================================ */
.four-pillars .pillar-intro .section-lede {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   PERFORMANCE
   ============================================================ */
/* The doors used backdrop-filter: blur(14px); 5 blurring cards is a major
   per-frame GPU cost. Invisible on the dark bg — drop it. */
.door {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.025);
}
/* Same treatment for the buyer + spec cards used on the interior pages. */
.buyer,
.spec {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   SPEC-CARD GRAPHIC ANIMATIONS — vendored from the sovereign page so the
   interior feature cards get the same living animated SVGs (the base .spec
   card styling already lives in styles.css; only these animations were in
   sovereign-overrides, which interior pages don't load).
   ============================================================ */
.spec .spec-graphic > circle[fill="#FFFFFF"] {
  transform-origin: center;
  transform-box: fill-box;
  animation: specCore 2s ease-in-out infinite;
}
@keyframes specCore {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.4; transform: scale(1.8); }
}
.spec:nth-child(1) .spec-graphic > g:nth-of-type(1) {
  transform-origin: 36px 36px; transform-box: view-box;
  animation: spec1Gate 2.2s ease-in-out infinite;
}
@keyframes spec1Gate {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(1.10); }
}
.spec:nth-child(1) .spec-graphic > g:nth-of-type(3) {
  animation: spec1Refuse 1.2s steps(2, jump-none) infinite;
}
@keyframes spec1Refuse {
  0%, 49%  { opacity: 1;   }
  50%, 99% { opacity: 0.15; }
}
.spec:nth-child(2) .spec-graphic > g:nth-of-type(1) {
  transform-origin: 40px 32px; transform-box: view-box;
  animation: spec2CubeRock 5s ease-in-out infinite;
}
@keyframes spec2CubeRock {
  0%, 100% { transform: rotate(-7deg) scale(0.97); }
  50%      { transform: rotate(7deg)  scale(1.03); }
}
.spec:nth-child(2) .spec-graphic > g:nth-of-type(2) circle {
  transform-origin: center; transform-box: fill-box;
  animation: spec2Vertex 1.8s ease-in-out infinite;
}
.spec:nth-child(2) .spec-graphic > g:nth-of-type(2) circle:nth-child(2n) { animation-delay: -0.9s; }
@keyframes spec2Vertex {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.25; transform: scale(1.6); }
}
.spec:nth-child(3) .spec-graphic > g:nth-of-type(1) > rect {
  animation: spec3Link 1.8s ease-in-out infinite; transform-box: view-box;
}
.spec:nth-child(3) .spec-graphic > g:nth-of-type(1) > rect:nth-child(1) { transform-origin: 19px 17px; animation-delay: 0s;    }
.spec:nth-child(3) .spec-graphic > g:nth-of-type(1) > rect:nth-child(2) { transform-origin: 36px 36px; animation-delay: -0.6s; }
.spec:nth-child(3) .spec-graphic > g:nth-of-type(1) > rect:nth-child(3) { transform-origin: 53px 55px; animation-delay: -1.2s; }
@keyframes spec3Link {
  0%, 100% { opacity: 0.4; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
/* Pause the spec graphics when their section is offscreen (RedesignBehaviors
   toggles .anim-paused on .callout / sections). */
.anim-paused .spec-graphic,
.anim-paused .spec-graphic * { animation-play-state: paused !important; }
/* The closing glow used mix-blend-mode: screen, which forces the compositor
   to re-read + re-blend the page backdrop every frame (the heaviest paint on
   the page). On the near-black footer the translucent blue radial reads as a
   glow under normal compositing anyway. */
.closing-zone .closing::before {
  mix-blend-mode: normal;
}

/* ============================================================
   FOOTER GLOW — the B-mark glow was clipped ~22vh below the closing
   section, cutting off mid-footer. Re-anchor it on the mark and let the
   fade run all the way down to the bottom of the page (overflow:hidden on
   .closing-zone clips it exactly at the footer's bottom edge).
   ============================================================ */
.closing-zone .closing::before {
  top: -32vh;
  bottom: -130vh;
  background: radial-gradient(
    66vw 88vh at 50% 32vh,
    rgba(45, 109, 217, 0.80) 0%,
    rgba(45, 109, 217, 0.42) 24%,
    rgba(45, 109, 217, 0.20) 46%,
    rgba(45, 109, 217, 0.09) 66%,
    rgba(45, 109, 217, 0.03) 84%,
    transparent 96%
  );
  /* Soften the TOP of the glow so it fades in gradually instead of cutting
     off in a hard line behind the routing cards above. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26vh);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26vh);
}

/* ============================================================
   FOOTER — Connect column: the two email links side by side, not stacked.
   (Connect is the 4th footer-inner child; it wraps to its own wide row.)
   ============================================================ */
.footer-inner > div:nth-child(4) ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 28px;
}
/* Portrait tablet + mobile: stack them again. (Landscape tablet / desktop
   keep the side-by-side row above.) */
@media (max-width: 820px) {
  .footer-inner > div:nth-child(4) ul {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================
   INTERIOR-PAGE PATTERNS (portfolio / how-we-operate / mission /
   team). Refined in a later pass; kept here so those routes build.
   ============================================================ */

.v-prose { max-width: 800px; }
.v-prose > p {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.82); /* Design pass: lift long-form body contrast */
  margin-bottom: 22px;
}
.v-prose > h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mariner);
  margin: 40px 0 18px;
}
.v-prose ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v-prose ul li {
  position: relative;
  padding-left: 26px;
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82); /* Design pass: lift long-form body contrast */
}
.v-prose ul li strong { color: var(--white); font-weight: 700; }
.v-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 1px;
  background: var(--mariner);
}

.company-block { padding-top: 0; }
.company-block .v-status,
#in-development .v-status { margin-bottom: 22px; } /* Design pass: match in-dev pill→heading gap to the company sections */

/* ============================================================
   SECTION RHYTHM — faint static ambient glow on the interior content
   sections (.callout is interior-only; the homepage never uses it) so the
   long dark scroll has depth + bands, alternating sides. One painted
   gradient per section = zero per-frame cost.
   ============================================================ */
.callout { position: relative; }
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 50% at 85% -5%, var(--mariner-glow) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.callout:nth-of-type(even)::before {
  background: radial-gradient(90% 50% at 15% -5%, var(--mariner-glow) 0%, transparent 55%);
}
.callout > .container { position: relative; z-index: 1; }

/* Verbatim "[Stat line]" — the italic credential strip the doc calls for.
   Each cell shows an exact stat-line phrase, divided like a spec strip. */
.cred-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 18px 0 54px;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.cred {
  position: relative;
  padding: 28px 30px 28px 24px;
  border-right: 1px solid var(--rule-dark);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-cred);
  line-height: 1.5;
  color: var(--rock-blue);
}
.cred::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  width: 12px;
  height: 1px;
  background: var(--mariner);
}
.cred:last-child { border-right: none; }
@media (max-width: 760px) {
  .cred { border-right: none; border-bottom: 1px solid var(--rule-dark); }
  .cred:last-child { border-bottom: none; }
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.dev-item {
  padding: 34px;
  border: 1px dashed var(--rule-dark);
  border-radius: 3px;
}
.dev-item h3 { font-family: var(--sans); font-size: var(--fs-card-title); color: var(--white); margin-bottom: 14px; }
.dev-item p { font-family: var(--serif); font-size: var(--fs-card-body); line-height: 1.6; color: rgba(255, 255, 255, 0.66); }

/* Routing cards on interior next-step sections (portfolio / mission). */
.route-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.route {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  background: var(--tangaroa-2);
}
.route h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
}
.route p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 22px;
}
.route .btn-ghost { margin-top: auto; }

.featured-statement { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.featured-statement.opt-editorial p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.42;
  color: var(--white);
}
.featured-statement.opt-editorial .fs-attr,
.featured-statement.opt-system .fs-attr {
  display: block;
  margin-top: 30px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mariner);
}
.featured-statement.opt-system {
  text-align: left;
  padding: 56px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  background: linear-gradient(160deg, var(--tangaroa-3), var(--blue-charcoal));
}
.featured-statement.opt-system::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--mariner);
  margin-bottom: 30px;
}
.featured-statement.opt-system p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.4;
  color: var(--white);
}

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px; }
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  background: var(--tangaroa-2);
}
.team-photo {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid var(--rule-dark);
  background: radial-gradient(circle at 50% 35%, var(--tangaroa-3), var(--blue-charcoal));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 22px; font-weight: 600;
  color: var(--rock-blue); margin-bottom: 24px;
}
.team-card h3 { font-family: var(--sans); font-size: var(--fs-card-title); color: var(--white); margin-bottom: 6px; }
.team-card .team-role {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--mariner); margin-bottom: 20px;
}
.team-card p { font-family: var(--serif); font-size: var(--fs-card-body); line-height: 1.62; color: rgba(255, 255, 255, 0.7); }

.footer-legal-links { display: flex; gap: 22px; }
.footer-legal-links a { transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--mariner); }

.page-hero .v-hero-body {
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
  max-width: 720px;
  margin-top: 8px;
}

/* ============================================================
   INTERIOR PAGE-HERO — the default is min-height:100vh with the text
   floating in the left third over an empty gradient, which reads as a
   barren void. Tighten the height and anchor the right side with a large,
   faint B watermark (static, cheap) so the hero feels composed.
   ============================================================ */
.page-hero {
  min-height: 66vh !important;
  padding-top: 120px;
  padding-bottom: 80px;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: 50%;
  height: 96%;
  background:
    url("/redesign/assets/logos/Icon%20B-logo-reverse-rgb.svg")
    no-repeat right center;
  background-size: contain;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.page-hero-inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-hero { min-height: 58vh !important; }
  .page-hero::after { width: 64%; opacity: 0.07; right: -14%; }
}

/* ============================================================
   COMPANY SECTIONS (portfolio) use .callout, which centers the header —
   but they carry a left-aligned status pill + left-aligned prose under it,
   so the centered title read as misaligned. Left-align the whole header.
   ============================================================ */
.company-block.callout > .container > .section-eyebrow {
  justify-content: flex-start;
}
.company-block.callout > .container > .section-eyebrow::after {
  display: none;
}
.company-block.callout > .container > .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .door-grid.is-2,
  .dev-grid,
  .route-list,
  .team-grid { grid-template-columns: 1fr; }
  .featured-statement.opt-system { padding: 38px; }

  /* The "Why this work" grid has a minmax(360px, 460px) graphic column and no
     stacking rule of its own — below ~900px it crushes the copy into a
     one-word-per-line sliver. Stack it: copy on top, funnel centered below. */
  .why-grid {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 40px;
  }
  .why-grid .why-graphic {
    max-width: 360px;
    margin: 4px auto 0;
  }
}

/* The v3 nav CTA ("Investor inquiries") is longer than the old "Get in touch",
   so on narrow screens keep it on one line and shrink it + the logo + gutter
   so it never collides with the wordmark. */
@media (max-width: 600px) {
  .nav { padding-left: 20px; padding-right: 20px; }
  .nav-brand .logo { height: 46px; }
  .nav-cta {
    white-space: nowrap;
    font-size: 9.5px !important;
    padding: 9px 13px !important;
    letter-spacing: 0.1em !important;
  }

  /* Single-column routing on phones: trim the is-route card padding so the
     longest no-wrap address (≈252px) clears the card edge with margin to
     spare. (Default is-route padding is 38px → only ~249px of inner width at
     375, which clipped "sovereign@brightstead.com" by ~2px.) */
  .door.is-route .door-inner { padding: 30px 24px; }

  /* That padding trim isn't enough for the dual-CTA "For governments…" card:
     its address link is a bare <a> (not the <span> the sibling rule targets),
     so it renders at full .door .door-cta size — 20px uppercase, 0.18em
     tracking — which overflows even a 279px-wide card. Shrink the CTA text
     for this card at this breakpoint only. */
  .door.is-route .door-cta a { font-size: 12px; letter-spacing: 0.06em; }
}