/* GEO — styles. Tokens live in tokens.css. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- Cross-document view transitions ----------
   Header keeps its place; the new page wipes in from the top, the old one fades out fast. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: header; }
::view-transition-old(root) { animation: vt-out 150ms ease-out both; }
::view-transition-new(root) { animation: vt-wipe 450ms var(--ease-wipe) both; }
::view-transition-old(header), ::view-transition-new(header) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--base); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  padding: 0.5rem 1rem; background: var(--gold); color: var(--base);
  font-weight: 500; z-index: 100;
}
.skip-link:focus { top: var(--space-2); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 500; line-height: var(--leading-snug); }
h4 { font-size: var(--step-0); font-weight: 500; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 36em; text-wrap: pretty; }
.muted { color: var(--fg-2); }
.small { font-size: var(--step--1); }
em, .italic { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.prose { max-width: 38em; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--space-3); }
h2 + .prose, .prose h2 + p, h2 + .check-list, h2 + .lede, h2 + .muted { margin-top: var(--space-4); }

/* Links: underline grows from 0 to 100% width */
.prose a, .link, .footer-grid a, .hero-meta a, .crumbs a, .contact-list a, .faq .answer a, .glossary a {
  color: var(--link);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.prose a:hover, .link:hover, .footer-grid a:hover, .hero-meta a:hover, .crumbs a:hover, .contact-list a:hover,
.faq .answer a:hover, .glossary a:hover,
.prose a:focus-visible, .link:focus-visible { background-size: 100% 1px; }
.footer-grid a, .crumbs a { color: inherit; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { background: var(--bg); color: var(--fg); padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

.grid { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
  .grid { grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-6.col-start-7 { grid-column: 7 / span 6; }
  .col-7.col-start-6 { grid-column: 6 / span 7; }
  .col-8.col-start-5 { grid-column: 5 / span 8; }
}

.section-head { margin-bottom: var(--space-5); }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 + p { margin-top: var(--space-3); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule--accent { border-top-color: var(--accent); width: 3rem; }

/* Section boundary device (b): gold hairline across the full width, label sitting on it */
.section--rule { border-top: 1px solid var(--gold); }
.section--rule > .container { position: relative; }
.rule-label {
  position: absolute; left: -0.875rem; top: calc(-1 * var(--space-section));
  transform: translateY(-50%);
  display: inline-block;
  padding: 0.25rem 0.875rem;
  background: var(--bg);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}

/* Section boundary device (a): the lead image or card row straddles into the previous section */
/* doubled class so it beats component resets such as .img-slot { margin: 0 } declared later */
.straddle.straddle { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-section) - var(--straddle)); }
.straddle + * { margin-top: var(--space-5); }
/* When the heading must come first in the DOM (heading order) but the cards straddle visually */
.container--flip { display: flex; flex-direction: column; }
.container--flip > .straddle { order: -1; }
.container--flip > .section-head { margin-top: var(--space-5); margin-bottom: 0; }
@media (min-width: 48em) { .straddle + *, .container--flip > .section-head { margin-top: var(--space-6); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--fg);
  background: transparent;
  transition: background var(--dur) var(--ease), filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn--solid { background: var(--accent); color: var(--base); }
.btn--solid:hover { background: var(--accent); filter: brightness(0.92); }
.theme-paper .btn--solid { color: var(--paper); }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; font-size: var(--step--1); letter-spacing: 0.04em;
  color: var(--link);
}
.arrow-link .arrow { transition: transform var(--dur) var(--ease); }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--base) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--paper);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-4);
}

/* Brand lockup: mark + wordmark (+ descriptor on desktop) */
.brand { display: inline-flex; align-items: center; gap: 0.875rem; color: var(--gold); }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand-text { display: flex; flex-direction: column; justify-content: center; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1;
  letter-spacing: 0.16em; text-indent: 0.02em;
  color: var(--gold);
}
.brand-sub {
  display: none;
  margin-top: 0.3rem;
  font-family: var(--font-body); font-weight: 400; font-size: 0.625rem; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
}
@media (min-width: 64em) {
  .brand-mark { width: 2.5rem; height: 2.5rem; }
  .brand-sub { display: block; }
}
.site-footer .brand { gap: 0.75rem; }
.site-footer .brand-mark { width: 2rem; height: 2rem; }
.site-footer .brand-name { font-size: 1.125rem; }
.site-footer .brand-sub { display: block; font-size: 0.5625rem; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.5rem 0.25rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-toggle .bars { position: relative; width: 1.25rem; height: 10px; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { top: 9px; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 4.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 4.5px; transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav[data-open="true"] { display: block; }
.nav-list { display: flex; flex-direction: column; }
.nav-list > li { border-top: 1px solid var(--line-dark); }
.nav-link, .nav-sub-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 0;
  font-size: var(--step-0); font-weight: 500;
  color: var(--paper);
}
.nav-link[aria-current="page"], .nav-link:hover, .nav-sub-toggle:hover { color: var(--gold); }
.nav-link--cta { color: var(--gold); }
.nav-sub-toggle .chev { transition: transform var(--dur) var(--ease); }
.nav-sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-panel { display: none; padding-bottom: 1rem; }
.nav-panel[data-open="true"] { display: block; }
.nav-panel ol { display: grid; gap: 0.25rem; }
.nav-panel a {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: baseline;
  padding: 0.6rem 0;
  color: var(--paper);
}
.nav-panel a:hover .nav-panel-name, .nav-panel a:focus-visible .nav-panel-name { color: var(--gold); }
.nav-panel .num { font-family: var(--font-display); font-size: 1rem; color: var(--gold); }
.nav-panel-name { font-weight: 500; display: block; }
.nav-panel-desc { display: block; font-size: var(--step--1); color: var(--fg-2); }

@media (max-width: 63.98em) {
  /* The header's backdrop-filter makes it the containing block for fixed children,
     so the drawer is positioned absolutely under the (sticky) header instead. */
  .site-nav[data-open="true"] {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--base);
    overflow-y: auto;
    padding: 0 var(--gutter) var(--space-6);
    border-top: 1px solid var(--line-dark);
  }
}

@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .nav-list { flex-direction: row; align-items: center; gap: var(--space-5); }
  .nav-list > li { border: 0; position: relative; }
  .nav-link, .nav-sub-toggle {
    width: auto; padding: 0.5rem 0;
    font-size: var(--step--1); letter-spacing: 0.02em;
    gap: 0.4rem;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav-link:hover, .nav-sub-toggle:hover, .nav-link[aria-current="page"] { background-size: 100% 1px; }
  .nav-link--cta { border: 1px solid var(--gold); padding: 0.5rem 1rem; border-radius: var(--radius); background-image: none; }
  .nav-link--cta:hover { background: var(--gold); color: var(--base); }
  .nav-panel {
    position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
    width: 34rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line-dark);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .nav-panel::before { content: ""; position: absolute; top: -1rem; left: 0; right: 0; height: 1rem; }
  .nav-panel a { grid-template-columns: 2.5rem 1fr; padding: 0.6rem 0.5rem; border-radius: var(--radius); }
  .nav-panel a:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--base);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
}
@media (min-width: 48em) { .hero { padding-block: 4.5rem; } }
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow { margin-bottom: var(--space-3); }
.hero h1 { max-width: 12em; }
.hero .lede { margin-top: var(--space-4); color: var(--fg-2); }
.hero .btn-row { margin-top: var(--space-5); }
.hero-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--step--1); color: var(--fg-2);
}
.hero-meta a { color: var(--gold); }

/* Image/video hero (Home): media behind the copy, scrim from the left */
@media (min-width: 48em) { .hero--image { min-height: min(72vh, 42rem); display: flex; align-items: center; } }
.hero .hero-media { position: absolute; inset: 0; margin: 0; z-index: 0; aspect-ratio: auto; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  background: var(--base) url("/assets/video/hero-poster.jpg") center / cover no-repeat;
}
@media (max-width: 47.98em) { .hero-video { object-position: right center; } }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 88%, transparent) 38%, color-mix(in srgb, var(--base) 35%, transparent) 62%, transparent 85%);
}
@media (max-width: 47.98em) {
  .hero-scrim { background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 55%, color-mix(in srgb, var(--base) 40%, transparent) 100%); }
}

/* Type-only page hero: a quiet hairline grid */
.hero--page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--gold) 7%, transparent) 1px, transparent 1px) 0 0 / 25% 100% no-repeat,
    linear-gradient(to right, color-mix(in srgb, var(--gold) 7%, transparent) 1px, transparent 1px) 50% 0 / 25% 100% no-repeat,
    linear-gradient(to right, color-mix(in srgb, var(--gold) 7%, transparent) 1px, transparent 1px) 100% 0 / 25% 100% no-repeat;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 80%, transparent);
}
.hero--page h1 { font-size: var(--step-4); }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--step--1); color: var(--fg-2); margin-bottom: var(--space-4); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-dark); }

/* ---------- Business cards ---------- */
.biz-grid { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .biz-grid { grid-template-columns: repeat(5, 1fr); } .biz-grid--4 { grid-template-columns: repeat(4, 1fr); } .biz-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.biz-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 13rem;
  padding: 1.75rem;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.biz-card:hover, .biz-card:focus-within { transform: translateY(-2px); border-color: var(--gold); }
.biz-card .num { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); line-height: 1; }
.biz-card h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.1; }
.biz-card p { color: var(--fg-2); font-size: var(--step--1); flex: 1; }
.biz-card .arrow-link { margin-top: auto; }
.biz-card a::after { content: ""; position: absolute; inset: 0; }
.biz-card:hover .arrow { transform: translateX(4px); }

/* ---------- Three-up ---------- */
.trio { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .trio { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.trio > div { padding-top: var(--space-3); border-top: 1px solid var(--accent); }
.trio h3 { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--space-2); }
.trio p { color: var(--fg-2); }

/* ---------- Definition / product lists ---------- */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.deflist > div { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 48em) { .deflist > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); padding: var(--space-4) 0; } }
.deflist dt { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.15; }
.deflist dd { color: var(--fg-2); max-width: 40em; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags li { padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--step--1); color: var(--fg); }

.check-list { display: grid; gap: var(--space-3); }
.check-list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: baseline; }
.check-list li::before { content: ""; width: 0.5rem; height: 0.5rem; margin-top: 0.1rem; border: 1px solid var(--accent); transform: rotate(45deg); justify-self: center; }
.check-list strong { font-weight: 500; }
.check-list .muted { display: block; }

.two-col { columns: 1; gap: var(--space-5); }
@media (min-width: 48em) { .two-col { columns: 2; } }
.two-col li { break-inside: avoid; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--font-body); font-weight: 300; font-size: 1.5rem; line-height: 1;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-bottom: var(--space-4); color: var(--fg-2); max-width: 40em; }
.faq .answer p + p, .faq .answer p + ul, .faq .answer ul + p { margin-top: 0.75em; }
.faq .answer ul { list-style: disc; padding-left: 1.2em; }
.faq .answer li + li { margin-top: 0.25em; }

