:root {
  /* Brand colours (per CLAUDE.md) */
  --c-primary:  #092469;
  --c-secondary:#261E17;
  --c-text:     #261E17;
  --c-muted:    #7A7A7A;
  --c-accent:   #923A3B;
  --c-ochre:    #F1BE45;
  --c-lighter:  #E0DACF;
  --c-light:    #C5BAAE;
  --c-brown:    #957C72;
  --c-white:    #FFFFFF;
  --c-paper:    #FBF9F5;
  --c-rule:     rgba(38, 30, 23, 0.14);

  /* Type tokens */
  --ff-body:    'Iowan Old Style', Palatino, Georgia, serif;
  --ff-heading: 'Fraunces', Georgia, serif;
  --ff-eyebrow: 'Inter', system-ui, sans-serif;

  /* Layout - fluid values handle tablet+; mobile breakpoints tune further */
  --content-max: 1400px;
  --pad-x-left:  clamp(20px, 8vw, 132px);
  --pad-x-right: clamp(20px, 5vw, 80px);
  --space-section: clamp(48px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.65;
  position: relative;
  overflow-x: hidden;
}

/* Paper-grain overlay --------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* Page-edge marker ------------------------------------------------------ */
.page-mark {
  position: fixed;
  top: 22px;
  right: 24px;
  font-family: var(--ff-eyebrow);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  z-index: 150;
  pointer-events: none;
}

/* Container ------------------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-section) var(--pad-x-right) var(--space-section) var(--pad-x-left);
  position: relative;
}

/* Section spine tick (recurring motif) ---------------------------------- */
.tick {
  position: absolute;
  top: var(--space-section);
  left: calc(var(--pad-x-left) - 64px);
  width: 3px;
  height: 56px;
  background: var(--c-ochre);
}
.tick--white { background: var(--c-ochre); }

/* Site nav -------------------------------------------------------------- */
.site-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 36px var(--pad-x-right) 36px var(--pad-x-left);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  z-index: 50;
}
.site-nav__brand {
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--c-primary);
  text-decoration: none;
  font-variation-settings: "opsz" 24;
}
.site-nav nav {
  display: flex;
  gap: 40px;
}
.site-nav nav a {
  font-family: var(--ff-eyebrow);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-secondary);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}
.site-nav nav a[aria-current="page"] { color: var(--c-accent); }
.site-nav nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-ochre);
}
.site-nav nav a:hover { color: var(--c-primary); }

/* Section eyebrow (with number + rule) ---------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-eyebrow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 36px;
  padding: 0;
}
.eyebrow .num { color: var(--c-accent); min-width: 24px; }
.eyebrow .rule { display: inline-block; width: 32px; height: 1px; background: currentColor; }
.eyebrow .label { letter-spacing: 0.22em; }

/* Page-load reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: revealUp 1.1s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}
.reveal-1 { animation-delay: 0.15s; }
.reveal-2 { animation-delay: 0.3s; }
.reveal-3 { animation-delay: 0.45s; }
.reveal-4 { animation-delay: 0.65s; }
.reveal-5 { animation-delay: 0.85s; }
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ====================================================================== */
/* HERO                                                                    */
/* ====================================================================== */
.hero {
  position: relative;
  border-bottom: 1px solid var(--c-rule);
}
.hero .container {
  padding-top: clamp(72px, 10vw, 144px);
  padding-bottom: clamp(96px, 14vw, 192px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 9.5fr);
  gap: 56px;
  align-items: end;
  position: relative;
}

.hero__rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--ff-eyebrow);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding: 8px 0 24px;
  min-height: 380px;
}
.hero__rail .vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  display: inline-block;
}

.hero__title-wrap { position: relative; }

.hero__watermark {
  position: absolute;
  top: -40px;
  right: -20px;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(180px, 30vw, 440px);
  color: var(--c-ochre);
  opacity: 0.18;
  line-height: 0.82;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-variation-settings: "opsz" 144;
}

.hero__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(58px, 9.6vw, 144px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--c-primary);
  margin: 0;
  position: relative;
  z-index: 2;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero__title .hl {
  position: relative;
  display: inline-block;
  z-index: 1;
  font-style: normal;
}
.hero__title .hl::before {
  content: '';
  position: absolute;
  inset: 0.2em -0.08em 0.12em -0.08em;
  background: var(--c-ochre);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left bottom;
  animation: hlSlide 0.95s cubic-bezier(0.7, 0, 0.2, 1) 0.7s forwards;
}
@keyframes hlSlide {
  to { transform: scaleX(1); }
}

