/* ====================================================================
   HIMARK · REDESIGN — pill nav + editorial hero (sticky cover pattern)
   ====================================================================
   Applied per-page via the body[data-page="…"] selectors below. Pages
   that opt in get:
     - the existing global .topnav / legacy #brand-mark hidden
     - a floating glass pill nav, framed-H + IMARK lockup
     - a centered editorial hero pinned via position:sticky so the
       sections below scroll UP OVER it on scroll — same cinematic
       cover pattern the original .hero / .doc-split / .np-hero used
     - existing sections below the hero keep their original styling
       and z-index:1 layering so they occlude the sticky hero
     - hero background images zoom progressively on scroll (driven
       by JS in main.js updating the --hero-zoom CSS custom property)

   Pages opted in: home, doctrine (about), mandates (services),
   principals (team), direct (contact), intake (apply), plus the
   secondary legal/utility pages — privacy, terms, cookies, security,
   subscribe — which receive the pill nav via main.js injection.
   ==================================================================== */


/* ====================================================================
   PAGE-LEVEL: leave .page untouched as the scroller, hide every
   legacy nav element. The previous version of this file added
   `position:relative; overflow:hidden` to .page.redesign which
   BROKE THE INTERNAL SCROLLER — that in turn broke (a) the r3d
   reveal-on-scroll observer (every section below the fold stayed
   opacity:0), (b) the sticky-hero scroll-cover effect, and (c) the
   cap-cell / dpl-cell hover lifts. We now ONLY override the
   cosmetics (margin / border-radius / page bg) — scrolling is the
   original .page (position:fixed; inset:0; overflow-y:auto) intact.
   ==================================================================== */
body[data-page="home"],
body[data-page="doctrine"],
body[data-page="mandates"],
body[data-page="principals"],
body[data-page="direct"],
body[data-page="intake"],
body[data-page="privacy"],
body[data-page="terms"],
body[data-page="cookies"],
body[data-page="security"],
body[data-page="subscribe"]{
  background: #D8E3E8;        /* pastel sky around the card (visible during overscroll) */
}

/* Hide the global .topnav on every redesigned page. */
body[data-page="home"] .topnav,
body[data-page="doctrine"] .topnav,
body[data-page="mandates"] .topnav,
body[data-page="principals"] .topnav,
body[data-page="direct"] .topnav,
body[data-page="intake"] .topnav,
body[data-page="privacy"] .topnav,
body[data-page="terms"] .topnav,
body[data-page="cookies"] .topnav,
body[data-page="security"] .topnav,
body[data-page="subscribe"] .topnav{
  display: none !important;
}

/* Hide the LEGACY navbar (centred #brand-mark + right-edge #menu-trigger
   + slide-out #menu-panel + .menu-overlay) on the legal/utility pages
   that still use it. The pill-nav is injected by main.js at the top
   of these pages and replaces the legacy navigation entirely. */
body[data-page="privacy"] #brand-mark,
body[data-page="terms"] #brand-mark,
body[data-page="cookies"] #brand-mark,
body[data-page="security"] #brand-mark,
body[data-page="privacy"] #menu-trigger,
body[data-page="terms"] #menu-trigger,
body[data-page="cookies"] #menu-trigger,
body[data-page="security"] #menu-trigger,
body[data-page="privacy"] #menu-panel,
body[data-page="terms"] #menu-panel,
body[data-page="cookies"] #menu-panel,
body[data-page="security"] #menu-panel,
body[data-page="privacy"] .menu-overlay,
body[data-page="terms"] .menu-overlay,
body[data-page="cookies"] .menu-overlay,
body[data-page="security"] .menu-overlay{
  display: none !important;
}

/* Full-bleed page frame — pages cover the whole viewport. We do
   NOT touch position/overflow — that's the .page scroller. */
body[data-page="home"] .page.redesign,
body[data-page="doctrine"] .page.redesign,
body[data-page="mandates"] .page.redesign,
body[data-page="principals"] .page.redesign,
body[data-page="direct"] .page.redesign,
body[data-page="intake"] .page.redesign,
body[data-page="privacy"] .page.redesign,
body[data-page="terms"] .page.redesign,
body[data-page="cookies"] .page.redesign,
body[data-page="security"] .page.redesign,
body[data-page="subscribe"] .page.redesign{
  background: var(--off);
  border-radius: 0;
  margin: 0;
}


/* ====================================================================
   PILL NAV — floating glass plate.
   position:sticky (NOT fixed) because .page has will-change:transform,
   which creates a containing block — that demotes position:fixed
   children to behave like position:absolute relative to .page, so
   they scroll with the content. Sticky positions relative to the
   nearest SCROLL container (.page, which has overflow-y:auto), not
   the containing block, so it pins correctly at the top:20px offset.

   margin-bottom: -56px collapses the pill's flow-space so the hero
   below starts at top:0 of .page (the pill visually overlays the
   top of the hero rather than pushing it down).

   Max-width bumped to 1100px from 820px to accommodate the new
   Apply link in the nav list (6 items instead of 5).
   ==================================================================== */
.pill-nav{
  position: sticky;
  top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -56px;
  width: calc(100% - 56px);
  max-width: 1100px;
  height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.28) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 0 10px 0 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 50;
  box-shadow:
    0 14px 36px -12px rgba(28,43,58,.18),
    0 1px 0 rgba(255,255,255,.70) inset,
    0 -1px 0 rgba(28,43,58,.06) inset;
}
.pn-brand{ justify-self:start; }
.pn-links{ justify-self:center; }
.pn-cta{   justify-self:end;   }

/* Brand lockup — framed-H SVG + IMARK wordmark. Sized at 23×32 +
   92×22 (the mobile-tablet variant of the loading-page topnav-brand
   lockup), tuned smaller than the desktop loading-page proportions
   so it fits the slimmer pill silhouette without dominating it. */
.pn-brand{
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--midnight);
  text-decoration: none;
  height: 32px;
  line-height: 1;
}
.pn-brand-mark{
  width: 23px;
  height: 32px;
  display: inline-block;
  flex-shrink: 0;
  margin-right: -4px;
}
.pn-brand-mark svg{
  width: 100%;
  height: 100%;
  display: block;
  margin-top: -1px;
}
.pn-brand-imark{
  display: inline-block;
  width: 92px;
  height: 22px;
  background-color: var(--midnight);
  -webkit-mask: url('../images/IMARK.png') no-repeat center / contain;
          mask: url('../images/IMARK.png') no-repeat center / contain;
}
.pn-brand:hover .pn-brand-mark svg g rect,
.pn-brand:hover .pn-brand-mark svg > rect{ fill: var(--ocean-dk); }
.pn-brand:hover .pn-brand-mark svg > rect[fill="none"]{ stroke: var(--ocean-dk); }
.pn-brand:hover .pn-brand-imark{ background-color: var(--ocean-dk); }

.pn-links{
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pn-links a{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--midnight);
  text-decoration: none;
  opacity: .78;
  transition: opacity .2s;
}
.pn-links a:hover, .pn-links a.is-active{ opacity: 1; }

