/* ============================================================
   Globa 3 — Main Stylesheet
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Color system */
  --color-bg:           #0e0d0b;
  --color-surface:      #141310;
  --color-surface-2:    #1c1a17;
  --color-surface-3:    #242118;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-mid:   rgba(255, 255, 255, 0.12);

  --color-text-primary: #f5f0e8;
  --color-text-secondary: rgba(245, 240, 232, 0.8);
  --color-text-muted:   rgba(245, 240, 232, 0.32);

  --color-accent:       #c8a96e;
  --color-accent-dim:   rgba(200, 169, 110, 0.15);
  --color-accent-hover: #d4b87a;

  --color-sand:         #d4c9b4;
  --color-stone:        #8c8070;

  /* Typography */
  --font-display:  'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --font-body:     'IBM Plex Sans', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --max-width: 1200px;
  --gutter: 2rem;

  /* Fixed nav offset for scroll anchoring
     Nav logo: 38px + padding-block: 2×1.125rem(18px) = 74px total.
     88px gives ~14px breathing room above each section. */
  --nav-offset: 88px;

  /* Transitions */
  --transition-base: 240ms ease;
  --transition-slow: 480ms ease;
}

html {
  scroll-behavior: smooth;
  /* Global offset so the fixed nav never covers anchor targets */
  scroll-padding-top: var(--nav-offset);
  font-size: 16px;
}

/* Per-element scroll margin — belt-and-suspenders for browsers that
   implement scroll-margin-top more reliably than scroll-padding-top.
   - section[id]   → hero (#home), which sits at page top (no section padding issue)
   - .container[id] → all other nav targets; IDs live on the container so the
                      browser snaps to content-start rather than to the section's
                      top padding (9rem of empty space that would appear under the nav) */
section[id],
.container[id] {
  scroll-margin-top: var(--nav-offset);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-3xl);
}

.section--light {
  background-color: var(--color-surface);
}

.section--mid {
  background-color: var(--color-surface-2);
}

/* Warm ivory light section — breaks dark rhythm */
.section--ivory {
  background-color: #f0ebe0;
  color: #1a1814;
}

.section--ivory .section-eyebrow {
  color: #8b6e3e;
}

.section--ivory .section-title {
  color: #1a1814;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.section-intro {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: 1.7;
}

.divider {
  width: 2.5rem;
  height: 1px;
  background-color: var(--color-accent);
  margin-block: var(--space-md);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color var(--transition-slow), backdrop-filter var(--transition-slow);
  padding-block: 1.125rem;
}

.nav.nav--scrolled {
  background-color: rgba(14, 13, 11, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo {
  height: 38px;
  width: auto;
  display: block;
  opacity: 0.88;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.nav__links a {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.72);
  transition: color var(--transition-base);
}

.nav__links a:hover {
  color: var(--color-text-primary);
}

.nav__cta {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  border: 1px solid rgba(200, 169, 110, 0.35) !important;
  padding: 0.45rem 1rem !important;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base) !important;
}

.nav__cta:hover {
  background-color: var(--color-accent-dim) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-hover) !important;
}

/* Mobile menu toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 110;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-3xl);
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Atmospheric gradient background — warm bronze/charcoal only, no cool tints */
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Map warmth — soft bronze radial centred on right-column map area.
       Full-bleed element = no container shape, no rectangular boundary. */
    radial-gradient(ellipse 38% 52% at 74% 52%, rgba(188, 150, 88, 0.07) 0%, rgba(188, 150, 88, 0.02) 52%, transparent 72%),
    /* Depth vignette — warm dark lift in upper-right */
    radial-gradient(ellipse 75% 55% at 65% 28%, rgba(36, 28, 14, 0.45) 0%, transparent 70%),
    /* Base tone */
    linear-gradient(165deg, #0c0b09 0%, #131210 40%, #131210 70%, #0e0d0b 100%);
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Fine grain texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: 0.6;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: end;
  gap: 0;
  width: 100%;
}

