/* ==========================================================================
   Mohammad Haseeb Iqbal: personal website — stylesheet

   HOW THIS FILE IS ORDERED
     1. Colour, type and spacing tokens (:root, just below) — change colours here
     2. Base elements, buttons, header, hero
     3. Each section of the page in the order it appears
     4. Motion
     5. Later blocks (search for the ===== banners) refine what came before:
        compiled CV content, polish pass, colour pass, header and reveals.
        CSS applies the LAST matching rule, so if a value here looks ignored,
        search for the same selector further down the file.

   Mohammad Haseeb Iqbal: portfolio
   Design system: design-system/haseeb-iqbal/MASTER.md (ui-ux-pro-max)
   Style: Accessible, minimal Swiss · Pattern: Trust & Authority
   ========================================================================== */

:root {
  /* Colour tokens */
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-accent: #0369A1;
  --color-accent-hover: #075985;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  --color-foreground: #020617;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-tint: #E0F2FE;
  --color-ring: #0369A1;
  --portrait-bg: #DCE7F0;

  /* Type */
  --font-heading: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing (spacious density) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18);

  --container: 1120px;
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Motion tokens (ui-ux-pro-max: expo-out for entrances, short offsets, faster exits) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-enter: 650ms;
  --stagger: 70ms;
  --rise: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #E2E8F0;
    --color-on-primary: #0F172A;
    --color-secondary: #CBD5E1;
    --color-accent: #38BDF8;
    --color-accent-hover: #7DD3FC;
    --color-on-accent: #0B1220;
    --color-background: #0B1220;
    --color-surface: #111A2E;
    --color-surface-alt: #0E1628;
    --color-foreground: #F1F5F9;
    --color-muted-foreground: #A3B1C6;
    --color-border: #1F2A40;
    --color-border-strong: #2C3A55;
    --color-tint: #0C2A40;
    --color-ring: #38BDF8;
    --portrait-bg: #1A2740;
    --shadow-sm: none;
    --shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }

:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-on-accent); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) { .container { padding-inline: 32px; } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-heading); font-weight: 500; font-size: 1rem;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

.btn-ghost { border-color: var(--color-border-strong); color: var(--color-foreground); background: transparent; }
.btn-ghost:hover { border-color: var(--color-foreground); color: var(--color-foreground); }

.btn-light { background: #FFFFFF; color: #0F172A; }
.btn-light:hover { background: #E0F2FE; color: #0F172A; }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; }
.btn-outline-light:hover { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

.btn .icon { transition: transform 200ms var(--ease); }
.btn:hover .icon { transform: translateX(2px); }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; text-decoration: none;
  min-height: 44px;
}
.text-link:hover { text-decoration: underline; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-background) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), transform 300ms var(--ease-out-expo);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); }
.site-header.is-hidden { transform: translateY(-100%); transition: border-color var(--dur) var(--ease), transform 200ms var(--ease-in); }
.site-header:focus-within { transform: none; }

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--color-foreground); text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  min-height: 44px;
}
.brand:hover { color: var(--color-foreground); }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: 0.875rem; letter-spacing: 0.02em;
}

.nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-foreground); cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) {
  display: flex; align-items: center; min-height: 44px;
  color: var(--color-muted-foreground); text-decoration: none; font-weight: 600;
  transition: color 150ms var(--ease);
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="true"] { color: var(--color-foreground); }
@media (min-width: 1200px) {
  .site-nav a:not(.btn) { position: relative; }
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
    background: var(--color-accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease-out-expo);
  }
  .site-nav a:not(.btn):hover::after,
  .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
}

/* Mobile nav panel */
@media (max-width: 1199px) {
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: var(--space-3) 20px var(--space-5);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav li + li { border-top: 1px solid var(--color-border); }
  .site-nav li:last-child { border-top: 0; padding-top: var(--space-4); }
  .site-nav .btn { width: 100%; }
}

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .site-nav ul { display: flex; align-items: center; gap: var(--space-5); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: var(--space-7) 0 var(--space-8); }
@media (min-width: 900px) { .hero { padding: var(--space-8) 0 var(--space-9); } }

.hero-grid {
  display: grid; gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-8); }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px; margin-bottom: var(--space-5);
  border-radius: 999px; background: var(--color-tint);
  color: var(--color-accent); font-weight: 600; font-size: 0.9375rem;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: #BAE6FD; } }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-foreground);
  margin-bottom: var(--space-5);
}

.lead {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--color-foreground);
  max-width: 34ch;
  font-weight: 500;
}
.hero-sub { color: var(--color-muted-foreground); max-width: 56ch; font-size: 1.125rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.hero-portrait {
  margin: 0;
  justify-self: center;
  width: min(100%, 400px);
}
/* Transparent cut-out sits straight on the page; bottom fades out so the shoulders have no hard edge */
.hero-portrait img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 98%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 899px) { .hero-portrait { order: -1; width: min(64%, 280px); } }

.proof {
  list-style: none; margin: var(--space-8) 0 0; padding: var(--space-6) 0 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.proof li { display: flex; flex-direction: column; gap: var(--space-1); }
.proof strong {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.proof span { color: var(--color-muted-foreground); font-size: 0.9375rem; line-height: 1.45; }

/* --- Sections ------------------------------------------------------------ */
.section { padding: var(--space-8) 0; }
@media (min-width: 900px) { .section { padding: var(--space-9) 0; } }
.section-alt { background: var(--color-surface-alt); border-block: 1px solid var(--color-border); }

.section-head { max-width: 680px; margin-bottom: var(--space-7); }
.kicker {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.section-head h2, .story-copy h2, .contact h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 600;
  margin-bottom: var(--space-4);
}
.section-intro { color: var(--color-muted-foreground); font-size: 1.125rem; }
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker-num {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--color-tint); color: var(--color-accent);
  font-size: 0.75rem; letter-spacing: 0.04em;
}
.kicker-light .kicker-num { background: rgba(125, 211, 252, 0.14); color: #7DD3FC; }

.inline-cta {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-surface);
}
.inline-cta p { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.125rem; color: var(--color-foreground); }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%; background: var(--color-accent);
  transform: scaleX(var(--scroll, 0)); transform-origin: left;
}
.more-body { overflow: hidden; }

/* --- Cards --------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--ease-out-expo);
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow); transform: translateY(-4px); }
.card:hover::before { transform: scaleX(1); }
.card-icon { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 400ms var(--ease-out-expo); }
.card:hover .card-icon { background: var(--color-accent); color: var(--color-on-accent); transform: scale(1.06); }
.cert { transition: border-color var(--dur) var(--ease), transform 400ms var(--ease-out-expo), box-shadow var(--dur) var(--ease); }
.cert:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.tags li { transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tags li:hover { border-color: var(--color-accent); color: var(--color-accent); }
.card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-3); }
.card p { color: var(--color-muted-foreground); }

.card-icon {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--color-tint); color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.card-icon .icon { width: 24px; height: 24px; }

.skills { margin-top: var(--space-7); }
.skills-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-4); color: var(--color-foreground); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags li {
  padding: 8px 14px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-secondary); font-weight: 600; font-size: 0.9375rem;
}

/* --- Timeline ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px;
  width: 2px; background: var(--color-border-strong);
}
.timeline-item { position: relative; padding-left: 40px; padding-bottom: var(--space-7); display: grid; gap: var(--space-2); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-surface); border: 3px solid var(--color-accent);
}
.timeline::after {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px;
  width: 2px; background: var(--color-accent);
  transform: scaleY(var(--progress, 0)); transform-origin: top;
}
.timeline-item::before { z-index: 1; transition: background-color var(--dur) var(--ease); }
.timeline-item.is-reached::before { background: var(--color-accent); animation: dot-pop 500ms var(--ease-out-expo); }
.no-timeline .timeline-item:first-child::before { background: var(--color-accent); }
@keyframes dot-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (min-width: 900px) {
  .timeline::before, .timeline::after { left: 207px; }
  .timeline-item { grid-template-columns: 180px 1fr; gap: var(--space-8); padding-left: 0; }
  .timeline-item::before { left: 200px; }
  .timeline-meta { text-align: right; }
}

.timeline-date { font-family: var(--font-heading); font-weight: 500; color: var(--color-muted-foreground); font-size: 0.9375rem; }
.timeline-body h3 { font-size: 1.375rem; font-weight: 600; }
.role { color: var(--color-accent); font-weight: 600; margin: var(--space-1) 0 var(--space-3); }
.timeline-body ul { margin: 0; padding-left: 1.1em; color: var(--color-muted-foreground); }
.timeline-body li + li { margin-top: var(--space-2); }
.timeline-body li::marker { color: var(--color-border-strong); }

/* --- Projects ------------------------------------------------------------ */
.project { display: flex; flex-direction: column; }
.project-tag {
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-accent); margin-bottom: var(--space-3) !important;
}
.project h3 { margin-bottom: var(--space-1); }
.project-role { font-weight: 600; color: var(--color-secondary) !important; margin-bottom: var(--space-4) !important; font-size: 0.9375rem; }

