/* =========================================================
   Fire Venture Group (Bridgeway)
   Editorial-executive aesthetic
   ========================================================= */

:root {
  --ivory:        #f5efe4;
  --ivory-soft:   #ede5d3;
  --paper:        #faf6ed;
  --ink:          #14171c;
  --ink-soft:     #2a2f38;
  --ink-muted:    #5a606b;
  --line:         rgba(20, 23, 28, 0.12);
  --line-soft:    rgba(20, 23, 28, 0.06);
  --burgundy:     #5b1a1a;
  --burgundy-deep:#3d0f0f;
  --burgundy-lite:#7a2727;
  --gold:         #b8862f;
  --gold-soft:    #d4a84f;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Inter Tight', -apple-system, system-ui, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.5rem, 4vw, 3rem);
  --header-h: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(184,134,47,0.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 30%, rgba(91,26,26,0.06), transparent 60%);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.11 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer, section { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--burgundy); color: var(--ivory); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ivory); padding: .75rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.narrow { max-width: 820px; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}

h1 { font-size: clamp(2.5rem, 6.5vw, 5.5rem); }
h2 { font-size: clamp(1.85rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; letter-spacing: -0.005em; }

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
}

p { color: var(--ink-soft); }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--burgundy);
}

/* =========================================================
   HEADER / NAV — burgundy background, light text
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--burgundy-deep);
  border-bottom: 1px solid rgba(245,239,228,0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ivory);
}
.brand-mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
}
.brand-mark-fvg {
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 0.04em;
}
.brand-mark-divider {
  font-weight: 200;
  color: rgba(245,239,228,0.45);
  font-size: 1.4rem;
  line-height: 1;
  font-family: var(--sans);
  position: relative;
  top: -0.05em;
}
.brand-mark-bridgeway {
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: rgba(245,239,228,0.88);
  letter-spacing: 0.005em;
  position: relative;
  top: -0.02em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(245,239,228,0.78);
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--ivory); }
.nav-link.is-active { color: var(--gold-soft); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-soft);
}

/* Contact button — black bg, white text, burgundy hover */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.4rem 1.0rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background: var(--gold-soft); /* #d4a84f */
  color: #000;
  border: 1px solid var(--gold-soft);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-contact:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
  transform: translateY(-1px);
}
.btn-contact-light {
  /* Variant for use on dark backgrounds — same colors, kept as alias */
  background: var(--gold-soft);
  color: #000;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ivory);
  margin: 0 auto;
  transition: all 0.3s;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 1rem var(--gutter) 2rem;
  background: var(--burgundy-deep);
  border-top: 1px solid rgba(245,239,228,0.1);
}
.mobile-nav a {
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  border-bottom: 1px solid rgba(245,239,228,0.1);
  color: var(--ivory);
}
.mobile-nav a.is-active { color: var(--gold-soft); }

/* =========================================================
   GENERAL BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}
.btn:hover { background: var(--burgundy); border-color: var(--burgundy); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--ivory); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s;
}
.btn-text:hover { color: var(--gold-soft); }

/* =========================================================
   HOMEPAGE HERO SLIDER
   ========================================================= */

.hero-slider {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  /* Full-window hero. The header is sticky and opaque, so it occupies the
     first --header-h of the viewport; subtracting it makes header + slider
     fill the screen exactly, with nothing from the next section peeking in.
     dvh overrides vh where supported — on mobile, 100vh is the viewport with
     browser chrome *expanded*, so a vh-only hero is taller than the screen
     and the CTA sits under the address bar until the user scrolls. */
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  /* Floor for short landscape phones, where a true full-height hero cannot
     fit the eyebrow, headline, lede and two CTAs without crushing them. */
  min-height: 560px;
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), visibility 1.1s;
  display: flex;
  align-items: center;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.hero-slide.is-active .hero-image img { transform: scale(1); }
