/* ============================================================================
   Dan Temple — Site CSS
   ----------------------------------------------------------------------------
   Component + layout system. Depends on tokens.css.
   Aesthetic: Bjorn — minimalist editorial, sophisticated, understated.
              Warm paper background, near-black ink, single restrained accent.
              Generous whitespace, sans + serif pairing, sharp radii, hairline
              dividers, numbered section markers, hover lifts, animated underlines.
   Conventions:
     - BEM-ish class names: .block, .block__elem, .block--mod
     - Use var(--token); never hard-code colors, radii, durations.
     - Section padding via .section / .section--alt; never bake padding into
       body components.
     - Motion is opt-in via .reveal / [data-parallax]; respects reduced motion.
   ============================================================================ */

/* ============================================================================
   1. Reset & base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-numeric: oldstyle-nums;   /* editorial — old-style figures in body */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

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

hr {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--line);
}

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  z-index: var(--z-toast);
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ============================================================================
   2. Typography (staging.dantemple.co.uk DNA — Google Sans 600 display)
   ----------------------------------------------------------------------------
   Extracted scale: h1 50/600/58, h2 48/600/48, h3 30/600/36, body 16/400/24.
   Display + h1 + h2 + h3 = Google Sans 600 semibold (NOT 700 bold).
   h4, body, UI = Google Sans 400/500. Eyebrows = Google Sans Text.
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--tracking-h);
  font-weight: var(--weight-semi);
  font-family: var(--font-display);
}

/* Display — hero h1 (Google Sans 600 semibold) */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semi);
  color: var(--ink);
  text-transform: none;
}

/* h1 — page titles (staging 50/600/58 +1px tracking) */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

/* h2 — section titles (staging 48/600/48 — tight, lh = fs) */
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

/* h3 — card titles, subsection (staging 30/600/36) */
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

/* h4 — small headings, footer column titles */
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: var(--weight-semi);
  color: var(--ink);
}

p { margin: 0 0 1em; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  font-weight: var(--weight-regular);
}
.lede--center { margin-inline: auto; }

.small { font-size: var(--fs-small); color: var(--ink-3); }

/* Italic emphasis disabled site-wide. */
.t-display em,
.t-h1 em,
.t-h2 em,
.hero__title em,
em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

/* Accent emphasis, single colour bump only, no italic */
.accent-em {
  color: var(--accent);
  font-style: normal;
  font-weight: inherit;
}

/* ----- Eyebrow — mono, uppercase, with leading dash ------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  font-weight: var(--weight-medium);
}
/* Eyebrow leading-dash decoration removed, was unwanted noise */
.eyebrow::before { content: none; }
.eyebrow--center {
  justify-content: center;
}

/* Mono inline label / route label / chip text */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ============================================================================
   3. Layout: container, sections, dividers
   ============================================================================ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--wide  { max-width: var(--container-wide); }
.wrap--tight { max-width: var(--container-tight); }
.wrap--prose { max-width: var(--container-prose); }

.section {
  position: relative;
  padding-block: var(--pad-y);
  background: var(--bg);
}
.section--sm    { padding-block: var(--pad-y-sm); }
.section--panel { background: var(--panel); }
.section--alt   { background: var(--bg-2); }
.section--accent{ background: var(--accent-bg); }
.section--ink   {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(7, 194, 176, 0.08) 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
    var(--surface-dark);
  color: var(--ink-on-dark);
  position: relative;
}
.section--ink p,
.section--ink .lede { color: var(--ink-on-dark-2); }
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--ink-on-dark); }
.section--ink .eyebrow { color: var(--accent); }
.section--ink .eyebrow::before { background: var(--accent); }

/* ============================================================================
   Page hero, dark block applied site-wide. Same treatment as the home
   .stage-hero, but available without page-scoped CSS. Inner pages use this.
   ============================================================================ */
