/* =============================================================
   components.css — header, footer, buttons, cards, badges
   All colour / spacing values reference tokens from main.css
   ============================================================= */

/* =============================================================
   SITE HEADER
   ============================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* Shadow added via .is-scrolled (toggled by navigation.js
     once the page scrolls past 80 px)                         */
  transition: box-shadow 0.35s var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(17, 17, 17, 0.07);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .header__inner { padding-inline: var(--space-2xl); }
}

/* ── Logo ────────────────────────────────────────────────── */
.header__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-base);
}

.header__logo:hover {
  opacity: 0.72;
  text-decoration: none;
  color: var(--color-text);
}

/* ── Desktop nav ─────────────────────────────────────────── */
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  list-style: none;
}

.header__nav-link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--duration-fast) var(--ease-base);
  white-space: nowrap;
}

/* Sliding underline */
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-out);
}

.header__nav-link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.header__nav-link:hover::after {
  width: 100%;
}

/* Active page — persistent accent underline */
.header__nav-link[aria-current="page"] {
  color: var(--color-text);
}

.header__nav-link[aria-current="page"]::after {
  width: 100%;
  background-color: var(--color-accent);
}

/* ── Hamburger button ────────────────────────────────────── */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-base);
  flex-shrink: 0;
}

.header__hamburger:hover {
  background-color: var(--color-surface);
}

.header__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-full);
  transition:
    transform  0.25s var(--ease-out),
    opacity    0.2s  var(--ease-base),
    width      0.25s var(--ease-out);
  transform-origin: center;
}

/* Animate bars → × when menu is open */
.site-header.is-open .header__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .header__hamburger-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.site-header.is-open .header__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile layout ───────────────────────────────────────── */
@media (max-width: 768px) {
  .header__hamburger {
    display: flex;
  }

  /*
    The nav slides down from behind the header using
    max-height: 0 → max-height: 420px with overflow hidden.
    The header must NOT have overflow:hidden so the sticky
    positioning works — only .header__nav clips.
  */
  .header__nav {
    position: absolute;
    top: 64px;  /* flush below the header bar */
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease-out);
  }

  .site-header.is-open .header__nav {
    max-height: 420px;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) 0 var(--space-md);
  }

  .header__nav-list li {
    width: 100%;
  }

  .header__nav-link {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--text-base);
  }

  /* Keep the underline hidden on mobile — use bg highlight instead */
  .header__nav-link::after {
    display: none;
  }

  .header__nav-link:hover,
  .header__nav-link[aria-current="page"] {
    background-color: var(--color-surface);
  }

  .header__nav-link[aria-current="page"] {
    color: var(--color-accent);
  }
}

/* =============================================================
   FLOATING NAV
   Fixed hamburger button + right side-drawer menu.
   Visible on all screen sizes (desktop + mobile).
   On mobile the original .header__hamburger is hidden so only
   the floating button is shown.
   ============================================================= */

/* ── Toggle button ───────────────────────────────────────── */
.float-nav__btn {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 600;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    background  var(--duration-base) var(--ease-base),
    border-color var(--duration-fast) var(--ease-base),
    box-shadow  var(--duration-base) var(--ease-base);
}

.float-nav__btn:hover {
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.float-nav__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition:
    transform  0.28s var(--ease-out),
    opacity    0.2s  var(--ease-base),
    width      0.28s var(--ease-out),
    background var(--duration-fast) var(--ease-base);
  transform-origin: center;
}

/* Animate bars → × when open */
.float-nav.is-open .float-nav__btn {
  background: var(--color-text);
  border-color: var(--color-text);
}
.float-nav.is-open .float-nav__bar {
  background: #ffffff;
}
.float-nav.is-open .float-nav__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.float-nav.is-open .float-nav__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.float-nav.is-open .float-nav__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Backdrop ────────────────────────────────────────────── */
.float-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  z-index: 580;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-base);
}

.float-nav.is-open .float-nav__backdrop {
  opacity: 1;
  pointer-events: all;
}

/* ── Side drawer ─────────────────────────────────────────── */
.float-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 88vw;
  background: var(--color-bg);
  z-index: 590;
  padding: 88px 40px 48px;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(17, 17, 17, 0.14);
  transform: translateX(100%);
  /* visibility delay ensures drawer is hidden before fully off-screen */
  visibility: hidden;
  transition:
    transform  0.38s var(--ease-out),
    visibility 0s    linear 0.38s;
}

.float-nav.is-open .float-nav__drawer {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform  0.38s var(--ease-out),
    visibility 0s    linear 0s;
}

/* ── Drawer contents ─────────────────────────────────────── */
.float-nav__site-name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
  max-width: none;
}

.float-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.float-nav__link {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: -0.01em;
  transition:
    color       var(--duration-fast) var(--ease-base),
    padding-left var(--duration-base) var(--ease-out);
}

.float-nav__link:last-child {
  border-bottom: none;
}

.float-nav__link:hover {
  color: var(--color-accent);
  text-decoration: none;
  padding-left: 8px;
}

.float-nav__link[aria-current="page"] {
  color: var(--color-accent);
}

/* Hide the original header hamburger — floating nav replaces it */
@media (max-width: 768px) {
  .header__hamburger {
    display: none;
  }
  .header__nav {
    display: none;
  }
}

/* =============================================================
   SITE FOOTER
   ============================================================= */

.site-footer {
  background-color: #111111;
  color: #FAFAF8;
  border-top: 2px solid #22c55e;
}

/* ── Main grid ───────────────────────────────────────────── */
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-3xl);
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

@media (min-width: 640px) {
  .footer__inner { padding-inline: var(--space-2xl); }
}

@media (max-width: 960px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 540px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ── Column heading ──────────────────────────────────────── */
.footer__col-title {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.35);
  margin-bottom: var(--space-lg);
  max-width: none;
}

/* ── Col 1: Brand ────────────────────────────────────────── */
.footer__logo {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #FAFAF8;
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
  transition: color var(--duration-fast) var(--ease-base);
}

.footer__logo:hover {
  color: #22c55e;
  text-decoration: none;
}

.footer__tagline {
  font-size: var(--text-xs);
  color: rgba(250, 250, 248, 0.38);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  max-width: none;
}

.footer__bio {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(250, 250, 248, 0.55);
  margin-bottom: var(--space-lg);
  max-width: 30ch;
}

.footer__email-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: #22c55e;
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: opacity var(--duration-fast) var(--ease-base);
}

.footer__email-link svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.footer__email-link:hover {
  opacity: 0.75;
  text-decoration: none;
  color: #22c55e;
}

/* ── Col 2: Page links ───────────────────────────────────── */
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: rgba(250, 250, 248, 0.55);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-base),
              padding-left var(--duration-base) var(--ease-out);
  display: block;
}

.footer__nav-link:hover {
  color: #FAFAF8;
  text-decoration: none;
  padding-left: 4px;
}

/* ── Col 3: Social links ─────────────────────────────────── */
.footer__social-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(250, 250, 248, 0.55);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-base);
}

.footer__social-link svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-base);
}

.footer__social-link:hover {
  color: #FAFAF8;
  text-decoration: none;
}

.footer__social-link:hover svg {
  opacity: 1;
}

/* ── Col 4: Location + CTA ───────────────────────────────── */
.footer__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: rgba(250, 250, 248, 0.55);
  line-height: var(--leading-normal);
  max-width: none;
}

.footer__location svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.footer__availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(250, 250, 248, 0.55);
  margin-top: var(--space-lg);
}

.footer__cta-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(250, 250, 248, 0.08);
}

.footer__cta-label {
  font-size: var(--text-xs);
  color: rgba(250, 250, 248, 0.38);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-md);
  max-width: none;
}

.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #111111;
  background: #22c55e;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-base),
              transform  var(--duration-fast) var(--ease-base);
}

