:root {
  --cream: #F5EFE4;          /* warm parchment */
  --cream-deep: #ECE4D2;     /* deeper cream for elevated surfaces */
  --navy: #000000;           /* primary surface — was navy, now black */
  --navy-deep: #0A0A0A;      /* deepest — barely-off-black for layering */
  --gold: #B8BFC9;           /* brushed silver — brand accent (legacy name; not yellow) */
  --gold-deep: #6F7783;
  --gold-soft: rgba(184, 191, 201, 0.32);
  --red: #8B0000;            /* brand red — buttons/accents only; the ONE source for red */
  --rule: rgba(0, 0, 0, 0.14);
  --rule-soft: rgba(0, 0, 0, 0.06);
  --rule-gold: rgba(184, 191, 201, 0.22);
  --ink: #000000;
  --dim: rgba(0, 0, 0, 0.62);
  --dim2: rgba(0, 0, 0, 0.48);
  --footer-h: 140px;         /* shared: footer min-height + photo banner height */
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Clear scrollbar — invisible track and thumb, scroll still works */
html { scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; overflow-x: clip; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body {
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Mobile / in-app-webview (LinkedIn, IG) scroll feel:
     - contain overscroll so the rubber-band never reveals the red html bg
     - lock text auto-sizing so iOS doesn't inflate type on rotate/scroll
     - kill the grey tap-flash for a native, intentional feel */
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* CROSS-PAGE NAVIGATION — nav.js does SPA-style instant <main> swaps.
   No CSS fade between pages — content is on screen the moment the
   fetch resolves, so the body background never gets exposed. */
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.smcaps { font-family: 'Cormorant SC', Georgia, serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--ink); text-decoration: none; transition: opacity 0.25s, color 0.25s; }
@media (hover: hover) { a:hover { color: var(--gold-deep); opacity: 1; } }

/* TEXT WRAP — prevent single-word widows in body copy, balance line lengths in headings.
   Applies on every breakpoint so paragraphs render cleanly on both desktop and mobile. */
h1, h2, h3, .hero-title, .page-head, .page-body-inner h2 { text-wrap: balance; }
p, .hero-sub, .page-sub, .page-body-inner p, .hero-etymology { text-wrap: pretty; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--navy);
  border-bottom: 1px solid var(--rule-gold);
  z-index: 50;
  padding: 1.25rem 0;
  /* fixed keeps the nav pixel-locked to the visual viewport edge, which is
     the only reliable posture in iOS in-app browsers (LinkedIn, IG, etc.)
     where the browser chrome slides in/out during scroll and causes sticky
     to recalculate position, producing a visible shift. A fixed element
     tracks the visual viewport directly on the GPU compositor. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
/* Push body content below the fixed nav. --nav-h is set by a ResizeObserver
   in nav.js so it tracks the live height at every breakpoint. */
body { padding-top: var(--nav-h, 80px); }

/* Short pages fill the viewport so the red html backstop reveals only on
   deliberate overscroll, never as a strip below the footer. */
main { min-height: calc(100vh - var(--nav-h, 80px)); background: var(--cream); }

/* IN-APP-BROWSER SCROLL FIX (paired with nav.js).
   When .has-scroll-root is set, the document itself stops scrolling and all
   scrolling happens inside .scroll-root — a fixed, full-height container.
   With no document scroll, iOS in-app browsers (LinkedIn, IG) never collapse
   their chrome bar, so the fixed nav can never be dragged/jumped during the
   scroll. The class is added by JS only after the container is built, so a
   failure can never leave the page stuck. */
html.has-scroll-root,
html.has-scroll-root body {
  height: 100%;
  overflow: hidden;
}
html.has-scroll-root body { padding-top: 0; }
.scroll-root {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  padding-top: var(--nav-h, 80px);
}
.nav-inner {
  max-width: none;
  margin: 0;
  padding: 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.nav-mark { justify-self: start; }
.nav-links { justify-self: center; }
.nav-lang { justify-self: end; }
.nav-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.nav-right .nav-lang { justify-self: auto; }
.nav-social-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 239, 228, 0.62);
  transition: color 0.2s, opacity 0.2s;
}
@media (hover: hover) { .nav-social-icon:hover { color: var(--gold); opacity: 1; } }
.nav-social-icon svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.nav-mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav-mark img {
  display: block;
  height: 40px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 3rem;
  align-items: center;
}
.nav-link {
  font-family: 'Cormorant SC', serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(245, 239, 228, 0.62);
  letter-spacing: 0.18em;
}
@media (hover: hover) { .nav-link:hover { color: var(--cream); } }
.nav-link.active { color: var(--cream); }
.nav-cta {
  font-family: 'Cormorant SC', serif;
  padding: 0.7rem 1.4rem;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  border: 1px solid var(--gold);
}
@media (hover: hover) { .nav-cta:hover { background: var(--gold-deep); color: var(--cream); border-color: var(--gold-deep); opacity: 1; } }
.nav-lang {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(245, 239, 228, 0.62);
  letter-spacing: 0.18em;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(245, 239, 228, 0.18);
}
@media (hover: hover) { .nav-lang:hover { border-color: var(--gold); color: var(--cream); } }
.nav-lang-active {
  color: var(--cream);
  font-weight: 500;
}

/* HERO — fills the viewport below the nav, single-screen layout */
.hero {
  min-height: calc(100vh - 96px);
  min-height: calc(100svh - 96px);
  padding: 4rem 0;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cream);
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.32em;
  margin-bottom: 3rem;
}
.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.5rem, 7.5vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--navy);
  margin-bottom: 2.5rem;
  max-width: 1000px;
}
.hero-title em {
  font-style: italic;
  color: inherit;
  font-weight: 500;
}
.hero-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.82);
  line-height: 1.55;
  max-width: 720px;
  margin-bottom: 3rem;
  /* Cream halo lifts the line off the halftone map so the dots (e.g. behind
     Africa) don't blur into the glyphs — reads as softly lit, not boxed. */
  text-shadow: 0 0 0.5em var(--cream), 0 0 0.45em var(--cream), 0 0 0.22em var(--cream);
}
/* Hero CTAs — a refined directory, not boxed buttons. Hairline-separated
   rows, each a small-caps label with a gold arrow that advances on hover.
   Reads like an institutional index instead of a template's button stack. */