.pn-cta{
  height: 36px;
  padding: 0 18px;
  background: var(--midnight);
  color: var(--off);
  border: 0;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .2s;
}
.pn-cta:hover{ background: var(--ink-deep); }


/* ====================================================================
   EDITORIAL HERO — sticky-cover pattern + scroll-driven zoom.
     .hero-editorial         (any page)         — base
     .hero-editorial.full    (home only)        — 100vh sticky
     .hero-editorial.half    (secondary pages)  — ~50vh sticky
   The hero sits at z-index:0 and stays pinned (top:0) while every
   following section, layered at z-index:1, scrolls up and visually
   covers it. Same pattern the original .hero / .doc-split / .np-hero
   used.

   Background image zoom: previously attempted with CSS scroll-driven
   animations (@supports animation-timeline: scroll()), but those
   only land in Chrome 115+ — Safari and Firefox still don't honour
   the keyword. Now driven by a tiny scroll listener in main.js that
   updates the --hero-zoom custom property on each .hero-editorial as
   the user scrolls; the ::before transform reads that variable, so
   the architectural background image scales progressively from its
   base (1 for half, 1.06 for the blurred full hero) up to ~1.20-1.30.
   Works in every modern browser.
   ==================================================================== */
.hero-editorial{
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 96px 56px 56px;
  background: linear-gradient(180deg, #B8CFDB 0%, #ECEFF0 100%);
}
.hero-editorial.full{
  height: 100vh;
  min-height: 100vh;
  padding: 120px 56px;
}
.hero-editorial.half{
  height: clamp(420px, 50vh, 560px);
  min-height: clamp(420px, 50vh, 560px);
}
/* Background image — both heroes share this layer. The transform
   reads --hero-zoom which JS in main.js updates on scroll. Default
   value matches the base scale, so without JS the hero still renders
   correctly (no zoom). */
.hero-editorial::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-architecture.jpeg');
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(var(--hero-zoom, 1));
  transform-origin: center center;
  will-change: transform;
}
.hero-editorial.full{
  --hero-zoom: 1.06;          /* base scale for the blurred full hero */
}
.hero-editorial.half{
  --hero-zoom: 1;             /* sharp base scale for the half hero */
}
.hero-editorial.full::before{
  filter: blur(10px);
}
.hero-editorial::after{
  /* White wash for text contrast. A radial halo pulls a brighter
     veil right behind the headline block so the dark Midnight text
     reads crisply against the drifting aura layers underneath.
     A linear wash handles the edges. Aura motion still bleeds
     through because the wash is partially transparent. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(247,247,245,.62) 0%, rgba(247,247,245,.18) 75%, transparent 100%),
    linear-gradient(180deg, rgba(247,247,245,.45) 0%, rgba(247,247,245,.18) 45%, rgba(247,247,245,.30) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-editorial > *{ position: relative; z-index: 1; }

.heroe-eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ocean);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.heroe-eyebrow::before{
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ocean);
}
.heroe-hl{
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--midnight);
  text-align: center;
  max-width: 780px;
  margin: 0 0 24px;
}
.hero-editorial.half .heroe-hl{
  font-size: clamp(32px, 4.4vw, 48px);
}
.heroe-hl em{
  font-style: italic;
  font-weight: 300;
  color: var(--ocean);
}
.heroe-sub{
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(28,43,58,.78);
  max-width: 580px;
  text-align: center;
  margin: 0 0 36px;
}
.heroe-cta{
  height: 44px;
  padding: 0 24px;
  background: var(--midnight);
  color: var(--off);
  border: 0;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .2s, transform .2s;
  box-shadow: 0 12px 28px -10px rgba(28,43,58,.30);
}
.heroe-cta:hover{
  background: var(--ink-deep);
  transform: translateY(-2px);
}


/* ====================================================================
   SECTION LAYERING — every direct child of .page.redesign except
   .pill-nav and .hero-editorial gets z-index:1 + position:relative
   so it occludes the sticky hero on scroll. Without this, sections
   without their own z-index would scroll behind the hero.
   ==================================================================== */
.page.redesign > *:not(.pill-nav):not(.hero-editorial){
  position: relative;
  z-index: 1;
}
/* Soft top-edge shadow on the FIRST section that rises over the
   hero — same "lift" the original `.doc-decl` / `.mnd-cards` had. */
.page.redesign > .hero-editorial + *{
  box-shadow: 0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}


/* ====================================================================
   SECTION BACKGROUND OVERRIDES — the original styles.css set
   `.svc-cats-section`, `.svc-tiers-brief`, and `.cap-section`
   to `var(--off)` so they all matched the page background. On
   the redesigned pages we want these standalone content sections
   on pure WHITE so the off-white `.s-num-bar` dividers between
   them read as actual dividers (not as the same flat field).
   ==================================================================== */
body[data-page="mandates"] .svc-cats-section,
body[data-page="mandates"] .cap-section,
body[data-page="direct"] .cap-section{
  background: var(--white);
}
/* NOTE: .svc-tiers-brief is intentionally NOT in the white-override.
   The original services.html inline style sets it to var(--midnight)
   (dark navy/blue) with cream text — the engagement-tiers anchor. */


/* ====================================================================
   ABOUT (doctrine) + TEAM (principals) — flip the dark .quote-mono
   monolith section to a soft LIGHT BLUE / mist field so the closing
   editorial quote reads as a calm anchor at the foot of the page,
   matching the rest of the redesigned palette. The original section
   was solid var(--ink-deep) (very dark navy) with cream type — too
   heavy beside the new light heroes and pastel page background.
   We also flip the .s-num-bar.dk divider that precedes it from dark
   to white-on-rule so the seam reads as a continuation, not a hard
   light-to-dark cut.
   ==================================================================== */
body[data-page="doctrine"] .s-num-bar.dk,
body[data-page="principals"] .s-num-bar.dk{
  background: var(--white);
  color: var(--ocean);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
body[data-page="doctrine"] .quote-mono,
body[data-page="principals"] .quote-mono{
  background: linear-gradient(180deg, #E2F0F0 0%, #D8E3E8 100%);
}
body[data-page="doctrine"] .quote-mono::before,
body[data-page="principals"] .quote-mono::before{
  /* Soften the dark grid pattern so it reads against the light bg. */
  background-image: linear-gradient(to right, rgba(95,129,144,.10) 1px, transparent 1px);
  opacity: .8;
}
body[data-page="doctrine"] .quote-mono-coord-tl,
body[data-page="doctrine"] .quote-mono-coord-tr,
body[data-page="principals"] .quote-mono-coord-tl,
body[data-page="principals"] .quote-mono-coord-tr{
  color: rgba(46,74,90,.60);
}
body[data-page="doctrine"] .quote-mono .quote-mark,
body[data-page="principals"] .quote-mono .quote-mark{
  color: rgba(95,129,144,.30);
}
body[data-page="doctrine"] .quote-mono .quote-body,
body[data-page="principals"] .quote-mono .quote-body{
  color: var(--midnight);
}
body[data-page="doctrine"] .quote-mono .qa-line,
body[data-page="principals"] .quote-mono .qa-line{
  background: var(--ocean);
}
body[data-page="doctrine"] .quote-mono .qa-name,
body[data-page="principals"] .quote-mono .qa-name{
  color: var(--midnight);
}
body[data-page="doctrine"] .quote-mono .qa-role,
body[data-page="principals"] .quote-mono .qa-role{
  color: rgba(46,74,90,.75);
}


/* ====================================================================
   CONTACT PAGE — distribute cap-cell content vertically so the email
   / CTA / footer line sticks to the bottom of the cell, no matter
   how tall the row is.
   ==================================================================== */
body[data-page="direct"] .cap-cell{
  display: flex;
  flex-direction: column;
}
body[data-page="direct"] .cap-cell > .cap-d:last-child{
  margin-top: auto;
  padding-top: 28px;
}


/* ====================================================================
   FOOTER — glass / light variant for the redesigned pages.
   The base .footer in styles.css is dark glass (midnight gradient +
   blur), tuned for the original dark site palette. On the redesigned
   pages the body and content are light, so the dark footer reads as
   an abrupt slab. This override flips it to a LIGHT glass surface —
   translucent off-white gradient with the same backdrop-filter blur
   so the cream wash and pastel-sky body background diffuse through.
   Type colours flip from cream-on-dark to midnight-on-light to match.
   Logo glyph swaps from cream-fill to midnight-fill the same way the
   pill-nav brand does.
   ==================================================================== */
body[data-page="home"] .footer,
body[data-page="doctrine"] .footer,
body[data-page="mandates"] .footer,
body[data-page="principals"] .footer,
body[data-page="direct"] .footer,
body[data-page="intake"] .footer,
body[data-page="privacy"] .footer,
body[data-page="terms"] .footer,
body[data-page="cookies"] .footer,
body[data-page="security"] .footer,
body[data-page="subscribe"] .footer{
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.28) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 -8px 24px -8px rgba(28,43,58,.10),
    0 1px 0 rgba(255,255,255,.70) inset;
  color: var(--midnight);
}
/* Quieten the dark grid overlay the original .footer paints — it
   was tuned for the dark bg. On the light footer we drop it to a
   barely-there mist line. */
body[data-page="home"] .footer::before,
body[data-page="doctrine"] .footer::before,
body[data-page="mandates"] .footer::before,
body[data-page="principals"] .footer::before,
body[data-page="direct"] .footer::before,
body[data-page="intake"] .footer::before,
body[data-page="privacy"] .footer::before,
body[data-page="terms"] .footer::before,
body[data-page="cookies"] .footer::before,
body[data-page="security"] .footer::before,
body[data-page="subscribe"] .footer::before{
  background-image: linear-gradient(to right, rgba(95,129,144,.08) 1px, transparent 1px);
  opacity: .6;
}
/* Footer text colours — cream on dark → midnight on light. */
body[data-page="home"] .footer .footer-coord-tl,
body[data-page="home"] .footer .footer-coord-tr,
body[data-page="doctrine"] .footer .footer-coord-tl,
body[data-page="doctrine"] .footer .footer-coord-tr,
body[data-page="mandates"] .footer .footer-coord-tl,
body[data-page="mandates"] .footer .footer-coord-tr,
body[data-page="principals"] .footer .footer-coord-tl,
body[data-page="principals"] .footer .footer-coord-tr,
body[data-page="direct"] .footer .footer-coord-tl,
body[data-page="direct"] .footer .footer-coord-tr,
body[data-page="intake"] .footer .footer-coord-tl,
body[data-page="intake"] .footer .footer-coord-tr,
body[data-page="privacy"] .footer .footer-coord-tl,
body[data-page="privacy"] .footer .footer-coord-tr,
body[data-page="terms"] .footer .footer-coord-tl,
body[data-page="terms"] .footer .footer-coord-tr,
body[data-page="cookies"] .footer .footer-coord-tl,
body[data-page="cookies"] .footer .footer-coord-tr,
body[data-page="security"] .footer .footer-coord-tl,
body[data-page="security"] .footer .footer-coord-tr,
body[data-page="subscribe"] .footer .footer-coord-tl,
body[data-page="subscribe"] .footer .footer-coord-tr{
  color: rgba(46,74,90,.55);
}
body[data-page="home"] .footer .ft-wm,
body[data-page="doctrine"] .footer .ft-wm,
body[data-page="mandates"] .footer .ft-wm,
body[data-page="principals"] .footer .ft-wm,
body[data-page="direct"] .footer .ft-wm,
body[data-page="intake"] .footer .ft-wm,
body[data-page="privacy"] .footer .ft-wm,
body[data-page="terms"] .footer .ft-wm,
body[data-page="cookies"] .footer .ft-wm,
body[data-page="security"] .footer .ft-wm,
body[data-page="subscribe"] .footer .ft-wm{
  color: var(--midnight);
}
body[data-page="home"] .footer .ft-blurb,
body[data-page="doctrine"] .footer .ft-blurb,
body[data-page="mandates"] .footer .ft-blurb,
body[data-page="principals"] .footer .ft-blurb,
body[data-page="direct"] .footer .ft-blurb,
body[data-page="intake"] .footer .ft-blurb,
body[data-page="privacy"] .footer .ft-blurb,
body[data-page="terms"] .footer .ft-blurb,
body[data-page="cookies"] .footer .ft-blurb,
body[data-page="security"] .footer .ft-blurb,
body[data-page="subscribe"] .footer .ft-blurb{
  color: rgba(28,43,58,.62);
}
body[data-page="home"] .footer .ft-links a,
body[data-page="doctrine"] .footer .ft-links a,
body[data-page="mandates"] .footer .ft-links a,
body[data-page="principals"] .footer .ft-links a,
body[data-page="direct"] .footer .ft-links a,
body[data-page="intake"] .footer .ft-links a,
body[data-page="privacy"] .footer .ft-links a,
body[data-page="terms"] .footer .ft-links a,
body[data-page="cookies"] .footer .ft-links a,
body[data-page="security"] .footer .ft-links a,
body[data-page="subscribe"] .footer .ft-links a{
  color: rgba(28,43,58,.78);
}
body[data-page="home"] .footer .ft-links a:hover,
body[data-page="doctrine"] .footer .ft-links a:hover,
body[data-page="mandates"] .footer .ft-links a:hover,
body[data-page="principals"] .footer .ft-links a:hover,
body[data-page="direct"] .footer .ft-links a:hover,
body[data-page="intake"] .footer .ft-links a:hover,
body[data-page="privacy"] .footer .ft-links a:hover,
body[data-page="terms"] .footer .ft-links a:hover,
body[data-page="cookies"] .footer .ft-links a:hover,
body[data-page="security"] .footer .ft-links a:hover,
body[data-page="subscribe"] .footer .ft-links a:hover{
  color: var(--midnight);
}
body[data-page="home"] .footer-top,
body[data-page="doctrine"] .footer-top,
body[data-page="mandates"] .footer-top,
body[data-page="principals"] .footer-top,
body[data-page="direct"] .footer-top,
body[data-page="intake"] .footer-top,
body[data-page="privacy"] .footer-top,
body[data-page="terms"] .footer-top,
body[data-page="cookies"] .footer-top,
body[data-page="security"] .footer-top,
body[data-page="subscribe"] .footer-top{
  border-bottom-color: rgba(95,129,144,.18);
}
/* ------------ Footer brand SIZE — fix for privacy / terms /
   cookies / security pages. The other pages inline their own
   .ft-wm-mark / .ft-wm-imark sizing in a <style> block, but the
   four legal pages don't, which meant the IMARK img was
   rendering at its natural 367×99 size (huge). styles.css only
   defines the OLD .ft-wm rule (font-based, 17px wordmark text);
   it has no .ft-wm-mark or .ft-wm-imark rules at all. Adding
   them here covers every page that loads redesign.css. */
.footer .ft-wm{
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0;
  line-height: 1;
  height: 32px;
  margin-bottom: 16px;
}
.footer .ft-wm-mark{
  width: 23px;
  height: 32px;
  display: inline-block;
  flex-shrink: 0;
  margin-right: -2px;
}
.footer .ft-wm-mark svg{
  width: 100%;
  height: 100%;
  display: block;
  margin-top: -1px;
}
.footer .ft-wm-imark{
  height: 24px;
  width: auto;
  display: block;
}

/* Footer brand glyph — the SVG rects/strokes are inlined with
   fill="#F7F7F5" (cream) for the dark footer. Flip to midnight so
   the H reads on the light glass. The IMARK PNG is white-on-
   transparent; a filter chain converts those white pixels to
   HIMARK midnight (#1C2B3A) — same colour as the framed-H beside
   it, not pure black. The chain is brightness(0) → recolour via
   invert+sepia+hue-rotate to land on the brand midnight. */
body[data-page="home"] .footer .ft-wm-mark svg g rect,
body[data-page="doctrine"] .footer .ft-wm-mark svg g rect,
body[data-page="mandates"] .footer .ft-wm-mark svg g rect,
body[data-page="principals"] .footer .ft-wm-mark svg g rect,
body[data-page="direct"] .footer .ft-wm-mark svg g rect,
body[data-page="intake"] .footer .ft-wm-mark svg g rect,
body[data-page="privacy"] .footer .ft-wm-mark svg g rect,
body[data-page="terms"] .footer .ft-wm-mark svg g rect,
body[data-page="cookies"] .footer .ft-wm-mark svg g rect,
body[data-page="security"] .footer .ft-wm-mark svg g rect,
body[data-page="subscribe"] .footer .ft-wm-mark svg g rect{
  fill: var(--midnight);
}
body[data-page="home"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="doctrine"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="mandates"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="principals"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="direct"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="intake"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="privacy"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="terms"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="cookies"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="security"] .footer .ft-wm-mark svg > rect[fill="none"],
body[data-page="subscribe"] .footer .ft-wm-mark svg > rect[fill="none"]{
  stroke: var(--midnight);
}
body[data-page="home"] .footer .ft-wm-imark,
body[data-page="doctrine"] .footer .ft-wm-imark,
body[data-page="mandates"] .footer .ft-wm-imark,
body[data-page="principals"] .footer .ft-wm-imark,
body[data-page="direct"] .footer .ft-wm-imark,
body[data-page="intake"] .footer .ft-wm-imark,
body[data-page="privacy"] .footer .ft-wm-imark,
body[data-page="terms"] .footer .ft-wm-imark,
body[data-page="cookies"] .footer .ft-wm-imark,
body[data-page="security"] .footer .ft-wm-imark,
body[data-page="subscribe"] .footer .ft-wm-imark{
  /* White-on-transparent PNG → HIMARK midnight (#1C2B3A).
     Filter chain generated to land on the brand colour exactly,
     not pure black (which is what plain brightness(0) gives).
     Falls back to brightness(0) for browsers that ignore parts
     of the chain. */
  filter: brightness(0) saturate(100%) invert(15%) sepia(31%) saturate(1098%) hue-rotate(168deg) brightness(92%) contrast(89%);
}


/* ====================================================================
   MOBILE HAMBURGER MENU
   ====================================================================
   Desktop ≥ 1025px: hamburger hidden, .pn-links inline as before.
   Mobile  ≤ 1024px: nav links collapse into a glass dropdown panel
   that slides down from the pill on tap. The .pn-toggle hamburger
   button is injected by main.js on every redesigned page so the
   markup stays consistent. .pill-nav.is-open expands the panel.
   ==================================================================== */
.pn-toggle{
  display: none;            /* hidden by default; flex on mobile */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pn-toggle-icon{
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.pn-toggle-icon span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--midnight);
  border-radius: 1px;
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              opacity .2s ease,
              top .25s cubic-bezier(.4,0,.2,1);
}
.pn-toggle-icon span:nth-child(1){ top: 0; }
.pn-toggle-icon span:nth-child(2){ top: 6px; }
.pn-toggle-icon span:nth-child(3){ top: 12px; }
.pill-nav.is-open .pn-toggle-icon span:nth-child(1){ top: 6px; transform: rotate(45deg); }
.pill-nav.is-open .pn-toggle-icon span:nth-child(2){ opacity: 0; }
.pill-nav.is-open .pn-toggle-icon span:nth-child(3){ top: 6px; transform: rotate(-45deg); }


/* ====================================================================
   MOBILE — shrink the pill + show the hamburger; .pn-links becomes
   a dropdown panel that slides down from below the pill.
   ==================================================================== */
@media (max-width: 1024px){
  .pill-nav{
    width: calc(100% - 32px);
    max-width: 920px;
  }
  .pn-links{ gap: 18px; }
}
@media (max-width: 768px){
  .pill-nav{
    width: calc(100% - 16px);
    height: 52px;
    padding: 0 6px 0 14px;
    top: 12px;
    margin-bottom: -52px;
  }
  .pn-brand{ height: 28px; }
  .pn-brand-mark{ width: 20px; height: 28px; margin-right: -3px; }
  .pn-brand-imark{ width: 80px; height: 20px; }
  .pn-cta{ height: 32px; padding: 0 10px; font-size: 9px; }
  .pn-toggle{ display: inline-flex; }

  /* Links become a glass dropdown panel below the pill. Hidden by
     default (opacity:0, translateY for slide-in). .is-open on the
     parent .pill-nav reveals it. */
  .pn-links{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 100%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
            backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    padding: 16px 8px;
    box-shadow:
      0 14px 36px -12px rgba(28,43,58,.22),
      0 1px 0 rgba(255,255,255,.70) inset;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.4,0,.2,1),
                transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 51;
  }
  .pill-nav.is-open .pn-links{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .pn-links li{ list-style: none; }
  .pn-links a{
    display: block;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: .16em;
    opacity: 1;
    border-radius: 8px;
    transition: background .18s ease;
  }
  .pn-links a:hover,
  .pn-links a.is-active{ background: rgba(95,129,144,.10); }

  .hero-editorial{ padding: 80px 22px 40px; }
  .hero-editorial.full{ padding: 96px 22px; }
  .hero-editorial.half{
    height: clamp(360px, 50vh, 480px);
    min-height: clamp(360px, 50vh, 480px);
  }
  .heroe-hl{ font-size: clamp(28px, 7vw, 36px); }
  .heroe-sub{ max-width: none; font-size: 14px; }

  /* Hero statement scales smaller for narrow screens */
  body[data-page="home"] .bs-line-hero{
    font-size: clamp(28px, 7vw, 48px);
    max-width: 92%;
  }
}

/* Reduced motion — drop sticky so the hero just scrolls normally. */
@media (prefers-reduced-motion: reduce){
  .hero-editorial{ position: relative; }
}


/* ====================================================================
   HOME HERO AURA — atmospheric depth + drift
   ====================================================================
   Sits inside .hero-editorial.full between the bg image (::before)
   and the soft white wash (::after). Three independently animated
   blurred gradient clouds tinted in the brand palette (Ocean
   #5F8190, Midnight #1C2B3A, Ink Deep #0E1822) drift in different
   directions at different speeds. A fourth layer — a multi-stop
   gradient mesh — shifts position slowly to give the whole field
   a sense of living motion.

   Design intent: the user should feel motion, not see particles.
   No sparkles, no dots, no obvious loops. The cycle durations
   (32s / 41s / 53s / 67s) are deliberately coprime so the
   composition never visibly repeats — every revisit looks slightly
   different, but the motion is always slow enough to never compete
   with the headline, typewriter, or CTA.

   Performance: pure CSS transforms (GPU), no JS, no canvas, no
   WebGL. ease-in-out alternate keeps motion continuous and
   seamless (no jump at loop point). Mobile drops the 3rd cloud
   and tightens the blur radius to stay smooth on lower-end GPUs.

   Reduced motion: every animation halts. Static gradient remains
   so the aesthetic isn't destroyed, just the movement.
   ==================================================================== */
body[data-page="home"] .hero-aura{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-page="home"] .hero-aura-layer{
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  will-change: transform;
  /* contain the layer to its own painting layer for GPU isolation */
  contain: layout paint;
}

/* Cloud 1 — large Ocean tint, top-left start, drifts down-right.
   Brighter alpha + tighter 22s cycle so motion registers in 5-10s. */
body[data-page="home"] .hero-aura-1{
  width: 70vw;
  height: 70vw;
  top: -25%;
  left: -15%;
  background: radial-gradient(circle, rgba(95, 129, 144, .85) 0%, rgba(95, 129, 144, .40) 40%, transparent 72%);
  animation: aura-drift-1 22s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  opacity: .85;
}
@keyframes aura-drift-1{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(26vw, 18vh, 0) scale(1.18); }
}

/* Cloud 2 — medium Midnight tint, right side, drifts up-left.
   Softened (was .90/.45/.80 → .60/.28/.55) so it doesn't darken
   the headline zone — the headline text is also Midnight, so this
   cloud needs to stay lighter than the others to preserve contrast. */
body[data-page="home"] .hero-aura-2{
  width: 60vw;
  height: 60vw;
  top: 30%;
  right: -20%;
  background: radial-gradient(circle, rgba(28, 43, 58, .60) 0%, rgba(28, 43, 58, .28) 40%, transparent 72%);
  animation: aura-drift-2 28s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  opacity: .55;
}
@keyframes aura-drift-2{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-30vw, -16vh, 0) scale(1.22); }
}