.footer__cta-btn:hover {
  background: #16a34a;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

.footer__cta-btn svg {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.footer__cta-btn:hover svg {
  transform: translateX(3px);
}

/* ── Pulsing availability dot ────────────────────────────── */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  60%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: statusPulse 2.4s ease-in-out infinite;
}

/* ── Bottom bar ──────────────────────────────────────────── */
.footer__bottom {
  border-top: 1px solid rgba(250, 250, 248, 0.08);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg);
}

@media (min-width: 640px) {
  .footer__bottom-inner { padding-inline: var(--space-2xl); }
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(250, 250, 248, 0.3);
  max-width: none;
}

.footer__domain-link {
  color: rgba(250, 250, 248, 0.45);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-base);
}

.footer__domain-link:hover {
  color: #22c55e;
  text-decoration: none;
}

.footer__credits {
  font-size: var(--text-xs);
  color: rgba(250, 250, 248, 0.22);
  max-width: none;
}

/* =============================================================
   BUTTONS
   (Supplemental to main.css .btn-primary / .btn-ghost)
   ============================================================= */

/* Size modifier */
.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
}

/* =============================================================
   CARDS
   ============================================================= */

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition:
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(17, 17, 17, 0.12);
}

.card--surface {
  background-color: var(--color-surface);
}

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.card__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

/* =============================================================
   BADGES / TAGS
   ============================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  background-color: var(--color-surface);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.badge--accent {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border-color: transparent;
}

/* =============================================================
   GRID
   ============================================================= */

.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
}

/* =============================================================
   DIVIDER
   ============================================================= */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-xl);
}

/* =============================================================
   HERO SECTION  (index.html)
   ============================================================= */

/*
  PEEK STRATEGY:
  min-height: 100vh makes the hero fill the viewport exactly.
  padding-bottom: 160px creates a "peek zone" at the bottom.
  The first .reveal element in the next section starts life at
  translateY(30px), so its top ~30px bleeds into this padding —
  invisible but occupying layout — giving a natural preview of
  what's below before the user scrolls.
  No overflow:hidden anywhere in this chain.
*/
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;

  /* Centred single-column measure, matching --content-width */
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-top: var(--space-3xl);
  padding-bottom: 160px;  /* peek zone */
}

@media (min-width: 640px) {
  .hero { padding-inline: var(--space-2xl); }
}

/* Pull label up to breathe against the heading */
.hero__label {
  margin-bottom: var(--space-sm);
}

/* ── Heading ─────────────────────────────────────────────── */
.hero__heading {
  /* Override default h1 margin — the label above provides rhythm */
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xl);

  font-size: clamp(2rem, 4.5vw, 3.125rem); /* ~50px max, 30% smaller than default */
  line-height: 1.05;
  letter-spacing: -0.025em;

  /*
    text-wrap: balance distributes words evenly across lines,
    preventing a single short word on the last line.
    Falls back gracefully in older browsers (just wraps normally).
  */
  text-wrap: balance;
}

/*
  The <br class="hero__heading-break"> forces a break at the em
  dash on all screen sizes. Hide it if you want fully fluid
  wrapping — but the break at "—" reads well editorially.
*/

/* ── Bio paragraph ───────────────────────────────────────── */
.hero__bio {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-muted);
  max-width: 56ch;
  margin-bottom: var(--space-2xl);
}

.hero__bio strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ── CTA row ─────────────────────────────────────────────── */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

/* =============================================================
   CAREER TIMELINE
   ============================================================= */

/*
  Desktop: four nodes connected by a single horizontal line.
  Mobile (≤ 540px): rotates to a vertical list, line on the left.

  The ::before pseudo-element draws the continuous track line.
  Nodes sit on top of it (z-index: 1) with a white background
  so they visually "interrupt" the line, not merge with it.
*/
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2xl);
  /* top padding offsets the track line to align with node centers */
  padding-top: var(--space-md);
}

/* ── Horizontal track line ───────────────────────────────── */
.timeline::before {
  content: '';
  position: absolute;
  /* 5px = half of 12px node + 1px fudge for optical center */
  top: calc(var(--space-md) + 5px);
  left: 6px;   /* inset to start at first node center */
  right: 6px;  /* inset to end at last node center    */
  height: 1px;
  background-color: var(--color-border);
  z-index: 0;
}

/* ── Individual step ─────────────────────────────────────── */
.timeline__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* min-width prevents labels from overlapping on narrow viewports */
  min-width: 0;
}

/* ── Node circle ─────────────────────────────────────────── */
.timeline__node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-bg);   /* white "punch-through" the line */
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  margin-bottom: var(--space-md);
  transition:
    background-color var(--duration-base) var(--ease-base),
    border-color     var(--duration-base) var(--ease-base),
    box-shadow       var(--duration-base) var(--ease-base);
}

/* ── Active node (AI Engineer) ───────────────────────────── */
.timeline__item--active .timeline__node {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  /* Soft outer glow using the accent tint */
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

/* ── Label text ──────────────────────────────────────────── */
.timeline__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding-inline: var(--space-xs);
}

.timeline__role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  /* Prevent long labels ("Full Stack Engineer") from pushing width */
  word-break: break-word;
  hyphens: auto;
}

.timeline__duration {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Active node text — accent colour, slightly bolder */
.timeline__item--active .timeline__role {
  color: var(--color-accent);
  font-weight: 600;
}

/* ── Separator arrows between timeline nodes ─────────────── */
.timeline__arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: calc(var(--space-md) + 1px); /* align with node center */
  font-size: 0.85rem;
  color: var(--color-muted);
  user-select: none;
  z-index: 2;
}

/* ── Mobile: vertical layout ─────────────────────────────── */
@media (max-width: 540px) {
  .timeline__arrow {
    display: none; /* arrows not needed in vertical stacked layout */
  }

  .timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding-top: 0;
    padding-left: calc(var(--space-md) + 6px); /* indent past the line */
  }

  /* Vertical track line — left edge */
  .timeline::before {
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto; /* override the explicit height from desktop */
  }

  .timeline__item {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
    flex: none;
    width: 100%;
  }

  /* Push node left to sit on the track line */
  .timeline__node {
    margin-bottom: 0;
    margin-top: 1px;          /* optical alignment with first text line */
    margin-left: calc(-1 * (var(--space-md) + 6px) - 6px); /* pull back to line */
    flex-shrink: 0;
  }

  .timeline__text {
    align-items: flex-start;
    text-align: left;
    padding-inline: 0;
  }
}

/* =============================================================
   ABOUT VIDEO SECTION  (index.html — Section 02)
   ============================================================= */

/*
  Background alternates from hero's white (#FFFFFF) to the warm
  off-white surface (#FAFAF8). The section is full-width so the
  background bleeds edge-to-edge; the inner div constrains copy.

  PEEK ZONE: padding-bottom: 120px
  The next section's first .reveal starts at translateY(30px),
  so its bounding box already bleeds 30px into this padding.
  The remaining 90px shows the next section's label + the top
  of its heading before the user scrolls — a natural preview.
*/
.about-video {
  background-color: var(--color-surface);
  padding-top: var(--space-3xl);
  padding-bottom: 120px;
}

.about-video__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .about-video__inner { padding-inline: var(--space-2xl); }
}

.about-video__heading {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xl);
  text-wrap: balance;
}

/* =============================================================
   16:9 RESPONSIVE VIDEO WRAPPER
   ============================================================= */

/*
  Intrinsic-ratio technique:
    padding-bottom: 56.25% (= 9 ÷ 16) drives the height relative
    to the element's own width — no JS or fixed heights needed.
    height: 0 collapses the block so only the padding defines size.
    overflow: hidden clips the absolutely-positioned iframe and
    also applies border-radius to its corners.
*/
.video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;           /* clips iframe to rounded corners */

  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);

  /* Dark fill visible during the brief load gap before the
     iframe paints — prevents a white flash on slow connections */
  background-color: #1a1a1a;

  margin-bottom: var(--space-2xl);
}