.hero-ctas {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  border-top: 1px solid var(--rule-gold);
}
.hero-ctas .btn {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.1rem;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--rule-gold);
  color: var(--ink);
  letter-spacing: 0.2em;
  transition: padding-left 0.35s ease, color 0.35s ease;
}
.hero-ctas .btn::after {
  content: '\2192';
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--gold-deep);
  transition: transform 0.35s ease;
}
.hero-ctas .btn:active,
.hero-ctas .btn:focus-visible { background: none;
  color: var(--gold-deep);
  border-color: var(--rule-gold);
  padding-left: 0.7rem;
  opacity: 1;
  outline: none; }
    @media (hover: hover) { .hero-ctas .btn:hover { background: none;
  color: var(--gold-deep);
  border-color: var(--rule-gold);
  padding-left: 0.7rem;
  opacity: 1;
  outline: none; } }
.hero-ctas .btn:active::after { transform: translateX(6px); }
    @media (hover: hover) { .hero-ctas .btn:hover::after { transform: translateX(6px); } }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.8rem;
  font-family: 'Cormorant SC', serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  transition: all 0.3s;
  border-radius: 0;
}
.btn-primary { background: var(--navy); color: var(--cream); border: 1px solid var(--navy); }
@media (hover: hover) { .btn-primary:hover { background: transparent; color: var(--navy); opacity: 1; } }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--rule);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn-ghost:hover { background: var(--red); color: var(--cream); border-color: var(--red); opacity: 1; } }
.btn-ghost:active,
.btn-ghost:focus-visible {
  background: var(--red);
  color: var(--cream);
  border-color: var(--red);
  outline: none;
}

.hero-etymology {
  margin-top: 3.25rem;
  padding-top: 1.4rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--dim2);
  max-width: 480px;
}
.hero-etymology strong {
  color: var(--navy);
  font-weight: 500;
  font-style: normal;
  font-family: 'Cormorant SC', serif;
  letter-spacing: 0.06em;
}
.hero-etymology span { color: var(--dim2); }

/* RULE */
.rule-gold {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.rule-gold::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-soft) 30%, var(--gold-soft) 70%, transparent);
}

/* SECTION */
section.block { padding: 7rem 0; }
.label {
  font-family: 'Cormorant SC', serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.32em;
  margin-bottom: 2rem;
  display: inline-block;
}
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1.75rem;
  max-width: 820px;
}
.section-title em { font-style: italic; color: inherit; font-weight: 500; }
.section-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: 3rem;
}

/* COMING SOON — single-screen hero on placeholder pages */
.coming-soon {
  min-height: calc(100vh - 96px - 220px);
  min-height: calc(100svh - 96px - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2.5rem;
  background: var(--cream);
}
.coming-soon .page-hero-inner {
  max-width: 760px;
  width: 100%;
}
.coming-soon .page-eyebrow {
  margin-bottom: 1.75rem;
}
.coming-soon .page-head { margin-bottom: 1.5rem; }
.coming-soon .page-sub { margin: 0 auto; }

/* INTERIOR PAGE — used by /ethics, /products, /mission */
.page-hero {
  padding: 7rem 0 4rem;
  position: relative;
  background: var(--cream);
}
.page-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}
/* Interior hero backdrop — the halftone world, quieter than the landing hero */
.page-hero-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}
.page-hero-map img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.page-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.32em;
  margin-bottom: 2rem;
}
.page-head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--navy);
  margin-bottom: 2rem;
  max-width: 1000px;
}
.page-head em {
  font-style: italic;
  color: inherit;
  font-weight: 500;
}
.page-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  max-width: 720px;
  line-height: 1.6;
}
.page-sub.hero-tight { max-width: 605px; }
.page-body {
  padding: 4rem 0 3rem;
  border-top: 1px solid var(--rule-gold);
  margin-top: 0;
  background: var(--cream);
}
.page-body-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink);
}
.page-body-inner p { margin-bottom: 1.75rem; }
/* Standfirst — the opening paragraph reads as an editorial lede */
.page-body-inner > p:first-child {
  font-size: 1.42rem;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.55;
  margin-bottom: 2.75rem;
}
.page-body-inner h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  font-style: italic;
  color: var(--navy);
  margin: 3.25rem 0 1rem;
  padding-top: 1.6rem;
  position: relative;
  letter-spacing: -0.012em;
}
/* gold hairline above each section head */
.page-body-inner h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-soft), transparent);
}
/* Roman section numerals, set in claret small caps */
.sec-num {
  font-family: 'Cormorant SC', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--red);
  letter-spacing: 0.06em;
  margin-right: 0.35rem;
}
.page-body-inner em { font-style: italic; color: inherit; font-weight: 500; }
.page-body-inner strong { color: inherit; font-weight: 600; font-style: normal; }
.page-body-inner a.link,
.page-sub a.link { color: var(--navy); border-bottom: 1px solid var(--gold); }
@media (hover: hover) { .page-body-inner a.link:hover,.page-sub a.link:hover { color: var(--gold-deep); } }

