/*
Theme Name: BondForce
Theme URI: https://bondforce.nl
Author: BondForce
Description: Custom theme for BondForce: permanent recruitment for logistics and operations in Brabant & Limburg. Includes the Home, About, Candidates, Clients, Open roles and Contact pages, a vacancy manager and a working contact form. Fonts are hosted locally (no Google requests).
Version: 2.15.34
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: bondforce
*/
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/libre-franklin-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/playfair-display-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/playfair-display-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/playfair-display-latin-900-italic.woff2') format('woff2'); }

:root {
  --navy: #1A3A5C;
  --blue: #2E6DA4;
  --orange: #E8922A;
  --green: #7AB648;
  --light: #F4F8FC;
  --border: #E2EAF3;
  --muted: #52627A;
  --orange-text: #A45A0D;
  --rule: #C9D6E4;
  --text: #0F1F33;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --light: #0d1b2a;
    --border: #1e2f42;
    --muted: #94a3b8;
    --text: #e2eaf3;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 64px; }
body { font-family: 'Libre Franklin', system-ui, sans-serif; color: var(--text); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
.accent-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; height: 5px; }
.accent-bar span:nth-child(1) { background: var(--navy); }
.accent-bar span:nth-child(2) { background: var(--blue); }
.accent-bar span:nth-child(3) { background: var(--orange); }
.accent-bar span:nth-child(4) { background: var(--green); }
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 64px; height: 66px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700;
  color: var(--navy); text-decoration: none; letter-spacing: -0.3px;
}
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 400; transition: color .15s; }
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); font-weight: 500; }
.nav-open-roles {
  background: var(--light); color: var(--navy);
  border: 1px solid var(--border); padding: 7px 16px;
  border-radius: 6px; font-size: 13px; font-weight: 500;
  text-decoration: none; margin-right: -8px;
}
.nav-cta {
  background: var(--navy); color: #fff; border: none;
  padding: 9px 22px; border-radius: 6px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  font-family: 'Libre Franklin', sans-serif; letter-spacing: 0.1px;
}
[data-page="home"] .hero {
  background: var(--navy);
  padding: 100px 64px 72px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  position: relative; overflow: hidden;
}
[data-page="home"] .hero::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(46,109,164,0.18);
}
[data-page="home"] .hero::after {
  content: '';
  position: absolute; bottom: 40px; left: 40%;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(232,146,42,0.08);
}
[data-page="home"] .hero-left { position: relative; z-index: 1; }
[data-page="home"] .hero-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  color: var(--orange); text-transform: uppercase; margin-bottom: 24px;
}
[data-page="home"] .hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 80px; font-weight: 900; line-height: 1.0;
  color: #fff; margin-bottom: 28px; letter-spacing: -1px;
}
[data-page="home"] .hero h1 em { font-style: normal; color: var(--orange); }
[data-page="home"] .hero-sub {
  font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.65);
  margin-bottom: 32px; max-width: 460px; font-weight: 300;
}
[data-page="home"] .hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
[data-page="home"] .pill-dark {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
  font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
}
[data-page="home"] .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
[data-page="home"] .btn-white {
  background: #fff; color: var(--navy); border: none;
  padding: 13px 28px; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
}
[data-page="home"] .btn-outline-white {
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.35);
  padding: 13px 28px; border-radius: 6px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
}
[data-page="home"] .hero-right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 20px;
}
[data-page="home"] .stat-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 24px 28px;
  display: flex; gap: 16px; align-items: flex-start;
}
[data-page="home"] .stat-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; color: var(--orange);
}
[data-page="home"] .stat-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 3px; }
[data-page="home"] .stat-desc { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.5; }
[data-page="home"] .doors {
  display: grid; grid-template-columns: 7fr 5fr;
  min-height: 440px;
}
[data-page="home"] .door {
  position: relative; display: flex; flex-direction: column;
  padding: 64px; text-decoration: none; overflow: hidden;
  transition: background-color .4s ease;
}
[data-page="home"] .door-client { background: #10263D; color: #fff; justify-content: flex-end; }
[data-page="home"] .door-cand { background: var(--orange); color: #1A1209; justify-content: flex-start; }
[data-page="home"] .door-client:hover, [data-page="home"] .door-client:focus-visible { background: #0B1D30; outline: none; }
[data-page="home"] .door-cand:hover, [data-page="home"] .door-cand:focus-visible { background: #DC8420; outline: none; }
[data-page="home"] .door-cand::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(180deg, #10263D 0 18px, transparent 18px 32px);
}
[data-page="home"] .door-tag {
  display: inline-block; align-self: flex-start;
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 4px; margin-bottom: 26px;
}
[data-page="home"] .door-client .door-tag { background: rgba(232,146,42,.16); color: var(--orange); }
[data-page="home"] .door-cand .door-tag { background: rgba(16,38,61,.12); color: #10263D; }
[data-page="home"] .door h3 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  letter-spacing: -.5px; line-height: 1.05; margin-bottom: 20px;
}
[data-page="home"] .door-client h3 { font-size: 56px; max-width: 13ch; }
[data-page="home"] .door-cand h3 { font-size: 44px; max-width: 12ch; color: #10263D; }
[data-page="home"] .door p:not(.bf-d) { font-size: 17px; line-height: 1.7; max-width: 44ch; margin-bottom: 32px; }
[data-page="home"] .door-client p:not(.bf-d) { color: rgba(255,255,255,.7); }
[data-page="home"] .door-cand p:not(.bf-d) { color: rgba(16,38,61,.82); }
[data-page="home"] .door-go {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 16px; font-weight: 600; padding-bottom: 6px;
  border-bottom: 2px solid currentColor; align-self: flex-start;
}
[data-page="home"] .door-client .door-go { color: #fff; }
[data-page="home"] .door-cand .door-go { color: #10263D; }
[data-page="home"] .door-go .arr { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
[data-page="home"] .door:hover .door-go .arr, [data-page="home"] .door:focus-visible .door-go .arr { transform: translateX(8px); }
[data-page="home"] .door-note { margin-top: 22px; font-size: 13px; }
[data-page="home"] .door-client .door-note { color: rgba(255,255,255,0.72); }
[data-page="home"] .door-cand .door-note { color: rgba(16,38,61,.6); margin-top: auto; padding-top: 40px; }
[data-page="home"] .door-num {
  position: absolute; font-family: 'Playfair Display', Georgia, serif; font-weight: 900;
  line-height: .8; pointer-events: none; user-select: none;
}
[data-page="home"] .door-client .door-num { top: 40px; right: 48px; font-size: 180px; color: rgba(255,255,255,.04); }
[data-page="home"] .door-cand .door-num { bottom: -14px; right: 28px; font-size: 150px; color: rgba(16,38,61,.08); }
@media (max-width: 900px) {
[data-page="home"] .doors { grid-template-columns: 1fr; }
[data-page="home"] .door { padding: 48px 24px; min-height: 360px; }
[data-page="home"] .door-client h3 { font-size: 40px; }
[data-page="home"] .door-cand h3 { font-size: 36px; }
[data-page="home"] .door-cand::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 10px;
    background: repeating-linear-gradient(90deg, #10263D 0 18px, transparent 18px 32px); }
}
@media (prefers-reduced-motion: reduce) {
[data-page="home"] .door, [data-page="home"] .door-go .arr { transition: none; }
}
[data-page="home"] .why { padding: 96px 64px; background: #fff; }
[data-page="home"] .why-label { font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 56px; }
[data-page="home"] .why-statements { display: flex; flex-direction: column; gap: 0; }
[data-page="home"] .why-statement {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
[data-page="home"] .why-statement:first-child { border-top: 1px solid var(--border); }
[data-page="home"] .why-num {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 1px;
}
[data-page="home"] .why-statement p:not(.bf-d) {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  max-width: 760px;
}
[data-page="home"] .why-statement:hover p:not(.bf-d) { color: var(--blue); }
[data-page="home"] .why-statement { transition: all .2s; }
[data-page="home"] .why h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); margin-bottom: 56px; max-width: 600px; line-height: 1.2; }
[data-page="home"] .why h2 em { font-style: italic; color: var(--blue); }
[data-page="home"] .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="home"] .why-item { padding: 36px 40px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
[data-page="home"] .why-item:nth-child(2n) { border-right: none; }
[data-page="home"] .why-item:nth-child(3), [data-page="home"] .why-item:nth-child(4) { border-bottom: none; }
[data-page="home"] .why-item-num { font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1px; margin-bottom: 14px; }
[data-page="home"] .why-item h3 { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
[data-page="home"] .why-item p:not(.bf-d) { font-size: 15px; color: var(--muted); line-height: 1.75; }
[data-page="home"] .section-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 16px;
}
[data-page="home"] .approach {
  background: var(--light); padding: 96px 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
[data-page="home"] .approach-text {}
[data-page="home"] .approach-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 700; color: var(--navy);
  line-height: 1.15; margin-bottom: 20px;
}
[data-page="home"] .approach-text h2 em { font-style: italic; color: var(--orange); }
[data-page="home"] .approach-text p:not(.bf-d) { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
[data-page="home"] .approach-text a { font-size: 14px; color: var(--blue); font-weight: 500; text-decoration: none; }
[data-page="home"] .approach-cards { display: flex; flex-direction: column; gap: 16px; }
[data-page="home"] .approach-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 24px; display: flex; gap: 16px;
}
[data-page="home"] .approach-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
[data-page="home"] .approach-card-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
[data-page="home"] .approach-card-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
[data-page="home"] .founders { padding: 96px 64px; background: #fff; }
[data-page="home"] .founders-header { margin-bottom: 56px; }
[data-page="home"] .founders-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.15; }
[data-page="home"] .founders-header p:not(.bf-d) { font-size: 15px; color: var(--muted); }
[data-page="home"] .founders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 24px; }
[data-page="home"] .founders-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: end; }
[data-page="home"] .founders-wrap .founders-header { margin-bottom: 0; align-self: center; }
[data-page="home"] .founder-card {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--navy); cursor: pointer;
  outline: none; isolation: isolate;
}
[data-page="home"] .founder-card:focus-visible { box-shadow: 0 0 0 3px var(--orange); }
[data-page="home"] .founder-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
[data-page="home"] .founder-card:nth-child(1) .founder-photo { object-position: 48% 25%; }
[data-page="home"] .founder-card:nth-child(2) .founder-photo { object-position: 50% 20%; }
[data-page="home"] .founder-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  background: linear-gradient(to top, rgba(15,31,51,.88) 0%, rgba(15,31,51,.35) 32%, rgba(15,31,51,0) 55%);
}
[data-page="home"] .founder-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(26,58,92,.72); opacity: 0; transition: opacity .5s ease;
}
[data-page="home"] .founder-name { font-family: 'Playfair Display', Georgia, serif; font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 4px; }
[data-page="home"] .founder-role { font-size: 13px; color: var(--orange); font-weight: 600; letter-spacing: .3px; }
[data-page="home"] .founder-bio {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.92);
  max-height: 0; opacity: 0; transform: translateY(12px); overflow: hidden;
  transition: max-height .6s ease, opacity .45s ease .05s, transform .5s ease, margin .5s ease;
}
[data-page="home"] .founder-hint {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 19px; line-height: 32px; text-align: center;
  transition: transform .4s ease, background .3s ease;
}
[data-page="home"] .founder-card:hover .founder-photo, [data-page="home"] .founder-card:focus-within .founder-photo, [data-page="home"] .founder-card.open .founder-photo { transform: scale(1.05); filter: saturate(.85); }
[data-page="home"] .founder-card:hover .founder-overlay::before, [data-page="home"] .founder-card:focus-within .founder-overlay::before, [data-page="home"] .founder-card.open .founder-overlay::before { opacity: 1; }
[data-page="home"] .founder-card:hover .founder-bio, [data-page="home"] .founder-card:focus-within .founder-bio, [data-page="home"] .founder-card.open .founder-bio { max-height: 320px; opacity: 1; transform: none; margin-top: 16px; }
[data-page="home"] .founder-card:hover .founder-hint, [data-page="home"] .founder-card:focus-within .founder-hint, [data-page="home"] .founder-card.open .founder-hint { transform: rotate(45deg); background: var(--orange); }
@media (max-width: 1000px) {
[data-page="home"] .founders-wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
[data-page="home"] .founders { padding: 64px 20px; }
[data-page="home"] .founders-grid { grid-template-columns: 1fr; gap: 16px; }
[data-page="home"] .founder-card { aspect-ratio: 1 / 1; }
[data-page="home"] .founder-name { font-size: 20px; }
[data-page="home"] .founder-bio { font-size: 14px; }
[data-page="home"] .founders-header h2 { font-size: 36px; }
[data-page="home"] .founder-overlay { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
[data-page="home"] .founder-photo, [data-page="home"] .founder-bio, [data-page="home"] .founder-overlay::before, [data-page="home"] .founder-hint { transition: none; }
}
[data-page="home"] .founders-cta { margin-top: 32px; }
[data-page="home"] .founders-cta a { font-size: 14px; color: var(--blue); font-weight: 500; text-decoration: none; }
[data-page="home"] .roles { padding: 96px 64px; background: var(--light); }
[data-page="home"] .roles-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
[data-page="home"] .roles-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); line-height: 1.1; }
[data-page="home"] .roles-header a { font-size: 14px; color: var(--blue); font-weight: 500; text-decoration: none; white-space: nowrap; margin-bottom: 8px; }
[data-page="home"] .roles-list { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="home"] .role-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  cursor: pointer;
}
[data-page="home"] .role-row:last-child { border-bottom: none; }
[data-page="home"] .role-row:hover { background: var(--light); }
[data-page="home"] .role-title { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
[data-page="home"] .role-meta { font-size: 13px; color: var(--muted); }
[data-page="home"] .role-badge {
  font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
[data-page="home"] .badge-active { background: #EAF4EA; color: #2E7D32; }
[data-page="home"] .badge-open { background: #EBF3FA; color: var(--blue); }
[data-page="home"] .cta-band {
  background: var(--navy); padding: 96px 64px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px;
  position: relative; overflow: hidden;
}
[data-page="home"] .cta-band::before {
  content: ''; position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(46,109,164,0.2);
}
[data-page="home"] .cta-band h2 {
  font-family: 'Playfair Display', serif;
  font-size: 64px; font-weight: 900; color: #fff;
  position: relative; z-index: 1; line-height: 1.05;
}
[data-page="home"] .cta-band p:not(.bf-d) {
  font-size: 17px; color: rgba(255,255,255,0.6);
  max-width: 480px; line-height: 1.75;
  position: relative; z-index: 1;
}
[data-page="home"] .cta-band .btn-white {
  position: relative; z-index: 1;
  background: #fff; color: var(--navy); border: none;
  padding: 15px 36px; border-radius: 6px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
}
[data-page="home"] .cta-band .cta-email {
  font-size: 14px; color: rgba(255,255,255,0.72);
  position: relative; z-index: 1;
}
footer {
  background: #0D1E30; padding: 48px 64px 40px;
}
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 32px;
}
.footer-brand { }
.footer-logo {
  font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
  color: #fff; margin-bottom: 12px; display: block;
}
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 16px; }
.footer-contact { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; }
.footer-col h4 { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.72); text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.72); }
.footer-kvk { font-size: 12px; color: rgba(255,255,255,0.72); }
@media (prefers-reduced-motion: no-preference) {
[data-page="home"] .hero-left { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-page="home"] .hero-right { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
[data-page="home"] .strong-line {
  padding: 96px 64px;
  background: var(--navy);
  text-align: center;
  position: relative;
  overflow: hidden;
}
[data-page="home"] .strong-line::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(46,109,164,0.15);
}
[data-page="home"] .strong-line::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(232,146,42,0.1);
}
[data-page="home"] .strong-line-text {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
[data-page="home"] .strong-line-text em {
  font-style: italic;
  color: var(--orange);
}
.nav-toggle { display: none; }
.mobile-menu { display: none; }
@media (max-width: 960px) {
nav { padding: 0 32px; height: 60px; }
.nav-links, .nav-cta { display: none; }
.nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -10px; padding: 10px;
    background: none; border: 0; cursor: pointer;
  }
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(60px + 5px + env(safe-area-inset-top, 0px)); z-index: 99;
    background: #fff; padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
.mobile-menu a {
    font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700;
    color: var(--navy); text-decoration: none; padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
.mobile-menu a.active { color: var(--orange); }
.mobile-menu .mm-cta {
    margin-top: 28px; border: 0; text-align: center; border-radius: 8px;
    background: var(--navy); color: #fff; font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 16px; font-weight: 600; padding: 16px;
  }
.mm-mail { margin-top: 14px; text-align: center; font-size: 14px; color: var(--muted); }
body.menu-open { overflow: hidden; }
}
@media (min-width: 761px) and (max-width: 1023px) {
[data-page="home"] .hero { padding: 72px 40px 64px; gap: 40px; }
[data-page="home"] .hero h1 { font-size: 64px; }
[data-page="home"] .hero-sub { font-size: 17px; }
[data-page="home"] .why, [data-page="home"] .roles, [data-page="home"] .founders { padding-left: 40px; padding-right: 40px; }
[data-page="home"] .approach { padding: 80px 40px; gap: 48px; }
[data-page="home"] .why h2, [data-page="home"] .approach-text h2, [data-page="home"] .founders-header h2, [data-page="home"] .roles-header h2 { font-size: 42px; }
[data-page="home"] .strong-line, [data-page="home"] .cta-band { padding-left: 40px; padding-right: 40px; }
footer { padding-left: 40px; padding-right: 40px; }
.footer-top { grid-template-columns: 1fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 900px) {
[data-page="home"] .door { padding: 56px 40px; }
}
@media (max-width: 760px) {
nav { padding: 0 20px; height: 60px; }
.nav-links, .nav-cta { display: none; }
.nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -10px; padding: 10px;
    background: none; border: 0; cursor: pointer;
  }
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(60px + 5px + env(safe-area-inset-top, 0px)); z-index: 99;
    background: #fff; padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
.mobile-menu a {
    font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700;
    color: var(--navy); text-decoration: none; padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
.mobile-menu a.active { color: var(--orange); }
.mobile-menu .mm-cta {
    margin-top: 28px; border: 0; text-align: center; border-radius: 8px;
    background: var(--navy); color: #fff; font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 16px; font-weight: 600; padding: 16px;
  }
.mm-mail { margin-top: 14px; text-align: center; font-size: 14px; color: var(--muted); }
body.menu-open { overflow: hidden; }
[data-page="home"] .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 44px 20px 40px; }
[data-page="home"] .hero-left, [data-page="home"] .hero-right { min-width: 0; }
[data-page="home"] .hero::before { width: 260px; height: 260px; top: -90px; right: -110px; }
[data-page="home"] .hero::after { display: none; }
[data-page="home"] .hero-eyebrow { font-size: 11px; letter-spacing: 1px; margin-bottom: 18px; }
[data-page="home"] .hero h1 { font-size: 54px; margin-bottom: 18px; }
[data-page="home"] .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
[data-page="home"] .hero-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 28px; padding: 0 20px; scrollbar-width: none; }
[data-page="home"] .hero-pills::-webkit-scrollbar { display: none; }
[data-page="home"] .pill-dark { flex-shrink: 0; }
[data-page="home"] .hero-actions { flex-direction: column; }
[data-page="home"] .hero-actions button { width: 100%; padding: 15px; }
[data-page="home"] .hero-right { gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
[data-page="home"] .stat-card { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; padding: 16px 0; align-items: center; }
[data-page="home"] .stat-desc { display: none; }
[data-page="home"] .stat-title { margin: 0; }
[data-page="home"] .why, [data-page="home"] .roles { padding: 64px 20px; }
[data-page="home"] .why h2, [data-page="home"] .approach-text h2, [data-page="home"] .roles-header h2 { font-size: 34px; margin-bottom: 28px; }
[data-page="home"] .why-grid { grid-template-columns: 1fr; }
[data-page="home"] .why-item { padding: 26px 22px; border-right: none; }
[data-page="home"] .why-item:nth-child(3) { border-bottom: 1px solid var(--border); }
[data-page="home"] .approach { grid-template-columns: 1fr; gap: 32px; padding: 64px 20px; }
[data-page="home"] .roles-header { flex-direction: column; align-items: flex-start; gap: 12px; }
[data-page="home"] .role-row { padding: 18px 20px; gap: 12px; }
[data-page="home"] .strong-line { padding: 64px 20px; }
[data-page="home"] .strong-line-text { font-size: 32px; }
[data-page="home"] .cta-band { padding: 72px 20px; }
[data-page="home"] .cta-band h2 { font-size: 44px; }
[data-page="home"] .cta-band .btn-white { width: 100%; }
footer { padding: 44px 20px 32px; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* ===== about ===== */
[data-page="about"] .section-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="about"] .page-hero {
  background: var(--navy); padding: 88px 64px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  position: relative; overflow: hidden;
}
[data-page="about"] .page-hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(46,109,164,0.18); }
[data-page="about"] .page-hero::after { content: ''; position: absolute; bottom: -60px; left: 45%; width: 220px; height: 220px; border-radius: 50%; background: rgba(232,146,42,0.08); }
[data-page="about"] .page-hero-left { position: relative; z-index: 1; }
[data-page="about"] .page-hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; margin-bottom: 20px; }
[data-page="about"] .page-hero h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 900; line-height: 1.0; color: #fff; margin-bottom: 24px; letter-spacing: -1px; }
[data-page="about"] .page-hero h1 em { font-style: normal; color: var(--orange); }
[data-page="about"] .page-hero-sub { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 460px; font-weight: 300; }
[data-page="about"] .page-hero-right { position: relative; z-index: 1; }
[data-page="about"] .mission-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 32px; }
[data-page="about"] .mission-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 14px; line-height: 1.3; }
[data-page="about"] .mission-card h3 em { font-style: italic; color: var(--orange); }
[data-page="about"] .mission-card p:not(.bf-d) { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.8; }
[data-page="about"] .how { padding: 96px 64px; background: #fff; }
[data-page="about"] .how h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.15; }
[data-page="about"] .how h2 em { font-style: italic; color: var(--blue); }
[data-page="about"] .how-sub { font-size: 16px; color: var(--muted); margin-bottom: 56px; max-width: 580px; line-height: 1.7; }
[data-page="about"] .how-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="about"] .how-item { padding: 36px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-page="about"] .how-item:nth-child(3n) { border-right: none; }
[data-page="about"] .how-item:nth-child(4), [data-page="about"] .how-item:nth-child(5), [data-page="about"] .how-item:nth-child(6) { border-bottom: none; }
[data-page="about"] .how-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--navy); margin-bottom: 16px; }
[data-page="about"] .how-item h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
[data-page="about"] .how-item p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="about"] .focus { padding: 96px 64px; background: var(--light); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
[data-page="about"] .focus-left {}
[data-page="about"] .focus-left h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-bottom: 16px; }
[data-page="about"] .focus-left h2 em { font-style: italic; color: var(--orange); }
[data-page="about"] .focus-left p:not(.bf-d) { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
[data-page="about"] .focus-left a { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; }
[data-page="about"] .focus-right { display: flex; flex-direction: column; gap: 16px; }
[data-page="about"] .focus-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 24px 28px; border-left: 3px solid var(--navy); }
[data-page="about"] .focus-item:nth-child(2) { border-left-color: var(--blue); }
[data-page="about"] .focus-item:nth-child(3) { border-left-color: var(--orange); }
[data-page="about"] .focus-item h3 { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
[data-page="about"] .focus-item p:not(.bf-d) { font-size: 13px; color: var(--muted); line-height: 1.65; }
[data-page="about"] .founders { padding: 96px 64px; background: #fff; }
[data-page="about"] .founders-header { text-align: center; margin-bottom: 64px; }
[data-page="about"] .founders-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); margin-bottom: 14px; line-height: 1.15; }
[data-page="about"] .founders-header p:not(.bf-d) { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.7; }
[data-page="about"] .founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
[data-page="about"] .founder-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
[data-page="about"] .founder-top { padding: 36px 36px 28px; display: flex; gap: 20px; align-items: flex-start; }
[data-page="about"] .founder-top.henrieta { background: var(--navy); }
[data-page="about"] .founder-top.amrita { background: var(--orange); }
[data-page="about"] .founder-avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #fff; }
[data-page="about"] .founder-avatar img { width: 100%; height: 100%; object-fit: cover; }
[data-page="about"] .founder-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
[data-page="about"] .founder-role { font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 500; margin-bottom: 12px; }
[data-page="about"] .founder-tagline { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.6; font-style: italic; }
[data-page="about"] .founder-body { padding: 28px 36px 32px; }
[data-page="about"] .founder-body p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 14px; }
[data-page="about"] .founder-body p:not(.bf-d):last-child { margin-bottom: 0; }
[data-page="about"] .founder-quote { font-size: 14px; color: var(--navy); font-style: italic; font-weight: 500; padding-left: 16px; border-left: 3px solid var(--orange); margin-top: 20px; line-height: 1.6; }
[data-page="about"] .cta-band { background: var(--navy); padding: 96px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; overflow: hidden; }
[data-page="about"] .cta-band::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(46,109,164,0.2); }
[data-page="about"] .cta-band h2 { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 900; color: #fff; position: relative; z-index: 1; line-height: 1.05; }
[data-page="about"] .cta-band p:not(.bf-d) { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; line-height: 1.75; position: relative; z-index: 1; }
[data-page="about"] .btn-white { position: relative; z-index: 1; background: #fff; color: var(--navy); border: none; padding: 15px 36px; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="about"] .cta-email { font-size: 14px; color: rgba(255,255,255,0.72); position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
[data-page="about"] .page-hero-left { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-page="about"] .page-hero-right { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}
/* ===== candidates ===== */
[data-page="candidates"] .section-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="candidates"] .section-header { margin-bottom: 48px; }
[data-page="candidates"] .section-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-bottom: 12px; }
[data-page="candidates"] .section-header h2 em { font-style: italic; color: var(--orange); }
[data-page="candidates"] .section-header h2 em.blue { color: var(--blue); }
[data-page="candidates"] .section-header p:not(.bf-d) { font-size: 16px; color: var(--muted); max-width: 560px; line-height: 1.7; }
[data-page="candidates"] .hero { background: var(--navy); padding: 88px 64px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
[data-page="candidates"] .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(46,109,164,0.18); }
[data-page="candidates"] .hero::after { content: ''; position: absolute; bottom: -60px; left: 45%; width: 220px; height: 220px; border-radius: 50%; background: rgba(232,146,42,0.08); }
[data-page="candidates"] .hero-left { position: relative; z-index: 1; }
[data-page="candidates"] .hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; margin-bottom: 20px; }
[data-page="candidates"] .hero-left h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 900; line-height: 1.0; color: #fff; margin-bottom: 24px; letter-spacing: -1px; }
[data-page="candidates"] .hero-left h1 em { font-style: normal; color: var(--orange); }
[data-page="candidates"] .hero-sub { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 440px; font-weight: 300; margin-bottom: 32px; }
[data-page="candidates"] .hero-actions { display: flex; gap: 12px; }
[data-page="candidates"] .btn-white { background: #fff; color: var(--navy); border: none; padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="candidates"] .btn-outline-white { background: transparent; color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.35); padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="candidates"] .hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
[data-page="candidates"] .hero-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; }
[data-page="candidates"] .hero-card-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--orange); }
[data-page="candidates"] .hero-card-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
[data-page="candidates"] .hero-card-desc { font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.55; }
[data-page="candidates"] .expect { padding: 96px 64px; background: #fff; }
[data-page="candidates"] .expect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="candidates"] .expect-item { padding: 40px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-page="candidates"] .expect-item:nth-child(2n) { border-right: none; }
[data-page="candidates"] .expect-item:nth-child(3), [data-page="candidates"] .expect-item:nth-child(4) { border-bottom: none; }
[data-page="candidates"] .expect-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--navy); margin-bottom: 18px; }
[data-page="candidates"] .expect-item h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
[data-page="candidates"] .expect-item p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="candidates"] .roles-section { padding: 96px 64px; background: var(--light); }
[data-page="candidates"] .roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
[data-page="candidates"] .role-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 32px; border-top: 3px solid var(--navy); }
[data-page="candidates"] .role-card:nth-child(2) { border-top-color: var(--blue); }
[data-page="candidates"] .role-card:nth-child(3) { border-top-color: var(--orange); }
[data-page="candidates"] .role-card:nth-child(4) { border-top-color: var(--green); }
[data-page="candidates"] .role-card h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
[data-page="candidates"] .role-card p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="candidates"] .process { padding: 96px 64px; background: #fff; }
[data-page="candidates"] .process-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="candidates"] .process-item { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 32px; align-items: center; padding: 32px 40px; border-bottom: 1px solid var(--border); background: #fff; transition: background .15s; }
[data-page="candidates"] .process-item:last-child { border-bottom: none; }
[data-page="candidates"] .process-item:hover { background: var(--light); }
[data-page="candidates"] .process-num { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; flex-shrink: 0; }
[data-page="candidates"] .process-title { font-size: 16px; font-weight: 600; color: var(--navy); text-align: left; }
[data-page="candidates"] .process-desc { font-size: 14px; color: var(--muted); line-height: 1.7; text-align: left; }
[data-page="candidates"] .note { padding: 96px 64px; background: var(--navy); }
[data-page="candidates"] .note-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
[data-page="candidates"] .note-left { display: flex; flex-direction: column; gap: 32px; }
[data-page="candidates"] .note-person { display: flex; align-items: center; gap: 16px; }
[data-page="candidates"] .note-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0; }
[data-page="candidates"] .note-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 2px; }
[data-page="candidates"] .note-role { font-size: 12px; color: rgba(255,255,255,0.72); }
[data-page="candidates"] .note-pullquote { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: #fff; line-height: 1.3; }
[data-page="candidates"] .note-pullquote em { font-style: italic; color: var(--orange); }
[data-page="candidates"] .note-accent { background: rgba(255,255,255,0.07); border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; padding: 18px 22px; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; font-weight: 500; }
[data-page="candidates"] .note-right { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
[data-page="candidates"] .note-right p:not(.bf-d) { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; }
[data-page="candidates"] .note-sig { font-size: 13px; color: rgba(255,255,255,0.72); font-style: italic; margin-top: 8px; }
[data-page="candidates"] .cta-band { background: var(--navy); padding: 96px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.08); }
[data-page="candidates"] .cta-band::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(46,109,164,0.2); }
[data-page="candidates"] .cta-band h2 { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 900; color: #fff; position: relative; z-index: 1; line-height: 1.05; }
[data-page="candidates"] .cta-band p:not(.bf-d) { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; line-height: 1.75; position: relative; z-index: 1; }
[data-page="candidates"] .cta-band .btn-white { position: relative; z-index: 1; }
[data-page="candidates"] .cta-email { font-size: 14px; color: rgba(255,255,255,0.72); position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
[data-page="candidates"] .hero-left { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-page="candidates"] .hero-right { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}
/* ===== clients ===== */
[data-page="clients"] .section-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="clients"] .section-header { margin-bottom: 48px; }
[data-page="clients"] .section-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-bottom: 12px; }
[data-page="clients"] .section-header h2 em { font-style: italic; color: var(--orange); }
[data-page="clients"] .section-header h2 em.blue { color: var(--blue); }
[data-page="clients"] .section-header h2 em.green { color: var(--green); }
[data-page="clients"] .section-header p:not(.bf-d) { font-size: 16px; color: var(--muted); max-width: 560px; line-height: 1.7; }
[data-page="clients"] .hero { background: var(--navy); padding: 88px 64px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
[data-page="clients"] .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(46,109,164,0.18); }
[data-page="clients"] .hero::after { content: ''; position: absolute; bottom: -60px; left: 45%; width: 220px; height: 220px; border-radius: 50%; background: rgba(232,146,42,0.08); }
[data-page="clients"] .hero-left { position: relative; z-index: 1; }
[data-page="clients"] .hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; margin-bottom: 20px; }
[data-page="clients"] .hero-left h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 900; line-height: 1.0; color: #fff; margin-bottom: 24px; letter-spacing: -1px; }
[data-page="clients"] .hero-left h1 em { font-style: normal; color: var(--orange); }
[data-page="clients"] .hero-sub { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 440px; font-weight: 300; margin-bottom: 32px; }
[data-page="clients"] .btn-white { background: #fff; color: var(--navy); border: none; padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="clients"] .btn-outline-white { background: transparent; color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.35); padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="clients"] .hero-actions { display: flex; gap: 12px; }
[data-page="clients"] .hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
[data-page="clients"] .hero-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; }
[data-page="clients"] .hero-card-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--orange); }
[data-page="clients"] .hero-card-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
[data-page="clients"] .hero-card-desc { font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.55; }
[data-page="clients"] .expect { padding: 96px 64px; background: #fff; }
[data-page="clients"] .expect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="clients"] .expect-item { padding: 40px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-page="clients"] .expect-item:nth-child(2n) { border-right: none; }
[data-page="clients"] .expect-item:nth-child(3), [data-page="clients"] .expect-item:nth-child(4) { border-bottom: none; }
[data-page="clients"] .expect-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--navy); margin-bottom: 18px; }
[data-page="clients"] .expect-item h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
[data-page="clients"] .expect-item p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="clients"] .who { padding: 96px 64px; background: var(--light); }
[data-page="clients"] .who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
[data-page="clients"] .who-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 32px; border-top: 3px solid var(--navy); }
[data-page="clients"] .who-card:nth-child(2) { border-top-color: var(--blue); }
[data-page="clients"] .who-card:nth-child(3) { border-top-color: var(--orange); }
[data-page="clients"] .who-card:nth-child(4) { border-top-color: var(--green); }
[data-page="clients"] .who-card h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
[data-page="clients"] .who-card p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="clients"] .people { padding: 96px 64px; background: #fff; }
[data-page="clients"] .people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="clients"] .people-item { padding: 36px 40px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-left: 4px solid transparent; }
[data-page="clients"] .people-item:nth-child(1) { border-left-color: var(--navy); }
[data-page="clients"] .people-item:nth-child(2) { border-left-color: var(--blue); border-right: none; }
[data-page="clients"] .people-item:nth-child(3) { border-left-color: var(--orange); border-bottom: none; }
[data-page="clients"] .people-item:nth-child(4) { border-left-color: var(--green); border-right: none; border-bottom: none; }
[data-page="clients"] .people-item h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
[data-page="clients"] .people-item p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.75; }
[data-page="clients"] .process { padding: 96px 64px; background: var(--light); }
[data-page="clients"] .process-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="clients"] .process-item { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 32px; align-items: center; padding: 32px 40px; border-bottom: 1px solid var(--border); background: #fff; transition: background .15s; }
[data-page="clients"] .process-item:last-child { border-bottom: none; }
[data-page="clients"] .process-item:hover { background: var(--light); }
[data-page="clients"] .process-num { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; flex-shrink: 0; }
[data-page="clients"] .process-title { font-size: 16px; font-weight: 600; color: var(--navy); text-align: left; }
[data-page="clients"] .process-desc { font-size: 14px; color: var(--muted); line-height: 1.7; text-align: left; }
[data-page="clients"] .note { padding: 96px 64px; background: var(--navy); }
[data-page="clients"] .note-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
[data-page="clients"] .note-left { display: flex; flex-direction: column; gap: 32px; }
[data-page="clients"] .note-person { display: flex; align-items: center; gap: 16px; }
[data-page="clients"] .note-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0; }
[data-page="clients"] .note-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 2px; }
[data-page="clients"] .note-role { font-size: 12px; color: rgba(255,255,255,0.72); }
[data-page="clients"] .note-pullquote { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: #fff; line-height: 1.3; }
[data-page="clients"] .note-pullquote em { font-style: italic; color: var(--orange); }
[data-page="clients"] .note-accent { background: rgba(255,255,255,0.07); border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; padding: 18px 22px; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; font-weight: 500; }
[data-page="clients"] .note-right { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
[data-page="clients"] .note-right p:not(.bf-d) { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; }
[data-page="clients"] .note-sig { font-size: 13px; color: rgba(255,255,255,0.72); font-style: italic; margin-top: 8px; }
[data-page="clients"] .cta-band { background: var(--navy); padding: 96px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.08); }
[data-page="clients"] .cta-band::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(46,109,164,0.2); }
[data-page="clients"] .cta-band h2 { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 900; color: #fff; position: relative; z-index: 1; line-height: 1.05; }
[data-page="clients"] .cta-band p:not(.bf-d) { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; line-height: 1.75; position: relative; z-index: 1; }
[data-page="clients"] .cta-band .btn-white { position: relative; z-index: 1; }
[data-page="clients"] .cta-email { font-size: 14px; color: rgba(255,255,255,0.72); position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
[data-page="clients"] .hero-left { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-page="clients"] .hero-right { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}
/* ===== roles ===== */
[data-page="roles"] .section-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="roles"] .hero { background: var(--navy); padding: 88px 64px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
[data-page="roles"] .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(46,109,164,0.18); }
[data-page="roles"] .hero::after { content: ''; position: absolute; bottom: -60px; left: 45%; width: 220px; height: 220px; border-radius: 50%; background: rgba(232,146,42,0.08); }
[data-page="roles"] .hero-left { position: relative; z-index: 1; }
[data-page="roles"] .hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; margin-bottom: 20px; }
[data-page="roles"] .hero-left h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 900; line-height: 1.0; color: #fff; margin-bottom: 24px; letter-spacing: -1px; }
[data-page="roles"] .hero-left h1 em { font-style: normal; color: var(--orange); }
[data-page="roles"] .hero-sub { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 440px; font-weight: 300; margin-bottom: 32px; }
[data-page="roles"] .hero-actions { display: flex; gap: 12px; }
[data-page="roles"] .btn-white { background: #fff; color: var(--navy); border: none; padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="roles"] .btn-outline-white { background: transparent; color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.35); padding: 13px 28px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="roles"] .hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
[data-page="roles"] .hero-stat { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 20px 24px; display: flex; gap: 14px; align-items: center; }
[data-page="roles"] .hero-stat-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--orange); }
[data-page="roles"] .hero-stat-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; }
[data-page="roles"] .hero-stat-desc { font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.5; }
[data-page="roles"] .roles { padding: 96px 64px; background: #fff; }
[data-page="roles"] .roles-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
[data-page="roles"] .roles-header h2 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--navy); line-height: 1.1; }
[data-page="roles"] .roles-header h2 em { font-style: italic; color: var(--orange); }
[data-page="roles"] .roles-count { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
[data-page="roles"] .roles-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-page="roles"] .role-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--border); background: #fff; cursor: pointer; transition: background .15s; text-decoration: none; color: inherit; }
[data-page="roles"] .role-row:last-child { border-bottom: none; }
[data-page="roles"] .role-row:hover { background: var(--light); }
[data-page="roles"] .role-title { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
[data-page="roles"] .role-meta { display: flex; gap: 16px; flex-wrap: wrap; }
[data-page="roles"] .role-meta-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
[data-page="roles"] .role-meta-item i { font-size: 14px; color: var(--blue); }
[data-page="roles"] .role-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
[data-page="roles"] .role-badge { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
[data-page="roles"] .badge-active { background: #EAF4EA; color: #2E7D32; }
[data-page="roles"] .badge-open { background: #EBF3FA; color: var(--blue); }
[data-page="roles"] .role-salary { font-size: 13px; font-weight: 600; color: var(--navy); }
[data-page="roles"] .role-detail { background: var(--light); border: 1px solid var(--border); border-radius: 12px; padding: 40px; margin-top: 32px; display: none; }
[data-page="roles"] .role-detail.open { display: block; }
[data-page="roles"] .role-detail h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
[data-page="roles"] .role-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 28px; }
[data-page="roles"] .detail-block h4 { font-size: 12px; font-weight: 600; color: var(--orange); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
[data-page="roles"] .detail-block ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
[data-page="roles"] .detail-block li { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
[data-page="roles"] .detail-block li::before { content: '→'; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
[data-page="roles"] .detail-cta { display: flex; gap: 12px; margin-top: 8px; }
[data-page="roles"] .btn-primary { background: var(--navy); color: #fff; border: none; padding: 12px 26px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="roles"] .btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 12px 26px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Libre Franklin', sans-serif; }
[data-page="roles"] .not-listed { padding: 96px 64px; background: var(--light); }
[data-page="roles"] .not-listed-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
[data-page="roles"] .not-listed h2 { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-bottom: 16px; }
[data-page="roles"] .not-listed h2 em { font-style: italic; color: var(--orange); }
[data-page="roles"] .not-listed p:not(.bf-d) { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; }
[data-page="roles"] .not-listed-cards { display: flex; flex-direction: column; gap: 14px; }
[data-page="roles"] .not-listed-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
[data-page="roles"] .not-listed-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--navy); }
[data-page="roles"] .not-listed-card h4 { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
[data-page="roles"] .not-listed-card p:not(.bf-d) { font-size: 13px; color: var(--muted); line-height: 1.6; }
[data-page="roles"] .cta-band { background: var(--navy); padding: 96px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.08); }
[data-page="roles"] .cta-band::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(46,109,164,0.2); }
[data-page="roles"] .cta-band h2 { font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 900; color: #fff; position: relative; z-index: 1; line-height: 1.05; }
[data-page="roles"] .cta-band p:not(.bf-d) { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; line-height: 1.75; position: relative; z-index: 1; }
[data-page="roles"] .cta-band .btn-white { position: relative; z-index: 1; }
[data-page="roles"] .cta-email { font-size: 14px; color: rgba(255,255,255,0.72); position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
[data-page="roles"] .hero-left { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-page="roles"] .hero-right { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}
@media (max-width: 640px) {
[data-page="roles"] .hero-actions { flex-direction: column; }
[data-page="roles"] .hero-actions .btn-white, [data-page="roles"] .hero-actions .btn-outline-white { width: 100%; text-align: center; }
[data-page="roles"] .detail-cta { flex-direction: column; }
[data-page="roles"] .detail-cta .btn-primary, [data-page="roles"] .detail-cta .btn-secondary { width: 100%; text-align: center; }
[data-page="roles"] .hero { grid-template-columns: 1fr; padding: 56px 24px; }
[data-page="roles"] .hero-right { display: none; }
[data-page="roles"] .roles, [data-page="roles"] .not-listed, [data-page="roles"] .cta-band { padding-left: 24px; padding-right: 24px; }
[data-page="roles"] .not-listed-inner { grid-template-columns: 1fr; }
[data-page="roles"] .role-row { grid-template-columns: 1fr; gap: 12px; }
[data-page="roles"] .role-right { align-items: flex-start; }
[data-page="roles"] .role-detail-grid { grid-template-columns: 1fr; }
}
/* ===== contact ===== */
[data-page="contact"] .section-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="contact"] .hero { background: var(--navy); padding: 88px 64px 80px; position: relative; overflow: hidden; }
[data-page="contact"] .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(46,109,164,0.18); }
[data-page="contact"] .hero::after { content: ''; position: absolute; bottom: -60px; right: 200px; width: 220px; height: 220px; border-radius: 50%; background: rgba(232,146,42,0.08); }
[data-page="contact"] .hero-inner { position: relative; z-index: 1; max-width: 640px; }
[data-page="contact"] .hero-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--orange); text-transform: uppercase; margin-bottom: 20px; }
[data-page="contact"] .hero h1 { font-family: 'Playfair Display', serif; font-size: 80px; font-weight: 900; line-height: 1.0; color: #fff; letter-spacing: -1px; }
[data-page="contact"] .hero h1 em { font-style: normal; color: var(--orange); }
[data-page="contact"] .contact { padding: 96px 64px; background: #fff; }
[data-page="contact"] .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
[data-page="contact"] .form-side h2 { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
[data-page="contact"] .form-side p:not(.bf-d) { font-size: 15px; color: var(--muted); margin-bottom: 36px; line-height: 1.7; }
[data-page="contact"] .form { display: flex; flex-direction: column; gap: 20px; }
[data-page="contact"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
[data-page="contact"] .form-group { display: flex; flex-direction: column; gap: 6px; }
[data-page="contact"] .form-group label { font-size: 13px; font-weight: 500; color: var(--navy); }
[data-page="contact"] .form-group label span { color: var(--orange); }
[data-page="contact"] .form-group input, [data-page="contact"] .form-group select, [data-page="contact"] .form-group textarea {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 14px; font-size: 14px; color: var(--text);
  font-family: 'Libre Franklin', sans-serif; background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
}
[data-page="contact"] .form-group input:focus, [data-page="contact"] .form-group select:focus, [data-page="contact"] .form-group textarea:focus { outline: none; border-color: var(--blue); }
[data-page="contact"] .form-group textarea { resize: vertical; min-height: 120px; }
[data-page="contact"] .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
[data-page="contact"] .form-privacy { font-size: 12px; color: var(--muted); line-height: 1.6; }
[data-page="contact"] .form-privacy a { color: var(--blue); text-decoration: none; }
[data-page="contact"] .btn-submit { background: var(--navy); color: #fff; border: none; padding: 14px 32px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Libre Franklin', sans-serif; align-self: flex-start; }
[data-page="contact"] .btn-submit:hover { background: #0f2235; }
[data-page="contact"] .info-side { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
[data-page="contact"] .info-block { display: flex; flex-direction: column; gap: 10px; }
[data-page="contact"] .info-block h3 { font-size: 16px; font-weight: 600; color: var(--navy); }
[data-page="contact"] .info-block p:not(.bf-d) { font-size: 14px; color: var(--muted); line-height: 1.7; }
[data-page="contact"] .info-block a { font-size: 14px; color: var(--blue); text-decoration: none; font-weight: 500; }
[data-page="contact"] .info-divider { height: 1px; background: var(--border); }
[data-page="contact"] .founders-contact { display: flex; flex-direction: column; gap: 20px; }
[data-page="contact"] .founder-contact-item { display: flex; gap: 14px; align-items: center; }
[data-page="contact"] .founder-contact-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
[data-page="contact"] .founder-contact-avatar.amrita { background: var(--orange); }
[data-page="contact"] .founder-contact-name { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
[data-page="contact"] .founder-contact-role { font-size: 12px; color: var(--muted); }
[data-page="contact"] .info-card { background: var(--light); border: 1px solid var(--border); border-radius: 10px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; }
[data-page="contact"] .info-card-icon { width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--navy); }
[data-page="contact"] .info-card h4 { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
[data-page="contact"] .info-card p:not(.bf-d) { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
[data-page="contact"] .hero-inner { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@media (max-width: 640px) {
[data-page="contact"] .hero { padding: 56px 24px; }
[data-page="contact"] .hero h1 { font-size: 52px; }
[data-page="contact"] .contact { padding: 56px 24px; }
[data-page="contact"] .contact-inner { grid-template-columns: 1fr; gap: 48px; }
[data-page="contact"] .form-row { grid-template-columns: 1fr; }
[data-page="contact"] .btn-submit { width: 100%; text-align: center; }
}

/* ===== shared additions ===== */

.ico { display: inline-block; vertical-align: -0.125em; }
[data-go] { cursor: pointer; }

/* ===== inner pages: tablet ===== */
@media (min-width: 761px) and (max-width: 1023px) {
  main.page:not([data-page="home"]) > section { padding-left: 40px !important; padding-right: 40px !important; }
  main.page:not([data-page="home"]) h1 { font-size: 56px !important; }
  main.page:not([data-page="home"]) h2 { font-size: 40px !important; }
  main.page:not([data-page="home"]) section * { min-width: 0; overflow-wrap: break-word; }
  [data-page="contact"] .contact-inner { gap: 48px; }
}
/* ===== inner pages: phone ===== */
@media (max-width: 760px) {
  main.page:not([data-page="home"]) > section { padding: 56px 20px !important; }
  main.page:not([data-page="home"]) > section:first-child { padding-top: 44px !important; }
  main.page:not([data-page="home"]) * { grid-template-columns: minmax(0, 1fr) !important; grid-column: auto !important; }
  main.page:not([data-page="home"]) h1 { font-size: 44px !important; line-height: 1.05 !important; }
  main.page:not([data-page="home"]) h2 { font-size: 32px !important; line-height: 1.15 !important; }
  main.page:not([data-page="home"]) section > *, main.page:not([data-page="home"]) section div { max-width: 100% !important; min-width: 0; }
  main.page:not([data-page="home"]) [class*="grid"], main.page:not([data-page="home"]) [class*="cards"] { gap: 16px !important; }
  main.page:not([data-page="home"]) button, main.page:not([data-page="home"]) .btn-submit { max-width: 100%; }
  main.page:not([data-page="home"]) [class*="actions"] { flex-direction: column; align-items: stretch; }
}


/* ===== WordPress additions ===== */
a.btn-white, a.btn-outline-white, a.btn-primary, a.btn-secondary, a.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
}
body.admin-bar nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav { top: 46px; } }
@media (max-width: 760px) { body.admin-bar .mobile-menu:not([hidden]) { top: calc(46px + 60px + 5px); } }
@media (min-width: 761px) and (max-width: 960px) { body.admin-bar .mobile-menu:not([hidden]) { top: calc(46px + 60px + 5px); } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 6px; }
.bf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bf-form-msg { margin-top: 14px; font-size: 14px; font-weight: 500; }
.bf-form-msg.ok { color: #2E7D32; }
.bf-form-msg.err { color: #B3261E; }
.roles-empty { padding: 28px 32px; border-bottom: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 15px; }
.role-row:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* generic pages (privacy policy etc.) */
[data-page="generic"] .entry { max-width: 760px; margin: 0 auto; padding: 80px 24px 96px; }
[data-page="generic"] .entry h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 48px; color: var(--navy); line-height: 1.1; margin-bottom: 32px; }
[data-page="generic"] .entry h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; color: var(--navy); margin: 40px 0 12px; }
[data-page="generic"] .entry h3 { font-size: 18px; color: var(--navy); margin: 28px 0 8px; }
[data-page="generic"] .entry p:not(.bf-d), [data-page="generic"] .entry li { font-size: 16px; line-height: 1.8; color: #334155; margin-bottom: 14px; }
[data-page="generic"] .entry ul, [data-page="generic"] .entry ol { padding-left: 22px; margin-bottom: 16px; }
[data-page="generic"] .entry a { color: var(--blue); }
@media (max-width: 760px) { [data-page="generic"] .entry { padding: 48px 20px 64px; } [data-page="generic"] .entry h1 { font-size: 36px; } }

/* ===== native-block version ===== */
.em-blue em { color: var(--blue); }
[data-page="candidates"] .expect, [data-page="candidates"] .roles-section, [data-page="candidates"] .process { padding: 96px 64px; }
[data-page="contact"] .info-link { display: inline-block; margin-top: 6px; }
.door .bf-link { align-self: flex-start; }
.door-go::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.door-go::after { content: "→"; display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.door:hover .door-go::after, .door:focus-within .door-go::after { transform: translateX(8px); }
.door-go:focus-visible { outline: none; }
.door-client:focus-within { background: #0B1D30; }
.door-cand:focus-within { background: #DC8420; }
.door:focus-within { box-shadow: inset 0 0 0 3px var(--orange); }
.door-cand:focus-within { box-shadow: inset 0 0 0 3px #10263D; }
.door .door-num { margin: 0; }
@media (max-width: 760px) {
  .hero-actions .bf-link, .hero-actions .bf-link > a { width: 100%; }
  main.page [class*="actions"] .bf-link > a, .cta-band .bf-link > a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .door-go::after { transition: none; } }
p.bf-link { display: flex; }

/* ===== moving job titles (all screen sizes) ===== */
.hero-pills.is-marquee {
  display: block; overflow: hidden; margin: 0 0 36px; padding: 0; width: 100%; max-width: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.pills-track { display: flex; gap: 10px; width: max-content; padding: 2px 0; animation: bf-pills 26s linear infinite; }
.pills-track > * { flex-shrink: 0; margin: 0; }
.hero-pills.is-marquee:hover .pills-track, .hero-pills.is-marquee:active .pills-track { animation-play-state: paused; }
@keyframes bf-pills { to { transform: translateX(calc(-50% - 5px)); } }
[data-page="home"] .hero-pills .pill-dark { font-size: 14px; padding: 8px 18px; border-radius: 999px; }
@media (max-width: 760px) {
  .hero-pills.is-marquee { margin: 0 -20px 28px; width: calc(100% + 40px); }
  [data-page="home"] .hero-pills .pill-dark { font-size: 13px; padding: 7px 15px; }
}
@media (prefers-reduced-motion: reduce) { .pills-track { animation: none; } }

/* ===== bigger founder photos on inner pages ===== */
[data-page="about"] .founder-top { align-items: center; gap: 24px; }
[data-page="about"] .founder-avatar { width: 132px; height: 132px; border-width: 3px; }
[data-page="candidates"] .note-avatar, [data-page="clients"] .note-avatar { width: 104px; height: 104px; }
[data-page="contact"] .founder-contact-avatar { width: 72px; height: 72px; }
@media (max-width: 760px) {
  [data-page="about"] .founder-avatar { width: 104px; height: 104px; }
  [data-page="candidates"] .note-avatar, [data-page="clients"] .note-avatar { width: 88px; height: 88px; }
}
@media (max-width: 960px) { nav a.nav-cta { display: none; } }
[data-page="home"] .hero-left, [data-page="home"] .hero-right { min-width: 0; }
[data-page="home"] .hero::after { left: -110px; bottom: -150px; width: 320px; height: 320px; }

/* ===== logo ===== */
nav .logo { gap: 0; }
.logo-img { display: block; height: 46px; width: auto; }
footer .footer-logo { margin-bottom: 16px; }
footer .footer-logo img { display: block; height: 44px; width: auto; }
@media (max-width: 760px) { .logo-img { height: 38px; } footer .footer-logo img { height: 38px; } }

/* ===== single vacancy page ===== */
[data-page="roles"] .role-hero .hero-left h1 { font-size: 60px; }
[data-page="roles"] .role-back { color: inherit; text-decoration: none; }
[data-page="roles"] .role-back:hover { text-decoration: underline; }
[data-page="roles"] .role-single .role-detail { margin-top: 0; }
[data-page="roles"] .detail-h { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
[data-page="roles"] .role-note { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 640px; }
[data-page="roles"] .role-filled { background: var(--light); border: 1px solid var(--border); border-radius: 12px; padding: 40px; }
[data-page="roles"] .role-filled h2 { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 12px; }
[data-page="roles"] .role-filled p { color: var(--muted); margin-bottom: 24px; max-width: 560px; }
[data-page="roles"] .role-page-link { align-self: center; margin-left: 8px; font-size: 14px; color: var(--blue); }
@media (max-width: 760px) {
  [data-page="roles"] .role-hero .hero-left h1 { font-size: 40px; }
  [data-page="roles"] .role-page-link { margin: 8px 0 0; }
}

/* ===== language switch ===== */
.nav-right { display: flex; align-items: center; gap: 20px; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; letter-spacing: .5px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-switch a, .lang-switch span { display: inline-block; padding: 5px 10px; border-radius: 999px; text-decoration: none; line-height: 1; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--navy); background: var(--light); }
.lang-switch .is-current { background: var(--navy); color: #fff; }
.mobile-menu .mm-lang { align-self: center; margin-top: 18px; border-bottom: 1px solid var(--border); font-family: 'Libre Franklin', system-ui, sans-serif; }
.mobile-menu .mm-lang a, .mobile-menu .mm-lang span { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 14px; padding: 8px 16px; border: 0; }
.mobile-menu .mm-lang a { color: var(--muted); }
@media (max-width: 960px) {
  .nav-right { margin-left: auto; margin-right: 12px; gap: 0; }
  .nav-right .lang-switch { font-size: 12px; }
}

/* ===================================================================
   v2.1: new sections
   =================================================================== */
@keyframes bfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask-q, .mat-chip {
  min-height: 44px; padding: 0 20px; border-radius: 999px; font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 15px; font-weight: 500; cursor: pointer; border: 1.5px solid #C9D6E4; background: #fff; color: var(--navy);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ask-q:hover, .mat-chip:hover { border-color: var(--navy); }
.ask-q.is-active, .mat-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.ask-q:focus-visible, .mat-chip:focus-visible, .pro-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* About: Ask the founders */
[data-page="about"] .ask { padding: 96px 64px; background: var(--light); }
[data-page="about"] .ask-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 36px; }
[data-page="about"] .ask-head .section-tag { margin-bottom: 0; }
[data-page="about"] .ask h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 48px; line-height: 1.1; color: var(--navy); }
[data-page="about"] .ask h2 em { color: var(--orange); }
[data-page="about"] .ask-sub { font-size: 17px; line-height: 1.7; color: #4A5568; max-width: 560px; }
[data-page="about"] .ask-qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 36px; max-width: 1100px; }
[data-page="about"] .ask-panels { max-width: 1100px; margin: 0 auto; }
[data-page="about"] .ask-panel { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
[data-page="about"] .ask-panel.is-active { display: grid; animation: bfFade .35s ease; }
[data-page="about"] .ask-card { background: #fff; border-radius: 16px; padding: 36px 40px; display: flex; flex-direction: column; gap: 22px; border-top: 4px solid var(--navy); box-shadow: 0 10px 30px rgba(26,58,92,.06); }
[data-page="about"] .ask-a { border-top-color: var(--orange); }
[data-page="about"] .ask-quote { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.5; color: var(--navy); }
[data-page="about"] .ask-who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
[data-page="about"] .ask-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--navy); flex-shrink: 0; }
[data-page="about"] .ask-a .ask-avatar { box-shadow: 0 0 0 2px var(--orange); }
[data-page="about"] .ask-n { font-size: 15px; font-weight: 600; color: var(--text, #0F1F33); }
[data-page="about"] .ask-r { font-size: 13px; color: var(--muted); }

/* Candidates: What matters most */
[data-page="candidates"] .matters { padding: 96px 64px; background: #fff; }
[data-page="candidates"] .mat-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
[data-page="candidates"] .mat-left { display: flex; flex-direction: column; gap: 16px; }
[data-page="candidates"] .mat-left .section-tag { margin-bottom: 0; align-self: flex-start; }
[data-page="candidates"] .matters h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 48px; line-height: 1.1; color: var(--navy); }
[data-page="candidates"] .matters h2 em { color: var(--blue); }
[data-page="candidates"] .mat-sub { font-size: 17px; line-height: 1.7; color: #4A5568; margin-bottom: 8px; }
[data-page="candidates"] .mat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
[data-page="candidates"] .mat-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 48px 48px 40px; box-shadow: 0 24px 60px rgba(26,58,92,.10); min-height: 360px; display: flex; flex-direction: column; }
[data-page="candidates"] .mat-panel { display: none; flex-direction: column; gap: 16px; }
[data-page="candidates"] .mat-panel.is-active { display: flex; animation: bfFade .35s ease; }
[data-page="candidates"] .mat-num { position: absolute; right: 28px; top: -18px; font-family: 'Playfair Display', Georgia, serif; font-size: 180px; font-weight: 700; line-height: 1; color: #EEF3F9; pointer-events: none; user-select: none; }
[data-page="candidates"] .mat-label { position: relative; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--navy); background: #FDEBD3; padding: 6px 12px; border-radius: 999px; }
[data-page="candidates"] .mat-panel h3 { position: relative; font-family: 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.2; color: var(--navy); }
[data-page="candidates"] .mat-text { position: relative; font-size: 17px; line-height: 1.75; color: #334155; }
[data-page="candidates"] .mat-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; }
[data-page="candidates"] .mat-card .mat-foot { margin-top: 28px; }
[data-page="candidates"] .mat-free { font-size: 14px; color: var(--muted); }
[data-page="candidates"] .mat-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
[data-page="candidates"] .mat-cta:hover { background: #10263D; }

/* Clients: candidate profile */
[data-page="clients"] .profile { padding: 104px 64px; background: #10263D; color: #fff; overflow: hidden; }
[data-page="clients"] .pro-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
[data-page="clients"] .pro-left { display: flex; flex-direction: column; gap: 20px; }
[data-page="clients"] .pro-left .section-tag { color: #F2B162; margin-bottom: 0; align-self: flex-start; }
[data-page="clients"] .profile h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 48px; line-height: 1.1; color: #fff; }
[data-page="clients"] .profile h2 em { color: var(--orange); }
[data-page="clients"] .pro-sub { font-size: 17px; line-height: 1.75; color: #C9D6E4; }
[data-page="clients"] .pro-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
[data-page="clients"] .pro-li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.5; color: #fff; }
[data-page="clients"] .pro-li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 7px; border-left: 2.5px solid #7AB648; border-bottom: 2.5px solid #7AB648; transform: rotate(-45deg); }
[data-page="clients"] .pro-cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; margin-top: 8px; border-radius: 8px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; }
[data-page="clients"] .pro-cta:hover { background: #FDEBD3; }
[data-page="clients"] .pro-card { background: #fff; color: #0F1F33; border-radius: 16px; padding: 30px 34px; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: rotate(-0.8deg); display: flex; flex-direction: column; gap: 18px; }
[data-page="clients"] .pro-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
[data-page="clients"] .pro-av { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; flex-shrink: 0; }
[data-page="clients"] .pro-ttl { flex: 1; min-width: 180px; }
[data-page="clients"] .pro-kicker { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B8650F; }
[data-page="clients"] .pro-title { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 2px; }
[data-page="clients"] .pro-ex { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px dashed #B9C6D4; padding: 5px 10px; border-radius: 999px; }
[data-page="clients"] .pro-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-page="clients"] .pro-fact { background: var(--light); border-radius: 8px; padding: 9px 12px; }
[data-page="clients"] .pro-fl { font-size: 10.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
[data-page="clients"] .pro-fv { font-size: 13.5px; font-weight: 600; color: #0F1F33; margin-top: 2px; }
[data-page="clients"] .pro-h { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
[data-page="clients"] .pro-p { font-size: 14px; line-height: 1.6; color: #334155; }
[data-page="clients"] .pro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-page="clients"] .pro-chip { font-size: 12.5px; font-weight: 500; color: var(--navy); background: #EEF3F9; padding: 5px 10px; border-radius: 999px; }
[data-page="clients"] .pro-more { display: none; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px dashed #D5DEE8; }
[data-page="clients"] .pro-card.is-open .pro-more { display: flex; animation: bfFade .35s ease; }
[data-page="clients"] .pro-exp { display: flex; flex-direction: column; gap: 6px; }
[data-page="clients"] .pro-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: baseline; }
[data-page="clients"] .pro-yr { font-size: 12.5px; font-weight: 600; color: var(--muted); }
[data-page="clients"] .pro-job { font-size: 14px; color: #0F1F33; }
[data-page="clients"] .pro-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
[data-page="clients"] .pro-disc { background: #FFF6EA; border-radius: 8px; padding: 12px 14px; }
[data-page="clients"] .pro-dh { font-size: 12.5px; font-weight: 700; color: #8A4B0B; margin-bottom: 4px; }
[data-page="clients"] .pro-dp { font-size: 13.5px; line-height: 1.55; color: #5A3A12; }
[data-page="clients"] .pro-toggle { align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
[data-page="clients"] .pro-toggle:hover { background: var(--light); }
[data-page="clients"] .pro-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
[data-page="clients"] .pro-fimg { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
[data-page="clients"] .pro-by { font-size: 13px; color: #334155; }
[data-page="clients"] .pro-fic { margin-left: auto; font-size: 12px; color: var(--muted); }

@media (max-width: 1023px) {
  [data-page="about"] .ask, [data-page="candidates"] .matters, [data-page="clients"] .profile { padding-left: 40px; padding-right: 40px; }
  [data-page="candidates"] .mat-grid, [data-page="clients"] .pro-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  [data-page="clients"] .pro-card { transform: none; }
}
@media (max-width: 760px) {
  [data-page="about"] .ask, [data-page="candidates"] .matters, [data-page="clients"] .profile { padding: 64px 20px !important; }
  [data-page="about"] .ask h2, [data-page="candidates"] .matters h2, [data-page="clients"] .profile h2 { font-size: 34px !important; }
  [data-page="about"] .ask-qs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 28px; padding: 0 20px 6px; scrollbar-width: none; }
  [data-page="about"] .ask-qs::-webkit-scrollbar { display: none; }
  [data-page="about"] .ask-q { flex-shrink: 0; }
  [data-page="about"] .ask-panel.is-active { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  [data-page="about"] .ask-card { padding: 28px 24px; }
  [data-page="about"] .ask-quote { font-size: 19px; }
  [data-page="candidates"] .mat-card { padding: 32px 24px 28px; min-height: 0; }
  [data-page="candidates"] .mat-num { font-size: 130px; }
  [data-page="candidates"] .mat-panel h3 { font-size: 25px; }
  [data-page="clients"] .pro-card { padding: 24px 20px; }
  main.page[data-page="clients"] .profile .pro-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-page="clients"] .pro-two { grid-template-columns: minmax(0, 1fr) !important; }
  [data-page="clients"] .pro-fic { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ask-panel.is-active, .mat-panel.is-active, .pro-card.is-open .pro-more { animation: none !important; } }

/* Phone: keep the homepage hero short */
@media (max-width: 760px) {
  [data-page="home"] .hero-sub { display: none; }
  [data-page="home"] .hero h1 { margin-bottom: 24px; }
}

/* ===== Phone: one main button, the second action as a light text link ===== */
@media (max-width: 760px) {
  main.page .hero-actions { gap: 4px !important; }
  main.page .hero-actions .bf-link:has(> .btn-outline-white) { justify-content: center; }
  main.page .hero-actions > a.btn-outline-white, main.page .hero-actions .bf-link > a.btn-outline-white {
    align-self: center;
    width: auto !important; min-height: 44px; padding: 10px 12px; border: 0 !important; background: none !important;
    color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  }
  main.page .hero-actions > a.btn-outline-white::after, main.page .hero-actions .bf-link > a.btn-outline-white::after { content: "\00a0→"; }
  [data-page="roles"] .detail-cta { gap: 2px !important; align-items: stretch; }
  [data-page="roles"] .detail-cta .btn-secondary {
    width: auto !important; align-self: center; min-height: 44px; padding: 10px 12px !important; border: 0 !important; background: none !important;
    color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  }
  [data-page="roles"] .detail-cta .btn-secondary::after { content: "\00a0→"; }
  [data-page="roles"] .detail-cta .role-page-link { align-self: center; margin: 0 !important; padding: 8px 12px; font-size: 13px; }
}

/* Phone: calmer homepage hero */
@media (max-width: 760px) {
  [data-page="home"] .hero-right { display: none !important; }
  [data-page="home"] .hero { padding-bottom: 48px !important; }
  [data-page="home"] .hero-eyebrow { font-size: 10.5px !important; letter-spacing: .8px !important; line-height: 1.7; }
  main.page .hero-actions > a.btn-outline-white::after, main.page .hero-actions .bf-link > a.btn-outline-white::after,
  [data-page="roles"] .detail-cta .btn-secondary::after { display: inline-block; text-decoration: none; margin-left: 2px; }
}
@media (max-width: 760px) {
  main.page .hero-actions > a.btn-outline-white, main.page .hero-actions .bf-link > a.btn-outline-white,
  [data-page="roles"] .detail-cta .btn-secondary { text-decoration: none !important; }
  main.page .hero-actions > a.btn-outline-white::after, main.page .hero-actions .bf-link > a.btn-outline-white::after,
  [data-page="roles"] .detail-cta .btn-secondary::after { content: "→"; margin-left: 8px; transition: transform .25s ease; }
  main.page .hero-actions > a.btn-outline-white:active::after, [data-page="roles"] .detail-cta .btn-secondary:active::after { transform: translateX(4px); }
}

/* ===== v2.2: centred heroes for the inner pages ===== */
main.page .c-hero { position: relative; overflow: hidden; background: var(--navy); padding: 112px 64px 104px; text-align: center; }
main.page .c-hero::before { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: #23497A; }
main.page .c-hero::after { content: ""; position: absolute; left: -90px; bottom: -140px; width: 300px; height: 300px; border-radius: 50%; background: #20436E; }
main.page .c-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
main.page .c-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #F2B162; }
main.page .c-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 68px; line-height: 1.05; font-weight: 700; color: #fff; letter-spacing: -.5px; margin: 0; }
main.page .c-hero h1 em { color: var(--orange); }
main.page .c-sub { max-width: 640px; font-size: 18px; line-height: 1.7; color: #C9D6E4; }
main.page .c-hero .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
main.page .c-hero .btn-white { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 8px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s ease; }
main.page .c-hero .btn-white:hover { background: #FDEBD3; }
@media (min-width: 761px) and (max-width: 1023px) {
  main.page:not([data-page="home"]) > section.c-hero { padding: 88px 40px 80px !important; }
  main.page .c-hero h1 { font-size: 56px !important; }
}
@media (max-width: 760px) {
  main.page:not([data-page="home"]) > section.c-hero { padding: 64px 20px 56px !important; }
  main.page .c-hero h1 { font-size: 40px !important; }
  main.page .c-sub { font-size: 16px; }
  main.page .c-eyebrow { font-size: 10.5px; letter-spacing: 1.2px; }
  main.page .c-hero::before { width: 260px; height: 260px; top: -110px; right: -110px; }
  main.page .c-hero::after { display: none; }
  main.page .c-hero .hero-actions { width: 100%; }
  main.page .c-hero .btn-white { width: 100%; }
}

/* Phone: bigger homepage headline */
@media (max-width: 760px) {
  [data-page="home"] .hero h1 { font-size: clamp(54px, 17.5vw, 76px) !important; line-height: 1 !important; letter-spacing: -1px; }
}

/* Open roles and Contact: same navy hero, a little shorter */
@media (min-width: 1024px) {
  main.page:is([data-page="roles"], [data-page="contact"]) > section.c-hero { padding-top: 88px; padding-bottom: 80px; }
}

/* ===== v2.4.3: highlighted word in section headings = brand blue, not italic ===== */
main.page section:where(:not(.hero):not(.c-hero):not(.e-hero):not(.l-hero):not(.profile):not(.cta-band):not(.note):not(.doors)) h2 em,
main.page section:where(:not(.hero):not(.c-hero):not(.e-hero):not(.l-hero):not(.profile):not(.cta-band):not(.note):not(.doors)) h3 em { font-style: normal !important; color: var(--blue) !important; }
/* no highlight here */
main.page[data-page="clients"] section.people h2 em,
main.page[data-page="home"] section.why h2 em { color: inherit !important; font-style: normal !important; }

/* ===== v2.3: founders photo in the About hero ===== */
main.page .c-hero .c-photo { display: block; width: 100%; max-width: 980px; height: 400px; object-fit: cover; object-position: 50% 30%; border-radius: 18px; margin: 28px auto 0; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
@media (max-width: 1023px) { main.page .c-hero .c-photo { height: 320px; } }
@media (max-width: 760px) { main.page .c-hero .c-photo { height: 240px; border-radius: 14px; margin-top: 20px; } }


/* ===== v2.4: editorial heroes (Candidates, Clients, Open roles) ===== */
main.page .e-hero { background: var(--navy); padding: 96px 64px 64px; }
main.page .e-inner { max-width: 1200px; margin: 0 auto; }
main.page .e-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #F2B162; margin-bottom: 22px; }
main.page .e-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 76px; line-height: 1.02; font-weight: 700; color: #fff; letter-spacing: -1px; max-width: 940px; margin: 0; }
main.page .e-hero h1 em { color: var(--orange); }
main.page .e-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
main.page .e-row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
main.page .e-sub { font-size: 17px; line-height: 1.7; color: #C9D6E4; max-width: 520px; margin: 0; }
main.page .e-hero .hero-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 0; }
main.page .e-hero .btn-white { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 8px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; }
main.page .e-hero .btn-white:hover { background: #FDEBD3; }
main.page .e-steps { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; }
main.page .e-step { display: flex; align-items: center; gap: 10px; }
main.page .e-step:not(:last-child)::after { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,.3); margin-left: 4px; }
main.page .e-num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--orange); color: #F2B162; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0; flex-shrink: 0; }
main.page .e-txt { font-size: 15px; color: #fff; margin: 0; white-space: nowrap; }

/* ===== v2.4: light compact hero (Contact) ===== */
main.page .l-hero { background: var(--light); border-bottom: 1px solid var(--border); padding: 72px 64px 52px; }
main.page .l-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
main.page .l-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #B8650F; margin-bottom: 12px; }
main.page .l-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 56px; line-height: 1.08; color: var(--navy); margin: 0; }
main.page .l-hero h1 em { color: var(--orange); }
main.page .l-hero .bf-link { margin: 0; }
main.page .l-mail { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--navy); text-decoration: none; min-height: 44px; }
main.page .l-mail::before { content: ""; width: 42px; height: 42px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231A3A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E") center / 20px no-repeat; border: 1px solid var(--border); flex-shrink: 0; }
main.page .l-mail:hover { color: var(--blue); }

@media (min-width: 761px) and (max-width: 1023px) {
  main.page:not([data-page="home"]) > section.e-hero { padding: 80px 40px 56px !important; }
  main.page .e-hero h1 { font-size: 58px !important; }
  main.page .e-row { grid-template-columns: minmax(0, 1fr) !important; gap: 24px; }
  main.page .e-steps, main.page .e-hero .hero-actions { justify-content: flex-start; }
  main.page:not([data-page="home"]) > section.l-hero { padding: 56px 40px 44px !important; }
}
@media (max-width: 760px) {
  main.page:not([data-page="home"]) > section.e-hero { padding: 56px 20px 44px !important; }
  main.page .e-hero h1 { font-size: 44px !important; }
  main.page .e-row { gap: 24px; margin-top: 32px; padding-top: 22px; }
  main.page .e-steps { flex-direction: column; align-items: flex-start; gap: 12px; }
  main.page .e-step:not(:last-child)::after { display: none; }
  main.page .e-txt { white-space: normal; }
  main.page .e-hero .hero-actions { justify-content: stretch; }
  main.page .e-hero .btn-white { width: 100%; }
  main.page:not([data-page="home"]) > section.l-hero { padding: 44px 20px 32px !important; }
  main.page .l-hero h1 { font-size: 40px !important; }
}
main.page .e-row:has(.e-steps) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
main.page .e-steps { gap: 12px; }
main.page .e-step:not(:last-child)::after { width: 22px; }
@media (max-width: 1023px) { main.page .e-row:has(.e-steps) { grid-template-columns: minmax(0, 1fr) !important; } }

/* ===== v2.4.2: smaller founders photo that overlaps into the next section ===== */
main.page .c-hero:has(.c-photo) { overflow-x: clip; overflow-y: visible; padding-bottom: 0 !important; }
main.page .c-hero:has(.c-photo)::after { display: none; }
main.page .c-hero .c-photo { position: relative; z-index: 2; max-width: 760px; height: 340px; margin: 32px auto -130px; }
main.page .c-hero:has(.c-photo) + section { padding-top: calc(96px + 130px) !important; }
@media (min-width: 761px) and (max-width: 1023px) {
  main.page .c-hero .c-photo { max-width: 640px; height: 290px; margin-bottom: -110px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(80px + 110px) !important; }
}
@media (max-width: 760px) {
  main.page .c-hero .c-photo { height: 210px; margin: 24px auto -70px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(56px + 70px) !important; }
}

/* ===== v2.4.3: hero text lines up with the sections below; Contact hero without a row ===== */
main.page .e-inner { max-width: none; }
main.page .e-hero:not(:has(.e-row)) { padding-bottom: 80px; }
@media (max-width: 760px) { main.page:not([data-page="home"]) > section.e-hero:not(:has(.e-row)) { padding-bottom: 48px !important; } }

/* ===== v2.4.4: one consistent content width on the inner pages (desktop) ===== */
@media (min-width: 1024px) {
  main.page:not([data-page="home"]) > section {
    padding-left: max(64px, calc((100% - 1200px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1200px) / 2)) !important;
  }
  [data-page="candidates"] .mat-grid, [data-page="clients"] .pro-grid { max-width: none; margin: 0; }
}

/* ===== v2.4.6: homepage hero fills the first screen (top offset measured by site.js) ===== */
@media (min-width: 1024px) and (min-height: 640px) {
  main.page[data-page="home"] > section.hero { min-height: calc(100vh - var(--bf-hero-top, 71px)); min-height: calc(100svh - var(--bf-hero-top, 71px)); box-sizing: border-box; align-content: center; }
}

/* ===== v2.5: contact form thank-you and phone field ===== */
.bf-opt { color: var(--muted) !important; font-weight: 400; }
.bf-thanks { background: var(--light); border: 1px solid var(--border); border-radius: 16px; padding: 44px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bf-thanks-icon { width: 56px; height: 56px; border-radius: 50%; background: #E8F5E9; color: #2E7D32; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.bf-thanks-title { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.2; color: var(--navy); margin: 0; }
.bf-thanks-text { font-size: 17px; line-height: 1.7; color: #4A5568; margin: 0 0 10px; max-width: 520px; }
.bf-thanks-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bf-thanks .btn-primary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.bf-thanks-home { font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .bf-thanks { padding: 32px 22px; } .bf-thanks-title { font-size: 25px; } .bf-thanks .btn-primary { width: 100%; justify-content: center; } }

/* ===== v2.5.1: founders photo shows more of the picture (less zoomed in) ===== */
main.page .c-hero .c-photo { max-width: 640px; height: 420px; object-position: 50% 42%; }
@media (min-width: 761px) and (max-width: 1023px) { main.page .c-hero .c-photo { max-width: 560px; height: 370px; } }
@media (max-width: 760px) { main.page .c-hero .c-photo { height: 250px; object-position: 50% 40%; } }

/* ===== v2.5.2: founders photo shown whole (uncropped, original proportions) ===== */
main.page .c-hero .c-photo { max-width: 520px; width: 100%; height: auto !important; aspect-ratio: auto; object-fit: initial; margin: 32px auto -180px; }
main.page .c-hero:has(.c-photo) + section { padding-top: calc(96px + 180px) !important; }
@media (min-width: 761px) and (max-width: 1023px) {
  main.page .c-hero .c-photo { max-width: 460px; margin-bottom: -150px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(80px + 150px) !important; }
}
@media (max-width: 760px) {
  main.page .c-hero .c-photo { max-width: 100%; margin: 24px auto -110px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(56px + 110px) !important; }
}

/* ===== v2.5.3: founders photo in a wide frame, showing more of the picture ===== */
main.page .c-hero .c-photo { max-width: 720px; width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 48%; margin: 32px auto -160px; }
main.page .c-hero:has(.c-photo) + section { padding-top: calc(112px + 160px) !important; }
@media (min-width: 761px) and (max-width: 1023px) {
  main.page .c-hero .c-photo { max-width: 600px; margin-bottom: -120px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(72px + 120px) !important; }
}
@media (max-width: 760px) {
  main.page .c-hero .c-photo { max-width: 100%; margin: 24px auto -80px; }
  main.page .c-hero:has(.c-photo) + section { padding-top: calc(56px + 80px) !important; }
}

/* ===== v2.5.5: founders photo in a 16:9 frame, eyes at about one third from the top ===== */
main.page .c-hero .c-photo { aspect-ratio: 16 / 9; object-position: 50% 88%; }

/* ===== v2.6: Prägnanz / Occam — remove decorative clutter ===== */
/* background circles in heroes and closing bands */
main.page .hero::before, main.page .hero::after,
main.page .page-hero::before, main.page .page-hero::after,
main.page .c-hero::before, main.page .c-hero::after,
main.page .cta-band::before, main.page .cta-band::after,
main.page .strong-line::before, main.page .strong-line::after { display: none !important; }
/* giant watermark letters and numbers */
main.page .door-num, main.page .mat-num { display: none !important; }
/* no tilted cards, lighter shadows */
[data-page="clients"] .pro-card { transform: none !important; box-shadow: 0 12px 32px rgba(0,0,0,.18) !important; }
[data-page="candidates"] .mat-card { box-shadow: 0 8px 24px rgba(26,58,92,.06) !important; }
main.page .c-hero .c-photo { box-shadow: 0 12px 32px rgba(15,31,51,.18) !important; }

.footer-cookie { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.footer-cookie:hover { text-decoration: underline; }

/* ===== v2.6.3: one or two blue accents per page, chosen per page ===== */
main.page[data-page="about"] section.focus h2 em,
main.page[data-page="candidates"] section.roles-section h2 em,
main.page[data-page="clients"] section.process h2 em { color: inherit !important; font-style: normal !important; }
main.page[data-page="clients"] section.who h2 em { color: var(--blue) !important; font-style: normal !important; }

/* ===== v2.6.3: bigger "The match matters." on laptops and desktops ===== */
@media (min-width: 1024px) {
  main.page[data-page="home"] .hero h1 { font-size: clamp(96px, 7.8vw, 120px) !important; line-height: 0.98 !important; letter-spacing: -1.5px; }
}

/* ===== v2.6.4: Open roles: "Currently recruiting." without a coloured word ===== */
main.page[data-page="roles"] section.roles h2 em { color: inherit !important; font-style: normal !important; }

/* =====================================================================
   v2.6.6: design pass (one set of rules shared by all pages)
   1 readable colours   2 type scale   3 ruled lists instead of cards
   4 one button system  5 no duplicate hero buttons   6 spacing rhythm
   ===================================================================== */

/* ---- 1. Readable colours -------------------------------------------- */
/* small orange text on light backgrounds uses the darker orange (4.9:1) */
main.page .l-eyebrow,
[data-page="clients"] .pro-kicker { color: var(--orange-text); }
/* no small labels above section headings (hero labels stay) */
main.page .section-tag, main.page .why-label { display: none !important; }
/* no 01 / 02 / 03 where the content is not a sequence */
[data-page="home"] .why-item-num, [data-page="home"] .approach-num { display: none; }
/* small sub-headings: sentence case, readable size */
[data-page="roles"] .detail-block h4, [data-page="roles"] .detail-h { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--orange-text); }
[data-page="clients"] .pro-kicker { font-size: 14px; letter-spacing: 0; text-transform: none; }
[data-page="clients"] .pro-fl { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* nothing below 13px */
main.page .role-badge, [data-page="home"] .role-badge { font-size: 13px; }
main.page .c-eyebrow, main.page .e-eyebrow, main.page .l-eyebrow { font-size: 13px; }
[data-page="home"] .hero-eyebrow { font-size: 13px; }
@media (max-width: 760px) {
  main.page .c-eyebrow, main.page .e-eyebrow { font-size: 13px; letter-spacing: 1.2px; }
  [data-page="home"] .hero-eyebrow { font-size: 13px !important; letter-spacing: .8px !important; }
}
/* orange block behind Amrita: dark text instead of white (white on orange is 2.5:1) */
[data-page="about"] .founder-top.amrita .founder-name,
[data-page="about"] .founder-top.amrita .founder-role,
[data-page="about"] .founder-top.amrita .founder-tagline { color: #0F1F33; }

/* ---- 2. One type scale ---------------------------------------------- */
/* hero headlines (Home keeps its own big headline) */
main.page .c-hero h1, main.page .e-hero h1 { font-size: 72px; line-height: 1.04; letter-spacing: -1px; }
@media (min-width: 761px) and (max-width: 1023px) { main.page .c-hero h1, main.page .e-hero h1 { font-size: 56px !important; } }
@media (max-width: 760px) { main.page .c-hero h1, main.page .e-hero h1 { font-size: 44px !important; line-height: 1.06 !important; } }
/* section headings */
main.page section:not(.hero):not(.c-hero):not(.e-hero):not(.l-hero):not(.cta-band):not(.note):not(.profile):not(.matters):not(.doors):not(.strong-line) h2 { font-size: 52px; line-height: 1.12; letter-spacing: -.5px; }
@media (min-width: 761px) and (max-width: 1023px) {
  main.page section:not(.hero):not(.c-hero):not(.e-hero):not(.l-hero):not(.cta-band):not(.note):not(.profile):not(.matters):not(.doors):not(.strong-line) h2 { font-size: 40px !important; }
}
@media (max-width: 760px) {
  main.page section:not(.hero):not(.c-hero):not(.e-hero):not(.l-hero):not(.cta-band):not(.note):not(.profile):not(.matters):not(.doors):not(.strong-line) h2 { font-size: 34px !important; }
}
/* intro text under a heading: 17px, about 60 characters wide */
main.page .section-header p:not(.bf-d), main.page .how-sub, main.page .founders-header p:not(.bf-d),
main.page .focus-left p:not(.bf-d), main.page .roles-header p:not(.bf-d) { font-size: 17px; line-height: 1.7; max-width: 60ch; }

/* ---- 3. Ruled lists instead of cards -------------------------------- */
/* 3a. lists of roles and sectors: title left, text right, hairline between */
main.page .who-grid, main.page .people-grid, main.page .roles-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: 0; border-radius: 0; overflow: visible; border-bottom: 1px solid var(--rule);
}
main.page .who-grid .who-card, main.page .people-grid .people-item, main.page .roles-grid .role-card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: baseline;
  background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 26px 0;
}
main.page .who-card h3, main.page .people-item h3, main.page .role-card h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 0; }
main.page .who-card p:not(.bf-d), main.page .people-item p:not(.bf-d), main.page .role-card p:not(.bf-d) { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 60ch; margin: 0; }
main.page .role-card > *:not(h3):not(p) { grid-column: 2; }
/* 3b. About: the three focus areas, stacked, ruled */
[data-page="about"] .focus-right { gap: 0; border-bottom: 1px solid var(--rule); }
[data-page="about"] .focus-item { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 22px 0; }
[data-page="about"] .focus-item h3 { font-size: 19px; margin-bottom: 6px; }
[data-page="about"] .focus-item p:not(.bf-d) { font-size: 16px; line-height: 1.65; }
/* 3c. feature lists with an icon: icon beside the title, no tile, no outer box */
main.page .how-grid, main.page .expect-grid, [data-page="home"] .why-grid {
  border: 0; border-radius: 0; overflow: visible; gap: 0 56px; border-bottom: 1px solid var(--rule);
}
main.page .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
main.page .expect-grid, [data-page="home"] .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main.page .how-item, main.page .expect-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center;
  border: 0; border-top: 1px solid var(--rule); padding: 28px 0 36px; background: none;
}
main.page .how-item-icon, main.page .expect-icon {
  width: 24px; height: 24px; background: none; border: 0; border-radius: 0; margin: 0; font-size: 24px; color: var(--blue);
  grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center;
}
main.page .how-item h3, main.page .expect-item h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 18px; font-weight: 600; color: var(--navy); }
main.page .how-item p:not(.bf-d), main.page .expect-item p:not(.bf-d) { grid-column: 2; grid-row: 2; margin: 0; font-size: 16px; line-height: 1.65; }
[data-page="home"] .why-item { border: 0; border-top: 1px solid var(--rule); padding: 28px 0 36px; background: none; }
[data-page="home"] .why-item h3 { font-size: 18px; margin-bottom: 8px; }
[data-page="home"] .why-item p:not(.bf-d) { font-size: 16px; line-height: 1.65; }
/* 3d. Home approach: three ruled rows */
[data-page="home"] .approach-cards { gap: 0; border-bottom: 1px solid var(--rule); }
[data-page="home"] .approach-card { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 20px 0; }
[data-page="home"] .approach-card-title { font-size: 18px; margin-bottom: 4px; }
[data-page="home"] .approach-card-desc { font-size: 16px; line-height: 1.65; }
/* 3e. no coloured stripes on the panels that stay */
[data-page="about"] .ask-card { border-top: 0; }
/* no overflow clipping on the candidates profile card (Impeccable: clipped child) */
[data-page="candidates"] .mat-card { overflow: visible; }

@media (max-width: 1023px) {
  main.page .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main.page .who-grid .who-card, main.page .people-grid .people-item, main.page .roles-grid .role-card { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 22px 0; }
  main.page .role-card > *:not(h3):not(p) { grid-column: 1; }
  main.page .how-grid, main.page .expect-grid, [data-page="home"] .why-grid { grid-template-columns: minmax(0, 1fr); }
  main.page .how-item, main.page .expect-item { padding: 24px 0 28px; }
}

/* ---- 4. One button system ------------------------------------------- */
main.page .btn-white.btn-white, main.page .btn-primary.btn-primary,
[data-page="candidates"] .mat-cta.mat-cta, [data-page="clients"] .pro-cta.pro-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px; border-radius: 8px; border: 0; font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
[data-page="about"] .focus-left a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 8px; font-size: 16px; font-weight: 600; }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.nav-open-roles { border-radius: 8px; }

/* ---- 5. No duplicate hero buttons ----------------------------------- */
/* the header carries the action; each page ends with one closing band */
main.page .c-hero .hero-actions, main.page .e-hero .hero-actions { display: none; }

/* ---- 6. Section rhythm: 112 / 72 / 56 -------------------------------- */
@media (min-width: 1024px) {
  main.page:not([data-page="home"]):not([data-page="roles"]):not([data-page="contact"]) > section:not(.c-hero):not(.e-hero):not(.l-hero):not(.cta-band):not(.c-hero + section) { padding-top: 112px !important; padding-bottom: 112px !important; }
  main.page:not([data-page="home"]) > section.c-hero + section { padding-bottom: 112px !important; }
  [data-page="home"] .why, [data-page="home"] .approach, [data-page="home"] .founders, [data-page="home"] .roles { padding-top: 112px; padding-bottom: 112px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  main.page:not([data-page="home"]):not([data-page="roles"]):not([data-page="contact"]) > section:not(.c-hero):not(.e-hero):not(.l-hero):not(.cta-band):not(.c-hero + section) { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ---- 7. Headlines wrap evenly (no single word on the last line) ------- */
main.page h1, main.page h2 { text-wrap: balance; }

/* phone: an older rule forces every grid to one column, so the icon lists use a plain layout here */
@media (max-width: 760px) {
  main.page .how-item, main.page .expect-item { display: block !important; position: relative; padding: 24px 0 28px 38px; }
  main.page .how-item-icon, main.page .expect-icon { position: absolute; left: 0; top: 27px; }
  main.page .how-item h3, main.page .expect-item h3 { margin: 0 0 8px; }
  main.page .how-item p:not(.bf-d), main.page .expect-item p:not(.bf-d) { margin: 0; }
}

/* ---- Open roles and Contact: the small info cards become ruled rows ---- */
[data-page="roles"] .not-listed-cards { gap: 0; border-bottom: 1px solid var(--rule); }
[data-page="roles"] .not-listed-card, [data-page="contact"] .info-card {
  background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 20px 0; gap: 14px;
}
[data-page="roles"] .not-listed-icon, [data-page="contact"] .info-card-icon {
  width: 24px; height: 24px; background: none; border: 0; border-radius: 0; font-size: 24px; color: var(--blue); margin-top: 1px;
}
[data-page="roles"] .not-listed-card h4, [data-page="contact"] .info-card h4 { font-size: 17px; margin-bottom: 4px; }
[data-page="roles"] .not-listed-card p:not(.bf-d), [data-page="contact"] .info-card p:not(.bf-d) { font-size: 16px; line-height: 1.65; }
[data-page="contact"] .info-block p:not(.bf-d), [data-page="contact"] .info-block a { font-size: 16px; }

/* captions and the example profile card: 13px minimum */
main.page .founder-role, main.page .note-role, main.page .founder-contact-role,
[data-page="clients"] .pro-ex, [data-page="clients"] .pro-h, [data-page="clients"] .pro-chip, [data-page="clients"] .pro-yr,
[data-page="clients"] .pro-dh, [data-page="clients"] .pro-fic { font-size: 13px; }

/* =====================================================================
   v2.6.8: layout rhythm (unequal columns, heading left or right)
   ===================================================================== */

/* ---- Pick one: "Who we work with" (Clients). Short list left, text right ---- */
main.page .who-pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: start; margin-top: 8px; }
main.page .who-r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
main.page .who-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
main.page .who-list label {
  display: block; cursor: pointer; padding: 20px 0; border-top: 1px solid var(--rule);
  font-family: 'Playfair Display', Georgia, serif; font-size: 34px; line-height: 1.12; font-weight: 700; color: #66768C;
  transition: color .15s ease;
}
main.page .who-list label:hover { color: var(--navy); }
main.page .who-panels { border-top: 1px solid var(--rule); padding-top: 24px; min-height: 160px; }
main.page .who-panel { display: none; }
main.page .who-panel p { margin: 0; max-width: 34ch; font-size: 24px; line-height: 1.5; font-weight: 400; color: var(--navy); }
#who-1:checked ~ .who-list label[for="who-1"], #who-2:checked ~ .who-list label[for="who-2"], #who-3:checked ~ .who-list label[for="who-3"],
#who-4:checked ~ .who-list label[for="who-4"], #who-5:checked ~ .who-list label[for="who-5"], #who-6:checked ~ .who-list label[for="who-6"] { color: var(--navy); }
#who-1:checked ~ .who-panels .who-panel:nth-child(1), #who-2:checked ~ .who-panels .who-panel:nth-child(2), #who-3:checked ~ .who-panels .who-panel:nth-child(3),
#who-4:checked ~ .who-panels .who-panel:nth-child(4), #who-5:checked ~ .who-panels .who-panel:nth-child(5), #who-6:checked ~ .who-panels .who-panel:nth-child(6) { display: block; }
#who-1:focus-visible ~ .who-list label[for="who-1"], #who-2:focus-visible ~ .who-list label[for="who-2"], #who-3:focus-visible ~ .who-list label[for="who-3"],
#who-4:focus-visible ~ .who-list label[for="who-4"], #who-5:focus-visible ~ .who-list label[for="who-5"], #who-6:focus-visible ~ .who-list label[for="who-6"] { outline: 3px solid var(--orange); outline-offset: -3px; }

/* ---- Index grid: heading in a narrow column, four entries in a 2 x 2 grid ---- */
@media (min-width: 1024px) {
  main.page[data-page="clients"] section.people, main.page[data-page="candidates"] section.roles-section {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 80px; align-items: start;
  }
  /* Candidates mirrors Clients: heading on the right, grid on the left (zigzag) */
  main.page[data-page="candidates"] section.roles-section { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  main.page[data-page="candidates"] section.roles-section > .section-header { order: 2; grid-column: 2; }
  main.page[data-page="candidates"] section.roles-section > .roles-grid { order: 1; grid-column: 1; grid-row: 1; }
  main.page .people-grid, main.page .roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-bottom: 0; }
  main.page .people-grid .people-item, main.page .roles-grid .role-card {
    display: block; border-top: 2px solid var(--navy); padding: 26px 0 48px;
  }
  main.page .people-item h3, main.page .role-card h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.15; font-weight: 700; margin: 0 0 12px; }
  main.page .people-item p:not(.bf-d), main.page .role-card p:not(.bf-d) { max-width: 36ch; }
  main.page[data-page="clients"] section.people > .section-header h2, main.page[data-page="candidates"] section.roles-section > .section-header h2 { font-size: 44px; }
}

/* the founders photo on About: no glow */
main.page .c-hero .c-photo { box-shadow: none !important; }

@media (max-width: 1023px) {
  main.page .who-pick { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  main.page .who-list label { font-size: 30px; padding: 16px 0; }
  main.page .who-panel p { font-size: 20px; max-width: none; }
  main.page .who-panels { min-height: 0; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  main.page .who-list label { font-size: 26px; }
}

/* titles and descriptions line up across each row of the index grid, even when a title wraps */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    main.page .people-grid .people-item, main.page .roles-grid .role-card {
      display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; grid-template-columns: minmax(0, 1fr);
    }
    main.page .people-grid, main.page .roles-grid { grid-auto-rows: auto; }
  }
}

/* ---- the orange line stays: the quote under the founder note, and the founder quote on About ---- */
[data-page="candidates"] .note-accent, [data-page="clients"] .note-accent { font-size: 16px; line-height: 1.7; }

/* =====================================================================
   v2.7.0: reveal list (+) for "How we work" and "What you can expect"
   ===================================================================== */
main.page .rv-list { border-bottom: 1px solid var(--rule); }
main.page .rv-item { border-top: 1px solid var(--rule); }
main.page .rv-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer;
  min-height: 64px; padding: 14px 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--navy);
}
main.page .rv-item > summary::-webkit-details-marker { display: none; }
main.page .rv-item > summary::marker { content: ""; }
main.page .rv-item > summary:hover .rv-title { color: var(--blue); }
main.page .rv-item > summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
main.page .rv-mark { flex-shrink: 0; width: 28px; text-align: center; font-size: 32px; font-weight: 300; line-height: 1; color: var(--blue); }
main.page .rv-mark::before { content: "+"; }
main.page .rv-item[open] .rv-mark::before { content: "\2212"; }
main.page .rv-body { padding: 0 56px 26px 0; }
main.page .rv-body p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.7; color: var(--muted); }

/* heading on the left, list on the right (desktop) */
@media (min-width: 1024px) {
  main.page[data-page="about"] section.how {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: 96px; align-items: start;
  }
  main.page[data-page="about"] section.how > h2 { grid-column: 1; grid-row: 1; font-size: 48px; }
  main.page[data-page="about"] section.how > .how-sub { grid-column: 1; grid-row: 2; margin-bottom: 0; max-width: 34ch; }
  main.page[data-page="about"] section.how > .rv-list { grid-column: 2; grid-row: 1 / span 2; }
  main.page[data-page="clients"] section.expect {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 96px; align-items: start;
  }
  main.page[data-page="clients"] section.expect > .section-header h2 { font-size: 44px; }
  main.page[data-page="clients"] section.expect > .section-header p:not(.bf-d) { max-width: 34ch; }
}
@media (max-width: 1023px) {
  main.page[data-page="about"] .how-sub { margin-bottom: 32px; }
  main.page[data-page="clients"] section.expect > .section-header { margin-bottom: 32px; }
}
/* phone: big tap targets, text uses the full width */
@media (max-width: 760px) {
  main.page .rv-item > summary { min-height: 60px; font-size: 18px; padding: 12px 0; }
  main.page .rv-body { padding: 0 0 22px; }
  main.page .rv-body p { font-size: 16px; }
}

/* =====================================================================
   v2.7.1: founder letter: "Read more" on phones only
   ===================================================================== */
main.page .rm-t { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
main.page .rm-l { display: none; }
@media (max-width: 760px) {
  main.page .rm-box .rm-t:not(:checked) ~ p:nth-of-type(n+2) { display: none; }
  main.page .rm-l {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; cursor: pointer;
    font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px;
  }
  main.page .rm-less { display: none; }
  main.page .rm-box .rm-t:checked ~ .rm-l .rm-more { display: none; }
  main.page .rm-box .rm-t:checked ~ .rm-l .rm-less { display: inline; }
  main.page .rm-box .rm-t:focus-visible ~ .rm-l { outline: 3px solid var(--orange); outline-offset: 3px; }
}

/* =====================================================================
   v2.8.0: Home hero, type only. A sentence to read, a very large headline,
   big moving role pills edge to edge, and the three points in a strip.
   ===================================================================== */
/* the sentence above the headline (all sizes) */
main.page[data-page="home"] .hero-eyebrow {
  font-size: clamp(20px, 2.1vw, 30px) !important; line-height: 1.25 !important; font-weight: 500 !important;
  letter-spacing: -.2px !important; text-transform: none !important; color: #fff !important; max-width: 22em; margin: 0 0 20px;
}
@media (max-width: 760px) { main.page[data-page="home"] .hero-eyebrow { font-size: 19px !important; margin-bottom: 16px; } }

@media (min-width: 1024px) {
  main.page[data-page="home"] .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; align-content: space-between; padding: 64px 64px 56px; }
  main.page[data-page="home"] .hero-left { display: grid; grid-template-columns: minmax(0, 1fr); }
  main.page[data-page="home"] .hero-eyebrow { grid-row: 1; margin-bottom: clamp(16px, 2vw, 28px); }
  main.page[data-page="home"] .hero h1 {
    grid-row: 2; grid-column: 1; font-size: clamp(110px, 13.5vw, 224px) !important; line-height: .9 !important; letter-spacing: -.03em !important; margin: 0;
  }
  /* the sentence under the headline sits in the free space to the right of "matters." */
  main.page[data-page="home"] .hero-sub {
    grid-row: 2; grid-column: 1; align-self: end; justify-self: end; width: clamp(240px, 24vw, 360px); margin: 0 0 .4em;
    font-size: 18px; line-height: 1.55; font-weight: 400; color: rgba(255,255,255,.78);
  }
  /* big role pills, edge to edge, still moving */
  main.page[data-page="home"] .hero-pills { grid-row: 3; margin: 44px -64px 0; width: calc(100% + 128px); flex-wrap: nowrap; overflow: hidden; }
  main.page[data-page="home"] .hero-pills.is-marquee { margin: 44px -64px 0; width: calc(100% + 128px); }
  main.page[data-page="home"] .hero-pills .pill-dark {
    font-size: clamp(20px, 1.8vw, 26px); padding: .55em 1.3em; background: transparent; border: 1.5px solid rgba(255,255,255,.42); color: #fff; font-weight: 500; white-space: nowrap; flex-shrink: 0;
  }
  main.page[data-page="home"] .pills-track { gap: 16px; animation-name: bf-pills-big; animation-duration: 52s; }
  /* the three points in a strip along the bottom */
  main.page[data-page="home"] .hero-right { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: 44px; border-top: 0; }
  main.page[data-page="home"] .stat-card { display: block; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.28); border-radius: 0; padding: 18px 0 0; }
  main.page[data-page="home"] .stat-icon { display: none; }
  main.page[data-page="home"] .stat-title { font-size: 19px; margin: 0 0 6px; }
  main.page[data-page="home"] .stat-desc { display: block !important; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.78); }
}
@keyframes bf-pills-big { to { transform: translateX(calc(-50% - 8px)); } }
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  main.page[data-page="home"] .hero-pills:not(.is-marquee) { flex-wrap: wrap; overflow: visible; margin: 36px 0 0; width: 100%; gap: 12px; }
}

/* =====================================================================
   v2.9.0: Open roles and Contact share one split layout
   navy panel on the left (headline), the content on the right
   ===================================================================== */
/* the second heading on Open roles repeats the first: kept for screen readers and search engines, not shown */
main.page[data-page="roles"] .roles-header { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* vacancy list: ruled rows instead of a boxed list */
main.page[data-page="roles"] .roles-list { border: 0; border-radius: 0; overflow: visible; border-bottom: 1px solid var(--rule); }
main.page[data-page="roles"] .role-row { padding: 26px 0; border: 0; border-top: 1px solid var(--rule); background: none; }
main.page[data-page="roles"] .role-row:hover { background: none; }
main.page[data-page="roles"] .role-row:hover .role-title { color: var(--blue); }
main.page[data-page="roles"] .role-title { font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
main.page[data-page="roles"] .role-meta-item { font-size: 15px; }
main.page[data-page="roles"] .role-detail { margin: 0 0 24px; }
/* empty state: the first thing people read when no search is open */
main.page[data-page="roles"] .roles-empty { background: none; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 22px; line-height: 1.5; color: var(--navy); max-width: none; border-bottom: 0; text-wrap: balance; }

/* contact form: readable sizes */
main.page[data-page="contact"] .form-group input, main.page[data-page="contact"] .form-group select, main.page[data-page="contact"] .form-group textarea { font-size: 16px; }
main.page[data-page="contact"] .form-privacy { font-size: 13px; }

@media (min-width: 1024px) {
  main.page[data-page="roles"], main.page[data-page="contact"] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; }
  main.page[data-page="roles"] { grid-template-rows: auto 1fr; }
  main.page[data-page="contact"] { grid-template-rows: auto 1fr; }

  /* the navy panel */
  main.page:is([data-page="roles"], [data-page="contact"]) > section.e-hero { grid-column: 1; padding-top: 72px !important; padding-bottom: 72px !important; }
  main.page[data-page="roles"] > section.e-hero { grid-row: 1 / span 2; }
  main.page[data-page="contact"] > section.e-hero { grid-row: 1; padding-bottom: 32px !important; }
  main.page:is([data-page="roles"], [data-page="contact"]) .e-inner { max-width: none; }
  main.page[data-page="roles"] .e-inner { position: sticky; top: 104px; }
  main.page:is([data-page="roles"], [data-page="contact"]) .e-hero h1 { font-size: clamp(72px, 6.8vw, 112px) !important; line-height: .98 !important; letter-spacing: -.03em; max-width: 5.4em; }
  main.page[data-page="roles"] .e-row { display: block; margin-top: 32px; padding-top: 0; border-top: 0; }
  main.page[data-page="roles"] .e-sub { max-width: 28ch; font-size: 20px; line-height: 1.6; color: #C9D6E4; }

  /* Open roles: list, then the "no vacancy needed" block, both in the right column */
  main.page[data-page="roles"] > section.roles { grid-column: 2; grid-row: 1; background: #fff; padding-top: 72px !important; padding-bottom: 0 !important; }
  main.page[data-page="roles"] > section.not-listed { grid-column: 2; grid-row: 2; background: #fff; padding-top: 64px !important; padding-bottom: 96px !important; }
  main.page[data-page="roles"] .not-listed-inner { display: block; }
  main.page[data-page="roles"] .not-listed h2 { font-size: 40px !important; max-width: 18ch; }
  main.page[data-page="roles"] .not-listed p:not(.bf-d) { font-size: 17px; max-width: 52ch; margin-bottom: 0; }
  main.page[data-page="roles"] .not-listed .bf-link { margin-top: 28px; }
  main.page[data-page="roles"] .not-listed-cards { margin-top: 48px; gap: 0; }

  /* Contact: headline and direct contact details on navy, the form on the right */
  main.page[data-page="contact"] > section.contact, main.page[data-page="contact"] .contact-inner { display: contents; }
  main.page[data-page="contact"] .info-side {
    grid-column: 1; grid-row: 2; background: var(--navy); padding: 0 64px 72px max(64px, calc((100% - 1200px) / 2)); gap: 28px;
  }
  main.page[data-page="contact"] .form-side { grid-column: 2; grid-row: 1 / span 2; background: #fff; padding: 72px 64px 96px; }
  main.page[data-page="contact"] .form-side h2 { font-size: 40px; }
  main.page[data-page="contact"] .form-side p:not(.bf-d) { font-size: 17px; max-width: 52ch; }
  main.page[data-page="contact"] .info-side h3, main.page[data-page="contact"] .info-side h4 { color: #fff; }
  main.page[data-page="contact"] .info-side h3 { font-size: 19px; }
  main.page[data-page="contact"] .info-side p:not(.bf-d) { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.6; }
  main.page[data-page="contact"] .info-side a { color: #fff; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
  main.page[data-page="contact"] .info-divider { background: rgba(255,255,255,.22); }
  main.page[data-page="contact"] .founder-contact-name { color: #fff; font-size: 16px; }
  main.page[data-page="contact"] .founder-contact-role { color: rgba(255,255,255,.72); font-size: 13px; }
  main.page[data-page="contact"] .info-card { border-top-color: rgba(255,255,255,.22); }
  main.page[data-page="contact"] .info-card-icon { color: rgba(255,255,255,.85); }
}
main.page[data-page="contact"] .info-divider + .info-card { border-top: 0; }

/* =====================================================================
   v2.9.1: the orange accent word in headlines is upright everywhere (as on Home)
   ===================================================================== */
main.page :is(h1, h2, h3, .note-pullquote) :is(em, i) { font-style: normal !important; }

/* =====================================================================
   v2.9.2: calmer list titles (smaller, sans-serif: no decorative ampersand),
   footer and small-point headings in correct order
   ===================================================================== */
.footer-col h3 { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
[data-page="roles"] .not-listed-card h3 { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0 0 4px; }

/* "Who we work with": sector names */
main.page .who-list label { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; padding: 18px 0; color: #66768C; }
main.page .who-panel p { font-size: 20px; line-height: 1.6; max-width: 40ch; }
@media (max-width: 1023px) { main.page .who-list label { font-size: 22px; padding: 16px 0; } main.page .who-panel p { font-size: 18px; } }
@media (max-width: 760px) { main.page .who-list label { font-size: 20px; } main.page .who-panel p { font-size: 17px; } }

/* the 2 x 2 index: entry names */
@media (min-width: 1024px) {
  main.page .people-item h3, main.page .role-card h3 { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
}

/* =====================================================================
   v2.9.3: Home hero scales with the window height too (always fits the first screen),
   sentence gets a comfortable line height
   ===================================================================== */
main.page[data-page="home"] .hero-eyebrow { line-height: 1.4 !important; font-size: clamp(20px, 1.9vw, 28px) !important; }
@media (max-width: 760px) { main.page[data-page="home"] .hero-eyebrow { font-size: 19px !important; } }
@media (min-width: 1024px) {
  main.page[data-page="home"] .hero { padding-top: clamp(32px, 5vh, 60px); padding-bottom: clamp(28px, 4.5vh, 52px); }
  main.page[data-page="home"] .hero h1 { font-size: clamp(96px, min(11vw, 20vh), 200px) !important; }
  main.page[data-page="home"] .hero-pills, main.page[data-page="home"] .hero-pills.is-marquee { margin-top: clamp(22px, 3.6vh, 44px); }
  main.page[data-page="home"] .hero-right { margin-top: clamp(22px, 3.6vh, 44px); }
}

/* =====================================================================
   v2.9.4: calmer Home hero. Sentence, headline, one line, quiet moving role pills.
   The three-point strip is no longer in the hero (the same points are covered further down).
   ===================================================================== */
@media (min-width: 761px) {
  main.page[data-page="home"] .hero-right { display: none !important; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  main.page[data-page="home"] .hero { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 1024px) {
  main.page[data-page="home"] .hero { align-content: center; padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(40px, 7vh, 80px); }
  main.page[data-page="home"] .hero-pills, main.page[data-page="home"] .hero-pills.is-marquee { margin-top: clamp(32px, 6vh, 64px); }
  main.page[data-page="home"] .hero-pills .pill-dark { font-size: clamp(16px, 1.25vw, 19px); padding: .6em 1.25em; border-color: rgba(255,255,255,.3); }
  main.page[data-page="home"] .pills-track { gap: 12px; animation-name: bf-pills-sm; animation-duration: 40s; }
}
@keyframes bf-pills-sm { to { transform: translateX(calc(-50% - 6px)); } }

/* =====================================================================
   v2.11.0: the middle word of the Home headline rolls through the roles
   ("The planner matters." ... then back to "The match matters.").
   Starts about 2 seconds after the page loads, plays three times (10 seconds each), then rests on "match". Paused on hover.
   Not played when "reduce motion" is on. The word "match" stays the only real text in the headline.
   ===================================================================== */
main.page[data-page="home"] .hero h1 .slot { position: relative; display: inline-block; vertical-align: top; clip-path: inset(-.14em -100vw -.2em -.1em); }
main.page[data-page="home"] .hero h1 .slot em { display: inline-block; }
main.page[data-page="home"] .hero h1 .slot .sw { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--orange); pointer-events: none; }
main.page[data-page="home"] .hero h1 .slot .sw::before { content: attr(data-w); content: attr(data-w) / ""; }
main.page[data-page="home"] .hero h1 .slot .sw { transform: translateY(150%); }
@media (prefers-reduced-motion: reduce) { main.page[data-page="home"] .hero h1 .slot .sw { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  main.page[data-page="home"] .hero h1 .slot em, main.page[data-page="home"] .hero h1 .slot .sw { animation-duration: 10s; animation-iteration-count: 3; animation-fill-mode: both; animation-delay: .4s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  main.page[data-page="home"] .hero h1 .slot em { animation-name: sl-match; }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(2) { animation-name: sl-1; }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(3) { animation-name: sl-2; }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(4) { animation-name: sl-3; }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(5) { animation-name: sl-4; }
  main.page[data-page="home"] .hero h1:hover .slot em, main.page[data-page="home"] .hero h1:hover .slot .sw { animation-play-state: paused; }
}
@keyframes sl-match { 0%, 20% { transform: none; } 24% { transform: translateY(calc(-1 * var(--off, 150%))); } 24.01%, 94% { transform: translateY(var(--off, 150%)); } 98%, 100% { transform: none; } }
@keyframes sl-1 { 0%, 22% { transform: translateY(var(--off, 150%)); } 26%, 38% { transform: none; } 42% { transform: translateY(calc(-1 * var(--off, 150%))); } 42.01%, 100% { transform: translateY(var(--off, 150%)); } }
@keyframes sl-2 { 0%, 40% { transform: translateY(var(--off, 150%)); } 44%, 56% { transform: none; } 60% { transform: translateY(calc(-1 * var(--off, 150%))); } 60.01%, 100% { transform: translateY(var(--off, 150%)); } }
@keyframes sl-3 { 0%, 58% { transform: translateY(var(--off, 150%)); } 62%, 74% { transform: none; } 78% { transform: translateY(calc(-1 * var(--off, 150%))); } 78.01%, 100% { transform: translateY(var(--off, 150%)); } }
@keyframes sl-4 { 0%, 76% { transform: translateY(var(--off, 150%)); } 80%, 92% { transform: none; } 96% { transform: translateY(calc(-1 * var(--off, 150%))); } 96.01%, 100% { transform: translateY(var(--off, 150%)); } }

/* tablets keep the plain headline "The match matters."; desktop and phones roll the words */
@media (min-width: 761px) and (max-width: 1023px) {
  main.page[data-page="home"] .hero h1 .slot .sw { display: none; }
  main.page[data-page="home"] .hero h1 .slot em { animation: none !important; transform: none !important; }
}

/* =====================================================================
   v2.11.2: quieter "no open searches" notice, smaller hero sentence on phones,
   and the "+" of the reveal lists in the same style as the "+" on the Home photos
   ===================================================================== */
main.page[data-page="roles"] .roles-empty { font-size: 17px; line-height: 1.6; color: var(--muted); padding: 22px 0; text-wrap: pretty; }
@media (max-width: 760px) {
  main.page[data-page="roles"] .roles-empty { font-size: 16px; padding: 18px 0; }
  main.page[data-page="home"] .hero-eyebrow { font-size: 16px !important; line-height: 1.45 !important; margin-bottom: 14px; }
}

/* "+" in a small round button; turns into an orange cross when open or hovered (like the Home photos) */
main.page .rv-mark {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(26,58,92,.08); color: var(--navy);
  font-size: 19px; font-weight: 400; line-height: 32px; text-align: center;
  transition: transform .4s ease, background .3s ease, color .3s ease;
}
main.page .rv-item[open] .rv-mark::before { content: "+"; }
main.page .rv-item[open] .rv-mark, main.page .rv-item > summary:hover .rv-mark { transform: rotate(45deg); background: var(--orange); color: #fff; }
@media (prefers-reduced-motion: reduce) { main.page .rv-mark { transition: none; } }

/* =====================================================================
   v2.11.3: no buttons in the Home hero (the header and the two doors below carry the actions).
   Done in the stylesheet so pages that still have the old buttons stored are cleaned up too.
   ===================================================================== */
main.page[data-page="home"] .hero .hero-actions { display: none !important; }

/* =====================================================================
   v2.12.0: a proper hero on phones and tablets: fills the first screen,
   sentence at the top, big headline in the middle, role pills at the bottom
   ===================================================================== */
@media (max-width: 1023px) {
  main.page[data-page="home"] .hero {
    min-height: calc(100vh - 71px); min-height: calc(100svh - 71px);
    display: flex; flex-direction: column; align-items: stretch; padding: 36px 20px 36px !important; gap: 0;
  }
  main.page[data-page="home"] .hero-left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
  main.page[data-page="home"] .hero-eyebrow { margin: 0; font-weight: 400 !important; color: rgba(255,255,255,.92) !important; }
  main.page[data-page="home"] .hero h1 { margin: 0; line-height: .92 !important; letter-spacing: -.03em !important; }
  main.page[data-page="home"] .hero-pills, main.page[data-page="home"] .hero-pills.is-marquee { margin: 0 -20px; width: calc(100% + 40px); }
  main.page[data-page="home"] .hero-pills .pill-dark { font-size: 15px; padding: 9px 18px; }
}
/* phones: the headline on three lines, much bigger */
@media (max-width: 760px) {
  main.page[data-page="home"] .hero h1 { font-size: clamp(60px, 23vw, 108px) !important; }
  main.page[data-page="home"] .hero h1 .slot { display: block; }
  main.page[data-page="home"] .hero h1 br { display: none; }
}
/* tablets: two lines, scaled to the width */
@media (min-width: 761px) and (max-width: 1023px) {
  main.page[data-page="home"] .hero { padding: 48px 40px 48px !important; }
  main.page[data-page="home"] .hero h1 { font-size: clamp(96px, 16vw, 150px) !important; }
  main.page[data-page="home"] .hero-pills, main.page[data-page="home"] .hero-pills.is-marquee { margin: 0 -40px; width: calc(100% + 80px); }
}

/* =====================================================================
   v2.12.1: the Home hero shows only the sentence, the headline, the one line and the role pills.
   Anything else stored in the page (old buttons, whatever they are called) is not shown,
   on every screen size and in both languages.
   ===================================================================== */
main.page[data-page="home"] .hero-left > :not(.hero-eyebrow):not(h1):not(.hero-sub):not(.hero-pills) { display: none !important; }
main.page[data-page="home"] .hero :is(a.btn-white, a.btn-outline-white, a.btn-primary, a.btn-secondary) { display: none !important; }

/* =====================================================================
   v2.13.0: Contact. Only the email stays in the navy panel next to the headline;
   the other details (who you will speak to, where we are, LinkedIn) come after the form.
   ===================================================================== */
@media (min-width: 1024px) {
  main.page[data-page="contact"] { grid-template-rows: auto 1fr; background: linear-gradient(90deg, var(--navy) 41.6667%, #fff 41.6667%); }
  main.page[data-page="contact"] .info-side { display: contents; }
  main.page[data-page="contact"] > section.e-hero { padding-bottom: 28px !important; }
  /* email: under the headline, on navy */
  main.page[data-page="contact"] .info-side > .info-block:first-child {
    grid-column: 1; grid-row: 2; align-self: start; padding: 0 64px 72px max(64px, calc((100% - 1200px) / 2));
  }
  /* everything else: in the right column, below the form, on white */
  main.page[data-page="contact"] .info-side > :not(:first-child) { grid-column: 2; background: #fff; }
  main.page[data-page="contact"] .info-side > :not(:first-child):not(.info-divider) { padding-left: 64px; padding-right: 64px; }
  main.page[data-page="contact"] .info-side > .info-divider { height: 1px; margin: 0 64px; background: var(--rule); }
  main.page[data-page="contact"] .info-side > .info-divider:nth-child(2) { margin-top: 0; }
  main.page[data-page="contact"] .info-side > .info-block:nth-child(3) { padding-top: 32px; }
  main.page[data-page="contact"] .info-side > .founders-contact { padding-top: 20px; }
  main.page[data-page="contact"] .info-side > .founders-contact + .info-divider { margin-top: 32px; }
  main.page[data-page="contact"] .info-side > .info-card { padding-top: 24px; padding-bottom: 24px; border-top: 0; }
  main.page[data-page="contact"] .info-side > .info-card:last-child { padding-bottom: 96px; }
  /* light colours for the parts that are now on white */
  main.page[data-page="contact"] .info-side > :not(:first-child) h3, main.page[data-page="contact"] .info-side > :not(:first-child) h4,
  main.page[data-page="contact"] .info-side > :not(:first-child) .founder-contact-name { color: var(--navy); }
  main.page[data-page="contact"] .info-side > :not(:first-child) p:not(.bf-d), main.page[data-page="contact"] .info-side > :not(:first-child) .founder-contact-role { color: var(--muted); }
  main.page[data-page="contact"] .info-side > :not(:first-child) a { color: var(--navy); }
  main.page[data-page="contact"] .info-side > :not(:first-child) .info-card-icon { color: var(--blue); }
}

/* =====================================================================
   v2.13.1: direct email address under each founder on the Contact page
   ===================================================================== */
main.page[data-page="contact"] .founder-contact-email { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
main.page[data-page="contact"] .founder-contact-email a { font-size: 15px; font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { main.page[data-page="contact"] .info-side > :not(:first-child) .founder-contact-email a { color: var(--blue); font-size: 15px; } }

/* =====================================================================
   v2.14.0: Contact: the navy panel (headline + email) stays in view while the form scrolls
   ===================================================================== */
@media (min-width: 1024px) {
  main.page[data-page="contact"] { grid-template-rows: repeat(10, auto); }
  main.page[data-page="contact"] > section.e-hero { grid-row: 1 / 11; padding-bottom: 72px !important; }
  main.page[data-page="contact"] .e-inner { position: sticky; top: 104px; }
  main.page[data-page="contact"] .form-side { grid-row: 1; }
  main.page[data-page="contact"] .info-side > * { grid-column: 2; background: #fff; }
  main.page[data-page="contact"] .info-side > .info-divider { height: 1px; margin: 0 64px; background: var(--rule); }
  main.page[data-page="contact"] .info-side > .info-divider:first-child { margin-top: 24px; }
  main.page[data-page="contact"] .info-side > .info-divider:first-child + .info-block { padding-top: 32px; }
  /* the email block inside the navy panel */
  main.page[data-page="contact"] .e-inner .info-block { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
  main.page[data-page="contact"] .e-inner .info-block h3 { color: #fff; font-size: 19px; margin: 0; }
  main.page[data-page="contact"] .e-inner .info-block a { color: #fff; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
}

/* =====================================================================
   v2.14.1: narrower navy panel on Open roles and Contact (a third of the width)
   ===================================================================== */
@media (min-width: 1024px) {
  main.page[data-page="roles"], main.page[data-page="contact"] { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  main.page[data-page="contact"] { background: #fff; }
  main.page:is([data-page="roles"], [data-page="contact"]) > section.e-hero { padding-left: 48px !important; padding-right: 40px !important; }
  main.page:is([data-page="roles"], [data-page="contact"]) .e-hero h1 { font-size: clamp(56px, 5vw, 84px) !important; }
  main.page[data-page="roles"] .e-sub { font-size: 18px; max-width: 26ch; }
}

/* =====================================================================
   v2.14.2: more room to breathe in "Experience behind every introduction" (Home)
   ===================================================================== */
@media (min-width: 1024px) {
  main.page[data-page="home"] section.why { padding-top: 136px; padding-bottom: 136px; }
  main.page[data-page="home"] section.why h2 { margin-bottom: 80px; }
  main.page[data-page="home"] .why-grid { column-gap: 104px; }
  main.page[data-page="home"] .why-item { padding: 44px 0 56px; }
  main.page[data-page="home"] .why-item h3 { margin-bottom: 14px; }
  main.page[data-page="home"] .why-item p:not(.bf-d) { line-height: 1.7; max-width: 44ch; }
}
@media (max-width: 1023px) {
  main.page[data-page="home"] section.why h2 { margin-bottom: 40px; }
  main.page[data-page="home"] .why-item { padding: 32px 0 40px; }
  main.page[data-page="home"] .why-item h3 { margin-bottom: 12px; }
}

/* =====================================================================
   v2.15.0: the rolling role words on phones too. On a phone the middle word has a line of its own,
   so each longer word is scaled to fit that line and all words sit on one baseline.
   ===================================================================== */
@media (max-width: 760px) {
  main.page[data-page="home"] .hero h1 .slot { display: grid; justify-items: start; align-items: baseline; --off: 210%; }
  main.page[data-page="home"] .hero h1 .slot > em, main.page[data-page="home"] .hero h1 .slot > .sw { grid-area: 1 / 1; }
  main.page[data-page="home"] .hero h1 .slot .sw { position: static; }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(3) { font-size: min(1em, calc((100vw - 44px) / 5.35)); }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(4) { font-size: min(1em, calc((100vw - 44px) / 4.85)); }
  main.page[data-page="home"] .hero h1 .slot .sw:nth-child(5) { font-size: min(1em, calc((100vw - 44px) / 5.2)); }
}

/* =====================================================================
   v2.15.2: Contact: "Prefer email?" sits under the form again; phones lose the header language pill
   (the switch stays in the opened menu)
   ===================================================================== */
@media (min-width: 1024px) { main.page[data-page="contact"] .info-block.mail-phone { display: none !important; } }
@media (max-width: 1023px) {
  main.page[data-page="contact"] .info-block.mail-desk { display: none !important; }
  main.page[data-page="contact"] .info-block.mail-phone { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
  main.page[data-page="contact"] .info-block.mail-phone h3 { font-size: 17px; color: var(--navy); margin: 0; }
  main.page[data-page="contact"] .info-block.mail-phone a { font-size: 16px; font-weight: 500; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
}
/* v2.15.3: the language switch stays in the header and is no longer repeated in the drop-down menu */
.mobile-menu .mm-lang { display: none !important; }

/* =====================================================================
   v2.15.5: roomier question pills (About) and a readable line length in the Contact cards
   ===================================================================== */
.ask-q, .mat-chip { padding: 12px 24px; line-height: 1.3; }
main.page[data-page="contact"] .info-card p { max-width: 56ch !important; }

/* =====================================================================
   v2.15.6: Home founder cards: the bio no longer animates height or margin (layout properties).
   It fades and slides in with opacity and transform only.
   ===================================================================== */
[data-page="home"] .founder-bio { transition: opacity .45s ease .05s, transform .5s ease; }

/* v2.15.7: the email block under the form on phones sits in the page column, not inside the form */
@media (max-width: 1023px) { main.page[data-page="contact"] .info-block.mail-phone { margin: 0; padding: 28px 0 8px; border-top: 0; } }

/* =====================================================================
   v2.15.9: phones: the rolling word no longer pokes into the line above ("The") while it moves.
   The window is cut close to the top of the word and kept a little roomier at the bottom for descenders.
   ===================================================================== */
@media (max-width: 760px) {
  main.page[data-page="home"] .hero h1 .slot { clip-path: inset(0 -100vw -.1em -.1em); }
}

/* =====================================================================
   v2.15.10: the first change (match to planner) comes sooner. The animation starts partway
   into the first pause, so the first change happens at about 1.1 s instead of 2.4 s.
   The rhythm between the words is unchanged.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  main.page[data-page="home"] .hero h1 .slot em, main.page[data-page="home"] .hero h1 .slot .sw { animation-delay: -.9s; }
}


/* CV form [bondforce_cv_form] */
.cvf { box-sizing: border-box; width: 100%; max-width: 640px; margin: 36px 0 0; text-align: left; background: #fff; color: #1A3A5C; border: 1px solid #DCE5EF; border-radius: 16px; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; font-size: 16px; line-height: 1.5; }
.cvf * { box-sizing: border-box; }
.cvf-note { font-size: 14px; color: #52627A; }
.cvf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cvf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cvf-field label { font-size: 14px; font-weight: 700; color: #1A3A5C; }
.cvf-field input { width: 100%; height: 50px; border: 1px solid #B8C6D6; border-radius: 8px; padding: 0 14px; font: inherit; font-size: 16px; color: #1A3A5C; background: #fff; }
.cvf-field input:focus, .cvf-btn:focus-visible, .cvf-file input:focus-visible + .cvf-drop { outline: 2px solid #2E6DA4; outline-offset: 2px; }
.cvf-file { position: relative; }
.cvf-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cvf-drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #8FA6BD; border-radius: 10px; background: #F4F8FC; color: #1A3A5C; cursor: pointer; }
.cvf-file.has-file .cvf-drop { border-style: solid; border-color: #2E6DA4; }
.cvf-drop svg { flex: none; }
.cvf-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cvf-drop-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.cvf-drop-hint { font-size: 13px; color: #52627A; }
.cvf-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; color: #52627A; cursor: pointer; }
.cvf-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #1A3A5C; }
.cvf-consent a { color: #2E6DA4; }
.cvf-btn { align-self: flex-start; height: 54px; padding: 0 34px; background: #1A3A5C; color: #fff; border: 0; border-radius: 10px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.cvf-btn:hover { background: #2E6DA4; }
.cvf-err { font-size: 14px; font-weight: 600; color: #B3261E; }
.cvf-thanks { align-items: flex-start; gap: 10px; }
.cvf-check { width: 48px; height: 48px; border-radius: 50%; background: #E8F3EA; color: #2E7D32; display: flex; align-items: center; justify-content: center; }
.cvf-thanks-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; line-height: 1.25; }
.cvf-thanks-text { color: #52627A; }
/* centred inside the dark "Let's talk" band */
.cta-band .cvf { margin: 16px auto 0; }
@media (max-width: 640px) { .cvf { padding: 22px 18px; } .cvf-row { grid-template-columns: 1fr; } .cvf-btn { width: 100%; align-self: stretch; } }


/* v2.15.25: single vacancy page uses the Open roles split layout */
main.page[data-page="roles"] .role-e-hero .role-back { color: inherit; text-decoration: none; }
main.page[data-page="roles"] .role-e-hero .role-back:hover { text-decoration: underline; }
main.page[data-page="roles"] .role-facts { margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 20px; }
main.page[data-page="roles"] .role-facts dt { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #F2B162; margin: 0 0 4px; }
main.page[data-page="roles"] .role-facts dd { margin: 0; font-size: 18px; line-height: 1.45; color: #fff; }
main.page[data-page="roles"] .role-body { background: #fff; padding: 56px 24px 72px; }
main.page[data-page="roles"] .role-body .role-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; margin: 0 0 56px; max-width: 760px; }
main.page[data-page="roles"] .role-body .detail-h { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: none; color: var(--orange-text); margin: 0 0 14px; line-height: 1.3; }
main.page[data-page="roles"] .role-body .detail-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
main.page[data-page="roles"] .role-body .detail-block li { font-size: 17px; line-height: 1.55; color: var(--navy); }
main.page[data-page="roles"] .role-body .detail-block li::before { color: var(--blue); }
main.page[data-page="roles"] .role-apply { border-top: 1px solid var(--rule); padding-top: 40px; }
main.page[data-page="roles"] .role-apply-h { font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 12px; }
main.page[data-page="roles"] .role-apply .role-note { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 0 0 28px; }
main.page[data-page="roles"] .role-apply .cvf { margin: 0; }
main.page[data-page="roles"] .role-ask { margin: 24px 0 0; font-size: 16px; }
main.page[data-page="roles"] .role-ask a { color: var(--blue); text-decoration: none; font-weight: 600; }
main.page[data-page="roles"] .role-ask a:hover { text-decoration: underline; }
main.page[data-page="roles"] .role-body .role-filled { margin-bottom: 40px; }
@media (min-width: 1024px) {
  main.page[data-page="roles"] > .role-body { grid-column: 2; grid-row: 1 / span 2; padding: 72px 64px 96px; }
  main.page[data-page="roles"] .role-e-hero h1 { font-size: clamp(44px, 4.4vw, 72px) !important; line-height: 1.03 !important; max-width: none; }
  main.page[data-page="roles"] .role-e-hero .e-sub { max-width: 34ch; font-size: 19px; text-wrap: balance; }
}
@media (min-width: 640px) and (max-width: 1023px) { main.page[data-page="roles"] .role-body { padding: 56px 40px 72px; } }
/* v2.15.25: keep the small section labels small on phones too */
main.page[data-page="roles"] .role-body h2.detail-h { font-size: 14px !important; line-height: 1.3 !important; letter-spacing: .4px !important; margin-bottom: 14px !important; }
main.page[data-page="roles"] .role-body h2.role-apply-h { font-size: 30px !important; line-height: 1.15 !important; }
@media (max-width: 1023px) { main.page[data-page="roles"] .role-body .role-detail-grid { gap: 32px; } }

.cvf-opt { font-weight: 400; color: #52627A; }
.cvf-err[hidden] { display: none; }

/* v2.15.34: employer form uses the CV form's look; selects need the same styling as inputs */
.cvf-field select { width: 100%; height: 50px; border: 1px solid #B8C6D6; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 16px; color: #1A3A5C; background: #fff; }
.cvf-field select:focus { outline: 2px solid #2E6DA4; outline-offset: 2px; }
.cvf-privacy { cursor: default; margin: 0; }