/* ==========================================================================
   5 Blue Oceans — Design System
   Editorial / institutional. Evolution of the existing brand, not a rebrand.
   Palette derived from the current site's tokens (--primary #1447e6,
   --text-dark #193cb8, --light-blue-2 #2b7fff, --primary-light #fbf9f5).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand blues — carried over from the existing site */
  --blue:         #1447e6;
  --blue-deep:    #193cb8;
  --blue-bright:  #2b7fff;
  --blue-pale:    #97c5ff;
  --navy:         #0a1733;
  --navy-deep:    #060f22;

  /* Ground */
  --paper:        #ffffff;   /* white ground (trial; brand cream was #fbf9f5) */
  --paper-warm:   #f4f6fa;   /* secondary band: a neutral biased slightly toward the brand blue */
  --nav-bg:       rgba(255, 255, 255, 0.82);
  --white:        #ffffff;
  --ink:          #0b1020;
  --ink-soft:     #2e3b4d;   /* brand --paragraph-gray */
  --ink-mute:     #6b7585;
  --ink-faint:    #9aa3b0;

  /* Lines */
  --rule:         rgba(11, 16, 32, 0.12);
  --rule-soft:    rgba(11, 16, 32, 0.07);
  --rule-dark:    rgba(255, 255, 255, 0.16);
  --rule-dark-soft: rgba(255, 255, 255, 0.09);

  /* Type */
  --serif:  "Instrument Serif", "Newsreader", Georgia, "Times New Roman", serif;
  --read:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --max:    1360px;
  --max-text: 720px;
  --section-y: clamp(72px, 9vw, 152px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 560ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-size: 14px; letter-spacing: 0.02em;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 940px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(52px, 6vw, 96px); }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* Editorial split: label column + content column */
.split {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display-sm {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blue);
  flex: none;
}
.eyebrow.no-rule::before { display: none; }

.lede {
  font-family: var(--sans);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.008em;
  max-width: 62ch;
  text-wrap: pretty;
}
.hero-lede {
  font-size: clamp(17px, 1.25vw, 19.5px);
  line-height: 1.55;
  max-width: 44ch;
  margin-bottom: 34px;
}
.body-text { color: var(--ink-soft); max-width: 68ch; text-wrap: pretty; }
.small { font-size: 14px; color: var(--ink-mute); }
.mono-num {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.serif-accent { font-family: var(--serif); font-style: italic; }
.blue { color: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 240ms var(--ease);
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn:active { transform: translateY(1px); }
.btn .arw { transition: transform 320ms var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: transparent; color: var(--blue); border-color: var(--blue); }

.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--blue-pale); border-color: var(--blue-pale); color: var(--navy); }

.btn-outline-light { background: transparent; color: #fff; border-color: var(--rule-dark); }
.btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }

/* Text link with underline reveal */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 420ms var(--ease), color 420ms var(--ease);
}
.link:hover { color: var(--blue); background-size: 100% 1px; }
.link .arw { transition: transform 320ms var(--ease); }
.link:hover .arw { transform: translateX(4px); }
.link-light { color: rgba(255,255,255,.82); background-image: linear-gradient(var(--blue-pale), var(--blue-pale)); }
.link-light:hover { color: #fff; }

.arw { display: inline-block; width: 1em; height: 1em; flex: none; }

/* ---------- Draft marking ---------- */
.chip-draft {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #8a6a00; background: #fdf3d4; border: 1px solid #f0dda0;
  padding: 3px 7px; border-radius: 2px;
  vertical-align: middle;
}
.chip-draft.on-dark { color: #f6e3a8; background: rgba(246,227,168,.12); border-color: rgba(246,227,168,.3); }

.review-banner {
  background: var(--ink); color: rgba(255,255,255,.78);
  font-size: 12.5px; letter-spacing: 0.01em;
  padding: 9px var(--gutter);
  display: flex; align-items: center; gap: 12px; justify-content: center;
  text-align: center;
  position: relative; z-index: 60;
}
.review-banner strong { color: #fff; font-weight: 600; white-space: nowrap; }
.review-banner .rb-note::before { content: "— "; }
@media (max-width: 760px) {
  .review-banner { padding-block: 7px; font-size: 11.5px; }
  .review-banner .rb-note { display: none; }
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--ease), background 400ms var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--rule-soft); }

.nav-inner {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-logo img { height: 21px; width: auto; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-link {
  position: relative;
  font-size: 14.5px; font-weight: 450; letter-spacing: -0.005em;
  color: var(--ink-soft);
  padding: 8px 0;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 320ms var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-caret { width: 9px; height: 9px; opacity: .5; transition: transform 320ms var(--ease); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .btn { padding: 11px 19px; font-size: 13.5px; }

/* Dropdown */
.nav-item { position: relative; }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: -20px;
  min-width: 320px;
  background: var(--white);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 18px 50px -18px rgba(11,16,32,.2);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:hover .nav-caret { transform: rotate(180deg); }
.nav-drop a {
  display: block; padding: 10px 14px;
  font-size: 14.5px; color: var(--ink-soft);
  border-radius: 2px;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.nav-drop a:hover { background: var(--paper-warm); color: var(--blue); }

/* Mobile nav */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: background 200ms; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform 320ms var(--ease), top 220ms var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed; inset: 0 0 0 0; top: 0;
  background: var(--paper);
  z-index: 49;
  padding: 96px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 340ms var(--ease), visibility 340ms;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.nav-mobile .m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule-soft); }
.nav-mobile .m-row .m-primary { flex: 1; border-bottom: 0; }
.nav-mobile .m-primary { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.nav-mobile .m-expand {
  flex: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink-mute);
  display: grid; place-items: center;
}
.nav-mobile .m-expand .nav-caret { width: 14px; height: 14px; opacity: .7; transition: transform 300ms var(--ease); }
.nav-mobile .m-expand[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-mobile .m-children { padding-bottom: 6px; }
.nav-mobile .m-sub { font-size: 14.5px; color: var(--ink-mute); padding: 9px 0 9px 16px; border-bottom-color: var(--rule-soft); }
.nav-mobile .m-children a:last-child { border-bottom: 0; }
.nav-mobile .btn { margin-top: 24px; margin-bottom: 8px; width: 100%; justify-content: center; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile { display: block; }
  .nav-inner { height: 66px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(72px, 9vw, 152px) clamp(40px, 5vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: end; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; } }

.hero-media {
  position: relative; margin-top: clamp(56px, 7vw, 104px);
  border-radius: 3px; overflow: hidden;
  background: var(--navy);
}
.hero-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 720px) { .hero-media img { aspect-ratio: 4 / 3; } }

/* Caption sits on the graphic, not beneath it, over a scrim that keeps the
   text legible whatever the image behind it is doing. */
.hero-media-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(to top, rgba(6,15,34,.86), rgba(6,15,34,0));
  color: #fff;
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  align-items: flex-end; justify-content: space-between;
}

/* Case-study heroes are 16:9 source images; the 21:9 default crops them.
   The sources carry their own rounded corners in the alpha channel (radius is
   ~1.4% of image width), so the container is transparent and matches that
   radius rather than clipping it into a square. */
.hero-media--tall {
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
}
/* Covers vary in shape (3:2, 4:3), so no ratio is forced: the image sets its
   own height and nothing is cropped. Forcing 16:9 was cutting off faces. */
.hero-media--tall img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
  border-radius: 18px;
}
@media (max-width: 720px) {
  .hero-media--tall, .hero-media--tall img { border-radius: 12px; }
  .hero-media--tall img { aspect-ratio: auto; }
}

/* Every case-study image carries the same corner treatment, whether or not the
   source already has rounded corners in its alpha channel. */
.work-shot { border-radius: 18px; background: transparent; overflow: hidden; }
.work-shot img { border-radius: 18px; display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .work-shot, .work-shot img { border-radius: 12px; } }

/* Next case study: a quiet footer row, not a second feature block. The page
   already ends with a CTA band and the footer; a third full-width slab here
   competed with the case study's own imagery. */
.next-work {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 116px minmax(0, 2.2fr) auto;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
  padding-block: clamp(22px, 2.5vw, 32px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: opacity 380ms var(--ease);
}
.next-work:hover .nw-title { color: var(--blue); }
.next-work:hover .nw-go { transform: translateX(4px); color: var(--blue); }
.next-work .nw-thumb { overflow: hidden; border-radius: 6px; background: var(--paper-warm); }
.next-work .nw-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.next-work .nw-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.012em;
  transition: color 380ms var(--ease); display: block;
}
.next-work .nw-meta {
  display: block; margin-top: 5px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.next-work .nw-go { color: var(--ink-mute); transition: transform 320ms var(--ease), color 320ms var(--ease); }
@media (max-width: 680px) {
  .next-work { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; row-gap: 10px; }
  .next-work .eyebrow { grid-column: 1 / -1; }
  .next-work .nw-go { display: none; }
}

/* Generated navigational chart. The gradient is the no-JS resting state, so
   the band still reads as a dusk seascape if the canvas never initialises. */
.hero-chart {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(48% 70% at 44% 46%, rgba(56,104,176,.34), rgba(56,104,176,0) 70%),
    #060f22;
}
.hero-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 720px) { .hero-chart { aspect-ratio: 4 / 3; } }

/* Client logo band. Sources are small, low-resolution exports, so they are
   never scaled above their natural size; each sits in an equal cell so the
   very wide and very tall marks still read as one row. */
.logo-band {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}
.logo-band li { display: flex; align-items: center; justify-content: center; }
.logo-band img {
  max-height: 30px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  /* The marks are already monochrome blue, which sits in the palette.
     Greyscale turned the solid-fill ones (beyondview, Fox) into grey blocks. */
  opacity: .55;
  transition: opacity 420ms var(--ease);
}
.logo-band img:hover { opacity: 1; }
@media (max-width: 1000px) { .logo-band { grid-template-columns: repeat(4, 1fr); row-gap: 34px; } }
@media (max-width: 560px)  { .logo-band { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }

/* ---------- Partners ----------
   Deliberately not part of .logo-band: those marks are past engagements, a
   partner is a current relationship, and the two claims should not be made
   by the same row. The navy chip is also the field the RXN mark is drawn
   for, so the logo is used as its owner published it. */
.partner-strip {
  margin-top: clamp(40px, 4vw, 60px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.partner-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.partner-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px 10px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 420ms var(--ease), transform 420ms var(--ease);
}
.partner-chip:hover { border-color: var(--rule); transform: translateY(-2px); }
.partner-chip img {
  width: 40px; height: 40px; border-radius: 9px; display: block; flex: none;
}
.partner-chip-n {
  display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); letter-spacing: .01em;
}
.partner-chip-d { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }

.partner-panel {
  background: var(--navy-deep);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.partner-lockup { width: min(340px, 72%); height: auto; display: block; }
.partner-descriptor {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.partner-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 32px; margin: 0; }
.partner-facts dt { font-size: clamp(22px, 2.2vw, 30px); }
.partner-facts dd { margin: 6px 0 0; }
@media (max-width: 560px) {
  .partner-facts { grid-template-columns: 1fr; gap: 20px; }
  .partner-chip { padding: 10px 16px 10px 10px; }
}

/* ---------- Dark sections ---------- */
.dark {
  background: var(--navy-deep);
  color: rgba(255,255,255,.76);
  position: relative;
}
.dark h1, .dark h2, .dark h3, .dark .display, .dark .display-sm, .dark .h2, .dark .h3 { color: #fff; }
.dark .eyebrow { color: rgba(255,255,255,.55); }
.dark .eyebrow::before { background: var(--blue-bright); }
.dark .lede { color: rgba(255,255,255,.72); }
.dark .small { color: rgba(255,255,255,.5); }
.dark .mono-num { color: var(--blue-pale); }
.dark hr, .dark .rule { border-color: var(--rule-dark-soft); }

.dark-wave {
  background: var(--navy-deep) url("../img/Waves-p-1600.png") center / cover no-repeat;
}
.dark-wave::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,34,.6), rgba(6,15,34,.88));
}
.dark-wave > * { position: relative; z-index: 1; }

/* ---------- Rules & section headers ---------- */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-soft { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 28px; margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.section-head .sh-left { display: flex; flex-direction: column; gap: 18px; max-width: 700px; }
.dark .section-head { border-bottom-color: var(--rule-dark-soft); }

/* ---------- Numbered capability rows ---------- */
.rows { border-top: 1px solid var(--rule); }
.dark .rows { border-top-color: var(--rule-dark-soft); }

.row-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 420ms var(--ease);
}
.dark .row-item { border-bottom-color: var(--rule-dark-soft); }
.row-item::after {
  content: ""; position: absolute; left: calc(var(--gutter) * -0.5); right: calc(var(--gutter) * -0.5);
  top: 0; bottom: 0; background: rgba(20,71,230,.03);
  opacity: 0; transition: opacity 420ms var(--ease); pointer-events: none;
}
a.row-item:hover::after { opacity: 1; }
.dark a.row-item:hover::after { background: rgba(151,197,255,.05); }
a.row-item:hover .row-title { color: var(--blue); }
.dark a.row-item:hover .row-title { color: var(--blue-pale); }
.row-title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.015em; transition: color 380ms var(--ease); }
.row-sum { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.dark .row-sum { color: rgba(255,255,255,.62); }
.row-go { font-size: 13px; color: var(--ink-mute); white-space: nowrap; display: flex; align-items: center; gap: 7px; }
@media (max-width: 900px) {
  .row-item { grid-template-columns: 40px 1fr; gap: 10px 16px; }
  .row-item .row-sum { grid-column: 2; }
  .row-item .row-go { grid-column: 2; margin-top: 6px; }
}

/* ---------- Article cards ---------- */
.card { display: flex; flex-direction: column; height: 100%; position: relative; }
.card-media {
  position: relative; overflow: hidden;
  background: var(--paper-warm);
  border-radius: 2px;
  margin-bottom: 20px;
}
.card-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}
.card:hover .card-media img { transform: scale(1.035); }
.card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 12px;
}
.card-meta .dot { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: .6; }
.card-cat { color: var(--blue); font-weight: 600; }
.card-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.85vw, 27px); line-height: 1.14; letter-spacing: -0.012em;
  margin-bottom: 10px;
  transition: color 380ms var(--ease);
}
.card:hover .card-title { color: var(--blue); }
.card-desc { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 18px; }
.card-foot { margin-top: auto; font-size: 13px; color: var(--ink-mute); }
.dark .card-desc { color: rgba(255,255,255,.62); }
.dark .card-meta, .dark .card-foot { color: rgba(255,255,255,.5); }
.dark .card-cat { color: var(--blue-pale); }
.dark .card:hover .card-title { color: var(--blue-pale); }