/* ---------- Engage / CTA ---------- */
.engage { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .engage { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.engage > div {
  padding: 1.75rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.engage > div:hover { transform: translateY(-2px); border-color: var(--gold); }
.engage h3 { font-family: var(--font-display); font-size: var(--step-2); }
.engage p { color: var(--fg-2); flex: 1; }

.cta-band h2 { max-width: 14em; }
.cta-band .btn-row { margin-top: var(--space-4); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { display: grid; gap: var(--space-3); font-size: var(--step--1); }
.contact-list div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--fg-2); }
.tbc { color: var(--fg-2); font-style: italic; }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--space-4); }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 500; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--step--1); color: var(--fg-2); max-width: 36em; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Glossary ---------- */
.letter-index { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.letter-index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 500;
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.letter-index a:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.letter-index span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; color: var(--line-light); }
.glossary-group { border-top: 1px solid var(--gold); padding-top: var(--space-3); margin-top: var(--space-5); }
.glossary-group h2 { font-size: var(--step-3); }
.glossary-group dl { margin-top: var(--space-3); }
.glossary-group dt { font-weight: 500; margin-top: var(--space-3); }
.glossary-group dd { color: var(--fg-2); max-width: 46em; margin-top: 0.25rem; }

/* ---------- Legal ---------- */
.legal-text h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.legal-text p { max-width: 42em; margin-top: 0.75em; color: var(--fg-2); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--base);
  color: var(--fg-2);
  border-top: 1px solid var(--line-dark);
  padding-block: var(--space-6) var(--space-4);
  font-size: var(--step--1);
}
.footer-grid { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); } }
.footer-grid h4 { color: var(--paper); font-size: var(--step--1); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-grid li + li { margin-top: 0.5rem; }
.footer-brand .brand { margin-bottom: var(--space-3); }
.footer-brand p { max-width: 28em; }
.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-dark);
  display: grid; gap: var(--space-3);
}
@media (min-width: 48em) { .footer-legal { grid-template-columns: 1fr auto; align-items: end; } }
.footer-legal p { max-width: 60em; }

/* ---------- Image slots ----------
   <figure class="img-slot is-missing ratio-3x1" data-label="IMG · home-band · 3:1 · 2400×800">
     <img src="/assets/img/home-band.jpg" … onload="this.parentElement.classList.remove('is-missing')">
   </figure>
   The frame shows until the file loads. Add .img-duotone for a base+gold tint. */
.img-slot { position: relative; margin: 0; overflow: hidden; background: var(--bg-2); }
.img-slot img, .img-slot video { width: 100%; height: 100%; object-fit: cover; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-3x1  { aspect-ratio: 3 / 1; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
@media (max-width: 47.98em) { .ratio-3x1 { aspect-ratio: 3 / 2; } .ratio-4x5 { aspect-ratio: 4 / 3; } }

.img-slot.is-missing { border: 1px solid var(--line-dark); }
.theme-paper .img-slot.is-missing { border-color: var(--line-light); }
.img-slot.is-missing img { visibility: hidden; }
.img-slot.is-missing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left,  transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.img-slot.is-missing::after {
  content: attr(data-label);
  position: absolute; right: 0.75rem; bottom: 0.6rem; z-index: 2;
  font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid var(--line);
}

/* Duotone (off by default): grayscale image multiplied over gold = base shadows, gold lights */
.img-duotone { background: var(--gold); }
.img-duotone img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); }

/* ---------- Reveal: visible by default, a small lift as it enters ---------- */
.reveal { opacity: 0.7; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; }

/* =====================================================================
   Refinement layer (art direction pass)
   ===================================================================== */

/* 1. Section labels: a short gold dash and small caps inside the section,
      not a tab sticking out of the boundary. The hairline between sections is quiet. */
.section--rule { border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.rule-label {
  position: static; transform: none; left: auto; top: auto;
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0; background: none;
  margin-bottom: var(--space-4);
}
.rule-label::before { content: ""; width: 2rem; height: 1px; background: var(--gold); flex: none; }

/* 2. Business cards: photograph on top, whole card is the link, no boxed panel */
.biz-card {
  padding: 0; min-height: 0; gap: 0;
  background: none; border: 0;
  transform: none !important;
}
.biz-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.biz-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.biz-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.85);
  transform: scale(1.001);
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
}
.biz-card__body {
  position: relative; flex: 1;
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; row-gap: 0.5rem; align-content: start;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.biz-card .num { font-size: var(--step-0); line-height: 1.6; color: var(--accent); }
.biz-card h3 { font-size: var(--step-1); line-height: 1.2; }
.biz-card__text { grid-column: 1 / -1; color: var(--fg-2); font-size: var(--step--1); line-height: 1.55; }
.biz-card__go { position: absolute; right: 0; top: 1.3rem; color: var(--accent); transition: transform var(--dur) var(--ease); }
.biz-card a::after { content: none; }
.biz-card__link:hover .biz-card__media img,
.biz-card__link:focus-visible .biz-card__media img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.biz-card__link:hover .biz-card__body { border-color: var(--gold); }
.biz-card__link:hover .biz-card__go { transform: translateX(4px); }
@media (min-width: 64em) { .biz-grid { gap: 1.25rem; } }

/* 3. Home: header floats over the video and turns solid once the page scrolls */
body:has(.hero--image) .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
}
body:has(.hero--image) .site-header.is-scrolled {
  background: color-mix(in srgb, var(--base) 92%, transparent);
  border-bottom-color: var(--line-dark); backdrop-filter: blur(8px);
}
.hero--image { padding-top: calc(var(--header-h) + 3rem); }
@media (min-width: 48em) { .hero--image { min-height: min(86vh, 48rem); padding-top: calc(var(--header-h) + 2rem); } }
/* the photograph settles into the page instead of ending on a hard edge */
.hero--image .hero-media { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.hero--image h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.25rem); letter-spacing: -0.01em; }

/* 4. Engage: open columns with a gold rule, not beige panels */
.engage > div {
  padding: var(--space-4) 0 0; background: none; border: 0;
  border-top: 1px solid var(--gold); transform: none !important;
}

/* 5. Product categories: an editorial run of words, not app chips */
.tags { gap: 0; }
.tags li { padding: 0.35rem 1rem 0.35rem 0; margin-right: 1rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.tags li:last-child { border-right: 0; }

/* 6. Closing band on Home */
.closing { position: relative; overflow: hidden; background: var(--base); color: var(--paper); padding-block: clamp(5rem, 3rem + 8vw, 9rem); }
.closing__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.9; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 70%, transparent) 50%, transparent 100%); }
.closing .container { position: relative; z-index: 2; }
.closing__inner { max-width: 34rem; }
.closing h2 { font-size: var(--step-4); margin-top: var(--space-2); }
.closing .lede { color: var(--fg-2); margin-top: var(--space-3); }
.closing .btn-row { margin-top: var(--space-5); }
.closing + .site-footer, .closing + footer { border-top: 0; }

/* 7. Typographic finish */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.eyebrow { letter-spacing: 0.18em; font-size: 0.72rem; }
.btn { letter-spacing: 0.02em; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
/* refinement layer, second pass */
@media (min-width: 48em) { .hero--image { min-height: min(78vh, 44rem); } }
.hero--image + .section { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.biz-card h3 { padding-right: 1.75rem; }
.closing__inner { max-width: 42rem; }
.closing .lede { max-width: 34rem; }
/* Mobile: business cards become a swipeable row; the next card peeks in from the edge */
@media (max-width: 39.98em) {
  .biz-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none;
    gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 1rem);
    margin-inline: calc(-1 * var(--gutter, 1rem)); padding-inline: var(--gutter, 1rem);
    scrollbar-width: none;
  }
  .biz-grid::-webkit-scrollbar { display: none; }
  .biz-card { scroll-snap-align: start; }
  .biz-card__media { aspect-ratio: 5 / 4; }
}

/* Brand lockup: our sail mark, a hairline, the client's original GEO calligraphy, then the fund name on the right */
.brand { gap: 0.75rem; }
.brand-divider { width: 1px; height: 1.75rem; background: color-mix(in srgb, var(--gold) 45%, transparent); flex: none; }
.brand-geo { height: 2.1rem; width: auto; flex: none; }
.brand-sub {
  display: block; margin: 0; padding-left: 0.25rem;
  font-family: var(--font-body); font-size: 0.6rem; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
@media (min-width: 64em) { .brand-geo { height: 2.4rem; } .brand-sub { font-size: 0.64rem; } }
@media (max-width: 47.98em) { .brand-sub { display: none; } .brand-geo { height: 1.9rem; } }
.site-footer .brand-geo { height: 1.9rem; }
.site-footer .brand-sub { display: block; }

/* Market ticker at the foot of the Home hero */
.hero--image { padding-bottom: 5.5rem; }
.hero-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
  background: color-mix(in srgb, var(--base) 55%, transparent);
}
.hero-ticker .tradingview-widget-container { position: relative; }
.hero-ticker .tradingview-widget-copyright {
  position: absolute; right: var(--gutter); bottom: 100%; padding-bottom: 0.35rem;
  font-size: 0.6rem; letter-spacing: 0.08em; line-height: 1;
}
.hero-ticker .tradingview-widget-copyright a { color: color-mix(in srgb, var(--paper) 35%, transparent); text-decoration: none; }
.hero-ticker .tradingview-widget-copyright a:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hero-ticker { display: none; } }
@media (max-width: 47.98em) { .hero--image { padding-bottom: 7.5rem; } }

/* ---------- AI Platform: editorial Q&A ---------- */
.qa-list { margin-top: var(--space-6); }
.qa { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 64em) { .qa { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.qa__q { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 64em) { .qa__q { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.qa__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); line-height: 1; }
.qa__q h2 { font-size: var(--step-2); line-height: 1.2; }
.qa__a p + p { margin-top: var(--space-3); }
.qa__a p { color: var(--fg-2); }
.qa__a p:first-child { color: var(--fg); font-size: var(--step-1); line-height: 1.55; }
.pull { margin: 0; padding-block: var(--space-6); border-top: 1px solid var(--line); text-align: center; }
.pull p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.15; max-width: 20em; margin-inline: auto; color: var(--fg); }
.pull p::before { content: ""; display: block; width: 2rem; height: 1px; margin: 0 auto var(--space-4); background: var(--gold); }

/* ---------- News: lead story, four source columns, events ---------- */
.lead-story { margin-bottom: var(--space-6); }
.lead-story__link { display: grid; gap: var(--space-3); color: inherit; text-decoration: none; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.lead-story__meta { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.lead-story__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.08; max-width: 18em; transition: color var(--dur) var(--ease); }
.lead-story__desc { color: var(--fg-2); max-width: 42rem; font-size: var(--step-1); line-height: 1.55; }
.lead-story__link:hover .lead-story__title { color: var(--accent); }
.feeds { display: grid; gap: var(--space-6) var(--space-5); }
@media (min-width: 48em) { .feeds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .feeds { grid-template-columns: repeat(4, 1fr); } }
.feed { display: flex; flex-direction: column; }
.feed__head { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--gold); }
.feed__src { font-family: var(--font-display); font-size: var(--step-1); }
.feed__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.feed__list { flex: 1; }
.feed__item { border-bottom: 1px solid var(--line); }
.feed__link { display: grid; gap: 0.35rem; padding-block: var(--space-3); color: inherit; text-decoration: none; }
.feed__date { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.feed__title { font-weight: 500; line-height: 1.35; transition: color var(--dur) var(--ease); }
.feed__desc { font-size: var(--step--1); color: var(--fg-2); line-height: 1.5; }
.feed__link:hover .feed__title { color: var(--accent); }
.feed__item--empty { padding-block: var(--space-3); color: var(--fg-2); font-size: var(--step--1); }
.feed__skeleton { height: 4.75rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 6%, transparent), transparent) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .feed__skeleton { animation: none; } }
.feed__more { margin-top: var(--space-4); }
.feeds__note { margin-top: var(--space-6); font-size: var(--step--1); color: var(--fg-2); }
.events { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .events { grid-template-columns: 1.4fr 1fr 1fr; } }
.event { display: grid; gap: 0.5rem; align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--gold); color: inherit; text-decoration: none; }
.event__logo { display: flex; align-items: center; height: 4.5rem; margin-bottom: var(--space-2); padding: 0.75rem 1rem; background: var(--paper); border-radius: 2px; width: fit-content; }
.event__logo img { max-height: 100%; width: auto; max-width: 12rem; object-fit: contain; }
.event__date { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.event__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; transition: color var(--dur) var(--ease); }
.event__place { font-size: var(--step--1); color: var(--fg-2); }
.event:hover .event__title { color: var(--accent); }

