/* ===========================================================
   Sandmont Natural Capital — site stylesheet
   =========================================================== */

/* Site-wide typeface: Aptos (Microsoft's current default, ships with
   Windows 11 / Microsoft 365). It's a licensed system font, not something
   we can legally redistribute as a hosted webfont file, so it's declared
   by name and falls back gracefully on devices that don't have it
   installed — Calibri and Segoe UI are the closest visual match. */
:root{
  --navy: #0d3b5e;
  --navy-dark: #0a2c46;
  --gold: #cdaf17;
  --gold-light: #f2f584;   /* pale yellow — main headline tone */
  --gold-deep: #f0bf24;    /* brighter gold — the second tone, still legible on dark photos */
  --green: #00764e;
  --cyan: #6dccdc;
  --blue: #2cade2;
  --indigo: #2b2c8b;
  --indigo-dark: #1b1464;
  --ink: #16202b;
  --paper: #f4f5f9;
  --paper-2: #dfe2ee;
  --white: #ffffff;
  --max: 1180px;
  --font: 'Aptos', 'Aptos Display', Calibri, 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-display: var(--font);
  --font-hero: var(--font);
  --brand-indigo: #1b1464;
  --brand-brown: #693818;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

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

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

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #e7e9ef;
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon{
  width: 64px;
  height: auto;
}

.brand-wordmark-text,
.footer-wordmark-text{
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  font-family: var(--font);
  font-weight: 800;
}

.wm-primary{
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.wm-secondary{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin-top: 1px;
}

.brand-wordmark-text{
  align-items: center;
  text-align: center;
}

.brand-wordmark-text .wm-primary{
  color: var(--brand-indigo);
  font-size: 2.2rem;
}

.brand-wordmark-text .wm-secondary{
  color: var(--brand-brown);
  font-size: 1.05rem;
  margin-top: 2px;
}

.main-nav ul{
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.main-nav a{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}

.main-nav a:hover, .main-nav a.active{
  color: var(--blue);
}

/* Each vertical's nav link carries the darkest stop of that section's
   gradient, so the top of the page keys to the colours further down. */
.site-header .main-nav .nav-home{ color: #000000; }  /* black */
.site-header .main-nav .nav-mit{ color: #0a4a30; }   /* darkest green */
.site-header .main-nav .nav-res{ color: #2cade2; }   /* the blue Home used to carry */
.site-header .main-nav .nav-home:hover{ color: #0d3b5e; }
.site-header .main-nav .nav-mit:hover{ color: #1c8a58; }
.site-header .main-nav .nav-res:hover{ color: #1c67b0; }

/* Book a Consultation — the one CTA, styled as a filled button so it
   reads differently from the plain text nav links around it. */
.site-header .main-nav .nav-cta{
  /* inline-block + nowrap are load-bearing: as a plain inline element the
     padding repeats on every wrapped line, which splits the button into
     stacked rectangles with the last word hanging outside it. */
  display: inline-block;
  white-space: nowrap;
  background: var(--gold-deep);
  color: var(--navy-dark) !important;
  padding: 9px 18px;
  border-radius: 4px;
  font-weight: 700;
}

.site-header .main-nav .nav-cta:hover{
  opacity: 0.92;
  color: var(--navy-dark) !important;
}

@media (max-width: 1100px){
  .site-header .main-nav .nav-cta{
    margin-top: 6px;
  }
}

.nav-toggle{
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
}

/* ---------- Hero ---------- */

.hero{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-start;      /* headline rests high on the ice face, not centred */
  justify-content: center;
  text-align: center;
  padding: clamp(160px, 28vh, 300px) 24px 100px;
  overflow: hidden;
  background: var(--navy-dark);
  /* clip-path makes the hero a containing block for the fixed slides below,
     so the photo holds still while the page scrolls over it instead of
     sliding away with the section. */
  clip-path: inset(0);
}

.hero-slides{
  position: fixed;
  inset: 0;
  z-index: 0;
}

.hero-slide{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation-duration: 23s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Pure-CSS reel — no JS required, so it always plays even in contexts
   that don't run scripts. Plays through the 3 scenes once with slow,
   linear crossfades (no easing "snap"), then rests on the final
   (glacier) frame, matching the source video's non-looping behavior. */
.hero-slide:nth-child(1){ animation-name: hero-fade-1; }
.hero-slide:nth-child(2){ animation-name: hero-fade-2; }
.hero-slide:nth-child(3){ animation-name: hero-fade-3; }

/* Each scene drifts and pulls back while it is on screen — the "flying over"
   pan of the original. Every scene zooms OUT (starts in close, widens), which
   is the effect that reads best on the water and rocks. Transform keyframes
   sit at the edges of each scene's visible window so the motion is spent on
   screen, and the last scene settles to rest rather than drifting off.

   Timeline over the same 23s, with quicker 1.5s crossfades (was 2.5s) so the
   reel feels snappier: scene 1 holds 0-7.6s, crossfade to 9.1s, scene 2 holds
   to 16.6s, crossfade to 18.1s, scene 3 settles through 23s and then rests. */
@keyframes hero-fade-1{
  0%{ opacity: 1; transform: scale(1.19) translate3d(1.1%, -0.6%, 0); }
  33.04%{ opacity: 1; }
  39.57%{ opacity: 0; transform: scale(1.06) translate3d(-1.1%, 0.5%, 0); }
  100%{ opacity: 0; }
}

@keyframes hero-fade-2{
  0%{ opacity: 0; }
  33.04%{ opacity: 0; transform: scale(1.19) translate3d(-1.1%, 0.6%, 0); }
  39.57%{ opacity: 1; }
  72.17%{ opacity: 1; }
  78.70%{ opacity: 0; transform: scale(1.06) translate3d(1.1%, -0.5%, 0); }
  100%{ opacity: 0; }
}

@keyframes hero-fade-3{
  0%{ opacity: 0; }
  72.17%{ opacity: 0; transform: scale(1.18) translate3d(0.9%, 0.5%, 0); }
  78.70%{ opacity: 1; }
  100%{ opacity: 1; transform: scale(1.05) translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation: none; opacity: 0; }
  .hero-slide:last-child{ opacity: 1; }
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,16,26,0.26) 0%, rgba(6,16,26,0.08) 38%, rgba(6,16,26,0.34) 100%);
  pointer-events: none;
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 20px 26px;
}

/* Soft dark halo sitting behind the headline only — keeps the gold legible
   on the pale glacier and the dark rock alike, without muddying the photo. */
.hero-content::before{
  content: "";
  position: absolute;
  inset: -55% -34%;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(4,12,20,0.56) 0%,
    rgba(4,12,20,0.44) 26%,
    rgba(4,12,20,0.22) 44%,
    rgba(4,12,20,0.06) 58%,
    rgba(4,12,20,0) 68%);
  pointer-events: none;
}

.hero h1{
  font-family: var(--font-hero);
  font-size: clamp(2rem, 7.5vw, 5.2rem);
  font-weight: 700;
  color: var(--gold-light);
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 2px 10px rgba(0,0,0,0.7),
    0 6px 34px rgba(0,0,0,0.5);
}

.hero h1 .accent{
  color: var(--gold-deep);
}

.hero-sub{
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 18px auto 0;
  color: #e7edf3;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.hero-highlight{
  color: #6fd8ee;
  font-weight: 700;
}

.hero-cta{
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 28px;
  background: var(--gold-deep);
  color: var(--navy-dark);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 4px;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.hero-cta:hover{ opacity: 0.92; }

/* ---------- Page banner (subpages) ---------- */

.page-banner{
  background: var(--navy-dark);
  color: var(--white);
  text-align: center;
  padding: 56px 24px;
}

.page-banner h1{
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--cyan);
  letter-spacing: 0.01em;
}

/* ---------- Engagement callout (Services page) ---------- */

.engagement-callout{
  background: #fdf6d8;
  border-top: 1px solid #ecd98f;
  border-bottom: 1px solid #ecd98f;
  padding: 48px 24px;
}

.engagement-callout .container{
  max-width: 980px;
}

.engagement-callout h2{
  margin: 0 0 28px;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--navy-dark);
  text-align: center;
}

.engagement-steps{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.engagement-steps li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.engagement-num{
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engagement-steps h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--navy-dark);
}

.engagement-steps p{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.engagement-note{
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #ecd98f;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy-dark);
  text-align: center;
}

@media (max-width: 760px){
  .engagement-steps{ grid-template-columns: 1fr; }
}

/* ---------- Colored feature sections (verticals) ---------- */

.verticals-divider{
  width: 100%;
  height: clamp(61px, 10.9vw, 153px);
  background: linear-gradient(90deg, #1c8a58 0%, #565c66 50%, #1c67b0 100%);
  border-radius: 10px 10px 0 0;
}

.verticals-divider--reverse{
  background: linear-gradient(90deg, #1c67b0 0%, #565c66 50%, #1c8a58 100%);
  border-radius: 0 0 10px 10px;
}

.verticals{
  display: flex;
  align-items: stretch;
  width: 100%;
}

.vertical{
  flex: 1 1 0;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--white);
}

.vertical.green{
  background: linear-gradient(135deg, #32c47f 0%, #1c8a58 42%, #0a4a30 100%);
  border-top: 1px solid rgba(150,240,190,0.3);
  border-bottom: 1px solid rgba(150,240,190,0.3);
  border-left: 1px solid rgba(150,240,190,0.3);
  border-right: 1px solid rgba(255,255,255,0.18);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.vertical.carbon{
  background: linear-gradient(135deg, #8a9099 0%, #565c66 42%, #24262b 100%);
  border-top: 1px solid rgba(210,213,218,0.3);
  border-bottom: 1px solid rgba(210,213,218,0.3);
  border-radius: 0;
}

.vertical.blue{
  background: linear-gradient(135deg, #4bb0f5 0%, #1c67b0 42%, #071c3a 100%);
  border-top: 1px solid rgba(150,205,245,0.3);
  border-bottom: 1px solid rgba(150,205,245,0.3);
  border-radius: 0;
}

.vertical.resilience{
  background: linear-gradient(135deg, #9be8bd 0%, #8ad6ea 55%, #83b9ef 100%);
  color: var(--navy-dark);
  border-top: 1px solid rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.7);
  border-right: 1px solid rgba(255,255,255,0.7);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.vertical.resilience h2 a{
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--navy-dark);
  text-shadow: none;
  border-bottom-color: rgba(13,59,94,0.35);
}

.vertical.resilience h2 a:hover{ border-bottom-color: rgba(13,59,94,0.8); }

.vertical.resilience .label{ color: var(--navy-dark); }

.vertical.resilience .label a{
  text-decoration-color: rgba(13,59,94,0.4);
}

.vertical.resilience .label a:hover{ text-decoration-color: rgba(13,59,94,0.9); }

.vertical.resilience li{ border-bottom-color: rgba(13,59,94,0.12); }

.vertical h2{
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.vertical h2 a{
  background: linear-gradient(180deg, #ffffff 0%, #cdf2df 55%, #6fc79b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
}

.vertical h2 a:hover{
  border-bottom-color: rgba(255,255,255,0.8);
}

.vertical.blue h2 a{
  background: linear-gradient(180deg, #ffffff 0%, #cfe4ff 55%, #7fa8d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.vertical.carbon h2 a{
  background: linear-gradient(180deg, #ffffff 0%, #e2e4e8 55%, #a8adb5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.vertical ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.vertical li{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  min-height: calc(2.6em + 36px);
}

.vertical li:last-child{ border-bottom: 0; }

.vertical .label{
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.vertical.green .label{ color: #eafbf1; }
.vertical.carbon .label{ color: #f1f2f4; }
.vertical.blue .label{ color: #eef4fb; }

.vertical .label a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 3px;
}

.vertical .label a:hover{ text-decoration-color: rgba(255,255,255,0.9); }

.screw{
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4f6f8 0%, #d8dde2 20%, #9aa3ab 48%, #cdd3d8 62%, #6b7278 82%, #b9bfc4 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -2px 2px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.6);
  position: relative;
}

.screw::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  right: 12%;
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #2a2d30, #4c5054 45%, #1c1e20 55%, #34373a);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25);
  border-radius: 1px;
}

@media (max-width: 700px){
  .verticals-divider, .verticals-divider--reverse{ border-radius: 0; height: 45px; }
  .verticals{ flex-direction: column; }
  .vertical.green, .vertical.carbon, .vertical.blue, .vertical.resilience{ border-radius: 0; padding: 32px 26px; }
  .vertical.green, .vertical.carbon, .vertical.blue{ border-bottom: none; }
}

/* ---------- Resilience dissection diagram (resilience.html) ---------- */

.dissect-title{ text-align: center; color: var(--blue); margin: 40px 0 0; }

.dissect-figure{ margin: 20px 0 0; }

.dissect-spine{ height: 2px; background: var(--paper-2); margin-bottom: 16px; }

.dissect{
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: 16px;
  row-gap: 12px;
}

.dissect-state{
  padding: 13px 10px;
  border-radius: 7px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #fff;
}

.dissect-state small{
  display: block;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
  font-size: 0.78rem;
  margin-top: 2px;
}

.dissect-state.pre{ background: var(--gold-deep); color: var(--navy-dark); grid-column: 1; grid-row: 1; }
.dissect-state.inv{ background: var(--blue); grid-column: 2; grid-row: 1; }
.dissect-state.trade{ background: var(--navy-dark); grid-column: 3; grid-row: 1; }

.dissect-tick{ width: 2px; height: 20px; background: var(--paper-2); justify-self: center; }
.dissect-tick.pre{ grid-column: 1; grid-row: 2; }
.dissect-tick.inv{ grid-column: 2; grid-row: 2; }
.dissect-tick.trade{ grid-column: 3; grid-row: 2; }

.dissect-card{
  background: var(--white);
  border: 1px solid var(--paper-2);
  border-radius: 8px;
  padding: 14px 12px;
  box-shadow: 0 1px 2px rgba(13,59,94,0.06), 0 8px 20px rgba(13,59,94,0.06);
  text-align: center;
}

.dissect-card h3{
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 5px;
  line-height: 1.3;
  color: var(--navy);
}

.dissect-card p{ font-size: 0.82rem; color: #5c6a78; margin: 0; line-height: 1.4; }

.dissect-col.pre{ grid-column: 1; grid-row: 3; }
.dissect-col.trade{ grid-column: 3; grid-row: 3; }
.dissect-pair{ grid-column: 2; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.dissect-outcome{ font-weight: 800; font-size: 0.85rem; text-align: center; }
.dissect-outcome.pre{ grid-column: 1; grid-row: 4; color: #a37a10; }
.dissect-outcome.inv{ grid-column: 2; grid-row: 4; color: var(--blue); }
.dissect-outcome.trade{ grid-column: 3; grid-row: 4; color: var(--navy); }

.dissect-caption{ margin-top: 22px; font-size: 0.88rem; color: #5c6a78; }

@media (max-width: 640px){
  .dissect{ grid-template-columns: 1fr; grid-template-rows: none; }
  .dissect > *{ grid-column: 1 !important; }
  .dissect-state.pre{ grid-row: 1; } .dissect-tick.pre{ grid-row: 2; } .dissect-col.pre{ grid-row: 3; } .dissect-outcome.pre{ grid-row: 4; }
  .dissect-state.inv{ grid-row: 5; } .dissect-tick.inv{ grid-row: 6; } .dissect-pair{ grid-row: 7; grid-template-columns: 1fr 1fr; } .dissect-outcome.inv{ grid-row: 8; }
  .dissect-state.trade{ grid-row: 9; } .dissect-tick.trade{ grid-row: 10; } .dissect-col.trade{ grid-row: 11; } .dissect-outcome.trade{ grid-row: 12; }
}

/* Tall enough that a good part of the photo's height survives the crop —
   a short band on a 3:2 photo only ever shows a truncated sliver. */
.dune-band{
  height: clamp(300px, 40vw, 620px);
  overflow: hidden;
  background: #e9d3ac;
}

.dune-band-inner{
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  background: url('hero-desert.jpg') center 42%/cover no-repeat;
}


/* ---------- Location / Miami map ---------- */

.location{
  position: relative;
  background: #0ab9c8;   /* matches the map's water so the edges never seam */
  overflow: hidden;
}

/* The band carries the map's own aspect ratio, so the whole map is visible at
   any width. A fixed height would make `cover` crop the sides on a narrow
   screen, which reads as being zoomed in on Miami. */
.location-map{
  aspect-ratio: 1901 / 697;
  min-height: 190px;
  background: url('miami-map.svg') center/cover no-repeat;
  transform-origin: 50% 54%;   /* drifts toward the Miami pin */
  animation: map-drift 30s ease-in-out infinite alternate;
}

@keyframes map-drift{
  from{ transform: scale(1); }
  to{ transform: scale(1.055); }
}

.map-credit{
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 5px 10px;
  background: rgba(255,255,255,0.78);
  color: #3c4043;
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

@media (max-width: 560px){
  .map-credit{ font-size: 0.75rem; padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce){
  .location-map{ animation: none; }
}

/* ---------- Prose sections (subpages) ---------- */

.prose-section{
  background: var(--paper-2);
  padding: 56px 24px;
}

.prose-section .container{
  max-width: 980px;
}

.prose-section p{
  margin: 0 0 20px;
  font-size: clamp(1rem, 1.1vw + 0.6rem, 1.2rem);
  line-height: 1.75;
}

.prose-section ul{
  margin: 0 0 20px;
  padding-left: 22px;
}

.prose-section li{
  margin-bottom: 14px;
  font-size: clamp(1rem, 1.1vw + 0.6rem, 1.2rem);
  line-height: 1.7;
}

@media (max-width: 560px){
  .prose-section{ padding: 44px 20px; }
  .prose-section p, .prose-section li{ font-size: 1rem; line-height: 1.65; }
}

.prose-section a{
  color: var(--indigo);
  font-weight: 700;
  text-decoration: underline;
}

.prose-section strong{ color: var(--navy); }

/* Opening line of a prose section, lifted out in a brighter ocean blue.
   #0b6fa4 clears 4.2:1 on the --paper-2 ground; a lighter aqua like
   --blue drops under 2:1 there and stops being readable. */
.prose-accent{
  color: #0b6fa4;
  font-weight: 700;
  font-size: 1.08em;
}

/* ---------- Services menu ---------- */

.services-menu{ margin-top: 8px; }

/* Anchor-linked sections (e.g. homepage box links into Services/Strategic
   Affiliations) need clearance so the sticky header doesn't cover the
   heading when the browser jumps to them. */
.service-item, .affiliations-list li{ scroll-margin-top: 110px; }

.service-item{
  padding: 32px 0;
  border-bottom: 1px solid rgba(13,59,94,0.14);
}

.service-item:first-child{ padding-top: 0; }
.service-item:last-child{ border-bottom: none; }

.service-item h2{
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--navy);
}

.service-item > p{
  margin: 0 0 18px;
}

.service-diagram{
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
}

/* ---------- Strategic Affiliations ---------- */

.prose-section .lead{
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
}

.affiliations-list{ list-style: none; margin: 0; padding: 0; }

.affiliations-list li{
  padding: 28px 0;
  border-bottom: 1px solid rgba(13,59,94,0.14);
}

.affiliations-list li:last-child{ border-bottom: none; }

.affiliations-list h3{
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  color: #5b92e5;
}

.affiliations-list p{
  margin: 0;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  line-height: 1.65;
}

.affiliation-featured{
  display: flex;
  align-items: center;
  gap: 20px;
}

.cdr-spectrum-wrap{
  flex: none;
  width: 180px;
}

.cdr-spectrum{ width: 100%; height: auto; display: block; }

.cdr-legend{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cdr-legend li{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  font-size: 0.68rem;
  color: #5c6a78;
}

.cdr-swatch{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.cdr-swatch--nature{ background: #00764e; }
.cdr-swatch--engineered{ background: #0a2c46; }

.affiliation-text{ flex: 1 1 auto; min-width: 0; }

.affiliation-icon-wrap{ flex: none; width: 180px; }
.affiliation-icon-wrap--lg{ width: 180px; }
.affiliation-icon{ width: 100%; height: auto; display: block; }

@media (max-width: 700px){
  .affiliation-featured{ flex-direction: column; align-items: flex-start; }
  .cdr-spectrum-wrap{ width: 160px; }
  .affiliation-icon-wrap{ width: 160px; }
  .affiliation-icon-wrap--lg{ width: 160px; }
}

/* ---------- Team ---------- */

.team-block{
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.team-photo-frame{
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}

.team-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.55);
  transform-origin: center 22%;
  display: block;
}

.team-bio{ flex: 1 1 320px; }

.team-bio h2{
  margin: 0 0 4px;
  font-size: 1.7rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}

.linkedin-link{
  display: inline-flex;
  line-height: 0;
}

.linkedin-link svg{ display: block; }

.team-bio .role{
  margin: 0 0 16px;
  color: var(--blue);
  font-weight: 700;
  font-size: 1.15rem;
}

.partners-list{ list-style: none; margin: 0; padding: 0; }

.partners-list li{
  padding: 16px 0;
  border-bottom: 1px solid rgba(13,59,94,0.14);
}

.partners-list li:last-child{ border-bottom: none; }

.tag-pending{
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a5c00;
  background: #fff2cf;
  padding: 2px 8px;
  border-radius: 3px;
  vertical-align: middle;
}

/* ---------- Contact / Get in touch ---------- */

.contact{
  padding: 72px 24px;
}

.contact.on-dark{
  background: var(--navy-dark);
  color: var(--white);
}

.contact.on-light{
  background: var(--white);
  color: var(--ink);
}

.contact .container{
  max-width: 640px;
}

.contact h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 14px;
  font-weight: 800;
}

.contact .lead{
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 520px;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 560px){
  .form-row{ grid-template-columns: 1fr; }
}

.field{
  margin-bottom: 22px;
}

.field label{
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  opacity: 0.85;
}

.field input,
.field textarea{
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.9;
  padding: 8px 2px;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
}

.field input:focus,
.field textarea:focus{
  outline: none;
  border-bottom-color: var(--blue);
}

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

.btn{
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 3px;
  padding: 14px 34px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.contact.on-dark .btn{
  background: var(--white);
  color: var(--navy);
}

.btn:hover{ opacity: 0.9; }

.form-note{
  margin-top: 14px;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---------- Footer ---------- */

.site-footer{
  background: var(--navy-dark);
  color: var(--white);
  text-align: center;
  padding: 48px 24px 32px;
}

.footer-mark{
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  cursor: pointer;
}

.footer-mark img,
.footer-mark canvas{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.footer-wordmark-text{
  align-items: center;
  margin: 0 auto 22px;
}

.footer-wordmark-text .wm-primary{ color: #ffffff; font-size: 1.55rem; }
.footer-wordmark-text .wm-secondary{ color: #52c3dd; font-size: 0.8rem; }


.footer-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: center;
  font-size: 0.92rem;
  opacity: 0.9;
  margin-bottom: 18px;
}

.footer-meta a{ text-decoration: underline; }

.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 18px;
}

.copyright{
  font-size: 0.78rem;
  opacity: 0.55;
}

/* On touch screens the footer links need a finger-sized target — at their
   natural line height they were only ~16-22px tall. */
@media (max-width: 760px){
  .footer-meta{
    gap: 4px 20px;
    margin-bottom: 12px;
  }

  .footer-meta a,
  .footer-links a{
    display: inline-block;
    padding: 11px 6px;
    line-height: 1.2;
  }

  .footer-links{
    gap: 0 16px;
    margin-bottom: 12px;
  }
}

/* ---------- Responsive nav ----------
   Collapses at 1100px, not 760px: five links plus the CTA need roughly
   1150px beside the wordmark, so between 760 and 1100 the bar was
   wrapping items onto second lines. */

@media (max-width: 1100px){
  .nav-toggle{ display: block; }

  .main-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid #e7e9ef;
    display: none;
  }

  .main-nav.open{ display: block; }

  .main-nav ul{
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 18px;
  }

  .main-nav li{
    padding: 10px 0;
    border-bottom: 1px solid #eef0f5;
  }

  .site-header{ position: relative; }
}