.page-hero {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(7, 194, 176, 0.10) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    var(--surface-dark);
  color: var(--ink-on-dark);
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(64px, 8vw, 112px);
  position: relative;
  overflow: hidden;
}
.page-hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.page-hero__copy { max-width: 800px; }
.page-hero .eyebrow { color: var(--accent); margin-bottom: var(--s-5); }
.page-hero .eyebrow::before { background: var(--accent); }
.page-hero h1 {
  color: var(--ink-on-dark);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: var(--weight-semi);
  margin-bottom: var(--s-5);
}
.page-hero .lede {
  color: var(--ink-on-dark-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 560px;
  margin-bottom: var(--s-7);
}
.page-hero .btn--primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
.page-hero .btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.page-hero .btn--outline {
  background: transparent;
  border-color: var(--ink-on-dark);
  color: var(--ink-on-dark);
}
.page-hero .btn--outline:hover {
  background: var(--ink-on-dark);
  color: var(--ink);
}

/* Hairline divider — gradient line that fades at edges. Care signal. */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule) 12%,
    var(--rule) 88%,
    transparent 100%
  );
}
.hairline--strong {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-strong) 12%,
    var(--rule-strong) 88%,
    transparent 100%
  );
}
.hairline--full { background: var(--rule); }

/* Stack utilities */
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }
.stack-xl > * + * { margin-top: var(--s-9); }

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--s-9);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   4. Texture: full-page grain
   ----------------------------------------------------------------------------
   Subtle SVG noise applied as a fixed overlay. Renders once via .has-grain
   on <body>. ~1.5% opacity — barely visible, but you'd notice if gone.
   ============================================================================ */
.has-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) {
  .has-grain::before { opacity: 0.012; }
}

/* ============================================================================
   5. Header — Bjorn-aligned: logo left, nav right, avail pill, hamburger
   ----------------------------------------------------------------------------
   Sticky on scroll with subtle blur + hairline. Header transitions to a
   slightly more opaque + bordered state past 8px scroll.
   ============================================================================ */
.site-header {
  position: fixed;                      /* staging: fixed-top dark header */
  top: 0; left: 0;
  width: 100%;
  z-index: var(--z-header);
  /* Slightly deeper than --surface-dark so it always reads against the
     dark hero. Adds a subtle bottom hairline + drop shadow so the edge
     is visible regardless of section colour beneath it. */
  background: rgba(4, 12, 12, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  color: var(--ink-on-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  transition:
    background var(--d-slow) var(--ease),
    border-color var(--d-slow) var(--ease),
    box-shadow var(--d-slow) var(--ease),
    padding var(--d-slow) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(4, 12, 12, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}
.site-header .brand,
.site-header .brand__name { color: var(--ink-on-dark); }
.site-header .nav__link { color: var(--ink-on-dark-2); }
.site-header .nav__link:hover { color: var(--ink-on-dark); }
.site-header .nav__link.is-active { color: var(--accent); }
/* Fixed dark header overlays content. Hero/first sections handle top
   clearance via padding. Inner-page first section can use .section--top
   to add header-height top padding. */
.section--top { padding-top: clamp(120px, 16vh, 180px); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
}

/* Brand wordmark — sans display, accent dot. Bjorn uses centred-logo;
   here we put it left for a more practical senior-portfolio feel. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand__name { color: var(--ink); }
.brand__dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-2px);
  transition: transform var(--d-med) var(--ease);
}
.brand:hover .brand__dot { transform: translateY(-2px) scale(1.25); }
.brand:focus-visible { outline-offset: 6px; }

/* Primary nav, horizontal with dropdowns. Sticky-shrinks on scroll. */
.site-header__inner {
  padding-block: 22px;
  transition: padding var(--d-slow) var(--ease);
}
.site-header.is-scrolled .site-header__inner {
  padding-block: 12px;
}

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav__list {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item {
  position: relative;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark-2);
  text-decoration: none;
  padding: 10px 14px;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  transition:
    color var(--d-fast) var(--ease),
    background var(--d-fast) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link {
  color: var(--ink-on-dark);
  background: rgba(255, 255, 255, 0.06);
}
.nav__chev {
  width: 10px;
  height: 10px;
  transition: transform var(--d-fast) var(--ease);
  opacity: 0.7;
}
.nav__item:hover > .nav__link .nav__chev,
.nav__item:focus-within > .nav__link .nav__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown sublist, no gap to parent (padding-top creates the visual gap
   while keeping the hover area continuous so the dropdown doesn't vanish
   when the cursor moves between trigger and panel) */
.nav__sublist {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 8px 8px;       /* 12px bridge above + 8px panel padding */
  margin: 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--d-slow) var(--ease),
    transform var(--d-slow) var(--ease),
    visibility 0s linear var(--d-slow);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
  z-index: 50;
}
/* Invisible hover bridge above the panel, kills the hover-gap dead-zone */
.nav__sublist::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0; right: 0;
  height: 14px;
}
.nav__item:hover > .nav__sublist,
.nav__item:focus-within > .nav__sublist {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--d-slow) var(--ease),
    transform var(--d-slow) var(--ease),
    visibility 0s linear 0s;
}
.nav__sublist a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-on-dark-2);
  text-decoration: none;
  transition:
    background var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}