/* six nav items: tighten spacing on mid-size desktops */
@media (min-width: 64em) and (max-width: 79.98em) { .nav-list { gap: 1.1rem; } .nav-link, .nav-sub-toggle { font-size: 0.85rem; } }
.event__logo--dark { background: #1d3a6b; }

/* Ticker attribution lives inside the strip as a fixed left cell, so it can never overlap the hero buttons */
.hero-ticker .tradingview-widget-container { display: flex; align-items: stretch; }
.hero-ticker .tradingview-widget-container__widget { flex: 1; min-width: 0; order: 2; }
.hero-ticker .tradingview-widget-copyright {
  position: static; order: 1; flex: none;
  display: flex; align-items: center;
  padding: 0 1rem 0 var(--gutter);
  border-right: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;
}
.hero-ticker .tradingview-widget-copyright a { color: var(--gold); }
.hero-ticker .tradingview-widget-copyright a span { color: color-mix(in srgb, var(--paper) 40%, transparent); }
@media (max-width: 47.98em) {
  .hero-ticker .tradingview-widget-copyright { padding-right: 0.75rem; }
  .hero-ticker .tradingview-widget-copyright a span { display: none; }
  .hero--image { padding-bottom: 6rem; }
}
@media (max-width: 47.98em) { .hero-ticker .tradingview-widget-copyright a span { display: inline; } .hero-ticker .tradingview-widget-copyright { font-size: 0.56rem; letter-spacing: 0.12em; } }
@media (max-width: 47.98em) {
  .hero--image { padding-bottom: 9rem; }
  .hero-ticker .tradingview-widget-container { flex-direction: column; }
  .hero-ticker .tradingview-widget-copyright { order: 3; border-right: 0; padding: 0.35rem var(--gutter) 0.6rem; justify-content: flex-end; }
}

/* ---------- Home: trade finance section (old home content) ---------- */
.tf-intro { align-items: end; }
.lede-sm { font-size: var(--step-1); line-height: 1.55; color: var(--fg-2); }
.stats {
  display: grid; gap: var(--space-4); margin-block: var(--space-6);
  padding-block: var(--space-5); border-block: 1px solid var(--line);
}
@media (min-width: 48em) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.stats > div { display: grid; gap: 0.4rem; }
@media (min-width: 48em) { .stats > div + div { border-left: 1px solid var(--line); padding-left: var(--space-5); } }
.stats dt { font-family: var(--font-display); font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); line-height: 1; color: var(--accent); }
.stats dd { font-size: var(--step--1); color: var(--fg-2); max-width: 22ch; line-height: 1.5; }
.tf-why { row-gap: var(--space-5); }
.tf-why h3 { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--space-3); }
.tf-why p { color: var(--fg-2); }
.tf-why p + p { margin-top: var(--space-4); }
@media (max-width: 63.98em) { .tf-why .img-slot { max-width: 22rem; } }

/* ---------- Line icons (one stroke, gold) ---------- */
.ico { width: 1.75rem; height: 1.75rem; flex: none; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.deflist dt { display: flex; align-items: center; gap: 0.9rem; }
.deflist dt .ico { width: 1.6rem; height: 1.6rem; }
.trio > div > .ico { display: block; width: 2rem; height: 2rem; margin-bottom: var(--space-3); }
.has-ico { display: flex; align-items: center; gap: 0.75rem; }
.has-ico .ico { width: 1.6rem; height: 1.6rem; }
.theme-paper .ico { color: var(--gold-deep, #9A7B3C); }
@media (hover: hover) {
  .deflist > div:hover .ico, .trio > div:hover > .ico { transform: translateY(-1px); }
  .ico { transition: transform var(--dur) var(--ease); }
}

/* ---------- Contact map: Google map toned to the site palette ---------- */
.map { margin: var(--space-5) 0 0; }
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; filter: grayscale(1) sepia(0.25) contrast(0.95) brightness(0.95); }
.map figcaption { margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.map iframe { filter: grayscale(1) sepia(0.35) contrast(0.92) brightness(0.97); }

/* Mobile/tablet: images that sit on a dark/paper boundary run edge to edge,
   so the colour change hides behind them instead of showing as side strips */
@media (max-width: 63.98em) {
  .img-slot.straddle { margin-inline: calc(-1 * var(--gutter)); width: auto; max-width: none; justify-self: stretch; }
  .grid > .img-slot.straddle { grid-column: 1 / -1; }
}

/* Overlap device retired site-wide: nothing straddles a dark/paper boundary any more.
   Images sit fully inside their own section; the colour change between sections stays clean. */
.straddle.straddle { margin-top: 0; z-index: auto; }
.straddle + * { margin-top: var(--space-6); }
.container--flip > .straddle { order: 0; }
.container--flip > .section-head { margin-top: 0; margin-bottom: var(--space-5); }
@media (max-width: 63.98em) { .straddle + * { margin-top: var(--space-5); } }

/* Ticker in normal flow at the foot of the hero: it can never overlap the buttons, at any window size */
.hero--image { padding-bottom: 0 !important; }
.hero--image > .container { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.hero-ticker { position: relative; left: auto; right: auto; bottom: auto; width: 100%; }
@media (min-width: 48em) {
  .hero--image { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero--image > .container { flex: 1; display: flex; flex-direction: column; justify-content: center; align-self: center; }
}

/* =====================================================================
   30-minute pass
   ===================================================================== */

/* One gold for every primary button, on dark and on paper alike */
.btn--solid, .theme-paper .btn--solid { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.theme-paper .btn--solid { border-color: var(--gold-deep); }
.btn--solid:hover, .theme-paper .btn--solid:hover { background: var(--gold); filter: brightness(0.94); }
/* One secondary button: quiet outline in the text colour */
.btn:not(.btn--solid) { border-color: color-mix(in srgb, var(--fg) 32%, transparent); color: var(--fg); }
.btn:not(.btn--solid):hover { background: transparent; border-color: var(--fg); }
/* The header Contact joins the same secondary family */
.nav-link--cta { color: var(--paper); }
@media (min-width: 64em) {
  .nav-link--cta { border-color: color-mix(in srgb, var(--paper) 32%, transparent); }
  .nav-link--cta:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
}

/* Links on paper: a gold dark enough to read (5.2:1), never green */
.theme-paper { --link: #7A5F2B; --focus: #7A5F2B; }
.theme-paper .arrow-link, .theme-paper .prose a, .theme-paper .link { color: #7A5F2B; }

/* Nothing on the page waits to be revealed: content is fully visible from the first frame.
   The page-to-page wipe stays as the site's one authored motion. */
.reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Market ticker: appears only once its prices have drawn, so its loading skeleton is never seen */
.hero-ticker .tradingview-widget-container__widget { opacity: 0; transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.hero-ticker.is-ready .tradingview-widget-container__widget { opacity: 1; }

/* Inner page heroes: no faint grid lines */
.hero--page::after { content: none; }

/* Form: ruled fields instead of boxes; the select drawn in the same family */
.field input, .field select, .field textarea {
  padding: 0.7rem 0;
  background-color: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 0;
  font: inherit; font-size: var(--step-0); color: var(--fg);
}
.field textarea { min-height: 6.5rem; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355534E' stroke-width='1.25'/%3E%3C/svg%3E") no-repeat right 0.25rem center / 12px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: #7A5F2B; box-shadow: 0 1px 0 0 #7A5F2B; }
.form-row { column-gap: var(--space-5); }

/* Footer: column titles quieter than the links they head */
.footer-grid h4 { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.site-footer .brand-sub { font-size: 0.62rem; }

/* Headings that now open a section directly (labels removed) */
.section > .container > h2:first-child, .section-head h2:first-child { margin-top: 0; }
.field textarea { resize: none; }
/* Mobile/tablet: a section that opens with a full-bleed image starts at the image, no paper strip above it */
@media (max-width: 63.98em) {
  .section:has(> .container > .img-slot.straddle:first-child) { padding-top: 0; }
}
/* Detector fixes: readable gold on paper (5:1), no functional text under 11px */
.theme-paper { --accent: #7A5F2B; }
.theme-paper .ico { color: var(--gold-deep); }
.hero-ticker .tradingview-widget-copyright { font-size: 0.6875rem; letter-spacing: 0.12em; }
.brand-sub { font-size: 0.6875rem !important; letter-spacing: 0.2em; }
@media (max-width: 47.98em) { .hero-ticker .tradingview-widget-copyright { font-size: 0.6875rem; } }

/* =====================================================================
   Half-day pass
   ===================================================================== */

/* Inner page heroes carry the page's photograph; copy sits on the dark left, the subject reads on the right */
.hero--media { position: relative; display: flex; align-items: flex-end; min-height: min(68vh, 38rem); padding-block: 4rem 3.5rem; }
.hero--media > .container { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--container)); }
.hero--media .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hero--media .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 86%, transparent) 34%, color-mix(in srgb, var(--base) 30%, transparent) 64%, transparent 88%),
    linear-gradient(to top, color-mix(in srgb, var(--base) 70%, transparent), transparent 45%);
}
.hero--media h1, .hero--media .lede { max-width: 36rem; }
@media (max-width: 47.98em) {
  .hero--media { min-height: 0; padding-block: 12rem 2.5rem; align-items: flex-end; }
  .hero--media .hero-scrim { background: linear-gradient(to top, var(--base) 18%, color-mix(in srgb, var(--base) 70%, transparent) 55%, color-mix(in srgb, var(--base) 15%, transparent) 100%); }
}

/* Audience list: two columns of ruled entries, a serif name and a plain line under it */
.audience { display: grid; gap: 0 var(--space-5); margin-top: var(--space-5); }
@media (min-width: 40em) { .audience { grid-template-columns: 1fr 1fr; } }
.audience > div { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.audience dt { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--fg); }
.audience dd { margin-top: 0.4rem; font-size: var(--step--1); line-height: 1.55; color: var(--fg-2); }

/* Figures: lining numerals, and the sentence under each reads as text, not as a caption */
.stats dt { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; font-size: clamp(2.4rem, 1.7rem + 2.2vw, 3.5rem); }
.stats dd { max-width: 30ch; font-size: var(--step-0); line-height: 1.5; }

/* One ending per business page: the call to action heads the related businesses */
.related-head { display: grid; gap: var(--space-4); align-items: end; margin-bottom: var(--space-6); }
@media (min-width: 64em) { .related-head { grid-template-columns: 1fr auto; } }
.related-head h2 { max-width: 18em; }
.related-head .btn-row { margin: 0; }
.related-sub { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--fg-2); padding-top: var(--space-4); margin-bottom: var(--space-4); border-top: 1px solid var(--line); }
.hero--media .hero-video { background: var(--base); }

/* =====================================================================
   Rethink pass
   ===================================================================== */

/* Home moment: the port at night, edge to edge, one line of type */
.moment { position: relative; overflow: hidden; background: var(--base); color: var(--paper); min-height: clamp(22rem, 52vw, 40rem); display: flex; align-items: flex-end; }
.moment__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--base) 78%, transparent) 0%, transparent 55%); }
.moment .container { position: relative; z-index: 1; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.moment__line {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 6rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--paper); max-width: 12ch; text-wrap: balance;
}

/* Statement moment on inner pages: one line from the page, set large, nothing else */
.statement { background: var(--bg); color: var(--fg); padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.statement + .section--rule { border-top-color: color-mix(in srgb, var(--fg) 12%, transparent); }
.statement__line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.25rem); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 17ch; text-wrap: balance;
}
.statement__line::before { content: ""; display: block; width: 3rem; height: 1px; background: var(--gold); margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
@media (min-width: 64em) { .statement__line { margin-left: calc(100% / 12); } }

/* Glossary index: plain letters on a rule, no boxes; empty letters simply absent */
.letter-index { gap: 0 0.15rem; padding-block: var(--space-3); border-block: 1px solid var(--line); }
.letter-index a { min-width: 2rem; min-height: 2.5rem; border: 0; border-radius: 0; background: none; font-size: 1.25rem; }
.letter-index a:hover { background: none; color: var(--accent); }
.letter-index span { display: none; }

/* Partner logos: one neutral tile, logos in greyscale until hover */
.event__logo, .event__logo--dark { background: var(--paper); border-radius: 0; height: 4.25rem; }
.event__logo img { filter: grayscale(1) contrast(1.05); opacity: 0.85; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.event:hover .event__logo img { filter: none; opacity: 1; }
.event__logo--dark img { filter: grayscale(1) invert(1) contrast(1.1); }
.event:hover .event__logo--dark { background: #1d3a6b; }
.event:hover .event__logo--dark img { filter: none; }
.letter-index { border-bottom: 0; }
/* statement right after a section of the same colour: no doubled padding */
.section:not(.theme-paper) + .statement:not(.theme-paper) { padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
@media (max-width: 47.98em) { .moment { min-height: 24rem; } .moment__media { object-position: 60% 55%; } }
@media (max-width: 47.98em) { .statement__line { font-size: 2.85rem; line-height: 1.02; } }

/* =====================================================================
   Fix 1 · Image edges: images on dark sections feather into the section
   ===================================================================== */

/* Portraits and other framed images on dark sections: soft edges on all four sides + a light veil of the section colour */
.section:not(.theme-paper) .img-slot:not(.is-missing) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
          mask-composite: intersect;
}
.section:not(.theme-paper) .img-slot::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--base) 22%, transparent); pointer-events: none; }

/* Inner page heroes: the photograph eases in under the header and dissolves into the hero colour at the bottom */
.hero--media .hero-media {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 100%);
}
/* Home hero: same bottom dissolve, a little longer because the ticker sits on it */
.hero--image .hero-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