.hero-image-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 30% 40%, rgba(184,134,47,0.4), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 70% 60%, rgba(91,26,26,0.5), transparent 60%),
    var(--ink);
  display: none;
}
.hero-image.img-failed img { display: none; }
.hero-image.img-failed .hero-image-fallback { display: block; }
.hero-image-overlay {
  position: absolute;
  inset: 0;
  /* Lightened 2026-08-23 so the photography reads instead of the scrim.
     The horizontal ramp still carries most of the weight on the left, where
     the headline and lede sit; the right side is now nearly clear. The
     vertical layer keeps a little weight at the bottom so the dots and
     caption stay legible. Paired with the text-shadow below — the shadow is
     what allows the scrim to come down this far without losing contrast. */
  background:
    linear-gradient(90deg, rgba(20,23,28,0.60) 0%, rgba(20,23,28,0.40) 35%, rgba(20,23,28,0.12) 75%, rgba(20,23,28,0.20) 100%),
    linear-gradient(180deg, rgba(20,23,28,0.12) 0%, transparent 35%, rgba(20,23,28,0.30) 100%);
}

/* Carries legibility where the scrim no longer does. A diffuse shadow reads
   as depth rather than as a drop shadow, and it only matters over the bright
   parts of a photo — which is exactly where a lighter overlay leaves text
   exposed. Without this the lede is the first thing to fail, since it is the
   smallest text sitting furthest right into the lighter half of the ramp. */
.hero-slide-inner .eyebrow,
.hero-headline,
.hero-slide-inner .lede,
.hero-caption {
  text-shadow: 0 1px 3px rgba(8, 10, 13, 0.4), 0 1px 20px rgba(8, 10, 13, 0.6);
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  color: var(--ivory);
  /* Horizontal padding MUST be var(--gutter), not 0. This element also
     carries .container, which supplies the site-wide gutter — but this rule
     comes later in the file, so a `padding: 4rem 0` shorthand silently wiped
     it out. Above 1240px that was invisible, because the centred container
     left space anyway; below it the hero text ran flush to the viewport edge
     while every other section stayed inset. */
  padding: 4rem var(--gutter);
}
.hero-slide-inner .eyebrow {
  color: var(--gold-soft);
}
.hero-slide-inner .eyebrow::before { background: var(--gold-soft); }

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ivory);
  max-width: 18ch;
  margin-bottom: 2rem;
  font-weight: 400;
}
.hero-headline em { color: var(--gold-soft); font-style: italic; font-weight: 300; }

.hero-slide-inner .lede {
  color: rgba(245,239,228,0.85);
  max-width: 56ch;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.hero-actions .btn-contact { font-size: 0.92rem; padding: 0.52rem 1.6rem; }
.hero-actions .btn-text { color: var(--ivory); }
.hero-actions .btn-text:hover { color: var(--gold-soft); }

.hero-caption {
  position: absolute;
  bottom: 2.5rem;
  /* Absolutely positioned children resolve against the padding box, so
     `right: 0` sat outside the gutter and clipped at the viewport edge. */
  right: var(--gutter);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,239,228,0.55);
  font-weight: 500;
}

/* Slider arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(20,23,28,0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245,239,228,0.25);
  border-radius: 50%;
  color: var(--ivory);
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  transition: all 0.25s ease;
}
.slider-arrow svg { width: 22px; height: 22px; }
.slider-arrow:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
  transform: translateY(-50%) scale(1.05);
}
.slider-prev { left: clamp(1rem, 3vw, 2.5rem); }
.slider-next { right: clamp(1rem, 3vw, 2.5rem); }

/* Slider dots */
.slider-dots {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.25rem;
  z-index: 5;
  align-items: center;
}
.slider-dot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  color: rgba(245,239,228,0.55);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: color 0.3s;
}
.slider-dot .dot-bar {
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(245,239,228,0.3);
  position: relative;
  overflow: hidden;
}
.slider-dot .dot-fill {
  position: absolute;
  inset: 0;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
}
.slider-dot.is-active { color: var(--ivory); }
.slider-dot.is-active .dot-fill {
  animation: dotFill 6s linear forwards;
}
@keyframes dotFill { to { transform: scaleX(1); } }