/* TRENDS — editorial table layout */
.trends {
  margin-top: 4rem;
  border-top: 1px solid var(--rule-gold);
}
.trend {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4rem;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--rule-gold);
  align-items: start;
}
.trend-meta {
  text-align: right;
  padding-right: 3rem;
  border-right: 1px solid var(--rule-soft);
}
.trend-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
  margin-bottom: 0.75rem;
}
.trend-title {
  font-family: 'Cormorant SC', serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 0.22em;
}
.trend-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.65;
  max-width: 680px;
}
.trend-body strong {
  color: var(--gold-deep);
  font-weight: 500;
  font-style: normal;
}

/* PRODUCT BRIDGE — full-bleed cream-deep */
.product-section {
  background: var(--cream-deep);
  padding: 8rem 0;
  margin-top: 3rem;
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
}
.product-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2.5rem;
  text-align: center;
}
.product-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.32em;
  margin-bottom: 2rem;
}
.product-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 1.75rem;
  color: var(--navy);
}
.product-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.product-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto 3rem;
}
.product-ctas { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* PRODUCT DIRECTORY — the line, as an editorial index */
.product-directory { padding-top: 1.5rem; }
.product-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  border-top: 1px solid var(--rule-gold);
}
.product-row { border-bottom: 1px solid var(--rule-gold); }
.product-row-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0.25rem;
  transition: padding 0.3s, background 0.3s;
}
@media (hover: hover) { a.product-row-link:hover { background: var(--cream-deep); padding-left: 1.25rem; padding-right: 1.25rem; } }
.product-row-main {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  min-width: 0;
}
.product-no {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.product-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.product-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--dim);
  max-width: 50ch;
  margin: 0;
}
.product-row-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-shrink: 0;
}
.product-status {
  font-family: 'Cormorant SC', serif;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--dim2);
  white-space: nowrap;
}
.product-status.is-live { color: var(--gold-deep); }
.product-arrow {
  font-size: 0.9rem;
  color: var(--gold-deep);
  transition: transform 0.3s;
}
@media (hover: hover) { a.product-row-link:hover .product-arrow { transform: translateX(5px); } }

@media (max-width: 640px) {
  .product-row-link { flex-direction: column; gap: 1rem; padding: 2rem 0; }
  @media (hover: hover) { a.product-row-link:hover { padding-left: 0; padding-right: 0; } }
  .product-row-main { gap: 1rem; }
  .product-row-meta { padding-left: calc(0.78rem + 1.5rem); }
}

/* CHARTER */
.charter-section { padding: 8rem 0; }
.charter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.charter-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule-gold);
}
.charter-stat {
  padding: 2.75rem 1.25rem;
  text-align: center;
  border-right: 1px solid var(--rule-gold);
}
.charter-stat:last-child { border-right: none; }
.charter-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.charter-stat-label {
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: 0.24em;
}
.charter-stat-currency {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
  vertical-align: 0.65em;
}

/* FOOTER — plain black strip, content stamped in the bottom-right */
footer {
  border-top: 1px solid var(--rule-gold);
  /* Vertical padding trimmed (was 1.75/1.5) to absorb the legal fine-print line,
     so the footer keeps its original height — 140px beside the photo banner, and
     content-height elsewhere — rather than growing. */
  padding: 1.15rem 0 1rem;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  justify-content: flex-end;
  /* Paint 1px of footer color past its own box edge — masks the subpixel
     rounding gap that reveals the cream body background as a hairline on
     HiDPI screens, without affecting layout/scrollHeight. */
  box-shadow: 0 1px 0 0 var(--navy);
}
/* Only give the footer the tall min-height when a photo banner follows it,
   so pages without a banner keep a footer sized to its content (not larger). */
footer:has(+ .footer-banner) {
  min-height: var(--footer-h);
}
.footer-inner {
  margin: 0;
  padding: 0 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  max-width: max-content;
}
.footer-inner > div { text-align: right; }
.footer-inner .footer-regions { margin-left: auto; max-width: 640px; }
.footer-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.tm {
  font-size: 0.45em;
  font-weight: 400;
  font-style: normal;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.05em;
  opacity: 0.7;
}
.footer-pun {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(245, 239, 228, 0.78);
}
.footer-hq {
  display: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-style: normal;
  color: rgba(245, 239, 228, 0.5);
}
.footer-meta {
  font-family: 'Cormorant SC', serif;
  font-size: 0.62rem;
  color: rgba(245, 239, 228, 0.62);
  letter-spacing: 0.18em;
  text-align: right;
}
/* Left-align the copyright + legal block under "United States" (the regions
   line) instead of hugging the right edge. align-self:stretch widens the meta
   cell to the full footer column; the two-class selector is needed to beat
   `.footer-inner > div { text-align: right }` (0,1,1) on the text alignment. */