/* Full-bleed photographic bands on Home: no straight cut at top or bottom, and a veil so they sit in the page */
.moment__media, .closing__media {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%);
}
.moment::before { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--base) 25%, transparent); pointer-events: none; }
.moment .container { z-index: 2; }
/* Card thumbnails on dark sections read as framed cards: a hairline border, not a raw image edge */
.section:not(.theme-paper) .biz-card__media { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 12%, transparent); position: relative; }
.section:not(.theme-paper) .biz-card__media img { position: relative; z-index: -1; }

/* =====================================================================
   Fix 2 · Section transitions: every dark/light change passes through a gradient band
   Two section tones only (near-black --base, off-white --paper); the mid tones exist only inside the bands.
   ===================================================================== */
:root {
  --band-down: linear-gradient(in oklab to bottom, var(--base) 0%, color-mix(in oklab, var(--base) 82%, var(--paper)) 22%, color-mix(in oklab, var(--base) 50%, var(--paper)) 50%, color-mix(in oklab, var(--base) 18%, var(--paper)) 78%, var(--paper) 100%);
  --band-up: linear-gradient(in oklab to bottom, var(--paper) 0%, color-mix(in oklab, var(--paper) 82%, var(--base)) 22%, color-mix(in oklab, var(--paper) 50%, var(--base)) 50%, color-mix(in oklab, var(--paper) 18%, var(--base)) 78%, var(--base) 100%);
}
/* dark → light: the light section opens with a band from the dark above */
:is(.hero, .moment, .closing, .statement:not(.theme-paper), .section:not(.theme-paper)) + .theme-paper {
  background: var(--band-down) top / 100% var(--band) no-repeat, var(--paper);
  padding-top: var(--band);
  border-top: 0;
}
/* light → dark */
.theme-paper + :is(.section:not(.theme-paper), .statement:not(.theme-paper), .closing, .moment) {
  background: var(--band-up) top / 100% var(--band) no-repeat, var(--base);
  padding-top: var(--band);
  border-top: 0;
}
/* the footer follows main: a light last section hands over through the same band */
main:has(> .theme-paper:last-child) + .site-footer {
  background: var(--band-up) top / 100% var(--band) no-repeat, var(--base);
  padding-top: calc(var(--band) + var(--space-section) * 0.5);
  border-top: 0;
}
/* a gradient band replaces the hairline rule where both used to meet */
:is(.hero, .moment, .closing, .statement, .section:not(.theme-paper)) + .theme-paper.section--rule,
.theme-paper + .section--rule:not(.theme-paper) { border-top: 0; }
html, body { background-color: var(--base); }

/* =====================================================================
   Fix 3 · Rhythm: one spacing scale
   desktop 96 (--space-section) / 128 (--space-section-lg, also the band)
   mobile  56 / 72
   ===================================================================== */
.section, .section--tight { padding-block: var(--space-section); }
.hero--page { padding-block: var(--space-section); }
.hero--media { padding-block: var(--space-section); }
@media (max-width: 47.98em) { .hero--media { min-height: 30rem; padding-block: var(--space-section); } }
.hero--image { padding-top: calc(var(--header-h) + var(--space-section)); }
.hero--image > .container { padding-bottom: var(--space-section); }
.hero--image + .section { padding-top: var(--space-section); }
.statement { padding-block: var(--space-section-lg); }
.moment .container { padding-block: var(--space-section-lg); }
.closing { padding-block: var(--space-section-lg); }
.site-footer { padding-top: var(--space-section); }
main:has(> .theme-paper:last-child) + .site-footer { padding-top: var(--band); }

/* Two sections of the same colour with no rule between them share one gap, not two */
:is(.section:not(.theme-paper), .statement:not(.theme-paper)) + :is(.statement:not(.theme-paper), .section:not(.theme-paper):not(.section--rule)) { padding-top: 0; }

/* One gap between stacked blocks inside a section */
.section > .container > * { margin-top: 0; margin-bottom: 0; }
.section > .container > * + * { margin-top: var(--stack); }
.section > .container > .related-sub { margin-top: var(--stack); }
.section > .container > .related-sub + * { margin-top: 1rem; }
.stats { margin-block: 0; }

/* No dead column next to a portrait or the square image: the text centres on the image */
.grid:has(> .img-slot.col-5), .grid:has(> .img-slot.col-4), .tf-why { align-items: center; }

/* =====================================================================
   Fix 4 · Page navigation: no light frame between pages
   html/body carry the base dark (set in Fix 2), the browser chrome is told the page is dark,
   and where view transitions are not supported the page fades in over 200ms.
   ===================================================================== */
:root { color-scheme: dark; }
.theme-paper { color-scheme: light; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@supports not (view-transition-name: none) {
  body { animation: page-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } }
/* Fix 1 correction: the hairline frame sits above the thumbnail, never behind it */
.section:not(.theme-paper) .biz-card__media { box-shadow: none; }
.section:not(.theme-paper) .biz-card__media img { z-index: auto; }
.section:not(.theme-paper) .biz-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent); pointer-events: none; }

/* =====================================================================
   Market ticker: back to dark and transparent, with a few finishing touches
   ===================================================================== */
/* The widget's iframe keeps its own colour scheme, so the browser never paints it white */
.hero-ticker, .hero-ticker iframe { color-scheme: normal; }
.hero-ticker iframe { background: transparent !important; }

/* Strip: a darker glass of the hero colour, framed by a gold hairline that fades out at both ends */
.hero-ticker {
  border-top: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--base) 35%, transparent), color-mix(in srgb, var(--base) 75%, transparent));
}
.hero-ticker::before, .hero-ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 70%, transparent) 30%, color-mix(in srgb, var(--gold) 70%, transparent) 70%, transparent);
}
.hero-ticker::before { top: 0; }
.hero-ticker::after { bottom: 0; opacity: 0.35; }