/* --- Quotes -------------------------------------------------------------- */
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.quote-mark { width: 28px; height: 28px; color: var(--color-accent); opacity: 0.6; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 1.125rem; color: var(--color-foreground); line-height: 1.55; }
.quote figcaption { margin-top: auto; font-family: var(--font-heading); font-weight: 600; }
.quote figcaption span { display: block; font-family: var(--font-body); font-weight: 400; color: var(--color-muted-foreground); font-size: 0.9375rem; }

/* --- Certifications ------------------------------------------------------ */
.cert-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
}
@media (min-width: 700px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cert {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5);
}
.cert h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--space-1); }
.cert p { color: var(--color-muted-foreground); font-size: 0.9375rem; margin: 0; }
.cert .text-link { min-height: 36px; font-size: 0.9375rem; margin-top: var(--space-1); }
.cert-logo { width: 56px; height: 56px; flex: none; object-fit: contain; }
.cert-logo-text, .cert-logo-icon {
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em;
}
.cert-logo-icon { background: var(--color-tint); color: var(--color-accent); }
.cert-logo-icon .icon { width: 26px; height: 26px; }

.in-progress { margin-top: var(--space-7); }

/* --- Story --------------------------------------------------------------- */
.story-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.4fr 0.8fr; gap: var(--space-8); } }
.story-copy p:not(.kicker) { color: var(--color-secondary); font-size: 1.125rem; max-width: 62ch; }

.more { margin-top: var(--space-2); }
.more summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 500; color: var(--color-accent);
}
.more summary::-webkit-details-marker { display: none; }
.more summary .icon { transition: transform 200ms var(--ease); }
.more[open] summary .icon { transform: rotate(180deg); }
.more[open] summary span::after { content: ""; }
.more p { margin-top: var(--space-4); }

.causes h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.125rem; margin-bottom: var(--space-4); }
.causes h3 .icon { color: var(--color-accent); }
.causes ul { list-style: none; margin: 0; padding: 0; }
.causes li + li { border-top: 1px solid var(--color-border); }
.causes a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 52px; color: var(--color-foreground); font-weight: 600; text-decoration: none;
}
.causes a .icon { color: var(--color-muted-foreground); transition: color 150ms var(--ease); }
.causes a:hover { color: var(--color-accent); }
.causes a:hover .icon { color: var(--color-accent); }