/* Cloud 3 — large Ink Deep tint, bottom, drifts up-right */
body[data-page="home"] .hero-aura-3{
  width: 80vw;
  height: 80vw;
  bottom: -30%;
  left: 22%;
  background: radial-gradient(circle, rgba(14, 24, 34, .82) 0%, rgba(14, 24, 34, .38) 40%, transparent 72%);
  animation: aura-drift-3 35s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  opacity: .75;
}
@keyframes aura-drift-3{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(20vw, -24vh, 0) scale(1.14); }
}

/* Mesh — a stationary multi-stop gradient field that slowly shifts
   position. Carries the Midnight → Ink Deep → Ocean palette ripple.
   Coprime 43s cycle so it never syncs with the clouds. */
body[data-page="home"] .hero-aura-mesh{
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse 65% 55% at 22% 30%, rgba(95, 129, 144, .40) 0%, transparent 58%),
    radial-gradient(ellipse 58% 48% at 78% 70%, rgba(28, 43, 58, .28) 0%, transparent 58%),
    radial-gradient(ellipse 72% 62% at 50% 100%, rgba(14, 24, 34, .36) 0%, transparent 58%);
  animation: aura-mesh-shift 43s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
  opacity: .55;
}
@keyframes aura-mesh-shift{
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(12vw, -9vh, 0); }
}