/* Prices glide in and out of soft edges instead of being cut by the screen */
.hero-ticker .tradingview-widget-container__widget {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Label: anchored on the left, a slow gold "live" pulse beside it */
.hero-ticker .tradingview-widget-copyright { order: 0; border-right: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-left: 0; padding: 0 1.25rem 0 var(--gutter); }
.hero-ticker .tradingview-widget-copyright a { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--gold); white-space: nowrap; }
.live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: live-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes live-pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }
@media (max-width: 47.98em) {
  .hero-ticker .tradingview-widget-copyright { order: 3; border-right: 0; justify-content: flex-start; padding: 0.5rem var(--gutter) 0.7rem; }
}
.hero-ticker::after { content: none; }
@media (min-width: 48em) {
  .hero-ticker .tradingview-widget-copyright { border-right: 0; border-left: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); padding: 0 var(--gutter) 0 1.25rem; }
}
@media (max-width: 47.98em) { .hero-ticker .tradingview-widget-copyright { border: 0; } }
/* the widget's iframe is inline by default and leaves a gap under it; the label centres on the prices */
.hero-ticker .tradingview-widget-container__widget { line-height: 0; }
.hero-ticker iframe { display: block; }
.hero-ticker .tradingview-widget-container { align-items: center; }
@media (min-width: 48em) {
  .hero-ticker .tradingview-widget-copyright { align-self: center; border-left: 0; position: relative; }
  .hero-ticker .tradingview-widget-copyright::before { content: ""; position: absolute; left: 0; top: 50%; height: 2.25rem; width: 1px; transform: translateY(-50%); background: color-mix(in srgb, var(--gold) 30%, transparent); }
}
/* TradingView swaps its inner div for the iframe itself: style the iframe directly */
.hero-ticker .tradingview-widget-container > iframe {
  flex: 1 1 auto; min-width: 0; order: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  opacity: 0; transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-ticker.is-ready .tradingview-widget-container > iframe { opacity: 1; }
.hero-ticker .tradingview-widget-copyright { bottom: auto; top: auto; right: auto; order: 2; }
@media (max-width: 47.98em) { .hero-ticker .tradingview-widget-copyright { order: 3; } .hero-ticker .tradingview-widget-container > iframe { flex-basis: 100%; } }
.hero-ticker.is-ready iframe { opacity: 1 !important; }
/* ticker shows straight away, as it did before: no fade gate */
.hero-ticker iframe, .hero-ticker .tradingview-widget-container > iframe { opacity: 1 !important; transition: none !important; }

/* =====================================================================
   Opening sequence (first page of a visit, ~2s): market candles rise,
   a gold price line runs across them, the sail mark draws itself, then the curtain lifts.
   Pure CSS timing; JS only counts the number. Hidden entirely without the intro-on class.
   ===================================================================== */
.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 1000; display: block; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #17150f 0%, var(--base) 70%);
  color: var(--paper);
  animation: intro-lift 750ms cubic-bezier(0.77, 0, 0.18, 1) 2.05s forwards;
}
@keyframes intro-lift { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* candles: a quiet market behind everything */
.intro__chart { position: absolute; left: 0; right: 0; bottom: 16%; width: 100%; height: 38vh; opacity: 0.9;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.intro__chart .c { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
  animation: candle-in 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 22ms + 80ms); }
.intro__chart .c line { stroke: color-mix(in srgb, var(--paper) 22%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.intro__chart .c rect { fill: color-mix(in srgb, var(--paper) 10%, transparent); }
.intro__chart .c.up line { stroke: color-mix(in srgb, var(--gold) 45%, transparent); }
.intro__chart .c.up rect { fill: color-mix(in srgb, var(--gold) 30%, transparent); }
@keyframes candle-in { to { transform: scaleY(1); opacity: 1; } }
.intro__line { fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent));
  animation: draw 1.55s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the mark draws itself, GEO and the fund name follow */
.intro__center { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(80vw, 26rem); }
.intro__mark { width: clamp(5.5rem, 4rem + 6vw, 8.5rem); height: auto; overflow: visible; }
.intro__mark g { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.intro__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.intro__mark path:nth-child(1) { animation-delay: 0.05s; animation-duration: 1.1s; }
.intro__mark path:nth-child(2) { animation-delay: 0.25s; }
.intro__mark path:nth-child(3) { animation-delay: 0.40s; }
.intro__mark path:nth-child(4) { animation-delay: 0.60s; }
.intro__mark path:nth-child(5) { animation-delay: 0.70s; }
.intro__mark path:nth-child(6) { animation-delay: 0.80s; }
.intro__geo { width: clamp(7rem, 5rem + 8vw, 11rem); height: auto; clip-path: inset(0 100% 0 0); animation: reveal-x 800ms cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards; }
@keyframes reveal-x { to { clip-path: inset(0 0 0 0); } }
.intro__name { font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); text-align: center; opacity: 0; transform: translateY(6px);
  animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* foot: symbol tape and the counter */
.intro__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--gutter) 1.6rem; }
.intro__tape { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.intro__tape > div { display: flex; width: max-content; animation: tape 9s linear infinite; }
.intro__tape span { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); padding-right: 2.25rem; white-space: nowrap; }
.intro__tape span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 0.9rem; vertical-align: middle; background: var(--gold); transform: rotate(45deg); }
@keyframes tape { to { transform: translateX(-50%); } }
.intro__count { display: flex; align-items: baseline; gap: 0.75rem; white-space: nowrap; }
.intro__count span { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.intro__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; color: var(--paper); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; min-width: 3ch; text-align: right; }
.intro__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(to right, transparent, var(--gold)); transform-origin: left; transform: scaleX(0);
  animation: bar 1.95s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes bar { to { transform: scaleX(1); } }
@media (max-width: 47.98em) {
  .intro__chart { height: 30vh; bottom: 20%; }
  .intro__foot { flex-direction: column; align-items: stretch; gap: 0.9rem; padding-bottom: 1.25rem; }
  .intro__count { justify-content: space-between; }
}

/* ICC badge: foot of the mobile menu and the footer */
.nav-foot { display: none; }
@media (max-width: 63.98em) {
  .site-nav[data-open="true"] { display: flex; flex-direction: column; }
  .site-nav[data-open="true"] .nav-foot { display: flex; flex-direction: column; gap: 1.5rem; margin-top: auto; padding-top: 2.5rem; }
  .nav-foot__line { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--paper); }
  .nav-foot__line::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--gold); margin-bottom: 1.25rem; }
  .nav-foot__icc { width: 9.5rem; height: auto; opacity: 0.8; }
}
.footer-icc { width: 8.5rem; height: auto; margin-top: 1.5rem; opacity: 0.7; }
/* keep the chart clear of the mark and the name */
.intro__center { top: 33%; }
.intro__chart { bottom: 13%; height: 32vh; }
@media (max-width: 47.98em) { .intro__center { top: 32%; } .intro__chart { bottom: 21%; height: 26vh; } .intro__mark { width: 5rem; } }

/* Mobile menu foot: the ICC badge alone, larger */
@media (max-width: 63.98em) {
  .site-nav[data-open="true"] .nav-foot { padding-top: 2rem; border-top: 1px solid var(--line-dark); margin-top: auto; }
  .nav-foot__icc { width: min(16rem, 72%); opacity: 0.9; }
}

/* Home: the port band is a quiet image; the old site's tagline sits under the trade finance heading */
.moment { min-height: clamp(16rem, 40vw, 34rem); }
.tf-motto {
  margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.1; color: var(--accent);
  display: flex; align-items: center; gap: 1rem;
}
.tf-motto::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; flex: none; }

/* Mobile footer: link columns side by side, legal links on one line, so no half-empty screen */
@media (max-width: 47.98em) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark); }
  .footer-grid > div:last-child { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
  .footer-grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
  .footer-grid > div:last-child li + li { margin-top: 0; }
  .footer-grid li + li { margin-top: 0.85rem; }
  .footer-icc { width: 11rem; }
}