/* --- Contact ------------------------------------------------------------- */
.contact { background: #0F172A; color: #E2E8F0; padding: var(--space-8) 0; }
@media (min-width: 900px) { .contact { padding: var(--space-9) 0; } }
@media (prefers-color-scheme: dark) { .contact { background: #0E1A33; border-top: 1px solid var(--color-border); } }
.contact h2 { color: #FFFFFF; }
.contact p:not(.kicker) { color: #CBD5E1; font-size: 1.125rem; max-width: 46ch; }
.kicker-light { color: #7DD3FC; }
.contact-inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .contact-inner { grid-template-columns: 1.2fr 0.8fr; } }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) { .contact-actions { justify-content: flex-end; } }
.contact-email { width: 100%; font-size: 0.9375rem !important; color: #94A3B8 !important; margin: 0; }
@media (min-width: 900px) { .contact-email { text-align: right; } }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: #0F172A; color: #94A3B8; border-top: 1px solid rgba(255,255,255,0.08); }
@media (prefers-color-scheme: dark) { .site-footer { background: #0E1A33; } }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); }
.site-footer p { margin: 0; font-size: 0.9375rem; }
.site-footer .text-link { color: #CBD5E1; }
.site-footer .text-link:hover { color: #FFFFFF; }

/* --- Motion --------------------------------------------------------------
   Hero plays once on load; everything else reveals as it enters the viewport.
   Without JS (no .js class) or with reduced motion, all content is simply visible. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes portrait-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.js .hero-anim {
  animation: rise-in var(--dur-enter) var(--ease-out-expo) both;
  animation-delay: calc(80ms + var(--i, 0) * 90ms);
}
.js .hero-anim-portrait { animation: portrait-in 900ms var(--ease-out-expo) 200ms both; }

.js .reveal { opacity: 0; transform: translateY(var(--rise)); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-out-expo), transform var(--dur-enter) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
/* After the entrance, hover transitions must not inherit the stagger delay */
.js .reveal.is-done { transition-delay: 0s; }
.js .card.reveal.is-done { transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 400ms var(--ease-out-expo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .hero-anim, .js .hero-anim-portrait { opacity: 1; transform: none; animation: none; }
  .timeline::after { display: none; }
  .timeline-item.is-reached::before { animation: none; }
  .site-header.is-hidden { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .skip-link, .hero-actions, .contact-actions .btn { display: none; }
  .js .reveal, .js .hero-anim, .js .hero-anim-portrait { opacity: 1; transform: none; animation: none; }
  .scroll-progress { display: none; }
  .section-alt, .contact, .site-footer { background: none; color: #000; }
}

/* --- Compiled CV content (roles, skills, earlier career, credentials) ---- */
.timeline-body ul + .role { margin-top: var(--space-5); }
.role-date {
  display: inline-block; margin-left: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem;
  color: var(--color-muted-foreground); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 10px;
  vertical-align: 2px;
}

.skill-groups { margin-top: var(--space-7); display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .skill-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.earlier { margin-top: var(--space-8); }
.earlier-title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-5); }
.earlier-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .earlier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .earlier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.earlier-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5);
}
.earlier-item h4 { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; margin: 0 0 2px; }
.earlier-date { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted-foreground); margin-bottom: var(--space-2); }
.earlier-role { color: var(--color-accent); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-3); }
.earlier-item p:last-child { color: var(--color-muted-foreground); font-size: 0.9375rem; line-height: 1.5; }

.cert-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.cert-status {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; background: var(--color-surface-alt);
  border: 1px solid var(--color-border); color: var(--color-muted-foreground);
}
.cert-past .cert-logo { filter: grayscale(1); opacity: 0.7; }

.cert-extra { margin-top: var(--space-7); display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .cert-extra { grid-template-columns: 1.6fr 1fr; } }
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course-list a, .course-static {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-foreground); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.course-list small { display: block; font-weight: 400; color: var(--color-muted-foreground); font-size: 0.8125rem; margin-top: 2px; }
.course-list a .icon { color: var(--color-muted-foreground); }
.course-list a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.course-list a:hover .icon { color: var(--color-accent); }

.edu-grid { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.edu dl { margin: 0; }
.edu dt { font-weight: 600; color: var(--color-foreground); }
.edu dd { margin: 2px 0 var(--space-4); color: var(--color-muted-foreground); }
.edu dd:last-child { margin-bottom: 0; }

/* Kind words: grouped by employer */
.quote-group { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--space-4); color: var(--color-foreground); }
.quote-group span { font-family: var(--font-body); font-weight: 400; color: var(--color-muted-foreground); font-size: 1rem; }
.card-grid + .quote-group { margin-top: var(--space-7); }

/* S&P Global: role intro and red → amber → green status */
.role-intro { color: var(--color-secondary); margin: 0 0 var(--space-3); max-width: 64ch; }
.timeline-body li strong { color: var(--color-foreground); font-weight: 600; }
.rag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--color-muted-foreground); }
.rag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.rag-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rag-red   { color: #B91C1C; background: #FEE2E2; border-color: #FECACA; }
.rag-amber { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
.rag-green { color: #15803D; background: #DCFCE7; border-color: #BBF7D0; }
@media (prefers-color-scheme: dark) {
  .rag-red   { color: #FCA5A5; background: rgba(220, 38, 38, 0.16); border-color: rgba(220, 38, 38, 0.35); }
  .rag-amber { color: #FCD34D; background: rgba(217, 119, 6, 0.16); border-color: rgba(217, 119, 6, 0.35); }
  .rag-green { color: #86EFAC; background: rgba(22, 163, 74, 0.16); border-color: rgba(22, 163, 74, 0.35); }
}
/* Chips light up in sequence when the role scrolls into view */
.js .reveal .rag-chip, .js .reveal .rag .icon { opacity: 0; transform: translateY(6px); }
.js .reveal.is-visible .rag-chip, .js .reveal.is-visible .rag .icon {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.js .reveal.is-visible .rag > :nth-child(1) { transition-delay: 300ms; }
.js .reveal.is-visible .rag > :nth-child(2) { transition-delay: 500ms; }
.js .reveal.is-visible .rag > :nth-child(3) { transition-delay: 650ms; }
.js .reveal.is-visible .rag > :nth-child(4) { transition-delay: 850ms; }
.js .reveal.is-visible .rag > :nth-child(5) { transition-delay: 1000ms; }
@media (prefers-reduced-motion: reduce) { .js .reveal .rag-chip, .js .reveal .rag .icon { opacity: 1; transform: none; } }

/* S&P highlight tiles inside the timeline */
.role-stats {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .role-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role-stats li {
  margin: 0 !important; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.role-stats strong { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--color-foreground); letter-spacing: -0.01em; }
.role-stats span { font-size: 0.875rem; line-height: 1.4; color: var(--color-muted-foreground); }
.timeline-body .role-stats li::marker { content: none; }

/* Featured case study */
.case-study { margin-bottom: var(--space-5); padding: var(--space-6); }
@media (min-width: 900px) { .case-study { padding: var(--space-7); } }
.case-head h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: var(--space-1); }
.case-head .rag { margin-top: var(--space-3); }
.case-cols { display: grid; gap: var(--space-6); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
@media (min-width: 900px) { .case-cols { grid-template-columns: 1fr 1.3fr 1fr; gap: var(--space-7); } }
.case-cols h4 {
  font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin: 0 0 var(--space-3);
}
.case-cols p, .case-cols li { color: var(--color-muted-foreground); }
.case-cols ul { margin: 0; padding-left: 1.1em; }
.case-cols li + li { margin-top: var(--space-2); }
.case-cols li::marker { color: var(--color-accent); }

.timeline-body .role-stats { padding-left: 0; }

/* Highlight tiles adapt to 3 or 4 items */
.timeline-body .role-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ==========================================================================
   Polish pass: tighter rhythm, hero depth, delivery line, quieter quotes
   ========================================================================== */
:root { --sky: #38BDF8; }

/* Tighter, even spacing between sections */
.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 80px 0; } }
.hero { padding-bottom: 48px; }
@media (min-width: 900px) { .hero { padding-bottom: 64px; } }
.section-head { margin-bottom: 40px; }
.section-alt { border-block: 0; }
.earlier { margin-top: var(--space-7); }

/* Section labels: sentence case with a short accent rule */
.kicker { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; gap: 10px; }
.kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--color-accent); }
.kicker-light::before { background: #7DD3FC; }

/* Hero depth: soft glow and faint dot field behind the photo */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -18%; right: -12%; width: min(70vw, 820px); aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sky) 22%, transparent), transparent);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--color-accent) 22%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 78% 35%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 60% at 78% 35%, #000, transparent 75%);
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.04; }
.hero-portrait { position: relative; isolation: isolate; }
.hero-portrait::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 4%;
  width: 92%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--sky) 30%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 14%, transparent) 72%);
}

/* Delivery line: the one orchestrated page-load moment */
.pipeline {
  list-style: none; margin: var(--space-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative;
}
.pipeline::before, .pipeline::after {
  content: ""; position: absolute; top: 8px; left: 10%; right: 10%; height: 2px; border-radius: 2px;
}
.pipeline::before { background: var(--color-border-strong); }
.pipeline::after { background: linear-gradient(90deg, var(--color-accent), var(--sky)); transform-origin: left; }
.pipeline li { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.pipe-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-background); border: 3px solid var(--color-accent);
}
.pipeline li:last-child .pipe-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.pipe-label { font-family: var(--font-heading); font-weight: 500; font-size: 0.9375rem; color: var(--color-secondary); white-space: nowrap; }
@media (max-width: 480px) { .pipe-label { font-size: 0.8125rem; } }
@keyframes pipe-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pipe-node { 0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pipe-glow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent); } to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent); } }
.js .pipeline::after { animation: pipe-draw 1.8s var(--ease-out-expo) 0.7s both; }
.js .pipe-dot { animation: pipe-node 550ms var(--ease-out-expo) both; animation-delay: calc(0.7s + var(--n, 0) * 0.32s); }
.js .pipe-label { animation: rise-in 550ms var(--ease-out-expo) both; animation-delay: calc(0.8s + var(--n, 0) * 0.32s); }
.js .pipeline li:last-child .pipe-dot { animation: pipe-node 550ms var(--ease-out-expo) 1.98s both, pipe-glow 700ms var(--ease-out-expo) 2.4s both; }
.proof { margin-top: var(--space-7); }

/* Client strip */
.clients { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); }
.clients-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-muted-foreground); }
.clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.clients li { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-secondary); opacity: 0.8; }

/* Quotes read as quotes, not another row of boxes */
.quote.card { background: transparent; border: 0; border-left: 3px solid var(--color-accent); border-radius: 0; box-shadow: none; padding: 4px 0 4px var(--space-5); }
.quote.card::before { display: none; }
.quote.card:hover { transform: none; box-shadow: none; }
.quote .quote-mark { display: none; }
.quote blockquote p { font-family: var(--font-heading); font-weight: 400; font-size: 1.1875rem; line-height: 1.5; letter-spacing: -0.005em; }
.quote figcaption { margin-top: var(--space-2); }

/* Bids: five cards fill both rows */
@media (min-width: 1024px) {
  .card-grid.bids-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bids-grid > * { grid-column: span 2; }
  .bids-grid > :nth-child(4), .bids-grid > :nth-child(5) { grid-column: span 3; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .bids-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Richer contact band */
.contact {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 360px at 88% -10%, rgba(56, 189, 248, 0.22), transparent 65%),
    radial-gradient(520px 300px at 0% 110%, rgba(3, 105, 161, 0.35), transparent 70%),
    linear-gradient(160deg, #0F172A 0%, #0B2540 100%);
}
.contact .btn-light { box-shadow: 0 8px 24px -10px rgba(56, 189, 248, 0.6); }

/* Reading progress uses the brand gradient */
.scroll-progress span { background: linear-gradient(90deg, var(--color-accent), var(--sky)); }

/* Back-to-top button */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary);
  box-shadow: var(--shadow); text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform 400ms var(--ease-out-expo), background-color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--color-accent); color: var(--color-on-accent); }

@media (prefers-reduced-motion: reduce) {
  .js .pipeline::after, .js .pipe-dot, .js .pipe-label, .js .pipeline li:last-child .pipe-dot { animation: none; }
}
@media print { .to-top, .pipeline { display: none; } }

/* Skills: four tidy columns instead of tag clouds */
.skill-cols { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .skill-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .skill-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skill-col {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5);
}
.skill-col h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 600; margin-bottom: var(--space-3); color: var(--color-foreground);
}
.skill-col h3::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--color-accent); }
.skill-col ul { list-style: none; margin: 0; padding: 0; }
.skill-col li {
  padding: 9px 0; border-top: 1px solid var(--color-border);
  font-size: 0.9688rem; font-weight: 500; color: var(--color-secondary); line-height: 1.4;
}
.skill-col li:first-child { border-top: 0; padding-top: 0; }