/* =========================================================
   GENERIC IMAGE BLOCK W/ FALLBACK
   ========================================================= */

.img-block {
  position: relative;
  overflow: hidden;
  background: var(--ivory-soft);
}
.img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-block .img-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(ellipse 600px 400px at 30% 30%, rgba(184,134,47,0.25), transparent 60%),
    linear-gradient(135deg, var(--ivory-soft), var(--ivory));
}
.img-block.img-failed img { display: none; }
.img-block.img-failed .img-fallback { display: block; }
.img-block.img-failed::after {
  content: 'Image';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--burgundy);
  font-size: 1.4rem;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.section.dark {
  background: var(--ink);
  color: var(--ivory);
}
.section.dark h1, .section.dark h2, .section.dark h3 { color: var(--ivory); }
.section.dark h2 em, .section.dark h3 em { color: var(--gold-soft); }
.section.dark p { color: rgba(245, 239, 228, 0.72); }
.section.dark .eyebrow { color: var(--gold-soft); }
.section.dark .eyebrow::before { background: var(--gold-soft); }

.section.parchment { background: var(--ivory-soft); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}
.section-head .section-headline { max-width: 14ch; }

/* =========================================================
   PILLARS
   ========================================================= */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}
.pillar:nth-child(3n) { border-right: none; }
.pillar:hover { background: var(--paper); }
.pillar-num {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--burgundy);
  margin-bottom: 1.25rem;
  display: block;
  letter-spacing: 0.05em;
}
.pillar h3 { margin-bottom: 0.75rem; }
.pillar p { font-size: 0.96rem; }

.section.dark .pillars { border-top-color: rgba(245,239,228,0.15); }
.section.dark .pillar { border-color: rgba(245,239,228,0.15); }
.section.dark .pillar:hover { background: rgba(245,239,228,0.03); }
.section.dark .pillar-num { color: var(--gold-soft); }

/* =========================================================
   SERVICES
   ========================================================= */

.services-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 70px 1.4fr 2fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding-left 0.4s ease;
}
.service-row:hover { padding-left: 1rem; }
.service-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--burgundy);
}
.service-row h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: 0.4rem; }
.service-row .lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Service cards on homepage */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.service-card {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.service-card:hover { background: var(--ink); color: var(--ivory); }
.service-card:hover h3, .service-card:hover .service-card-num { color: var(--ivory); }
.service-card:hover p { color: rgba(245,239,228,0.72); }
.service-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--burgundy);
  margin-bottom: 1.75rem;
  transition: color 0.35s;
}
.service-card h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.service-card p { font-size: 0.92rem; margin-top: auto; }

/* =========================================================
   PHASES (engagement model on Services page)
   ========================================================= */

.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,239,228,0.18);
}
.phase {
  padding: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(245,239,228,0.18);
  border-bottom: 1px solid rgba(245,239,228,0.18);
}
.phase:nth-child(3n) { border-right: none; }
.phase-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
}
.phase h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--ivory);
  margin-bottom: 1rem;
}
.phase p { color: rgba(245,239,228,0.72); font-size: 0.96rem; }

/* =========================================================
   FEATURE-SPLIT (image + text alternating block)
   ========================================================= */

.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}
.feature-split-image {
  position: relative;
  overflow: hidden;
  background: var(--ivory-soft);
}
.feature-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-split-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(ellipse 600px 400px at 30% 30%, rgba(184,134,47,0.3), transparent 60%),
    linear-gradient(135deg, var(--burgundy), var(--burgundy-deep));
}
.feature-split-image.img-failed img { display: none; }
.feature-split-image.img-failed .feature-split-fallback { display: block; }
.feature-split-content {
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ivory);
}
.feature-split-content h2 { margin-bottom: 1.25rem; max-width: 16ch; }
.feature-split-content .lede { margin-bottom: 2rem; }
.feature-split.reverse { direction: rtl; }
.feature-split.reverse > * { direction: ltr; }