.card-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .card-feature { grid-template-columns: 1fr; } }
.card-feature .card-media { margin-bottom: 0; }
.card-feature .card-media img { aspect-ratio: 4 / 3; }
.card-feature .card-title { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.05; }
.card-feature .card-desc { font-size: 17px; max-width: 52ch; }

.card-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule-soft);
  transition: color 380ms var(--ease);
}
.card-line:hover .card-line-title { color: var(--blue); }
.card-line-title { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; transition: color 380ms var(--ease); }
.card-line-date { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-line-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
@media (max-width: 680px) {
  .card-line { grid-template-columns: 1fr; gap: 8px; }
  .card-line-date { order: 3; }
}

/* ---------- Statement / manifesto ---------- */
.statement {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.1; letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 20ch;
}
.statement-wide { max-width: 26ch; }

.principle-list { border-top: 1px solid var(--rule-dark-soft); }
.principle {
  display: grid; grid-template-columns: 52px 1fr; gap: clamp(14px, 2vw, 32px);
  padding: 28px 0; border-bottom: 1px solid var(--rule-dark-soft);
}
.principle-t { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.18; color: #fff; margin-bottom: 8px; }
.principle-b { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 62ch; }

/* ---------- Quote / testimonial ---------- */
.quote-big {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.22; letter-spacing: -0.014em;
  text-wrap: pretty;
}
.quote-attr { margin-top: 24px; font-size: 13.5px; letter-spacing: .04em; color: var(--ink-mute); }
.dark .quote-attr { color: rgba(255,255,255,.55); }

.tcard {
  border-top: 2px solid var(--blue);
  padding-top: 26px;
  display: flex; flex-direction: column; height: 100%;
}
.tcard-q { font-family: var(--read); font-size: 18px; line-height: 1.5; color: var(--ink); margin-bottom: 22px; text-wrap: pretty; }
.tcard-a { margin-top: auto; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); line-height: 1.6; }
.tcard-a strong { display: block; color: var(--ink); font-weight: 600; letter-spacing: .04em; }

/* ---------- Stats ---------- */
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-n { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.02em; }
.stat-l { font-size: 13px; color: var(--ink-mute); letter-spacing: .02em; line-height: 1.45; }
.dark .stat-l { color: rgba(255,255,255,.55); }

/* ---------- Article body ---------- */
.article-body {
  font-family: var(--read);
  font-size: 19.5px;
  line-height: 1.68;
  color: #1b2432;
  max-width: var(--max-text);
  margin-inline: auto;
}
.article-body > * + * { margin-top: 1.5em; }
.article-body p { text-wrap: pretty; }
.article-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.014em;
  color: var(--ink);
  margin-top: 2.2em; margin-bottom: -0.3em;
  text-wrap: balance;
}
.article-body h3 {
  font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.35;
  color: var(--ink); margin-top: 2em; margin-bottom: -0.4em;
}
.article-body ul { display: flex; flex-direction: column; gap: 0.85em; }
.article-body li { position: relative; padding-left: 26px; }
.article-body li::before {
  content: ""; position: absolute; left: 2px; top: 0.68em;
  width: 7px; height: 1px; background: var(--blue);
}
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body a { color: var(--blue); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }
.article-body a:hover { color: var(--blue-deep); }