.nav__sublist a:hover,
.nav__sublist a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  outline: none;
}
.nav__sublist a small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.12em;
  color: var(--ink-on-dark-3);
  margin-top: 2px;
  font-weight: var(--weight-regular);
}

/* Menu/Contact pill on dark header, no avail dot */
.contact-pill {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 18px;
  margin-left: var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  text-decoration: none;
  transition:
    border-color var(--d-fast) var(--ease),
    background var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
  text-transform: none;
  letter-spacing: 0.08em;
}
.contact-pill:hover {
  border-color: var(--ink-on-dark);
  color: var(--ink);
  background: var(--ink-on-dark);
}
/* Hide legacy avail dot if still in markup */
.contact-pill__avail { display: none; }
.contact-pill__label {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
}
@media (min-width: 1100px) {
  .nav, .contact-pill { display: inline-flex; }
}

/* Mobile nav toggle — minimal hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.nav-toggle__bars {
  position: relative;
  width: 16px; height: 10px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-med) var(--ease), top var(--d-med) var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 4px; transform: rotate(-45deg); }
@media (min-width: 920px) { .nav-toggle { display: none; } }

/* Mobile drawer — full screen, big serif links */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--pad-x) var(--s-9);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-med) var(--ease), visibility var(--d-med) var(--ease);
}
.nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
}
.nav-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-10);
}
.nav-drawer__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.nav-drawer__link {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  font-weight: var(--weight-regular);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  transition: color var(--d-fast) var(--ease);
}
.nav-drawer__link:hover {
  color: var(--accent);
  font-style: italic;
}
.nav-drawer__meta {
  margin-top: auto;
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-3);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
}
@media (min-width: 920px) { .nav-drawer { display: none; } }

/* ============================================================================
   6. Buttons & links (staging.dantemple.co.uk DNA — pill buttons)
   ----------------------------------------------------------------------------
   Extracted: button border-radius effectively 9999px (round-pill).
   Padding 12px 24px. Font 14px / 700.
   Reserve filled (.btn--primary) for THE single primary CTA per page.
   ============================================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: var(--weight-bold);     /* staging button 700 */
  padding: 14px 26px;                  /* staging 12px 24px — slightly larger */
  border-radius: var(--r-pill);        /* PILL — staging extracted */
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition:
    background var(--d-slow) var(--ease),
    border-color var(--d-slow) var(--ease),
    color var(--d-slow) var(--ease),
    transform var(--d-slow) var(--ease),
    box-shadow var(--d-slow) var(--ease);
}
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform var(--d-med) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Filled — reserved for THE primary CTA on a page (staging: teal pill) */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: var(--on-accent);
}
.btn--primary:active { transform: translateY(1px); }

/* Outlined — secondary CTA (staging: dark border, transparent bg) */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(8, 22, 22, 0.5);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Ghost — text-link styled as button (rarely needed) */
.btn--ghost {
  padding-inline: 0;
  border: 0;
}
.btn--ghost:hover { color: var(--accent); }