.hero__rule {
  height: 5px;
  width: 200px;
  background: var(--c-ochre);
  margin: 64px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: ruleDraw 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.4s forwards;
}
@keyframes ruleDraw { to { transform: scaleX(1); } }

.hero__intro {
  font-family: var(--ff-body);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.5;
  color: var(--c-secondary);
  max-width: 54ch;
  margin: 48px 0 0;
}

/* ====================================================================== */
/* MISSION (full-bleed burgundy, giant italic pull quote)                  */
/* ====================================================================== */
.mission {
  background: var(--c-accent);
  color: var(--c-lighter);
  position: relative;
  overflow: hidden;
}
.mission .container { position: relative; z-index: 2; }
.mission .eyebrow { color: var(--c-ochre); }
.mission .eyebrow .rule { background: var(--c-ochre); }

.mission__watermark {
  position: absolute;
  top: 6%;
  right: -3%;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(240px, 36vw, 540px);
  color: rgba(241, 190, 69, 0.09);
  line-height: 0.82;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.mission__quote {
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--c-white);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
}
.mission__quote .open,
.mission__quote .close {
  color: var(--c-ochre);
  font-style: italic;
}

.mission__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(56px, 7vw, 96px);
  max-width: 1080px;
}
.mission__body p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}
.mission__body p + p { margin-top: 22px; }
.mission__body strong {
  color: var(--c-ochre);
  font-weight: 500;
  font-family: var(--ff-heading);
  font-style: italic;
}

/* ====================================================================== */
/* APPROACH (two-column editorial, numbered subsections)                   */
/* ====================================================================== */
.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.approach__left h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--c-primary);
  margin: 0 0 36px;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.approach__lede {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.55;
  color: var(--c-secondary);
  margin: 0;
  max-width: 32ch;
}

.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: approach;
}
.approach__item {
  counter-increment: approach;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 44px 0 44px;
  border-top: 1px solid var(--c-rule);
  align-items: start;
}
.approach__item:first-child { border-top: 2px solid var(--c-secondary); }
.approach__item:last-child  { border-bottom: 1px solid var(--c-rule); }

.approach__item::before {
  content: counter(approach, decimal-leading-zero);
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  color: var(--c-ochre);
  line-height: 1;
  padding-top: 2px;
  font-variation-settings: "opsz" 96;
}
.approach__item h3 {
  font-family: var(--ff-eyebrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 14px;
}
.approach__item p {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-secondary);
  max-width: 58ch;
}

/* ====================================================================== */
/* HISTORY (quiet centred column on cream)                                 */
/* ====================================================================== */
.history { background: var(--c-lighter); }
.history__inner { max-width: 680px; margin: 0 auto; }
.history__inner h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  margin: 0 0 44px;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.history__inner p {
  font-family: var(--ff-body);
  font-size: 21px;
  line-height: 1.6;
  color: var(--c-secondary);
  margin: 0 0 28px;
}
.history__inner p:last-child {
  margin-top: 36px;
  margin-bottom: 0;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--c-accent);
  border-top: 1px solid var(--c-secondary);
  padding-top: 36px;
  max-width: 30ch;
  font-variation-settings: "opsz" 48;
}

/* ====================================================================== */
/* CREDENTIALS (multi-column wall of names with size rhythm)               */
/* ====================================================================== */
.credentials__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  margin-bottom: 88px;
  align-items: end;
}
.credentials h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--c-primary);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.credentials__lede {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-secondary);
  margin: 0;
  max-width: 44ch;
}