/* =========================================================
   PORTFOLIO (Work page)
   ========================================================= */

.portfolio {
  display: grid;
  gap: 0;
}
.portfolio-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
  min-height: 480px;
}
.portfolio-item:nth-child(even) { direction: rtl; }
.portfolio-item:nth-child(even) > * { direction: ltr; }

.portfolio-image {
  position: relative;
  overflow: hidden;
  background: var(--ivory-soft);
}
.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}
.portfolio-item:hover .portfolio-image img { transform: scale(1.04); }
.portfolio-image-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(ellipse 500px 400px at 40% 40%, rgba(184,134,47,0.35), transparent 60%),
    linear-gradient(135deg, var(--burgundy), var(--ink));
}
.portfolio-image.img-failed img { display: none; }
.portfolio-image.img-failed .portfolio-image-fallback { display: block; }
.portfolio-image.img-failed::after {
  content: 'Image placeholder';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.portfolio-content {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
}
.portfolio-category {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.portfolio-content h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.portfolio-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}
.portfolio-content p { margin-bottom: 1.75rem; font-size: 0.96rem; }
.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.portfolio-tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* =========================================================
   EDITORIAL / TWO-COL
   ========================================================= */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.editorial-block {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.editorial-block + .editorial-block { margin-top: 2.25rem; }
.editorial-block h3 { font-size: 1.35rem; margin-bottom: 0.65rem; }
.section.dark .editorial-block { border-top-color: rgba(245,239,228,0.15); }

.pull-quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.18;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.015em;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  max-width: 22ch;
}
.pull-quote::before {
  content: '“';
  display: block;
  font-size: 4.5rem;
  line-height: 0.4;
  color: var(--burgundy);
  margin-bottom: 1.25rem;
}
.section.dark .pull-quote { color: var(--ivory); }
.section.dark .pull-quote::before { color: var(--gold-soft); }

/* =========================================================
   GHANA STATS GRID (Why Ghana)
   ========================================================= */

.ghana-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.ghana-stat {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.3s;
}
.ghana-stat:hover { background: var(--ivory); }
.ghana-stat-value {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  color: var(--burgundy);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.ghana-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.ghana-stat-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* =========================================================
   LEADERSHIP CARDS
   ========================================================= */

.leaders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.leader {
  padding: 2.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.leader-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--ivory-soft), var(--ivory));
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.leader-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the crop to the top of the frame. Source headshots are taller than
     the 4:5 frame, so `cover` overflows vertically; the default `50% 50%`
     splits that overflow evenly and takes the top of the head with it.
     `top` puts the entire overflow at the bottom, which is torso. */
  object-position: center top;
  /* Scale from the top edge too — a centre-origin hover zoom pushes the head
     back out of frame, reintroducing the crop this rule exists to prevent. */
  transform-origin: center top;
  /* Hold the image on its own compositing layer at rest, not only on hover,
     so both states rasterise identically — otherwise the portrait visibly
     changed quality the moment the cursor touched it.
     `will-change` is what actually forces the layer to exist at load. A bare
     `translateZ(0)` only requests one; the browser may defer creating it
     until the first hover animation, and creating a layer snaps its origin
     to whole device pixels. Track widths here are fractional (`repeat(3,1fr)`
     inside a clamp() gutter), so that snap nudged the image sideways on first
     hover and then stayed put, because the layer persists. Promoting up front
     moves the snap to page load, where there is nothing to see. */
  transform: scale(1) translateZ(0);
  will-change: transform;
  filter: grayscale(15%) contrast(1.02);
  transition: filter 0.4s, transform 6s ease-out;
}
.leader:hover .leader-portrait img { filter: grayscale(0%) contrast(1.05); transform: scale(1.03) translateZ(0); }
.leader-portrait-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(135deg, var(--ivory-soft), var(--ivory));
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  color: var(--burgundy);
}
.leader-portrait.img-failed img { display: none; }
.leader-portrait.img-failed .leader-portrait-fallback { display: flex; }