/* Text-link — the workhorse. Underlined-by-default with offset. */
.link,
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
  transition:
    color var(--d-fast) var(--ease),
    text-decoration-color var(--d-fast) var(--ease),
    text-decoration-thickness var(--d-fast) var(--ease),
    text-underline-offset var(--d-fast) var(--ease);
}
.link:hover,
.prose a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Arrow link — workhorse for "see more / read more" CTAs */
.link--arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;            /* arrow links use a custom underline */
  position: relative;
  padding-bottom: 4px;
  font-weight: var(--weight-medium);
}
.link--arrow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--d-med) var(--ease);
}
.link--arrow:hover::after {
  transform-origin: right center;
  transform: scaleX(0);
}
.link--arrow .arrow {
  width: 14px; height: 14px;
  transition: transform var(--d-med) var(--ease);
}
.link--arrow:hover {
  color: var(--accent);
  text-decoration-thickness: 1px;   /* prevent inheriting .link hover */
}
.link--arrow:hover .arrow { transform: translateX(5px); }

/* Inverted (on dark) variants */
.section--ink .link,
.section--ink .prose a {
  color: var(--ink-on-dark);
  text-decoration-color: rgba(247, 244, 238, 0.3);
}
.section--ink .link:hover,
.section--ink .prose a:hover {
  color: var(--accent-300);
  text-decoration-color: var(--accent-300);
}

/* ============================================================================
   7. Availability pill (standalone — used inside hero etc.)
   ============================================================================ */
.avail-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.avail-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  animation: avail-pulse 2.6s ease-in-out infinite;
}

/* ============================================================================
   8. Numbered section markers — the big "01" treatment
   ----------------------------------------------------------------------------
   Sits at the top of major sections as a visual divider. Renders huge
   serif numerals with a mono caption beside them, on a hairline above.
   Slides + fades in on reveal.
   ============================================================================ */
/* Section marker, plain semantic heading. The giant numeral pattern was
   weird, replaced with a clean h2 style. The numeral element is hidden
   for backwards compatibility with existing markup. */
.section-marker {
  margin-bottom: clamp(28px, 4vw, 56px);
  position: relative;
}
.section-marker__num {
  display: none;     /* numeral retired */
}
.section-marker__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h);
  text-transform: none;
  font-weight: var(--weight-semi);
  color: var(--ink);
  margin: 0;
}
.section-marker__label::before {
  content: none;
}
.section-marker--center {
  text-align: center;
}

/* ============================================================================
   9. Cards
   ============================================================================ */

/* Generic card — subtle border, hover lift */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-7);
  transition:
    border-color var(--d-med) var(--ease),
    transform var(--d-med) var(--ease),
    box-shadow var(--d-med) var(--ease);
}
.card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* ----- Service tile (numbered, no icon — IA spec) ------------------- */
.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  background: transparent;
  border-top: 1px solid var(--ink);
  padding: var(--s-7) 0 var(--s-8);
  overflow: hidden;
  transition: border-color var(--d-med) var(--ease);
}
.service-tile__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  font-weight: var(--weight-medium);
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.service-tile__num::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.service-tile__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-h);
  color: var(--ink);
  margin-top: var(--s-2);
  transition: color var(--d-med) var(--ease);
}
.service-tile:hover .service-tile__title {
  color: var(--accent);
}
.service-tile__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 38ch;
}
.service-tile__meta {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-transform: none;
}
.service-tile__cta { margin-top: var(--s-4); }

/* ----- Portfolio card — image-dominant with hover overlay ---------- */
.portfolio-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    transform var(--d-med) var(--ease),
    box-shadow var(--d-med) var(--ease);
}
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.portfolio-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bg-2), var(--panel));
  overflow: hidden;
}
.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-xslow) var(--ease), filter var(--d-med) var(--ease);
  filter: saturate(0.85) brightness(0.97);
}
.portfolio-card:hover .portfolio-card__img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--s-5);
  background: linear-gradient(to top, rgba(14,14,12,0.45) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--d-med) var(--ease);
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }
.portfolio-card__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  font-weight: var(--weight-medium);
}
.portfolio-card__body {
  padding: var(--s-5) 0 var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.portfolio-card__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-h);
  color: var(--ink);
}
.portfolio-card:hover .portfolio-card__title { color: var(--accent); }
.portfolio-card__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
}
.portfolio-card__tag + .portfolio-card__tag::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--ink-4);
}

