/* Self-hosted fonts (was fonts.googleapis.com render-blocking request) */
@font-face { font-family: "Syne"; src: url("/assets/fonts/syne.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* height:auto is load-bearing. Every <img> carries native width/height
   attributes so the browser can reserve space before the bytes arrive (CLS).
   Without height:auto those attributes would also *fix* the rendered height,
   so any image scaled down by max-width would render stretched. With it, the
   attributes degrade to an aspect-ratio hint, which is what we want.
   Element-level specificity, so the class rules that do set an explicit height
   (.nav__brand img, .card__media img, .blog-card__img img) still win. */
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* The {% image %} shortcode (eleventy-img) wraps its <img> in a <picture>.
   `display: contents` removes that wrapper's own box, so the <img> stays the
   direct flex/grid child of its real container and every existing
   `.something img { width/height/max-* }` rule keeps resolving its percentages
   against the same box it did before the wrapper existed. Declared after the
   reset above so it overrides `picture { display: block }`. */
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

/* Tokens — S3A palette (white base, gold + navy per logo) */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F8F8F8;
  --bg-alt: #F8F8F8;
  --ink: #0E1C38;
  --ink-soft: #4A5A78;
  --rule: #E0E5EC;
  --accent: #AF802C;
  --accent-ink: #FFFFFF;
  --surface: #F2F2F2;
  --ink-invert: #0E1C38;

  --font-display: 'Syne', 'Inter Tight', system-ui, sans-serif;
  --font-italic: 'Syne', 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 40px; --space-6: 48px;
  --space-7: 56px; --space-8: 64px; --space-10: 80px; --space-12: 96px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur-med: 600ms;
  --dur-slow: 1200ms;

  --container: 1440px;
  --gutter: 40px;
  --nav-gap: 20px;

  /* Vertical rhythm between sections. One knob so every section stays consistent. */
  --section-y: clamp(40px, 4vh, 60px);
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 22px; }
}

/* Dark theme overrides */
html[data-theme="dark"] {
  --bg: #0E0E0E;
  --bg-soft: #1A1A1A;
  --bg-alt: #161616;
  --ink: #DFD8C6;
  --ink-soft: #9A9485;
  --rule: rgba(255,255,255,0.1);
  --surface: #181818;
  --ink-invert: #0E0E0E;
}
html[data-theme="dark"] body { color-scheme: dark; }

/* Base typography */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

/* Italic disabled site-wide: keep em as accent-color emphasis only */
em, i, address, cite, dfn, var {
  font-style: normal;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.0;
  color: var(--ink);
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(46px, 6vw, 96px); }
h2 { font-size: clamp(34px, 4.4vw, 72px); }
h3 { font-size: clamp(20px, 1.8vw, 30px); font-weight: 500; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink-invert); color: var(--accent-ink); }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* Utilities */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

