/* ---------- Tokens (palette after workflows.io, without the lime) ---------- */
:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --ink: #0c0d0e;
  --text: #3c4344;
  --muted: #5d6a6c;   /* ≥4.5:1 on --bg */
  --faint: #6b7375;   /* ≥4.5:1 on --bg, secondary labels */
  --line: #dadfe1;
  --line-strong: #c8d1d4;

  --d-bg: #020304;
  --d-card: #0c0d0e;
  --d-card-2: #161718;
  --d-line: #1b1c1c;
  --d-line-strong: #2c3133;
  --d-text: #f1f3f3;
  --d-muted: #bcbdbd;
  --d-faint: #8a8a8a;

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 88px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
strong { font-weight: 500; color: var(--ink); }
svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: var(--d-text); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.wrap-wide { max-width: none; padding: 0 clamp(16px, 3vw, 48px); }
.w-light { font-weight: 300; color: var(--muted); }
.dark .w-light { color: var(--d-faint); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:has(.btn-ico) { padding-right: 5px; }
.btn-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; transition: transform 0.25s var(--ease); }
.btn:hover .btn-ico { transform: rotate(45deg); }
.btn-lg { min-height: 50px; padding-left: 22px; padding-right: 22px; font-size: 15px; }
.btn-lg:has(.btn-ico) { padding-right: 6px; }
.btn-lg .btn-ico { width: 38px; height: 38px; }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark .btn-ico { background: var(--bg); color: var(--ink); }
.btn-dark:hover { background: #2a2e30; }
.btn-dark:hover .btn-ico[class] { transform: translateY(2px); }
.nav-cta:hover .btn-ico[class] { transform: rotate(45deg); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--d-text); color: var(--ink); }
.btn-light:hover { background: #ffffff; }
.btn-outline-dark { color: var(--d-text); border-color: var(--d-line-strong); }
.btn-outline-dark:hover { border-color: var(--d-muted); }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link svg { transition: transform 0.25s var(--ease); }
.text-link:hover svg:last-child { transform: translate(2px, -2px); }

/* ---------- Header / nav ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background 0.35s ease, border-color 0.35s ease; animation: drop-in 0.9s var(--ease) both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
.topbar.scrolled, .menu-open .topbar { background: rgba(247, 247, 245, 0.82); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--line); }
.topbar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); transition: height 0.35s var(--ease); }
.scrolled .topbar-inner { height: calc(var(--header-h) - 12px); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--line); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); transition: transform 0.4s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease); }
.scrolled .brand-photo { width: 44px; height: 44px; }
.brand:hover .brand-photo { transform: scale(1.06) rotate(-3deg); }
.brand-text { display: grid; line-height: 1.1; }
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.brand-role { margin-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); }

/* Desktop: links in a pill with a sliding highlight */
.topnav { display: none; }
@media (min-width: 960px) {
  .topnav { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
  .nav-pill { position: relative; z-index: 1; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.03); }
  .nav-pill { gap: 10px; }
  .nav-pill a { position: relative; display: block; padding: 9px 16px; border-radius: 999px; font-size: 15px; color: var(--ink); opacity: 0.82; transition: opacity 0.25s ease; }
  .nav-pill a:hover, .nav-pill a[aria-current="true"] { opacity: 1; }
  .nav-pill .nav-contact { display: none; }
  .nav-indicator { position: absolute; z-index: 0; top: 6px; left: 0; height: calc(100% - 12px); width: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.06), 0 4px 14px rgba(12, 13, 14, 0.06); opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s ease; }
  .nav-pill { background: transparent; }

  .nav-pill { border-color: transparent; box-shadow: none; }
}

/* Get in touch: underlined label + dark square with sliding arrow */
.cta { display: none; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.cta-label { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.cta:hover .cta-label { background-size: 0 1px; background-position: 100% 100%; }
.cta-square { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: var(--ink); color: var(--bg); transition: transform 0.3s var(--ease), border-radius 0.3s var(--ease); }
.cta:hover .cta-square { transform: scale(1.05); border-radius: 50%; }
.cta-arrows { position: relative; width: 16px; height: 16px; }
.cta-arrows svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: transform 0.45s var(--ease); }
.cta-arrows svg + svg { transform: translate(-150%, 150%); }
.cta:hover .cta-arrows svg:first-child { transform: translate(150%, -150%); }
.cta:hover .cta-arrows svg + svg { transform: none; }
@media (min-width: 960px) { .cta { display: inline-flex; } }

/* Mobile menu */
.menu-btn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer; }
.menu-icon, .menu-icon::before { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
.menu-icon { position: relative; transform: translateY(-3px); }
.menu-icon::before { content: ""; position: absolute; top: 6px; }
.menu-open .menu-icon { transform: translateY(0) rotate(45deg); }
.menu-open .menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
@media (min-width: 960px) { .menu-btn { display: none; } }
@media (max-width: 959px) {
  .menu-open .topnav { display: block; position: absolute; top: 100%; left: 0; right: 0; padding: 8px clamp(16px, 4vw, 40px) 28px; background: var(--bg); border-bottom: 1px solid var(--line); animation: panel-in 0.4s var(--ease) both; }
  .nav-pill li { opacity: 0; transform: translateY(10px); animation: item-in 0.5s var(--ease) forwards; animation-delay: calc(0.05s * var(--i) + 0.05s); }
  .nav-pill a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
  .nav-pill a[aria-current="true"] { font-weight: 500; }
  .nav-contact a { border-bottom: 0; font-weight: 500; }
  .nav-indicator { display: none; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes item-in { to { opacity: 1; transform: none; } }

/* ---------- Hero (centred) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--header-h) + 48px) 0 28px; }
@media (min-width: 760px) { .hero { min-height: max(640px, 100svh); } }
.hero-canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes glow-a { to { transform: translate(18vw, 8vh) scale(1.15); } }
@keyframes glow-b { to { transform: translate(-16vw, -10vh) scale(0.9); } }

.hero-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: clamp(24px, 6vh, 64px); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.badge-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; }
.badge { box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 6px 18px rgba(12, 13, 14, 0.05); padding-left: 6px; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #1f9d55; opacity: 0; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }

.hero-title { margin-top: 30px; font-weight: 400; color: var(--ink); }
.hero-name { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.hero-statement { display: block; max-width: 13em; margin: 0 auto; font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; }
.hero-statement .w-light { font-weight: 200; color: var(--ink); opacity: 0.88; }
.hero-headline { margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--muted); }
.hero-intro { margin-top: 10px; max-width: 38em; font-size: 17px; line-height: 1.6; color: var(--text); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-link.subtle { color: var(--muted); border-bottom-color: var(--line-strong); font-weight: 400; }
.text-link.subtle:hover { color: var(--ink); border-bottom-color: var(--ink); }
.hero-sub { margin-top: 26px; font-size: clamp(16px, 1.35vw, 19px); color: var(--ink); opacity: 0.85; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.hero-ctas .text-link svg:first-child { font-size: 16px; }


/* Request-call form (after workflows.io) */
.lead-form { display: grid; gap: 8px; width: min(100%, 560px); margin-top: 40px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 10px 30px rgba(12, 13, 14, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 640px) { .lead-form { grid-template-columns: 1fr 1fr auto; gap: 0; } }
.lead-form input { min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; font: 400 16px var(--font); color: var(--ink); }
.lead-form input::placeholder { color: var(--ink); opacity: 0.75; }
.lead-form input:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 639px) { .lead-form input + label + input { border-top: 1px solid var(--line); border-radius: 0; } }
@media (min-width: 640px) { .lead-form input + label + input { border-left: 1px solid var(--line); border-radius: 0; } .lead-form input + label + input:focus { border-radius: 12px; border-left-color: transparent; } }
.lead-form .btn { justify-content: center; min-height: 52px; border-radius: 12px; padding-left: 22px; font-size: 15px; }
.lead-form .btn .btn-ico { width: 30px; height: 30px; }
.lead-form.invalid input:invalid { box-shadow: inset 0 0 0 1px #c0392b; }
.lead-status { min-height: 1.4em; margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Short laptop screens: keep the whole hero, bottom bar included, in the first screen */
@media (min-width: 760px) and (max-height: 780px) {
  .hero { padding-top: calc(var(--header-h) + 12px); padding-bottom: 20px; }
  .hero-copy { padding-bottom: 12px; }
  .hero-title { margin-top: 22px; }
  .hero-statement { font-size: clamp(32px, min(3.75vw, 7vh), 54px); }
  .hero-sub { margin-top: 16px; }
  .hero-ctas, .lead-form { margin-top: 26px; }
  .hero-bar { padding-top: 12px; }
}

/* Bottom bar of the hero: keywords · Download CV · LinkedIn */
.hero-bar { display: grid; gap: 22px; justify-items: center; padding-top: 24px; }
@media (min-width: 1024px) { .hero-bar { grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: clamp(16px, 5vw, 140px); } .hero-bar .chips { justify-self: start; flex-wrap: nowrap; } .hero-linkedin { justify-self: end; } }
.hero-bar .chips { justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { white-space: nowrap; padding: 8px 14px; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.05), 0 4px 12px rgba(12, 13, 14, 0.04); font-size: 14px; color: var(--ink); }
.cv-link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.cv-label { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.cv-link:hover .cv-label { background-size: 0 1px; background-position: 100% 100%; }
.cta-square-sm { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
.cv-link:hover .cta-square { transform: translateY(2px); }
.hero-linkedin { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.35; color: var(--text); text-align: center; }
.hero-linkedin img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px var(--surface); }
.round-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; transition: transform 0.3s var(--ease), background 0.2s ease; }
.hero-linkedin:hover .round-arrow { transform: rotate(45deg); color: var(--ink); }

/* Logos band below the hero */
.logos .logo-strip { margin-top: 0; }

/* ---------- Pill badges (section labels, after workflows.io) ---------- */
.pill-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 6px 18px rgba(12, 13, 14, 0.05); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.pill-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; }
.pill-dark { background: var(--d-card); border-color: var(--d-line-strong); box-shadow: none; color: var(--d-text); }
.pill-dark .pill-ico { background: var(--d-text); color: var(--ink); }

/* ---------- Proof: highlight card + teams orbit ---------- */
.proof { padding: clamp(80px, 10vw, 128px) 0 clamp(24px, 4vw, 48px); }
.proof-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.proof-grid > .bezel { display: flex; }
.proof-grid .bezel-inner { flex: 1; display: flex; flex-direction: column; }

.bezel { --mx: 50%; --my: -400px; padding: 6px; border-radius: 30px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(12, 13, 14, 0.16), transparent 70%), rgba(255, 255, 255, 0.5); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.03), 0 18px 50px rgba(12, 13, 14, 0.06); }
.bezel-inner { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: radial-gradient(120% 70% at 50% 0%, #ffffff 0%, #f6f8f9 60%); border: 1px solid var(--line); }
.bezel-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(12, 13, 14, 0.035), transparent 65%); }
.bezel-inner > * { position: relative; }
.card-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.card-kicker img { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); object-fit: contain; }
.card-kicker .pill-ico { width: 28px; height: 28px; font-size: 14px; }
.highlight-title { margin: 16px 0 0; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

.highlight-text { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 34em; }
.stat-tiles { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile { padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.03); }
.stat-tile.wide { grid-column: 1 / -1; }
.stat-num { font-size: 30px; line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-tile.wide .stat-num { font-size: 44px; }
.stat-text { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--text); }
.growth-dots { margin-top: 18px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px; }
.growth-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.growth-dots i.on { background: var(--faint); }
.growth-dots.go i:not(.on) { animation: dot-pop 0.6s var(--ease) both; animation-delay: calc(var(--k) * 34ms); }
@keyframes dot-pop { 0% { transform: scale(0.5); background: var(--line); } 55% { transform: scale(1.3); background: var(--ink); } 100% { transform: scale(1); background: var(--ink); } }
.growth-scale { margin-top: 8px; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.square-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 15px; font-weight: 500; color: var(--ink); align-self: flex-start; }
.square-link span:first-child { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.square-link:hover span:first-child { background-size: 0 1px; background-position: 100% 100%; }
.sq { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.05); font-size: 14px; transition: transform 0.3s var(--ease), background 0.2s ease, color 0.2s ease; }
.square-link:hover .sq { transform: rotate(45deg); background: var(--ink); color: var(--bg); }

/* Orbit: my photo in the centre, employer logos circling on two rings */
.orbit { --size: min(310px, 70vw); position: relative; width: var(--size); aspect-ratio: 1; margin: 36px auto 16px; }
.orbit-ring { position: absolute; border-radius: 50%; border: 1px solid var(--line-strong); }
.orbit-ring.outer { inset: 0; border-style: dashed; opacity: 0.7; }
.orbit-ring.inner { inset: 22%; }
.orbit-grid { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(rgba(12, 13, 14, 0.14) 1px, transparent 1.4px) 0 0 / 16px 16px; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); animation: spin 120s linear infinite; }
.orbit-ping { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1px solid var(--faint); animation: ping 3.6s var(--ease) infinite; }
.orbit-ping + .orbit-ping { animation-delay: 1.8s; }
@keyframes ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.3); opacity: 0; } }
.orbit::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
.orbit-me { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line), 0 12px 30px rgba(12, 13, 14, 0.15); }
.orbit-track { position: absolute; inset: 0; animation: spin 48s linear infinite; }
.orbit-track.inner { inset: 22%; }
.orbit-track.outer { animation-duration: 70s; animation-direction: reverse; }
.orbit-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); }
.orbit-track.inner .orbit-item { --r: calc(var(--size) * 0.28); }
.orbit-track.outer .orbit-item { --r: calc(var(--size) * 0.5); }
.orbit-logo { position: absolute; left: -26px; top: -26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(12, 13, 14, 0.1); transform: rotate(calc(var(--a) * -1)); }
.orbit-logo img { width: 58%; height: 58%; object-fit: contain; animation: spin 48s linear infinite reverse; }
.orbit-track.outer .orbit-logo img { animation-duration: 70s; animation-direction: normal; }
.orbit-logo.on-dark { background: #000; border-color: #000; }
.orbit-logo.on-dark img { width: 74%; }
.orbit:hover .orbit-track, .orbit:hover .orbit-logo img, .orbit.focus .orbit-track, .orbit.focus .orbit-logo img { animation-play-state: paused; }
.orbit-logo { transition: opacity 0.35s ease, scale 0.45s var(--ease), box-shadow 0.35s ease; }
.orbit.focus .orbit-logo { opacity: 0.3; }
.orbit.focus .is-on .orbit-logo { opacity: 1; scale: 1.25; box-shadow: 0 0 0 5px rgba(12, 13, 14, 0.07), 0 12px 28px rgba(12, 13, 14, 0.18); }
@keyframes spin { to { transform: rotate(360deg); } }

.team-list { margin-top: auto; padding-top: 12px; }
.team-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.team-list li:last-child { border-bottom: 0; }
.team-list li { align-items: center; }
.team-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
.team-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); transition: transform 0.35s var(--ease); }
.team-ico img { width: 60%; height: 60%; object-fit: contain; }
.team-ico.on-dark { background: #000; border-color: #000; }
.team-ico.on-dark img { width: 80%; height: 80%; }
.team-list li:hover .team-ico { transform: scale(1.15); }
.team-role { color: var(--muted); text-align: right; }

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-head { display: grid; justify-items: center; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.section-title { max-width: 16em; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); }
.section-sub { margin: -32px auto 48px; max-width: 38em; font-size: 17px; color: var(--text); text-align: center; }
.dark { background: var(--d-bg); color: var(--d-muted); }
.section.dark { margin-inline: clamp(8px, 1.2vw, 16px); border-radius: clamp(24px, 3vw, 40px); }
.has-fx { position: relative; isolation: isolate; overflow: hidden; }
.circuit { position: absolute; z-index: -1; inset: 0; pointer-events: none; -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.circuit canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ambient { position: relative; isolation: isolate; }
@keyframes beam { to { top: 100%; } }
.dark .eyebrow { color: var(--d-faint); }
.dark .section-title { color: var(--d-text); }
.dark .section-sub { color: var(--d-muted); }
.dark strong { color: var(--d-text); }

/* ---------- Rows (education + experience) ---------- */
.rows { border-top: 1px solid var(--line); }
.role { padding: 32px 0; border-bottom: 1px solid var(--line); }
.role-head { display: grid; grid-template-columns: 48px 1fr; gap: 6px 18px; align-items: center; }
.role-when { grid-column: 2; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.role-when span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line-strong); }
@media (min-width: 760px) {
  .role-head { grid-template-columns: 56px 1fr auto; }
  .role-when { grid-column: 3; grid-row: 1; text-align: right; }
}
.org-logo { width: 48px; height: 48px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); object-fit: contain; }
@media (min-width: 760px) { .org-logo { width: 56px; height: 56px; padding: 10px; } }
.org-logo.invert { filter: invert(1); background: #0b0909; border-color: #0b0909; }
.org-logo.on-dark { background: #000; border-color: #000; }
.monogram { display: grid; place-items: center; font-size: 20px; font-weight: 500; color: var(--muted); }
.role-company { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.role-title { font-size: 15px; color: var(--muted); }
.role-body { margin-top: 18px; max-width: 48em; }
@media (min-width: 760px) { .role-body { margin-left: 74px; } }
.role-summary { font-size: 16px; color: var(--ink); }
.role-bullets { margin-top: 12px; display: grid; gap: 8px; }
.role-bullets li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--text); }
.role-bullets li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--muted); }
.role-body .text-link { margin-top: 16px; }
/* Experience: feature cards (main roles) + compact grid (finance & audit) */
.xp-features { display: grid; gap: 24px; }
.xp-card .bezel-inner { display: flex; flex-direction: column; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.xp-card:hover .bezel-inner { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12, 13, 14, 0.07); }
.xp-cover { position: relative; overflow: hidden; height: 88px; margin: calc(-1 * clamp(22px, 3vw, 34px)) calc(-1 * clamp(22px, 3vw, 34px)) 0; border-bottom: 1px solid var(--line); background: radial-gradient(rgba(12, 13, 14, 0.13) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(160deg, #f9fafa, #eceff0); animation: drift 24s linear infinite; }
.xp-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(249, 250, 250, 0.92), rgba(249, 250, 250, 0) 60%); }
.xp-card:hover .edu-mark { opacity: 0.14; transform: translateY(-52%) rotate(-4deg) scale(1.06); }
.xp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.xp-feature .xp-top { margin-top: -32px; }
.xp-top .org-logo { width: 64px; height: 64px; padding: 11px; border-radius: 18px; box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 10px 24px rgba(12, 13, 14, 0.06); }
.xp-company { margin-top: 18px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.xp-role { margin-top: 4px; font-size: 15px; color: var(--muted); }
.xp-grid { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 900px) { .xp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start; } }
.xp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xp-stat { padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.03); }
.xp-stat.wide, .xp-stats .xp-stat:only-child { grid-column: 1 / -1; }
.xp-num { font-size: 26px; line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.xp-stat.wide .xp-num { font-size: 40px; }
.xp-label { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.xp-bar { position: relative; height: 6px; margin-top: 14px; border-radius: 99px; background: var(--ink); overflow: hidden; }
.xp-bar span { position: absolute; inset: 0 auto 0 0; width: var(--from); background: var(--line-strong); }
.xp-summary { font-size: 17px; line-height: 1.5; color: var(--ink); }
.xp-card .role-bullets { margin-top: 12px; gap: 8px; }
.xp-card .role-bullets li { font-size: 15px; }
.tool-chips.tool-chips-light li { border-color: var(--line); background: var(--surface); color: var(--text); }
.tool-chips.tool-chips-light img { padding: 0; }
.xp-link { margin-top: 18px; }
.xp-sub { margin: 56px 0 18px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xp-compacts { display: grid; gap: 20px; }
@media (min-width: 760px) { .xp-compacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .xp-compacts { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.xp-compact { display: flex; transition-delay: calc(var(--d) * 90ms); }
.xp-compact .bezel-inner { flex: 1; padding: 24px; }
.xp-compact .org-logo { width: 52px; height: 52px; padding: 9px; border-radius: 14px; }
.xp-compact .xp-company { margin-top: 16px; font-size: 20px; }
.xp-compact .xp-role { font-size: 14px; }
.xp-compact .xp-stats { margin-top: 18px; }
.xp-compact .xp-num { font-size: 22px; }
.xp-compact .role-bullets { margin-top: 18px; }
.xp-compact .role-bullets li { font-size: 14px; }
/* Education cards */
.edu-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .edu-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .edu-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.edu-card { display: flex; transition-delay: calc(var(--d) * 90ms); }
.edu-card .bezel-inner { flex: 1; display: flex; flex-direction: column; padding: 26px; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.edu-card:hover .bezel-inner { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(12, 13, 14, 0.08); }
.edu-cover { position: relative; overflow: hidden; height: 104px; margin: -26px -26px 0; border-bottom: 1px solid var(--line); background: radial-gradient(rgba(12, 13, 14, 0.13) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(160deg, #f9fafa, #eceff0); animation: drift 24s linear infinite; }
@keyframes drift { to { background-position: 14px 28px, 0 0; } }
.edu-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(249, 250, 250, 0.9), rgba(249, 250, 250, 0) 55%); }
.edu-mark { position: absolute; right: -6%; top: 50%; width: auto; height: 190%; max-width: 75%; object-fit: contain; opacity: 0.08; filter: grayscale(1); transform: translateY(-50%) rotate(-10deg); transition: transform 0.9s var(--ease), opacity 0.4s ease; }
.edu-mark.invert { filter: grayscale(1) invert(1); }
.edu-card:hover .edu-mark { opacity: 0.14; transform: translateY(-52%) rotate(-4deg) scale(1.06); }
.edu-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -38px; }
.edu-logo { display: grid; place-items: center; width: 76px; height: 76px; padding: 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 10px 24px rgba(12, 13, 14, 0.06); transition: transform 0.45s var(--ease); }
.edu-card:hover .edu-logo { transform: rotate(-5deg) scale(1.05); }
.edu-logo img { width: 100%; height: 100%; object-fit: contain; }
.edu-logo img.invert { filter: invert(1); }
.edu-years { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.edu-school { margin-top: 28px; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.edu-degree { margin-top: 6px; font-size: 16px; color: var(--text); }
.edu-city { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.edu-city { margin-bottom: 22px; }
.edu-note { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; }
.edu-note-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.edu-note-ico svg { width: 14px; height: 14px; }

/* ---------- Automations (dark) ---------- */
.autos { border-top: 1px solid var(--d-line); }
.auto { display: grid; gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--d-line); }
@media (min-width: 960px) { .auto { grid-template-columns: 1.15fr 0.85fr; gap: 64px; } }
.auto-index { font-size: 13px; letter-spacing: 0.08em; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.auto-title { margin-top: 8px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 400; letter-spacing: -0.025em; color: var(--d-text); }
.auto-facts { margin-top: 20px; display: grid; gap: 14px; }
.auto-facts dt { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-faint); }
.auto-facts dd { margin-top: 2px; font-size: 16px; line-height: 1.55; color: var(--d-muted); }
.auto-outcome dd { color: var(--d-text); font-weight: 500; }

.tool-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px; border: 1px solid var(--d-line-strong); font-size: 13px; color: var(--d-text); }
.tool-chips img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; background: #fff; padding: 1px; }

.auto-more { margin-top: 20px; border-top: 1px solid var(--d-line); }
.auto-more summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: 14px; font-weight: 500; color: var(--d-text); cursor: pointer; list-style: none; }
.auto-more summary::-webkit-details-marker { display: none; }
.auto-more summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; transition: transform 0.25s var(--ease); }
.auto-more[open] summary::after { transform: rotate(45deg); }
.auto-more p { margin-bottom: 12px; font-size: 15px; line-height: 1.6; color: var(--d-muted); }

.auto-visual { align-self: center; padding: 28px; border-radius: 20px; background: var(--d-card); border: 1px solid var(--d-line); }
.flow { position: relative; display: grid; gap: 10px; }
.flow::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 1px; background: var(--d-line-strong); }
.flow li { position: relative; padding: 11px 14px 11px 40px; border-radius: 10px; background: var(--d-card-2); border: 1px solid var(--d-line); font-size: 14px; color: var(--d-text); }
.flow li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--d-bg); border: 1px solid var(--d-faint); }
.flow li:last-child { background: var(--d-text); border-color: var(--d-text); color: var(--ink); font-weight: 500; }
.flow li:last-child::before { background: var(--ink); border-color: var(--ink); }
.flow::after { content: ""; position: absolute; left: 15px; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.45); animation: flow-pulse 4.5s linear infinite; }
@keyframes flow-pulse { 0% { top: 18px; opacity: 0; } 4% { opacity: 1; } 70% { top: calc(100% - 23px); opacity: 1; } 76%, 100% { top: calc(100% - 23px); opacity: 0; } }
.flow li { animation: step-lit 4.5s linear infinite; animation-delay: calc(var(--i) * 3.15s / (var(--n) - 1)); }
.flow li::before { animation: dot-lit 4.5s linear infinite; animation-delay: inherit; }
.flow li:last-child { animation-name: last-lit; }
@keyframes step-lit { 0% { border-color: var(--d-faint); } 14%, 100% { border-color: var(--d-line); } }
@keyframes dot-lit { 0% { background: #fff; border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); } 16%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); } }
@keyframes last-lit { 0% { box-shadow: 0 0 0 6px rgba(241, 243, 243, 0.16); } 22%, 100% { box-shadow: 0 0 0 6px rgba(241, 243, 243, 0); } }

/* ---------- Tool stack ---------- */
#stack .xp-sub { margin-top: 0; }
.core-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .core-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.core-tile { display: flex; transition-delay: calc(var(--d) * 70ms); }
.core-tile.wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .core-tile.wide { grid-column: span 2; grid-row: span 2; } }
.core-tile .bezel-inner { flex: 1; display: flex; flex-direction: column; padding: 20px; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.core-tile:hover .bezel-inner { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12, 13, 14, 0.07); }
.core-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.core-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04), 0 8px 20px rgba(12, 13, 14, 0.06); transition: transform 0.45s var(--ease); }
.core-tile:hover .core-logo { transform: rotate(-5deg) scale(1.05); }
.core-logo img { width: 28px; height: 28px; object-fit: contain; }
.core-group { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; }
.core-name { margin-top: auto; padding-top: 22px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.core-note { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.core-tile.wide .bezel-inner { padding: clamp(22px, 3vw, 34px); background: radial-gradient(rgba(12, 13, 14, 0.1) 1px, transparent 1.4px) 0 0 / 14px 14px, radial-gradient(120% 70% at 50% 0%, #ffffff 0%, #f6f8f9 60%); }
.core-tile.wide .core-logo { width: 76px; height: 76px; border-radius: 20px; }
.core-tile.wide .core-logo img { width: 40px; height: 40px; }
.core-tile.wide .core-name { font-size: clamp(26px, 3vw, 36px); }
.core-tile.wide .core-note { font-size: 16px; color: var(--text); max-width: 26em; }

.stack-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 64px 0 18px; }
.stack-head .xp-sub { margin: 0; }
.stack-count { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.stack-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.filter-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tool-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-tile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s ease, transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tool-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 13, 14, 0.06); }
.tool-tile[hidden] { display: none; }
.tool-tile-logo { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.tool-tile-logo img { width: 22px; height: 22px; object-fit: contain; }
.tool-tile-text { display: flex; flex-direction: column; min-width: 0; }
.stack-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.stack-use { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.tool-mono { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.stack-label { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: 0.08s; }
.hero .reveal:nth-child(3) { transition-delay: 0.16s; }
.hero .reveal:nth-child(4) { transition-delay: 0.24s; }
.hero .hero-bar { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse::after, .orbit-track, .orbit-logo img { animation: none; }
  .growth-dots i:not(.on) { background: var(--ink); }
  .orbit-grid, .orbit-ping, .edu-cover, .xp-cover, .flow::after, .flow li, .flow li::before { animation: none; }
  .orbit-ping, .flow::after { display: none; }
  .btn-ico, .menu-icon, .menu-icon::before, .text-link svg, .nav-indicator, .cta-arrows svg { transition: none; }
  .topbar, .menu-open .topnav, .nav-pill li { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .xp-num, .xp-compact .xp-num { font-size: 21px; }
  .xp-stat.wide .xp-num { font-size: 34px; }
  .xp-stat { padding: 14px 15px; }
}
.core-name { margin-bottom: 0; }
.core-proof { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.core-proof li { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 13px; }
.core-proof svg { width: 12px; height: 12px; }
@media (min-width: 900px) { .core-tile.wide .core-name { padding-top: 0; } .core-tile.wide .core-top { margin-bottom: auto; padding-bottom: 32px; } }
.core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .core-tile:not(.wide) .core-group { display: none; }
  .core-tile .bezel-inner { padding: 16px; }
  .core-name { font-size: 17px; }
  .core-note { font-size: 13px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool-tile { gap: 10px; padding: 10px; }
  .tool-tile .stack-use { display: none; }
  .tool-tile-logo { width: 34px; height: 34px; border-radius: 10px; }
  .tool-tile-logo img { width: 18px; height: 18px; }
  .tool-tile .stack-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Footer (card on a dark starfield, after workflows.io) ---------- */
.site-foot { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 28px; }
.foot-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.site-foot .wrap { position: relative; }
.foot-card { padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: linear-gradient(180deg, rgba(22, 23, 24, 0.92), rgba(12, 13, 14, 0.96)); border: 1px solid var(--d-line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.foot-top { display: grid; gap: 48px; }
@media (min-width: 1000px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; } }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--d-text); }
.foot-brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.foot-title { margin-top: clamp(32px, 5vw, 64px); max-width: 16em; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; color: var(--d-text); }
.foot-form { display: flex; gap: 6px; margin-top: 22px; max-width: 540px; padding: 6px; border-radius: 18px; background: var(--d-card-2); border: 1px solid var(--d-line-strong); }
.foot-form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; font: 400 16px var(--font); color: var(--d-text); }
.foot-form input::placeholder { color: var(--d-muted); }
.foot-form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--d-line-strong); }
.foot-form.invalid input { box-shadow: inset 0 0 0 1px #e5534b; }
.foot-form .btn { flex: none; min-height: 50px; border-radius: 12px; }
.foot-status { margin-top: 12px; font-size: 13px; color: var(--d-faint); }
.foot-cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .foot-cols { grid-template-columns: 0.8fr 0.8fr 1.4fr; } }
.foot-touch { grid-column: 1 / -1; }
@media (min-width: 760px) { .foot-touch { grid-column: auto; } }
.foot-label { margin-bottom: 14px; font-size: 14px; color: var(--d-faint); }
.foot-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot-col a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--d-text); transition: opacity 0.2s ease; }
.foot-col a:hover { opacity: 0.7; }
.foot-col a svg { width: 15px; height: 15px; }
.foot-person { gap: 12px !important; }
.foot-person img, .foot-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.foot-ico { display: grid; place-items: center; background: var(--d-card-2); border: 1px solid var(--d-line-strong); }
.foot-col .foot-ico svg { width: 16px; height: 16px; }
.foot-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.foot-person strong { font-size: 15px; font-weight: 500; color: var(--d-text); overflow-wrap: anywhere; }
.foot-person strong + span { font-size: 13px; color: var(--d-faint); }
.foot-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--d-line); }
.foot-big { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(24px, 3vw, 38px); font-weight: 300; letter-spacing: -0.03em; color: var(--d-text); }
.foot-big span { font-weight: 500; }
.foot-big svg { width: 0.8em; height: 0.8em; transition: transform 0.3s var(--ease); }
.foot-big:hover svg { transform: translate(3px, -3px); }
.foot-quick { display: flex; align-items: center; gap: 10px; }
.foot-quick-label { margin-right: 8px; font-size: clamp(18px, 2vw, 24px); font-weight: 300; letter-spacing: -0.02em; color: var(--d-text); }
.foot-round { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--d-card-2); border: 1px solid var(--d-line-strong); color: var(--d-text); transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease); }
.foot-round:hover { background: var(--d-text); color: var(--ink); transform: translateY(-2px); }
.foot-round svg { width: 18px; height: 18px; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; }
.foot-logos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot-logos li { display: grid; place-items: center; width: 40px; height: 40px; padding: 7px; border-radius: 11px; background: #fff; opacity: 0.85; transition: opacity 0.2s ease; }
.foot-logos li:hover { opacity: 1; }
.foot-logos img { width: 100%; height: 100%; object-fit: contain; }
.foot-logos img.on-dark { filter: none; }
.foot-logos li:has(img.on-dark) { background: #000; border: 1px solid var(--d-line-strong); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; font-size: 13px; color: var(--d-faint); }
.foot-legal a { color: var(--d-muted); }
.foot-legal a:hover { color: var(--d-text); }
@media (max-width: 520px) { .foot-form { flex-direction: column; } .foot-form .btn { justify-content: center; } .foot-quick-label { width: 100%; } .foot-quick { flex-wrap: wrap; } }

/* Mouse reveal layer: fixed behind all content, above the page background */
.fx-cursor { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Availability badge: green status light ---------- */
.badge-ico { position: relative; background: #1f9d55; color: #fff; }
.badge-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(31, 157, 85, 0.55); animation: avail 2.4s var(--ease) infinite; }
@keyframes avail { 0% { transform: scale(0.75); opacity: 1; } 80%, 100% { transform: scale(1.45); opacity: 0; } }

/* ---------- Floating glass surfaces (frosted, slightly see-through, soft lift) ---------- */
:root {
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --float: 0 1px 1px rgba(12, 13, 14, 0.03), 0 8px 24px -6px rgba(12, 13, 14, 0.08), 0 24px 60px -18px rgba(12, 13, 14, 0.12);
}
.badge, .chips li, .lead-form, .edu-years, .filter-chip:not(.is-on), .stack-count, .round-arrow, .core-group, .sq, .team-ico {
  background: var(--glass) !important;
  border-color: var(--glass-edge) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: var(--float);
}
.bezel {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 18px 40px -12px rgba(12, 13, 14, 0.10), 0 40px 90px -30px rgba(12, 13, 14, 0.16) !important;
}
.bezel-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.55)) !important;
  border-color: var(--glass-edge) !important;
}
.stat-tile, .xp-stat, .tool-tile, .edu-note {
  background: var(--glass-strong) !important;
  border-color: var(--glass-edge) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--float);
}
.chips li { border: 1px solid var(--glass-edge); }
/* A gentle lift on hover keeps the floating feel tactile */
.chips li, .stat-tile, .xp-stat, .tool-tile { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.chips li:hover, .stat-tile:hover, .xp-stat:hover { transform: translateY(-2px); box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 14px 32px -8px rgba(12, 13, 14, 0.14); }
@media (prefers-reduced-motion: reduce) { .badge-ico::after { animation: none; opacity: 0; } }

/* ---------- Squared buttons (small radius, after workflows.io) ---------- */
:root { --btn-r: 6px; }
.btn, .lead-form .btn, .foot-form .btn, .menu-btn, .filter-chip { border-radius: var(--btn-r) !important; }
.btn-ico { border-radius: 4px !important; }
.btn:hover .btn-ico { transform: translate(2px, -2px); }
.cta-square, .cta-square-sm, .sq { border-radius: var(--btn-r) !important; }
.cta:hover .cta-square { border-radius: var(--btn-r) !important; }
.round-arrow, .foot-round { border-radius: var(--btn-r) !important; }
.chips li { border-radius: var(--btn-r) !important; }
.lead-form, .foot-form { border-radius: 10px !important; }
.lead-form input, .foot-form input { border-radius: var(--btn-r) !important; }
/* Straight, inset divider between Name and Email (a bordered rounded edge looked like a bracket) */
.lead-form input + label + input { border: 0 !important; background: linear-gradient(var(--line), var(--line)) 0 50% / 1px 26px no-repeat; }
@media (max-width: 639px) { .lead-form input + label + input { background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - 36px) 1px no-repeat; } }
.lead-form input + label + input:focus { background: var(--surface); }

/* ---------- Squared profile photos (match the squared buttons) ---------- */
.brand-photo { border-radius: 10px !important; }
.hero-linkedin img, .foot-brand img, .foot-person img, .foot-ico { border-radius: var(--btn-r) !important; }
.orbit-me { border-radius: 14px !important; }

/* ---------- Availability light in UAE colours (red hoist, green / white / black bands) ---------- */
.badge-ico {
  background:
    linear-gradient(90deg, #ef3340 0 30%, transparent 30%),
    linear-gradient(#00843d 0 33.3%, #ffffff 33.3% 66.6%, #111111 66.6%) !important;
  box-shadow: inset 0 0 0 1px rgba(12, 13, 14, 0.12);
  overflow: visible;
}
.badge-ico svg { display: none; }
.badge-ico::after { border-color: #00843d; animation: avail 2.4s var(--ease) infinite, avail-uae 4.8s steps(1) infinite; }
@keyframes avail-uae { 0% { border-color: rgba(0, 132, 61, 0.6); } 50% { border-color: rgba(239, 51, 64, 0.55); } }

/* ---------- Track record: monochrome logos + centred cards ---------- */
.orbit-logo img, .team-ico img, .foot-logos img, .card-kicker img { filter: grayscale(1) brightness(0); }
.orbit-logo.on-dark img, .team-ico.on-dark img, .foot-logos img.on-dark { filter: grayscale(1); }
.orbit-logo:not(.on-dark), .team-ico:not(.on-dark) { background: var(--glass-strong) !important; }

.proof-grid .bezel-inner { align-items: center; text-align: center; }
.proof-grid .highlight-title { max-width: 18em; }
.proof-grid .highlight-text { margin-left: auto; margin-right: auto; }
.proof-grid .stat-tiles { align-self: stretch; text-align: left; }
.proof-grid .square-link { align-self: center; }
.teams .orbit { align-self: center; }
.team-list { align-self: stretch; }
.orbit-logo.on-dark, .team-ico.on-dark { background: #000 !important; border-color: #000 !important; }
.card-kicker img { filter: none !important; }
.teams-badge { margin: 0; font: inherit; }
.teams-badge .pill-badge { margin: 0; }
.growth-badge { gap: 8px; padding-left: 14px; padding-right: 14px; }
.growth-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.growth-logo img { width: 15px; height: 15px; object-fit: contain; }
.growth-badge { padding-left: 6px !important; }
/* Reference tile */
.ref-tile { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.ref-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ref-person { display: flex; align-items: center; gap: 12px; }
.ref-photo { flex: none; width: 44px; height: 44px; border-radius: var(--btn-r); object-fit: cover; }
.ref-mono { display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.ref-person strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.ref-person strong + span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.ref-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 500; color: var(--ink); }
.ref-link svg { width: 14px; height: 14px; }
.ref-link svg:last-child { transition: transform 0.25s var(--ease); }
.ref-tile:hover .ref-link svg:last-child { transform: translate(2px, -2px); }
.highlight-text, .highlight-title { text-wrap: balance; }
/* Track record: tiles sit right under the paragraph; spare height goes above the CTA */
.proof-grid .stat-tiles { margin-top: 0; padding-top: 28px; }
.proof-grid .square-link { margin-top: auto; padding-top: 26px; }
/* Share the card's spare height evenly: above the tiles and above the CTA */
.proof-grid .stat-tiles { margin-top: auto; padding-top: 24px; }
.proof-grid .square-link { margin-top: auto; padding-top: 24px; }
.proof-grid .highlight-text { margin-bottom: 0; }

/* ---------- Education: editorial list, logos lead ---------- */
.ed-list { border-top: 1px solid var(--ink); }
.ed-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 26px 4px; border-bottom: 1px solid var(--line-strong); transition-delay: calc(var(--d) * 90ms); }
.ed-logo { grid-row: span 3; align-self: start; display: grid; place-items: center; width: 64px; height: 64px; padding: 8px; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.ed-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.9); }
.ed-logo img.invert { filter: invert(1) grayscale(1) contrast(1.4); }
.ed-logo img[src*="mono/"] { filter: none; }
.ed-years { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-school { font-size: clamp(21px, 2.3vw, 30px); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.ed-sub { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ed-note { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ink); }
.ed-note-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); }
.ed-note-ico svg { width: 11px; height: 11px; }
.ed-note.is-win .ed-note-ico { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ed-row:hover .ed-logo { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 16px 34px -10px rgba(12, 13, 14, 0.18); }
@media (min-width: 900px) {
  .ed-row { grid-template-columns: 96px minmax(0, 1fr) 240px 170px; gap: 0 36px; padding: 30px 4px; }
  .ed-logo { grid-row: auto; align-self: center; width: 96px; height: 96px; padding: 12px; border-radius: 14px; }
  .ed-years { grid-column: 4; grid-row: 1; justify-self: end; }
  .ed-note { grid-column: 3; grid-row: 1; margin-top: 0; }
}

/* ---------- Automation diagram: nodes + travelling signal ---------- */
.auto-visual { position: relative; overflow: hidden; padding: 26px 26px 26px 24px !important; border-radius: 20px !important;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 16px 16px, linear-gradient(180deg, #121314, #0c0d0e) !important;
  border: 1px solid var(--d-line-strong) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.pipe { --gap: 14px; --dur: 5.2s; position: relative; display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
/* the wire behind the icons */
.pipe::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: linear-gradient(var(--d-line-strong), var(--d-line-strong)); }
/* the signal running down the wire */
.pipe::after { content: ""; position: absolute; left: 19px; top: 22px; width: 5px; height: 26px; border-radius: 3px; background: linear-gradient(transparent, #fff); box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.35); animation: pipe-signal var(--dur) cubic-bezier(.55, 0, .45, 1) infinite; }
@keyframes pipe-signal { 0% { transform: translateY(-26px); opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 86%, 100% { transform: translateY(calc(var(--h, 260px) - 22px)); opacity: 0; } }
.pipe-node { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 0; border-radius: 14px; }
.pipe-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #1a1b1c; border: 1px solid var(--d-line-strong); color: var(--d-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: pipe-lit var(--dur) linear infinite; animation-delay: calc(var(--i) * (var(--dur) * 0.7) / (var(--n) - 1)); }
.pipe-ico img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; }
.pipe-ico svg { width: 19px; height: 19px; }
@keyframes pipe-lit { 0% { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10), 0 0 18px rgba(255, 255, 255, 0.25); } 14%, 100% { border-color: var(--d-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } }
.pipe-text { display: grid; gap: 1px; min-width: 0; }
.pipe-kind { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-faint); }
.pipe-text strong { font-size: 15.5px; font-weight: 500; color: var(--d-text); }
.pipe-sub { font-size: 13px; line-height: 1.4; color: var(--d-muted); }
/* the output node is the result: a solid white card */
.pipe-node.is-out { padding: 12px 14px; margin-left: -12px; background: var(--d-text); }
.pipe-node.is-out .pipe-ico { background: var(--ink); border-color: var(--ink); color: #fff; animation-name: pipe-lit-out; }
.pipe-node.is-out .pipe-kind { color: #6b6b6b; }
.pipe-node.is-out strong { color: var(--ink); }
.pipe-node.is-out .pipe-sub { color: #4a4a4a; }
@keyframes pipe-lit-out { 0% { box-shadow: 0 0 0 4px rgba(12, 13, 14, 0.15); } 20%, 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .pipe::after, .pipe-ico { animation: none !important; } }
.pipe::after { animation-name: pipe-signal-full !important; }
@keyframes pipe-signal-full { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 76% { opacity: 1; } 84%, 100% { top: calc(100% - 40px); opacity: 0; } }
/* Automations: every tool logo as a white mark on the dark band */
#automations .tool-chips img, #automations .pipe-ico img { background: none !important; padding: 0 !important; border-radius: 0 !important; filter: grayscale(1) brightness(0) invert(1); }
.pipe-node.is-out .pipe-ico img { filter: grayscale(1) brightness(0) invert(1); }
/* Clay keeps its arch layers as white shades: no flattening filter */
#automations img[src*="mono/clay"], .pipe-node.is-out .pipe-ico img[src*="mono/clay"] { filter: none !important; }

/* ---------- Pills: pressed-in glass with a lit rim (after workflows.io) ---------- */
.badge, .pill-badge {
  position: relative; isolation: isolate; overflow: hidden;
  gap: 10px; padding: 8px 18px 8px 8px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 32px rgba(12, 13, 14, 0.05), inset 8px 8px 15px rgba(12, 13, 14, 0.08), inset -8px -8px 20px #fff !important;
  font-weight: 400; letter-spacing: 0.04em; color: var(--ink);
}
.badge::before, .pill-badge::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, #fff 15%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.3) 41%, rgba(255, 255, 255, 0.3) 64%, rgba(255, 255, 255, 0.9) 75%, #fff 91%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
.pill-dark {
  background: rgba(27, 27, 27, 0.2) !important;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.2), inset 8px 8px 15px rgba(0, 0, 0, 0.35), inset -8px -8px 20px rgba(255, 255, 255, 0.05) !important;
  color: var(--d-text);
}
.pill-dark::before { background: linear-gradient(150deg, rgba(255, 255, 255, 0.6) 15%, rgba(255, 255, 255, 0.2) 30%, transparent 41%, transparent 64%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.4) 91%); }
/* Dark icon disc with its own bevelled rim */
.pill-ico { position: relative; overflow: hidden; background: #1b1b1b !important; color: #fff !important; }
.pill-ico::before, .badge-ico::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #7e7e7e, #080808);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
.badge-ico::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.35)); }
.pill-dark .pill-ico { background: #f2f2f2 !important; color: var(--ink) !important; }
.pill-dark .pill-ico::before { background: linear-gradient(135deg, #fff, #9a9a9a); }
/* Hover: a soft glow blooms under the cursor and lights the rim nearby */
.pill-glow { position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: -1; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(230, 235, 255, 0.35) 50%, transparent 72%); transition: transform 0.5s var(--ease); }
.pill-dark .pill-glow { background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(200, 215, 255, 0.06) 50%, transparent 72%); }
.pill-rim { position: absolute; inset: 0; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.pill-rim i { position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #9aa4a8 0%, rgba(154, 164, 168, 0.5) 25%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; }
.pill-dark .pill-rim i { background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.5) 22%, transparent 58%); }
.badge:hover .pill-glow, .pill-badge:hover .pill-glow { transform: translate(-50%, -50%) scale(1); }
.badge:hover .pill-rim i, .pill-badge:hover .pill-rim i { opacity: 1; animation: rim-breathe 1.75s ease-in-out infinite; }
@keyframes rim-breathe { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pill-glow { transition: none; } .badge:hover .pill-rim i, .pill-badge:hover .pill-rim i { animation: none; } }

/* ---------- Experience: logo-led header, black-and-white marks ---------- */
.xp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 20px; }
.xp-logo { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; padding: 11px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.xp-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.6) contrast(1.8); }
.xp-logo img[src*="mono/"] { filter: none; }
.xp-logo.on-dark { background: #000 !important; border-color: #000; }
.xp-logo.on-dark img { filter: grayscale(1); }
.xp-card:hover .xp-logo { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 16px 34px -10px rgba(12, 13, 14, 0.18); }
.xp-head .xp-company { margin-top: 0; }
.xp-head .xp-role { margin-top: 2px; }
.xp-dates { grid-column: 2; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .xp-feature .xp-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .xp-feature .xp-logo { width: 84px; height: 84px; padding: 14px; border-radius: 14px; }
  .xp-feature .xp-dates { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
.xp-feature .xp-grid { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.xp-compact .xp-head { grid-template-columns: auto minmax(0, 1fr); }
.xp-compact .xp-logo { width: 56px; height: 56px; padding: 10px; }
.xp-compact .xp-company { font-size: 19px; }
.xp-compact .xp-head { margin-bottom: 4px; }
.xp-compact .xp-dates { grid-column: 1 / -1; margin-top: 14px; }
/* Tool chips: monochrome marks */
.tool-chips.tool-chips-light img { background: none; filter: grayscale(1) contrast(1.3); }
.tool-chips.tool-chips-light li { background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.05); color: var(--ink); }
/* Reference inside a compact role card (e.g. Vane) */
.xp-compact .bezel-inner { display: flex; flex-direction: column; }
.xp-ref { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.xp-compact .role-bullets + .xp-ref { margin-top: 22px; }
.xp-ref:hover { transform: translateY(-2px); box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 14px 32px -8px rgba(12, 13, 14, 0.14); }
.xp-ref img { flex: none; width: 44px; height: 44px; border-radius: var(--btn-r); object-fit: cover; object-position: 50% 25%; }
.xp-ref-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.xp-ref-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xp-ref-text strong { font-size: 15px; font-weight: 500; color: var(--ink); }
.xp-ref-text strong + span { font-size: 13px; color: var(--muted); }
.xp-ref-go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--btn-r); border: 1px solid var(--line-strong); color: var(--ink); transition: background 0.2s ease, color 0.2s ease; }
.xp-ref-go svg { width: 15px; height: 15px; }
.xp-ref:hover .xp-ref-go { background: var(--ink); color: var(--bg); }
.xp-ref-mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--btn-r); background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.xp-side { display: grid; gap: 10px; align-content: start; }
.xp-side .xp-ref { margin-top: 0; }
/* Experience bars draw in from the left when the card is revealed */
.js .xp-card .xp-bar { clip-path: inset(0 100% 0 0 round 99px); transition: clip-path 1.4s var(--ease) 0.3s; }
.js .xp-card.in .xp-bar { clip-path: inset(0 0 0 0 round 99px); }
@media (prefers-reduced-motion: reduce) { .js .xp-card .xp-bar { clip-path: none; transition: none; } }

/* ---------- Scalantec: live Clay-style lead table ---------- */
.gt { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; margin: 0; overflow: hidden; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); }
.gt-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.gt-dots { display: inline-flex; gap: 5px; }
.gt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.gt-title strong { color: var(--ink); font-weight: 600; }
.gt-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gt-live { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.gt-live.on { background: var(--ink); animation: gt-blink 1s ease-in-out infinite; }
@keyframes gt-blink { 50% { opacity: 0.3; } }
.gt table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.gt th { padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.gt th:nth-child(1) { width: 36%; } .gt th:nth-child(2) { width: 30%; } .gt th:nth-child(3) { width: 16%; } .gt th:nth-child(4) { width: 18%; }
.gt td { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt tbody tr:last-child td { border-bottom: 0; }
.gt-co { font-weight: 500; color: var(--ink) !important; }
.gt tbody { transition: opacity 0.4s ease; }
.gt tbody.gt-out { opacity: 0; }
.gt-new { animation: gt-in 0.45s var(--ease) both; }
@keyframes gt-in { from { opacity: 0; transform: translateY(5px); } }
.gt-fill { animation: gt-flash 0.9s ease-out; }
@keyframes gt-flash { 0% { background: rgba(12, 13, 14, 0.07); } 100% { background: transparent; } }
.gt-pend { display: inline-block; width: 70%; max-width: 70px; height: 8px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, var(--line) 0%, rgba(255, 255, 255, 0.9) 50%, var(--line) 100%) 0 0 / 200% 100%; animation: gt-shimmer 1.2s linear infinite; }
@keyframes gt-shimmer { to { background-position: -200% 0; } }
.gt-bar { display: none; }
.gt-num { font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.gt-ok { display: inline-flex; padding: 2px 8px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; }
.gt-no { font-size: 11.5px; color: var(--muted); }
.is-out td:not(.gt-fit) { opacity: 0.5; transition: opacity 0.4s ease; }
.gt-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink); }
.gt-flow i { font-style: normal; color: var(--muted); }
.gt-note { margin-left: auto; color: var(--muted); }
@media (min-width: 1100px) { .gt-bar { display: inline-block; width: 26px; height: 5px; margin-right: 6px; border-radius: 99px; background: var(--line); vertical-align: middle; overflow: hidden; } .gt-bar i { display: block; width: 0; height: 100%; background: var(--ink); transition: width 0.7s var(--ease); } .gt th:nth-child(3) { width: 19%; } .gt th:nth-child(1) { width: 33%; } }
@media (prefers-reduced-motion: reduce) { .gt-live.on, .gt-pend { animation: none; } }
/* Column sizing: status and score fixed, names take the rest */
.gt th:nth-child(1) { width: auto !important; } .gt th:nth-child(2) { width: 32% !important; } .gt th:nth-child(3) { width: 46px !important; } .gt th:nth-child(4) { width: 88px !important; }
.gt td, .gt th { padding-inline: 10px; }
.gt td.gt-fit { overflow: visible; text-overflow: clip; }
.gt-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (min-width: 1100px) { .gt th:nth-child(3) { width: 76px !important; } }
@media (max-width: 1099px) { .gt-dots { display: none; } }
.gt-foot { justify-content: center; }
/* Featured roles: logo, company, role and dates on one line; CTA centred under the tools */
@media (min-width: 760px) {
  .xp-feature .xp-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 20px; }
  .xp-feature .xp-logo { grid-row: auto; width: 64px; height: 64px; padding: 11px; border-radius: 12px; }
  .xp-feature .xp-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
  .xp-feature .xp-head .xp-role { margin-top: 0; }
  .xp-feature .xp-dates { grid-column: 3; grid-row: 1; align-self: center; }
}
.xp-feature .xp-main { display: flex; flex-direction: column; }
.xp-feature .xp-main .xp-link { align-self: center; margin-top: 24px; }
/* Role line sits under the company name; logo, name block and dates stay on one row */
@media (min-width: 760px) {
  .xp-feature .xp-id { display: grid; gap: 4px; align-items: start; }
}
/* Finance & audit: identity only (details live in the PDF); a reference sits under it */
.xp-compact .xp-ref { margin-top: 22px; }
.xp-compact .xp-ref { margin-top: 22px; margin-bottom: 0; }
.xp-foot-dates { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xp-compact .xp-head + .xp-foot-dates, .xp-compact .xp-ref + .xp-foot-dates { margin-top: auto; }
.xp-compact .bezel-inner { gap: 0; }
.xp-compact .xp-head { margin-bottom: 26px; }
.xp-compact .xp-ref { margin: 0 0 22px; }
.xp-hl .xp-ref-mono svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.xp-hl:hover { transform: none; }
.xp-compact .xp-role { color: var(--ink); }
.xp-meta { margin-top: 2px; font-size: 14px; color: var(--muted); }
.xp-compact .xp-head { align-items: start; }
/* PwC + AKRO share the last column as two short cards */
.xp-stack { display: grid; gap: 20px; }
@media (min-width: 1100px) { .xp-stack { gap: 24px; grid-template-rows: 1fr 1fr; } }
.xp-stack .xp-compact .xp-head { margin-bottom: 18px; }
.xp-stack .xp-compact .bezel-inner { padding: 22px 24px; }

/* ---------- Finance & audit: one panel, four logo columns ---------- */
.fa-panel { display: grid; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
@media (min-width: 640px) { .fa-panel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fa-panel { grid-template-columns: repeat(4, 1fr); } }
.fa-col { display: flex; flex-direction: column; align-items: center; padding: 32px 20px 30px; text-align: center; border-bottom: 1px solid var(--line); transition-delay: calc(var(--d) * 80ms); }
@media (min-width: 640px) { .fa-col:nth-child(odd) { border-right: 1px solid var(--line); } .fa-col:nth-last-child(-n + 2) { border-bottom: 0; } }
@media (min-width: 1000px) { .fa-col { border-bottom: 0; border-right: 1px solid var(--line); } .fa-col:last-child { border-right: 0; } }
.fa-logo { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 20px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--glass-edge); box-shadow: var(--float); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.fa-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.6) contrast(1.8); }
.fa-logo img[src*="mono/"] { filter: none; }
.fa-logo.on-dark { background: #000; border-color: #000; }
.fa-logo.on-dark img { filter: grayscale(1); }
.fa-go { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: 0 2px 6px rgba(12, 13, 14, 0.08); transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--ease); }
.fa-go svg { width: 12px; height: 12px; }
a.fa-logo:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgba(12, 13, 14, 0.03), 0 16px 34px -10px rgba(12, 13, 14, 0.18); }
a.fa-logo:hover .fa-go { background: var(--ink); color: var(--bg); transform: translate(1px, -1px); }
.fa-role { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.fa-meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.fa-dates { margin: 12px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fa-ref { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--float); font-size: 13.5px; color: var(--ink); text-align: left; transition: transform 0.3s var(--ease); }
.fa-ref:hover { transform: translateY(-2px); }
.fa-ref img { width: 32px; height: 32px; border-radius: var(--btn-r); object-fit: cover; object-position: 50% 25%; }
.fa-ref > span:nth-child(2) { display: grid; line-height: 1.3; }
.fa-ref-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fa-ref-go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--btn-r); border: 1px solid var(--line-strong); }
.fa-ref-go svg { width: 13px; height: 13px; }
.fa-ref:hover .fa-ref-go { background: var(--ink); color: var(--bg); }
.fa-hl { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.fa-hl-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.fa-hl-ico svg { width: 11px; height: 11px; }

/* Company names link to their websites */
.co-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.co-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; opacity: 0.4; transition: opacity 0.2s ease, transform 0.25s var(--ease); }
.co-ico svg { width: 13px; height: 13px; }
.co-link:hover .co-ico { opacity: 1; transform: translate(2px, -2px); }
.co-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fa-logo img[src*="akro-word"] { width: 112%; max-width: none; }
/* Return offer sits on the same line as the reference tile next to it (same height, centred) */
.fa-hl { min-height: 46px; }
/* EY highlight: same tile as the reference next door */
.fa-ref.fa-hl { min-height: 0; padding-right: 14px; font-size: 13.5px; }
.fa-ref.fa-hl:hover { transform: none; }
.fa-hl .fa-hl-ico { width: 32px; height: 32px; border-radius: var(--btn-r); }
.fa-hl .fa-hl-ico svg { width: 14px; height: 14px; }
/* Footer: one weight for "See what I've built"; name-only contact row centred next to the photo */
.foot-big span { font-weight: inherit; }
.foot-person { align-items: center; }
.foot-status:empty { display: none; }
/* Footer CTA smaller; logo strip below the card lines up with it (same left edge, same width) */
.foot-big { font-size: clamp(22px, 2.3vw, 30px); }
.foot-bottom { padding-inline: calc(clamp(24px, 3.4vw, 44px) + 1px); }
.foot-logos { gap: 8px; }
.foot-logos li { width: 38px; height: 38px; }
.foot-logos { gap: 11px; }
/* Footer card: ASCII texture behind the content, fading out behind the headline */
.foot-card { position: relative; overflow: hidden; isolation: isolate; }
.foot-fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, transparent 18%, #000 62%); mask-image: radial-gradient(120% 90% at 0% 0%, transparent 18%, #000 62%); }
/* "See what I have built" and "Reach me": same size, weight and line, centred on the buttons */
.foot-big, .foot-quick-label { font-size: clamp(22px, 2.3vw, 30px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.foot-big { padding-bottom: 0; }
/* Availability badge in the footer, above the headline */
.foot-badge { margin-top: clamp(28px, 4vw, 52px); color: var(--d-text); }
.foot-badge + .foot-title { margin-top: 18px; }
.foot-badge { display: flex !important; width: fit-content; }
/* Badge takes the brand's place in the top-left corner; headline keeps its original spacing */
.foot-badge { margin-top: 0; }
.foot-badge + .foot-title { margin-top: clamp(32px, 5vw, 64px); }

/* ---------- Tools: black and white, calmer ---------- */
/* Every mark in monochrome */
.core-logo img, .tool-tile-logo img { filter: grayscale(1) contrast(1.25); }
.core-logo img[src*="/mono/"], .tool-tile-logo img[src*="/mono/"] { filter: grayscale(1) brightness(0.2); }
/* Daily drivers: drop the category pills, logo and name carry it */
.core-group { display: none !important; }
.core-tile.wide .bezel-inner { background: radial-gradient(rgba(12, 13, 14, 0.08) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6)) !important; }
.core-logo { background: #fff; border-radius: 12px; }
/* Full stack: name-only tiles with room to breathe (the description shows on hover) */
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
@media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1100px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; } }
.tool-tile { gap: 14px; padding: 14px 16px !important; border-radius: 12px !important; }
.tool-tile .stack-use { display: none; }
.tool-tile-logo { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: #fff !important; }
.tool-tile .stack-name { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-head { margin-top: 72px; margin-bottom: 22px; }
@media (min-width: 1100px) { .tool-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.core-logo img, .tool-tile-logo img { filter: grayscale(1) brightness(0.62) contrast(1.9); }
.tool-tile .stack-name { white-space: normal !important; overflow: visible !important; line-height: 1.25; }
/* 22 tools: wrap in rows and centre the last, shorter row */
@media (min-width: 760px) {
  .tool-grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
  .tool-grid .tool-tile { flex: 0 0 calc((100% - 2 * 12px) / 3); }
}
@media (min-width: 1100px) { .tool-grid .tool-tile { flex-basis: calc((100% - 4 * 14px) / 5); } }
.tool-tile-logo .tool-mono, .core-logo .tool-mono { background: #000; color: #fff; font-weight: 500; }
/* Full stack: centred heading, no filter bar */
.stack-head { justify-content: center; }

/* ---------- Tools: one drivers card + one panel (matches the track-record cards and the finance panel) ---------- */
.dd-inner { display: grid; gap: 28px; padding: clamp(22px, 3vw, 34px) !important; }
@media (min-width: 900px) { .dd-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: stretch; } }
.dd-head { display: flex; align-items: center; gap: 18px; }
.dd-logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--glass-edge); box-shadow: var(--float); }
.dd-logo img { width: 32px; height: 32px; object-fit: contain; }
.dd-logo.sm { width: 48px; height: 48px; border-radius: 10px; }
.dd-logo.sm img { width: 24px; height: 24px; }
.dd-name { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.dd-note { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.dd-main .core-proof { margin-top: 18px; }
.dd-list { display: grid; margin: 0; padding: 0; list-style: none; align-content: center; }
@media (min-width: 900px) { .dd-list { padding-left: 40px; border-left: 1px solid var(--line); } }
.dd-list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dd-list li:last-child { border-bottom: 0; }
.dd-text { display: grid; min-width: 0; }
.dd-text strong { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.dd-text span { font-size: 14px; color: var(--muted); }
.dd-list li .dd-logo { transition: transform 0.35s var(--ease); }
.dd-list li:hover .dd-logo { transform: translateY(-2px) rotate(-4deg); }

/* Claude Code terminal: light glass, mono, like the Scalantec lead table */
.cc-term { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; margin-top: 22px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); overflow: hidden; font-family: var(--mono); }
.cc-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.cc-bar strong { color: var(--ink); font-weight: 600; }
.cc-dots { display: inline-flex; gap: 5px; }
.cc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.cc-body { height: 132px; padding: 12px 14px; overflow: hidden; }
.cc-line { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-cmd { color: var(--ink); font-weight: 500; }
.cc-ps { color: #d97757; }
.cc-out.ok { color: var(--ink); font-weight: 500; }
.cc-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: cc-blink 1s steps(1) infinite; }
@keyframes cc-blink { 50% { opacity: 0; } }
.cc-in { animation: cc-in 0.35s var(--ease) both; }
@keyframes cc-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cc-caret { animation: none; } }

/* Full stack: one glass panel, hairline cells */
.tool-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tool-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 1), transparent 70%); }
.tool-panel.spot::before { opacity: 1; }
.tool-panel .tool-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 -1px -1px 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tool-panel .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1100px) { .tool-panel .tool-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.tool-panel .tool-tile { flex: none !important; gap: 14px; padding: 18px 20px !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tool-panel .tool-tile:hover { transform: none !important; box-shadow: none !important; }
.tool-panel .tool-tile-logo { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid var(--glass-edge) !important; box-shadow: 0 1px 2px rgba(12, 13, 14, 0.06); transition: transform 0.35s var(--ease); }
.tool-panel .tool-tile:hover .tool-tile-logo { transform: translateY(-2px) rotate(-4deg); }
/* Cells cascade in when the panel scrolls into view */
.js .tool-panel .tool-tile { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease calc(var(--i) * 30ms), transform 0.6s var(--ease) calc(var(--i) * 30ms); }
.js .tool-panel.in .tool-tile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .tool-panel .tool-tile { opacity: 1; transform: none; transition: none; } }
#stack .xp-sub { text-align: center; }
.dd-main { display: flex; flex-direction: column; }
.dd-main .core-proof { margin-top: auto; padding-top: 18px; }

/* ---------- Sub-section titles: a small glass pill centred on a hairline ---------- */
.sub-head { display: flex; align-items: center; gap: 18px; margin: 64px 0 26px; font-size: inherit; font-weight: inherit; }
.sub-head::before, .sub-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.sub-head::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.sub-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 32px rgba(12, 13, 14, 0.05), inset 6px 6px 12px rgba(12, 13, 14, 0.07), inset -6px -6px 16px #fff; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; position: relative; }
.sub-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, #fff 15%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.9) 85%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.sub-count { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11px; letter-spacing: 0.02em; }
#stack .sub-head:first-of-type { margin-top: 0; }
.stack-head { display: block; margin: 72px 0 0; }
.stack-head .sub-head { margin-top: 0; }

/* ---------- One rhythm: every section gets the same vertical padding, so the gaps between sections match ---------- */
:root { --sec-pad: clamp(56px, 7vw, 88px); }
.section, .section.dark { padding-top: var(--sec-pad) !important; padding-bottom: var(--sec-pad) !important; }
.proof { padding-bottom: var(--sec-pad) !important; }
.site-foot { padding-top: var(--sec-pad) !important; }

/* ---------- Top menu: same look as before, just squared corners ---------- */
@media (min-width: 960px) {
  .nav-pill a, .nav-indicator { border-radius: 6px !important; }
}


/* Whole page in black and white: tool logos too (drivers card + full stack) */
.dd-logo img, .tool-tile-logo img { filter: none !important; }  /* real black marks: simple-icons SVGs + generated tools/dark/*.png */
.cc-ps { color: var(--ink) !important; }
.tool-chips.tool-chips-light img { filter: none !important; }
.xp-stats .stat-tile { grid-column: 1 / -1; }

/* ---------- Hero: live system pill under the form ---------- */
.hero-live { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 32px rgba(12, 13, 14, 0.05), inset 6px 6px 12px rgba(12, 13, 14, 0.07), inset -6px -6px 16px #fff;
  font: 400 12.5px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; color: var(--muted); white-space: nowrap; }
.hl-logo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 13, 14, 0.1); transition: transform 0.4s var(--ease); }
.hl-logo img { width: 14px; height: 14px; object-fit: contain; }
.hl-tool { color: var(--ink); font-weight: 600; }
.hl-text { display: inline-block; min-width: 25ch; overflow: hidden; text-overflow: ellipsis; }
.hl-text::after { content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: cc-blink 1s steps(1) infinite; }
.done .hl-text { color: var(--ink); }
.done .hl-text::before { content: "✓ "; }
.done .hl-text::after { display: none; }
.hl-steps { display: inline-flex; gap: 4px; margin-left: 2px; }
.hl-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background 0.3s ease, transform 0.3s var(--ease); }
.hl-steps i.on { background: var(--ink); }
.hl-steps i.now { background: var(--ink); opacity: 0.45; transform: scale(1.25); animation: hl-now 1s ease-in-out infinite; }
@keyframes hl-now { 50% { opacity: 1; } }
.hero-live > span { transition: opacity 0.35s ease, transform 0.35s var(--ease); }
.hero-live.swap > span { opacity: 0; transform: translateY(4px); }
.hero-live.swap .hl-logo { transform: rotate(-90deg) scale(0.6); }
@keyframes cc-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hl-text::after, .hl-steps i.now { animation: none; } }
@media (max-width: 639px) { .hero-live { font-size: 11px; } .hl-text { min-width: 0; } .hl-tool { display: none; } }