/* Hero market-network visual — active desktop styles */
.hero__visual {
  overflow: visible;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  /* Left-edge fade only — blends the map into the text column.
     Top / right / bottom edges dissolve into the hero's own dark background
     (overflow: hidden on .hero). No four-sided rectangle. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%);
  mask-image:         linear-gradient(to right, transparent 0%, black 14%);
  opacity: 0;
  animation: fadeIn 1.4s ease 0.9s forwards;
}

.hero__visual-svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp 0.9s ease 0.2s forwards;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  max-width: 660px;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp 0.9s ease 0.35s forwards;
}

.hero__subheadline {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  opacity: 0;
  font-weight: 300;
  animation: fadeUp 0.9s ease 0.5s forwards;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.65s forwards;
}

.hero__tagline {
  margin-top: var(--space-md);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0;
  animation: fadeUp 0.9s ease 0.8s forwards;
}

/* Decorative side rule */
.hero__rule {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-3xl);
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
  z-index: 1;
  opacity: 0;
  animation: fadeIn 1.2s ease 1s forwards;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  border: none;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #0e0d0b;
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-mid);
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 0.65rem 1.25rem;
  font-size: 0.625rem;
}

.btn--ghost:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-mid);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: gap var(--transition-base), color var(--transition-base);
}

.link-arrow::after {
  content: '→';
  font-size: 0.875em;
  transition: transform var(--transition-base);
}

.link-arrow:hover {
  color: var(--color-accent-hover);
  gap: 0.65rem;
}

/* --- Platform — architectural operating model (ivory section) --- */

/* Header: eyebrow then title | intro side by side, bottom-aligned */
.platform-header {
  margin-bottom: var(--space-2xl);
}

.platform-header__split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: start;
}

.platform-header__left {
  display: flex;
  flex-direction: column;
}

/* section-title provides all typographic properties */
.platform-headline {
  margin-bottom: 0;
}

.platform-desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(26, 24, 20, 0.9);
  font-weight: 300;
}

/* Three operating layers — full-width rows spanning the container */
.platform-rows {
  border-top: 1px solid rgba(26, 24, 20, 0.12);
}

.platform-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2fr;
  column-gap: var(--space-xl);
  align-items: start;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid rgba(26, 24, 20, 0.08);
  transition: border-bottom-color var(--transition-base);
}

.platform-row:hover {
  border-bottom-color: rgba(26, 24, 20, 0.18);
}

.platform-row__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(139, 110, 62, 0.6);
  margin-top: 0.5rem;
  transition: color var(--transition-base);
}

.platform-row:hover .platform-row__num {
  color: rgba(139, 110, 62, 1);
}

.platform-row__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1814;
  line-height: 1.15;
}

.platform-row__copy {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(26, 24, 20, 0.9);
  font-weight: 300;
}

/* --- Divisions --- */
.divisions .section-header {
  max-width: 680px;
  margin-bottom: var(--space-2xl);
}

.divisions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.division-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), background-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.division-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.division-card:hover {
  border-color: var(--color-border-mid);
  background-color: var(--color-surface-2);
}

.division-card:hover::before {
  opacity: 1;
}

/* Scroll anchor offset for division cards.
   The extra 260px compensates for the section-header block (~163px content
   + 96px margin-bottom) that sits between the container top and the card grid.
   This ensures the "Three operating divisions" heading is visible above the
   card on desktop, where all three cards share the same grid row. */
.division-card {
  scroll-margin-top: calc(var(--nav-offset) + 260px);
}

/* Subtle :target accent — the bronze top line (normally hover-only) dims in
   when a card is the active URL fragment. No animation, no flash. */
.division-card:target {
  border-color: rgba(200, 169, 110, 0.22);
}

.division-card:target::before {
  opacity: 0.45;
}

.division-card__category {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.division-card__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.division-card__copy {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-md);
  flex: 1;
}