.namelist {
  border-top: 2px solid var(--c-secondary);
  border-bottom: 1px solid var(--c-secondary);
  padding: 56px 0 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 36px;
  list-style: none;
  margin: 0;
}
.namelist li {
  font-family: var(--ff-heading);
  color: var(--c-secondary);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color 0.3s ease;
  font-variation-settings: "opsz" 36;
}
/* Typographic rhythm - alternating sizes / weights / italics */
.namelist li:nth-child(7n+1) { font-size: 30px; font-weight: 500; }
.namelist li:nth-child(7n+2) { font-size: 22px; font-weight: 400; }
.namelist li:nth-child(7n+3) { font-size: 24px; font-style: italic; font-weight: 400; color: var(--c-accent); }
.namelist li:nth-child(7n+4) { font-size: 20px; font-weight: 400; }
.namelist li:nth-child(7n+5) { font-size: 28px; font-weight: 500; color: var(--c-primary); }
.namelist li:nth-child(7n+6) { font-size: 22px; font-style: italic; font-weight: 400; }
.namelist li:nth-child(7n+7) { font-size: 26px; font-weight: 500; }
.namelist li:hover { color: var(--c-ochre); cursor: default; }

.credentials__outro {
  margin: 72px 0 0;
  max-width: 720px;
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-secondary);
}
.credentials__outro em {
  font-family: var(--ff-heading);
  font-style: italic;
  color: var(--c-accent);
}

/* ====================================================================== */
/* BIO (about Sohail - layered portrait + bio)                             */
/* ====================================================================== */
.bio { background: var(--c-lighter); }
.bio__grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

.bio__portrait-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
}
.bio__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  z-index: 1;
}
.bio__portrait::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  width: 100%;
  height: 100%;
  background: var(--c-ochre);
  z-index: -1;
}
.bio__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-light);
  display: flex;
  align-items: flex-end;
  padding: 28px;
  z-index: 2;
}
.bio__placeholder span {
  font-family: var(--ff-eyebrow);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(38, 30, 23, 0.5);
}
.bio__caption {
  margin: 64px 0 0;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-accent);
  max-width: 260px;
  padding-left: 28px;
  border-left: 2px solid var(--c-ochre);
}

.bio h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--c-primary);
  margin: 0 0 44px;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.bio__copy p {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--c-secondary);
  margin: 0 0 22px;
  max-width: 56ch;
}
.bio__copy p:first-of-type {
  font-size: 21px;
  line-height: 1.55;
  color: var(--c-secondary);
}
.bio__copy em,
.bio__copy i {
  font-family: var(--ff-heading);
  font-style: italic;
  color: var(--c-accent);
}

/* ====================================================================== */
/* VALUES (2x2 grid with massive ochre numerals)                           */
/* ====================================================================== */
.values__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  margin-bottom: clamp(72px, 9vw, 128px);
  align-items: end;
}
.values h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--c-primary);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.values__lede {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-secondary);
  margin: 0;
  max-width: 44ch;
}

.values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(56px, 7vw, 120px);
  row-gap: clamp(64px, 8vw, 112px);
  counter-reset: val;
}
.value {
  counter-increment: val;
  padding: 28px 0 0;
  border-top: 2px solid var(--c-secondary);
  position: relative;
}
.value::before {
  content: counter(val, decimal-leading-zero);
  display: block;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 6.4vw, 92px);
  line-height: 1;
  color: var(--c-ochre);
  margin: 0 0 36px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}
.value h3 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-primary);
  margin: 0 0 20px;
  font-variation-settings: "opsz" 36;
}
.value p {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-secondary);
  margin: 0;
  max-width: 36ch;
}

/* ====================================================================== */
/* CTA (full-bleed primary blue)                                           */
/* ====================================================================== */
.cta {
  background: var(--c-primary);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.cta .container { position: relative; z-index: 2; }
.cta .eyebrow { color: var(--c-ochre); }
.cta .eyebrow .rule { background: var(--c-ochre); }

.cta__watermark {
  position: absolute;
  bottom: -60px;
  right: -32px;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(220px, 32vw, 480px);
  color: rgba(241, 190, 69, 0.09);
  line-height: 0.82;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: end;
}
.cta h2 {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(54px, 7.2vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  color: var(--c-white);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
}
.cta__right p {
  font-family: var(--ff-body);
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 44px;
  max-width: 38ch;
}
.cta__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-eyebrow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  text-decoration: none;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--c-ochre);
  transition: gap 0.4s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease;
}
.cta__link::after {
  content: '\2192';
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--c-ochre);
  transform: translateY(-2px);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta__link:hover { gap: 30px; color: var(--c-ochre); }
.cta__link:hover::after { transform: translate(6px, -2px); }