/* Markdown blockquotes are pull quotes: `> text` is how an editor writes one
   in the CMS, so it gets the same treatment as the authored .pullquote. */
.pullquote,
.article-body blockquote {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 2.7vw, 36px); line-height: 1.2; letter-spacing: -0.014em;
  color: var(--ink);
  border-left: 2px solid var(--blue);
  padding-left: clamp(20px, 3vw, 36px);
  margin-block: 2.2em !important;
  text-wrap: pretty;
}
@media (min-width: 1180px) {
  .pullquote,
  .article-body blockquote { margin-inline: -80px 0 !important; }
}

.article-body blockquote > p { margin: 0; }
.article-body blockquote > p + p { margin-top: .5em; }

.article-figure { margin-block: 2.4em !important; }
.article-figure img { width: 100%; border-radius: 2px; }
.article-figure figcaption { font-family: var(--sans); font-size: 13px; color: var(--ink-mute); margin-top: 12px; }

/* Article header */
.article-hero-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 3px; }
@media (max-width: 720px) { .article-hero-img { aspect-ratio: 3 / 2; } }

.article-meta-bar {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  font-size: 13px; color: var(--ink-mute);
  padding-block: 20px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.byline { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--blue-deep); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Leadership portrait. Sized to the label column rather than shrunk to an
   icon — a real photograph of the person you would actually be working with. */
.portrait {
  margin: 0;
  width: 100%;
  max-width: 280px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-warm);
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;   /* keeps the face off the top edge on crop */
  display: block;
}
@media (max-width: 860px) { .portrait { max-width: 200px; } }