/* Mobile — drop the 3rd cloud + tighten the blur radius so the
   composite stays smooth on mid-range phones. The remaining two
   clouds + mesh still give the field its sense of motion. */
@media (max-width: 768px){
  body[data-page="home"] .hero-aura-layer{
    filter: blur(48px);
  }
  body[data-page="home"] .hero-aura-3{ display: none; }
}

/* Reduced motion — freeze every layer. Static gradient stays so
   the aesthetic is preserved, but no animation cycles. */
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .hero-aura-layer,
  body[data-page="home"] .hero-aura-mesh{
    animation: none !important;
  }
}


/* ====================================================================
   FOOTER SUBSCRIBE BLOCK — layout fallback for the LEGAL PAGES.
   ====================================================================
   The .footer-subscribe / .footer-subscribe-cta layout CSS lives in
   inline <style> blocks on 11 of the project's HTML files (home,
   about, services, team, contact, apply, subscribe, plus the four
   legacy pages: insights/press/process/product). It was NEVER
   inlined on privacy / terms / cookies / security — so those four
   pages render the footer-subscribe markup with no layout, and
   browsers stack everything at the start of the flow → the Login
   and Subscribe buttons end up overlapping the copyright row.

   Mirroring the inline block here so any page that loads
   redesign.css picks up the layout. (The colour overrides for the
   light-glass footer surface that live further up in this file
   still take precedence over these defaults.)
   ==================================================================== */