.leader-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.leader-role {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin-bottom: 1rem;
}
.leader-bio { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.leader-career {
  font-size: 0.82rem;
  color: var(--ink-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-style: italic;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-list {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.contact-list li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.contact-list .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.contact-list .value {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
}

.contact-form {
  background: var(--paper);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  display: grid;
  gap: 1.4rem;
}
.form-row { display: grid; gap: 0.5rem; }
.form-row label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-bottom-color: var(--burgundy);
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-success { padding: 1rem 1.25rem; background: var(--ink); color: var(--ivory); font-size: 0.95rem; }
.form-error { padding: 1rem 1.25rem; background: var(--burgundy); color: var(--ivory); font-size: 0.95rem; }

/* Consent disclosure beneath the submit button. Not the same thing as the
   § 6.1 consent checkbox — this states that submitting accepts the policies;
   that checkbox gates mailing-list subscription. Both may be needed. */
.form-consent {
  margin-top: -0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.form-consent a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover { color: var(--gold); }

/* Contact form submit button.
   Scoped to .contact-form deliberately: the sitewide .btn-contact treatment
   in § 9 stays as-is, and only the form's own submit is brightened. */
.contact-form .btn-contact {
  background: #e8c069;
  border-color: #e8c069;
}
.contact-form .btn-contact:hover {
  background: #fff;
  /* 1px black outer edge on hover. Uses border-color rather than an added
     border or outline so the button does not shift by a pixel. */
  border-color: #000;
  color: #000;
}

/* =========================================================
   CTA BAND
   ========================================================= */

.cta-band {
  background: var(--burgundy-deep);
  color: var(--ivory);
  padding: clamp(2.75rem, 5vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 70% 50%, rgba(184,134,47,0.18), transparent 60%);
  pointer-events: none;
}
.cta-band-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
}
.cta-band .eyebrow { color: var(--gold-soft); margin-bottom: 1rem; }
.cta-band .eyebrow::before { background: var(--gold-soft); }
.cta-headline { font-size: clamp(1.85rem, 3.5vw, 3rem); color: var(--ivory); max-width: 18ch; }
.cta-headline em { color: var(--gold-soft); font-style: italic; font-weight: 300; }
.cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.cta-band .btn-text { color: var(--ivory); }

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--ink);
  color: rgba(245,239,228,0.7);
  padding: clamp(2.75rem, 5vw, 4.5rem) 0 1.75rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(245,239,228,0.12);
}
.footer-brand .brand-mark { color: var(--gold-soft); }
.footer-name {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ivory);
}
.footer-name em { font-style: italic; color: rgba(245,239,228,0.55); }
.footer-tag {
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(245,239,228,0.7);
  max-width: 36ch;
  line-height: 1.5;
}
.footer-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { padding: 0.35rem 0; font-size: 0.9rem; }
.footer-col a { color: rgba(245,239,228,0.7); transition: color 0.2s; }
.footer-col a:hover { color: var(--gold-soft); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.8rem;
  color: rgba(245, 239, 228, 0.55);
}
/* The colour above sets it on the DIV, and the <p> children never inherited
   it: the global `p { color: var(--ink-soft) }` matches them directly, and a
   direct match always beats an inherited value regardless of specificity.
   Both lines were rendering near-black on a near-black footer. Matches
   .footer-name em, so the copyright reads at the same weight as "(Bridgeway)". */
.footer-bottom p { color: rgba(245, 239, 228, 0.55); }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */

.page-header {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.75rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.page-header h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 1.25rem;
  max-width: 16ch;
}
.page-header .lede { max-width: 56ch; }

.page-header.has-image {
  background: var(--ink);
  color: var(--ivory);
  border-bottom: none;
  overflow: hidden;
  /* Band height and top padding both account for the nav. The header is
     `position: sticky`, so it sits in flow at rest but covers the top
     --header-h of this band the moment the page scrolls. Adding that height
     back means the visible image area is the same before and after the nav
     sticks, and the padding keeps the eyebrow clear of it. */
  min-height: calc(380px + var(--header-h));
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
}
.page-header.has-image .container { position: relative; z-index: 2; width: 100%; }
.page-header-image {
  position: absolute;
  inset: 0;
  /* background-image is set inline on this element in each page template.
     It CANNOT live here as `var(--bg-image)`: a relative url() inside a
     custom property resolves against the stylesheet that consumes the var,
     not the document that declared it — so 'assets/img/...' became
     'assets/css/assets/img/...' and 404'd. Confirmed in the Apache access
     log. Declaring it inline resolves against the document, the same way
     every <img src> on the site already does. */
  background-size: cover;
  background-position: center;
  /* Keep no-repeat regardless of the position above. `cover` only guarantees
     full coverage while centred; any offset can expose an edge, and the
     default `repeat` then tiles a slice of the image into the gap, which
     reads as a seam rather than as a bug. */
  background-repeat: no-repeat;
}
.page-header-image::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Lightened 2026-08-23 to match the hero treatment. The previous
     0.85 / 0.55 / 0.70 ramp reduced a 50%-brightness photograph to roughly
     7-20% — a flat dark panel that read as a broken image rather than a
     scrim. Weight still sits left, where the h1 and lede are; the lede runs
     to 56ch so coverage has to extend further right than on the hero. */
  background: linear-gradient(90deg, rgba(20,23,28,0.68) 0%, rgba(20,23,28,0.45) 45%, rgba(20,23,28,0.28) 80%, rgba(20,23,28,0.38) 100%);
}
/* Same rationale as the hero: a diffuse shadow carries legibility where the
   lighter scrim no longer does, and only engages over bright image areas. */