/* ----- Work row (typographic alternating image/text) --------------- */
.work-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule);
}
.work-row:last-child { border-bottom: 0; }
@media (min-width: 800px) {
  .work-row {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    padding-block: var(--s-12);
  }
  .work-row--reverse .work-row__media { order: 2; }
}
.work-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.work-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-xslow) var(--ease);
}
.work-row:hover .work-row__img { transform: scale(1.03); }
.work-row__chip {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.work-row__body {
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.work-row__client {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  display: inline-flex;
  gap: var(--s-3);
  align-items: center;
}
.work-row__client span + span::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--ink-4);
}
.work-row__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-h);
  color: var(--ink);
}
.work-row__excerpt {
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 50ch;
}
.work-row__metrics {
  display: flex; flex-wrap: wrap;
  gap: var(--s-7);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.work-row__metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.work-row__metric span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-transform: none;
}

/* ----- Blog card --------------------------------------------------- */
.blog-card {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.blog-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  text-transform: none;
  display: inline-flex;
  gap: var(--s-3);
  align-items: center;
}
.blog-card__meta span + span::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--ink-4);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-h);
  color: var(--ink);
  transition: color var(--d-fast) var(--ease);
}
.blog-card a:hover .blog-card__title { color: var(--accent); }
.blog-card__excerpt { color: var(--ink-2); }
.blog-card a {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
}

/* ----- How-to card ------------------------------------------------- */
.howto-card {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7);
  background: var(--bg-pure);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition:
    border-color var(--d-med) var(--ease),
    transform var(--d-med) var(--ease),
    box-shadow var(--d-med) var(--ease);
}
.howto-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.howto-card__chips {
  display: inline-flex; gap: var(--s-2); flex-wrap: wrap;
}
.howto-card__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
}
.howto-card__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  font-weight: var(--weight-regular);
  color: var(--ink);
}

/* ============================================================================
   10. Pull-quote — editorial-weight blockquote
   ============================================================================ */
.pull-quote {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
}
.pull-quote__mark {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: var(--s-7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.pull-quote__mark::before,
.pull-quote__mark::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.pull-quote blockquote {
  margin: 0 0 var(--s-7);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pull-quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  font-weight: var(--weight-medium);
}
.pull-quote figcaption strong {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* ============================================================================
   11. Stats strip
   ============================================================================ */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  max-width: 640px;
}
@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
}
.stats__item { margin: 0; }
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--weight-regular);
  color: var(--ink);
  margin: 0 0 var(--s-2);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stats__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ============================================================================
   12. CTA band
   ============================================================================ */
.cta-band {
  position: relative;
  padding-block: clamp(80px, 10vw, 144px);
  background: var(--ink);
  color: var(--ink-on-dark);
  overflow: hidden;
}
.cta-band--paper {
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  align-items: end;
}
@media (min-width: 800px) {
  .cta-band__inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-11); }
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  max-width: 18ch;
  color: inherit;
}
.cta-band__details {
  display: grid; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: inherit;
  text-transform: none;
  letter-spacing: var(--tracking-eyebrow);
}
.cta-band__details a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(247, 244, 238, 0.3);
  text-underline-offset: 5px;
  transition: color var(--d-fast) var(--ease), text-decoration-color var(--d-fast) var(--ease);
}
.cta-band--paper .cta-band__details a {
  text-decoration-color: var(--rule-strong);
}
.cta-band__details a:hover {
  color: var(--accent-300);
  text-decoration-color: var(--accent-300);
}
.cta-band--paper .cta-band__details a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.cta-band__actions {
  display: inline-flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-7);
}

/* Inverted button colours when CTA band is dark */
.cta-band:not(.cta-band--paper) .btn--primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
.cta-band:not(.cta-band--paper) .btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.cta-band:not(.cta-band--paper) .btn--outline {
  border-color: var(--bg);
  color: var(--bg);
}
.cta-band:not(.cta-band--paper) .btn--outline:hover {
  background: var(--bg);
  color: var(--ink);
}

/* ============================================================================
   13. Trust strip (logos)
   ============================================================================ */