/* "Read the rest" toggle sits after the story text */
.more-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; margin-top: var(--space-1); padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-accent);
}
.more-toggle[hidden] { display: none; }
.more-toggle:hover span { text-decoration: underline; text-underline-offset: 3px; }
.more-toggle .icon { transition: transform var(--dur) var(--ease-out-expo); }
.more-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.more-body[hidden] { display: none; }

/* ==========================================================================
   Colour pass: ocean blue + teal, with amber for small highlights
   ========================================================================== */
:root {
  --teal: #0D9488; --teal-text: #0F766E;
  --amber: #F59E0B; --amber-text: #B45309;
  --tint-blue: #EFF6FF; --tint-teal: #F0FDFA; --tint-amber: #FFFBEB;
  --brand-gradient: linear-gradient(90deg, var(--color-accent), var(--teal));
}
@media (prefers-color-scheme: dark) {
  :root {
    --teal: #2DD4BF; --teal-text: #5EEAD4;
    --amber: #FBBF24; --amber-text: #FCD34D;
    --tint-blue: #0D1A30; --tint-teal: #0A1F24; --tint-amber: #211A0B;
  }
}

/* --- Portrait: clean circular frame, no fade ----------------------------- */
.hero-portrait::before { display: none; }
.hero-portrait img { -webkit-mask-image: none; mask-image: none; }
.hero-portrait { width: min(100%, 380px); }
@media (max-width: 899px) { .hero-portrait { width: min(70%, 280px); } }
.portrait-ring {
  position: relative; padding: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--teal));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.portrait-frame {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 6px solid var(--color-background);
  background: radial-gradient(circle at 30% 25%, #E0F2FE 0%, #BAE6FD 45%, #99F6E4 100%);
}
.portrait-frame img { display: block; width: 100%; height: auto; margin-top: 9%; }
@media (prefers-color-scheme: dark) {
  .portrait-frame { background: radial-gradient(circle at 30% 25%, #164E63 0%, #0C4A6E 50%, #134E4A 100%); }
}
.portrait-ring::before, .portrait-ring::after { content: ""; position: absolute; border-radius: 50%; }
.portrait-ring::before { width: 22px; height: 22px; top: 9%; right: 4%; background: var(--amber); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); }
.portrait-ring::after { width: 14px; height: 14px; bottom: 12%; left: 2%; background: var(--teal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 22%, transparent); }

/* --- Hero wash ------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(560px 420px at -5% 105%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%),
    var(--color-background);
}

/* --- Brand gradient touches ---------------------------------------------- */
.kicker::before { width: 28px; background: var(--brand-gradient); }
.scroll-progress span { background: var(--brand-gradient); }
.card::before { background: var(--brand-gradient); }
.timeline::after { background: linear-gradient(180deg, var(--color-accent), var(--teal)); }
.proof strong, .role-stats strong {
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Delivery line ends on teal "Go-live" */
.pipeline::after { background: var(--brand-gradient); }
.pipeline li:last-child .pipe-dot {
  background: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 22%, transparent);
}
@keyframes pipe-glow {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); }
  to   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 22%, transparent); }
}

/* Alternate sections get a soft blue-to-teal wash */
.section-alt { background: linear-gradient(180deg, var(--tint-blue) 0%, var(--tint-teal) 100%); }

/* What I do: each card has its own colour */
#services .card:nth-child(2) .card-icon { background: var(--tint-teal); color: var(--teal-text); }
#services .card:nth-child(3) .card-icon { background: var(--tint-amber); color: var(--amber-text); }
#services .card:nth-child(2):hover .card-icon { background: var(--teal); color: #fff; }
#services .card:nth-child(3):hover .card-icon { background: var(--amber); color: #1F1300; }

/* Skills: colour-coded columns */
.skill-col { border-top: 3px solid var(--color-accent); }
.skill-col:nth-child(2) { border-top-color: var(--teal); }
.skill-col:nth-child(3) { border-top-color: var(--amber); }
.skill-col:nth-child(4) { border-top-color: var(--color-primary); }
.skill-col:nth-child(2) h3::before { background: var(--teal); }
.skill-col:nth-child(3) h3::before { background: var(--amber); }
.skill-col:nth-child(4) h3::before { background: var(--color-primary); }

/* Featured case study and bids pick up the teal */
.case-study { background: linear-gradient(135deg, var(--color-surface) 55%, var(--tint-teal) 100%); border-color: color-mix(in srgb, var(--teal) 25%, var(--color-border)); }
.case-cols h4 { color: var(--teal-text); }
.case-cols li::marker { color: var(--teal); }
#bids .project-tag { color: var(--teal-text); }
#bids .card::before { background: linear-gradient(90deg, var(--teal), var(--amber)); }

/* Quotes: teal for Arcadis, blue for Capgemini */
#kind-words .card-grid:first-of-type .quote.card { border-left-color: var(--teal); }