.page-header.has-image h1,
.page-header.has-image .lede,
.page-header.has-image .eyebrow {
  text-shadow: 0 1px 3px rgba(8, 10, 13, 0.4), 0 1px 20px rgba(8, 10, 13, 0.6);
}
.page-header.has-image h1 { color: var(--ivory); }
.page-header.has-image h1 em { color: var(--gold-soft); }
.page-header.has-image .lede { color: rgba(245,239,228,0.85); }
.page-header.has-image .eyebrow { color: var(--gold-soft); }
.page-header.has-image .eyebrow::before { background: var(--gold-soft); }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   STORY-LED SECTIONS (homepage + impact page)
   ========================================================= */

/* Bridge thesis prose — large, slow, editorial */
.bridge-prose {
  max-width: 880px;
  margin: 0 auto;
}
.bridge-thesis-headline {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
  max-width: 22ch;
}
.bridge-thesis-headline em {
  color: var(--burgundy);
  font-style: italic;
  font-weight: 300;
}
.bridge-thesis-body p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  max-width: 62ch;
}
.bridge-thesis-body p:last-child { margin-bottom: 0; }
.bridge-thesis-body em {
  font-style: italic;
  color: var(--burgundy);
}
.section.dark .bridge-thesis-headline em { color: var(--gold-soft); }
.section.dark .bridge-thesis-body p { color: rgba(245,239,228,0.78); }
.section.dark .bridge-thesis-body em { color: var(--gold-soft); }

/* Impact stats — a richer variant of ghana-stats */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.impact-stat {
  padding: 2.5rem 1.75rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: all 0.35s ease;
  position: relative;
}
.impact-stat:hover {
  background: var(--ink);
  color: var(--ivory);
}
.impact-stat:hover .impact-stat-value { color: var(--gold-soft); }
.impact-stat:hover .impact-stat-label { color: var(--ivory); }
.impact-stat:hover .impact-stat-note { color: rgba(245,239,228,0.7); }
.impact-stat-value {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  color: var(--burgundy);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 0.85rem;
  transition: color 0.35s;
}
.impact-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.55rem;
  transition: color 0.35s;
}
.impact-stat-note {
  font-size: 0.86rem;
  color: var(--ink-muted);
  line-height: 1.45;
  transition: color 0.35s;
}