.footer-subscribe{
  margin-top: 56px;
  padding: 36px 0 32px;
  border-top: 1px solid rgba(95,129,144,.18);
  border-bottom: 1px solid rgba(95,129,144,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-subscribe-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-subscribe-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
}
.footer-subscribe-title{
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.01em;
}
.footer-subscribe-title em{
  font-style: italic;
  font-weight: 300;
}
.footer-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-subscribe-cta{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.footer-subscribe-cta:hover{ transform: translateX(2px); }
.footer-subscribe-arrow{
  font-size: 14px;
  transition: transform .25s ease;
}
.footer-subscribe-cta:hover .footer-subscribe-arrow{ transform: translateX(4px); }


/* ====================================================================
   HOME — make the s-num-bar dividers INSIDE the doctrine-stage
   layer above the sticky home-doctrine. Without this, my added
   `01.C · ORBIT` divider was rendering at the default stacking
   level, which is BELOW the sticky .home-doctrine (z-index:1)
   that pins to the top of the viewport — so as the user scrolled
   through the stage, the divider was hidden behind the pinned
   doctrine cards. Match the z-index of the bridge + orbit
   (z:2) so the divider scrolls UP over the pinned doctrine the
   same way the orbit does.
   ==================================================================== */
.doctrine-stage > .s-num-bar{
  position: relative;
  z-index: 2;
  background: var(--off);
}


/* ====================================================================
   APPLY — make the new SESSION block visible + tighten spacing.

   styles.css sets the reveal classes opacity:0 by default and only
   flips them via `.ap-atlas.is-in` (a scroll-reveal observer that
   only matches the ORIGINAL chat ap-atlas section). My new block
   uses .ap-session, so without overrides the body text reveals but
   the points list (individual <li> items get opacity:0) and the
   CTAs row stayed invisible — they occupied flow space but rendered
   blank, which the user saw as a huge empty gap between the body
   copy and the photograph above the 'Book a session' button.

   Force-show everything inside .ap-session AND shrink the typography
   so the whole block fits a single viewport on a 1080p screen.
   ==================================================================== */
.ap-session .ap-atlas-text,
.ap-session .ap-atlas-points li,
.ap-session .ap-atlas-ctas{
  opacity: 1 !important;
  transform: none !important;
}

/* Tighter spacing — bring photo + CTA closer to the body so the
   whole block fits in one viewport. */
.ap-session{
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.ap-session .ap-atlas-eyebrow{ margin-bottom: 14px; }
.ap-session .ap-atlas-hl{
  font-size: clamp(30px, 4.2vw, 54px);   /* was clamp(40,5.4vw,78) */
  margin-bottom: 18px;
}
.ap-session .ap-atlas-body{ margin-bottom: 16px; font-size: 14px; }
.ap-session .ap-atlas-points{ margin-bottom: 16px; gap: 10px; }
.ap-session .ap-atlas-points li{ font-size: 13px; line-height: 1.6; }
.ap-session > div > .ap-atlas-text > img{
  /* Inline style on the photo was margin:36px 0 36px. After the
     compaction pass that lived just above this rule, the 16px
     top-margin felt cramped against the body / points above —
     bumped to 40px to restore breathing room without putting
     the whole block back over a single viewport's worth. */
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}
/* Remove the default <a> underline on the SESSION CTA — styles.css's
   .ap-atlas-cta is shared with the chat-version of the button, which
   is a <button> element so it never showed the underline. My session
   version is an <a href='sessions.html'> for actual navigation, which
   picks up the browser's default text-decoration. */
.ap-session .ap-atlas-cta{
  text-decoration: none;
}
.ap-session .ap-atlas-cta:hover{
  text-decoration: none;
}


/* ====================================================================
   FOOTER — text legibility overrides for the LIGHT glass variant.
   The previous footer override flipped the surface but didn't
   re-tint a handful of secondary text elements (.ft-tag, .ft-col-t,
   .ft-copy, .ft-legal a, .footer-subscribe-*) — those were still
   on their dark-mode palette (cream / ocean-light) and washed out
   against the off-white glass. This block re-tints every text
   surface in the footer so the section reads cleanly: primary
   type sits at midnight, secondary tokens (column labels, eyebrow
   markers) at ocean, and the small legal links at ocean-dark with
   a midnight hover.
   ==================================================================== */
body[data-page="home"] .footer .ft-tag,
body[data-page="doctrine"] .footer .ft-tag,
body[data-page="mandates"] .footer .ft-tag,
body[data-page="principals"] .footer .ft-tag,
body[data-page="direct"] .footer .ft-tag,
body[data-page="intake"] .footer .ft-tag,
body[data-page="privacy"] .footer .ft-tag,
body[data-page="terms"] .footer .ft-tag,
body[data-page="cookies"] .footer .ft-tag,
body[data-page="security"] .footer .ft-tag,
body[data-page="subscribe"] .footer .ft-tag,
body[data-page="home"] .footer .ft-col-t,
body[data-page="doctrine"] .footer .ft-col-t,
body[data-page="mandates"] .footer .ft-col-t,
body[data-page="principals"] .footer .ft-col-t,
body[data-page="direct"] .footer .ft-col-t,
body[data-page="intake"] .footer .ft-col-t,
body[data-page="privacy"] .footer .ft-col-t,
body[data-page="terms"] .footer .ft-col-t,
body[data-page="cookies"] .footer .ft-col-t,
body[data-page="security"] .footer .ft-col-t,
body[data-page="subscribe"] .footer .ft-col-t{
  color: var(--ocean-dk);
}
/* Copyright line + year span — small but must remain legible. */
body[data-page="home"] .footer .ft-copy,
body[data-page="doctrine"] .footer .ft-copy,
body[data-page="mandates"] .footer .ft-copy,
body[data-page="principals"] .footer .ft-copy,
body[data-page="direct"] .footer .ft-copy,
body[data-page="intake"] .footer .ft-copy,
body[data-page="privacy"] .footer .ft-copy,
body[data-page="terms"] .footer .ft-copy,
body[data-page="cookies"] .footer .ft-copy,
body[data-page="security"] .footer .ft-copy,
body[data-page="subscribe"] .footer .ft-copy,
body[data-page="home"] .footer .ft-year,
body[data-page="doctrine"] .footer .ft-year,
body[data-page="mandates"] .footer .ft-year,
body[data-page="principals"] .footer .ft-year,
body[data-page="direct"] .footer .ft-year,
body[data-page="intake"] .footer .ft-year,
body[data-page="privacy"] .footer .ft-year,
body[data-page="terms"] .footer .ft-year,
body[data-page="cookies"] .footer .ft-year,
body[data-page="security"] .footer .ft-year,
body[data-page="subscribe"] .footer .ft-year{
  color: rgba(28,43,58,.72);
}
/* Legal links (Privacy / Terms / Cookies / Security) — these were
   the most washed-out elements on the light footer. Bump to a
   strong ocean-dark with midnight on hover. */
body[data-page="home"] .footer .ft-legal a,
body[data-page="doctrine"] .footer .ft-legal a,
body[data-page="mandates"] .footer .ft-legal a,
body[data-page="principals"] .footer .ft-legal a,
body[data-page="direct"] .footer .ft-legal a,
body[data-page="intake"] .footer .ft-legal a,
body[data-page="privacy"] .footer .ft-legal a,
body[data-page="terms"] .footer .ft-legal a,
body[data-page="cookies"] .footer .ft-legal a,
body[data-page="security"] .footer .ft-legal a,
body[data-page="subscribe"] .footer .ft-legal a{
  color: var(--ocean-dk);
  opacity: 1;
}
body[data-page="home"] .footer .ft-legal a:hover,
body[data-page="doctrine"] .footer .ft-legal a:hover,
body[data-page="mandates"] .footer .ft-legal a:hover,
body[data-page="principals"] .footer .ft-legal a:hover,
body[data-page="direct"] .footer .ft-legal a:hover,
body[data-page="intake"] .footer .ft-legal a:hover,
body[data-page="privacy"] .footer .ft-legal a:hover,
body[data-page="terms"] .footer .ft-legal a:hover,
body[data-page="cookies"] .footer .ft-legal a:hover,
body[data-page="security"] .footer .ft-legal a:hover,
body[data-page="subscribe"] .footer .ft-legal a:hover{
  color: var(--midnight);
}
/* Subscribe block at the foot — the cream eyebrow and italic
   title were tuned for the dark surface. Flip to midnight so the
   "Stay close to the firm's quiet dossier" reads clearly. */
body[data-page="home"] .footer .footer-subscribe-eyebrow,
body[data-page="doctrine"] .footer .footer-subscribe-eyebrow,
body[data-page="mandates"] .footer .footer-subscribe-eyebrow,
body[data-page="principals"] .footer .footer-subscribe-eyebrow,
body[data-page="direct"] .footer .footer-subscribe-eyebrow,
body[data-page="intake"] .footer .footer-subscribe-eyebrow,
body[data-page="privacy"] .footer .footer-subscribe-eyebrow,
body[data-page="terms"] .footer .footer-subscribe-eyebrow,
body[data-page="cookies"] .footer .footer-subscribe-eyebrow,
body[data-page="security"] .footer .footer-subscribe-eyebrow,
body[data-page="subscribe"] .footer .footer-subscribe-eyebrow{
  color: var(--ocean-dk);
}
body[data-page="home"] .footer .footer-subscribe-title,
body[data-page="doctrine"] .footer .footer-subscribe-title,
body[data-page="mandates"] .footer .footer-subscribe-title,
body[data-page="principals"] .footer .footer-subscribe-title,
body[data-page="direct"] .footer .footer-subscribe-title,
body[data-page="intake"] .footer .footer-subscribe-title,
body[data-page="privacy"] .footer .footer-subscribe-title,
body[data-page="terms"] .footer .footer-subscribe-title,
body[data-page="cookies"] .footer .footer-subscribe-title,
body[data-page="security"] .footer .footer-subscribe-title,
body[data-page="subscribe"] .footer .footer-subscribe-title{
  color: var(--midnight);
}
body[data-page="home"] .footer .footer-subscribe-title em,
body[data-page="doctrine"] .footer .footer-subscribe-title em,
body[data-page="mandates"] .footer .footer-subscribe-title em,
body[data-page="principals"] .footer .footer-subscribe-title em,
body[data-page="direct"] .footer .footer-subscribe-title em,
body[data-page="intake"] .footer .footer-subscribe-title em,
body[data-page="privacy"] .footer .footer-subscribe-title em,
body[data-page="terms"] .footer .footer-subscribe-title em,
body[data-page="cookies"] .footer .footer-subscribe-title em,
body[data-page="security"] .footer .footer-subscribe-title em,
body[data-page="subscribe"] .footer .footer-subscribe-title em{
  color: var(--ocean);
}
/* Subscribe CTAs — Login (primary) + Subscribe (ghost). These
   were on a dark surface previously; on the cream surface they
   need to be clearly readable buttons. */
body[data-page="home"] .footer .footer-subscribe-cta,
body[data-page="doctrine"] .footer .footer-subscribe-cta,
body[data-page="mandates"] .footer .footer-subscribe-cta,
body[data-page="principals"] .footer .footer-subscribe-cta,
body[data-page="direct"] .footer .footer-subscribe-cta,
body[data-page="intake"] .footer .footer-subscribe-cta,
body[data-page="privacy"] .footer .footer-subscribe-cta,
body[data-page="terms"] .footer .footer-subscribe-cta,
body[data-page="cookies"] .footer .footer-subscribe-cta,
body[data-page="security"] .footer .footer-subscribe-cta,
body[data-page="subscribe"] .footer .footer-subscribe-cta{
  color: var(--midnight);
  border-color: rgba(28,43,58,.30);
}
body[data-page="home"] .footer .footer-subscribe-cta-primary,
body[data-page="doctrine"] .footer .footer-subscribe-cta-primary,
body[data-page="mandates"] .footer .footer-subscribe-cta-primary,
body[data-page="principals"] .footer .footer-subscribe-cta-primary,
body[data-page="direct"] .footer .footer-subscribe-cta-primary,
body[data-page="intake"] .footer .footer-subscribe-cta-primary,
body[data-page="privacy"] .footer .footer-subscribe-cta-primary,
body[data-page="terms"] .footer .footer-subscribe-cta-primary,
body[data-page="cookies"] .footer .footer-subscribe-cta-primary,
body[data-page="security"] .footer .footer-subscribe-cta-primary,
body[data-page="subscribe"] .footer .footer-subscribe-cta-primary{
  background: var(--midnight);
  color: var(--off);
  border-color: var(--midnight);
}
body[data-page="home"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="doctrine"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="mandates"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="principals"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="direct"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="intake"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="privacy"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="terms"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="cookies"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="security"] .footer .footer-subscribe-cta-primary:hover,
body[data-page="subscribe"] .footer .footer-subscribe-cta-primary:hover{
  background: var(--ink-deep);
  color: var(--off);
}


/* ====================================================================
   HOME BRIDGE-STAGE — pinned scroll-driven storytelling
   ====================================================================
   Replaces the static .doctrine-orbit-bridge with an immersive
   scroll-tied sequence. The .bridge-track gives 500vh of scroll
   runway; the .bridge-pin (sticky top:0; height:100vh) stays in
   viewport for the full runway. Internal animations (line fades,
   image zoom, image→video crossfade) are driven from main.js by
   reading the stage's getBoundingClientRect().top and mapping it
   to a 0→1 progress that updates CSS custom properties.

   Phase map (managed in main.js):
     0.00 - 0.20  Line 1  "Three paths."
     0.20 - 0.35  Line 2  "Same doctrine."
     0.35 - 0.50  Line 3  "Same firm."
     0.50 - 0.65  Line 4  "One engagement at a time."
     0.65 - 0.85  Image zoom 1 → 1.6
     0.85 - 1.00  Crossfade image → video; video starts looping
   ==================================================================== */
body[data-page="home"] .bridge-stage{
  position: relative;
  background: var(--ink-deep);
  --bridge-zoom: 1;
  --bridge-img-opacity: 1;
  --bridge-video-opacity: 0;
  --bridge-progress: 0;
  --bridge-hint-opacity: 1;
}
body[data-page="home"] .bridge-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
/* Empty 400vh runway that follows the pin in flow. Gives the
   bridge-pin's sticky animations room to play through before the
   orbit s-num-bar + section rise up and cover the pinned video. */
body[data-page="home"] .bridge-runway{
  height: 400vh;
}
/* Cover layer — the s-num-bar and orbit-section now live INSIDE
   .bridge-stage (rather than as siblings). When the bridge-runway
   has scrolled past, these two sit at z-index:1 and visually
   occlude the still-pinned .bridge-pin (z-index:0) below. The
   solid backgrounds ensure the cover is opaque even where the
   sections themselves are transparent. */
body[data-page="home"] .bridge-stage > .s-num-bar{
  position: relative;
  z-index: 1;
  background: var(--off);
}
/* Cover section is now .home-deep-dive (the Belief block) — it
   moved INSIDE the bridge-stage after the orbit was relocated to
   services.html. Same z-index:1 over the sticky bridge-pin (z:0),
   solid white background so it cleanly occludes the video. */
body[data-page="home"] .bridge-stage > .home-deep-dive{
  position: relative;
  z-index: 1;
  background: var(--white);
  /* Soft top-edge shadow so the Belief slab lifts off the released
     video cleanly — same 'rising up over the pinned hero' shadow
     pattern the other redesign pages use on their first scroll-cover
     section. */
  box-shadow:
    0 -24px 60px rgba(28,43,58,.18),
    0 -1px 0 rgba(28,43,58,.08);
}

/* Background stack — image and video layered, both object-fit:cover.
   The image starts visible (opacity 1) and zooms via the JS-driven
   --bridge-zoom variable; the video sits beneath at opacity 0 and
   fades in as --bridge-video-opacity ticks up. */
body[data-page="home"] .bridge-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
body[data-page="home"] .bridge-img,
body[data-page="home"] .bridge-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}
body[data-page="home"] .bridge-img{
  transform: scale(var(--bridge-zoom));
  transform-origin: 50% 58%;
  opacity: var(--bridge-img-opacity);
}
body[data-page="home"] .bridge-video{
  opacity: var(--bridge-video-opacity);
}
body[data-page="home"] .bridge-veil{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,15,22,.35) 0%,
      rgba(8,15,22,.48) 45%,
      rgba(8,15,22,.62) 100%);
  z-index: 1;
}

/* Editorial coord stamps — anchor in the existing design language. */
body[data-page="home"] .bridge-coord-tl,
body[data-page="home"] .bridge-coord-tr{
  position: absolute;
  top: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(138,173,184,.70);
  text-transform: uppercase;
  z-index: 3;
}
body[data-page="home"] .bridge-coord-tl{ left:  clamp(24px, 4vw, 56px); }
body[data-page="home"] .bridge-coord-tr{ right: clamp(24px, 4vw, 56px); }

/* SEQUENTIAL TEXT — each line absolutely-positioned at viewport
   centre. They're all in the same spot; only the .is-active line
   is in-focus (opacity 1, no blur), previous lines stay visible
   but heavily attenuated. */
body[data-page="home"] .bridge-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  padding: 0 24px;
}
body[data-page="home"] .bs-line{
  position: absolute;
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  color: var(--off);
  text-align: center;
  letter-spacing: -.012em;
  line-height: 1.08;
  max-width: 1100px;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1),
    filter .85s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform, filter;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
body[data-page="home"] .bs-line.is-active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
body[data-page="home"] .bs-line.is-past{
  opacity: .18;
  transform: translateY(-22px) scale(.96);
  filter: blur(2px);
}
/* When the hero statement takes over (phase 5), all previous .bs-line
   nodes get .is-cleared — fully invisible, not even a faint trail.
   This is the "next scroll makes all previous text disappear including
   the text layered behind it" beat the user spec'd for the new arc. */
