/* =========================================================
   Oneira Talent Solutions — v2
   Visual clone of hub-scale.com's design system:
   glass pill nav, dark photo/video panels, gradient-mesh
   floating cards, rounded everything, DM Sans.
   Brand blue swapped to Oneira's #1C6CC4.
   ========================================================= */

:root {
  --bg: #E2E7EC;
  --panel: #FFFFFF;
  --ink: #0B0D10;
  --ink-soft: #4B5563;
  --ink-faint: #8A93A0;
  --line: rgba(11,13,16,0.08);

  --accent: #1C6CC4;
  --accent-soft: rgba(28,108,196,0.4);
  --accent-wash: #EAF1FA;

  --dark: #0A0E14;
  --dark-ink: #F2F4F7;
  --dark-ink-soft: #A7B0BD;
  --dark-line: rgba(255,255,255,0.12);

  --face: 'DM Sans', Arial, sans-serif;

  --r-pill: 999px;
  --r-lg: 40px;
  --r-md: 28px;
  --r-sm: 16px;

  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 420ms;

  --container: 1240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--face);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--face);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--sp-4); color: var(--ink-soft); }
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 560px; }

.eyebrow {
  font-family: var(--face);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-3);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-16) 0; }
@media (max-width: 700px) { .section { padding: var(--sp-12) 0; } }

/* Buttons — pill, glass */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--face);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--accent); }

.btn--accent { background: var(--accent-soft); color: #fff; border-color: rgba(255,255,255,0.5); backdrop-filter: blur(6px); }
.btn--accent:hover { background: var(--accent); }

.btn--glass { background: rgba(255,255,255,0.55); color: var(--ink); border-color: rgba(255,255,255,0.7); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255,255,255,0.85); }

.btn--on-dark { background: rgba(255,255,255,0.9); color: var(--dark); }
.btn--on-dark:hover { background: #fff; }

.btn--dark-pill { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25); backdrop-filter: blur(6px); }
.btn--dark-pill:hover { background: rgba(255,255,255,0.2); }

.icon-chip {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  transition: background var(--dur-fast) var(--ease);
}
.icon-chip:hover { background: rgba(255,255,255,0.85); }
.icon-chip svg { width: 18px; height: 18px; }

/* =========================================================
   Nav — two floating glass pills
   ========================================================= */

.site-header {
  position: fixed;
  top: var(--sp-4);
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 var(--sp-6);
}

.nav-row {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand-pill, .nav-actions-pill {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 30px rgba(11,13,16,0.06);
}

.brand-pill {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  flex-shrink: 0;
}
.brand-pill img { height: 28px; width: auto; flex-shrink: 0; }

.nav-actions-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  flex-shrink: 0;
}

/* Narrow phones: both pills at natural size don't fit one row.
   Shrink the logo slightly and drop the LinkedIn icon from the nav
   (it's always reachable from the footer) rather than let anything distort. */
@media (max-width: 430px) {
  .brand-pill img { height: 22px; }
  .nav-actions-pill .icon-chip { display: none; }
}

.nav-links {
  display: none;
}

@media (min-width: 901px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    list-style: none;
    margin: 0;
    padding: var(--sp-2) var(--sp-8);
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    border-radius: var(--r-pill);
    box-shadow: 0 8px 30px rgba(11,13,16,0.06);
  }
  .nav-links a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease);
  }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
}

.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
/* Only needed below 901px — .nav-links (the full pill) covers desktop */
@media (min-width: 901px) { .nav-toggle { display: none; } }