.trust {
  padding-block: clamp(56px, 7vw, 96px);
  border-block: 1px solid var(--rule);
  background: var(--bg);
}
.trust__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  margin: 0 0 var(--s-8);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  justify-content: center;
}
.trust__label::before,
.trust__label::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--rule-strong);
}
.trust__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(36px, 6vw, 72px);
}
.trust__logo {
  color: var(--ink);
  opacity: 0.5;
  filter: grayscale(1);
  transition:
    opacity var(--d-med) var(--ease),
    filter var(--d-med) var(--ease),
    transform var(--d-med) var(--ease);
}
.trust__logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}
.trust__logo svg { height: 30px; width: auto; display: block; fill: currentColor; }
.trust__logo svg path { fill: currentColor; }
.trust__logo--lg svg { height: 38px; }
.trust__logo--sm svg { height: 24px; }

/* ============================================================================
   14. Forms — careful focus rings, generous fields
   ============================================================================ */
.field {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--ink-3);
  font-weight: var(--weight-medium);
}
.field__input,
.field__textarea {
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-pure);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition:
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}
.field__textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-3); }
.field__input:focus,
.field__textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field__hint {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* ============================================================================
   15. Footer — practical, clean, contact-first
   ============================================================================ */
/* Pure black footer, white text. All inner colours derive from
   --ink-on-dark scale so contrast holds. */
.site-footer {
  position: relative;
  padding-block: clamp(80px, 8vw, 120px) clamp(28px, 3vw, 40px);
  background: var(--surface-darker);
  color: var(--ink-on-dark-2);
  font-size: var(--fs-small);
  border-top: 0;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--ink-on-dark);
}
.site-footer p { color: var(--ink-on-dark-2); }
.site-footer a { color: var(--ink-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  margin-bottom: var(--s-10);
}
@media (min-width: 800px) {
  .site-footer__cols {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
  }
}

.site-footer__col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--ink-on-dark);
  font-weight: var(--weight-semi);
  margin: 0 0 var(--s-5);
}

.site-footer__pitch {
  color: var(--ink-on-dark);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.5;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-h);
  max-width: 32ch;
  margin: var(--s-3) 0 0;
}
.site-footer__pitch + p {
  color: var(--ink-on-dark-2);
  margin-top: var(--s-3);
  max-width: 36ch;
  font-size: var(--fs-body-sm);
}