/* Credential tiles and earlier-career cards */
.cert-logo-text { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; }
@media (prefers-color-scheme: dark) { .cert-logo-text { background: linear-gradient(135deg, #0369A1, #0D9488); } }
.earlier-item { border-top: 3px solid var(--teal); }
.role-date { border-color: color-mix(in srgb, var(--teal) 35%, var(--color-border)); color: var(--teal-text); }

/* Contact gets a teal glow too */
.contact {
  background:
    radial-gradient(700px 360px at 88% -10%, rgba(56, 189, 248, 0.22), transparent 65%),
    radial-gradient(560px 320px at 0% 110%, rgba(13, 148, 136, 0.35), transparent 70%),
    linear-gradient(160deg, #0F172A 0%, #0B2540 100%);
}

/* ==========================================================================
   Header blends into the hero; richer, gap-free reveals
   ========================================================================== */
/* Hero runs up behind the menu bar so the glow has no hard edge */
.hero { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--space-7)); }
@media (min-width: 900px) { .hero { padding-top: calc(var(--header-h) + var(--space-8)); } }
.site-header { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 300ms var(--ease-out-expo); }
.site-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header:has(.nav-toggle[aria-expanded="true"]) { background: var(--color-surface); }
.hero::before { transform: translate3d(0, calc(var(--hero-shift, 0) * 1px), 0); }

/* Already-passed sections appear without animating */
.js .reveal.is-instant, .js .reveal.is-instant *, .js .reveal.is-instant *::before { transition: none !important; animation: none !important; }

/* Cards scale in slightly as they fade up */
.js .card.reveal:not(.is-visible) { transform: translateY(var(--rise)) scale(0.98); }

/* Section label lines draw in */
.js .section-head.reveal .kicker::before { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out-expo) 250ms; }
.js .section-head.reveal.is-visible .kicker::before { transform: scaleX(1); }

/* Skills cascade in, item by item */
.js .skill-col.reveal li { opacity: 0; transform: translateX(-8px); }
.js .skill-col.reveal.is-visible li { opacity: 1; transform: none; transition: opacity 450ms var(--ease-out-expo), transform 450ms var(--ease-out-expo); }
.js .skill-col.reveal.is-visible li:nth-child(1) { transition-delay: calc(var(--i, 0) * var(--stagger) + 200ms); }
.js .skill-col.reveal.is-visible li:nth-child(2) { transition-delay: calc(var(--i, 0) * var(--stagger) + 260ms); }
.js .skill-col.reveal.is-visible li:nth-child(3) { transition-delay: calc(var(--i, 0) * var(--stagger) + 320ms); }
.js .skill-col.reveal.is-visible li:nth-child(4) { transition-delay: calc(var(--i, 0) * var(--stagger) + 380ms); }
.js .skill-col.reveal.is-visible li:nth-child(5) { transition-delay: calc(var(--i, 0) * var(--stagger) + 440ms); }
.js .skill-col.reveal.is-visible li:nth-child(6) { transition-delay: calc(var(--i, 0) * var(--stagger) + 500ms); }

/* Job highlights and bullets cascade in */
.js .timeline-item.reveal .role-stats li,
.js .timeline-item.reveal .timeline-body > ul:not(.role-stats) > li { opacity: 0; transform: translateY(10px); }
.js .timeline-item.reveal.is-visible .role-stats li,
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li {
  opacity: 1; transform: none; transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.js .timeline-item.reveal.is-visible .role-stats li:nth-child(2) { transition-delay: 90ms; }
.js .timeline-item.reveal.is-visible .role-stats li:nth-child(3) { transition-delay: 180ms; }
.js .timeline-item.reveal.is-visible .role-stats li:nth-child(4) { transition-delay: 270ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(1) { transition-delay: 200ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(2) { transition-delay: 260ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(3) { transition-delay: 320ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(4) { transition-delay: 380ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(5) { transition-delay: 440ms; }
.js .timeline-item.reveal.is-visible .timeline-body > ul:not(.role-stats) > li:nth-child(n+6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .hero::before { transform: none; }
  .js .skill-col.reveal li,
  .js .timeline-item.reveal .role-stats li,
  .js .timeline-item.reveal .timeline-body > ul > li,
  .js .card.reveal:not(.is-visible) { opacity: 1; transform: none; }
  .js .section-head.reveal .kicker::before { transform: none; }
}

/* Brand: small round photo in the brand ring; header always visible */
.brand-mark {
  width: 42px; height: 42px; padding: 2px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--teal));
  display: grid; place-items: center; overflow: hidden;
}
.brand-mark img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 0%;
  border: 2px solid var(--color-background);
  background: radial-gradient(circle at 30% 25%, #E0F2FE 0%, #BAE6FD 45%, #99F6E4 100%);
}
@media (prefers-color-scheme: dark) {
  .brand-mark img { background: radial-gradient(circle at 30% 25%, #164E63 0%, #0C4A6E 50%, #134E4A 100%); }
}
.brand-name { font-size: 1.0625rem; letter-spacing: -0.01em; }
.site-header.is-hidden { transform: none; }
.brand-photo {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--color-background);
  background: radial-gradient(circle at 30% 25%, #E0F2FE 0%, #BAE6FD 45%, #99F6E4 100%);
}
@media (prefers-color-scheme: dark) {
  .brand-photo { background: radial-gradient(circle at 30% 25%, #164E63 0%, #0C4A6E 50%, #134E4A 100%); }
}
.brand-mark img { border: 0; border-radius: 0; background: none; transform: scale(1.55); transform-origin: 50% 12%; }
.brand-mark img { transform: scale(1.25); transform-origin: 50% 0%; object-position: 50% 0%; }

/* Brand is just the name */
.brand-name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
/* Respect phone safe areas for the sticky bar and floating button */
.site-header { top: env(safe-area-inset-top, 0px); }
.to-top { right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* Issuer logos on credential tiles (from the user's own certificates) */
.cert-logo-img {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none; padding: 8px;
  border-radius: var(--radius-sm); background: #FFFFFF; border: 1px solid var(--color-border);
}
.cert-logo-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cert-logo-img img[src*="microsoft"] { max-width: 30px; }

/* MI monogram in the brand gradient */
.brand-mark {
  width: 40px; height: 40px; padding: 0; overflow: visible; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-accent), var(--teal));
  color: #FFFFFF; font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
/* Full name in the header; it needs a touch less room than the nav links */
.brand-name { font-size: 1.0625rem; }

.header-inner { gap: var(--space-6); }
@media (min-width: 1200px) { .site-nav ul { gap: var(--space-4); } }

/* ===== Client list: label on its own line, names on one row on desktop ===== */
.clients { display: block; }
.clients-title { margin-bottom: var(--space-3); }
.clients ul { gap: var(--space-2) 1.25rem; }

/* ===== Selected work: Delivery / Bids tabs ===== */
.work-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: var(--space-6);
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
}
.work-tabs[hidden] { display: none; }
.work-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-muted-foreground);
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
.work-tabs [role="tab"]:hover { color: var(--color-foreground); }
.work-tabs [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.work-tabs [role="tab"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tab-count {
  min-width: 1.6em; padding: 1px 7px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-align: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.work-panel[hidden] { display: none; }
.work-panel + .work-panel { margin-top: var(--space-7); }
.work-panel-title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--color-foreground); }
.has-tabs .work-panel + .work-panel { margin-top: 0; }
.has-tabs .work-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 479px) {
  .work-tabs { display: flex; }
  .work-tabs [role="tab"] { flex: 1; justify-content: center; gap: 6px; padding: 0 var(--space-2); font-size: 0.9375rem; white-space: nowrap; }
}

/* ===== Older roles: details tucked behind "Show details" ===== */
.role-toggle { margin-top: var(--space-2); }

/* ==========================================================================
   Palette v2: warm and human
   Coral for energy and conversation, rose for warmth and amber for
   optimism, on a light cream background. No blues, teals or greens. Every text pairing meets
   WCAG AA (4.5:1 for body text, 3:1 for large text) in light and dark mode.
   To retune the site's colour, change the tokens in this block.
   ========================================================================== */
:root {
  --color-primary: #25202B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #4A4150;
  --color-accent: #C53A2A;          /* coral: links, buttons, labels */
  --color-accent-hover: #A12F21;
  --color-on-accent: #FFFFFF;
  --color-background: #FFF9F4;      /* warm cream */
  --color-surface: #FFFFFF;
  --color-surface-alt: #FFF2E8;
  --color-foreground: #1C1720;
  --color-muted-foreground: #5B5260;
  --color-border: #F1E2D8;
  --color-border-strong: #E2CBBE;
  --color-tint: #FFE8DC;
  --color-ring: #C53A2A;
  --portrait-bg: #FFE4D6;
  --coral: #FF6B4A;                 /* decorative coral for glows and dots */
  --rose: #DB2777;
  --sky: #FF8A65;                   /* hero glow (was sky blue) */
  --tint-blue: #FFF1E7; --tint-blush: #FDEFF4; --tint-teal: #ECFAF6; --tint-amber: #FFF6DD;
  --brand-gradient: linear-gradient(90deg, var(--color-accent), var(--rose));
  --brand-gradient-diag: linear-gradient(135deg, var(--coral) 0%, var(--color-accent) 45%, var(--rose) 100%);
  --shadow-sm: 0 1px 2px rgba(60, 30, 20, 0.06);
  --shadow: 0 8px 24px -12px rgba(60, 30, 20, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #F5EDE8;
    --color-on-primary: #1C1720;
    --color-secondary: #E2D6DC;
    --color-accent: #FF8A5C;
    --color-accent-hover: #FFAE88;
    --color-on-accent: #1C1013;
    --color-background: #17121A;
    --color-surface: #211A25;
    --color-surface-alt: #1C1620;
    --color-foreground: #F8F1EE;
    --color-muted-foreground: #CDBFC6;
    --color-border: #34293A;
    --color-border-strong: #4A3C50;
    --color-tint: #3A2420;
    --color-ring: #FF8A5C;
    --portrait-bg: #3A2430;
    --coral: #FF8A5C;
    --rose: #F472B6;
    --sky: #FF8A5C;
    --tint-blue: #241A1F; --tint-blush: #22171F; --tint-teal: #13211F; --tint-amber: #261F12;
  }
}

/* Hero: warm coral glow top right, a soft rose wash bottom left */
.hero {
  background:
    radial-gradient(620px 460px at -6% 108%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 70%),
    radial-gradient(520px 380px at 104% -6%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 70%),
    var(--color-background);
}
.eyebrow { background: var(--color-tint); color: var(--color-accent-hover); }
@media (prefers-color-scheme: dark) { .eyebrow { color: #FDBA74; } }

/* Portrait: coral-to-rose ring around a peach backdrop */
.portrait-ring { background: var(--brand-gradient-diag); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--coral) 60%, transparent); }
.portrait-frame { background: radial-gradient(circle at 30% 25%, #FFF4EC 0%, #FFD9C7 52%, #FBD0E1 100%); }
@media (prefers-color-scheme: dark) {
  .portrait-frame { background: radial-gradient(circle at 30% 25%, #4A2A33 0%, #3A2232 52%, #2B1E36 100%); }
}

/* Brand monogram */
.brand-mark { background: linear-gradient(135deg, #D9480F, #C2185B); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--coral) 75%, transparent); }

/* Alternate sections: peach into blush */
.section-alt { background: linear-gradient(180deg, var(--tint-blue) 0%, var(--tint-blush) 100%); }

/* Timeline line and credential tiles pick up the warm gradient */
.timeline::after { background: linear-gradient(180deg, var(--color-accent), var(--rose)); }
.cert-logo-text { background: linear-gradient(135deg, #C53A2A, #BE185D); }
@media (prefers-color-scheme: dark) { .cert-logo-text { background: linear-gradient(135deg, #C53A2A, #BE185D); } }

/* Contact: warm plum panel with coral and rose glows */
.contact {
  background:
    radial-gradient(700px 360px at 88% -10%, rgba(255, 107, 74, 0.28), transparent 65%),
    radial-gradient(560px 320px at 0% 110%, rgba(219, 39, 119, 0.26), transparent 70%),
    linear-gradient(160deg, #2A1B2E 0%, #3B1F2B 100%);
  color: #EADDE4;
}
@media (prefers-color-scheme: dark) { .contact { border-top: 1px solid var(--color-border); } }
.contact p:not(.kicker) { color: #EADDE4; }
.kicker-light { color: #FDBA74; }
.kicker-light::before { background: #FDBA74; }
.contact-email { color: #C9B8C2 !important; }
.btn-light { color: #1C1720; }
.btn-light:hover { background: #FFE8DC; color: #1C1720; }
.contact .btn-light { box-shadow: 0 8px 24px -10px rgba(255, 107, 74, 0.6); }
.site-footer { background: #1F1622; color: #BFAFB8; }
@media (prefers-color-scheme: dark) { .site-footer { background: #140F17; } }
.site-footer a { color: #D6C6CF; }
.site-footer a:hover { color: #FFFFFF; }

/* Visitors who turn off animation see job highlights straight away */
@media (prefers-reduced-motion: reduce) {
  .js .timeline-item.reveal .role-stats li,
  .js .timeline-item.reveal .timeline-body > ul:not(.role-stats) > li,
  .js .skill-col.reveal li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Footer links (privacy) */
.footer-links { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; }

/* Privacy page */
.legal { padding-top: var(--space-7); padding-bottom: var(--space-8); }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-3); }
.legal h2 { font-size: 1.25rem; margin: var(--space-7) 0 var(--space-3); }
.legal p, .legal li { color: var(--color-muted-foreground); line-height: 1.7; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: var(--space-2); }
.legal a { color: var(--color-accent); text-underline-offset: 3px; }
.legal .updated { font-size: 0.9375rem; }
.legal-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-background) 92%, transparent); border-bottom: 1px solid var(--color-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }

/* Go-live finishes on the brand rose, not green, so the delivery line never reads as a RAG status */
.pipeline li:last-child .pipe-dot {
  background: var(--rose); border-color: var(--rose);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent);
}
@keyframes pipe-glow {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose) 45%, transparent); }
  to   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent); }
}

/* ==========================================================================
   Finishing touches: glass stat tiles, sliding tab, drifting photo ring,
   tactile buttons. All motion switches off for reduced-motion visitors.
   ========================================================================== */

/* Glass stat tiles: warm colour sits behind frosted panels */
.proof { position: relative; isolation: isolate; border-top: 0; padding-top: 0; }
.proof::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -6% -28%; pointer-events: none;
  background:
    radial-gradient(38% 75% at 12% 55%, rgba(255, 107, 74, 0.34), transparent 70%),
    radial-gradient(34% 80% at 50% 45%, rgba(245, 158, 11, 0.24), transparent 70%),
    radial-gradient(38% 80% at 88% 55%, rgba(219, 39, 119, 0.26), transparent 70%);
  filter: blur(28px);
}
.proof li {
  padding: var(--space-4) var(--space-5); border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 58%, transparent);
  border: 1px solid color-mix(in srgb, #FFFFFF 70%, transparent);
  box-shadow: 0 10px 30px -18px rgba(60, 30, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
@media (prefers-color-scheme: dark) {
  .proof::before { opacity: 0.7; }
  .proof li { background: color-mix(in srgb, var(--color-surface) 52%, transparent); border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .proof li { background: color-mix(in srgb, var(--color-surface) 92%, transparent); }
}

/* Selected work: a coral pill slides between the tabs */
.work-tabs { position: relative; }
.work-tabs [role="tab"] { position: relative; z-index: 1; }
.has-tabs .work-tabs [role="tab"][aria-selected="true"] { background: transparent; }
.tab-indicator {
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0;
  border-radius: 999px; background: var(--color-accent); pointer-events: none;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-accent) 80%, transparent);
}
.tab-indicator.is-ready { transition: transform 420ms var(--ease-out-expo), width 420ms var(--ease-out-expo); }

/* Photo ring: the coral-to-rose gradient drifts slowly */
.portrait-ring {
  background: linear-gradient(135deg, var(--coral), var(--color-accent), var(--rose), var(--color-accent), var(--coral));
  background-size: 300% 300%;
  animation: ring-drift 14s ease-in-out infinite alternate;
}
@keyframes ring-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* Brand-coloured dots, no green or amber, so nothing reads as a status */
.portrait-ring::before { background: var(--rose); box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent); }
.portrait-ring::after { background: var(--sky); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sky) 28%, transparent); }

/* Buttons: a soft sheen on hover and a gentle press */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-light::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform 750ms var(--ease-out-expo);
}
.btn-primary:hover::after, .btn-light:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(1px) scale(0.97); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .portrait-ring { animation: none; }
  .tab-indicator.is-ready { transition: none; }
  .btn-primary::after, .btn-light::after { display: none; }
  .btn:active { transform: none; }
}
@media (max-width: 599px) { .proof { gap: var(--space-3); } .proof li { padding: var(--space-4); } }

/* ===== Button colour pass: one clear hierarchy =====
   Primary actions: solid coral. Secondary: outline that warms to coral on hover.
   Utility (back to top): quiet surface button with a coral arrow. */
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent-hover); background: color-mix(in srgb, var(--color-tint) 60%, transparent); }
@media (prefers-color-scheme: dark) { .btn-ghost:hover { color: var(--color-accent); } }

.to-top {
  background: var(--color-surface); color: var(--color-accent);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px -12px rgba(60, 30, 20, 0.35);
}
.to-top:hover { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
@media (prefers-color-scheme: dark) { .to-top { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7); } }

/* Focus rings stay visible on the dark contact panel and footer */
.contact :focus-visible, .site-footer :focus-visible { outline-color: #FDBA74; }

/* ===== Selected work cards: client tag and title highlighted the same way in both tabs ===== */
.project .project-tag,
#bids .project-tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--color-tint); color: var(--color-accent-hover);
  font-size: 0.75rem; letter-spacing: 0.07em; line-height: 1.3;
}
@media (prefers-color-scheme: dark) {
  .project .project-tag, #bids .project-tag { color: #FDBA74; }
}
.project h3 { color: var(--color-foreground); transition: color 200ms var(--ease); }
.project:hover h3 { color: var(--color-accent); }
#bids .card::before { background: var(--brand-gradient); }
.project .project-tag, #bids .project-tag { border-radius: 12px; }

/* ===== Worked with: each organisation is a link that lights up on hover ===== */
.clients ul { gap: 4px 4px; margin-left: -10px; }
.clients li { opacity: 1; }
.clients a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 10px; border-radius: 999px;
  color: var(--color-muted-foreground); text-decoration: none;
  transition: color 200ms var(--ease), background-color 200ms var(--ease), transform 250ms var(--ease-out-expo), box-shadow 250ms var(--ease);
}
.clients a:hover, .clients a:focus-visible {
  color: var(--color-accent-hover); background: var(--color-tint);
  transform: translateY(-2px); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
@media (prefers-color-scheme: dark) { .clients a:hover, .clients a:focus-visible { color: #FDBA74; } }
@media (prefers-reduced-motion: reduce) {
  .clients a { transition: none; }
  .clients a:hover, .clients a:focus-visible { transform: none; }
}

/* "Show more" continues the list with the same spacing */
#sp-more > ul:first-child, #capgemini-more > ul:first-child { margin-top: var(--space-2); }

/* ==========================================================================
   Interactive delivery line: each stage shows its own four results
   ========================================================================== */
.pipeline { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pipe-stage {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  padding: 0 6px 4px; font: inherit; color: inherit; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.js .pipe-stage { cursor: pointer; }
.pipe-stage:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 4px; }
.pipeline.is-interactive .pipe-dot, .pipeline.is-interactive .pipe-label { animation: none !important; opacity: 1; }
.pipeline.is-interactive .pipe-dot { transition: transform 300ms var(--ease-out-expo), background-color 200ms var(--ease), box-shadow 300ms var(--ease), border-color 200ms var(--ease); }
.pipeline.is-interactive .pipe-stage:hover .pipe-dot { transform: scale(1.2); }
.pipeline.is-interactive .pipe-stage:hover .pipe-label { color: var(--color-accent); }
.pipeline li.is-passed .pipe-dot { background: var(--color-accent); }
.pipeline .pipe-stage[aria-pressed="true"] .pipe-dot,
.pipeline.is-interactive .pipe-stage[aria-pressed="true"]:hover .pipe-dot {
  transform: scale(1.45); background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.pipeline li:last-child .pipe-stage[aria-pressed="true"] .pipe-dot { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 7px color-mix(in srgb, var(--rose) 22%, transparent); }
.pipeline.has-selection li:last-child:not(.is-passed) .pipe-dot { background: var(--color-background); border-color: var(--rose); box-shadow: none; }
.pipe-stage[aria-pressed="true"] .pipe-label { color: var(--color-accent); font-weight: 600; }

/* Caption, hint and reset above the tiles */
.proof-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: var(--space-6); min-height: 44px; }
.proof-caption { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--color-foreground); }
.proof-hint { margin: 0; font-size: 0.875rem; color: var(--color-muted-foreground); }
.proof-hint[hidden], .proof-reset[hidden] { display: none; }
.proof-reset {
  appearance: none; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 0.9375rem; color: var(--color-accent);
}
.proof-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.proof { margin-top: var(--space-3) !important; }
.proof-src {
  display: block; margin-top: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--color-accent-hover);
}
@media (prefers-color-scheme: dark) { .proof-src { color: #FDBA74; } }

/* Tiles fade briefly while they switch stage */
.js .proof li.reveal.is-done { transition: opacity 180ms var(--ease), transform 240ms var(--ease-out-expo); }
.proof.is-swapping li { opacity: 0 !important; transform: translateY(6px) !important; }
@media (prefers-reduced-motion: reduce) {
  .pipeline.is-interactive .pipe-dot { transition: none; }
  .proof.is-swapping li { transform: none !important; }
}

/* ===== Retire the last teal: rose takes its place =====
   Teal was left over from the original blue palette. It is now rose, so the
   site stays warm and nothing reads as a red/amber/green status colour. */
:root { --rose-text: #BE185D; }
@media (prefers-color-scheme: dark) { :root { --rose-text: #F9A8D4; } }
#services .card:nth-child(2) .card-icon { background: var(--tint-blush); color: var(--rose-text); }
#services .card:nth-child(2):hover .card-icon { background: var(--rose); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { #services .card:nth-child(2):hover .card-icon { color: #1C1013; } }
.skill-col:nth-child(2) { border-top-color: var(--rose); }
.skill-col:nth-child(2) h3::before { background: var(--rose); }
#kind-words .card-grid:first-of-type .quote.card { border-left-color: var(--rose); }
.earlier-item { border-top-color: var(--rose); }
.role-date { border-color: color-mix(in srgb, var(--rose) 35%, var(--color-border)); color: var(--rose-text); }

/* ===== Delivery line: coral blends gradually into rose =====
   Each stage takes its own step along the coral-to-rose blend, and the line
   uses the same five stops, so dots and line change colour together. */
.pipeline {
  --pc0: var(--color-accent);
  --pc1: color-mix(in oklab, var(--color-accent) 75%, var(--rose));
  --pc2: color-mix(in oklab, var(--color-accent) 50%, var(--rose));
  --pc3: color-mix(in oklab, var(--color-accent) 25%, var(--rose));
  --pc4: var(--rose);
  /* Text versions of the same blend, dark enough to read */
  --pt0: var(--color-accent);
  --pt1: color-mix(in oklab, var(--color-accent) 75%, var(--rose-text));
  --pt2: color-mix(in oklab, var(--color-accent) 50%, var(--rose-text));
  --pt3: color-mix(in oklab, var(--color-accent) 25%, var(--rose-text));
  --pt4: var(--rose-text);
}
.pipeline li:nth-child(1) { --pc: var(--pc0); --pt: var(--pt0); }
.pipeline li:nth-child(2) { --pc: var(--pc1); --pt: var(--pt1); }
.pipeline li:nth-child(3) { --pc: var(--pc2); --pt: var(--pt2); }
.pipeline li:nth-child(4) { --pc: var(--pc3); --pt: var(--pt3); }
.pipeline li:nth-child(5) { --pc: var(--pc4); --pt: var(--pt4); }
.pipeline::after { background: linear-gradient(90deg, var(--pc0) 0%, var(--pc1) 25%, var(--pc2) 50%, var(--pc3) 75%, var(--pc4) 100%); }
.pipeline .pipe-dot { border-color: var(--pc); }
.pipeline li.is-passed .pipe-dot { background: var(--pc); }
.pipeline .pipe-stage[aria-pressed="true"] .pipe-dot,
.pipeline.is-interactive .pipe-stage[aria-pressed="true"]:hover .pipe-dot {
  background: var(--pc); border-color: var(--pc);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--pc) 22%, transparent);
}
.pipeline .pipe-stage[aria-pressed="true"] .pipe-label,
.pipeline.is-interactive .pipe-stage:hover .pipe-label { color: var(--pt); }

/* ===== Photo ring: interactive =====
   With JavaScript running, the ring becomes a turning colour wheel and the two
   bubbles sit on an orbit around the photo. main.js turns the wheel and moves
   the bubbles; hovering (or tapping on a phone) speeds both up. Without
   JavaScript, or with reduced motion, the ring keeps its gentle drift. */
.portrait-ring.ring-live {
  animation: none;
  background: conic-gradient(from var(--ring-angle, 0deg), var(--coral), var(--color-accent), var(--rose), var(--color-accent), var(--coral));
  background-size: auto;
  transition: transform 600ms var(--ease-out-expo), box-shadow 600ms var(--ease);
}
.hero-portrait.is-active .portrait-ring.ring-live {
  transform: scale(1.025);
  box-shadow: 0 36px 70px -26px color-mix(in srgb, var(--rose) 60%, transparent);
}
.portrait-ring.ring-live::before,
.portrait-ring.ring-live::after { top: 50%; left: 50%; right: auto; bottom: auto; will-change: transform; }
.portrait-ring.ring-live::before {
  margin: -11px 0 0 -11px;
  transform: rotate(var(--bubble-1, -42deg)) translateX(var(--ring-orbit, 216px));
  box-shadow: 0 0 0 calc(6px + 6px * var(--ring-boost, 0)) color-mix(in srgb, var(--rose) 22%, transparent);
}
.portrait-ring.ring-live::after {
  margin: -7px 0 0 -7px;
  transform: rotate(var(--bubble-2, 142deg)) translateX(var(--ring-orbit, 216px));
  box-shadow: 0 0 0 calc(5px + 5px * var(--ring-boost, 0)) color-mix(in srgb, var(--sky) 28%, transparent);
}
.js .hero-portrait { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   Interactive cards: experience, delivery, bids & pursuits, qualifications
   On hover a card lifts, picks up a warm coral glow and border, and a soft
   light follows the cursor (main.js sets --mx / --my). Experience roles get a
   panel that fades in behind them and a glowing timeline dot.
   The lift is written to outrank the scroll-in animation, which used to
   cancel it. Hover-only devices; no lift for reduced motion.
   ========================================================================== */
.project, .cert, .earlier-item, #services .card { position: relative; isolation: isolate; }
.project::after, .cert::after, .earlier-item::after, #services .card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--coral) 14%, transparent), transparent 65%);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.js .cert.reveal.is-done, .js .earlier-item.reveal.is-done {
  transition: border-color 200ms var(--ease), box-shadow 300ms var(--ease), transform 400ms var(--ease-out-expo);
}
.cert-logo { transition: transform 450ms var(--ease-out-expo); }
.cert .text-link .icon { transition: transform 300ms var(--ease-out-expo); }
.project .project-tag { transition: background-color 200ms var(--ease), color 200ms var(--ease); }

/* Experience: a panel behind each role, revealed on hover */
.timeline-body { position: relative; isolation: isolate; }
.timeline-body::before {
  content: ""; position: absolute; z-index: -1; inset: -20px -24px -20px -16px; border-radius: 20px; pointer-events: none;
  background:
    radial-gradient(460px circle at calc(var(--mx, 50%) + 16px) calc(var(--my, 0%) + 20px), color-mix(in srgb, var(--coral) 12%, transparent), transparent 65%),
    color-mix(in srgb, var(--color-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--coral) 50%, transparent);
  opacity: 0; transform: scale(0.985);
  transition: opacity 300ms var(--ease), transform 450ms var(--ease-out-expo);
}
@media (max-width: 899px) { .timeline-body::before { inset: -16px -14px -16px -14px; } }
.timeline-item::before { transition: background-color var(--dur) var(--ease), transform 400ms var(--ease-out-expo), box-shadow 300ms var(--ease); }
.timeline-body h3, .timeline-date { transition: color 200ms var(--ease); }

@media (hover: hover) {
  .project:hover, .js .project.reveal.is-done:hover,
  #services .card:hover, .js #services .card.reveal.is-done:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: 0 24px 46px -24px color-mix(in srgb, var(--coral) 55%, transparent), 0 2px 8px -4px rgba(60, 30, 20, 0.12);
  }
  .cert:hover, .js .cert.reveal.is-done:hover,
  .earlier-item:hover, .js .earlier-item.reveal.is-done:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--coral) 50%, transparent), 0 2px 8px -4px rgba(60, 30, 20, 0.12);
  }
  .earlier-item:hover, .js .earlier-item.reveal.is-done:hover { border-top-color: var(--rose); }
  .project:hover::after, .cert:hover::after, .earlier-item:hover::after, #services .card:hover::after { opacity: 1; }
  .project:hover .project-tag { background: color-mix(in srgb, var(--coral) 24%, var(--color-tint)); }
  .cert:hover .cert-logo { transform: scale(1.08) rotate(-3deg); }
  .cert:hover .text-link .icon { transform: translate(2px, -2px); }
  .cert:hover h3, .earlier-item:hover h4 { color: var(--color-accent); }
  .cert h3, .earlier-item h4 { transition: color 200ms var(--ease); }

  .timeline-item:hover .timeline-body::before { opacity: 1; transform: none; }
  .timeline-item:hover::before {
    background: var(--color-accent); transform: scale(1.3);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  .timeline-item:hover .timeline-body h3 { color: var(--color-accent); }
  .timeline-item:hover .timeline-date { color: var(--color-foreground); }
}
@media (prefers-reduced-motion: reduce) {
  .project:hover, .js .project.reveal.is-done:hover,
  #services .card:hover, .js #services .card.reveal.is-done:hover,
  .cert:hover, .js .cert.reveal.is-done:hover,
  .earlier-item:hover, .js .earlier-item.reveal.is-done:hover,
  .cert:hover .cert-logo, .timeline-item:hover::before, .timeline-item:hover .timeline-body::before { transform: none; }
}

/* ===== Highlight tiles: each one links to where it happened ===== */
.proof li { position: relative; isolation: isolate; }
.proof-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.proof-link:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.proof-arrow {
  position: absolute; top: 14px; right: 14px; color: var(--color-muted-foreground); opacity: 0.6;
  transition: transform 300ms var(--ease-out-expo), color 200ms var(--ease), opacity 200ms var(--ease);
}
.proof li::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--coral) 16%, transparent), transparent 65%);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.js .proof li.reveal.is-done {
  transition: opacity 180ms var(--ease), transform 300ms var(--ease-out-expo), box-shadow 300ms var(--ease), border-color 200ms var(--ease);
}
.proof-link:focus-visible + .proof-arrow, .proof-link:focus-visible .proof-arrow { color: var(--color-accent); opacity: 1; }
@media (hover: hover) {
  .proof li:hover, .js .proof li.reveal.is-done:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--coral) 60%, transparent);
  }
  .proof li:hover::after { opacity: 1; }
  .proof li:hover .proof-arrow { color: var(--color-accent); opacity: 1; transform: translateY(3px); }
}

/* Where a tile lands: the role lights up and the bullet glows briefly */
.timeline-body li { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
.timeline-body li[tabindex="-1"]:focus { outline: none; }
.timeline-item.is-spotlit .timeline-body::before { opacity: 1; transform: none; }
.timeline-item.is-spotlit::before {
  background: var(--color-accent); transform: scale(1.3);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.timeline-item.is-spotlit .timeline-body h3 { color: var(--color-accent); }
.timeline-body li.is-flash { border-radius: 6px; animation: exp-flash 3.4s var(--ease) 0.3s both; }
@keyframes exp-flash {
  0%       { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
  12%, 62% { background-color: color-mix(in srgb, var(--coral) 18%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--coral) 18%, transparent); }
  100%     { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}

/* ===== Key skills: each column lifts in its own colour, each skill lights up ===== */
.skill-col { position: relative; isolation: isolate; --col: var(--color-accent); --col-text: var(--color-accent); --col-glow: var(--coral); }
.skill-col:nth-child(2) { --col: var(--rose); --col-text: var(--rose-text); --col-glow: var(--rose); }
.skill-col:nth-child(3) { --col: var(--amber); --col-text: var(--amber-text); --col-glow: var(--amber); }
.skill-col:nth-child(4) { --col: var(--color-primary); --col-text: var(--color-foreground); --col-glow: color-mix(in srgb, var(--coral) 50%, var(--rose)); }
.skill-col::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--col-glow) 14%, transparent), transparent 65%);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.skill-col { transition: transform 400ms var(--ease-out-expo), box-shadow 300ms var(--ease), border-color 200ms var(--ease); }
.js .skill-col.reveal.is-done { transition: opacity var(--dur-enter) var(--ease-out-expo), transform 400ms var(--ease-out-expo), box-shadow 300ms var(--ease), border-color 200ms var(--ease); }
.skill-col h3::before { transition: width 400ms var(--ease-out-expo); }
.skill-col li { transition: color 200ms var(--ease), transform 300ms var(--ease-out-expo); }
.js .skill-col.reveal.is-done li:nth-child(n) { transition: opacity 450ms var(--ease-out-expo), color 200ms var(--ease), transform 300ms var(--ease-out-expo); transition-delay: 0s; }
@media (hover: hover) {
  .skill-col:hover, .js .skill-col.reveal.is-done:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px -24px color-mix(in srgb, var(--col-glow) 55%, transparent), 0 2px 8px -4px rgba(60, 30, 20, 0.12);
    border-left-color: color-mix(in srgb, var(--col) 30%, var(--color-border));
    border-right-color: color-mix(in srgb, var(--col) 30%, var(--color-border));
    border-bottom-color: color-mix(in srgb, var(--col) 30%, var(--color-border));
  }
  .skill-col:hover::after { opacity: 1; }
  .skill-col:hover h3::before { width: 32px; }
  .skill-col li:hover, .js .skill-col.reveal.is-visible li:hover { color: var(--col-text); transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .proof li:hover, .js .proof li.reveal.is-done:hover, .proof li:hover .proof-arrow,
  .skill-col:hover, .js .skill-col.reveal.is-done:hover,
  .skill-col li:hover, .js .skill-col.reveal.is-visible li:hover,
  .timeline-item.is-spotlit::before, .timeline-item.is-spotlit .timeline-body::before { transform: none !important; }
}

/* Earlier career now holds three roles (SEO London moved to Education) */
@media (min-width: 1024px) { .earlier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }