/* ---- SELF-HOSTED FONT ------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2');
}

/* ============================================================
   FOXPEDITION medical & protection
   style.css — v1.0
   ============================================================ */

/* ---- TOKENS ------------------------------------------------ */
:root {
  --bg:          #09111c;    /* main background */
  --bg-alt:      #0d2035;    /* alternate sections — visibly distinct from bg */
  --navy-brand:  #023454;    /* brand reference — structural/passive use */
  --navy:        #1a6fa8;    /* primary accent — interactive/visible */
  --navy-mid:    #1f84c8;    /* hover / icon highlight */
  --text:        #eef2f6;
  --muted:       #8aa7bc;
  --border:      rgba(255, 255, 255, 0.09);
  --white:       #ffffff;
  --radius:      3px;

  /* Type scale — modular, consistent */
  --fs-eyebrow:  0.75rem;   /* labels, eyebrows, nav (12px) */
  --fs-small:    0.875rem;  /* card body, captions (14px) */
  --fs-body:     1rem;      /* standard body copy (16px) */
  --fs-lead:     1.1rem;    /* sub-headings, lead-ins */
  --fs-h3:       1.9rem;    /* member names */
  --ease:        0.3s ease;
  --max:         1200px;
  --nav-h:       70px;
}

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }


/* ---- GLOBAL BASE ------------------------------------------ */
/* Dot grid removed. Texture is carried site-wide by the topo motif
   (see TOPO TEXTURE below), applied with rhythm rather than uniformly. */
body { position: relative; }

/* Fine film grain over the entire layout. Static SVG fractal noise,
   sits above everything (clicks pass through). Kills gradient banding
   on the dark surfaces and adds filmic depth. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Keep all real content above background textures */
#nav, #hero, .section, .photo-band, .strip, footer, .legal { position: relative; z-index: 1; }

/* ---- NAV --------------------------------------------------- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background var(--ease), box-shadow var(--ease);
}
#nav.scrolled {
  background: rgba(9, 17, 28, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img {
  height: 40px;
  transition: opacity var(--ease);
}
.nav-logo:hover img { opacity: 0.75; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--ease);
}
.nav-links a:hover { color: var(--white); }
.lang-btn {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius);
  transition: all var(--ease);
}
.lang-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.25); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
  transition: all var(--ease);
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  background: rgba(9,17,28,0.97);
  backdrop-filter: blur(14px);
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  padding: 1.5rem 2rem 2.5rem;
  border-top: 1px solid var(--border);
}
.nav-mobile.open { display: block; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 1.1rem; }
.nav-mobile ul a {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.nav-mobile ul a:hover { color: var(--white); }

/* ---- HERO -------------------------------------------------- */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-height: 760px) and (min-width: 769px) {
  #hero { min-height: auto; padding: 2rem 0 3rem; }
  .hero-content h1 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 75% 20%, rgba(2,52,84,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 20% 85%, rgba(26,111,168,0.12) 0%, transparent 50%),
    var(--bg);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background-image: url('../img/topo.svg');
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 60% 40%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 100% at 60% 40%, black 30%, transparent 80%);
}
.hero-fox {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 34%;
  max-width: 520px;
  opacity: 0.11;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 768px) {
  .hero-fox { width: 70%; right: -18%; opacity: 0.07; }
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 3rem) 2rem 5rem;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.hero-content h1 {
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 1.5rem;
  max-width: 760px;
  text-wrap: balance;
}
.hero-tagline {
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3.5rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  padding: 1rem 2rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  transition: all var(--ease);
}
.btn-primary:hover {
  background: var(--navy-mid);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.scroll-cue {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  transition: opacity 0.5s ease;
}
.scroll-cue span {
  display: block;
  width: 1.5px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--navy-mid));
  animation: pulse 2.8s ease-in-out infinite;
}
/* Cue retires once the hero is left behind */
.scroll-cue.cue-hidden { opacity: 0; }
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ---- SECTION BASE ----------------------------------------- */
.section { padding: 8rem 0; }
.section-alt { background: var(--bg-alt); }
/* Anchored sections clear the fixed nav so headings are never clipped */
#hero, .section { scroll-margin-top: var(--nav-h); }
.container { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: 720px; }

