/* ==========================================================================
   AyzalSoft — site stylesheet
   Depends on tokens.css. Ordered: reset → base → layout → typography →
   components → page blocks → utilities → responsive → motion/print.
   ========================================================================== */

/* ==========================================================================
   1. Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

a:hover {
  color: var(--color-accent-hover);
}

::selection {
  background: var(--color-selection);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.page > main {
  flex: 1;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--raised {
  background: var(--color-bg-raised);
  border-top: var(--hairline) solid var(--color-border-subtle);
}

.section--bordered {
  border-top: var(--hairline) solid var(--color-border-subtle);
  border-bottom: var(--hairline) solid var(--color-border-subtle);
}

.section--tight {
  padding-block: var(--space-19);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

/* Vertical flow primitives — one gap declaration instead of a margin per child. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-3); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-9); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

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

/* auto-fit tracks with a min() floor so a single column never overflows */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--platforms { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }

/* ==========================================================================
   3. Typography
   ========================================================================== */

.kicker {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.kicker--lg {
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
}

.kicker--muted {
  color: var(--color-text-muted);
}

.title-display {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* Same <em>-marks-the-accent convention as .stat__value and .trust-bar.
   font-style must be reset: Space Grotesk ships no italic, so a browser would
   synthesise an oblique and skew the display face. Packet on Ink is 7.35:1. */
.title-display em {
  font-style: normal;
  color: var(--color-accent);
}

.title-page {
  font-size: var(--text-page-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.title-section {
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.title-sub {
  font-size: var(--text-subheading);
  line-height: var(--leading-tight);
}

.title-rule {
  font-size: var(--text-4xl);
  white-space: nowrap;
}

.title-rule--sm {
  font-size: var(--text-2xl);
}

/* A heading followed by a hairline that fills the remaining width. */
.rule-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.rule-heading::after {
  content: "";
  flex: 1;
  height: var(--hairline);
  background: var(--color-border);
}

.lede {
  max-width: 62ch;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.lede--sm {
  font-size: var(--text-lg);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.prose > p {
  text-wrap: pretty;
}

/* Inter is declared 400-600 in fonts.css, so the UA's default bold (700) would
   clamp to 600 here and only look right by accident — and would jump to a real
   700 in the fallback font before the webfont lands. Pin it to the emphasis
   token instead. Lifting the colour to full Paper is what makes a bolded figure
   actually scan against the secondary-grey body it sits in. */
.prose strong {
  font-weight: var(--weight-emphasis);
  color: var(--color-text);
}

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-faint { color: var(--color-text-faint); }
.text-bright { color: var(--color-text); }
.text-accent { color: var(--color-accent); }

/* Small tracked uppercase line used for tech stacks and captions. */
.meta {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Square-bullet list — the wireframe equivalent of a disc list. */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: 18px;
  list-style-type: square;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.spec-list > li {
  padding-left: 2px;
}

.spec-list--lg {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  gap: 6px;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-on-accent);
}

/* --- Blueprint frame ----------------------------------------------------- */
/* Registration marks at the four corners of a panel, drawn straddling the
   border. Eight hairline gradients on one pseudo-element, so the marks cost
   no extra DOM (the original hand-rolled twelve nested divs per panel). */

.blueprint {
  position: relative;
}

.blueprint::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent));
  background-size:
    1px 11px, 11px 1px,
    1px 11px, 11px 1px,
    1px 11px, 11px 1px,
    1px 11px, 11px 1px;
  background-position:
    left 5px top 0, left 0 top 5px,
    right 5px top 0, right 0 top 5px,
    left 5px bottom 0, left 0 bottom 5px,
    right 5px bottom 0, right 0 bottom 5px;
}

/* --- Panels and cards ---------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius);
}

.panel--strong { border-color: var(--color-border-strong); }
.panel--accent { border-color: var(--color-border-accent); }
.panel--lg { padding: var(--space-10); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius);
  color: inherit;
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

/* Only interactive cards react to the pointer. */
a.card:hover,
a.card:focus-visible {
  border-color: var(--color-border-accent);
  background: var(--color-accent-wash);
  color: inherit;
  transform: translateY(-2px);
}

a.card:active {
  transform: translateY(0);
}

.card--static:hover {
  transform: none;
}

.card--sm {
  gap: var(--space-1);
  padding: 18px 20px;
  font-size: var(--text-sm);
}

.card--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.card__index {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.card__kicker {
  font-family: var(--font-heading);
  font-size: 0.78125rem; /* 12.5px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__title {
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--color-text);
}

.card__title--lg {
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.card__body {
  font-size: 0.90625rem; /* 14.5px */
  line-height: 1.5;
  color: var(--color-text-muted);
}

.card__body--lg {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Pushes itself to the bottom of the card so a row of cards aligns its feet. */
.card__foot {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.card__foot--accent {
  padding-top: var(--space-3);
  font-size: 0.84375rem; /* 13.5px */
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 24px;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-ui);
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

/* The same lift a.card uses, one pixel shallower: a button is a fraction of a
   card's area, and 2px there reads as a jump rather than a response. */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* 3px rather than the global 2px — at 2px the ring cuts across the 4px corner
   radius instead of tracing outside it. */
.btn:focus-visible {
  outline-offset: 3px;
}

.btn--primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-action);
}

.btn--primary:active {
  background: var(--color-action-active);
  border-color: var(--color-action-active);
}

.btn--outline {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--sm {
  padding: 12px 20px;
  font-size: var(--text-base);
}

.btn--lg {
  padding: 16px 34px;
  font-size: var(--text-lg);
}

/* Underlined "more →" link. */
.link-arrow {
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: var(--hairline) solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wider);
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  border-color: var(--color-accent-hover);
}

.link-plain {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
}

/* --- Header and nav ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg-overlay);
  border-bottom: var(--hairline) solid var(--color-border-subtle);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    backdrop-filter: blur(8px);
  }
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  row-gap: var(--space-3);
  padding-block: 14px;
}

/* Brand lockup. Clear space is one packet on all sides (brand rule): at a
   32px lockup the packet is ~5.5px, so 8px of padding clears it. 32px tall
   also keeps the lockup 124px wide — above the 120px floor below which the
   rules call for the mark alone. The <picture> in the markup does that swap
   on narrow viewports, so only one file is ever fetched. */
.nav__brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  padding: 8px 8px 8px 0;
}

.nav__brand img {
  display: block;
  height: 32px;
  width: auto;
}

.nav__brand:focus-visible {
  outline-offset: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  row-gap: var(--space-2);
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 0.90625rem; /* 14.5px */
  letter-spacing: var(--tracking-wide);
}

.nav__link {
  color: var(--color-text-secondary);
  transition: color var(--duration) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
  color: var(--color-accent);
}

/* Current page also gets a non-colour cue. */
.nav__link[aria-current="page"] {
  border-bottom: var(--hairline) solid var(--color-accent);
  padding-bottom: 2px;
}

.nav__cta {
  padding: 9px 18px;
  border-radius: var(--radius);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--weight-ui);
  transition: background-color var(--duration) var(--ease);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  border-top: var(--hairline) solid var(--color-border-subtle);
}

/* Brand block plus link groups. Flex rather than grid so the columns collapse
   by wrapping — the same behaviour the trust bar and nav already use, and it
   needs no breakpoint of its own at any width. */
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10) var(--space-12);
  padding-block: var(--space-12) var(--space-10);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 300px;
}

.site-footer__mark {
  /* 32px tall keeps the lockup at ~124px wide, above the 120px floor below
     which the brand sheet calls for the mark alone.
     align-self is load-bearing: the column stretches its children by default,
     which widens the <img> box and lets the SVG centre itself inside it. */
  align-self: flex-start;
  height: 32px;
  width: auto;
}

.site-footer__statement {
  max-width: 44ch;
  font-size: 0.90625rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 0 1 auto;
  min-width: 116px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.90625rem;
}

/* Footer links sit muted and warm to the accent on interaction — six accent
   links stacked in columns would out-shout the page they close. */
.site-footer__links a {
  color: var(--color-text-muted);
  transition: color var(--duration) var(--ease);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-accent);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* --- Section header (title block + trailing link) ------------------------ */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.section-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Stats --------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--space-6) var(--space-5);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat__value em {
  font-style: normal;
  color: var(--color-accent);
}