.site-footer__contact {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.site-footer__contact a {
  color: var(--ink-on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 5px;
  transition: color var(--d-fast) var(--ease), text-decoration-color var(--d-fast) var(--ease);
}
.site-footer__contact a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.site-footer__nav,
.site-footer__util {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.site-footer__nav a,
.site-footer__util a {
  color: var(--ink-on-dark-2);
  text-decoration: none;
  position: relative;
  display: inline-flex; align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  transition: color var(--d-fast) var(--ease);
}
.site-footer__nav a:hover,
.site-footer__util a:hover { color: var(--accent); }

.site-footer__finep {
  display: flex; flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: var(--fs-mono);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-on-dark-3);
}
.site-footer__finep .left,
.site-footer__finep .right {
  display: inline-flex; gap: var(--s-5); flex-wrap: wrap; align-items: center;
}
.site-footer__finep a {
  color: var(--ink-on-dark-3);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.site-footer__finep a:hover { color: var(--ink-on-dark); }

.back-to-top {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.back-to-top:hover { color: var(--ink); }
.back-to-top__arrow {
  display: inline-block;
  transition: transform var(--d-med) var(--ease);
}
.back-to-top:hover .back-to-top__arrow { transform: translateY(-3px); }

/* ============================================================================
   16. Reveal motion (opt-in)
   ----------------------------------------------------------------------------
   Add .reveal to anything you want to fade+rise into view. JS toggles
   .is-visible. Stagger by adding .reveal-delay-1, -2, -3 to children.
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--d-slow) var(--ease),
    transform var(--d-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none !important;
    transition: opacity var(--d-slow) ease !important;
  }
}

/* ============================================================================
   17. Parallax (decorative only — never on body content)
   ============================================================================ */
[data-parallax] {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}

/* ============================================================================
   18. Hero — Bjorn-aligned: full-bleed, photo-led split or centred type
   ----------------------------------------------------------------------------
   Default: photo right + intro text left (Bjorn variant b). Pages can
   extend with .hero--centered or .hero--full for type-only treatments.
   ============================================================================ */
/* All page-level hero variants adopt the dark page-hero treatment.
   Covers .hero, .work-hero, .case-hero, .howto-hero, .article-header. */
.work-hero,
.case-hero,
.howto-hero,
.article-header {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(7, 194, 176, 0.10) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    var(--surface-dark) !important;
  color: var(--ink-on-dark) !important;
  padding-block: clamp(140px, 18vh, 200px) clamp(56px, 7vw, 96px) !important;
}
.work-hero h1, .work-hero h2, .work-hero p,
.case-hero h1, .case-hero h2, .case-hero p,
.howto-hero h1, .howto-hero h2, .howto-hero p,
.article-header h1, .article-header h2, .article-header p {
  color: var(--ink-on-dark) !important;
}
.work-hero .lede, .case-hero .lede, .howto-hero .lede, .article-header .lede,
.work-hero .meta, .case-hero .meta, .howto-hero .meta, .article-header .meta {
  color: var(--ink-on-dark-2) !important;
}
.work-hero .eyebrow, .case-hero .eyebrow,
.howto-hero .eyebrow, .article-header .eyebrow { color: var(--accent) !important; }
.work-hero .eyebrow::before, .case-hero .eyebrow::before,
.howto-hero .eyebrow::before, .article-header .eyebrow::before { background: var(--accent) !important; }

/* All .hero blocks adopt the dark page-hero treatment site-wide.
   Inner pages keep their existing markup; just dark-up via the cascade. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(140px, 18vh, 200px) clamp(64px, 8vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(7, 194, 176, 0.10) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    var(--surface-dark);
  color: var(--ink-on-dark);
}
.hero--split {
  padding-bottom: clamp(56px, 7vw, 96px);
}
.hero--centered { text-align: center; }
.hero--centered .lede { margin-inline: auto; }

.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: transparent;
}
.hero h1, .hero h2, .hero h3, .hero h4 { color: var(--ink-on-dark); }
.hero p, .hero .lede { color: var(--ink-on-dark-2); }
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }
.hero .btn--primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
.hero .btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.hero .btn--outline {
  background: transparent;
  border-color: var(--ink-on-dark);
  color: var(--ink-on-dark);
}
.hero .btn--outline:hover {
  background: var(--ink-on-dark);
  color: var(--ink);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero--split .hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.hero__copy { max-width: 640px; }
.hero__title {
  margin: var(--s-5) 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: var(--weight-semi);
  color: var(--ink-on-dark);
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--ink-on-dark);
}
.hero__title .accent-em {
  color: var(--accent);
  font-style: normal;
}
.hero__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-on-dark-2);
  margin: 0 0 var(--s-7);
  max-width: 60ch;
}
.hero__ctas {
  display: inline-flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
  align-items: center;
}

/* Hero portrait — square or 4:5, paper-toned border */
.hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 520px;
  margin-inline: auto;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Caption overlay — mono micro-label bottom-left */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,14,12,0.18) 0%, transparent 35%);
  pointer-events: none;
}
.hero__portrait-caption {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--bg);
  font-weight: var(--weight-medium);
}
.hero__portrait-caption::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================================
   19. About strip — for inline portrait + bio rows
   ============================================================================ */
.about-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 800px) {
  .about-strip { grid-template-columns: 1fr 1.3fr; }
}
.about-strip__media {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 440px;
}
.about-strip__media img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================================
   20. Focus styles — branded, never browser default
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.btn:focus-visible {
  outline-offset: 4px;
}
.brand:focus-visible,
.nav__link:focus-visible {
  outline-offset: 6px;
}

/* ============================================================================
   21. Reduced motion safety net
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   22. Print
   ============================================================================ */
@media print {
  .site-header, .site-footer, .nav-drawer, .has-grain::before,
  .cta-band, [data-parallax] { display: none !important; }
  body { background: white; color: black; }
  .section { padding-block: 24px; }
}