.video-wrap iframe {
  position: absolute;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =============================================================
   HIGHLIGHT LIST
   ============================================================= */

/*
  Uses .reveal-group so the three <li> elements stagger in
  at 0 / 100ms / 200ms via the rule in animations.css.
  The ✦ icon is a Unicode four-pointed star treated as a
  decorative bullet — aria-hidden so screen readers skip it.
*/
.about-video__highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.about-video__highlight {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.highlight-icon {
  color: var(--color-accent);
  font-size: 0.6em;     /* smaller than body text — reads as a bullet */
  flex-shrink: 0;
  position: relative;
  top: -0.05em;         /* nudge up for optical baseline alignment    */
  user-select: none;
}

/* =============================================================
   ACTIVITY PULSE SECTION  (index.html — Section 03)
   ============================================================= */

/*
  Background returns to white after the off-white About Video
  section, maintaining the alternating editorial rhythm.

  PEEK ZONE: padding-bottom: 100px — the next section's first
  .reveal element starts at translateY(30px) and its upper edge
  bleeds into this space, giving ~60px of natural preview.
*/
.activity-pulse {
  background-color: var(--color-bg);
  padding-top: var(--space-3xl);
  padding-bottom: 100px;
}

.activity-pulse__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .activity-pulse__inner { padding-inline: var(--space-2xl); }
}

.activity-pulse__heading {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xl);
  text-wrap: balance;
}

/* ── Live indicator dot on section label ─────────────────── */
/*
  Reuses the statusPulse keyframes defined in the footer block.
  Sized smaller (6 px vs 8 px) and aligned inline with the
  label's uppercase tracking text.
*/
.activity-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  top: -5px;           /* optical centre with 12px uppercase text */
  animation: statusPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* =============================================================
   ACTIVITY FEED
   ============================================================= */

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* =============================================================
   ACTIVITY CARD
   ============================================================= */

.activity-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform   var(--duration-base) var(--ease-out),
    box-shadow  var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  cursor: default;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(17, 17, 17, 0.10);
}

/* ── Icon container ──────────────────────────────────────── */
.activity-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-base);
}

.activity-card:hover .activity-card__icon {
  background-color: var(--color-accent-light);
}

.activity-card__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ── Text body ───────────────────────────────────────────── */
.activity-card__body {
  flex: 1;
  min-width: 0;   /* allow text truncation inside a flex child */
}

.activity-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.activity-card__platform {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Platform accent colours — applied per data-platform attribute */
.activity-card[data-platform="GitHub"] .activity-card__platform {
  color: #1a1a1a;
}
.activity-card[data-platform="LinkedIn"] .activity-card__platform {
  color: #0a66c2;
}

.activity-card__time {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.activity-card__action {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
  max-width: none;   /* override the 68ch cap from main.css p */
  margin: 0;
}

/* =============================================================
   LOAD MORE — slide-down container for extra cards
   ============================================================= */

/*
  .activity-more is a flex column inserted by JS directly inside
  .activity-feed. It starts collapsed (max-height: 0, overflow
  hidden). On "Load More" click, JS adds .is-open which
  transitions max-height to a large ceiling value.

  margin-top transitions in sync so the gap between the last
  visible card and the first hidden card appears smoothly —
  if margin-top were instant, layout would jump before the
  slide animation begins.
*/
.activity-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  transition:
    max-height 0.55s var(--ease-out),
    margin-top 0.55s var(--ease-out);
}

.activity-more.is-open {
  /*
    2000px is a safe ceiling — the actual content is ~4 cards
    (~400px). Avoid 9999px; browsers sometimes skip animating
    very large max-height transitions and jump to final state.
  */
  max-height: 2000px;
  margin-top: var(--space-md);
}

/* ── Load More button wrapper ────────────────────────────── */
.activity-load-wrap {
  display: flex;
  justify-content: center;
  padding-block: var(--space-md);
  margin-bottom: var(--space-md);
}

.activity-load-btn {
  min-width: 140px;
}

/* =============================================================
   ACHIEVEMENTS SECTION  (index.html — Section 04)
   ============================================================= */

/*
  Background alternates back to off-white after the white
  Activity Pulse section.

  PEEK ZONE: padding-bottom: 100px so ~60px of the next
  section's first .reveal element is visible before scroll.
  The 30px translateY on that element eats into the remaining
  70px, leaving a clear visual preview.
*/
.achievements {
  background-color: var(--color-surface);
  padding-top: var(--space-3xl);
  padding-bottom: 100px;
}

.achievements__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .achievements__inner { padding-inline: var(--space-2xl); }
}

.achievements__heading {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xl);
  text-wrap: balance;
}

/* =============================================================
   TWO-COLUMN GRID
   ============================================================= */

/*
  Desktop: three-column grid — [content] [1px divider] [content]
  The middle "auto" column sizes to the divider element's width,
  so no hard-coded gap arithmetic is needed.

  Mobile (≤ 600px): single column — the divider element naturally
  becomes a full-width 1px horizontal rule between the two lists.
*/
.achievements__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}

@media (max-width: 600px) {
  .achievements__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-2xl);
  }
}

/* ── Divider ─────────────────────────────────────────────── */
/*
  Desktop: 1px-wide column, stretches to the full row height
  so it always reaches from the tallest column's top to bottom.

  Mobile: switches to a full-width 1px horizontal bar.
  width/height values are swapped via the breakpoint below.
*/
.achievements__divider {
  width: 1px;
  background-color: var(--color-border);
  align-self: stretch;
}

@media (max-width: 600px) {
  .achievements__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}

/* ── Column heading ("Recent" / "Legacy") ────────────────── */
/*
  Uses font-body + uppercase tracking to match .section-label
  aesthetics — acts as a column category label, not a structural
  heading despite being an <h3> for screen-reader hierarchy.
*/
.achievements__col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
  line-height: var(--leading-normal);
}

/* =============================================================
   ACHIEVEMENT LIST
   ============================================================= */

.achievements__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Individual item ─────────────────────────────────────── */
/*
  Left accent bar technique: border-left at 35% opacity signals
  the accent without competing with text. On hover the bar
  transitions to full opacity — a subtle interactive reward.

  padding-left creates the gutter between the bar and the text
  (and emoji, in Recent items).
*/
.achievements__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);

  border-left: 2px solid rgba(26, 86, 219, 0.28);
  padding-left: var(--space-md);

  transition: border-color var(--duration-fast) var(--ease-base);
}

.achievements__item:hover {
  border-left-color: var(--color-accent);
}

/* Recent items — slightly heavier weight to signal recency */
.achievements__list--recent .achievements__item {
  font-weight: 500;
}

/* ── Emoji bullet ────────────────────────────────────────── */
/*
  Decorative — aria-hidden on the element in HTML.
  font-size slightly larger than the text so the emoji reads
  comfortably; line-height: 1 prevents it from expanding the
  row height on its own.
*/
.achievements__emoji {
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* =============================================================
   ACHIEVEMENT CARDS  (index.html — Section 04, single-column)
   Replaces the two-column text layout with visual grid cards.
   ============================================================= */

.ach-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.ach-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition:
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-base);
  cursor: default;
}

.ach-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

/* ── Graphic / icon block ────────────────────────────────── */
.ach-card__graphic {
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ach-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  user-select: none;
}

.ach-card__metric {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-text);
}