.stat__label {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* Inline stat row inside a case card. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  row-gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--color-border);
  border-bottom: var(--hairline) solid var(--color-border);
}

.stat-row .stat__value {
  font-size: var(--text-4xl);
}

.stat-row .stat__label {
  font-size: 0.78125rem;
  color: var(--color-text-faint);
}

/* --- Trust bar ----------------------------------------------------------- */

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  padding-block: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.trust-bar em {
  font-style: normal;
  color: var(--color-accent);
}

/* Items link to the profile they cite. They keep the row's own colour rather
   than the accent — the <em> is what the accent marks here, and recolouring
   the whole item would turn a quiet credential row into three loud links.
   The rule underneath is what declares them clickable. */
.trust-bar a {
  color: inherit;
  padding-bottom: 3px;
  border-bottom: var(--hairline) solid var(--color-border);
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.trust-bar a:hover,
.trust-bar a:focus-visible {
  color: var(--color-accent-hover);
  border-color: currentColor;
}

.trust-bar a:hover em,
.trust-bar a:focus-visible em {
  color: inherit;
}

/* --- Capability list ----------------------------------------------------- */

/* Checked labels rather than cards. Eight bordered cards would carry more
   visual weight than the case study underneath them, which is the opposite of
   the intended reading order — a hairline per row separates them for free.
   The mark is a pseudo-element so the list stays plain text to a screen
   reader, which would otherwise announce a tick before every item. */
.capability {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: var(--hairline) solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-ui);
  color: var(--color-text);
}

