/* ==========================================================================
   TK10922 — SEO Portfolio
   Design system: "Stark Light Minimal" (2026)
   Rules: no shadows, no bordered cards, hairline rules only, sharp corners,
          oversized tight display type, monospace for all metadata/data.
   Fonts: Inter Tight (display + body) + JetBrains Mono (metadata) — 2 families.
   Motion: transform/opacity only. See /assets/js/main.js.
   ========================================================================== */

:root{
  /* Palette */
  --bg:            #fafaf8;
  --bg-alt:        #f1f1ee;
  --surface:       #ffffff;
  --ink:           #0c0c0d;
  --ink-soft:      #46474c;
  --ink-faint:     #6b6c74;
  --accent:        #0038ff;
  --accent-dark:   #0028bd;
  --accent-soft:   #dfe6ff;
  --line:          rgba(12, 12, 13, 0.14);
  --line-strong:   rgba(12, 12, 13, 0.30);
  --on-dark:       #f4f4f2;
  --on-dark-soft:  rgba(244, 244, 242, 0.62);
  --on-dark-line:  rgba(244, 244, 242, 0.18);

  /* Type */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --step-mono: 0.72rem;
  --step-sm: 0.875rem;
  --step-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --step-md: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --step-lg: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --step-xl: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  --step-title: clamp(1.9rem, 1.3rem + 3.2vw, 3.1rem);
  --step-hero: clamp(2.6rem, 1rem + 6.2vw, 5.6rem);
  --step-stat: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);

  /* Layout */
  --container: 1280px;
  --container-narrow: 720px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 400ms;
  --dur-slow: 750ms;
}