/* Colour variants */
.ach-card__graphic--blue   { background: #EBF1FD; }
.ach-card__graphic--green  { background: #DCFCE7; }
.ach-card__graphic--teal   { background: #CCFBF1; }
.ach-card__graphic--gold   { background: #FEF3C7; }
.ach-card__graphic--purple { background: #F3E8FF; }
.ach-card__graphic--slate  { background: #F1F5F9; }

/* ── Text body ───────────────────────────────────────────── */
.ach-card__body {
  flex: 1;
  min-width: 0;
}

.ach-card__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.ach-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.ach-card__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  max-width: none;
  margin: 0;
}

@media (max-width: 480px) {
  .ach-card {
    flex-direction: column;
    gap: var(--space-md);
  }

  .ach-card__graphic {
    width: 64px;
    min-width: 64px;
    height: 64px;
  }
}

/* =============================================================
   PROBLEMS SECTION  (index.html — Section 05)
   ============================================================= */

/*
  Background returns to white — alternating from the off-white
  Achievements section.

  PEEK ZONE: padding-bottom: 100px lets the next section's first
  .reveal element bleed ~60px into view before scroll.
*/
.problems {
  background-color: var(--color-bg);
  padding-top: var(--space-3xl);
  padding-bottom: 100px;
}

.problems__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .problems__inner { padding-inline: var(--space-2xl); }
}

.problems__heading {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xl);
  text-wrap: balance;
}

/* Hide the explicit <br> on narrow viewports where the heading
   naturally wraps anyway — prevents a very short second line */
.problems__br {
  display: none;
}
@media (min-width: 500px) {
  .problems__br { display: block; }
}

/* =============================================================
   PROBLEM CARD GRID
   ============================================================= */

/*
  .reveal-group on the grid means the IntersectionObserver
  watches the grid as a single unit. When 8% enters the
  viewport, JS adds .visible and the 6 direct children stagger
  in at 0 / 100 / 200 / 300 / 400 / 500ms via animations.css.
  On desktop the cards appear in left-right row order;
  on mobile they cascade top-to-bottom.
*/
.problems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  align-items: start;
}

@media (max-width: 560px) {
  .problems__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   PROBLEM CARD
   ============================================================= */

/*
  Inset box-shadow technique for the accent left border:
  ─────────────────────────────────────────────────────
  Instead of transitioning border-left (which shifts layout by
  1–2px, causing all adjacent cards to reflow), we use an inset
  box-shadow whose x-offset equals the bar width (3px).

  The shadow list is kept at the same length in both states so
  the browser can interpolate each value cleanly:

    default → inset 3px 0 0 transparent + subtle outer shadow
    hover   → inset 3px 0 0 var(--color-accent) + lifted shadow

  Matching shadow counts is required for smooth CSS transitions.
*/
.problem-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-xl);

  box-shadow:
    inset 3px 0 0 transparent,
    0 1px 4px rgba(17, 17, 17, 0.05),
    0 1px 2px rgba(17, 17, 17, 0.03);

  transition:
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.problem-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 17, 17, 0.09);

  box-shadow:
    inset 3px 0 0 var(--color-accent),
    0 6px 20px rgba(17, 17, 17, 0.08),
    0 2px 6px  rgba(17, 17, 17, 0.04);
}

/* ── Icon ────────────────────────────────────────────────── */
.problem-card__icon {
  display: block;
  font-size: 1.625rem;   /* 26px — large enough to read at a glance */
  line-height: 1;
  margin-bottom: var(--space-md);
  user-select: none;
}

/* ── Problem statement ───────────────────────────────────── */
.problem-card__problem {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-sm);
  max-width: none;   /* lift the 68ch cap from main.css */
}

/* ── Solution ────────────────────────────────────────────── */
.problem-card__solution {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: none;
}

/* =============================================================
   APPROACH SECTION  (index.html — Section 06)
   ============================================================= */

/*
  Background alternates back to off-white after the white
  Problems section.

  PEEK ZONE: padding-bottom: 100px.
*/
.approach {
  background-color: var(--color-surface);
  padding-top: var(--space-3xl);
  padding-bottom: 100px;
}

.approach__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 640px) {
  .approach__inner { padding-inline: var(--space-2xl); }
}

.approach__heading {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-3xl);
  text-wrap: balance;
}

/* =============================================================
   NUMBERED TIMELINE
   ============================================================= */

/*
  CONNECTOR LINE GEOMETRY
  ───────────────────────
  Each step except the last has a ::after pseudo-element that
  draws the vertical connector to the next step's badge.

  Variables (all at runtime):
    B = badge height      = 36px
    H = step total height (content-driven, varies per step)
    G = gap between steps = var(--space-2xl) = 48px

  Connector must run from:
    start: top of step + B          (= badge bottom edge)
    end:   top of step + H + G      (= top of next step's badge)

  Therefore:
    connector height = (H + G) - B  = H - B + G
    = calc(100% - 36px + var(--space-2xl))

  where 100% is the step's own height (H).

  Badge uses background-color matching the section surface so
  it visually "punches" through any part of the line that
  runs behind it, without needing z-index stacking tricks
  on the list container.
*/
.approach-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  list-style: none;
  margin-bottom: var(--space-2xl);
}

/* ── Individual step ─────────────────────────────────────── */
.approach-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* ── Vertical connector (every step except the last) ──────── */
.approach-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;   /* (36px badge - 1px line) / 2 — centres on badge */
  top: 36px;    /* starts at badge bottom edge */
  height: calc(100% - 36px + var(--space-2xl)); /* spans to next badge top */
  width: 1px;
  background-color: var(--color-border);
}

/* ── Number badge ────────────────────────────────────────── */
.approach-step__badge {
  /* Must have a background matching the section surface so the
     badge "punches" through the connector line drawn by ::after */
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;

  background-color: var(--color-surface);   /* matches .approach bg */
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);

  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;

  transition:
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out);
}

.approach-step:hover .approach-step__badge {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* ── Step content ────────────────────────────────────────── */
.approach-step__content {
  flex: 1;
  min-width: 0;
  /*
    padding-top nudges the title down so its optical centre
    aligns with the badge centre.
    Badge = 36px → centre at 18px.
    Title = var(--text-xl) ≈ 20px, leading-snug ≈ 26px → centre at 13px.
    Difference ≈ 5px; using --space-xs (4px) for a clean token.
  */
  padding-top: var(--space-xs);
}

.approach-step__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-sm);

  transition: color var(--duration-fast) var(--ease-base);
}

.approach-step:hover .approach-step__title {
  color: var(--color-accent);
}

.approach-step__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
  max-width: none;
}

/* =============================================================
   APPROACH STAGGER — 150ms between steps
   =============================================================
   Overrides the default 100ms stagger from animations.css.
   Specificity: .approach-steps.visible > .approach-step:nth-child(n)
   = (0,4,0) beats .reveal-group.visible > *:nth-child(n) = (0,3,0).
   No !important needed.
*/
.approach-steps.visible > .approach-step:nth-child(1) { transition-delay:   0ms; }
.approach-steps.visible > .approach-step:nth-child(2) { transition-delay: 150ms; }
.approach-steps.visible > .approach-step:nth-child(3) { transition-delay: 300ms; }
.approach-steps.visible > .approach-step:nth-child(4) { transition-delay: 450ms; }
.approach-steps.visible > .approach-step:nth-child(5) { transition-delay: 600ms; }

/* =============================================================
   SECTION 07 — WORK ETHICS
   ============================================================= */

.ethics {
  background-color: var(--color-bg);
  padding-bottom: 120px;
}

.ethics__inner {
  padding-top: var(--space-3xl);
}

.ethics__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2xl);
}

/* ── Quote card grid ─────────────────────────────────────── */

.ethics-cards {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 600px) {
  .ethics-cards {
    grid-template-columns: 1fr;
  }
}

.ethics-card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  transition:
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.ethics-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.ethics-card__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.25;
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  pointer-events: none;
  user-select: none;
}

.ethics-card__quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0;
  padding: 0;

  /* Push text below the large quote mark */
  padding-top: var(--space-xl);
}

.ethics-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
  margin-top: auto;
}

/* =============================================================
   SECTION 08 — CALL TO ACTION
   ============================================================= */

.cta-section {
  background-color: #F0F5FF;
  padding-bottom: 140px;
}