/* Share */
.share { display: flex; align-items: center; gap: 10px; }
.share-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-mute); background: transparent; cursor: pointer;
  transition: border-color 300ms var(--ease), color 300ms var(--ease), background 300ms var(--ease);
}
.share-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(20,71,230,.04); }
.share-btn svg { width: 15px; height: 15px; }

/* Prev / next */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (max-width: 680px) { .pagenav { grid-template-columns: 1fr; } }
.pagenav a { background: var(--paper); padding: clamp(24px, 3vw, 40px); transition: background 380ms var(--ease); display: flex; flex-direction: column; gap: 10px; }
.pagenav a:hover { background: var(--paper-warm); }
.pagenav a:hover .pn-t { color: var(--blue); }
.pagenav .pn-l { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pagenav .pn-t { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.16; transition: color 380ms var(--ease); }
.pagenav .pn-next { text-align: right; align-items: flex-end; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font-size: 13.5px; padding: 8px 15px;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: all 320ms var(--ease);
}
.filter:hover { border-color: var(--blue); color: var(--blue); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Honeypot: bots fill it, people never see it. Submissions carrying a value
   are dropped client-side before they reach the webhook. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Newsletter ---------- */
.newsletter-band { border-top: 1px solid var(--rule); }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.nl-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  padding: 14px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color 300ms var(--ease);
}
.nl-form input[type="email"]::placeholder { color: var(--ink-faint); }
.nl-form input[type="email"]:focus { outline: none; border-color: var(--blue); }
.dark .nl-form input[type="email"] {
  background: rgba(255,255,255,.06); border-color: var(--rule-dark); color: #fff;
}
.dark .nl-form input[type="email"]::placeholder { color: rgba(255,255,255,.4); }
.dark .nl-form input[type="email"]:focus { border-color: var(--blue-pale); }
.nl-note { font-size: 12.5px; color: var(--ink-mute); margin-top: 14px; }
.dark .nl-note { color: rgba(255,255,255,.45); }
/* Confirmation reads as a result, not a footnote: it was a small grey line
   that was easy to miss after a submission. */
.form-msg {
  font-size: 14.5px; line-height: 1.5; margin-top: 16px;
  display: none; flex-basis: 100%;
  padding: 13px 16px; border-radius: 3px;
  border: 1px solid transparent;
}
.form-msg.is-on { display: block; }
.form-msg.ok {
  color: #0d5c3f; background: #e8f6ef; border-color: #b9e3d0;
}
.form-msg.ok::before {
  content: "✓"; font-weight: 700; margin-right: 9px;
}
.form-msg.err {
  color: #8f2f26; background: #fdeeec; border-color: #f2c9c3;
}
.form-msg.err::before { content: "!"; font-weight: 700; margin-right: 11px; }
.dark .form-msg.ok { color: #d6f2e4; background: rgba(111,211,164,.14); border-color: rgba(111,211,164,.34); }
.dark .form-msg.err { color: #ffd9d3; background: rgba(255,138,122,.14); border-color: rgba(255,138,122,.34); }

/* Button busy state */
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.spinner {
  width: 13px; height: 13px; flex: none;
  border: 1.6px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: fbo-spin 620ms linear infinite;
}
@keyframes fbo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* ---------- Contact form ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 15px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color 300ms var(--ease);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.62); padding-block: clamp(56px, 6vw, 88px) 32px; }
.footer a { color: rgba(255,255,255,.62); transition: color 280ms var(--ease); }
.footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.5fr 2.4fr; gap: clamp(32px, 5vw, 80px); padding-bottom: 56px; }
@media (max-width: 940px) { .footer-top { grid-template-columns: 1fr; gap: 44px; } }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 680px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 460px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-col-t { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 16px; }
.footer-col li { margin-bottom: 11px; font-size: 14.5px; }
.footer-logo img { height: 20px; width: auto; margin-bottom: 22px; }
.footer-blurb { font-size: 14.5px; line-height: 1.6; max-width: 42ch; color: rgba(255,255,255,.6); }
.footer-mid { border-top: 1px solid var(--rule-dark-soft); padding-block: 40px; display: grid; grid-template-columns: 1.5fr 2.4fr; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 940px) { .footer-mid { grid-template-columns: 1fr; gap: 28px; } }
.footer-bottom {
  border-top: 1px solid var(--rule-dark-soft); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.44);
}
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.social-row { display: flex; gap: 10px; margin-top: 22px; }
.social-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--rule-dark); border-radius: 2px;
  transition: border-color 300ms var(--ease), background 300ms var(--ease);
}
.social-btn:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.social-btn svg { width: 15px; height: 15px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }

/* ---------- Utility ---------- */
.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }

/* Visible to screen readers only. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; } .mt-72 { margin-top: 72px; }
.flex { display: flex; } .items-center { align-items: center; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; }
.text-right { text-align: right; }
.hide-sm { display: initial; }
@media (max-width: 680px) { .hide-sm { display: none; } }

/* ---------- Motion ----------
   Progressive enhancement: content is visible by default. The hidden
   start-state only applies once the inline head script confirms JS is
   running, so a script failure can never leave the page blank. */
.js .rise { opacity: 0; transform: translateY(18px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .rise[data-d="1"].in { transition-delay: 80ms; }
.js .rise[data-d="2"].in { transition-delay: 160ms; }
.js .rise[data-d="3"].in { transition-delay: 240ms; }
.js .rise[data-d="4"].in { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .review-banner, .cta-band, .newsletter-band, .share, .pagenav { display: none !important; }
  body { background: #fff; }
  .article-body { max-width: none; font-size: 12pt; }
}