.section-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 2.5px solid var(--navy);
  padding-left: 0.85rem;
  margin-bottom: 2.75rem;
}
h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.section-intro {
  font-size: var(--fs-body);
  color: var(--muted);
  margin-bottom: 4rem;
  max-width: 520px;
}

/* ---- ABOUT ------------------------------------------------- */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 5.5rem;
}
.about-body p {
  font-size: var(--fs-body);
  color: var(--muted);
  margin-bottom: 1rem;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--text); font-weight: 600; }

/* Principle cards — grid-gap trick for hairline borders */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.principle-card {
  background: var(--bg);
  padding: 2.75rem 2.25rem;
  transition: background var(--ease);
}
.principle-card:hover { background: #0c1a27; }
.principle-icon {
  color: var(--navy-mid);
  margin-bottom: 1.25rem;
}
.principle-icon svg { width: 26px; height: 26px; }
.principle-card h3 {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.65rem;
}
.principle-card p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.7;
}

/* ---- SERVICES ---------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card {
  background: var(--bg-alt);
  padding: 1.75rem 1.5rem;
  transition: background var(--ease);
}
.service-card:hover { background: var(--navy-brand); }
.service-icon {
  color: var(--navy-mid);
  margin-bottom: 1rem;
  transition: color var(--ease);
}
.service-card:hover .service-icon { color: rgba(255,255,255,0.5); }
.service-icon svg { width: 20px; height: 20px; }
.service-card h4 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 0.45rem;
}
.service-card p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.65;
  transition: color var(--ease);
}
.service-card:hover p { color: rgba(238,242,246,0.65); }

/* ---- PHOTO BAND ------------------------------------------- */
.photo-band {
  position: relative;
  height: 46vh;
  min-height: 380px;
  background-image: url('../img/band-maritime.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch;
}
.photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9,17,28,0.88) 0%, rgba(9,17,28,0) 38%),
    linear-gradient(to right, rgba(9,17,28,0.82) 0%, rgba(9,17,28,0.25) 55%, rgba(9,17,28,0.55) 100%);
}
.photo-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
.photo-band p {
  font-size: clamp(1.2rem, 2.05vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  max-width: 620px;
  line-height: 1.35;
}
.photo-band span {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* ---- TEAM -------------------------------------------------- */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-bottom: 5rem;
}
.team-member {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 5rem;
  align-items: center;
}
/* Optical alignment for the label vs portrait top handled by align-items:center now */
.team-info { padding-top: 0; }
.team-member-reverse {
  grid-template-columns: 1fr 270px;
}
.team-member-reverse .team-portrait { order: 2; }
.team-member-reverse .team-info    { order: 1; }

.team-portrait { position: relative; aspect-ratio: 4 / 5; }
.team-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
  pointer-events: none;
  z-index: 2;
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% top;
  border-radius: var(--radius);
  filter: grayscale(15%) brightness(0.9);
  display: block;
}

.team-role {
  display: inline-flex;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 2.5px solid var(--navy);
  padding-left: 0.85rem;
  margin-bottom: 0.75rem;
}
.team-info h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.team-info > p {
  font-size: var(--fs-body);
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.8;
}
.credentials { display: flex; flex-direction: column; gap: 0.55rem; }
.credentials li {
  font-size: var(--fs-small);
  color: var(--muted);
  padding-left: 1rem;
  position: relative;
}
.credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--navy-mid);
}

/* Network block */
.network-block {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.network-icon { color: var(--muted); padding-top: 2px; }
.network-icon svg { width: 30px; height: 30px; }
.network-text h3 {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.65rem;
}
.network-text p { font-size: var(--fs-body); color: var(--muted); line-height: 1.8; }

/* ---- CONTACT ----------------------------------------------- */
#contact { text-align: center; }
.contact-intro {
  font-size: var(--fs-body);
  color: var(--muted);
  margin-bottom: 2.75rem;
}
.contact-email {
  display: inline-block;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 5px;
  margin-bottom: 3.5rem;
  transition: border-color var(--ease);
}
.contact-email:hover { border-color: rgba(255,255,255,0.35); }
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--ease);
}
.social-links a:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}
.social-links svg { width: 17px; height: 17px; }