.cta-section__inner {
  padding-top: var(--space-3xl);
  text-align: center;
}

.cta-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Allow controlled line break on wider screens, hide on mobile */
.cta-section__br {
  display: inline;
}

@media (max-width: 520px) {
  .cta-section__br {
    display: none;
  }
}

.cta-section__body {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 52ch;
  margin: 0 auto var(--space-2xl);
}

.cta-section__actions {
  margin-bottom: var(--space-lg);
}

/* Larger primary button variant for the CTA section */
.btn-primary--lg {
  padding: 0.875rem 2.25rem;
  font-size: var(--text-base);
}

.cta-section__alt {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-2xl);
}

.cta-section__email-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-base);
}

.cta-section__email-link:hover {
  border-bottom-color: var(--color-accent);
}

/* Centre the learn-more link in CTA section */
.cta-section__inner .learn-more-link {
  justify-content: center;
}

/* =============================================================
   SECTION 09 — TECH STACK
   ============================================================= */

.tech-stack {
  background-color: var(--color-surface);
  padding-bottom: 120px;
}

.tech-stack__inner {
  padding-top: var(--space-3xl);
}

.tech-stack__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2xl);
}

/* ── Tech category groups ────────────────────────────────── */

.tech-groups {
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tech-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
}

@media (max-width: 540px) {
  .tech-group {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

.tech-group__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  min-width: 100px;
  flex-shrink: 0;
}

.tech-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

/* ── Individual chip ─────────────────────────────────────── */

.tech-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;

  transition:
    background-color var(--duration-fast) var(--ease-base),
    border-color     var(--duration-fast) var(--ease-base),
    color            var(--duration-fast) var(--ease-base);
}

.tech-chip:hover {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* =============================================================
   ABOUT PAGE — about/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.about-hero {
  background-color: var(--color-bg);
  padding-bottom: 100px;
}

.about-hero__inner {
  padding-top: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Photo placeholder */
.about-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  flex-shrink: 0;
}

.about-photo__initials {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.about-hero .section-label {
  margin-bottom: var(--space-sm);
}

.about-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.about-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 52ch;
  margin: 0;
}

/* ── Bio ─────────────────────────────────────────────────── */

.about-bio {
  background-color: var(--color-surface);
  padding-bottom: 100px;
}

.about-bio__inner {
  padding-top: var(--space-3xl);
}

.about-bio__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-xl);
}

.about-bio__prose {
  max-width: 700px;
}

.about-bio__para {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-lg);
}

.about-bio__para:last-child {
  margin-bottom: 0;
}

.about-bio__para strong {
  font-weight: 600;
  color: var(--color-text);
}

/* ── Career Timeline ─────────────────────────────────────── */

.about-career {
  background-color: var(--color-bg);
  padding-bottom: 120px;
}

.about-career__inner {
  padding-top: var(--space-3xl);
}

.about-career__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2xl);
}

/* ── Timeline list ───────────────────────────────────────── */

.career-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 700px;
}

/*
  Vertical rule spanning from the first dot to the last.
  Positioned on the left side aligned with the dot column.
*/
.career-timeline::before {
  content: '';
  position: absolute;
  top: 8px;      /* vertically align with the center of the first dot */
  bottom: 8px;
  left: 84px;    /* center of the aside column (88px wide, dot at center) */
  width: 1px;
  background-color: var(--color-border);
}

/* ── Single career entry ─────────────────────────────────── */

.career-entry {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.career-entry:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .career-entry {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .career-timeline::before {
    display: none;
  }

  .career-entry__aside {
    flex-direction: row;
    gap: var(--space-sm);
    align-items: center;
  }

  .career-entry__dot {
    display: none;
  }
}

.career-entry__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 3px; /* optical alignment with heading cap-height */
  gap: var(--space-xs);
  flex-shrink: 0;
}

.career-entry__years {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
  line-height: 1;
}

.career-entry__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-border);
  flex-shrink: 0;
  margin-top: var(--space-xs);
}

/* Active (current) role dot: filled with accent */
.career-entry__dot--active {
  background-color: var(--color-accent);
  border-color: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.career-entry__content {
  padding-top: 0;
}

.career-entry__role {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
  line-height: var(--leading-snug);
}

.career-entry__context {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
  line-height: var(--leading-base);
}

.career-entry__achievements {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.career-entry__achievements li {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-loose);
  padding-left: var(--space-md);
  position: relative;
}

/*
  Custom bullet: small accent-coloured square
  at the cap-height of the first line.
*/
.career-entry__achievements li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 4px;
  height: 4px;
  background-color: var(--color-accent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Personal section ────────────────────────────────────── */

.about-personal {
  background-color: var(--color-surface);
  padding-bottom: 120px;
}

.about-personal__inner {
  padding-top: var(--space-3xl);
}

.about-personal__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-xl);
}

.about-personal__para {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  max-width: 700px;
  margin: 0;
}

/* =============================================================
   ACHIEVEMENTS PAGE — achievements/index.html
   ============================================================= */

/* ── Visually hidden utility ─────────────────────────────── */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Hero ────────────────────────────────────────────────── */

.ach-hero {
  background-color: var(--color-bg);
  padding-bottom: 80px;
}

.ach-hero__inner {
  padding-top: var(--space-3xl);
}

.ach-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.ach-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0;
}

/* ── Panel (filter + grid) ───────────────────────────────── */

.ach-panel {
  background-color: var(--color-surface);
  padding-bottom: 140px;
}

.ach-panel__inner {
  padding-top: var(--space-2xl);
}

/* ── Filter bar ──────────────────────────────────────────── */

.ach-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.ach-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;

  transition:
    background-color var(--duration-fast) var(--ease-base),
    border-color     var(--duration-fast) var(--ease-base),
    color            var(--duration-fast) var(--ease-base),
    box-shadow       var(--duration-fast) var(--ease-base);
}

.ach-filter-btn:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* Active state — aria-pressed="true" */
.ach-filter-btn[aria-pressed="true"] {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* ── Count line ──────────────────────────────────────────── */

.ach-count {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-xl);
}

/* ── Achievement card grid ───────────────────────────────── */

.ach-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 440px) {
  .ach-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Individual card ─────────────────────────────────────── */

.ach-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  /* Fade transition — duration must match FADE_MS in achievements-filter.js */
  transition:
    opacity      0.14s var(--ease-base),
    transform    0.14s var(--ease-base),
    box-shadow   var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.ach-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(26, 86, 219, 0.3);
}

/* State: fading out during filter transition */
.ach-card.is-fading {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
}

/* ── Card header row (badge + year) ──────────────────────── */

.ach-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* ── Category badge ──────────────────────────────────────── */

.ach-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

/* Recent — accent blue */
.ach-card__badge--recent {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

/* Legacy — neutral gray */
.ach-card__badge--legacy {
  background-color: #F0F0EE;
  color: #5A5A5A;
}

/* Certification — green tint */
.ach-card__badge--cert {
  background-color: #EDFAF3;
  color: #1A7A47;
}

/* Client Work — amber tint */
.ach-card__badge--client {
  background-color: #FEF5EA;
  color: #9A5B0A;
}

/* ── Year ────────────────────────────────────────────────── */

.ach-card__year {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Title ───────────────────────────────────────────────── */

.ach-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
}

/* ── Description ─────────────────────────────────────────── */

.ach-card__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
  margin-top: auto;
}

/* =============================================================
   SERVICES PAGE — services/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.svc-hero {
  background-color: var(--color-bg);
  padding-bottom: 80px;
}

.svc-hero__inner {
  padding-top: var(--space-3xl);
}

.svc-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.svc-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 58ch;
  margin: 0 0 var(--space-2xl);
}

/* ── Jump links ──────────────────────────────────────────── */

.svc-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.svc-jump-link {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;

  transition:
    background-color var(--duration-fast) var(--ease-base),
    border-color     var(--duration-fast) var(--ease-base),
    color            var(--duration-fast) var(--ease-base);
}