/* ---------- Brand (top left): smaller portrait, hairline frame, lighter name ---------- */
.brand { gap: 10px; }
.brand-photo { width: 38px !important; height: 38px !important; border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(12, 13, 14, 0.08), 0 2px 6px rgba(12, 13, 14, 0.06) !important; }
.scrolled .brand-photo { width: 34px !important; height: 34px !important; }
.brand-name { font-size: 17px; font-weight: 400; letter-spacing: -0.02em; }
.hl-tool { padding-right: 10px; border-right: 1px solid var(--line-strong); } .hero-live { gap: 9px; }
/* Live pill: as wide as the form above it; the step text takes the free space, dots sit at the right */
.hero-live { width: min(100%, 560px); padding-right: 18px; }
.hl-text { flex: 1; min-width: 0; }
/* Brand portrait: bigger again, no frame */
.brand-photo { width: 48px !important; height: 48px !important; box-shadow: none !important; background: transparent !important; }
.scrolled .brand-photo { width: 40px !important; height: 40px !important; }
/* Brand hover: no tilt — the portrait lifts a touch and the name gets a thin underline that slides in */
.brand:hover .brand-photo { transform: translateY(-1px) !important; box-shadow: 0 6px 16px -6px rgba(12, 13, 14, 0.25) !important; }
.brand-photo { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease) !important; }
.brand-name { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.brand:hover .brand-name { background-size: 100% 1px; }

/* ---------- Rectangular corners, site-wide: cards 14px, inner surfaces 10px, tiles + logo squares 8px ---------- */
.bezel, .fa-panel, .tool-panel, .auto-visual, .foot-card { border-radius: 14px !important; }
.bezel { padding: 5px; }
.bezel-inner, .cc-term, .gt, .lead-form, .foot-form { border-radius: 10px !important; }
.stat-tile, .xp-stat, .xp-ref, .fa-ref, .orbit-logo, .team-ico, .xp-logo, .fa-logo, .ed-logo, .dd-logo, .tool-tile-logo, .core-logo, .org-logo, .edu-logo { border-radius: 8px !important; }
.orbit-me { border-radius: 10px !important; }
/* €35k: a thin bar fills underneath while the number counts up */
.stat-fill { height: 4px; margin-top: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.stat-fill span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.counted .stat-fill span, .no-js .stat-fill span { width: 100%; }
@media (prefers-reduced-motion: reduce) { .stat-fill span { width: 100%; transition: none; } }
.section.dark { border-radius: 16px !important; }
/* Track record heading styled like the hero headline: same size, thin black light-words (not grey) */
.proof .section-title { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; }
.proof .section-title .w-light { font-weight: 200; color: var(--ink); opacity: 0.88; }

/* ---------- Education: one glass panel with hairline rows; hero-style heading ---------- */
.ed-list { border-top: 0 !important; padding: 0 !important; overflow: hidden; }  /* sits in the same double frame as the experience cards (.bezel > .bezel-inner) */
.ed-row { padding-inline: clamp(18px, 2.6vw, 32px) !important; border-bottom: 1px solid var(--line) !important; transition: background 0.3s ease; }
.ed-row:last-child { border-bottom: 0 !important; }
.ed-row:hover { background: rgba(255, 255, 255, 0.55); }
.ed-row .ed-logo { background: #fff !important; }
#education .section-title { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; }
#education .section-title .w-light { font-weight: 200; color: var(--ink); opacity: 0.88; }
/* Track record and education belong together: half the usual gap between them */
.proof { padding-bottom: calc(var(--sec-pad) * 0.5) !important; }
#education { padding-top: calc(var(--sec-pad) * 0.5) !important; }
/* Exchange semester: a smaller, quieter row (name fits on one line) */
.ed-row.is-minor .ed-school { font-size: clamp(18px, 1.8vw, 22px); }
.ed-row.is-minor .ed-sub { font-size: 14px; }
@media (min-width: 900px) {
  .ed-row.is-minor { padding-block: 20px !important; }
  .ed-row.is-minor .ed-logo { width: 72px; height: 72px; padding: 10px; margin-left: 12px; }
}

/* ---------- Tools: full stack as two drifting rows inside the double frame; hero-style heading ---------- */
#stack .section-title { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; }
#stack .section-title .w-light { font-weight: 200; color: var(--ink); opacity: 0.88; }
.stack-marquee { display: grid; gap: 14px; padding: clamp(22px, 3vw, 30px) 0 !important; }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq var(--dur, 60s) linear infinite; }
.mq.rev .mq-track { animation-direction: reverse; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-item { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 13, 14, 0.04); font-size: 15px; color: var(--ink); white-space: nowrap; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.mq-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(12, 13, 14, 0.25); }
.mq-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.mq-logo img { width: 20px; height: 20px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask-image: none; mask-image: none; padding-inline: 24px; }
  .mq-track { animation: none; width: auto; }
  .mq-set { flex-wrap: wrap; justify-content: center; }
  .mq-set[aria-hidden] { display: none; }
}

/* ---------- Finance foundation: double frame, even logos, column hover, tighter ---------- */
.bezel-inner.fa-panel { padding: 0 !important; background: radial-gradient(120% 70% at 50% 0%, #ffffff 0%, #f6f8f9 60%) !important; border: 1px solid var(--line) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fa-col { padding: 26px 18px 24px !important; transition: background 0.3s ease; }
.fa-col:hover { background: rgba(255, 255, 255, 0.7); }
/* One logo tile shape for all four: wide enough for wordmarks, marks sit centred */
.fa-logo { width: 116px !important; height: 64px !important; margin-bottom: 14px !important; padding: 12px 16px !important; background: #fff !important; border: 1px solid var(--line) !important; box-shadow: 0 1px 2px rgba(12, 13, 14, 0.05) !important; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease) !important; }
.fa-logo img { width: 100%; height: 100%; object-fit: contain; }
.fa-logo.on-dark { background: #fff !important; border-color: var(--line) !important; }
.fa-logo.on-dark img { filter: none !important; }  /* Vane uses the dark vane-mono.png here */
.fa-logo img[src*="akro-word"] { width: 100% !important; }
.fa-col:hover .fa-logo { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(12, 13, 14, 0.3) !important; }
.fa-dates { margin-top: 8px !important; }
.fa-ref, .fa-hl { margin-top: 14px !important; }
.fa-go { right: -7px !important; top: -7px !important; }
.fa-logo img { display: block; width: 100% !important; height: 38px !important; max-width: none; object-fit: contain; }


/* Experience cards: the tool chips sit at the bottom of the text column, level with the bottom of the
   visual on the left (Scalantec table / Aware reference) */
@media (min-width: 900px) {
  .xp-feature .xp-grid { align-items: stretch !important; }
  .xp-feature .xp-main { display: flex; flex-direction: column; }
  .xp-feature .xp-main .tool-chips { margin-top: auto; padding-top: 20px; }
}

/* Experience text: the sentence leads, bullets become a calm list with hairline dividers (no boxes) */
.xp-feature .xp-summary { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.xp-feature .role-bullets { margin-top: 18px; gap: 0; border-top: 1px solid var(--line); }
.xp-feature .role-bullets li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.xp-feature .role-bullets li::before { top: calc(11px + 0.75em); }

/* Room for the texture to build up into the footer */
#stack { padding-bottom: calc(var(--sec-pad) * 2) !important; }

/* Track record: no visible headline (pill only), and the same width as the hero content (5vw side margins) */
.proof .section-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.proof .section-head { margin-bottom: clamp(28px, 3.5vw, 44px) !important; }
.proof > .wrap { max-width: none; padding-inline: max(16px, 5vw); }
/* Hero → track record: a little closer */
.proof { padding-top: clamp(40px, 5vw, 72px) !important; }
/* Education: same treatment as the track record — pill only, hero width */
#education .section-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#education .section-head { margin-bottom: clamp(28px, 3.5vw, 44px) !important; }
#education > .wrap { max-width: none; padding-inline: max(16px, 5vw); }
/* Education: a slim reference line under the degree (no tile) */
.ed-ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.ed-ref img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.ed-ref strong { font-weight: 500; color: var(--ink); }
.ed-ref span:first-of-type { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease); }
.ed-ref:hover span:first-of-type { background-size: 100% 1px; }
.ed-ref-ico { display: inline-grid; color: var(--ink); opacity: 0.55; transition: opacity 0.2s ease; }
.ed-ref-ico svg { width: 14px; height: 14px; }
.ed-ref:hover .ed-ref-ico { opacity: 1; }
/* Track record: no pill either — the cards follow the hero directly (heading kept for screen readers) */
.proof .section-head { position: absolute; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Education = third block under the two track-record cards: its pill sits inside the panel, like "Growth at Aware Health" and "Previously at" */
#education .section-head { position: absolute; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ed-head { display: flex; justify-content: center; padding: clamp(22px, 3vw, 34px) 0 6px; }
.proof { padding-bottom: 0 !important; }
#education { padding-top: 24px !important; }
/* Education: school names a touch smaller, highlights a touch bigger (balance the row) */
.ed-school { font-size: clamp(20px, 2vw, 26px) !important; }
.ed-row.is-minor .ed-school { font-size: clamp(17px, 1.6vw, 20px) !important; }
.ed-note { font-size: 15.5px !important; gap: 10px !important; }
.ed-note-ico { width: 26px !important; height: 26px !important; }
.ed-note-ico svg { width: 13px !important; height: 13px !important; }
/* Education: Irma's reference tile sits in the IE row, under the school name and degree */
.ed-rowref { grid-column: 2; margin-top: 14px; }
.ed-rowref .xp-ref { margin: 0; display: inline-flex; min-width: 300px; }
@media (min-width: 900px) {
  .ed-row:has(.ed-rowref) .ed-logo, .ed-row:has(.ed-rowref) .ed-note, .ed-row:has(.ed-rowref) .ed-years { grid-row: 1 / span 2; }
  .ed-rowref { grid-column: 2; grid-row: 2; margin-top: 16px; }
}
/* Tools: hero width too (5vw side margins), like track record and education */
#stack > .wrap { max-width: none; padding-inline: max(16px, 5vw); }

/* ---------- Claude Code terminal: fills its space — scrolling history, framed input box, status line ---------- */
.dd-main .cc-term { display: flex; flex-direction: column; flex: 1; min-height: 300px; }
.cc-body { flex: 1; height: auto !important; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 16px 6px !important; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%); mask-image: linear-gradient(to bottom, transparent, #000 34%); }
.cc-log { display: flex; flex-direction: column; }
.cc-line { font-size: 13px !important; margin-bottom: 5px !important; }
.cc-line.old { opacity: 0.45; }
.cc-input { margin: 4px 12px 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; color: var(--ink); background: #fff; min-height: 40px; display: flex; align-items: center; gap: 0; }
.cc-input .cc-ps { margin-right: 6px; }
.cc-input .cc-typed { white-space: pre; }
.cc-status { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px 10px; font-size: 11px; color: var(--muted); }
/* Terminal: keep the card at its original height — compact history, slim input and status */
.dd-main .cc-term { flex: none; min-height: 0; }
.cc-body { flex: none; height: 104px !important; min-height: 0; padding: 10px 16px 4px !important; }
.cc-line { margin-bottom: 4px !important; font-size: 12.5px !important; }
.cc-input { margin: 2px 12px 0; padding: 6px 10px; min-height: 32px; font-size: 12.5px; }
.cc-status { padding: 6px 16px 8px; font-size: 10.5px; }

/* Full stack: its pill sits inside the block (like Education and the track-record cards) */
.stack-bezel { margin-top: 24px; }
.stack-in-head { display: flex; justify-content: center; margin-bottom: 8px; }
.stack-in-head .pill-badge { margin: 0; font-size: 12px; font-weight: 400; }
.stack-in-head .sub-count { margin-left: 2px; }
/* Full stack pill: three overlapping tool logos instead of an icon + count */
.stack-pill { padding-left: 6px !important; gap: 10px !important; }
.mini-stack { display: inline-flex; }
.mini-stack span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(12, 13, 14, 0.18); }
.mini-stack span + span { margin-left: -7px; }
.mini-stack img { width: 13px; height: 13px; object-fit: contain; }
.mini-stack span { background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 0 0 2px #fff !important; }

/* ---------- Desktop scale: everything 10% smaller on large screens (closer to workflows.io's density) ---------- */
@media (min-width: 1100px) {
  .topbar, #main, .site-foot { zoom: 0.9; }
  .hero { min-height: calc(100vh / 0.9) !important; min-height: calc(100svh / 0.9) !important; }
}

/* =====================================================================
   workflows.io-style motion: entrances, buttons, cards, nav, chips
   ===================================================================== */
:root { --wf-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Entrances: rise from 24px and settle from 104% scale (like their reveal) */
.js .reveal { opacity: 0; transform: translateY(24px) scale(1.04) !important; transition-property: opacity, transform !important; transition-duration: 0.9s, 1s !important; transition-timing-function: var(--wf-ease) !important; }  /* keeps each element's own stagger delay */
.js .reveal.in { opacity: 1; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none !important; transition: none !important; } }

/* Nav: the label lifts 2px on hover */
.nav-pill a { transition: opacity 0.25s ease, transform 0.25s var(--wf-ease); }
.nav-pill a:hover { transform: translateY(-2px); }

/* Buttons + icon squares: grow a touch and press in (inset shadows), icon scales */
.btn, .cta-square, .sq, .round-arrow, .foot-round, .xp-ref-go, .fa-ref-go, .fa-go, .btn-ico { transition: transform 0.3s var(--wf-ease), box-shadow 0.3s var(--wf-ease), background 0.2s ease, color 0.2s ease !important; }
.btn:hover, .cta:hover .cta-square, .square-link:hover .sq, .cv-link:hover .cta-square, .hero-linkedin:hover .round-arrow, .foot-round:hover, .xp-ref:hover .xp-ref-go, .fa-ref:hover .fa-ref-go {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), inset 4px 4px 10px rgba(0, 0, 0, 0.05), inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}
.btn-dark:hover, .cta:hover .cta-square, .cv-link:hover .cta-square { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 4px 4px 10px rgba(255, 255, 255, 0.08), inset -4px -4px 8px rgba(0, 0, 0, 0.25); }
.btn:hover .btn-ico svg, .round-arrow svg, .foot-round svg { transition: transform 0.3s var(--wf-ease); }
.btn:hover .btn-ico svg, .foot-round:hover svg { transform: scale(1.08); }

/* Cards: the shadow deepens softly on hover; photos inside zoom a little */
.bezel { transition: box-shadow 0.45s var(--wf-ease), transform 0.45s var(--wf-ease); }
.bezel:hover { box-shadow: 0 10px 38px rgba(108, 123, 133, 0.22), 0 1px 2px rgba(12, 13, 14, 0.03) !important; }
.ref-photo, .xp-ref img, .fa-ref img { transition: transform 0.5s var(--wf-ease); }
.ref-tile:hover .ref-photo, .xp-ref:hover img, .fa-ref:hover img { transform: scale(1.06); }
.xp-ref, .fa-ref, .ref-tile { overflow: hidden; }

/* Chips + tool items: a gentle scale */
.chips li, .tool-chips li, .mq-item, .core-proof li { transition: transform 0.3s var(--wf-ease), box-shadow 0.3s var(--wf-ease); }
.chips li:hover, .tool-chips li:hover, .core-proof li:hover { transform: scale(1.03) !important; }
.mq-item:hover { transform: scale(1.03) !important; }
/* "See my experience": the arrow stays black on hover (the glass square stays white) */
.square-link:hover .sq { color: var(--ink) !important; }
/* Headline sparkle (workflows.io style: "through ✦ 4 main service lines") */
.hd-spark { display: inline-block; width: 0.74em; height: 0.74em; vertical-align: -0.04em; margin-right: 0.04em; }
.hd-spark svg { width: 100%; height: 100%; fill: currentColor; }
/* Automations + experience: hero width too, so every section shares the same edges */
#automations > .wrap, #experience > .wrap { max-width: none; padding-inline: max(16px, 5vw); }
#automations .wrap { padding-inline: max(16px, calc(5vw - clamp(8px, 1.2vw, 16px))); }

/* ---------- Scalantec: AI-search answer that recommends Scalantec (AEO) ---------- */
.aeo { margin: 14px 0 0; overflow: hidden; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.aeo-state { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.aeo-body { padding: 14px 16px 16px; display: grid; gap: 12px; min-height: 176px; align-content: start; }
.aeo-q { justify-self: end; max-width: 88%; padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.4; min-height: 38px; }
.aeo-a { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text); opacity: 0.25; transition: opacity 0.4s ease; }
.aeo-a.on, .no-js .aeo-a { opacity: 1; }
.aeo-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); }
.aeo-ico svg { width: 13px; height: 13px; }
.aeo-text mark { background: linear-gradient(transparent 55%, rgba(12, 13, 14, 0.14) 55%); color: var(--ink); font-weight: 600; padding: 0 1px; }
.aeo-src { display: flex; gap: 8px; align-items: center; padding-left: 34px; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s var(--ease); }
.aeo-src.on, .no-js .aeo-src { opacity: 1; transform: none; }
.aeo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: 12px; color: var(--ink); }
.aeo-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.aeo-more { font-size: 12px; color: var(--muted); }
.aeo.searching .aeo-state { animation: gt-blink 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .aeo-a, .aeo-src { opacity: 1; transform: none; } }

/* ---------- Scalantec: two topic rows — visual left, label + bullets + tools right ---------- */
.xp-summary-top { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 20px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.xp-feature .xp-block { margin-top: 24px !important; padding-top: 0 !important; border-top: 0 !important; align-items: center !important; }
.xp-feature .xp-block + .xp-block { margin-top: 28px !important; padding-top: 28px !important; border-top: 1px solid var(--line) !important; }
.xp-block .xp-side .aeo { margin-top: 0; }
.xp-block-label { margin-bottom: 4px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.xp-block .xp-main .tool-chips { margin-top: 18px !important; padding-top: 0 !important; }
.xp-block .role-bullets { margin-top: 10px !important; }
.xp-feature .xp-head + .xp-block { margin-top: 28px !important; padding-top: 28px !important; border-top: 1px solid var(--line) !important; }

/* ---------- Aware: operations dashboard (bookings per location, revenue, onboarding) ---------- */
.ops { margin: 0; overflow: hidden; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.ops-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink); }
.ops-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: gt-blink 1.4s ease-in-out infinite; }
.ops-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; padding: 12px; }
.ops-tile { padding: 12px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.ops-k { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ops-bars { grid-row: span 2; }
.ops-barlist { display: grid; gap: 9px; }
.ops-bar { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.ops-bar i { height: 8px; border-radius: 99px; background: var(--ink); width: 0; transition: width 1.1s var(--ease) calc(0.2s + var(--i) * 0.12s); }
.ops-bar i { display: block; }
.ops-rev svg { width: 100%; height: 58px; display: block; }
.ops-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.6s var(--ease) 0.3s; vector-effect: non-scaling-stroke; }
.ops-area { fill: rgba(12, 13, 14, 0.06); opacity: 0; transition: opacity 0.8s ease 1s; }
.ops-stages { display: grid; gap: 7px; }
.ops-stages span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); transition: color 0.3s ease calc(0.4s + var(--i) * 0.35s); }
.ops-stages i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; transition: background 0.3s ease calc(0.4s + var(--i) * 0.35s), border-color 0.3s ease calc(0.4s + var(--i) * 0.35s); }
.xp-card.in .ops-bar i, .no-js .ops-bar i { width: var(--w); }
.xp-card.in .ops-line, .no-js .ops-line { stroke-dashoffset: 0; }
.xp-card.in .ops-area, .no-js .ops-area { opacity: 1; }
.xp-card.in .ops-stages span { color: var(--ink); }
.xp-card.in .ops-stages i { background: var(--ink); border-color: var(--ink); }
@media (max-width: 639px) { .ops-body { grid-template-columns: 1fr; } .ops-bars { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .ops-bar i { width: var(--w); transition: none; } .ops-line { stroke-dashoffset: 0; transition: none; } .ops-area { opacity: 1; } .ops-live i { animation: none; } }
.ops-area { stroke: none !important; }
.ops-line { stroke-linecap: round; }
.ops-bars { display: flex; flex-direction: column; }
.ops-barlist { flex: 1; align-content: space-evenly; }

/* ---------- Aware: HubSpot-style partner pipeline ---------- */
.crm { margin: 0; overflow: hidden; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--float); --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.crm-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.crm table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm th { padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.crm td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.crm tbody tr:last-child td { border-bottom: 0; }
.crm td:first-child { display: flex; align-items: center; gap: 10px; }
.crm-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; }
.crm-n { display: grid; line-height: 1.25; min-width: 0; }
.crm-n strong { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-n em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.crm-c { color: var(--muted); white-space: nowrap; }
.crm-stage { display: inline-flex; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--line-strong); background: #fff; font-size: 11.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.crm-stage[data-k="3"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-stage.bump { animation: crm-bump 0.45s var(--ease); }
@keyframes crm-bump { 0% { transform: translateY(4px); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
.xp-block .crm + .xp-ref { margin-top: 10px; }
/* Tools: rotating line under the heading — the last word cycles through the stages, each with its tool logo */
.rot-head { text-align: center; margin: -18px auto clamp(44px, 5vw, 64px); }
.rot-line { font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.3; color: var(--ink); }
.rot-win { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; text-align: left; }
.rot-track { display: flex; flex-direction: column; animation: rot 10s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.rot-item { display: inline-flex; align-items: center; gap: 0.3em; height: 1.3em; font-weight: 500; }
.rot-logo { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 0.24em; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(12, 13, 14, 0.08); }
.rot-logo img { width: 62%; height: 62%; object-fit: contain; }
@keyframes rot { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-1.3em); } 50%, 70% { transform: translateY(-2.6em); } 75%, 95% { transform: translateY(-3.9em); } 100% { transform: translateY(-5.2em); } }
.rot-head .section-sub { margin: 10px auto 0 !important; }
@media (prefers-reduced-motion: reduce) { .rot-track { animation: none; } }
/* Tools: the rotating line IS the headline now (the old headline stays for screen readers only) */
#stack .section-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#stack .section-head { margin-bottom: 18px !important; }
.rot-head { margin-top: 0 !important; }
.rot-line { font-size: clamp(30px, 3.6vw, 50px) !important; line-height: 1.15 !important; max-width: 20em; margin: 0 auto; }
.rot-line > .rot-win { display: inline-block; height: 1.15em; vertical-align: bottom; }
.rot-item { height: 1.15em !important; }
@keyframes rot { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-1.15em); } 50%, 70% { transform: translateY(-2.3em); } 75%, 95% { transform: translateY(-3.45em); } 100% { transform: translateY(-4.6em); } }
/* Education: pill back above the panel (headline stays hidden), panel compact again */
#education .section-head { position: static !important; width: auto !important; height: auto !important; margin: 0 0 22px !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
#education { padding-top: clamp(44px, 5vw, 64px) !important; }
/* Education pill: same space above and below it, so it sits centred between the two blocks */
#education { padding-top: 48px !important; }
#education .section-head { margin-bottom: 34px !important; }
/* Tools headline on one line (desktop) */
@media (min-width: 900px) { .rot-line { font-size: clamp(26px, 2.75vw, 40px) !important; max-width: none; white-space: nowrap; } }
.rot-track { animation-duration: 14s !important; }

/* ---------- One spacing rhythm (desktop values before the 0.9 zoom) ----------
   between sections: ~110px · headline → content: ~48px · block → block: 24px · pill → headline: 20px */
#experience { padding-bottom: 56px !important; }
#stack { padding-top: 56px !important; padding-bottom: 60px !important; }
.site-foot { padding-top: 60px !important; }
#education .section-head { margin-bottom: 48px !important; }
#experience .sub-head { margin: 48px 0 24px !important; }
.rot-head { margin-bottom: 48px !important; }

/* ---------- Experience intro: hero-style heading + career path (finance → growth) ---------- */
#experience .section-title { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em; }
#experience .section-title .w-light { font-weight: 200; color: var(--ink); opacity: 0.88; }
.career { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 2.5vw, 36px); margin: -6px auto 48px; }
.cp-group { position: relative; display: grid; justify-items: center; gap: 14px; padding: 14px 18px 16px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.cp-growth { border-style: solid; border-color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.cp-label { position: absolute; top: -9px; padding: 0 8px; background: var(--bg); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cp-growth .cp-label { color: var(--ink); }
.cp-group ol { display: flex; gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.cp-group li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.cp-logo { display: grid; place-items: center; width: 52px; height: 52px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--float); transition: transform 0.35s var(--ease); }
.cp-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.6) contrast(1.8); }
.cp-logo img[src*="mono/"], .cp-logo img[src*="vane"] { filter: none; }
.cp-group li:hover .cp-logo { transform: translateY(-3px); }
.cp-txt { display: grid; line-height: 1.25; }
.cp-txt strong { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.cp-txt span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-arrow { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 4px; border-radius: 50%; background: var(--ink); color: #fff; transform: rotate(45deg); }
.cp-arrow svg { width: 15px; height: 15px; }
.js .career .cp-group li { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease calc(0.15s + var(--i) * 0.12s), transform 0.6s var(--ease) calc(0.15s + var(--i) * 0.12s); }
.js .career.in .cp-group li { opacity: 1; transform: none; }
@media (max-width: 760px) { .career { flex-direction: column; align-items: center; } .cp-arrow { transform: rotate(135deg); } .cp-group ol { flex-wrap: wrap; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .js .career .cp-group li { opacity: 1; transform: none; transition: none; } }
/* Career path spans the heading's width: groups stretch, logos spread evenly */
@media (min-width: 761px) {
  .career { width: var(--hw, 830px); max-width: 100%; justify-content: stretch; }
  .cp-group { flex: 4 1 0; }
  .cp-growth { flex: 2 1 0; }
  .cp-group ol { width: 100%; justify-content: space-around; }
}
/* Experience heading on one line (desktop) */
@media (min-width: 900px) { #experience .section-title { max-width: none; white-space: nowrap; font-size: clamp(30px, 3.4vw, 50px); } }

/* ---------- Finance foundation: pill centred between blocks + education-style rows ---------- */
.fa-pillrow { display: flex; justify-content: center; margin: 48px 0 48px; }
.fa-pillrow .pill-badge { margin: 0; }
.fa-r .ed-school { font-size: clamp(18px, 1.7vw, 22px) !important; }
.fa-r .ed-sub { font-size: 14.5px; }
.fa-r .ed-logo { padding: 12px !important; }
.fa-r .ed-logo img { filter: grayscale(1) brightness(0.6) contrast(1.8); }
.fa-r .ed-logo img[src*="mono"], .fa-r .ed-logo img[src*="akro-word"] { filter: none; }
@media (min-width: 900px) { .fa-r { padding-block: 22px !important; } .fa-r .ed-logo { width: 84px !important; height: 64px !important; } }
.fa-refnote { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
.fa-refnote img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.fa-refnote .fa-li { display: inline-grid; opacity: 0.5; transition: opacity 0.2s ease; }
.fa-refnote .fa-li svg { width: 14px; height: 14px; }
.fa-refnote:hover .fa-li { opacity: 1; }
.fa-refnote span:nth-child(2) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease); }
.fa-refnote:hover span:nth-child(2) { background-size: 100% 1px; }
.fa-r .ed-logo img { width: 100% !important; height: 100% !important; object-fit: contain; }
.fa-r .ed-logo img { height: 36px !important; width: 100% !important; max-height: 100%; }

/* ---------- Finance foundation as a 2 × 2 grid (no empty middle column) ---------- */
.fa-grid { display: grid !important; grid-template-columns: 1fr; padding: 0 !important; }
@media (min-width: 900px) { .fa-grid { grid-template-columns: 1fr 1fr; } }
.fa-cell { display: flex; gap: 18px; align-items: flex-start; padding: 24px clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--line); transition: background 0.3s ease; }
.fa-cell:hover { background: rgba(255, 255, 255, 0.55); }
@media (min-width: 900px) { .fa-cell:nth-child(odd) { border-right: 1px solid var(--line); } .fa-cell:nth-last-child(-n + 2) { border-bottom: 0; } }
.fa-cl { flex: none; width: 72px !important; height: 56px !important; padding: 11px !important; }
.fa-cl img { width: 100% !important; height: 100% !important; object-fit: contain; filter: grayscale(1) brightness(0.6) contrast(1.8); }
.fa-cl img[src*="mono"], .fa-cl img[src*="akro-word"] { filter: none; }
.fa-cbody { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fa-ctop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fa-cname { margin: 0; font-size: 19px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.fa-cdates { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-crole { margin: 0; font-size: 14.5px; color: var(--muted); }
.fa-cextra { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; color: var(--ink); }
.fa-cextra strong { font-weight: 500; }
.fa-cextra img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.fa-star { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; }
.fa-star svg { width: 11px; height: 11px; }
.fa-cextra .fa-li { display: inline-grid; opacity: 0.5; } .fa-cextra .fa-li svg { width: 13px; height: 13px; }
a.fa-cextra:hover .fa-li { opacity: 1; }
/* Finance foundation: pill inside the block, taller cells, logos centred */
.fa-bezel2 { margin-top: 48px; }
.fa-ghead { grid-column: 1 / -1; display: flex; justify-content: center; padding: 26px 0 6px; }
.fa-ghead .pill-badge { margin: 0; }
.fa-cell { align-items: center !important; padding: 30px clamp(20px, 2.6vw, 34px) !important; min-height: 116px; }
.fa-cl { width: 84px !important; height: 64px !important; padding: 13px !important; }
.fa-cbody { gap: 6px; }
@media (min-width: 900px) { .fa-cell:nth-child(even) { border-right: 1px solid var(--line); } .fa-cell:nth-child(odd) { border-right: 0; } .fa-cell:nth-last-child(-n + 2) { border-bottom: 0; } }
.fa-cl img { height: 36px !important; width: 100% !important; max-height: 100%; }
.fa-bezel2 { margin-top: 24px !important; }
@media (min-width: 900px) { .fa-grid .fa-cell:nth-child(odd) { border-right: 1px solid var(--line) !important; } .fa-grid .fa-cell:nth-child(even) { border-right: 0 !important; } }

/* Experience spacing: one rhythm inside and between the cards */
.career { margin-top: -16px !important; margin-bottom: 48px !important; }
.xp-feature .xp-head + .xp-block, .xp-feature .xp-block + .xp-block { margin-top: 30px !important; padding-top: 30px !important; border-top: 1px solid var(--line) !important; }
.xp-feature .bezel-inner { padding-block: 34px !important; }
/* Heading with swapped weights: first part bold, the rest after the sparkle light */
.section-title.swap-weight { font-weight: 200 !important; }
.section-title.swap-weight .w-light { font-weight: 500 !important; color: inherit !important; opacity: 1 !important; }
.dark .section-title.swap-weight { color: var(--d-faint); }
.dark .section-title.swap-weight .w-light { color: #fff !important; }
.section-title.swap-weight .hd-spark { color: #fff; }
/* Typewriter ending: reserved width (longest word) so the heading and career path never jump */
.tw-wrap { display: inline; }
.tw-size { display: none; }
.tw-live { white-space: nowrap; }
.tw-line { white-space: nowrap; }
.tw-car { display: inline-block; width: 0.06em; height: 0.88em; margin-left: 0.05em; vertical-align: -0.06em; background: currentColor; animation: tw-bl 1s steps(1) infinite; }
@keyframes tw-bl { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-car { display: none; } }

/* ---------- Experience: two topic cards side by side per company (visual on top, text below) ---------- */
.xp-topics { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 900px) { .xp-topics { grid-template-columns: 1fr 1fr; gap: 18px; } }
.xp-feature .xp-topics .xp-block { display: flex !important; flex-direction: column; gap: 20px; margin: 0 !important; padding: 18px !important; border: 1px solid var(--line) !important; border-radius: 10px; background: rgba(255, 255, 255, 0.55); align-items: stretch !important; }
.xp-topics .xp-block .xp-side, .xp-topics .xp-block .xp-main { width: 100%; }
.xp-topics .xp-block .xp-main { display: flex; flex-direction: column; flex: 1; padding: 0 4px; }
.xp-topics .xp-block .tool-chips { margin-top: auto !important; padding-top: 16px !important; }
.xp-topics .xp-block .role-bullets li { font-size: 14px; padding-block: 9px; }
.xp-topics .xp-side { display: grid; gap: 10px; align-content: start; }
.xp-topics .gt td, .xp-topics .crm td { padding-inline: 10px; }
.xp-topics .crm-c { display: none; }
.xp-topics .crm th:nth-child(2) { display: none; }
/* Topic cards: visuals share one row height (subgrid), so labels, bullets and tools line up across both cards */
@media (min-width: 900px) {
  .xp-topics { grid-template-rows: auto auto; }
  .xp-feature .xp-topics .xp-block { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; }
  .xp-topics .xp-side { align-self: stretch; }
  .xp-topics .xp-side > .gt, .xp-topics .xp-side > .aeo, .xp-topics .xp-side > .ops { height: 100%; display: flex; flex-direction: column; }
  .xp-topics .aeo .aeo-body { flex: 1; align-content: center; }
  .xp-topics .ops .ops-body { flex: 1; }
  .xp-topics .gt table { flex: 1; }
}
@media (min-width: 900px) {
  .xp-topics .xp-side:has(> .gt:only-child), .xp-topics .xp-side:has(> .aeo:only-child) { display: flex !important; flex-direction: column; }
  .xp-topics .xp-side > .gt:only-child, .xp-topics .xp-side > .aeo:only-child { flex: 1; height: auto !important; margin: 0 !important; }
}

/* ---------- Mobile fixes (≤ 640px) ---------- */
@media (max-width: 640px) {
  /* Clay table: drop the signal column so names and scores have room */
  .gt th:nth-child(2), .gt td.gt-sig { display: none; }
  .gt th:nth-child(1) { width: auto !important; }
  .gt-title { max-width: 55%; }
  /* HubSpot window: keep the title on one line */
  .crm-count { display: none; }
  .crm .gt-title { max-width: none; }
  /* Finance grid: dates under the name instead of squeezed beside it */
  .fa-ctop { flex-direction: column; gap: 2px; }
  .fa-cell { gap: 14px; padding: 20px 16px !important; }
  .fa-cl { width: 64px !important; height: 50px !important; }
  /* Reference tile in the track record: a bit more room for the name */
  .ref-person { gap: 10px; }
}
@media (max-width: 640px) {
  /* Less nesting on phones: the topic cards drop their own frame, visuals get the full card width */
  .xp-feature .bezel-inner { padding-inline: 16px !important; }
  .xp-feature .xp-topics .xp-block { padding: 0 !important; border: 0 !important; background: none !important; }
  .xp-topics { gap: 34px; }
}