.division-card__support {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* --- Selected Work (unified editorial grid) --- */
.work {
  background-color: var(--color-bg);
}

.work-header {
  max-width: 680px;
  margin-bottom: var(--space-2xl);
}

/* 2-column editorial list — all 6 items use the same structure */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-2xl);
}

.work-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.work-item:hover {
  border-top-color: var(--color-border-mid);
}

.work-item__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-accent);
  opacity: 0.45;
  padding-top: 0.25rem;
}

.work-item__body {}

.work-item__cat {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.7;
  margin-bottom: 0.625rem;
}

.work-item__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.work-item__copy {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.work-item__cta {
  display: inline-flex;
  margin-top: var(--space-sm);
}

.work-item__note {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Why Globa 3 — editorial argument strip ---
 * Reference: Option A. Three-column flat rows — [number] [title] [copy]
 * side by side on one horizontal line, like an editorial index or
 * institutional argument sequence. Visually distinct from Platform:
 * dark background vs. ivory, Arabic vs. Roman numerals, leaner title
 * weight, balanced column ratios vs. Platform's description-heavy layout.
 */

.why-header {
  max-width: 680px;
  margin-bottom: var(--space-2xl);
}

/* section-title provides all typographic properties */
.why-title {}

.why__lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 300;
  font-style: normal;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* Four argument rows — number, title, copy reading across one line */
.why-rows {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.why-row {
  display: grid;
  grid-template-columns: 4rem 1fr 1.5fr;
  column-gap: var(--space-xl);
  align-items: baseline;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.why-row:last-child {
  border-bottom: none;
}

.why-row__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-accent);
  opacity: 0.5;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.why-row:hover .why-row__num {
  opacity: 0.9;
  color: var(--color-accent-hover);
}

.why-row__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.why-row__copy {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-weight: 300;
}

/* --- Leadership --- */
.leadership .section-header {
  max-width: 680px;
  margin-bottom: var(--space-2xl);
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.leader-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base);
}

.leader-card:hover {
  border-color: var(--color-border-mid);
}

.leader-card__photo {
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-3);
}

.leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(12%) contrast(1.04);
  transition: filter var(--transition-slow), transform var(--transition-slow);
}

.leader-card:hover .leader-card__photo img {
  filter: grayscale(0%) contrast(1.06);
  transform: scale(1.02);
}

.leader-card__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 0.375rem;
}

.leader-card__title {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.leader-card__copy {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
  flex: 1;
}

/* --- Where We Work (editorial two-column) --- */
.markets-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-2xl);
  align-items: start;
}

.markets-col-intro {
  position: sticky;
  top: 6rem;
}

.markets-col-intro .section-intro {
  max-width: 100%;
  margin-top: var(--space-md);
}

.markets-col-list {}

.market-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.market-row:first-child {
  border-top: 1px solid var(--color-border);
}

.market-row:hover {
  border-color: var(--color-border-mid);
}

.market-row__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-accent);
  opacity: 0.45;
  padding-top: 0.3rem;
}

.market-row__body {}

.market-row__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.market-row__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.market-row__badge {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(200, 169, 110, 0.28);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.market-row__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* Where We Work — ivory section overrides
 * All dark-background color tokens (text-primary, text-secondary, border,
 * accent) are replaced with warm dark-on-ivory equivalents, matching
 * the Platform section's light palette. Scoped via section--ivory so the
 * same market-row rules could work on dark too if ever needed.
 */
.section--ivory .market-row {
  border-bottom-color: rgba(26, 24, 20, 0.10);
}

.section--ivory .market-row:first-child {
  border-top-color: rgba(26, 24, 20, 0.10);
}

.section--ivory .market-row:hover {
  border-color: rgba(26, 24, 20, 0.18);
}

.section--ivory .market-row__num {
  color: #8b6e3e;
  opacity: 0.6;
}

.section--ivory .market-row__name {
  color: #1a1814;
}

.section--ivory .market-row__badge {
  color: #8b6e3e;
  border-color: rgba(139, 110, 62, 0.28);
}

.section--ivory .market-row__desc {
  color: rgba(26, 24, 20, 0.9);
}

.section--ivory .markets-col-intro .section-intro {
  color: rgba(26, 24, 20, 0.9);
}

/* --- Contact / CTA --- */
.contact {
  background-color: var(--color-surface);
  /* Reduce both paddings — section default (--space-3xl = 9rem) was too airy */
  padding-block-start: var(--space-2xl);
  padding-block-end: var(--space-2xl);
}

/* Centered closing statement — constrained width, all content centered */
.contact__center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  /* No padding-bottom — section's own padding-block-end provides bottom breathing room */
}