.footer-inner > .footer-meta {
  align-self: stretch;
  text-align: left;
}
.footer-meta-line { line-height: 1.6; }
.footer-meta-dim { color: rgba(245, 239, 228, 0.42); opacity: 0.9; font-size: 0.6rem; margin-top: 0; }
/* Legal links — kept deliberately recessive so they read as fine print and blend
   into the black footer rather than competing with the brand line above them. */
.footer-legal {
  font-family: 'Cormorant SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(245, 239, 228, 0.34);
  margin-top: 0.2rem;
  line-height: 1.45;
}
.footer-legal a { color: inherit; }
@media (hover: hover) { .footer-legal a:hover { color: rgba(245, 239, 228, 0.7); } }
.footer-regions {
  font-family: 'Cormorant SC', serif;
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(245, 239, 228, 0.55);
  letter-spacing: 0.18em;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--rule-gold);
  max-width: 640px;
  line-height: 1.6;
}
.footer-social {
  display: none;                        /* hidden on desktop — shown only on mobile (≤ 640px) */
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.6rem;
  color: rgba(245, 239, 228, 0.62);
}
.footer-social a {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color 0.2s, opacity 0.2s;
}
@media (hover: hover) { .footer-social a:hover { color: var(--cream); opacity: 1; } }
.footer-social svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }

/* WORLD MAP BACKGROUND — halftone world map (generated SVG) filling the
   hero's cream field. Ink dots on a hex grid with claret hub cities; the
   edge vignette and the cream lift behind the headline column are baked
   into the dot radii, so no CSS blending or masking is needed and the
   vector stays crisp at any pixel density. */
.world-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.world-map-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.world-map-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* WORLD MAP REGIONAL TINT — color blend over halftone dots per geographic zone */
.world-map-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.world-map-tint svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* BOTTOM RED — branded screen below the footer */
.bottom-red {
  height: 120px;
  background: var(--red);
  width: 100%;
}

/* FOOTER BANNER — page-specific photographic strip below the footer (replaces .bottom-red on
   pages where a brand image lands harder than the flat red). 180px tall, full-width, cover-fit
   so the photo crops gracefully across viewports. */