/* Why brands stack — large editorial cards */
.why-brands-stack {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(245,239,228,0.18);
}
.why-brand-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.25rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid rgba(245,239,228,0.18);
  align-items: start;
}
.why-brand-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  color: var(--gold-soft);
  letter-spacing: 0.02em;
}
.why-brand-content { max-width: 70ch; }
.why-brand-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin-bottom: 1rem;
}
.why-brand-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: 1.25rem;
  font-style: italic;
}
.why-brand-body {
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(245,239,228,0.78);
}

/* Bridge split — two-side prosperity layout */
.bridge-split {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
}
.bridge-side {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.bridge-side-us { border-right: none; }
.bridge-side-ghana { border-left: none; }
.bridge-side-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.bridge-side-headline {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2.25rem;
  max-width: 26ch;
  font-weight: 400;
}
.bridge-outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.bridge-outcome {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.bridge-outcome:first-child {
  padding-top: 0;
  border-top: none;
}
.bridge-outcome-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  padding-top: 0.15rem;
}
.bridge-outcome h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.bridge-outcome p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
.bridge-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 0.5rem;
}
.bridge-divider-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.bridge-divider-mark {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--burgundy);
  background: var(--ivory);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* =========================================================
   RESPONSIVE — mobile first refinements
   ========================================================= */

/* =========================================================
   LEGAL PAGES (privacy.php, terms.php)
   ========================================================= */

.legal-body { max-width: 72ch; }
.legal-meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.legal-body h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { margin-bottom: 1.1rem; }
.legal-body ul {
  margin: 0 0 1.1rem 0;
  /* the global reset zeroes padding, so markers need it back */
  padding-left: 1.25rem;
}
.legal-body li { color: var(--ink-soft); margin-bottom: 0.5rem; }
.legal-body strong { color: var(--ink); font-weight: 600; }
/* Links inside prose need an affordance — `a { color: inherit }` globally
   would otherwise render them indistinguishable from body text. */
.legal-body a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--gold); }

/* Footer legal notices — same reasoning, on the dark footer. */
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--gold-soft); }