.nav-links-mobile {
  display: none;
  position: fixed;
  inset: 90px var(--sp-6) auto var(--sp-6);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: 0 20px 60px rgba(11,13,16,0.15);
  z-index: 99;
}
.nav-links-mobile.is-open { display: block; }
.nav-links-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.nav-links-mobile a { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
@media (min-width: 901px) { .nav-links-mobile { display: none !important; } }

/* =========================================================
   Hero — full-bleed dark panel
   ========================================================= */

.hero-scroll-wrap {
  position: relative;
}

.hero {
  position: relative;
  height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(180deg, #05070B 0%, #0E1420 45%, #16202E 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(28,108,196,0.25), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.4) 100%);
}

.hero-inner {
  position: relative;
  padding-bottom: var(--sp-24);
  max-width: 900px;
}

.hero h1 { color: #fff; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #6FA8E8, #3E86D6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { color: var(--dark-ink-soft); margin-top: var(--sp-4); }

/* =========================================================
   Path chooser — big gradient-mesh glass card
   ========================================================= */

.path-card {
  border-radius: var(--r-lg);
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(28,108,196,0.35), transparent 50%),
    linear-gradient(135deg, #DCEBFB 0%, #B9D9F5 50%, #DCEBFB 100%);
  box-shadow: 0 30px 80px rgba(28,108,196,0.15);
}
.path-card h2 { margin-bottom: var(--sp-6); }
.path-card-actions {
  display: inline-flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
}

/* =========================================================
   Dark photo panel (Who We Are)
   ========================================================= */

.dark-panel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background:
    radial-gradient(circle at 75% 20%, rgba(28,108,196,0.4), transparent 55%),
    linear-gradient(160deg, #0F1520 0%, #1B2636 60%, #263447 100%);
}
.dark-panel-inner { position: relative; padding: var(--sp-12); max-width: 560px; }
.dark-panel h2 { color: #fff; }
.dark-panel p { color: var(--dark-ink-soft); margin-bottom: 0; }

/* =========================================================
   Services carousel — horizontal scroll-snap, gradient cards
   ========================================================= */

.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.carousel-nav { display: flex; gap: var(--sp-3); }
.carousel-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.carousel-nav button:hover { background: var(--accent-wash); }
.carousel-nav svg { width: 18px; height: 18px; }

.carousel-track {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.service-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.service-card h3 { font-size: 1.6rem; max-width: 220px; }
.service-card p { color: rgba(11,13,16,0.65); font-size: 0.92rem; max-width: 240px; margin-bottom: 0; }
.service-card .mark {
  align-self: flex-end;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.8);
  display: inline-flex; align-items: center; justify-content: center;
}
.service-card .mark svg { width: 18px; height: 18px; }

.service-card--a { background: linear-gradient(160deg, #F3F8FE 0%, #CFE4FA 55%, #9BC5EE 100%); }
.service-card--b { background: linear-gradient(160deg, #EAF2FE 0%, #B7D2F5 45%, #6FA0DE 100%); }
.service-card--c { background: linear-gradient(160deg, #DDEAFB 0%, #8FB9EA 55%, #4A82C6 100%); }
.service-card--d { background: linear-gradient(160deg, #E7F0FC 0%, #A9CBF2 50%, #5C8FCB 100%); }

.carousel-dots { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.carousel-dots span { width: 28px; height: 4px; border-radius: 2px; background: var(--line); }
.carousel-dots span.is-active { background: var(--accent); }

/* =========================================================
   Dark CTA band (Executive Search)
   ========================================================= */

.dark-cta {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--sp-16) var(--sp-12);
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 75% 30%, rgba(28,108,196,0.5), transparent 55%), var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.dark-cta h2 { color: #fff; max-width: 420px; }
.dark-cta p { color: var(--dark-ink-soft); max-width: 320px; }
.dark-cta-orb {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), rgba(28,108,196,0.4) 45%, rgba(10,14,20,0.9) 80%);
  flex-shrink: 0;
  filter: blur(0.5px);
}

/* Partner logo strip */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: var(--sp-8) 0;
  opacity: 0.6;
  filter: grayscale(1);
}
.logo-strip-label {
  font-family: var(--face);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--sp-4);
}
.press-logo { height: 26px; width: auto; object-fit: contain; }
.press-logo--ab { height: 34px; }

/* Below this width, label + 2 logos don't fit one row — wrapping with
   justify-content:center then groups them unevenly (label pairs with
   whichever logo is next in flow, the other falls alone). Stack instead
   so everything's consistently centered. */
@media (max-width: 560px) {
  .logo-strip { flex-direction: column; gap: var(--sp-5); }
  .logo-strip-label { margin-right: 0; }
}

/* =========================================================
   Insights
   ========================================================= */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 800px) { .insights-grid { grid-template-columns: 1fr; } }

.insights-col-label {
  font-family: var(--face);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}

.insights-rows { display: grid; gap: var(--sp-3); }
.thumb--linkedin {
  background: #0A66C2 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.thumb--linkedin svg { width: 100%; height: 100%; color: #fff; }
.insight-row-glass {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.insight-row-glass:hover { background: #fff; }
.insight-row-glass .thumb {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #CFE4FA, #6FA0DE);
  flex-shrink: 0;
}
.insight-row-glass h3 { font-size: 0.98rem; margin: 0; flex: 1; }
.insight-row-glass .go {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(11,13,16,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.insight-row-glass .go svg { width: 14px; height: 14px; }

.insight-feature {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(11,13,16,0.08);
}
.insight-feature .bar { height: 8px; background: linear-gradient(90deg, var(--accent), #6FA0DE); }
.insight-feature-body { padding: var(--sp-8); }
.insight-feature-body p { font-size: 0.92rem; }

/* =========================================================
   Testimonials — masonry glass wall
   ========================================================= */

.testimonial-wrap {
  border-radius: var(--r-lg);
  padding: var(--sp-16) var(--sp-8);
  background: radial-gradient(circle at 30% 20%, rgba(28,108,196,0.15), transparent 50%), var(--bg);
}
.testimonial-grid {
  columns: 3 280px;
  column-gap: var(--sp-6);
}
@media (max-width: 900px) { .testimonial-grid { columns: 2 240px; } }
@media (max-width: 600px) { .testimonial-grid { columns: 1; } }

.t-card {
  break-inside: avoid;
  margin-bottom: var(--sp-6);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.t-card .who { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.t-card .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #CFE4FA, #6FA0DE);
  flex-shrink: 0;
}
.t-card .name { font-weight: 700; font-size: 0.92rem; color: var(--accent); }
.t-card .role { font-size: 0.78rem; color: var(--ink-faint); }
.t-card p { font-size: 0.92rem; color: var(--ink); margin: 0; }
.t-card .placeholder-flag {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* =========================================================
   Contact
   ========================================================= */

.contact-card {
  border-radius: var(--r-lg);
  padding: var(--sp-12);
  background: #fff;
  box-shadow: 0 20px 60px rgba(11,13,16,0.08);
}
.contact-tabs { display: inline-flex; gap: var(--sp-2); background: var(--bg); padding: var(--sp-2); border-radius: var(--r-pill); margin-bottom: var(--sp-8); }
.contact-tabs a, .contact-tabs button {
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--face);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.contact-tabs a.is-active, .contact-tabs button.is-active { background: var(--ink); color: #fff; }

/* Contact form */
.contact-form-card { max-width: 640px; margin: 0 auto; }
.field { margin-bottom: var(--sp-6); }
.field label {
  display: block;
  font-family: var(--face);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--sp-2);
}
.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--face);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 120px; }
.field input[type="file"] { padding: 0.6rem; background: #fff; border-style: dashed; }
.field .error-msg { display: none; color: #C0392B; font-size: 0.8rem; margin-top: var(--sp-2); }
.field.has-error input, .field.has-error textarea { border-color: #C0392B; }
.field.has-error .error-msg { display: block; }
.field-note { font-size: 0.8rem; color: var(--ink-faint); margin: var(--sp-2) 0 0; }
.field[hidden] { display: none; }

.form-status { margin-top: var(--sp-4); font-size: 0.9rem; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.form-status.is-visible { opacity: 1; }
.form-status.success { color: var(--accent); }
.form-status.error { color: #C0392B; }

.upload-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  margin-top: var(--sp-4);
}
.upload-row p { margin: 0; font-size: 0.85rem; }

/* =========================================================
   Footer — giant wordmark
   ========================================================= */

.site-footer {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--r-lg);
  margin: 0 var(--sp-6) var(--sp-6);
  padding: var(--sp-16) var(--sp-8) var(--sp-8);
}
@media (max-width: 700px) { .site-footer { margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-12) var(--sp-6) var(--sp-6); } }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--dark-line);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

.footer-top p { color: var(--dark-ink-soft); font-size: 0.92rem; max-width: 280px; }
.footer-col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-col a { color: var(--dark-ink-soft); font-size: 0.92rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: #fff; }

.footer-word {
  height: clamp(4rem, 11vw, 8rem);
  width: auto;
  filter: brightness(0) invert(1);
  margin: var(--sp-12) 0 var(--sp-6);
  display: block;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: 0.8rem;
  color: var(--dark-ink-soft);
}
.footer-bottom a { color: var(--dark-ink-soft); }
.footer-bottom a:hover { color: #fff; }
.footer-links { display: flex; align-items: center; gap: var(--sp-4); }
.footer-social-link {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.footer-social-link:hover { background: rgba(255,255,255,0.18); }
.footer-social-link svg { width: 15px; height: 15px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* =========================================================
   About page — header glow, founder photo card, differentiator grid
   ========================================================= */

/* .site-header is position:fixed (floats over the homepage's full-bleed video
   hero) — pages with no hero underneath it need their own top clearance so
   content doesn't render behind the floating nav. Reuse this padding-top on
   any future page's opening section. */
.page-header, .about-header { position: relative; overflow: hidden; padding-top: 11rem; }
.page-header-glow, .about-header-glow {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,108,196,0.28), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.page-header .container, .about-header .container { position: relative; z-index: 1; }

.origin-panel {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(28,108,196,0.28), transparent 50%),
    linear-gradient(135deg, #EDF3FB 0%, #DCEBFB 50%, #EDF3FB 100%);
  box-shadow: 0 30px 80px rgba(28,108,196,0.14);
}
.origin-quote {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.25;
  margin: var(--sp-4) 0 var(--sp-6);
}
.origin-panel > p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto var(--sp-8);
}
.fact-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-8);
  border-top: 1px solid rgba(28,108,196,0.18);
  border-bottom: 1px solid rgba(28,108,196,0.18);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.fact-bar strong { color: var(--ink); }
.fact-bar .sep { color: rgba(28,108,196,0.3); }
.origin-byline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
}
.origin-byline img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.origin-byline .name { font-weight: 700; font-size: 0.92rem; color: var(--accent); }
.origin-byline .role { font-size: 0.78rem; color: var(--ink-faint); }

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } }

.diff-card {
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.diff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(28,108,196,0.22);
}
.diff-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.diff-card p { font-size: 0.9rem; color: rgba(11,13,16,0.65); margin-bottom: 0; }

/* Staggered entrance — each card reveals individually rather than as one block */
.diff-grid .diff-card.reveal:nth-child(1) { transition-delay: 0ms; }
.diff-grid .diff-card.reveal:nth-child(2) { transition-delay: 80ms; }
.diff-grid .diff-card.reveal:nth-child(3) { transition-delay: 160ms; }
.diff-grid .diff-card.reveal:nth-child(4) { transition-delay: 240ms; }
.diff-grid .diff-card.reveal:nth-child(5) { transition-delay: 320ms; }
.diff-grid .diff-card.reveal:nth-child(6) { transition-delay: 400ms; }

.diff-card--a { background: linear-gradient(160deg, #F3F8FE 0%, #CFE4FA 55%, #9BC5EE 100%); }
.diff-card--b { background: linear-gradient(160deg, #EAF2FE 0%, #B7D2F5 45%, #6FA0DE 100%); }
.diff-card--c { background: linear-gradient(160deg, #DDEAFB 0%, #8FB9EA 55%, #4A82C6 100%); }
.diff-card--d { background: linear-gradient(160deg, #E7F0FC 0%, #A9CBF2 50%, #5C8FCB 100%); }
.diff-card--e { background: linear-gradient(160deg, #F0F5FD 0%, #C3DCF6 50%, #7FADE0 100%); }
.diff-card--f { background: linear-gradient(160deg, #E2ECFB 0%, #9FC1EC 50%, #3D74B8 100%); }

/* =========================================================
   Executive Search page — numbered process list, featured quote
   ========================================================= */

.process-list {
  border-top: 1px solid var(--line);
}
.process-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background var(--dur-fast) var(--ease);
}
.process-row:hover { background: var(--accent-wash); }
.process-num {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.32;
  transition: opacity var(--dur-fast) var(--ease);
  line-height: 1;
}
.process-row:hover .process-num { opacity: 0.7; }
.process-row h3 { margin-bottom: var(--sp-2); }
.process-row p { margin: 0; color: var(--ink-soft); max-width: 560px; }
@media (max-width: 600px) {
  .process-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}

.process-list .process-row.reveal:nth-child(1) { transition-delay: 0ms; }
.process-list .process-row.reveal:nth-child(2) { transition-delay: 70ms; }
.process-list .process-row.reveal:nth-child(3) { transition-delay: 140ms; }
.process-list .process-row.reveal:nth-child(4) { transition-delay: 210ms; }
.process-list .process-row.reveal:nth-child(5) { transition-delay: 280ms; }

.featured-quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(28,108,196,0.28), transparent 50%),
    linear-gradient(135deg, #EDF3FB 0%, #DCEBFB 50%, #EDF3FB 100%);
  box-shadow: 0 30px 80px rgba(28,108,196,0.14);
}
.featured-quote blockquote {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  margin: var(--sp-6) 0;
  color: var(--ink);
}
.featured-quote .who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.featured-quote .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #CFE4FA, #6FA0DE);
  flex-shrink: 0;
}
.featured-quote .name { font-weight: 700; font-size: 0.92rem; color: var(--accent); }
.featured-quote .role { font-size: 0.78rem; color: var(--ink-faint); }

/* =========================================================
   Services page — specialism cards, satellite tag row
   ========================================================= */

.specialism-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
@media (max-width: 800px) { .specialism-grid { grid-template-columns: 1fr; } }

.specialism-card {
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  background: linear-gradient(160deg, #F3F8FE 0%, #CFE4FA 55%, #9BC5EE 100%);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.specialism-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(28,108,196,0.22);
}
.specialism-card:nth-child(2) { background: linear-gradient(160deg, #EAF2FE 0%, #B7D2F5 45%, #6FA0DE 100%); }
.specialism-card h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 1.3rem; }
.specialism-card p { margin: 0; color: rgba(11,13,16,0.65); }

.satellite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.satellite-label {
  font-family: var(--face);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-right: var(--sp-2);
}
.satellite-tag {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* =========================================================
   Insights page — press card grid, two-column LinkedIn rows
   ========================================================= */

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .press-grid { grid-template-columns: 1fr; } }

.press-card {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(11,13,16,0.08);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.press-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(28,108,196,0.22);
}
.press-card-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.press-card-body { padding: var(--sp-6); }
.press-card-body .eyebrow { margin-bottom: var(--sp-2); }
.press-card-body h3 { font-size: 1.05rem; margin: 0; line-height: 1.35; }

.insights-rows-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 700px) { .insights-rows-2col { grid-template-columns: 1fr; } }

/* =========================================================
   Executive Search — track record / mandate list
   ========================================================= */

.mandate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}
@media (max-width: 700px) { .mandate-grid { grid-template-columns: 1fr; } }

.mandate-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.mandate-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.mandate-role { font-weight: 700; font-size: 0.95rem; }
.mandate-org { font-size: 0.85rem; color: var(--ink-faint); }