.svc-jump-link:hover {
  background-color: var(--color-surface);
  border-color: var(--color-text);
  color: var(--color-text);
  text-decoration: none;
}

/* ── Service sections ────────────────────────────────────── */

.svc-section {
  background-color: var(--color-bg);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-top: 1px solid var(--color-border);
}

.svc-section--alt {
  background-color: var(--color-surface);
}

.svc-section__inner {
  /* inherits max-width + padding from .section */
}

/*
  Two-column layout: content (flex: 1) + meta card (fixed 240px).
  Stacks on narrow viewports.
*/
.svc-section__layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 700px) {
  .svc-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ── Section header (number + icon) ─────────────────────── */

.svc-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.svc-section__num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  line-height: 1;
}

.svc-section__icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* ── Heading ─────────────────────────────────────────────── */

.svc-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

/* ── Problem + approach paragraphs ──────────────────────── */

.svc-section__problem,
.svc-section__approach {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  max-width: 64ch;
  margin: 0 0 var(--space-lg);
}

.svc-section__problem strong,
.svc-section__approach strong {
  font-weight: 600;
}

/* ── Deliverables list ───────────────────────────────────── */

.svc-deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.svc-deliverable {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.svc-deliverable__icon {
  font-style: normal;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
  line-height: 1.6; /* align with text baseline */
}

/* ── Meta card ───────────────────────────────────────────── */

.svc-meta {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0;

  /* On alt (surface-bg) sections, lift the card visually */
  box-shadow: var(--shadow-sm);
}

/* On white sections, the meta card needs its own bg lift */
.svc-section--alt .svc-meta {
  background-color: var(--color-bg);
}

.svc-meta__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-md) 0;
}

.svc-meta__row--stack {
  /* stack value can wrap — no special treatment needed */
}

.svc-meta__divider {
  height: 1px;
  background-color: var(--color-border);
}

.svc-meta__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
}

.svc-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Price gets display treatment */
.svc-meta__value--price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.svc-meta__cta {
  margin-top: var(--space-lg);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* ── Bottom CTA section ──────────────────────────────────── */

.svc-bottom-cta {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
  padding-bottom: 140px;
}

.svc-bottom-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.svc-bottom-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.svc-bottom-cta__body {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 54ch;
  margin: 0 0 var(--space-2xl);
}

/* =============================================================
   APPROACH PAGE — approach/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.appr-hero {
  background-color: var(--color-bg);
  padding-bottom: 80px;
}

.appr-hero__inner {
  padding-top: var(--space-3xl);
}

.appr-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.appr-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0;
}

/* ── Steps section ───────────────────────────────────────── */

.appr-steps-section {
  background-color: var(--color-surface);
  padding-bottom: 100px;
}

.appr-steps-section__inner {
  padding-top: var(--space-3xl);
}

.appr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* ── Single step ─────────────────────────────────────────── */

.appr-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 var(--space-xl);
  align-items: start;
}

@media (max-width: 480px) {
  .appr-step {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.appr-step__aside {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.2em; /* optical align with heading cap-height */
}

.appr-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.appr-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.appr-step__prose {
  max-width: 65ch;
}

.appr-step__prose p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-base);
}

.appr-step__prose p:last-child {
  margin-bottom: 0;
}

/* ── FAQ / Accordion ─────────────────────────────────────── */

.appr-faq {
  background-color: var(--color-bg);
  padding-bottom: 140px;
}

.appr-faq__inner {
  padding-top: var(--space-3xl);
}

.appr-faq__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2xl);
}

/* ── FAQ list ────────────────────────────────────────────── */

.faq-list {
  max-width: 680px;
}

.faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* ── FAQ button (question) ───────────────────────────────── */

.faq-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  cursor: pointer;
  padding: var(--space-lg) 0;

  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  line-height: var(--leading-snug);

  transition: color var(--duration-fast) var(--ease-base);
}

.faq-btn:hover {
  color: var(--color-accent);
}

.faq-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Plus/minus icon */
.faq-btn__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  transition:
    border-color  var(--duration-fast) var(--ease-base),
    transform     0.3s var(--ease-out);
}

/* Horizontal bar (always visible) */
.faq-btn__icon::before,
.faq-btn__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-muted);
  border-radius: 1px;
  transition:
    background-color var(--duration-fast) var(--ease-base),
    transform        0.3s var(--ease-out),
    opacity          0.3s var(--ease-out);
}

/* Horizontal bar */
.faq-btn__icon::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

/* Vertical bar */
.faq-btn__icon::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}

/* When expanded: rotate icon to × */
.faq-btn[aria-expanded="true"] .faq-btn__icon {
  border-color: var(--color-accent);
  transform: rotate(45deg);
}

.faq-btn[aria-expanded="true"] .faq-btn__icon::before,
.faq-btn[aria-expanded="true"] .faq-btn__icon::after {
  background-color: var(--color-accent);
}

/* ── FAQ answer ──────────────────────────────────────────── */

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--ease-out);
}

.faq-answer.is-open {
  max-height: 600px; /* large enough for any answer */
}

.faq-answer p {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-base);
  padding-bottom: 0;
  max-width: 62ch;
}

.faq-answer p:last-child {
  margin-bottom: var(--space-lg);
}

.faq-answer a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-base);
}

.faq-answer a:hover {
  border-bottom-color: var(--color-accent);
}

/* =============================================================
   ETHICS PAGE — ethics/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.eth-hero {
  background-color: var(--color-bg);
  padding-bottom: 80px;
}

.eth-hero__inner {
  padding-top: var(--space-3xl);
}

.eth-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.eth-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0;
}

/* ── Expanded ethics ─────────────────────────────────────── */

.eth-content {
  background-color: var(--color-surface);
  padding-bottom: 100px;
}

.eth-content__inner {
  padding-top: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Single principle ────────────────────────────────────── */

.eth-principle {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border);
}

.eth-principle:last-child {
  border-bottom: 1px solid var(--color-border);
}

.eth-principle--alt {
  background-color: transparent; /* alt sections share parent bg */
}

.eth-principle__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.eth-principle__num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
}

.eth-principle__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0;
}

.eth-principle__prose {
  max-width: 68ch;
}

.eth-principle__prose p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-base);
}

.eth-principle__prose p:last-child {
  margin-bottom: 0;
}

/* ── Testimonials ────────────────────────────────────────── */

.eth-testimonials {
  background-color: var(--color-bg);
  padding-bottom: 140px;
}

.eth-testimonials__inner {
  padding-top: var(--space-3xl);
}

.eth-testimonials__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2xl);
}

.testimonial-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* ── Single testimonial card ─────────────────────────────── */

.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.testimonial-card__quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0;
  padding: 0;
  font-style: italic;
}

.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.testimonial-card__author {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.testimonial-card__company {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

/* =============================================================
   CONTACT PAGE — contact/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.ct-hero {
  background-color: var(--color-bg);
  padding-bottom: 72px;
}

.ct-hero__inner {
  padding-top: var(--space-3xl);
}

.ct-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

/* ── Availability badge ──────────────────────────────────── */

.ct-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: #EDFAF3;
  border: 1px solid #B0E8CB;
  border-radius: var(--radius-full, 999px);
  padding: 0.375rem 0.875rem;
  margin-bottom: var(--space-lg);
}

.ct-availability__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1A7A47;
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}

.ct-availability__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #1A7A47;
  line-height: 1;
}

.ct-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 50ch;
  margin: 0;
}

/* ── Main section layout ─────────────────────────────────── */

.ct-main {
  background-color: var(--color-surface);
  padding-bottom: 140px;
}

.ct-main__inner {
  padding-top: var(--space-2xl);
}

/*
  Two-column: Calendly + direct links (left), form (right).
  On mobile: form first (higher priority for most visitors), then links.
*/
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 700px) {
  .ct-layout {
    grid-template-columns: 1fr;
  }

  .ct-left  { order: 2; }
  .ct-right { order: 1; }
}