@media (max-width: 1024px) {
  .pillars, .service-grid, .leaders { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(3n) { border-right: 1px solid var(--line); }
  .pillar:nth-child(2n) { border-right: none; }
  .service-grid > *:nth-child(3n),
  .leaders > *:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-grid > *:nth-child(2n),
  .leaders > *:nth-child(2n) { border-right: none; }

  .ghana-stats { grid-template-columns: repeat(2, 1fr); }
  .ghana-stat:nth-child(2n) { border-right: none; }

  .phases { grid-template-columns: 1fr; }
  .phase { border-right: none; }

  .section-head, .editorial, .contact-grid, .cta-band-grid {
    grid-template-columns: 1fr;
  }

  .feature-split { grid-template-columns: 1fr; }
  .feature-split.reverse { direction: ltr; }
  .feature-split-image { min-height: 320px; }

  .portfolio-item { grid-template-columns: 1fr; min-height: auto; }
  .portfolio-item:nth-child(even) { direction: ltr; }
  .portfolio-image { min-height: 280px; }

  .service-row { grid-template-columns: 60px 1fr; }
  .service-row > p:last-child { grid-column: 2; }

  .impact-stats { grid-template-columns: repeat(2, 1fr); }
  .impact-stat:nth-child(2n) { border-right: none; }

  .bridge-split { grid-template-columns: 1fr; gap: 0; }
  .bridge-side-us, .bridge-side-ghana { border: 1px solid var(--line); }
  .bridge-side-us { border-bottom: none; }
  .bridge-divider { flex-direction: row; padding: 0; height: 60px; }
  .bridge-divider-line { width: auto; height: 1px; }
  .bridge-divider-mark { transform: rotate(90deg); background: var(--paper); }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; }

  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav.open { display: flex; }

  .pillars, .service-grid, .leaders, .ghana-stats { grid-template-columns: 1fr; }
  /* Single column would otherwise stretch the portrait to ~625px — wider than
     any other breakpoint, and wider than the 800px source can serve on a
     retina screen. Capped, left-aligned to stay flush with the text below. */
  .leader-portrait { max-width: 400px; }
  .pillar, .service-card, .leader, .ghana-stat { border-right: none !important; }

  .impact-stats { grid-template-columns: 1fr; }
  .impact-stat { border-right: none !important; }

  .why-brand-card { grid-template-columns: 1fr; gap: 0.6rem; padding: 2rem 0; }
  .why-brand-num { font-size: 1.4rem; }
  .why-brand-title { font-size: 1.5rem; }

  .bridge-thesis-headline { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .bridge-thesis-body p { font-size: 1rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .section-head { gap: 1.5rem; }

  .service-row { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0; }
  .service-row:hover { padding-left: 0; }
  .service-num { font-size: 1rem; }

  /* Full-window on mobile too. Floor lowered from 560px so short landscape
     phones are not forced into a hero taller than their own screen. */
  .hero-slider {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    min-height: 480px;
  }
  .hero-headline { font-size: clamp(2.1rem, 8vw, 3rem); max-width: 100%; }
  .hero-slide-inner .lede { font-size: 1rem; }
  .hero-slide-inner { padding: 6rem var(--gutter) 7rem; }
  .hero-caption { display: none; }
  .slider-arrow { width: 44px; height: 44px; }
  .slider-arrow svg { width: 18px; height: 18px; }
  .slider-prev { left: 0.75rem; }
  .slider-next { right: 0.75rem; }
  .slider-dots { bottom: 1.5rem; gap: 0.85rem; }
  .slider-dot .dot-num { display: none; }
  .slider-dot .dot-bar { width: 28px; }

  .page-header { padding: 2.5rem 0 2rem; }
  /* Same nav compensation as desktop. --header-h is redefined to 64px in this
     same breakpoint (see :root above), so these calcs pick up the shorter
     mobile bar automatically — do not hard-code either value. */
  .page-header.has-image {
    min-height: calc(280px + var(--header-h));
    padding-top: var(--header-h);
  }

  .feature-split-content { padding: 2.25rem 1.5rem; }

  .portfolio-content { padding: 2rem 1.5rem; }
  .portfolio-image { min-height: 220px; }

  .leader { padding: 1.5rem; }
  /* Was 5/4 landscape to save vertical space. Against a 3:5 source headshot
     that frame discards 52% of the image and clips the jaw even when the crop
     is anchored to the top. Portraits stay portrait at every breakpoint. */
  .leader-portrait { aspect-ratio: 4 / 5; }

  .cta-band-grid { gap: 1.5rem; }
  .cta-band-actions { width: 100%; }

  .form-row input, .form-row textarea, .form-row select { font-size: 16px; /* prevent iOS zoom */ }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-headline { font-size: 2rem; line-height: 1.05; }
  .hero-slide-inner .lede { font-size: 0.95rem; }
  .hero-actions { gap: 0.75rem; }
  .btn, .btn-contact { padding: 0.85rem 1.4rem; font-size: 0.85rem; }
  .brand-mark { font-size: 1.2rem; gap: 0.4rem; }
  .brand-mark-divider { font-size: 1.05rem; }
  .brand-mark-bridgeway { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: opacity 0.3s; }
  .hero-image img { transition: none; transform: none; }
  .slider-dot.is-active .dot-fill { animation: none; transform: scaleX(1); }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}