/* ---- STAY INFORMED STRIP ---------------------------------- */
.strip {
  padding: 4rem 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.strip-label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.strip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  transition: all var(--ease);
}
.strip-link:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}
.strip-link svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 640px) {
  .strip-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- FOOTER ----------------------------------------------- */
footer {
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-logo {
  height: 26px;
  opacity: 0.4;
}
.footer-copy {
  font-size: var(--fs-eyebrow);
  color: var(--muted);
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a {
  font-size: var(--fs-eyebrow);
  color: var(--muted);
  transition: color var(--ease);
}
.footer-links a:hover { color: var(--text); }


/* ---- TOPO TEXTURE (recurring brand motif) ----------------- */
.has-topo { position: relative; overflow: hidden; }
.has-topo > .container { position: relative; z-index: 1; }
.has-topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/topo-2.svg');
  background-size: cover;
  background-position: center;
  opacity: 0.09;
  pointer-events: none;
}
/* Team: topo anchored to the right, fading left (mirrors hero) */
#about.has-topo::before {
  background-position: left center;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(ellipse 90% 110% at 8% 55%, black 0%, transparent 68%);
  mask-image: radial-gradient(ellipse 90% 110% at 8% 55%, black 0%, transparent 68%);
}
#team.has-topo::before {
  background-position: right center;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse 95% 110% at 92% 45%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 95% 110% at 92% 45%, black 0%, transparent 70%);
}
/* Lighter (alt) sections now carry topo too, kept fainter and mirrored
   so the rhythm alternates: about L, services R, team R, contact L. */
#services.has-topo::before {
  background-position: right center;
  opacity: 0.15;
  -webkit-mask-image: radial-gradient(ellipse 100% 115% at 96% 50%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 115% at 96% 50%, black 0%, transparent 78%);
}
#contact.has-topo::before {
  background-position: left center;
  opacity: 0.15;
  -webkit-mask-image: radial-gradient(ellipse 100% 115% at 4% 50%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 115% at 4% 50%, black 0%, transparent 78%);
}

/* ---- SIGNATURE CONTOUR RAIL (scroll-drawn) ---------------- */
/* A single topographic contour line in the left gutter that draws itself
   as the page scrolls. Lives in the empty margin on wide screens only,
   so it never overlaps content. This is the page's signature element. */
.contour-rail {
  position: fixed;
  top: 0; left: 0;
  width: 56px; height: 100vh;
  z-index: 60;
  pointer-events: none;
  display: none;
}
@media (min-width: 1280px) { .contour-rail { display: block; } }
.contour-rail svg { width: 100%; height: 100%; display: block; overflow: visible; }
.contour-rail .rail-track { fill: none; stroke: rgba(130,170,205,0.10); stroke-width: 1.1; }
.contour-rail .rail-draw  { fill: none; stroke: var(--navy-mid); stroke-width: 1.3; opacity: 0.65; }
.contour-rail .rail-node  { fill: var(--navy-mid); }
.contour-rail .rail-node-ring {
  fill: none;
  stroke: var(--navy-mid);
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: rail-ping 2.8s ease-out infinite;
}
@keyframes rail-ping {
  0%   { r: 5; opacity: 0.5; }
  70%  { r: 11; opacity: 0; }
  100% { r: 11; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contour-rail .rail-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .contour-rail .rail-node, .contour-rail .rail-node-ring { display: none; }
}
/* ---- REVEAL ANIMATION -------------------------------------- */
html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
html:not(.no-js) .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- RESPONSIVE ------------------------------------------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .team-member { grid-template-columns: 250px 1fr; gap: 3.5rem; }
  .team-member-reverse { grid-template-columns: 1fr 250px; }
}

@media (max-width: 768px) {
  .nav-links, .lang-btn { display: none; }
  .nav-toggle { display: flex; }

  .section { padding: 5rem 0; }

  .about-layout { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
  .principles-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .team-member,
  .team-member-reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
    text-align: left;
  }
  .team-member-reverse .team-portrait,
  .team-member-reverse .team-info { order: unset; }
  .team-portrait {
    width: 100%;
    max-width: 300px;
  }
  .team-info { width: 100%; }
  .network-block { grid-template-columns: 1fr; gap: 1.25rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }

  /* Scroll cue: give it dedicated clearance so it never sits on the buttons */
  #hero { padding-bottom: 4rem; }
  .hero-content { padding-bottom: 7rem; }
  .scroll-cue { bottom: 1.75rem; }
  .scroll-cue span { height: 44px; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; opacity: 0.5; }
}