html, body { overflow-x: hidden; }
:target { scroll-margin-top: 120px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-tagline], .hero__headline [data-tagline] { opacity: 1 !important; position: relative !important; }
  .principle { opacity: 1 !important; }
  .card__media { clip-path: none !important; }
}
/* ===== Cursor ===== */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  translate: -50% -50%;
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; background: var(--ink); }
.cursor__ring {
  width: 32px; height: 32px;
  border: 1px solid var(--ink);
  transition: width .3s var(--ease-out), height .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
body.is-hovering .cursor__ring { width: 28px; height: 28px; background: transparent; border-color: var(--ink); }
body.is-hovering .cursor__dot { opacity: 0; }
body.no-cursor .cursor { display: none; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ===== Button (ripple-on-hover) ===== */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: color .35s ease, transform var(--dur-med) var(--ease-out);
  will-change: transform;
}
.lets-meet a.btn{
  margin-bottom: 20px;
}
.btn::before {
  content: '';
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s cubic-bezier(.4,.2,.2,1), width 0s linear, height 0s linear;
  pointer-events: none;
  z-index: -1;
}
.btn.is-rippling::before {
  width: 360px; height: 360px;
  transform: translate(-50%, -50%) scale(1);
}
.btn > * { position: relative; z-index: 1; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow, .btn.is-rippling .btn__arrow { transform: translateX(4px); }

/* Ghost variant: ink-on-bg → fill ink on ripple */
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost.is-rippling { color: var(--bg); }

/* Light variant: bg on ink → fill accent */
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light::before { background: var(--accent); }
.btn--light:hover, .btn--light.is-rippling { color: var(--ink); }

.btn--pill { padding: 14px 24px; font-size: 13px; }

/* Dark-background btn variant — pulse-beam radial glow */
.btn--beam,
.orbital .btn,
.proficiency-stack .btn,
.radar-section .btn,
.footer .btn,
.section--ink .btn {
  background: #0a0d1a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}
.btn--beam::before,
.orbital .btn::before,
.proficiency-stack .btn::before,
.radar-section .btn::before,
.footer .btn::before,
.section--ink .btn::before {
  background: radial-gradient(75% 100% at 50% 0%, rgba(56,189,248,0.7) 0%, rgba(99,68,245,0.45) 38%, rgba(174,72,255,0) 75%);
  width: 320px; height: 320px;
  opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.4,.2,.2,1);
}
.btn--beam.is-rippling::before,
.btn--beam:hover::before,
.orbital .btn.is-rippling::before,
.orbital .btn:hover::before,
.proficiency-stack .btn.is-rippling::before,
.proficiency-stack .btn:hover::before,
.radar-section .btn.is-rippling::before,
.radar-section .btn:hover::before,
.footer .btn.is-rippling::before,
.footer .btn:hover::before,
.section--ink .btn.is-rippling::before,
.section--ink .btn:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.btn--beam,
.btn--beam:hover,
.btn--beam.is-rippling,
.orbital .btn,
.orbital .btn:hover,
.orbital .btn.is-rippling,
.proficiency-stack .btn,
.proficiency-stack .btn:hover,
.proficiency-stack .btn.is-rippling,
.radar-section .btn,
.radar-section .btn:hover,
.radar-section .btn.is-rippling,
.footer .btn,
.footer .btn:hover,
.footer .btn.is-rippling,
.section--ink .btn,
.section--ink .btn:hover,
.section--ink .btn.is-rippling { color: #fff; }
.btn--beam .btn__arrow,
.orbital .btn .btn__arrow,
.proficiency-stack .btn .btn__arrow,
.radar-section .btn .btn__arrow,
.footer .btn .btn__arrow,
.section--ink .btn .btn__arrow { color: var(--accent); }

/* ===== Link underline ===== */
.link { position: relative; display: inline-block; }
/* Standalone tap-target usage (e.g. "Know more" service links) — NOT for links
   inline inside prose, where the extended hit box would overlap neighbouring
   lines. See .link::after below for why this needs its own bottom offset. */
.link--tap { padding: 12px 0; margin: -12px 0; }
.link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
/* bottom resolves against the padding box, so .link--tap's 12px padding needs
   a compensating offset (12px - 2px original) to keep the underline at the
   text baseline instead of floating below the tap target. */
.link--tap::after { bottom: 10px; }
.link:hover::after { transform: scaleX(1); }

/* ===== Nav — floating pill capsule ===== */
.nav {
  position: fixed; top: 20px; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nav-gap);
  padding: 0 var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav__brand {
  display: inline-flex; align-items: center;
  padding: 10px 22px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.nav__brand img { height: 48px; width: auto; display: block; }
@media (max-width: 767px) {
  .nav__brand { padding: 8px 16px; }
  .nav__brand img { height: 38px; }
}

.nav__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.nav__links { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.nav__links a {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active { background: var(--ink); color: var(--bg); }

/* ===== Nav dropdown (Services) ===== */
.nav__group { position: relative; }
.nav__group-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__group-trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__group:hover .nav__group-trigger::after,
.nav__group:focus-within .nav__group-trigger::after { transform: rotate(225deg) translateY(-1px); }
.nav__dropdown,
.nav__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  margin-top: 0;
  padding-top: 16px;
  background: transparent;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 1s;
  z-index: 100;
}
.nav__dropdown { min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.nav__mega {
  width: min(720px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.nav__mega-item {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 22px 22px !important;
  border-right: 1px solid var(--rule);
  border-radius: 0 !important;
  background: transparent !important;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__mega-item:last-child { border-right: 0; }
.nav__mega-item strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__mega-item small {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav__mega-item:hover { background: var(--bg-soft) !important; }
.nav__mega-item:hover strong { color: var(--accent); }
html[data-theme="dark"] .nav__mega-item { border-right-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .nav__mega-item:hover { background: rgba(255,255,255,0.04) !important; }
.nav__dropdown::before,
.nav__mega::before {
  content: "";
  position: absolute;
  top: 16px; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(14,28,56,0.18);
  z-index: -1;
}
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__dropdown:hover,
.nav__group:hover .nav__mega,
.nav__group:focus-within .nav__mega,
.nav__mega:hover,
.nav__group.is-open .nav__dropdown,
.nav__group.is-open .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0s;
}
.nav__dropdown > a {
  position: relative;
  z-index: 1;
  margin: 0 10px;
}
.nav__dropdown > a:first-of-type { margin-top: 10px; }
.nav__dropdown > a:last-of-type { margin-bottom: 10px; }
.nav__dropdown a {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink) !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__dropdown a:hover {
  background: var(--bg-soft) !important;
  color: var(--accent) !important;
}
.nav__dropdown a strong {
  font-weight: 500;
  font-family: var(--font-display);
}
.nav__dropdown a small {
  color: var(--ink-soft);
  font-size: 11px;
  margin-left: auto;
  font-family: var(--font-mono);
}
.nav__mega-col {
  position: relative;
  z-index: 1;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--rule);
}
.nav__mega-col:last-child { border-right: 0; }
.nav__mega-col a:not(.nav__mega-head) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  white-space: normal;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav__mega-col a:not(.nav__mega-head) strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__mega-col a:not(.nav__mega-head) small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.nav__mega-col a:not(.nav__mega-head):hover {
  background: var(--bg-soft) !important;
  transform: translateX(2px);
}
.nav__mega-col a:not(.nav__mega-head):hover strong { color: var(--accent); }
.nav__mega-head {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 8px;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink) !important;
  background: transparent !important;
  padding: 6px 12px 10px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  border-radius: 0 !important;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__mega-head:hover { color: var(--accent) !important; }
.nav__mega-head span { transition: transform var(--dur-fast) var(--ease-out); }
.nav__mega-head:hover span { transform: translateX(4px); }
html[data-theme="dark"] .nav__mega-col { border-right-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .nav__mega-head { border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .nav__mega-col a:not(.nav__mega-head):hover { background: rgba(255,255,255,0.04) !important; }
@media (prefers-reduced-motion: reduce) {
  .nav__mega-col a:not(.nav__mega-head):hover,
  .nav__mega-head:hover span { transform: none; }
}
html[data-theme="dark"] .nav__dropdown,
html[data-theme="dark"] .nav__mega { background: transparent; }
html[data-theme="dark"] .nav__dropdown::before,
html[data-theme="dark"] .nav__mega::before { background: #181818; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .nav__dropdown a:hover,
html[data-theme="dark"] .nav__mega-col a:hover { background: rgba(255,255,255,0.04) !important; }
@media (max-width: 1023px) {
  .nav__mega { display: none; }
}

.nav__cta {
  padding: 14px 22px;
  font-size: 13px;
}

.nav__menu-btn { display: none; }
.nav__menu { display: none; }

/* ===== Theme toggle + curtain ===== */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  display: inline-grid; place-items: center;
  margin-left: 10px;
  transition: background .25s ease, color .25s ease, transform .2s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
}
.theme-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 18px -8px rgba(14,28,56,0.3); }
.theme-toggle__icon { width: 16px; height: 16px; transition: opacity .25s ease, transform .35s ease; position: absolute; }
.theme-toggle__icon--sun { opacity: 1; transform: rotate(0); }
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg); }
html[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg); }
html[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0); }

.theme-curtain {
  position: fixed; inset: 0;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: top;
  z-index: 9997;
  pointer-events: none;
  will-change: transform;
}
.theme-curtain.is-falling { transform: scaleY(1); transition: transform 550ms cubic-bezier(0.76, 0, 0.24, 1); }
.theme-curtain.is-rising { transform: scaleY(0); transform-origin: top; transition: transform 550ms cubic-bezier(0.76, 0, 0.24, 1); }

@media (max-width: 1023px) {
  .nav__pill .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__menu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  }
  .nav__pill { padding: 0; border: 0; background: transparent; }

  /* Circle radial menu */
  .nav__circle {
    position: fixed; inset: 0;
    background: rgba(14,28,56,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--bg);
    display: grid;
    place-items: center;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .nav__circle.is-open { opacity: 1; pointer-events: auto; }
  .nav__circle-stage {
    position: relative;
    width: 320px;
    height: 320px;
  }
  .nav__circle-center {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    border: none;
    cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 12px 28px rgba(175,128,44,0.45);
    z-index: 2;
    transition: transform .3s ease;
  }
  .nav__circle-center svg { width: 22px; height: 22px; }
  .nav__circle-center:hover { transform: translate(-50%, -50%) scale(1.08); }
  .nav__circle-item {
    position: absolute;
    left: 50%; top: 50%;
    width: 76px; height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    text-decoration: none;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    --angle: calc(var(--i) * (360deg / var(--count, 5)) - 90deg);
    --radius: 130px;
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
    transition: transform .5s cubic-bezier(.4,.2,.2,1), opacity .35s ease, background .25s ease;
    transition-delay: 0s;
  }
  .nav__circle.is-open .nav__circle-item {
    opacity: 1;
    transform:
      translate(
        calc(cos(var(--angle)) * var(--radius)),
        calc(sin(var(--angle)) * var(--radius))
      )
      scale(1);
    transition-delay: calc(var(--i) * 60ms);
  }
  .nav__circle-item:hover { background: rgba(175,128,44,0.25); }
  .nav__circle-icon { display: grid; place-items: center; color: var(--accent); }
  .nav__circle-icon svg { width: 22px; height: 22px; }
  .nav__circle-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    max-width: 100%;
    padding: 0 4px;
    text-align: center;
    line-height: 1.1;
    box-sizing: border-box;
  }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 1023px) and (max-width: 480px) {
  .nav__circle-stage { width: 280px; height: 280px; }
  .nav__circle-item { --radius: 115px; width: 68px; height: 68px; margin: -34px 0 0 -34px; }
}

/* ===== Rotating badge (hero ornament) ===== */
.badge {
  width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.badge__ring {
  position: absolute; inset: 0;
  animation: badge-spin 22s linear infinite;
}
.badge__ring svg { width: 100%; height: 100%; display: block; }
.badge__core {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.04em;
}
.badge__core img { width: 44px; height: auto; display: block; }
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* ===== Card ===== */
.card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-med) var(--ease-out);
}
.card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: 16px;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__overlay {
  position: absolute; inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.card:hover .card__overlay { opacity: 0.12; }
.card__body {
  padding: 20px 4px 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.card__tag {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-soft);
}

/* ===== Featured-work text marquee (bullet-separated) ===== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 48px);
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 48px;
}
.marquee__item::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* ===== Footer ===== */
.footer {
  background: #0E1C38 !important;
  color: #FFFFFF !important;
  padding: 120px 0 32px;
}
.footer a, .footer h4, .footer span, .footer p, .footer li { color: inherit; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer h4 {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 16px;
}
.footer__links li { margin-bottom: 8px; font-size: 14px; opacity: 0.85; }
.footer__links a:hover { opacity: 1; color: var(--accent); }
.footer__social { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
.footer__social a {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rule); color: inherit; opacity: 0.85;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer__social a:hover { opacity: 1; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer__social svg { width: 14px; height: 14px; }
.footer__manifesto {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 500px;
}
.footer__mega {
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.footer__mega img {
  width: 100%;
  max-width: 160px;
  height: auto;
  opacity: 1;
}
@media (max-width: 767px) {
  .footer__mega img { max-width: 120px; }
}
.footer__legal {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column-reverse; align-items: center; gap: 12px; text-align: center; }
}

/* ===== Video in cover band ===== */
.cover__video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-out);
}
.cover__label-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* ===== Ticker (thin mono marquee) ===== */
.ticker {
  background: var(--ink-invert);
  color: var(--bg);
  overflow: hidden;
  border-radius: 999px;
  padding: 16px 0;
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--container) - var(--gutter)*2);
  margin: 32px auto;
}
.ticker__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 48px;
}
.ticker__item::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ===== Client logos (tilted pill capsules) ===== */
.logo-pill {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  transform: rotate(var(--r, 0deg));
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(14,14,14,0.10);
  transition: transform var(--dur-med) var(--ease-out);
  will-change: transform;
}
.logo-pill--ink { background: var(--ink); color: var(--bg); }
.logo-pill--orange { background: var(--accent); color: var(--ink); }
.logo-pill--light, .logo-pill--peach { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); }

/* ===== LET'S WORK big circle ===== */
.lets-work {
  background: var(--bg);
  padding: clamp(90px, 10vh, 180px) 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lets-work__cta {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background: #0E1C38 !important;
  color: #FFFFFF !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  will-change: width, height, border-radius;
}
.lets-work__cta svg text { fill: #FFFFFF; }

/* ===== Work hero — hand-drawn scribble around big title (work.html) ===== */
.work-hero {
  padding: clamp(140px, 22vh, 240px) 0 clamp(80px, 12vh, 140px);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.work-hero__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) clamp(24px, 5vw, 80px);
  text-align: center;
}
.work-hero__scribble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--accent);
  overflow: visible;
}
.work-hero__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  opacity: 0;
}
.work-hero.is-in .work-hero__path {
  animation: lm-draw 2.6s cubic-bezier(0.43, 0.13, 0.23, 0.96) forwards;
}
.work-hero__text { position: relative; z-index: 1; }
.work-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(60px, 10vw, 160px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 16px;
}
.work-hero__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .work-hero__inner { padding: 80px 24px; }
  .work-hero__path { stroke-width: 14; }
}