/* Language switcher: EN · FR beside the menu (mobile) and after the navigation (desktop) */
.lang-switch { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; margin-right: 1.1rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; color: color-mix(in srgb, var(--paper) 45%, transparent); }
.lang-switch a { color: inherit; text-decoration: none; padding: 0.35rem 0.1rem; transition: color var(--dur) var(--ease); }
.lang-switch a:hover { color: var(--paper); }
.lang-switch a[aria-current="true"] { color: var(--gold); }
.lang-switch span { opacity: 0.6; }
@media (min-width: 64em) {
  .site-header .container > .brand { order: 0; }
  .site-header .container > .site-nav { order: 1; margin-left: auto; }
  .site-header .container > .lang-switch { order: 2; margin: 0 0 0 1.5rem; padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
}
/* Mid-size desktops: one-line navigation in both languages */
@media (min-width: 64em) { .nav-link, .nav-sub-toggle { white-space: nowrap; } }
@media (min-width: 64em) and (max-width: 89.98em) {
  .site-header .brand-sub { display: none; }
  .nav-list { gap: 1.15rem; }
  .nav-link, .nav-sub-toggle { font-size: 0.85rem; }
  .site-header .container > .lang-switch { margin-left: 1.1rem; padding-left: 1.1rem; }
}
@media (max-width: 63.98em) { .lang-switch { margin-right: 1.25rem; } }

/* =====================================================================
   Own market strip (replaces the TradingView embed)
   ===================================================================== */
.mk { display: flex; align-items: stretch; min-height: 5.25rem; }
.mk__track { order: 1; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  opacity: 0; transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.mk.is-ready .mk__track { opacity: 1; }
.mk.is-empty { display: none; }
.mk__list { display: flex; width: max-content; animation: mk-scroll 70s linear infinite; }
@media (hover: hover) and (pointer: fine) { .mk:hover .mk__list { animation-play-state: paused; } }
@keyframes mk-scroll { to { transform: translateX(-50%); } }
.mk__item {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "name spark" "price chg";
  column-gap: 1rem; row-gap: 0.25rem; align-items: center; justify-content: start;
  padding: 0.95rem 2rem; border-right: 1px solid color-mix(in srgb, var(--paper) 8%, transparent);
}
.mk__name { grid-area: name; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); white-space: nowrap; }
.mk__price { grid-area: price; font-size: 0.975rem; font-weight: 500; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk__chg { grid-area: chg; font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
.mk__chg i { font-style: normal; font-size: 0.5rem; margin-right: 0.35rem; vertical-align: 0.12em; }
.mk__item--up .mk__chg { color: #A9C7A2; }
.mk__item--down .mk__chg { color: #D8907E; }
.mk__item--flat .mk__chg { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.mk__spark { grid-area: spark; width: 46px; height: 16px; justify-self: end; overflow: visible; }
.mk__spark polyline { fill: none; stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk__item--down .mk__spark polyline { stroke: color-mix(in srgb, #D8907E 80%, transparent); }
.mk__label {
  order: 2; flex: none; margin: 0; position: relative; display: flex; align-items: center; gap: 0.6rem;
  padding: 0 var(--gutter) 0 1.4rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.mk__label::before { content: ""; position: absolute; left: 0; top: 50%; height: 2.25rem; width: 1px; transform: translateY(-50%); background: color-mix(in srgb, var(--gold) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .mk__list { animation: none; } .mk__track { overflow-x: auto; } }
@media (max-width: 47.98em) {
  .mk { flex-direction: column; }
  .mk__item { padding: 0.8rem 1.35rem; }
  .mk__label { order: 2; padding: 0.55rem var(--gutter) 0.8rem; }
  .mk__label::before { content: none; }
}

/* Mobile business cards: a thin gold progress line shows the row can be swiped */
.swipe-progress { display: none; }
@media (max-width: 39.98em) {
  .swipe-progress { display: block; position: relative; height: 1px; margin-top: 1.25rem; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
  .swipe-progress i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 20%; background: var(--gold); transform: translateX(0); transition: transform 120ms linear; }
}
.swipe-progress i { background: #C9A961 !important; }

/* =====================================================================
   Two voices
   Serif (Cormorant) speaks only for the big statements: page titles, section titles, statement lines.
   Every title inside a section (products, cards, audiences, steps, events) speaks in Inter.
   ===================================================================== */
:root { --title-item: 1.0625rem; }

/* section titles a step larger, so the gap to the items below is obvious */
.section h2:not(.qa__q h2):not(.lead-story__title):not(.event__title) { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.35rem); line-height: 1.06; letter-spacing: -0.012em; }
.related-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }

/* item titles: Inter 500, compact, full text colour */
.deflist dt, .trio h3, .trio > div > h3, .tf-why h3, .engage h3, .audience dt, .biz-card h3, .event__title, .feed__src {
  font-family: var(--font-body); font-weight: 500; font-style: normal;
  font-size: var(--title-item); line-height: 1.35; letter-spacing: -0.005em; color: var(--fg);
}
.deflist dt { font-size: 1.125rem; }
.biz-card h3 { font-size: 1rem; }
.event__title { font-size: 1.125rem; }
.feed__src { font-size: 0.95rem; }
.trio > div > h3, .tf-why h3 { margin-bottom: 0.6rem; }
.engage h3 { font-size: 1.125rem; }

/* the gold italic phrase: one per page, in a page or section title */
h1 em, h2 em, .statement__line em {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  color: var(--gold); letter-spacing: -0.005em;
}
.theme-paper h1 em, .theme-paper h2 em { color: var(--accent); }

/* Client mottos (2026-11-08) */
.hero--image h1 { font-size: clamp(2.3rem, 1.25rem + 3.4vw, 4.5rem); max-width: 15em; line-height: 1.04; }
/* "The Architecture of Wealth" leads; the long gold line sits under it, a step smaller */
.hero--image h1 em { display: block; font-size: 0.78em; line-height: 1.12; margin-top: 0.2em; text-wrap: balance; }
.footer-motto { margin-top: 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; color: var(--paper); }
.footer-motto em { color: var(--gold); }

/* ---------- Aesthetic pass 2 / 3 / 5 (2026-11-09) ---------- */

/* 2 · The client's mottos share one signature: the GEO mark and a fine gold rule, then the line */
.statement--motto .statement__line::before,
.closing h2.motto::before,
.footer-motto::before {
  content: ""; display: block;
  width: 6.4rem; height: 1.7rem;
  background:
    url("/assets/logo-mark.svg") left center / 1.7rem 1.7rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) 2.6rem center / 3.8rem 1px no-repeat;
  margin-bottom: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}
.closing h2.motto { margin-top: 0; }
.footer-motto::before { width: 4.2rem; height: 1.15rem; margin-bottom: 0.7rem;
  background-size: 1.15rem 1.15rem, 2.6rem 1px; background-position: left center, 1.6rem center; }

/* 3 · Capital: six services read as two groups of three */
@media (min-width: 64em) {
  .deflist--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); border-top: 0; }
  .deflist--grid > div { grid-template-columns: 1fr; gap: var(--space-2); align-content: start;
    padding: var(--space-4) 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .deflist--grid > div { border-top-color: var(--accent); }            /* each group of three opens on a gold line */
  .deflist--grid > div:nth-child(n+4) { margin-top: var(--space-3); }
  .deflist--grid dt { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .deflist--grid dd { font-size: var(--step--1); }
}
@media (max-width: 63.98em) {
  .deflist--grid { border-top-color: var(--accent); }
  .deflist--grid > div:nth-child(3) { border-bottom: 0; }
  .deflist--grid > div:nth-child(4) { margin-top: var(--space-5); border-top: 1px solid var(--accent); }
}

/* 5 · Desktop menu: the five domains in serif on the left, a picture of the one under the pointer on the right */
.nav-panel__media { display: none; }
@media (min-width: 64em) {
  .nav-panel[data-open="true"] { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem; align-items: stretch; }
  .nav-panel { width: 46rem; padding: 1.25rem 1.25rem 1.25rem 1rem; }
  .nav-panel-name { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.1; letter-spacing: 0; }
  .nav-panel-desc { margin-top: 0.2rem; }
  .nav-panel a { align-items: center; }
  .nav-panel__media { display: block; margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--base); }
  .nav-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease); }
  .nav-panel__media img.is-on { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .nav-panel__media img { transition: none; transform: none; } }
@media (min-width: 64em) {
  /* opens from the menu item; main.js nudges it back inside the window if it would spill (--nav-shift) */
  .nav-panel { left: 0; transform: translateX(var(--nav-shift, -2rem)); width: min(46rem, calc(100vw - 2rem)); }
}
@media (min-width: 64em) and (max-width: 79.98em) {
  .nav-panel[data-open="true"] { grid-template-columns: minmax(0, 1fr) 12.5rem; }
}

/* Footer: every link carries its symbol in a fine gold ring (avatar), in the site's line-icon style */
.footer-grid .f-link { display: inline-flex; align-items: center; gap: 0.7rem; background-image: none; }
.f-ico {
  flex: none; display: inline-grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.f-ico svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.footer-grid .f-link:hover .f-ico, .footer-grid .f-link:focus-visible .f-ico {
  background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--gold);
}
.footer-grid .f-link:hover { color: var(--gold); }
.footer-grid li + li { margin-top: 0.6rem; }

/* ================= Premium pass (2026-11-09) ================= */

/* 2 · Photographs: a blurred preview of the picture shows at once; the real photograph fades in over it once loaded */
.lq > img { opacity: 0; transform: scale(1.015); transition: opacity 1.1s cubic-bezier(.25,.1,.25,1), transform 1.8s cubic-bezier(.2,.7,.2,1); }
.lq > img.is-loaded { opacity: 1; transform: none; }
.no-js .lq > img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lq > img { transition: opacity .3s linear; transform: none; } }
/* no development placeholder while a photograph loads: no frame, no cross, no label */
.img-slot.is-missing, .theme-paper .img-slot.is-missing { border: 0; }
.img-slot.is-missing::before { content: none; }
.img-slot.is-missing::after { content: none; }
.img-slot.is-missing img { visibility: visible; }

/* 3 · Typographic finesse */
body { font-kerning: normal; font-variant-ligatures: common-ligatures contextual; text-rendering: optimizeLegibility; }
p, dd, li, .lede, figcaption { text-wrap: pretty; }
.prose, .qa__a, .lede { hanging-punctuation: first allow-end last; }
.mk, .stats, table, .feed__date, .lead-story__meta { font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3, .statement__line { font-variant-numeric: lining-nums proportional-nums; }
.eyebrow, .footer-grid h4, .mk__name, .brand-sub, .crumbs, .letter-index, .btn, .nav-link, .nav-sub-toggle { font-feature-settings: "case" 1, "kern" 1; }

/* 4 · Contact form: floating labels, a gold line drawn from the left on focus, a gold chevron, a quiet error state */
.form--float .field { position: relative; display: block; }
.form--float .field label {
  position: absolute; left: 0; top: 1.55rem; z-index: 1; pointer-events: none;
  transform-origin: left top; transition: transform .28s var(--ease), color .28s var(--ease), top .28s var(--ease);
  color: color-mix(in srgb, var(--fg) 62%, transparent); font-weight: 400; font-size: var(--step-0);
}
.form--float .field input, .form--float .field textarea, .form--float .field select {
  width: 100%; padding: 1.55rem 0 0.6rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.form--float .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237A5F2B' stroke-width='1.4'/%3E%3C/svg%3E"), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat, no-repeat; background-position: right .25rem center, 0 100%; background-size: 12px, 0 2px;
}
.form--float .field input:focus, .form--float .field textarea:focus { background-size: 100% 2px; box-shadow: none; outline: none; }
.form--float .field select:focus { background-size: 12px, 100% 2px; box-shadow: none; outline: none; }
.form--float .field:has(:focus) label,
.form--float .field:has(input:not(:placeholder-shown)) label,
.form--float .field:has(textarea:not(:placeholder-shown)) label,
.form--float .field:has(select) label {
  top: 0.2rem; transform: scale(.8); color: var(--accent); font-weight: 500; letter-spacing: .02em;
}
.form--float .field :user-invalid { border-bottom-color: #A4523F; }
.form--float .field:has(:user-invalid) label { color: #A4523F; }
.form--float .field textarea { min-height: 7rem; }

/* 5 · Glossary: search, and the letter bar stays under the header while you read */
.gl-search { position: relative; max-width: 30rem; margin-bottom: var(--space-3); }
.gl-search input {
  width: 100%; padding: 0.85rem 0 0.7rem 2.1rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  background: transparent; font-size: var(--step-0); color: var(--fg); border-radius: 0;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1);
}
.gl-search input:focus { outline: none; background-size: 100% 2px; }
.gl-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.gl-search svg { position: absolute; left: 0; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%);
  fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.gl-empty { margin-top: var(--space-4); color: var(--fg-2); }
.glossary .letter-index { position: sticky; top: var(--header-h); z-index: 5; background: var(--bg); }
.letter-index a[aria-current="true"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.letter-index a.is-empty { opacity: .3; pointer-events: none; }
@media (max-width: 47.98em) {
  .glossary .letter-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .glossary .letter-index::-webkit-scrollbar { display: none; }
}

/* 6 · A fine gold reading line on the long pages */
.read-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold));
  transform-origin: 0 50%; transform: scaleX(0); }

/* =====================================================================
   Client changes #3 (2026-11-09)
   Menu: the five domains one by one. Cards: every activity as a bullet. Ticker: a banner across the top of Home.
   ===================================================================== */
:root { --bar-h: 0px; --tk-h: 0px; }
@media (min-width: 64em) { :root { --bar-h: 2.85rem; } }
body:has(.top-ticker) { --tk-h: 2.5rem; }

/* Phone drawer: the domains are menu items like the others */
@media (min-width: 64em) { .nav-item--domain { display: none; } }

/* Desktop: the domain bar, five equal cells under the main menu, divided by short gold hairlines */
.domain-bar { display: none; }
@media (min-width: 64em) {
  .domain-bar { display: block; border-top: 1px solid color-mix(in srgb, var(--paper) 9%, transparent); }
  .site-header .domain-bar .container { display: block; min-height: 0; }
  .domain-bar ul { width: 100%; display: flex; align-items: stretch; min-height: var(--bar-h); margin: 0; padding: 0; list-style: none; }
  .domain-bar li { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; }
  .domain-bar li + li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.95rem; transform: translateY(-50%);
    background: color-mix(in srgb, var(--gold) 38%, transparent);
  }
  .domain-bar a {
    padding: 0.3rem 0;
    font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap;
    color: color-mix(in srgb, var(--paper) 88%, transparent); text-decoration: none;
    background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-position: 50% 100%; background-repeat: no-repeat;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .domain-bar a:hover, .domain-bar a:focus-visible, .domain-bar a[aria-current="page"] { color: var(--gold); background-size: 100% 1px; }
}
@media (min-width: 64em) and (max-width: 79.98em) { .domain-bar a { font-size: 1.0625rem; } }

/* Everything that sits under the header leaves room for the domain bar (and, on Home, the ticker) */
[id] { scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 0.5rem); }
.hero--image { padding-top: calc(var(--header-h) + var(--bar-h) + var(--space-section)); }
@media (min-width: 64em) { .qa__q { top: calc(var(--header-h) + var(--bar-h) + 2rem); } }
.glossary .letter-index { top: calc(var(--header-h) + var(--bar-h)); }
@media (max-width: 63.98em) {
  .site-nav[data-open="true"] { height: calc(100dvh - var(--header-h) - var(--dock, 0px)); }
}

/* Cards: every activity of the domain, as a bullet list */
.biz-card__list {
  grid-column: 1 / -1; display: grid; gap: 0.45rem; margin: 0.15rem 0 0; padding: 0; list-style: none;
  font-size: var(--step--1); line-height: 1.45; color: var(--fg-2);
}
.biz-card__list li { position: relative; padding-left: 1rem; }
.biz-card__list li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.3rem; height: 0.3rem; border-radius: 50%;
  background: var(--gold);
}

/* Home: the market ticker as a slim banner across the very top, above the menu */
.top-ticker {
  position: relative; z-index: 49; height: var(--tk-h); overflow: hidden;
  background: #0B0B0A; color: var(--paper);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
}
.top-ticker .mk { flex-direction: row; align-items: stretch; height: var(--tk-h); min-height: 0; }
.top-ticker .mk__label { order: 0; padding: 0 1.15rem 0 var(--gutter); font-size: 0.625rem; letter-spacing: 0.22em; }
.top-ticker .mk__label::before { content: ""; left: auto; right: 0; height: 0.95rem; }
.top-ticker .mk__track { order: 1; }
.top-ticker .mk__item {
  display: flex; align-items: center; gap: 0.65rem; padding: 0 1.5rem;
  border-right: 1px solid color-mix(in srgb, var(--paper) 7%, transparent);
}
.top-ticker .mk__name { font-size: 0.625rem; letter-spacing: 0.16em; }
.top-ticker .mk__price { font-size: 0.8125rem; }
.top-ticker .mk__chg { font-size: 0.6875rem; }
.top-ticker .mk__chg i { font-size: 0.45rem; margin-right: 0.3rem; }
.top-ticker .mk__spark { width: 34px; height: 12px; }
@media (max-width: 47.98em) {
  .top-ticker .mk__label { padding: 0 0.85rem 0 var(--gutter); }
  .top-ticker .mk__item { padding: 0 1.1rem; gap: 0.5rem; }
  .top-ticker .mk__spark { display: none; }
}
/* The fixed menu starts under the banner and slides up with it as the page scrolls (main.js keeps --dock in step) */
body:has(.top-ticker) .site-header { transform: translateY(var(--dock, var(--tk-h))); }

/* News: live business television (Bloomberg Television). A still with a gold play button until the visitor presses play. */
.live-tv { background: var(--base); color: var(--paper); }
.live-tv__grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 64em) { .live-tv__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); } }
.live-tv__player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.live-tv__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-tv__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--base); }
.live-tv__poster { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); transition: filter 600ms var(--ease), transform 900ms var(--ease); }
.live-tv__play:hover .live-tv__poster, .live-tv__play:focus-visible .live-tv__poster { filter: saturate(1) brightness(0.92); transform: scale(1.015); }
.live-tv__btn {
  position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--gold) 18%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.live-tv__btn svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.live-tv__play:hover .live-tv__btn { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 0.75rem color-mix(in srgb, var(--gold) 14%, transparent); }