body[data-page="home"] .bs-line.is-cleared{
  opacity: 0;
  transform: translateY(-60px) scale(.94);
  filter: blur(12px);
  pointer-events: none;
}

/* HERO STATEMENT — the climax line that follows the four sequential
   beats. The OPENING phrase ('When growth stalls…') reads as italic
   light type — quiet, observational. The <strong> tail ('You need a
   partner.') is the strong, bold, upright payoff sentence underneath
   it. Originally the weights were swapped; the user requested the
   flip so the assertion lands harder than the setup.

   Heavy text-shadow on both keeps the type readable over the looping
   Sandton video. <strong> breaks to its own line for the punchline. */
body[data-page="home"] .bs-line-hero{
  font-family: var(--f-disp);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--off);
  max-width: 1180px;
  text-shadow: 0 4px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
}
body[data-page="home"] .bs-line-hero strong{
  display: block;
  margin-top: .18em;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -.018em;
  color: var(--off);
}

/* Progress indicator at the bottom — thin rail + label. Fades
   once scroll begins so it doesn't compete with the type. */
body[data-page="home"] .bridge-progress{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: var(--bridge-hint-opacity);
  transition: opacity .4s ease-out;
  pointer-events: none;
}
body[data-page="home"] .bridge-progress-label{
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(138,173,184,.70);
}
body[data-page="home"] .bridge-progress-track{
  width: 160px;
  height: 2px;
  background: rgba(138,173,184,.18);
  border-radius: 1px;
  overflow: hidden;
}
body[data-page="home"] .bridge-progress-fill{
  height: 100%;
  background: rgba(226,240,240,.85);
  width: calc(var(--bridge-progress) * 100%);
  transition: width .12s linear;
}