.footer-banner {
  width: 100%;
  height: var(--footer-h);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Per-banner background-color set BEFORE the JPG loads (eliminates red flash from body bg).
   Neutral dark grays since photos render B&W via the grayscale filter below.
   image-set() serves WebP to modern browsers (~33–49% smaller); JPG line above
   is the fallback for the rare browser without image-set/WebP support. */
.footer-banner--brickell {
  background-image: url('brand/brickell.jpg?v=3');
  background-image: image-set(url('brand/brickell.webp?v=3') type('image/webp'), url('brand/brickell.jpg?v=3') type('image/jpeg'));
  background-color: #1a1a1a;
}
.footer-banner--palmetto {
  background-image: url('brand/palmetto.jpg?v=3');
  background-image: image-set(url('brand/palmetto.webp?v=3') type('image/webp'), url('brand/palmetto.jpg?v=3') type('image/jpeg'));
  background-color: #2a2a2a;
  background-position: center;
}
.footer-banner--energy {
  background-image: url('brand/energy-industry.jpg?v=3');
  background-image: image-set(url('brand/energy-industry.webp?v=3') type('image/webp'), url('brand/energy-industry.jpg?v=3') type('image/jpeg'));
  background-color: #0a0a0a;
  background-position: center;
}
.footer-banner--austin-window {
  background-image: url('brand/austin-window.jpg?v=4');
  background-color: #000000;
  background-position: center 60%;
}
.footer-banner--products-interior {
  background-image: url('brand/products-interior.jpg?v=8');
  background-color: #000000;
  background-position: center 48%;
}
.footer-banner--bull {
  background-image: url('brand/bull.jpg?v=12');
  background-color: #080808;
  background-position: center 82%;
}
.footer-banner--benson {
  background-image: url('brand/benson-red-river.jpg?v=1');
  background-color: #1a1a1a;
  background-position: center;
}
.footer-banner--mount-rushmore {
  background-image: url('brand/mount-rushmore.jpg?v=8');
  background-color: #0a0c0a;
  background-position: center 30%;
}
.footer-banner--wtc {
  background-image: url('brand/wtc-night.jpg?v=2');
  background-color: #080c12;
  background-position: center 50%;
}
.footer-banner--empire-state {
  background-image: url('brand/empire-state.jpg?v=3');
  background-color: #000000;
  background-position: center 80%;
}
.footer-banner--marfa-horizon {
  background-image: url('brand/marfa-horizon.jpg?v=1');
  background-color: #080808;
  background-position: center 50%;
}
.footer-banner--rig-energy {
  background-image: url('brand/rig-energy.jpg?v=1');
  background-color: #080c10;
  background-position: center 50%;
}
.footer-banner--private-jet {
  background-image: url('brand/private-jet.jpg?v=4');
  background-color: #08080c;
  background-position: center 50%;
}
.footer-banner--rushmore-horizon {
  background-image: url('brand/rushmore-horizon.jpg?v=5');
  background-color: #0a0c0a;
  background-position: center 11%;
}
.footer-banner--palm-beach {
  background-image: url('brand/palm-beach.jpg?v=6');
  background-color: #080c0a;
  background-position: center 75%;
}
.footer-banner--lovefield {
  background-image: url('brand/lovefield.jpg?v=4');
  background-color: #0a0c10;
  background-position: center 50%;
}
/* B&W treatment — institutional, restrained, matches the B&W brand aesthetic */
.footer-banner--brickell, .footer-banner--palmetto, .footer-banner--energy, .footer-banner--austin-window, .footer-banner--products-interior, .footer-banner--bull, .footer-banner--benson, .footer-banner--mount-rushmore, .footer-banner--wtc, .footer-banner--empire-state, .footer-banner--marfa-horizon, .footer-banner--rig-energy, .footer-banner--private-jet, .footer-banner--rushmore-horizon, .footer-banner--palm-beach, .footer-banner--lovefield { filter: grayscale(100%) brightness(0.78); }

/* CROP LOCK (≤1440px) — keep the same top-to-bottom slice on phones/laptops.
   With `cover` over a fixed-height strip, the visible VERTICAL slice is tied to
   viewport WIDTH: a narrow phone scales the photo down and reveals a much
   TALLER band than desktop (the "untailored / taller version" bug). Instead we
   anchor background-size WIDTH to the strip height (--footer-h), using the
   desktop reference ratio 1440/140. That fixes the displayed image HEIGHT
   relative to the strip, so the identical vertical slice (the refined desktop
   crop) shows at EVERY width — only the horizontal extent crops in as the
   screen narrows. This is aspect-independent, so it's correct for every banner
   at once, and the computed width stays ≥ viewport below 1440px, so there are
   never side gaps. background-position (center Y%) still anchors the slice.
   Above 1440px the base `cover` rule is left untouched. */
@media (max-width: 1440px) {
  .footer-banner { background-size: calc(var(--footer-h) * 1440 / 140) auto; }
}

/* HTML BG — brand red. Shows only in overscroll (rubber-band above the
   nav and below the .bottom-red strip), because the body's cream
   background covers the entire viewport in normal flow. No first-paint
   flash because body paints cream over html in the same frame, and the
   JS nav-fade keeps body opaque except for the deliberate 220 ms fade
   between page swaps. */
/* Page floor (shown below the black footer / on overscroll). Default black so
   the page ends seamlessly with the footer — no cream/white line. */
html { background: #000000; }
html.floor-red { background: #000000; } /* floor is always black now — no red */

/* RED BACKSTOP — handled entirely by html's red background (above) plus
   overscroll-behavior-y: none, which stops the rubber-band from ever
   revealing anything behind the content. No fixed pseudo-element is used:
   a position:fixed layer repaints on every scroll frame in mobile in-app
   webviews (it fights the collapsing URL bar), which is a primary source
   of scroll stutter. html + body are both var(--red), so any area content
   doesn't cover is already brand red. */

/* MOBILE MENU TOGGLE (hamburger) — hidden on desktop, shown ≤640px.
   Open state fades the three bars out and reveals the interlocked double-X
   (Exxon-style XX), matching the toggle on thebiglease.com. */
.nav-toggle{
  display: none; position: relative;
  justify-self: end; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-right: 6px;
  padding: 0; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars{ position: relative; width: 22px; height: 14px; }
.nav-toggle-bars i{
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: rgba(245,239,228,0.85); border-radius: 2px;
  transition: opacity .2s ease, transform .28s ease;
}
.nav-toggle-bars i:nth-child(1){ top: 0; }
.nav-toggle-bars i:nth-child(2){ top: 6px; }
.nav-toggle-bars i:nth-child(3){ top: 12px; }
nav.is-menu-open .nav-toggle-bars i{ opacity: 0; }
.nav-toggle-xx{
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .28s ease;
}
.nav-toggle-xx polyline{ fill: none; stroke: var(--gold); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
nav.is-menu-open .nav-toggle-xx{ opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* RESPONSIVE — mobile-first tiers */

/* Tablet ≤ 900px — tighten nav spacing, slightly smaller logo */
@media (max-width: 900px) {
  .nav-inner { gap: 1.25rem; padding: 0 0.5rem; }
  .nav-mark img { height: 40px; }
  .nav-links { gap: 1.5rem; }
  .nav-link { font-size: 0.66rem; letter-spacing: 0.14em; }
  .nav-lang { font-size: 0.62rem; padding: 0.35rem 0.55rem; letter-spacing: 0.14em; }
  .hero { padding: 3rem 0; }
  .hero-inner { padding: 0 1.25rem; }
  .page-hero, .page-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* outer section padding takes over — inner gutters would double-indent */
  .page-hero-inner, .page-body-inner { padding-left: 0; padding-right: 0; }
  .footer-inner { padding: 0 1.25rem; gap: 2rem; }
  .splash-logo { width: clamp(220px, 60vw, 360px); }
}

/* Large phone ≤ 640px — drop logo size further, tighter type */
@media (max-width: 640px) {
  /* Phones run the footer and its photo banner at half the desktop height
     (--footer-h drives both the banner height and the footer min-height).
     Footer type and the social icon are sized down below to fit the shorter
     strip. */
  :root { --footer-h: 70px; }
  footer { padding: 0.6rem 0 0.55rem; }
  .footer-social { display: flex; }
  /* The legal line sits in the meta cell beside the social icons, which already
     set the row height — so it adds no footer height on mobile. Just size it down
     to match the small-print scale of the mobile footer. */
  .footer-legal { font-size: 0.46rem; margin-top: 0.1rem; line-height: 1.4; letter-spacing: 0.12em; }

  /* Hamburger nav. Logo left, the double-X toggle right; every section (plus
     the language toggle) lives in a slide-down panel under the bar. The whole
     hamburger treatment is gated on nav.has-toggle, which nav.js adds once the
     button is injected — so if JS is absent the inline-link fallback further
     below keeps the primary sections reachable. */
  .nav-inner { grid-template-columns: 1fr auto; gap: 0.5rem; padding: 0 1.1rem; }
  .nav-mark { justify-self: start; }
  .nav-mark img { height: 30px; }
  .nav-right { display: none; }

  nav.has-toggle .nav-toggle { display: flex; }
  /* Links → full-bleed drop panel below the bar, collapsed until open. It is
     absolutely positioned against the fixed <nav>, so it overlays content and
     never changes --nav-h (the bar height stays constant). */
  /* Bottom sheet — the panel rises from the bottom edge of the screen rather
     than dropping from the bar. The fixed <nav> is transformed (translateZ(0)
     for the in-app-browser scroll fix), so it is the containing block for any
     fixed descendant — bottom:0 would pin to the bar, not the screen. We anchor
     the panel's top edge at the viewport bottom (100dvh) instead, leave it
     translated fully below the fold when closed, then slide it up by its own
     height on open so it settles flush against the bottom of the screen. */
  nav.has-toggle .nav-links{
    position: fixed; bottom: auto; left: 0; right: 0; width: 100%;
    top: 100vh; top: 100dvh;
    justify-self: stretch;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--navy);
    border-top: 1px solid var(--rule-gold);
    box-shadow: 0 -18px 44px rgba(0,0,0,0.5);
    padding: 0.5rem 0 calc(0.6rem + env(safe-area-inset-bottom));
    max-height: 82vh; overflow-y: auto;
    transform: translateY(0); opacity: 0; visibility: hidden;
    transition: transform .36s cubic-bezier(0.4,0,0.2,1), opacity .24s ease, visibility 0s linear .36s;
  }
  nav.has-toggle.is-menu-open .nav-links{
    transform: translateY(-100%); opacity: 1; visibility: visible;
    transition: transform .4s cubic-bezier(0.16,1,0.3,1), opacity .26s ease;
  }
  nav.has-toggle .nav-links .nav-link{
    display: block; width: 100%; text-align: left; margin: 0;
    padding: 0.95rem 1.6rem;
    font-size: 0.86rem; letter-spacing: 0.16em;
    color: rgba(245,239,228,0.78);
    border-bottom: 1px solid rgba(245,239,228,0.06);
  }
  nav.has-toggle .nav-links .nav-link:last-of-type{ border-bottom: 0; }
  nav.has-toggle .nav-links .nav-lang{
    display: inline-block; align-self: start;
    margin: 0.85rem 1.6rem 0.55rem;
  }

  /* No-JS fallback: inline four-link bar (Logistics/Governance/lang drop to
     keep the row clean). Only applies when nav.js did NOT enhance the nav. */
  nav:not(.has-toggle) .nav-links{
    position: static; justify-self: end; width: auto;
    flex-direction: row; align-items: center; gap: 0.85rem;
    margin: 0 0.35rem 0 0; background: none; border: 0; padding: 0;
    max-height: none; overflow: visible; opacity: 1; visibility: visible;
  }
  nav:not(.has-toggle) .nav-links .nav-link{
    display: block; width: auto; text-align: center; margin: 0; border: 0; padding: 0;
    font-size: 0.6rem; letter-spacing: 0.08em; white-space: nowrap;
  }
  nav:not(.has-toggle) .nav-link[href="industries"],
  nav:not(.has-toggle) .nav-link[href="governance"],
  nav:not(.has-toggle) .nav-links .nav-lang { display: none; }
  /* Top-align the hero on phones so the headline sits high instead of
     sagging into the vertical center with a big empty void above it. */
  .hero { align-items: flex-start; }
  .hero-title { font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.06; }
  .hero-sub { font-size: 1.05rem; }
  .hero-eyebrow { margin-bottom: 1.75rem; font-size: 0.7rem; letter-spacing: 0.24em; }
  .hero-etymology { margin-top: 2.25rem; font-size: 0.78rem; }
  /* Directory rows, sized down for phones */
  .hero-ctas { max-width: none; }
  .hero-ctas .btn { padding: 1rem 0.05rem; font-size: 0.64rem; letter-spacing: 0.18em; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.68rem; letter-spacing: 0.2em; }
  .page-head { font-size: clamp(2.4rem, 10vw, 3.5rem); }
  .page-sub { font-size: 1.05rem; }
  .page-hero { padding: 4rem 1.25rem 2rem; }
  .page-body { padding: 3rem 1.25rem 2.5rem; margin-top: 0; }
  .page-body-inner > p:first-child { font-size: 1.22rem; }
  .page-body-inner { font-size: 1.05rem; padding: 0; }
  .page-body-inner h2 { font-size: 1.55rem; margin-top: 2.25rem; }
  .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.12rem 0.9rem;
  }
  .footer-inner > div:first-child { grid-column: 1 / -1; text-align: left; }
  .footer-meta {
    grid-column: 1;
    align-self: center;
    font-size: 0.5rem;
  }
  .footer-social {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 0.55rem;
  }
  .footer-social a, .footer-social svg { width: 18px; height: 18px; }
  .footer-meta, .footer-meta-line { text-align: left; }
  .footer-regions {
    font-size: 0.5rem; letter-spacing: 0.14em;
    margin-top: 0.16rem; padding-top: 0.16rem;
  }
  .footer-brand { text-align: right; font-size: 0.82rem; }
  .footer-pun { font-size: 0.66rem; }
  .footer-hq { display: none; }
  .splash-logo { width: clamp(200px, 70vw, 320px); }
}

/* Small phone ≤ 440px — drop EN/ES, smallest type */
@media (max-width: 440px) {
  .nav-mark img { height: 26px; }
  .nav-inner { grid-template-columns: 1fr auto; gap: 0.4rem; padding: 0 0.7rem; }
  /* Tightest no-JS fallback only; the hamburger panel keeps its ≤640 sizing. */
  nav:not(.has-toggle) .nav-links { gap: 0.6rem; margin-right: 0.3rem; }
  nav:not(.has-toggle) .nav-link { font-size: 0.54rem; letter-spacing: 0.04em; }
  .hero { padding: 3rem 0 2.5rem; }
  /* Imminent / coming-soon hero on phones: keep it centered, but weight the
     top padding so the block sits lower on the screen (founder: "bring it down
     more"). The taller top pad pushes the flex-centred content down. */
  .coming-soon {
    padding: 7.5rem 1.25rem 3rem;
    min-height: calc(100vh - 96px - 280px);
    min-height: calc(100svh - 96px - 280px);
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .coming-soon .page-hero-inner { margin: 0 auto; text-align: center; }
}

/* Landing world map now shows on phones via the portrait mobile SVG
   (world-halftone-mobile.svg) — the world sits low in the hero, beneath the
   headline column. Interior-page maps stay hidden (they crop awkwardly on
   the shorter interior heroes). */
@media (max-width: 640px) {
  /* Full-bleed across the whole hero, dialed back to a faint watermark so
     the dotted continents fill the white space without competing with type. */
  .world-map-bg { opacity: 0.42; }
  .page-hero-map { display: none; }
}

/* SPLASH — 2s navy hold on first visit per session, suppressed for in-session nav */
.no-splash .splash { display: none; }
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Snappy on arrival (esp. from social in-app browsers, which are always a
     "first visit"). Sub-second so the brand moment registers without ever
     reading as a "wait"; still long enough to mask the web-font swap so the
     headline never visibly reflows after the splash lifts. Non-blocking so a
     tap during the hold reaches content. */
  animation: splashFade 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
/* Respect reduced-motion: no hold, content is there immediately. */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}
.splash-logo {
  display: block;
  width: clamp(280px, 40vw, 480px);
  height: auto;
  /* GPU-friendly transform-only entrance — a subtle rise reads as
     intentional and premium without delaying the logo's appearance. */
  animation: splashLogoIn 0.5s cubic-bezier(0.2, 0, 0.2, 1) both;
}
@keyframes splashFade {
  0%, 60% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes splashLogoIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HERO ENTRANCE — a calm staggered rise that hands off from the splash.
   Transform + opacity only (GPU-composited), so it never janks. The
   default delays are tuned to begin while the splash is fading, so the
   splash lifting and the headline settling read as one continuous motion
   instead of the content abruptly popping into place. The same animation
   re-runs on each SPA page swap, smoothing cross-page navigation too. */
.hero-title,
.hero-sub,
.hero-ctas,
.hero-etymology {
  animation: heroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-title     { animation-delay: 0.95s; }
.hero-sub       { animation-delay: 1.08s; }
.hero-ctas      { animation-delay: 1.20s; }
.hero-etymology { animation-delay: 1.32s; }

/* Repeat visits / in-site nav skip the splash, so the content rises right
   away rather than waiting behind a splash that was never shown. */
.no-splash .hero-title     { animation-delay: 0.05s; }
.no-splash .hero-sub       { animation-delay: 0.15s; }
.no-splash .hero-ctas      { animation-delay: 0.25s; }
.no-splash .hero-etymology { animation-delay: 0.35s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-etymology { animation: none; }
}

/* SKIP-TO-MAIN — accessibility shortcut, hidden until keyboard focus */
.skip-to-main {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 1001;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Cormorant SC', serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: top 0.2s ease;
}
.skip-to-main:focus {
  top: 1rem;
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* FOCUS — keyboard-only visible focus ring (mouse clicks suppress it) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.nav-link:focus-visible,
.nav-lang:focus-visible,
.nav-cta:focus-visible {
  outline-color: var(--cream);
}
.btn:focus-visible {
  outline-offset: 4px;
}

/* ── ENTERPRISE AUTOMATION INTAKE ──
   A quiet, institutional form: hairline-ruled fields on parchment, the
   same gold-deep small-caps language as the rest of the site. No boxed,
   bubbly inputs — single bottom rules that brighten on focus. */
.intake-section { padding-top: 3.5rem; }
.intake-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
/* Honeypot — present in the DOM, invisible and unreachable for humans */
.intake-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
}
.intake-field { display: flex; flex-direction: column; }
.intake-field--full { margin-top: 2.25rem; }
.intake-field label,
.intake-fieldset legend {
  font-family: 'Cormorant SC', serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--gold-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.intake-req { color: var(--red); }
.intake-field input,
.intake-field select,
.intake-field textarea {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-gold);
  border-radius: 0;
  padding: 0.55rem 0.1rem;
  width: 100%;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.intake-field textarea {
  resize: vertical;
  line-height: 1.55;
  min-height: 8rem;
}
.intake-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236F7783' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.6rem;
}
.intake-field input::placeholder,
.intake-field textarea::placeholder { color: var(--dim2); font-style: italic; }
.intake-field input:focus,
.intake-field select:focus,
.intake-field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold-deep);
}
.intake-field input:focus-visible,
.intake-field select:focus-visible,
.intake-field textarea:focus-visible {
  border-bottom-color: var(--gold-deep);
}

.intake-fieldset {
  border: none;
  margin-top: 2.5rem;
  padding: 0;
}
.intake-fieldset legend { margin-bottom: 1.1rem; padding: 0; }
.intake-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 2.5rem;
}
.intake-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  color: var(--ink);
  cursor: pointer;
}
.intake-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  border: 1px solid var(--gold-deep);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.intake-check input:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.intake-check input:checked::after {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0.12rem;
  width: 0.3rem;
  height: 0.58rem;
  border: solid var(--cream);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.intake-check input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.intake-actions {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.intake-submit { cursor: pointer; }
.intake-submit:disabled { opacity: 0.55; cursor: default; }
.intake-fineprint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--dim);
  margin: 0;
}
.intake-status {
  margin-top: 1.75rem;
  font-family: 'Cormorant SC', serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--gold-deep);
  background: var(--cream-deep);
}
.intake-status.is-ok { border-left-color: #2f6b3a; color: #1f4a28; }
.intake-status.is-error { border-left-color: var(--red); color: var(--red); }
.intake-status.is-pending { color: var(--gold-deep); }

/* The membership standard — institutional tenets above the forms.
   Shares the form's 720px / 2.5rem spine so the whole page reads as one
   column: hero, the standard a member is trusting, then the path. */
.standard-section { padding: 2rem 0 3.5rem; }
.standard-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
  max-width: 720px;
  margin: 0 auto 2.25rem;
  padding: 0 2.5rem;
}
.standard-list {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
  border-top: 1px solid var(--rule-gold);
}
.tenet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule-gold);
}
.tenet-no {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  padding-top: 0.5rem;
}
.tenet-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 0.55rem;
}
.tenet-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--dim);
  max-width: 58ch;
  margin: 0;
}