.live-tv__badge {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.live-tv__meta h2 { margin: 0 0 1rem; }
.live-tv__meta p:not(.live-tv__badge) { color: var(--fg-2); margin: 0 0 1.5rem; }
.live-tv .arrow-link { color: var(--gold); }
/* The player continues the title block on the same dark ground: one gap, not two section paddings stacked */
.hero--page:has(+ .live-tv) { padding-bottom: 0; }
.hero--page + .live-tv { padding-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
@media (min-width: 64em) {
  .live-tv__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); }
  .live-tv__player { max-width: 46rem; }
}
.live-tv__meta { max-width: 26rem; }

/* =====================================================================
   Less "AI template" (2026-11-09)
   1. Clean edges: no gradient bands between dark and light sections, no feathered or veiled photographs.
   2. Gold kept for three things only: the logo, the primary buttons (and the live player's play button),
      and the gold line of the home title. Everything else is drawn in the text colours and hairlines.
   3. No scroll-reveal animations.
   ===================================================================== */

/* 1 · Sections meet on a straight edge */
:is(.hero, .moment, .closing, .statement:not(.theme-paper), .section:not(.theme-paper)) + .theme-paper { background: var(--paper); padding-top: var(--space-section); }
:is(.hero, .moment, .closing, .statement:not(.theme-paper), .section:not(.theme-paper)) + .theme-paper.statement { padding-top: var(--space-section-lg); }
.theme-paper + .section:not(.theme-paper) { background: var(--base); padding-top: var(--space-section); }
.theme-paper + .statement:not(.theme-paper) { background: var(--base); padding-top: var(--space-section-lg); }
.theme-paper + :is(.closing) { background: var(--base); padding-top: var(--space-section-lg); }
.theme-paper + .moment { background: var(--base); padding-top: 0; }
main:has(> .theme-paper:last-child) + .site-footer { background: var(--base); padding-top: var(--space-section); }

/* Photographs keep their own edges: no feathering, no veil */
.section:not(.theme-paper) .img-slot:not(.is-missing) { -webkit-mask-image: none; mask-image: none; }
.section:not(.theme-paper) .img-slot::after { content: none; }
.moment__media, .closing__media { -webkit-mask-image: none; mask-image: none; }
.moment::before { content: none; }
/* Inner page heroes: the photograph ends on the hero's edge instead of dissolving */
.hero--media .hero-media { -webkit-mask-image: none; mask-image: none; }
/* The faint gold grid over page heroes goes */
.hero--page::after { content: none; }

/* 2 · Gold only where it means something */
:root, .theme-base { --accent: var(--fg-2); --link: var(--paper); }
.theme-paper { --accent: var(--ink-2); --link: var(--ink); }
.ico, .theme-paper .ico, .biz-card .num, .biz-card__go, .qa__num, .stats dt, .eyebrow, .rule-label,
.event__date, .lead-story__meta, .crumbs a, .hero-meta a, .field label .req, .faq summary::after { color: var(--fg-2); }
.stats dt { color: var(--fg); }
.arrow-link, .theme-paper .arrow-link, .live-tv .arrow-link, .link, .theme-paper .link, .contact-list a, .glossary a,
.prose a, .theme-paper .prose a, .faq .answer a { color: var(--fg); }
.prose a, .faq .answer a, .glossary a, .contact-list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.prose a:hover, .faq .answer a:hover, .glossary a:hover, .contact-list a:hover { text-decoration-color: currentColor; }
.biz-card__list li::before { background: color-mix(in srgb, var(--fg) 45%, transparent); }
.biz-card:hover, .biz-card:focus-within, .biz-card__link:hover .biz-card__body { border-color: var(--fg); }
.check-list li::before { border-color: var(--fg-2); }
.trio > div, .engage > div, .event, .section--rule, .glossary-group, .feed__head, .deflist--grid, .deflist--grid > div { border-top-color: var(--line); }
.deflist--grid > div:nth-child(4) { border-top-color: var(--line); }
.feed__head { border-bottom-color: var(--line); }
.engage > div:hover { border-color: var(--fg-2); }
.pull p::before, .rule-label::before, .statement:not(.statement--motto) .statement__line::before, .nav-foot__line::before { background: var(--line); }
/* The client's motto signature keeps the GEO mark (logo, gold); only its rule turns to a quiet hairline */
.statement--motto .statement__line::before, .closing h2.motto::before, .footer-motto::before {
  background-image: url("/assets/logo-mark.svg"), linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent));
}
.statement__line em, h2 em, .theme-paper h2 em, .footer-motto em, .tf-motto { color: inherit; }
.tf-motto { color: var(--fg-2); }
.theme-paper h1 em { color: inherit; }
.event:hover .event__title, .feed__link:hover .feed__title, .lead-story__link:hover .lead-story__title { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.letter-index a:hover { color: var(--fg); border-color: var(--fg-2); background: transparent; }
.letter-index a[aria-current="true"] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--fg); }
.read-line, .swipe-progress i { background: var(--fg) !important; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); border-bottom-color: var(--fg); box-shadow: none; }
.form--float .field input, .form--float .field select, .form--float .field textarea, .gl-search input { background-image: linear-gradient(var(--fg), var(--fg)); }
.form--float .field:has(:focus) label, .form--float .field:has(input:not(:placeholder-shown)) label,
.form--float .field:has(textarea:not(:placeholder-shown)) label, .form--float .field:has(select) label { color: var(--fg-2); }
.gl-search svg { stroke: var(--fg-2); }
/* Header, domain bar, language: white on hover and for the current page, not gold */
@media (min-width: 64em) { .nav-link, .nav-sub-toggle, .domain-bar a { background-image: linear-gradient(currentColor, currentColor); } }
.nav-link:hover, .nav-link[aria-current="page"], .domain-bar a:hover, .domain-bar a:focus-visible, .domain-bar a[aria-current="page"] { color: var(--paper); }
.domain-bar li + li::before { background: color-mix(in srgb, var(--paper) 18%, transparent); }
.lang-switch a[aria-current="true"] { color: var(--paper); }
/* Footer: quiet rings and links */
.f-ico { color: var(--fg-2); border-color: color-mix(in srgb, var(--paper) 16%, transparent); }
.footer-grid a { color: var(--fg); }
.footer-grid .f-link:hover { color: var(--paper); }
.footer-grid .f-link:hover .f-ico, .footer-grid .f-link:focus-visible .f-ico { background: transparent; border-color: var(--fg-2); }
/* Ticker and live badges: neutral; prices keep their green and red */
.top-ticker { border-bottom-color: var(--line-dark); }
.mk__label, .live-tv__badge { color: var(--fg-2); }
.mk__label::before { background: var(--line-dark); }
.mk__spark polyline { stroke: color-mix(in srgb, var(--paper) 55%, transparent); }
.live-dot { background: #C85A4A; }
.live-dot::after { border-color: #C85A4A; }
.live-tv__player { box-shadow: 0 0 0 1px var(--line-dark), 0 40px 80px -40px rgba(0, 0, 0, 0.8); }

/* 3 · Content is simply there: no fade-up on scroll */
.reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (min-width: 64em) { .nav-link--cta { background-image: none; } }

/* Opening screen, minimal: the GEO mark fades in, one hairline fills beneath it, the screen dissolves. ~1.3 s, once per visit. */
.ld { display: none; }
html.ld-on .ld {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem;
  background: var(--base);
  animation: ld-out 600ms cubic-bezier(0.4, 0, 0.2, 1) 1.05s forwards;
}
html.ld-on .ld img { width: 3.5rem; height: 3.5rem; opacity: 0; animation: ld-in 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s forwards; }
html.ld-on .ld i {
  display: block; width: 4.5rem; height: 1px; background: color-mix(in srgb, var(--paper) 45%, transparent);
  transform: scaleX(0); transform-origin: left center; animation: ld-line 900ms cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes ld-in { to { opacity: 1; } }
@keyframes ld-line { to { transform: scaleX(1); } }
@keyframes ld-out { to { opacity: 0; visibility: hidden; } }

/* =====================================================================
   Robustness (2026-11-09): nothing on the page waits for an animation to finish.
   If a browser stalls or skips animations (power saving, reduced motion, a slow phone), the page still works.
   ===================================================================== */
/* No animated page-to-page transitions: during one the browser shows a still image of the page, which reads as frozen */
@view-transition { navigation: none; }
.site-header { view-transition-name: none; }
body { animation: none !important; opacity: 1; }
/* The opening screen never catches a tap; main.js also takes it out of the page after 1.8 s whatever the animations do */
.ld { pointer-events: none; }

/* Market banner: always moving (also under "reduce motion", only slower), on the GPU, with no mask over the moving strip */
.top-ticker .mk__track { -webkit-mask-image: none; mask-image: none; position: relative; overflow: hidden; }
.top-ticker .mk__track::before, .top-ticker .mk__track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2.5rem; z-index: 1; pointer-events: none;
}
.top-ticker .mk__track::before { left: 0; background: linear-gradient(to right, #0B0B0A, rgba(11, 11, 10, 0)); }
.top-ticker .mk__track::after { right: 0; background: linear-gradient(to left, #0B0B0A, rgba(11, 11, 10, 0)); }
.top-ticker .mk__list { will-change: transform; animation: mk-glide 70s linear infinite; }
@keyframes mk-glide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .top-ticker .mk__list { animation: mk-glide 140s linear infinite !important; }
  .top-ticker .mk__track { overflow: hidden !important; }
}

/* Home video: no mask on a playing video (costly on phones); a gradient layer does the same fade */
.hero--image .hero-media { -webkit-mask-image: none; mask-image: none; }
.hero--image::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, var(--base), rgba(15, 15, 14, 0));
}
.hero--image > .container { position: relative; z-index: 2; }
.hero-scrim { pointer-events: none; }

/* Home band: the client's daytime port, shown as made - whole picture on desktop, no veil, no filter */
.moment::after { content: none; }
.moment__media { filter: none; }
@media (min-width: 48em) { .moment { min-height: 0; aspect-ratio: 2000 / 672; } .moment__media { object-position: center; } }
@media (max-width: 47.98em) { .moment { min-height: 15rem; } .moment__media { object-position: center 60%; } }
/* Card photographs as made: no dimming or desaturation (the hover keeps only the slow zoom) */
.biz-card__media img, .biz-card__link:hover .biz-card__media img, .biz-card__link:focus-visible .biz-card__media img { filter: none; }
/* Trade Finance hero: the client's daytime photograph stays daylight - the shade sits only behind the copy on the left */
@media (min-width: 48em) {
  .hero--media:has(.hero-media[src*="trade-finance-wide"]) .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 30%, color-mix(in srgb, var(--base) 25%, transparent) 50%, transparent 62%);
  }
}
/* Capital hero: the client's daytime photograph, shade only behind the copy (same as Trade Finance) */
@media (min-width: 48em) {
  .hero--media:has(.hero-media[src*="capital-wide"]) .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 30%, color-mix(in srgb, var(--base) 25%, transparent) 50%, transparent 62%);
  }
}
/* Maritime hero: the client's daytime photograph, shade only behind the copy */
@media (min-width: 48em) {
  .hero--media:has(.hero-media[src*="maritime-wide"]) .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 30%, color-mix(in srgb, var(--base) 25%, transparent) 50%, transparent 62%);
  }
}
/* Commodities hero: the client's daytime photograph, shade only behind the copy */
@media (min-width: 48em) {
  .hero--media:has(.hero-media[src*="commodities-wide"]) .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 30%, color-mix(in srgb, var(--base) 25%, transparent) 50%, transparent 62%);
  }
}
/* Logistics hero: the client's daytime train photograph (in place of the night video), shade only behind the copy */
@media (min-width: 48em) {
  .hero--media:has(.hero-media[src*="logistics-card"]) .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 30%, color-mix(in srgb, var(--base) 25%, transparent) 50%, transparent 62%);
  }
}
/* Home "Independent and impartial": the brass-door photograph shown whole beside the text, centred on it */
.grid--approach { align-items: center; }
/* Home hero: the client's daytime ship video - shade only behind the copy, the ship and the sea stay daylight */
@media (min-width: 48em) {
  .hero--image .hero-scrim {
    background: linear-gradient(to right, var(--base) 0%, color-mix(in srgb, var(--base) 78%, transparent) 28%, color-mix(in srgb, var(--base) 22%, transparent) 50%, transparent 64%);
  }
  .hero--image .hero-video { object-position: center 62%; }
}