/* ------------------------------- Reset --------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The off-canvas mobile nav is `position:fixed; transform:translateX(100%)`
     when closed — Chromium still counts its post-transform box toward the
     document's scrollable width, which otherwise creates real (if invisible)
     horizontal scroll on every mobile viewport. Confirmed via automated
     viewport testing, not theoretical — don't remove this. */
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video{ max-width: 100%; display: block; }
img{ height: auto; }
a{ color: inherit; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
[hidden]{ display: none !important; }

h1, h2, h3, h4{
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* Page-title size everywhere by default; the homepage hero opts into the full
   billboard scale below. Long, keyword-rich H1s (case studies, guides) wrap
   to 5-6 lines on mobile at the hero scale — this is the fix, not a media query. */
h1{ font-size: var(--step-title); font-weight: 600; }
h2{ font-size: var(--step-xl); }
h3{ font-size: var(--step-md); letter-spacing: -0.02em; line-height: 1.2; }

.accent{ color: var(--accent); }

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.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;
}

.skip-link{
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75em 1.25em;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: 0; }

/* ------------------------------ Layout ---------------------------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding-block: clamp(4rem, 7vw, 8rem); }
.section--alt{ background: var(--bg-alt); }
.section--ink{ background: var(--ink); color: var(--on-dark); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4{ color: var(--on-dark); }
.section--ink p{ color: var(--on-dark-soft); }

.section-head{
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Monospace metadata label — the workhorse of this design system */
.eyebrow{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5em;
}
.section--ink .eyebrow{ color: var(--on-dark-soft); }

.lede{
  font-size: var(--step-md);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
  letter-spacing: -0.01em;
}
.section--ink .lede{ color: var(--on-dark-soft); }

.grid{ display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ------------------------------- Header --------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{ border-bottom-color: var(--line); }
.site-header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}
.brand{
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand__mark{ color: var(--ink); }
.brand__role{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--step-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: none;
}
@media (min-width: 620px){ .brand__role{ display: inline; } }

.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
}
.nav-toggle svg{ width: 18px; height: 18px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

.site-nav{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.site-nav__links{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav__links a{
  position: relative;
  text-decoration: none;
  padding-block: 0.4em;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__links a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"]{ color: var(--ink); }
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after{ transform: scaleX(1); }

/* ------------------------------- Buttons -------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 1.75em;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--ink); color: var(--bg); }
.btn--primary:hover{ background: var(--accent); }
.btn--ghost{ border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover{ border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn--on-dark{ background: var(--on-dark); color: var(--ink); }
.btn--on-dark:hover{ background: var(--accent); color: #fff; }
.btn--sm{ padding: 0.75em 1.25em; }
.btn--block{ width: 100%; }

/* Mobile nav */
@media (max-width: 899px){
  .nav-toggle{ display: inline-flex; }
  .site-nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    height: 100vh;
    background: var(--bg);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem;
    gap: 2.5rem;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease);
  }
  .site-nav.is-open{ transform: translateX(0); }
  .site-nav__links{
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    font-size: 0.85rem;
  }
  .nav-scrim{
    position: fixed; inset: 0;
    background: rgba(12,12,13,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease);
    z-index: 99;
  }
  .nav-scrim.is-open{ opacity: 1; pointer-events: auto; }
}
@media (min-width: 900px){
  .nav-toggle{ display: none; }
  .nav-scrim{ display: none; }
}

/* -------------------------------- Hero ----------------------------------- */
.hero{
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 5vw, 5rem);
}
.hero h1{
  font-size: var(--step-hero);
  max-width: 18ch;
  margin-bottom: 0.6em;
}
.hero .lede{ max-width: 52ch; margin-bottom: 2.5rem; }
.hero__ctas{ display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Stat row — hairline dividers, no boxes */
.hero__proof{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--ink);
}
.proof-stat{
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
.proof-stat:last-child{ border-bottom: 0; }
/* Vertical dividers only once the stats actually sit side by side. */
@media (min-width: 640px){
  .proof-stat{
    padding: 1.75rem 1.5rem 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .proof-stat:first-child{ padding-left: 0; }
  .proof-stat:last-child{ border-right: 0; }
}
.proof-stat__num{
  display: block;
  font-size: var(--step-stat);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5em;
  font-variant-numeric: tabular-nums;
}
.proof-stat__label{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 22ch;
  line-height: 1.5;
}

/* ------------------------------- Marquee ---------------------------------- */
.marquee{
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
  display: flex;
  user-select: none;
}
.marquee__track{
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
  min-width: 100%;
  animation: marquee-scroll 42s linear infinite;
}
.marquee__item{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.marquee__item::after{
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  flex-shrink: 0;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* --------------------------- Reveal animation ---------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-group > *{ transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .reveal-group > *{ transition-delay: 0ms; }
}

/* IMPORTANT: the hero H1 is the LCP element — never give it .reveal. */
.reveal-soft{
  opacity: 0;
  animation: soft-in var(--dur-slow) var(--ease) forwards;
}
@keyframes soft-in{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .reveal-soft{ animation: none; opacity: 1; }
}

/* -------------------------------- Cards ---------------------------------- */
/* No borders, no shadows — a hairline rule on top and generous space. */
.card{
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.card::before{
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease);
}
.card:hover::before{ width: 100%; }
.card:hover{ transform: translateY(-3px); }
/* Dark-section card overrides. These need the two-class selector to outrank
   `.card p` / `.card h3` — a bare `.section--ink p` ties on specificity and
   loses on source order, which is what once painted dark text on black here. */
.section--ink .card{ border-top-color: var(--on-dark-line); }
.section--ink .card p{ color: var(--on-dark-soft); }
.section--ink .card h3{ color: var(--on-dark); }
.card__icon{
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.section--ink .card__icon{ color: var(--on-dark); }
.card h3{ margin-bottom: 0.6em; }
.card p{ color: var(--ink-soft); font-size: var(--step-sm); line-height: 1.6; }
.card__link{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.1em;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  /* Symmetric padding, not just padding-bottom — measured at 23px tap-height
     (under the 24px accessibility floor) before this. These are primary card
     CTAs, not inline text links, so they don't get the WCAG inline exception. */
  padding: 0.6em 0;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card__link:hover{ color: var(--accent); border-color: var(--accent); }
.card__link svg{ width: 0.9em; height: 0.9em; transition: transform var(--dur-fast) var(--ease); }
.card__link:hover svg{ transform: translateX(4px); }
.section--ink .card__link{ color: var(--on-dark); border-color: var(--on-dark-line); }
.section--ink .card__link:hover{ color: #fff; border-color: var(--on-dark); }

/* ------------------------------ Case cards -------------------------------- */
.case-card{
  display: grid;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease);
}
@media (min-width: 800px){ .case-card{ grid-template-columns: 1fr 0.85fr; align-items: start; } }
.case-card:hover{ transform: translateY(-3px); }
.case-card__tag{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.75em;
}
.case-card__metric{
  font-size: var(--step-lg);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------- Testimonial -------------------------------- */
.testimonial{
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.testimonial blockquote{
  font-size: var(--step-md);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 1.5em;
  color: var(--ink);
}
.testimonial figcaption{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.testimonial figcaption strong{ color: var(--ink); display: block; font-weight: 500; margin-bottom: 0.4em; }

/* --------------------------- Media placeholder ---------------------------- */
.media-placeholder{
  position: relative;
  width: 100%;
  background: var(--bg-alt);
  border: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-faint);
  padding: 1.5rem;
}
.media-placeholder__label{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.media-placeholder--portrait{ aspect-ratio: 4 / 5; max-width: 380px; }
.media-placeholder--wide{ aspect-ratio: 16 / 9; }
.media-placeholder--screenshot{ aspect-ratio: 16 / 10; }
.media-placeholder--square{ aspect-ratio: 1 / 1; }

.portrait-photo{
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-alt);
}

/* --------------------------------- FAQ ------------------------------------ */
.faq-item{
  border-bottom: 1px solid var(--line);
  padding-block: 1.5rem;
}
.faq-item:first-of-type{ border-top: 1px solid var(--line); }
.faq-item summary{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  font-size: var(--step-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{
  color: var(--ink-soft);
  margin-top: 1rem;
  max-width: 64ch;
  font-size: var(--step-sm);
  line-height: 1.65;
}

/* ------------------------------ Breadcrumbs -------------------------------- */
.breadcrumbs{
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; }
.breadcrumbs a{ text-decoration: none; color: var(--ink-faint); transition: color var(--dur-fast) var(--ease); }
.breadcrumbs a:hover{ color: var(--accent); }
.breadcrumbs li:not(:last-child)::after{ content: "/"; margin-left: 0.6em; color: var(--line-strong); }
.breadcrumbs [aria-current="page"]{ color: var(--ink); }

/* -------------------------------- Tables ----------------------------------- */
.data-table{ width: 100%; border-collapse: collapse; font-size: var(--step-sm); }
.data-table caption{ text-align: left; font-weight: 500; margin-bottom: 1rem; }
.data-table th, .data-table td{ text-align: left; padding: 1.1em 1.5em 1.1em 0; border-bottom: 1px solid var(--line); }
.data-table th{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--step-mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom-color: var(--ink);
}
.data-table td{ color: var(--ink-soft); }
.data-table td:first-child{ color: var(--ink); font-weight: 500; }
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------- Prose ------------------------------------ */
.prose{ max-width: 68ch; }
.prose h2{ font-size: var(--step-lg); margin-top: 2.5em; margin-bottom: 0.7em; }
.prose h3{ font-size: var(--step-md); margin-top: 2em; margin-bottom: 0.5em; }
.prose p{ color: var(--ink-soft); margin-bottom: 1.4em; line-height: 1.7; }
.prose ul, .prose ol{ margin-bottom: 1.4em; padding-left: 1.4em; color: var(--ink-soft); line-height: 1.7; }
.prose ul{ list-style: none; padding-left: 0; }
.prose ul li{ padding-left: 1.5rem; position: relative; }
.prose ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 1px;
  background: var(--accent);
}
.prose ol{ list-style: none; counter-reset: prose-counter; padding-left: 0; }
.prose ol li{ counter-increment: prose-counter; padding-left: 2.75rem; position: relative; }
.prose ol li::before{
  content: "(" counter(prose-counter, decimal-leading-zero) ")";
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--accent);
}
.prose li{ margin-bottom: 0.85em; }
.prose blockquote{
  border-left: 1px solid var(--accent);
  padding-left: 1.5em;
  color: var(--ink-soft);
  margin: 2em 0;
}
.prose strong{ color: var(--ink); font-weight: 600; }
.prose a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: border-color var(--dur-fast) var(--ease); }
.prose a:hover{ border-color: var(--accent); }
.article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 2rem;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* ------------------------------ Contact rows -------------------------------- */
.contact-list{ border-top: 1px solid var(--ink); }
.contact-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-row__label{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-row__value{
  font-size: var(--step-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
a.contact-row__value{ transition: color var(--dur-fast) var(--ease); }
a.contact-row__value:hover{ color: var(--accent); }

/* -------------------------------- Forms ------------------------------------ */
.form-field{ margin-bottom: 2rem; }
.form-field label{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.75em;
}
.form-field .hint{
  display: block;
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin-top: 0.6em;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.form-field input,
.form-field textarea,
.form-field select{
  width: 100%;
  padding: 0.9em 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  font-size: var(--step-base);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  border-bottom-color: var(--accent);
  outline: none;
}
.form-field textarea{ resize: vertical; min-height: 8rem; }
.form-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status{
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.form-status[data-state="success"]{ color: #0f7a3d; }
.form-status[data-state="error"]{ color: #c02626; }

/* -------------------------------- Footer ------------------------------------ */
.site-footer{
  background: var(--ink);
  color: var(--on-dark-soft);
  padding-block: clamp(4rem, 6vw, 6rem) 2.5rem;
}
.site-footer a{ color: var(--on-dark-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover{ color: var(--on-dark); }
.footer-grid{
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--on-dark-line);
}
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand{
  font-size: var(--step-md);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.footer-tag{ margin-top: 1em; color: var(--on-dark-soft); max-width: 30ch; font-size: var(--step-sm); line-height: 1.6; }
.footer-col h4{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(244,244,242,0.4);
  margin-bottom: 1.5rem;
}
.footer-col li{ margin-bottom: 0.9em; font-size: var(--step-sm); }
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,244,242,0.4);
}

/* -------------------------------- Utilities ---------------------------------- */
.center-text{ text-align: center; margin-inline: auto; }
.mt-0{ margin-top: 0 !important; }
.flow-tight > * + *{ margin-top: 0.75rem; }
.tag-list{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5em 0.9em;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.cta-banner{
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-banner h2{ color: var(--on-dark); font-size: var(--step-lg); max-width: 20ch; }
.cta-banner p{ color: var(--on-dark-soft); margin-top: 0.75em; max-width: 44ch; font-size: var(--step-sm); }
/* :not(.btn) so this doesn't outrank .btn--on-dark's own color (0,1,1 beats
   0,1,0) and paint a button's text the same off-white as its background. */
.cta-banner a:not(.btn){ color: var(--on-dark); }

/* Obstacle/fix callout used in case studies */
.callout{
  border-left: 1px solid var(--accent);
  background: var(--bg-alt);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
}
.callout h4{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1em;
  color: var(--accent);
}
.callout p{ margin: 0; color: var(--ink-soft); font-size: var(--step-sm); line-height: 1.7; }

/* 404 */
.error-page{
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding-block: 5rem;
}
.error-page__code{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* Small monospace note text */
.chat-note{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* -------------------------- Scroll progress bar ------------------------------ */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display: none; }
}

/* ------------------------------- Data charts ---------------------------------- */
/* Built only from real, disclosed figures — see CLAUDE.md. */
.chart-card{
  background: var(--bg-alt);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
}
.section--alt .chart-card{ background: var(--surface); }
.chart-card--compact{ padding: 1.5rem; }
/* Two-class selector so these survive `.prose p` when a chart sits inside prose. */
:is(.chart-card, .diagram-card) .chart-card__title{
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.75rem;
}
.chart-card svg{ width: 100%; height: auto; overflow: visible; display: block; }
:is(.chart-card, .diagram-card) .chart-card__note{
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.chart-bar{
  transform: scaleY(0);
  transform-origin: bottom;
  transform-box: fill-box;
  transition: transform 900ms var(--ease);
}
.chart-card.is-visible .chart-bar{ transform: scaleY(1); }
.chart-card .chart-bar:nth-of-type(2){ transition-delay: 160ms; }
.chart-value{
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 500ms var(--ease) 650ms;
}
.chart-card.is-visible .chart-value{ opacity: 1; }
.chart-label{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
.chart-baseline{ stroke: var(--line-strong); stroke-width: 1; }
@media (prefers-reduced-motion: reduce){
  .chart-bar{ transform: scaleY(1); transition: none; }
  .chart-value{ opacity: 1; transition: none; }
}

/* Simple before/after schematic diagram (non-numeric, illustrative) */
.diagram-card{
  background: var(--bg-alt);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
}
.section--alt .diagram-card{ background: var(--surface); }
.diagram-card svg{ width: 100%; height: auto; display: block; }
.diagram-node{ fill: none; stroke: var(--line-strong); stroke-width: 1; }
.diagram-node--dim{ fill: none; stroke-dasharray: 3 3; stroke: var(--line-strong); stroke-width: 1; opacity: 0.7; }
.diagram-node--merged{ fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.diagram-label{ font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; fill: var(--ink-soft); }
.diagram-heading{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}
.diagram-link{ stroke: var(--line-strong); stroke-width: 1; fill: none; }
.diagram-link--new{ stroke: var(--accent); }