/* ============================================================
   v2.0 ADDITIONS — content architecture overhaul
   ============================================================ */

/* ---- INLINE ICONS (replaces Lucide JS) --------------------- */
.icon { width: 20px; height: 20px; display: block; }
.principle-icon .icon { width: 26px; height: 26px; }
.icon-lg { width: 30px; height: 30px; }
.social-links .icon { width: 17px; height: 17px; }
.strip-link .icon { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- HERO ADDITIONS ---------------------------------------- */
.hero-sub {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  padding: 1rem 2rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  transition: all var(--ease);
}
.btn-secondary:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

/* ---- CAPABILITIES (6 core services) ------------------------ */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.capability-card {
  background: var(--bg-alt);
  padding: 2.5rem 2rem;
  transition: background var(--ease);
}
.capability-card:hover { background: var(--navy-brand); }
.capability-card .service-icon { margin-bottom: 1.1rem; }
.capability-card h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 0.55rem;
}
.capability-card p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.7;
  transition: color var(--ease);
}
.capability-card:hover p { color: rgba(238,242,246,0.65); }
.capability-card:hover .service-icon { color: rgba(255,255,255,0.5); }

/* ---- SECTOR CHIPS ------------------------------------------ */
.sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  max-width: 880px;
}
.sector-chips li {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 2.5px solid var(--navy);
  border-radius: var(--radius);
  padding: 0.65rem 1.15rem;
  background: rgba(255,255,255,0.02);
  transition: border-color var(--ease), background var(--ease);
}
.sector-chips li:hover {
  border-color: rgba(255,255,255,0.22);
  border-left-color: var(--navy-mid);
  background: rgba(255,255,255,0.05);
}

/* ---- ENGAGEMENT STEPS -------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 3rem;
}
.step-card {
  background: var(--bg-alt);
  padding: 2.75rem 2.25rem;
  transition: background var(--ease);
}
.step-card:hover { background: var(--navy-brand); }
.step-num {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--navy-mid);
  margin-bottom: 1.25rem;
}
.step-card h4 {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.65rem;
}
.step-card p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.7;
}

/* ---- PHOTO BAND MARKERS ------------------------------------ */
.band-markers {
  margin-top: auto;
  padding-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1040px;
}
.band-markers li {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(238,242,246,0.82);
  padding: 0 1.75rem;
  border-left: 1px solid rgba(255,255,255,0.16);
}
.band-markers li:first-child {
  padding-left: 0;
  border-left: none;
}

/* ---- v2.0 RESPONSIVE --------------------------------------- */
@media (max-width: 1024px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .capability-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-actions { gap: 0.75rem; }

  /* Band markers stack cleanly, separated by spacing (no lines) */
  .band-markers {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 0.85rem;
    padding-top: 0;
  }
  .band-markers li {
    padding: 0;
    border-left: none;
  }
  .band-markers li:first-child {
    padding-left: 0;
  }
}

/* Logos carry width/height attributes for CLS; keep aspect via auto width */
.nav-logo img, .footer-logo { width: auto; }
@media (max-width: 480px) {
  .hero-tagline { letter-spacing: 0.2em; }
}

/* ---- INLINE PROSE LINKS (general rule) -------------------- */
/* Body-copy links inside content blocks read as links: brand blue with a
   restrained underline. Excludes structural links (nav, footer, cards). */
.network-text a,
.about-body a,
.legal p a,
.legal li a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 132, 200, 0.45);
  transition: color var(--ease), text-decoration-color var(--ease);
}
.network-text a:hover,
.about-body a:hover,
.legal p a:hover,
.legal li a:hover {
  color: #4ba6e0;
  text-decoration-color: #4ba6e0;
}
.network-text a:focus-visible,
.about-body a:focus-visible,
.legal p a:focus-visible,
.legal li a:focus-visible {
  outline: 2px solid var(--navy-mid);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ---- ARROW CTA LINK --------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-mid);
  transition: color var(--ease);
}
.link-arrow span {
  transition: transform var(--ease);
}
.link-arrow:hover {
  color: #4ba6e0;
}
.link-arrow:hover span {
  transform: translateX(4px);
}
.link-arrow:focus-visible {
  outline: 2px solid var(--navy-mid);
  outline-offset: 3px;
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .link-arrow span { transition: none; }
  .link-arrow:hover span { transform: none; }
}