/* =====================================================================
   Photo frame (client, 2026-11-09): a fine frame in the exact gold of the GEO mark (#C9A961) on every photograph
   ===================================================================== */
.img-slot::after, .biz-card__media::after, .section:not(.theme-paper) .biz-card__media::after,
.section:not(.theme-paper) .img-slot:not(.is-missing)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px #C9A961; border: 0; background: none;
}
.biz-card__media { position: relative; }
.img-slot.is-missing::after { content: ""; }
/* Full-width photograph band on Home: the same gold line above and below */
.moment { border-top: 1px solid #C9A961; border-bottom: 1px solid #C9A961; }

/* =====================================================================
   Type & spacing system (audit, 2026-11-09). One scale, one rhythm, no exceptions.
   Inter:      12 labels · 14 small · 17 body · 18 item titles · 19 lead       (phone: lead 17)
   Cormorant:  page title > section title > statement line, one tracking (-0.01em)
   Rhythm:     title → text 24px · title → list or grid 48px · text starts level with its photograph
   ===================================================================== */
:root { --fs-label: 0.75rem; --fs-small: 0.875rem; --fs-item: 1.125rem; --track-label: 0.16em; --gap-title-text: 1.5rem; --gap-title-block: 3rem; }

/* 1 · Item titles: one size everywhere (cards, lists, columns, events, feeds) */
main :is(.deflist dt, .trio h3, .trio > div > h3, .tf-why h3, .engage h3, .audience dt, .biz-card h3, .event__title, .feed__title, h3.has-ico, .qa h3) {
  font-size: var(--fs-item); line-height: 1.35; font-weight: 500; letter-spacing: -0.005em;
}
main h3.has-ico > span { font-size: inherit; }

/* 2 · One line height per size */
main dd, .biz-card__list, .feed__desc, .event__place, .crumbs, .form-note { line-height: 1.6; }

/* 3 · Labels: 12px, and every all-caps label tracked the same */
.event__date, figcaption, .live-tv__badge, .related-sub, .rule-label, .eyebrow, .lead-story__meta, .feed__label {
  font-size: var(--fs-label);
}
.related-sub { text-transform: uppercase; font-weight: 500; }
.event__date, figcaption, .live-tv__badge, .related-sub, .rule-label, .eyebrow, .lead-story__meta, .feed__label,
.footer-grid h4, .mk__label, .lang-switch, .nav-toggle, .brand-sub { letter-spacing: var(--track-label); }

/* 4 · Display hierarchy: page title (h1) > section title (h2) > statement line, all tracked alike */
h1, .hero--image h1, .section h2:not(.qa__q h2):not(.lead-story__title):not(.event__title), .statement__line, h2.motto { letter-spacing: -0.01em; }
.statement__line, .closing h2.motto { font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); line-height: 1.06; }
@media (max-width: 47.98em) { .statement__line, .closing h2.motto { font-size: 2.25rem; line-height: 1.08; } }

/* 5 · Rhythm under section titles */
main :is(.section-head, .prose, [class*="col-"], .reveal, .closing__inner, .related-head > div, .live-tv__meta) > h2 + :is(p, .lede, .lede-sm, .tf-motto, .btn-row, .rule-label) { margin-top: var(--gap-title-text); }
main :is(.section-head, .prose, [class*="col-"], .reveal) > h2 + :is(ul, ol, dl, .deflist, .trio, .audience, .grid, .faq, .check-list, .qa-list) { margin-top: var(--gap-title-block); }
main .section-head { margin-bottom: var(--gap-title-block); }
main .section-head > :last-child { margin-bottom: 0; }
.live-tv__meta h2 { margin-bottom: 0; }

/* 6 · Text beside a photograph starts level with it (the old overlap offset is gone) */
@media (min-width: 48em) {
  .grid > .straddle + *, .grid > .img-slot + * { margin-top: 0; }
  .grid:has(> .img-slot.col-5), .grid:has(> .img-slot.col-4), .grid:has(> .img-slot.col-6), .tf-why, .grid--approach { align-items: start; }
  .tf-why h3, .tf-why > div > :first-child { margin-top: 0; }
}

/* 7 · Comfortable line length: ~70 characters */
main p:not(.statement__line):not(.tf-motto):not(.lead-story__title):not(.mk__label):not(.live-tv__badge) { max-width: 36em; }
main .pull p, main [style*="text-align: center"] p { margin-inline: auto; }

/* 8 · Phone: lighter lead paragraph under page titles */
@media (max-width: 47.98em) { .lede, .hero .lede { font-size: 1.0625rem; line-height: 1.6; } }
/* System, last stragglers */
main div > dd { line-height: 1.6; }
main .map figcaption, main .feed__date { font-size: var(--fs-label); }
main .feed__date { letter-spacing: var(--track-label); }
main .feed__head .feed__src { font-size: var(--fs-item); line-height: 1.35; }
main [class*="col-"] > h2 + form { margin-top: var(--gap-title-block); }
main .lead-story__link > h2 + p { margin-top: var(--gap-title-text); }
main .audience dd, main .stats dd, main .feed__desc, main .biz-card__text { line-height: 1.6; }
.lede, .lede-sm, .qa__a p:first-child, .lead-story__desc { line-height: 1.55; }
@media (max-width: 47.98em) { .lede, .hero .lede { line-height: 1.6; } }
/* Home "Why it matters": the frame in the logo gold with 30% more chroma (same hue and lightness), so it holds on the paper ground */
.tf-why .img-slot::after { box-shadow: inset 0 0 0 1px #D1A740; }

/* Portrait sections: the extra copy under the list, set off by a hairline */
.who-more { margin-top: var(--gap-title-block); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.who-more p { color: var(--fg-2); }
.who-more p + p { margin-top: 1rem; }
.who-more p:last-child { margin-top: 1.5rem; }
.prose .who-more { margin-top: var(--space-6); }
/* Contact form status line */
.form-status { margin-top: var(--space-4); padding: 1rem 1.25rem; border-left: 2px solid var(--fg-2); font-size: var(--fs-small); line-height: 1.6; color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.form-status.is-ok { border-left-color: #C9A961; }
.form-status.is-err { border-left-color: #C85A4A; }
.form-status[hidden] { display: none; }
/* Contact form fixes: the select keeps its chevron (neutral, like the rest of the form) under the gold-less underline,
   and fields the script hides after sending really disappear */
.form--float .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355534E' stroke-width='1.4'/%3E%3C/svg%3E"), linear-gradient(var(--fg), var(--fg));
}
form.form [hidden], form.form .field[hidden], form.form .form-row[hidden], form.form .btn-row[hidden] { display: none !important; }
/* Market banner moved by script (markets.js): the CSS animation steps aside once the script runs */
.mk.is-js .mk__list, .top-ticker .mk.is-js .mk__list { animation: none !important; will-change: transform; }