@media (max-width: 768px){
  body[data-page="home"] .bridge-runway{ height: 300vh; }
  body[data-page="home"] .bridge-coord-tl,
  body[data-page="home"] .bridge-coord-tr{ top: 20px; font-size: 9px; }
  body[data-page="home"] .bs-line{
    font-size: clamp(28px, 8vw, 48px);
    max-width: 92%;
  }
  body[data-page="home"] .bridge-progress{ bottom: 28px; }
  body[data-page="home"] .bridge-progress-track{ width: 120px; }
}

/* Reduced motion — drop the pin runway. Show all four lines in a
   simple vertical stack with no zoom or video. */
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .bridge-runway{ height: 0; display: none; }
  body[data-page="home"] .bridge-pin{
    position: relative;
    top: auto;
    height: auto;
    min-height: 70vh;
    padding: 80px 24px;
  }
  body[data-page="home"] .bridge-video{ display: none; }
  body[data-page="home"] .bridge-img{
    transform: none;
    opacity: 1;
  }
  body[data-page="home"] .bs-line{
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
    margin-bottom: 16px;
  }
  body[data-page="home"] .bridge-progress{ display: none; }
}

/* ====================================================================
   404 ERROR PAGE — light redesign chrome. Inherits the same body
   pastel + page off-white as the other redesigned pages; main.js
   injects the pill-nav at the top of .page.redesign on data-page=error.
   ==================================================================== */
body[data-page="error"]{ background: #D8E3E8; }
body[data-page="error"] .page.redesign{
  background: var(--off);
  border-radius: 0;
  margin: 0;
}