: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;           /* Visa-form yellow */
  --gold-deep: #6F7783;
  --gold-soft: rgba(184, 191, 201, 0.32);
  --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);
}
* { 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; }
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;
}
.nav-social-icon:hover { color: var(--gold); opacity: 1; }
.nav-social-icon svg { width: 100%; height: 100%; display: block; }
.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;
}
.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);
}
.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);
}
.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:hover,
.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;
}
.hero-ctas .btn:hover::after,
.hero-ctas .btn:active::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); }
.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;
}
.btn-ghost:hover { background: #8B0000; color: var(--cream); border-color: #8B0000; opacity: 1; }
.btn-ghost:active,
.btn-ghost:focus-visible {
  background: #8B0000;
  color: var(--cream);
  border-color: #8B0000;
  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 8rem;
  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: #8B0000;
  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); }
.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;
}
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;
}
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; }
  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);
  padding: 1.75rem 0 1.5rem;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  justify-content: flex-end;
}
.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;
}
.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; }
.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;
}
.footer-social a:hover { color: var(--cream); opacity: 1; }
.footer-social svg { width: 100%; height: 100%; display: block; }

/* 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: #8B0000;
  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: 180px;
  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;
}
/* B&W treatment — institutional, restrained, matches the B&W brand aesthetic */
.footer-banner--brickell, .footer-banner--palmetto, .footer-banner--energy { filter: grayscale(100%); }

/* 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. */
html { background: var(--cream); }

/* 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 #8B0000, so any area content
   doesn't cover is already brand red. */

/* 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) {
  /* Move social icons from nav to footer on mobile */
  .nav-right .nav-social-icon { display: none; }
  .footer-social { display: flex; }

  /* Hide Industries + Governance on mobile to keep the nav from wrapping */
  .nav-link[href="industries"],
  .nav-link[href="governance"] { display: none; }

  .nav-inner { gap: 0.75rem; padding: 0 0.5rem; }
  .nav-mark img { height: 36px; }
  .nav-links { gap: 0.95rem; margin-right: 0.4rem; }
  .nav-link { font-size: 0.6rem; letter-spacing: 0.1em; }
  .nav-lang { font-size: 0.58rem; padding: 0.3rem 0.5rem; letter-spacing: 0.1em; }
  /* 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 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.75rem 1rem;
  }
  .footer-inner > div:first-child { grid-column: 1 / -1; text-align: left; }
  .footer-meta {
    grid-column: 1;
    align-self: center;
  }
  .footer-social {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 0.75rem;
  }
  .footer-meta, .footer-meta-line { text-align: left; }
  .footer-regions { font-size: 0.62rem; letter-spacing: 0.18em; }
  .footer-brand { text-align: right; }
  .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: 32px; }
  .nav-links { gap: 0.7rem; }
  .nav-link { font-size: 0.55rem; letter-spacing: 0.08em; }
  .nav-lang { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 0.5rem; }
  .nav-mark { justify-self: start; }
  .nav-links { justify-self: end; }
  .hero { padding: 3rem 0 2.5rem; }
  .coming-soon { padding: 3rem 1.25rem; min-height: calc(100vh - 96px - 280px); min-height: calc(100svh - 96px - 280px); }
}

/* 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;
}

/* 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; }
}