/* The floor — the catalog a membership opens. Each aisle is a class of
   work; behind it, the vetted specialist firms that run it. Shares the
   720px spine; aisles divide on the gold rule like a directory. */
.floor-section {
  background: var(--navy);
  padding: 3.5rem 0 4rem;
  /* Brighten the gold rule slightly so grid lines read on the dark field */
  --rule-gold: rgba(184, 191, 201, 0.28);
}
.floor-section .standard-eyebrow { color: rgba(184, 191, 201, 0.65); }
.floor-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cream);
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 0 2.5rem;
}
.floor-grid {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-gold);
}
.floor-aisle {
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--rule-gold);
}
.floor-aisle:nth-child(odd) {
  border-right: 1px solid var(--rule-gold);
  padding-right: 1.5rem;
}
.floor-aisle:nth-child(even) { padding-left: 1.5rem; }
.floor-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 0.45rem;
}
.floor-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(245, 239, 228, 0.58);
  max-width: 42ch;
  margin: 0;
}
.floor-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 239, 228, 0.5);
  max-width: 720px;
  margin: 0 auto 0;
  padding: 1.75rem 2.5rem 0;
  border-top: 1px solid var(--rule-gold);
}
@media (max-width: 640px) {
  .floor-grid { grid-template-columns: 1fr; }
  .floor-aisle,
  .floor-aisle:nth-child(odd),
  .floor-aisle:nth-child(even) {
    border-right: 0;
    padding: 1.15rem 0;
  }
}

/* Path switcher — members vs. the vendor bench. The wrapper shares the
   form's 720px / 2.5rem gutter so the control left-aligns with the fields. */
.intake-switch-wrap {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 0 2.5rem;
}
.intake-switch {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.intake-switch-btn {
  font-family: 'Cormorant SC', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 0;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: color 0.15s ease;
}
.intake-switch-btn + .intake-switch-btn { border-left: 1px solid var(--rule); }
@media (hover: hover) { .intake-switch-btn:hover { color: var(--ink); } }
.intake-switch-btn.is-active { background: var(--navy); color: var(--cream); }
.intake-switch-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.intake-intro {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--dim);
  max-width: 605px;
  margin: 0 0 2.5rem;
}
.intake-form.is-hidden { display: none; }

@media (max-width: 640px) {
  .intake-form { padding: 0 1.5rem; }
  .intake-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .intake-checks { grid-template-columns: 1fr; }
  .intake-switch-wrap { padding: 0 1.5rem; }
}

/* PRINT — clean printable version, no decorative chrome */
@media print {
  html, body { background: #fff; color: #000; overflow: visible; }
  .splash, .world-map-bg, .bottom-red, .footer-banner,
  .skip-to-main, .nav-right { display: none !important; }
  nav { position: static; background: #fff; border-bottom: 1px solid #999; padding: 0.75rem 0; }
  .nav-link, .nav-lang { color: #000 !important; }
  .page-hero, .page-body, .hero { background: #fff; padding: 2rem 0; }
  .page-head, .hero-title, .page-body-inner h2 {
    color: #000;
    page-break-after: avoid;
  }
  .page-body-inner, .hero-sub, .page-sub { color: #000; }
  .page-body-inner p, .hero-sub, .page-sub {
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }
  footer { background: #fff; color: #000; border-top: 1px solid #999; }
  .footer-brand, .footer-pun, .footer-meta-line, .footer-regions, .footer-hq {
    color: #000 !important;
  }
  a { color: #000; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}
@media (prefers-reduced-motion: reduce) {
  .splash, .splash-logo { animation-duration: 1.2s; }
}