/* ===== Let's meet — hand-drawn scribble CTA (non-home pages) ===== */
.lets-meet {
  /* padding: clamp(120px, 18vh, 220px) 0; */
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.lets-meet__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(140px, 18vh, 220px) clamp(60px, 8vw, 140px);
  text-align: center;
}
.lets-meet__scribble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--accent);
  overflow: visible;
}
.lets-meet__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  opacity: 0;
}
.lets-meet.is-in .lets-meet__path {
  animation: lm-draw 2.6s cubic-bezier(0.43, 0.13, 0.23, 0.96) forwards;
}
@keyframes lm-draw {
  to { stroke-dashoffset: 0; opacity: 0.9; }
}
.lets-meet__text { position: relative; z-index: 1; }
.lets-meet__text .eyebrow {
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  margin-top: 20px;
}
.lets-meet__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.lets-meet__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink-soft);
  margin: 16px 0 32px;
}
@media (max-width: 767px) {
  /* Match the shared section rhythm — these CTA bands carried 90–120px of
     outer padding, dwarfing every other section on mobile. */
  .lets-meet { padding: var(--section-y) 0; }
  .lets-work { padding: var(--section-y) 0; }
  .lets-meet__inner { padding: 56px 44px; overflow: hidden; }
  .lets-meet__path { stroke-width: 14; }
  .lets-meet__scribble { transform: scaleX(1.3); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .lets-meet__inner { padding: 100px 14%; }
}
.lets-work__compact,
.lets-work__expanded {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lets-work__compact { opacity: 1; }
.lets-work__expanded {
  opacity: 0;
  padding: 0 clamp(40px, 6vw, 96px);
  justify-content: space-between;
  gap: 24px;
}
.lets-work__spin {
  position: absolute; inset: 16px;
  width: calc(100% - 32px); height: calc(100% - 32px);
  animation: lw-spin 18s linear infinite;
}
.lets-work__arrow {
  position: relative; z-index: 1;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
}
.lets-work__expanded-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--bg);
  text-align: left;
}
.lets-work__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.lets-work__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7.5vw, 128px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
}
.lets-work__btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 18px 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lets-work__cta:hover .lets-work__btn { background: var(--accent); border-color: var(--accent); color: #0E1C38 !important; }

/* ===== Dark theme overrides for sections that hardcode light bg ===== */
/* Dark sections (lets-work, radar, proficiency-stack) stay dark in both themes — no overrides */
html[data-theme="dark"] .nav__menu-btn { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .progress { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .btn--ghost { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .btn--ghost.is-rippling { color: var(--bg); }
html[data-theme="dark"] .btn--ghost::before { background: var(--ink); }
html[data-theme="dark"] .nav__pill { background: rgba(223,216,198,0.06); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .badge__core { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .badge { color: var(--ink); }
html[data-theme="dark"] .cursor__dot,
html[data-theme="dark"] .cursor__ring { background: var(--ink); }

/* Dark mode: keep .btn text dark on hover (vs accent gold bg) */
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn.is-rippling { color: var(--bg) !important; }
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .btn--ghost.is-rippling { color: var(--bg) !important; }

/* Light/dark logo swap */
.logo-dark { display: none !important; }
.logo-light { display: block; }
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-dark { display: block !important; }
/* Footer always shows 3gold mega logo regardless of theme */
.footer .logo-light { display: block !important; }
.footer .logo-dark { display: none !important; }

/* Hero monogram white silhouette in dark mode */
html[data-theme="dark"] .hero__wordmark img { filter: brightness(0) invert(1); }

/* Ticker invert in dark mode (would become invisible otherwise) */
html[data-theme="dark"] .ticker { background: var(--ink); color: var(--bg); }
@keyframes lw-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .lets-work__expanded { flex-direction: column; gap: 18px; padding: 0 24px; justify-content: center; }
  .lets-work__expanded-text { text-align: center; align-items: center; }
}

/* ===== Scroll progress + back-to-top circle ===== */
.progress {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink-invert);
  color: var(--bg);
  padding: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              background var(--dur-fast);
  pointer-events: none;
}
.progress.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.progress:hover { background: var(--accent); color: var(--ink); }
.progress svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.progress__track { stroke: rgba(255,255,255,0.15); stroke-width: 2; }
.progress__bar {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 80ms linear;
}
.progress__arrow { font-size: 16px; line-height: 1; position: relative; z-index: 1; }
@media (max-width: 640px) {
  .progress { width: 48px; height: 48px; right: 16px; bottom: 16px; }
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────
   Sits above .page-hero inside <main>. The hero normally carries 180px of top
   padding to clear the fixed nav; when a breadcrumb precedes it, that clearance
   moves onto the breadcrumb and the hero tightens up so total spacing is
   unchanged. Only applies where the two are adjacent siblings. Blog posts wrap
   their hero in <article>, so .blog-post__hero is reached via that wrapper
   rather than as a direct adjacent sibling. */
.breadcrumb { padding: 148px 0 0; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.breadcrumb__item { display: flex; align-items: center; gap: 8px; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; color: var(--rule); font-size: 13px;
}
.breadcrumb__link {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.breadcrumb__link:hover, .breadcrumb__link:focus-visible {
  color: var(--accent); border-bottom-color: var(--accent);
}
.breadcrumb__current { color: var(--ink); }
.breadcrumb + .page-hero,
.breadcrumb + article .blog-post__hero { padding-top: 18px; }

@media (max-width: 640px) {
  .breadcrumb { padding-top: 100px; }
  .breadcrumb__list { font-size: 12px; gap: 6px; }
  .breadcrumb__item { gap: 6px; }
  .breadcrumb + .page-hero,
  .breadcrumb + article .blog-post__hero { padding-top: 10px; }
}