/* ====================================================================== */
/* CLOSING SIGNATURE                                                       */
/* ====================================================================== */
.signature {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px var(--pad-x-right) 72px var(--pad-x-left);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--c-rule);
  gap: 24px;
  flex-wrap: wrap;
}
.signature__left {
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--c-accent);
  font-variation-settings: "opsz" 36;
}
.signature__left .dot {
  color: var(--c-ochre);
  font-style: normal;
  margin: 0 10px;
}
.signature__right {
  font-family: var(--ff-eyebrow);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ====================================================================== */
/* SCROLL REVEALS (modern browsers)                                        */
/* ====================================================================== */
@supports (animation-timeline: view()) {
  .section--reveal > * {
    animation: revealUp 1.1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
    transition-duration: 0.01s !important;
  }
}

/* ====================================================================== */
/* RESPONSIVE - three layered breakpoints                                  */
/*   ≤1080px  tablet / small laptop                                        */
/*   ≤720px   large phone / landscape phone                                */
/*   ≤480px   small phone                                                  */
/* ====================================================================== */

/* ---------- Tablet ---------------------------------------------------- */
@media (max-width: 1080px) {
  :root {
    --space-section: clamp(72px, 11vw, 144px);
  }
  /* Collapse two-column grids */
  .approach__grid     { grid-template-columns: 1fr; gap: 56px; }
  .credentials__head  { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .bio__grid          { grid-template-columns: 1fr; gap: 56px; }
  .bio__portrait-wrap { max-width: 380px; }
  .values__head       { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .cta__grid          { grid-template-columns: 1fr; gap: 48px; }

  /* Wall of names down to 2 columns */
  .namelist           { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }

  /* Trim oversized watermarks at tablet to prevent overflow */
  .hero__watermark    { font-size: clamp(160px, 24vw, 320px); top: -28px; }
  .mission__watermark { font-size: clamp(220px, 32vw, 420px); }
  .cta__watermark     { font-size: clamp(200px, 28vw, 380px); }

  /* Hero proportions */
  .hero__grid         { grid-template-columns: minmax(96px, 1fr) minmax(0, 9fr); gap: 40px; }
  .hero__rail         { min-height: 300px; }
}

/* ---------- Large phone ------------------------------------------------ */
@media (max-width: 720px) {
  :root {
    --space-section: clamp(56px, 16vw, 96px);
    --pad-x-left:   20px;
    --pad-x-right:  20px;
  }

  /* Nav */
  .site-nav {
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
  }
  .site-nav__brand { font-size: 18px; }
  .site-nav nav    { gap: 18px; }
  .site-nav nav a  { font-size: 12px; }

  /* Page-edge marker overlaps on small screens */
  .page-mark { display: none; }

  /* Hero collapses to single column; rail becomes a horizontal label */
  .hero .container { padding-top: 48px; padding-bottom: 72px; }
  .hero__grid      { grid-template-columns: 1fr; gap: 28px; }
  .hero__rail {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    gap: 16px;
    padding: 0;
  }
  .hero__rail .vert { writing-mode: horizontal-tb; transform: none; }
  .hero__rule       { width: 120px; margin-top: 40px; height: 4px; }
  .hero__intro      { margin-top: 32px; font-size: 18px; }
  .hero__watermark  { font-size: clamp(140px, 38vw, 220px); top: -24px; right: -8px; }
  .tick             { left: calc(var(--pad-x-left) - 14px); width: 3px; height: 40px; top: var(--space-section); }

  /* Mission */
  .mission__body    { grid-template-columns: 1fr; gap: 24px; }
  .mission__body p + p { margin-top: 0; }
  .mission__quote   { max-width: 100%; }
  .mission__watermark { font-size: clamp(180px, 50vw, 260px); right: -16px; top: 4%; }

  /* Approach - number column tightens */
  .approach__item   { grid-template-columns: 52px 1fr; gap: 12px; padding: 32px 0; }
  .approach__item::before { font-size: 36px; }

  /* History */
  .history__inner p { font-size: 19px; }
  .history__inner p:last-child { font-size: 20px; padding-top: 28px; margin-top: 28px; }

  /* Credentials */
  .namelist {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
    padding: 32px 0 40px;
  }
  .namelist li:nth-child(n) { font-size: 22px; font-weight: 400; font-style: normal; color: var(--c-secondary); }
  .namelist li:nth-child(3n+1) { font-size: 26px; font-weight: 500; color: var(--c-primary); }
  .namelist li:nth-child(3n+2) { font-size: 22px; font-style: italic; color: var(--c-accent); }
  .credentials__outro { font-size: 17px; margin-top: 48px; }

  /* Bio - portrait above, full width with cap */
  .bio__portrait-wrap { max-width: 320px; margin-left: 0; }
  .bio__portrait::before { top: 18px; left: 18px; }
  .bio__caption     { padding-left: 18px; margin-top: 44px; }
  .bio__copy p      { font-size: 17px; }
  .bio__copy p:first-of-type { font-size: 19px; }

  /* Values */
  .values__grid     { grid-template-columns: 1fr; column-gap: 0; row-gap: 56px; }
  .value::before    { font-size: 56px; margin-bottom: 24px; }
  .value h3         { font-size: 24px; }

  /* CTA */
  .cta h2           { font-size: clamp(40px, 11vw, 72px); }
  .cta__right p     { font-size: 17px; margin-bottom: 32px; }

  /* Eyebrows tighter */
  .eyebrow          { gap: 12px; margin-bottom: 24px; }
  .eyebrow .rule    { width: 22px; }

  /* Signature stacks */
  .signature {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 40px var(--pad-x-right) 48px var(--pad-x-left);
  }
  .signature__left { font-size: 15px; }
}

/* ---------- Small phone ----------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --space-section: 60px;
  }

  /* Nav: brand stacks above nav so neither truncates */
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-nav nav { gap: 18px; flex-wrap: wrap; }

  /* Hero: title drops to a more readable mobile size */
  .hero__title {
    font-size: clamp(44px, 13.5vw, 64px);
    letter-spacing: -0.02em;
  }
  .hero__title .hl::before { inset: 0.22em -0.06em 0.1em -0.06em; }
  .hero__intro { font-size: 17px; line-height: 1.55; }

  /* Mission */
  .mission__quote { font-size: clamp(32px, 9vw, 44px); line-height: 1.1; }
  .mission__body p { font-size: 16px; line-height: 1.65; }
  .mission__watermark { font-size: clamp(140px, 58vw, 200px); opacity: 0.06; }

  /* Approach */
  .approach__left h2 { font-size: clamp(34px, 10vw, 44px); }
  .approach__lede    { font-size: 17px; }
  .approach__item    { grid-template-columns: 44px 1fr; }
  .approach__item::before { font-size: 30px; }
  .approach__item p  { font-size: 16px; }

  /* History */
  .history__inner h2 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 28px; }
  .history__inner p  { font-size: 17px; }

  /* Credentials */
  .credentials h2 { font-size: clamp(34px, 10vw, 48px); }
  .credentials__lede { font-size: 16px; }
  .credentials__head { margin-bottom: 48px; }
  .namelist li:nth-child(n) { font-size: 19px; }
  .namelist li:nth-child(3n+1) { font-size: 21px; }
  .namelist li:nth-child(3n+2) { font-size: 19px; }

  /* Bio */
  .bio h2            { font-size: clamp(32px, 9vw, 44px); margin-bottom: 32px; }
  .bio__portrait-wrap { max-width: 100%; }
  .bio__copy p:first-of-type { font-size: 17px; }
  .bio__caption      { font-size: 14px; }

  /* Values */
  .values h2         { font-size: clamp(34px, 10vw, 48px); }
  .values__lede      { font-size: 16px; }
  .value::before     { font-size: 48px; margin-bottom: 20px; }
  .value h3          { font-size: 22px; }
  .value p           { font-size: 16px; }

  /* CTA */
  .cta h2            { font-size: clamp(36px, 11.5vw, 60px); letter-spacing: -0.025em; }
  .cta__right p      { font-size: 16px; margin-bottom: 28px; }
  .cta__link         { font-size: 12px; gap: 14px; }
  .cta__watermark    { font-size: clamp(150px, 56vw, 220px); opacity: 0.06; bottom: -32px; }

  /* Eyebrows further tightened */
  .eyebrow { font-size: 11px; }

  /* Signature */
  .signature__left { font-size: 14px; }
  .signature__right { font-size: 10px; }
}


/* ============================================================================
   Placeholder boxes + icon system  (added 2026-07-05)
   Icons are stroke SVGs used as CSS masks, so background-color tints them.
   Reusable via .orr-ic--NAME spans, or by referencing var(--ic-NAME) in ::before.
   ========================================================================== */
:root{
  --ic-research: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cline%20x1='15.4'%20y1='15.4'%20x2='21'%20y2='21'/%3E%3C/svg%3E");
  --ic-evaluation: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='4'%20y1='20'%20x2='20'%20y2='20'/%3E%3Cline%20x1='7.5'%20y1='20'%20x2='7.5'%20y2='13'/%3E%3Cline%20x1='12'%20y1='20'%20x2='12'%20y2='8'/%3E%3Cline%20x1='16.5'%20y1='20'%20x2='16.5'%20y2='11'/%3E%3C/svg%3E");
  --ic-facilitation: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8.5'%20r='3'/%3E%3Cpath%20d='M3.5%2019c0-3%202.5-5%205.5-5s5.5%202%205.5%205'/%3E%3Ccircle%20cx='17.5'%20cy='9.5'%20r='2.3'/%3E%3Cpath%20d='M15%2019c0-2.6%201.8-4.4%204.5-4.4'/%3E%3C/svg%3E");
  --ic-coproduction: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9.5'%20cy='12'%20r='5.5'/%3E%3Ccircle%20cx='14.5'%20cy='12'%20r='5.5'/%3E%3C/svg%3E");
  --ic-training: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205%202.5%209.2%2012%2013.4%2021.5%209.2%2012%205Z'/%3E%3Cpath%20d='M6.2%2011.4v4.1c0%201.4%202.7%202.7%205.8%202.7s5.8-1.3%205.8-2.7v-4.1'/%3E%3C/svg%3E");
  --ic-community: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020S4.5%2015.3%204.5%2010.2A3.7%203.7%200%200%201%2012%208a3.7%203.7%200%200%201%207.5%202.2C19.5%2015.3%2012%2020%2012%2020Z'/%3E%3C/svg%3E");
  --ic-rigour: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='M8.2%2012.3l2.6%202.6%205-5.2'/%3E%3C/svg%3E");
  --ic-creativity: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5l1.7%205%205%201.7-5%201.7-1.7%205-1.7-5-5-1.7%205-1.7z'/%3E%3C/svg%3E");
  --ic-knowledge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%206.5C10%205.2%207%205.2%204.5%206.5v11.5c2.5-1.3%205.5-1.3%207.5%200M12%206.5c2-1.3%205-1.3%207.5%200v11.5c-2.5-1.3-5.5-1.3-7.5%200M12%206.5V18'/%3E%3C/svg%3E");
}

.ph{ position:relative; display:block; background:var(--c-light);
  background-image:linear-gradient(135deg, rgba(255,255,255,.16), rgba(38,30,23,.05)); }
.ph > span, .ph__label{ position:absolute; left:18px; bottom:14px; font-family:var(--ff-eyebrow);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(38,30,23,.5); }

.orr-ic{ display:inline-block; width:38px; height:38px; flex:0 0 auto; background-color:var(--c-primary);
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.orr-ic--ochre{ background-color:var(--c-ochre); }
.orr-ic--accent{ background-color:var(--c-accent); }
.orr-ic--research{ --ic:var(--ic-research); }
.orr-ic--evaluation{ --ic:var(--ic-evaluation); }
.orr-ic--facilitation{ --ic:var(--ic-facilitation); }
.orr-ic--coproduction{ --ic:var(--ic-coproduction); }
.orr-ic--training{ --ic:var(--ic-training); }

/* Photo credit: any Image widget with a Caption renders it as a small credit line beneath.
   Sohail types the credit into the image's Caption field. Section-specific caption rules
   (logo grids, project heroes) are more specific and override this. */
.elementor-widget-image figure.wp-caption{ margin:0; display:table; }
.elementor-widget-image figcaption.widget-image-caption{ display:block; font-family:var(--ff-eyebrow); font-size:11px; font-weight:500; letter-spacing:0.04em; color:var(--c-muted); margin-top:8px; text-align:left; line-height:1.4; }

/* Animated "whoosh": the ochre highlight draws in on load. Home/HWW hero highlights use a
   background-gradient (animate background-size); the About .hero__title block highlight wipes
   in via scaleX. */
@keyframes orr-hl-draw{ from{ background-size:0% 0.46em; } to{ background-size:100% 0.46em; } }
@keyframes orr-hl-wipe{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero__title .hl::before{ transform:scaleX(0); transform-origin:left center; animation:orr-hl-wipe .85s .4s ease forwards; }
@media (prefers-reduced-motion:reduce){
  .hero__title .hl::before{ transform:scaleX(1); animation:none; }
  #home-hero h1 .hl, #hww-hero h1.elementor-heading-title .hl{ background-size:100% 0.46em !important; animation:none !important; }
}
/* mobile + tablet: hide the yellow box (it looks awkward behind a stacked full-width image);
   the credit then just sits cleanly below the image (see the caption rule below) */
@media(max-width:900px){
  #home-hero .elementor-widget-image::before, #aboutx .elementor-widget-image::before,
  #hero .elementor-widget-image::before, #history .elementor-widget-image::before{ display:none; }
}
/* photo credit sits inside the bottom band of the yellow offset box (dark text on ochre) */
#home-hero .elementor-widget-image figcaption.widget-image-caption,
#aboutx .elementor-widget-image figcaption.widget-image-caption,
#hero .elementor-widget-image figcaption.widget-image-caption,
#history .elementor-widget-image figcaption.widget-image-caption{
  position:absolute; top:100%; left:24px; right:0; margin:0; z-index:2;
  height:24px; display:flex; align-items:center; padding:0 14px; box-sizing:border-box;
  color:var(--c-secondary); font-size:10px; font-weight:600; letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* mobile + tablet: no box, so the credit sits cleanly below the image */
@media(max-width:900px){
  #home-hero .elementor-widget-image figcaption.widget-image-caption,
  #aboutx .elementor-widget-image figcaption.widget-image-caption,
  #hero .elementor-widget-image figcaption.widget-image-caption,
  #history .elementor-widget-image figcaption.widget-image-caption{
    position:static; height:auto; padding:0; margin-top:8px; display:block;
    color:var(--c-muted); font-weight:500; white-space:normal;
  }
}

/* ============================================================================
   Legal / policy pages (Terms, Privacy, Cookie Policy)
   ========================================================================== */
.orr-legal{ max-width:860px; margin-inline:auto; padding:clamp(36px,5vw,72px) var(--pad-x-right) clamp(64px,8vw,120px) var(--pad-x-left); }
.orr-legal__title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(40px,6vw,80px); line-height:1; letter-spacing:-0.025em; color:var(--c-primary); margin:0 0 24px; font-variation-settings:"opsz" 144; }
.orr-legal__updated{ font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-muted); margin:0 0 6px; }
.orr-legal__note{ font-family:var(--ff-eyebrow); font-size:12px; color:var(--c-accent); margin:0 0 clamp(32px,4vw,48px); }
.orr-legal h2{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(22px,2.4vw,30px); line-height:1.15; letter-spacing:-0.01em; color:var(--c-primary); margin:clamp(32px,4vw,48px) 0 12px; }
.orr-legal p{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--c-secondary); margin:0 0 16px; }
.orr-legal ul{ margin:0 0 16px; padding-left:22px; }
.orr-legal li{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--c-secondary); margin:0 0 8px; }
.orr-legal a{ color:var(--c-accent); text-decoration:underline; text-underline-offset:2px; }
.orr-legal strong{ color:var(--c-primary); font-weight:600; }

/* ============================================================================
   Cookie notice
   ========================================================================== */
.orr-cookie{ position:fixed; left:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:9000;
  max-width:460px; margin-inline:auto; background:var(--c-secondary); color:var(--c-lighter);
  border-radius:6px; box-shadow:0 16px 40px rgba(38,30,23,0.28); padding:20px 22px;
  display:flex; flex-direction:column; gap:14px; }
.orr-cookie[hidden]{ display:none; }
.orr-cookie__text{ font-family:var(--ff-body); font-size:15px; line-height:1.55; color:rgba(224,218,207,0.9); margin:0; }
.orr-cookie__text a{ color:var(--c-ochre); text-decoration:underline; text-underline-offset:2px; }
.orr-cookie__btn{ align-self:flex-start; background:var(--c-ochre); color:var(--c-secondary); border:none; border-radius:2px;
  font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:11px 24px; cursor:pointer; transition:background .2s ease; }
.orr-cookie__btn:hover{ background:var(--c-white); }