.capability::before {
  content: "✓";
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* --- Pull quote ---------------------------------------------------------- */

.pullquote {
  max-width: 34ch;
  margin: 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

/* --- Key/value rows ------------------------------------------------------ */

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: var(--text-base);
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.kv > dt,
.kv > :first-child {
  color: var(--color-text-muted);
}

.kv > dd,
.kv > :last-child {
  margin: 0;
  text-align: right;
  color: var(--color-text);
}

/* A kv row that is itself a link: the label stays neutral, the value takes
   the link colour. */
a.kv > :first-child {
  color: var(--color-text-secondary);
  transition: color var(--duration) var(--ease);
}

a.kv > :last-child {
  color: inherit;
}

a.kv:hover > :first-child {
  color: var(--color-text);
}

/* --- Numbered steps ------------------------------------------------------ */

.steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--color-border);
}

.step__num {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-accent);
}

.step__title {
  margin-bottom: var(--space-1);
  font-size: 1.25rem;
}

.step__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* --- Timeline entries (about) -------------------------------------------- */

.entry-list {
  display: flex;
  flex-direction: column;
}

.entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-5);
  border-bottom: var(--hairline) solid var(--color-border-subtle);
}

.entry:last-child {
  border-bottom: 0;
}

.entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.entry__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
}

.entry__date {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entry__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.entry__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.96875rem; /* 15.5px */
  color: var(--color-text-secondary);
}

/* --- CTA band ------------------------------------------------------------ */

.cta-band > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.cta-band__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cta-band__note {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* A CTA that sits inside a bordered panel rather than spanning a band. */
.cta-band__inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-10);
}

/* ==========================================================================
   5. Page blocks
   ========================================================================== */

/* --- Hero (two-column, asymmetric) --------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.hero--balanced { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; }
.hero--wide { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.hero--bottom { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-14); align-items: end; }

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Symmetric two-up: collapses to one column on its own, no breakpoint needed. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-12);
  align-items: center;
}

.split--top { align-items: start; }
.split--wide-gap { gap: var(--space-12) var(--space-16); }

/* --- Case studies (work) ------------------------------------------------- */

.case {
  border: var(--hairline) solid var(--color-border);
  padding: var(--space-10) var(--space-10) 44px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.case--split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-12);
  padding-bottom: var(--space-10);
}

.case--compact {
  padding: 34px var(--space-8) 36px;
  gap: var(--space-4);
}

.case__title {
  font-size: var(--text-subheading);
  line-height: 1.02;
}

.case__title--sm {
  font-size: clamp(1.5625rem, 3.2vw, 2rem);
  line-height: var(--leading-tight);
}

.case__body {
  font-size: 1.03125rem; /* 16.5px */
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.case__foot {
  margin-top: auto;
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.case__foot--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* Right-hand rail inside a split case; becomes a top border when stacked. */
.case__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: var(--hairline) solid var(--color-border);
}

.case__rail--wide {
  padding-left: var(--space-10);
}

/* --- Price rows (services) ----------------------------------------------- */

.price-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.45fr) minmax(0, 1fr) 140px;
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-top: var(--hairline) solid var(--color-border);
  align-items: start;
}