/* ── Calendly placeholder ────────────────────────────────── */

.ct-calendly {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.ct-calendly__heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.ct-calendly__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-lg);
}

.ct-calendly__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 200px;
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
}

.ct-calendly__placeholder-icon {
  font-size: 2rem;
  line-height: 1;
}

.ct-calendly__placeholder-text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.ct-calendly__fallback-link {
  font-size: var(--text-sm);
}

.ct-calendly__ext {
  margin-left: 0.25em;
}

/* ── Direct contact links ────────────────────────────────── */

.ct-direct {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.ct-direct__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-lg);
}

.ct-direct__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-direct__item {
  border-top: 1px solid var(--color-border);
}

.ct-direct__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.ct-direct__link {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-base);
}

.ct-direct__link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.ct-direct__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-base);
}

.ct-direct__link:hover .ct-direct__link-icon {
  color: var(--color-accent);
}

.ct-direct__link-label {
  font-size: var(--text-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-direct__link-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Contact form card ───────────────────────────────────── */

.ct-form-wrap {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.ct-form-wrap__heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.ct-form-wrap__subtext {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-xl);
}

/* ── Form fields ─────────────────────────────────────────── */

.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ct-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
}

.ct-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color var(--duration-fast) var(--ease-base),
    box-shadow   var(--duration-fast) var(--ease-base);
}

.ct-input::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

.ct-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.ct-input--error {
  border-color: #D92D20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.1);
}

.ct-field-error {
  font-size: var(--text-xs);
  color: #D92D20;
  font-weight: 500;
  min-height: 1em; /* reserve space to prevent layout shift */
}

/* Select wrapper (custom arrow) */
.ct-select-wrap {
  position: relative;
}

.ct-select {
  cursor: pointer;
  padding-right: 2.5rem; /* room for arrow */
}

.ct-select-arrow {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-muted);
  pointer-events: none;
}

/* Textarea */
.ct-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-loose);
}

/* Submit button */
.ct-submit {
  align-self: flex-start;
}

/* ── Success message ─────────────────────────────────────── */

.ct-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
}

.ct-success[hidden] {
  display: none;
}

.ct-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #EDFAF3;
  color: #1A7A47;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.ct-success__heading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.ct-success__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 40ch;
  margin: 0;
}

.ct-success__body a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-base);
}

.ct-success__body a:hover {
  border-bottom-color: var(--color-accent);
}

/* =============================================================
   ACTIVITY PAGE — activity/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.act-hero {
  background-color: var(--color-bg);
  padding-bottom: 72px;
}

.act-hero__inner {
  padding-top: var(--space-3xl);
}

.act-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.act-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0;
}

/* ── Feed section ────────────────────────────────────────── */

.act-feed-section {
  background-color: var(--color-surface);
  padding-bottom: 140px;
}

.act-feed-section__inner {
  padding-top: var(--space-2xl);
}

/* ── Filter bar (reuses ach-filter-btn + adds spacing) ────── */

.act-filters {
  margin-bottom: var(--space-lg);
}

/* ── "How this works" note ───────────────────────────────── */

.act-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  max-width: 680px;
}

.act-note__label {
  font-weight: 600;
  color: var(--color-text);
  margin-right: var(--space-xs);
}

/* ── Page feed container ─────────────────────────────────── */

/*
  JS renders .activity-card elements directly into this div.
  Flex column with gap matches the homepage widget's card list.
*/
.act-page-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* =============================================================
   TECH PAGE — tech/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */

.tk-hero {
  background-color: var(--color-bg);
  padding-bottom: 72px;
}

.tk-hero__inner {
  padding-top: var(--space-3xl);
}

.tk-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
}

.tk-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 58ch;
  margin: 0;
}

/* ── Category sections ───────────────────────────────────── */

.tk-category {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.tk-category--alt {
  background-color: var(--color-surface);
}

.tk-category__inner {
  /* inherits max-width + padding from .section */
}

.tk-category__header {
  margin-bottom: var(--space-2xl);
}

.tk-category__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-xs) 0 0;
}

/* ── Tech item list ──────────────────────────────────────── */

.tk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ── Single tech item ────────────────────────────────────── */

.tk-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  max-width: 640px;
}

.tk-item__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.tk-item__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-normal);
}

.tk-item__years {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Proficiency bar — CSS only, no JS ───────────────────── */

.tk-bar {
  height: 4px;
  background-color: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.tk-bar__fill {
  height: 100%;
  width: var(--pct);
  background-color: var(--color-accent);
  border-radius: 2px;
  /*
    CSS-only entrance animation: bar grows from 0 to --pct
    width when it enters the viewport via the .reveal-group
    mechanism. The animation fires once and stays at full width.
  */
  animation: barGrow 0.8s var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .tk-bar__fill { animation: none; }
}

@keyframes barGrow {
  from { width: 0; }
  to   { width: var(--pct); }
}

.tk-item__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: var(--space-xs) 0 0;
}

/* ── Currently Learning section ──────────────────────────── */

.tk-learning {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.tk-learning__inner {
  /* inherits .section */
}

.tk-learning__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-xs) 0 var(--space-sm);
}

.tk-learning__sub {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0 0 var(--space-2xl);
}

.tk-learning-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tk-learning-item {
  max-width: 640px;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid #1A7A47; /* green — signals "active/growing" */

  transition:
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.tk-learning-item:hover {
  box-shadow: var(--shadow-sm);
}

.tk-learning-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.tk-learning-item__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.tk-learning-item__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1A7A47;
  background-color: #EDFAF3;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.tk-learning-item__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
}

/* ── Retired tech section ────────────────────────────────── */

.tk-retired {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.tk-retired__inner {
  /* inherits .section */
}

.tk-retired__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-xs) 0 var(--space-sm);
}

.tk-retired__sub {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin: 0 0 var(--space-2xl);
}

.tk-retired-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  border-top: 1px solid var(--color-border);
}

.tk-retired-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.tk-retired-item__name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.tk-retired-item__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-muted);
  margin: 0;
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: 2px;
}

.tk-retired-item__era {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

.tk-retired-item__reason {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
}

/* ── Bottom CTA ──────────────────────────────────────────── */

.tk-cta {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
  padding-bottom: 140px;
}

.tk-cta__inner {
  /* inherits .section */
}

.tk-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
  max-width: 28ch;
}

.tk-cta__body {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 54ch;
  margin: 0 0 var(--space-2xl);
}

/* =============================================================
   SECTION-WITH-PEEK — homepage peek utility
   =============================================================
   Applied to every homepage section except the last.
   Ensures the top of the next section's first element bleeds
   ~60-80px into the current section's bottom padding, creating
   a natural editorial "teaser" without overflow tricks.

   Uses !important to reliably override the per-section values
   set earlier in this file (same specificity, but this utility
   is intentionally a final-word override).

   The peek effect works because:
   1. This padding creates space below the last visible element.
   2. The next section's first .reveal child has translateY(30px)
      — its ghost position sits 30px lower than its rendered spot.
   3. As the user scrolls, that ghost enters the bottom of the
      padded area before the section actually reaches the viewport.
   ============================================================= */
.section-with-peek {
  padding-bottom: calc(var(--space-3xl) + 80px) !important;
  overflow: visible !important; /* never clip the peeking child */
}

/* =============================================================
   BACK TO TOP BUTTON
   ============================================================= */