/* Subtle bronze closing mark above the eyebrow */
.contact__center::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.38;
  /* Tighter gap between line and eyebrow */
  margin: 0 auto var(--space-md);
}

/* section-title provides all typographic properties;
   remove default bottom margin — spacing handled by contact__sub */
.contact__headline {
  margin-bottom: 0;
}

.contact__sub {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin-top: var(--space-sm);
  /* Reduced from --space-2xl — gives breathing room without excess */
  margin-bottom: var(--space-lg);
}

/* Three primary routing buttons — horizontal row, centered */
.contact__primary-routes {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact__route-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-mid);
  padding: 0.9rem 1.5rem;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}

.contact__route-btn:hover {
  color: var(--color-accent-hover);
  border-color: rgba(200, 169, 110, 0.42);
}

/* General Contact — quieter secondary text link */
.contact__secondary {
  margin-top: var(--space-md);
}

.contact__general-link {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.contact__general-link:hover {
  color: var(--color-text-secondary);
}

.contact__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-2xl);
}

.contact-form {
  max-width: 640px;
  margin-inline: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color var(--transition-base);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6858' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-field select option {
  background-color: var(--color-surface-2);
  color: var(--color-text-primary);
}

.form-field textarea {
  resize: vertical;
  min-height: 130px;
}

.form__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
}

.form__confirmation {
  display: none;
  padding: var(--space-lg);
  background-color: var(--color-accent-dim);
  border: 1px solid rgba(200, 169, 110, 0.25);
  color: var(--color-sand);
  font-size: 0.9375rem;
}

.form__confirmation.is-visible {
  display: block;
}

/* --- Footer --- */
.footer {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.footer__brand {
  margin-bottom: var(--space-sm);
}

.footer__logo {
  height: 30px;
  width: auto;
  display: block;
}

.footer__tagline {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 380px;
}

.footer__tagline p:last-child {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-xl);
}