.price-row:last-child {
  border-bottom: var(--hairline) solid var(--color-border);
}

.price-row__num {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.price-row__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.price-row__title {
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.price-row__desc {
  font-size: 0.96875rem;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.price-row__spec {
  font-size: 0.90625rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}

.price-row__price {
  text-align: right;
}

.price-row__amount {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-none);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.price-row__amount em {
  font-style: normal;
  color: var(--color-accent);
}

.price-row__unit {
  font-size: 0.78125rem;
  color: var(--color-text-faint);
}

/* --- Retainer tiers ------------------------------------------------------ */

.tier__price {
  font-family: var(--font-heading);
  font-size: 2.125rem; /* 34px */
  line-height: var(--leading-none);
  color: var(--color-text);
}

.tier__price small {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* --- Contact ------------------------------------------------------------- */

.email-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-7) var(--space-7);
  border: var(--hairline) solid var(--color-border-accent);
  color: inherit;
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.email-card:hover,
.email-card:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  color: inherit;
}

.email-card__address {
  font-family: var(--font-heading);
  /* Sized so the 26-character address holds one line at desktop widths in
     Space Grotesk; `anywhere` is the fallback for narrow phones. */
  font-size: clamp(1.25rem, 2.5vw, 1.6875rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.hourly__rate {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-accent);
}

.hourly__rate small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Stack grid (about) -------------------------------------------------- */

.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--space-6) var(--space-10);
}

.stack-grid__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.stack-grid__value {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure { max-width: 66ch; }
.measure--wide { max-width: 80ch; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .price-row {
    grid-template-columns: 44px minmax(0, 1.6fr) 130px;
    gap: var(--space-5);
  }

  /* The spec column drops under the description rather than squeezing. */
  .price-row__spec {
    grid-column: 2;
    grid-row: 2;
  }

  .case--split {
    gap: var(--space-8);
  }
}

@media (max-width: 980px) {
  :root {
    --section-y: var(--space-16);
  }

  .hero,
  .hero--balanced,
  .hero--wide,
  .hero--bottom {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .case--split {
    grid-template-columns: 1fr;
  }

  .case__rail {
    padding-left: 0;
    padding-top: var(--space-6);
    border-left: 0;
    border-top: var(--hairline) solid var(--color-border);
  }
}

@media (max-width: 820px) {
  .price-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .price-row__spec {
    grid-column: 2;
    grid-row: auto;
  }

  .price-row__price {
    grid-column: 2;
    text-align: left;
  }

  .case {
    padding: var(--space-8) var(--space-7) var(--space-8);
  }

  .panel--lg {
    padding: var(--space-7);
  }
}

@media (max-width: 620px) {
  :root {
    --gutter: 22px;
    --section-y: var(--space-12);
  }

  .title-rule {
    white-space: normal;
  }

  .step {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .trust-bar {
    gap: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }

  .entry__head {
    flex-direction: column;
    gap: 2px;
  }

  .stat-row {
    gap: var(--space-5);
  }

  .site-footer__grid {
    gap: var(--space-8);
    padding-block: var(--space-10) var(--space-8);
  }
}

@media (max-width: 420px) {
  .nav {
    gap: var(--space-3);
  }

  .nav__links {
    gap: var(--space-3);
    font-size: var(--text-sm);
  }

  .btn {
    width: 100%;
  }

  .cta-band .btn {
    width: auto;
  }
}

/* ==========================================================================
   8. Motion and print
   ========================================================================== */

/* Scroll-linked reveal. Pure progressive enhancement: the default state is
   fully visible, so a browser without view() timelines shows the page exactly
   as before and nothing can strand content at opacity 0. No JavaScript — the
   site ships none, and a reveal is not the reason to start.

   The reduced-motion guard has to be written here rather than relying on the
   global reset below: that reset works by forcing animation-duration to ~0,
   and a scroll-driven animation ignores duration entirely. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 65%;
    }
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* transition-duration above is zeroed, not cancelled — the transform would
     still apply, just instantly. These have to opt out by name. */
  a.card:hover,
  a.card:focus-visible,
  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .cta-band,
  .btn {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .section {
    padding-block: var(--space-6);
  }
}