.back-to-top {
  /* Layout */
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 150;

  /* Size + shape */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;

  /* Visuals */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  box-shadow: var(--shadow-md);
  cursor: pointer;

  /* Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);

  transition:
    opacity          0.22s var(--ease-out),
    transform        0.22s var(--ease-out),
    background-color var(--duration-fast) var(--ease-base),
    border-color     var(--duration-fast) var(--ease-base),
    color            var(--duration-fast) var(--ease-base),
    box-shadow       var(--duration-fast) var(--ease-base);
}

/* Visible state — added by JS after scrolling 400px */
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Tuck slightly closer to the edge on small screens */
@media (max-width: 480px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
}

/* =============================================================
   MOBILE RESPONSIVENESS — global fixes
   Breakpoints: Mobile < 640px | Tablet 640–1024px | Desktop > 1024px
   ============================================================= */

/* ── Section padding: reduce on mobile ───────────────────────
   --space-3xl is 3.5–6rem. On narrow screens that's generous;
   drop to --space-2xl (3rem) so content fills the viewport
   without excessive whitespace between sections.              */
@media (max-width: 639px) {
  .section {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-base);
  }

  /* Reduce peek overshoot — less extra space needed at narrow widths */
  .section-with-peek {
    padding-bottom: calc(var(--space-2xl) + 48px) !important;
  }
}

/* ── CTA buttons: full width on mobile ───────────────────────
   Primary action buttons expand to full width on narrow
   viewports so they're large enough to tap comfortably.
   The flex containers they sit in (hero__ctas, cta-section
   __actions, etc.) already flex-wrap, so stacking is natural. */
@media (max-width: 639px) {
  .btn-primary,
  .btn-ghost,
  .btn-primary--lg {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTA row: stack buttons vertically */
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  /* CTA section: ensure button container doesn't clip */
  .cta-section__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
}

/* ── Hamburger nav: ensure overlay covers full viewport ───────
   Already activates at 768px. On very small phones make the
   overlay font slightly larger for easier tap targets.        */
@media (max-width: 400px) {
  .mobile-nav__link {
    font-size: var(--text-xl);
  }
}

/* Footer breakpoints handled in main footer block above */

/* ── Achievements grid: standardize to 640px ─────────────────
   Existing rule at 600px; extend to 640px to match spec.     */
@media (max-width: 640px) {
  .ach-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Services meta rows: reduce on narrow mobile ─────────────
   Meta rows already stack on smaller widths via flex-wrap.
   Ensure labels/values don't overflow on very small screens. */
@media (max-width: 639px) {
  .svc-meta__row {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
  }
}

/* ── Activity cards: full width and filter bar wrapping ──────*/
@media (max-width: 639px) {
  .activity-card {
    width: 100%;
  }
  .act-filters {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

/* ── Tech learning/retired items: tighten on mobile ─────────
   Reduce horizontal padding inside tech item headers so long
   tech names don't overflow on narrow screens.               */
@media (max-width: 480px) {
  .tk-item__header,
  .tk-learning-item__header,
  .tk-retired-item__name-row {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
}

/* ── Hero sections: reduce padding on mobile ────────────────
   Hero sections use .section internally (which we already
   reduced above), but some hero wrappers add extra padding.  */
@media (max-width: 639px) {
  .about-hero__inner,
  .ach-hero__inner,
  .act-hero__inner,
  .tk-hero__inner,
  .svc-hero__inner,
  .eth-hero__inner,
  .appr-hero__inner,
  .ct-hero__inner {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-base);
  }
}

/* ── Contact form: full-width submit on mobile ───────────────*/
@media (max-width: 639px) {
  .ct-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ── Video embed: always maintain 16:9 ──────────────────────
   Already handled by padding-bottom: 56.25% trick. No change
   needed — this comment confirms intent.                     */

/* ── Misc: section labels on very narrow screens ────────────*/
@media (max-width: 380px) {
  .section-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }
}

/* =============================================================
   CAREER / WORK PAGE — career/index.html
   ============================================================= */

/* ── Hero ────────────────────────────────────────────────── */
.wk-hero {
  background-color: var(--color-bg);
  padding-bottom: 8px;
}
.wk-hero__inner {
  padding-top: var(--space-3xl);
}
.wk-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-sm) 0 var(--space-lg);
}
.wk-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  max-width: 620px;
  margin: 0;
}

/* ── Work section wrappers ───────────────────────────────── */
.wk-projects {
  padding-bottom: 100px;
}
.wk-projects--alt {
  background-color: var(--color-surface);
}
.wk-projects__inner {
  padding-top: var(--space-3xl);
}
.wk-projects__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-sm) 0 var(--space-2xl);
}

/* ── Project cards grid ──────────────────────────────────── */
.work-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 700px) {
  .work-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Single work card ────────────────────────────────────── */
.work-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wk-projects--alt .work-card {
  background-color: var(--color-bg);
}
.work-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.work-card--web {
  border-top-color: #22c55e;
}
.work-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  margin: 0;
}
.work-card--web .work-card__label {
  color: #16a34a;
}
.work-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}
.work-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
  flex: 1;
}
.work-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  width: fit-content;
}
.work-card--web .work-card__metric {
  background-color: #f0fdf4;
  color: #16a34a;
}
.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-card__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* ── Career history on work page ─────────────────────────── */
.wk-history {
  background-color: var(--color-bg);
  padding-bottom: 100px;
}
.wk-history__inner {
  padding-top: var(--space-3xl);
}
.wk-history__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-sm) 0 var(--space-2xl);
}

/* ── Testimonials on work page ───────────────────────────── */
.wk-testimonials {
  background-color: var(--color-surface);
  padding-bottom: 120px;
}
.wk-testimonials__inner {
  padding-top: var(--space-3xl);
}
.wk-testimonials__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-sm) 0 var(--space-2xl);
}
@media (min-width: 900px) {
  .wk-testimonials .testimonial-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================
   PORTFOLIO PAGE — filter + cards
   ============================================================= */

/* ── Portfolio section wrapper ───────────────────────────────── */
.portfolio-section {
  background-color: var(--color-bg);
  padding-bottom: 100px;
}
.portfolio-section__intro {
  /* inherits .section styles — max-width 760px, centred */
  padding-top: var(--space-md);
  padding-bottom: 0;
}
.portfolio-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: var(--space-sm) 0 0;
}

/* ── Sticky filter bar ───────────────────────────────────────── */
.portfolio-filter-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-block: 1rem;
}

/* ── Portfolio grid wrapper (wide layout) ────────────────────── */
.portfolio-grid-wrap {
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-top: var(--space-xl);
}
.portfolio-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.portfolio-filter__btn:hover {
  opacity: 0.88;
}
.portfolio-filter__btn.is-active {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.portfolio-filter__btn[data-filter="all"]      { background-color: #111111; }
.portfolio-filter__btn[data-filter="ai-apps"]  { background-color: #1A56DB; }
.portfolio-filter__btn[data-filter="frontend"] { background-color: #7c3aed; }
.portfolio-filter__btn[data-filter="backend"]  { background-color: #16a34a; }
.portfolio-filter__btn[data-filter="api"]      { background-color: #ea580c; }

/* ── Portfolio grid ──────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 580px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Single portfolio card ───────────────────────────────────── */
.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 370px; /* image 210px + body ~160px — keeps scrollbar stable */
}
.portfolio-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.portfolio-card.is-hidden {
  display: none;
}

/* Category accent border */
.portfolio-card[data-category="ai-apps"]  { border-top: 3px solid #1A56DB; }
.portfolio-card[data-category="frontend"] { border-top: 3px solid #7c3aed; }
.portfolio-card[data-category="backend"]  { border-top: 3px solid #16a34a; }
.portfolio-card[data-category="api"]      { border-top: 3px solid #ea580c; }

/* ── Image + overlaid title ──────────────────────────────────── */
.portfolio-card__image-wrap {
  position: relative;
  height: 210px;
  overflow: hidden;
  flex-shrink: 0;
}
.portfolio-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.04);
}
.portfolio-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 1.125rem 0.875rem;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
}
.portfolio-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  line-height: var(--leading-snug);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

/* ── Card body ───────────────────────────────────────────────── */
.portfolio-card__body {
  padding: 1rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}
.portfolio-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-loose);
  margin: 0;
}