.footer__col-title {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__col ul a {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.footer__col ul a:hover {
  color: var(--color-text-primary);
}

.footer__bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__legal {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-md);
}

.footer__legal-links a {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.footer__legal-links a:hover {
  color: var(--color-text-secondary);
}

/* --- Keyboard focus (WCAG 2.4.7) ---
   Visible only for keyboard navigation; mouse clicks suppress the ring
   thanks to :focus-visible. Dark and ivory sections both use the accent
   colour, which maintains contrast on every background in use. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Suppress the default blue ring on all interactive elements so the
   custom :focus-visible style is the only one shown. */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Animations --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --- Mobile nav overlay --- */
@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    background-color: rgba(14, 13, 11, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: 100;
  }

  .nav__links.is-open {
    transform: translateX(0);
  }

  .nav__links a {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }

  .nav__cta {
    font-size: 0.875rem !important;
    padding: 0.6rem 1.5rem !important;
  }

  .hero__rule {
    display: none;
  }
}

/* --- Responsive layout adjustments --- */
@media (max-width: 1100px) {
  .hero__inner {
    grid-template-columns: 60fr 40fr;
  }
}

@media (max-width: 1024px) {
  :root {
    --space-3xl: 6rem;
    --space-2xl: 4rem;
  }

  /* Platform: collapse header split, narrow row columns */
  .platform-header__split {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
  }

  .platform-row {
    grid-template-columns: 3.5rem 1fr;
  }

  .platform-row__copy {
    grid-column: 2 / -1;
  }

  .divisions-grid {
    grid-template-columns: 1fr;
  }

  /* On mobile, cards stack vertically — reset to nav-only offset.
     The +260px section-header compensation only works on desktop where all
     three cards share the same grid row. */
  .division-card {
    scroll-margin-top: var(--nav-offset);
  }

  /* Work: collapse to single column */
  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Why: keep 3-col but tighten proportions at tablet */
  .why-row {
    grid-template-columns: 3.5rem 1fr 1fr;
    column-gap: var(--space-lg);
  }

  /* Markets: stack columns */
  .markets-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .markets-col-intro {
    position: static;
  }

  .footer__nav {
    grid-template-columns: repeat(2, auto);
  }

  /* Contact: restore standard section top padding at tablet (tokens already compress) */
  .contact {
    padding-block-start: var(--space-xl);
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 1.25rem;
    --space-3xl: 5rem;
    --space-2xl: 3rem;
    --space-xl: 2.5rem;
  }

  /* Hero: single column, hide visual */
  .hero {
    padding-bottom: var(--space-2xl);
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__content {
    padding-right: 0;
  }

  .hero__visual {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions .btn--outline {
    width: auto;
  }


  .leadership-grid {
    grid-template-columns: 1fr;
  }

  .leader-card__photo {
    height: 300px;
  }

  /* Why: collapse to 2-col at mobile — num left, title + copy stacked right */
  .why-row {
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--space-sm);
    padding: var(--space-lg) 0;
    align-items: start;
  }

  .why-row__title {
    font-size: 1.125rem;
    margin-bottom: 0.375rem;
  }

  .why-row__copy {
    grid-column: 2 / -1;
  }

  /* Work: already single column at 1024px — ensure items don't overflow */
  .work-item {
    grid-template-columns: 2rem 1fr;
    gap: var(--space-sm);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field--full {
    grid-column: auto;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__nav {
    grid-template-columns: 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Contact: stack route buttons vertically, full width on mobile */
  .contact__primary-routes {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__route-btn {
    width: 100%;
    padding: 1rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .footer__nav {
    grid-template-columns: 1fr;
  }

  .nav__logo {
    height: 22px;
  }

  .footer__logo {
    height: 24px;
  }
}

/* ============================================================
   LEGAL PAGES
   Shared layout and typography for legal content pages.
   Reuses existing design tokens and component classes
   (.section-eyebrow, .section-title, .container, .nav, .footer)
   wherever possible — no duplicate CSS.
============================================================ */

/* Narrow centered column for all legal content */
.legal-wrap {
  max-width: 780px;
  padding-block: var(--space-3xl);
}

/* Hero area — eyebrow + h1 + last-updated date */
.legal-hero {
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}

/* h1 uses .section-title for fluid clamp size/weight/tracking;
   override bottom margin so date sits close beneath */
.legal-title {
  margin-bottom: 0;
}

.legal-date {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  letter-spacing: 0.03em;
}

/* Stand-alone intro paragraph (appears before numbered sections) */
.legal-intro {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--color-text-secondary);
  font-weight: 300;
  margin-bottom: var(--space-2xl);
  max-width: 64ch;
}

/* Individual numbered section */
.legal-section {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Section heading — Newsreader serif, lighter than .section-title */
.legal-section__heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

/* Body text — generous line-height for dense legal copy */
.legal-section p {
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--color-text-secondary);
  font-weight: 300;
}

.legal-section p + p {
  margin-top: var(--space-sm);
}

@media (max-width: 768px) {
  .legal-wrap {
    padding-block: var(--space-2xl);
  }

  .legal-hero {
    padding-bottom: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}