/* Christoforou Partners — site stylesheet.
   Documented in DESIGN.md, rendered in /_styleguide.html. Keep all three in step. */

@layer reset, tokens, base, layout, components, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, li, h1, h2, h3, h4, dd { overflow-wrap: break-word; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* Brand: these four and nothing else. */
    --forest: #0F251D;
    --copper: #B87333;
    --paper:  #F7F6F3;
    --ink:    #1A1A1A;

    /* Derived on paper (contrast on paper in DESIGN.md). */
    --ink-soft:    color-mix(in srgb, var(--ink) 82%, var(--paper)); /* body  ~9.3:1 */
    --ink-muted:   color-mix(in srgb, var(--ink) 64%, var(--paper)); /* meta  ~5.0:1 */
    --rule:        color-mix(in srgb, var(--ink) 14%, var(--paper)); /* hairlines */
    --rule-strong: color-mix(in srgb, var(--ink) 55%, var(--paper)); /* UI edges ~3.8:1 */

    /* Derived on forest. */
    --paper-soft:     color-mix(in srgb, var(--paper) 78%, var(--forest)); /* ~8.5:1 */
    --paper-muted:    color-mix(in srgb, var(--paper) 62%, var(--forest)); /* ~5.2:1 */
    --rule-on-forest: color-mix(in srgb, var(--paper) 16%, var(--forest));
    --forest-hover:   color-mix(in srgb, var(--forest) 86%, var(--paper));

    /* Type */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --step-display: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem);
    --step-h2:      clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);
    --step-h3:      clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
    --step-lead:    clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
    --step-body:    clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
    --step-small:   0.9375rem;
    --step-label:   0.8125rem;
    --measure: 65ch;

    /* Space */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --gutter:    clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
    --container: 75rem;
    --header-h:  4rem;

    /* Shape */
    --radius-pill:  999px;
    --radius-panel: 12px;
    --radius-input: 8px;

    /* Motion: critically damped, no overshoot. */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-press: 100ms;
    --dur-quick: 160ms;
    --dur-base:  240ms;
    --dur-slow:  320ms;

    /* Layers */
    --z-header: 10;
    --z-skip:   20;
  }

  @media (min-width: 56rem) {
    :root { --header-h: 4.5rem; }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  :root {
    interpolate-size: allow-keywords;
    color-scheme: light;
    scrollbar-color: var(--ink-muted) var(--paper);
    accent-color: var(--forest);
  }

  @media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
  }

  html {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    background: var(--paper);
    color: var(--ink-soft);
  }

  body {
    font-size: var(--step-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 600;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-display); line-height: 1.05; letter-spacing: -0.025em; }
  h2 { font-size: var(--step-h2);      line-height: 1.1;  letter-spacing: -0.02em; }
  h3 { font-size: var(--step-h3);      line-height: 1.25; letter-spacing: -0.015em; }
  h4 { font-size: var(--step-body);    line-height: 1.4;  letter-spacing: -0.01em; }

  p, li, dd { text-wrap: pretty; }
  p { max-width: var(--measure); }

  strong, b { font-weight: 600; color: var(--ink); }

  a {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--rule-strong);
    transition: text-decoration-color var(--dur-quick) var(--ease-out),
                text-decoration-thickness var(--dur-quick) var(--ease-out);
  }
  a:hover { text-decoration-color: currentColor; text-decoration-thickness: 0.12em; }

  :focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--forest); color: var(--paper); }
  input, textarea { caret-color: var(--forest); }

  :target { scroll-margin-top: calc(var(--header-h) + var(--space-l)); }

  time, .tabular { font-variant-numeric: tabular-nums; }

  hr { border: 0; border-top: 1px solid var(--rule); }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: var(--section-y); }
  .section--flush-top { padding-top: 0; }  /* follows a section that already ends with space */
  .section-end { padding-bottom: var(--section-y); }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-m)); }

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

  /* Two columns from 56rem; one column below. */
  .split {
    display: grid;
    gap: var(--split-gap, var(--space-xl));
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 56rem) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: var(--split-align, start); }
  }

  .measure { max-width: var(--measure); }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* Skip link */
  .skip-link {
    position: absolute;
    left: var(--gutter);
    top: var(--space-2xs);
    z-index: var(--z-skip);
    padding: var(--space-2xs) var(--space-s);
    background: var(--forest);
    color: var(--paper);
    border-radius: var(--radius-pill);
    text-decoration: none;
    translate: 0 -200%;
    transition: translate var(--dur-base) var(--ease-out);
  }
  .skip-link:focus-visible { translate: 0 0; outline-color: var(--copper); }

  /* Label: uppercase utility text. Never a kicker above a heading. */
  .label {
    font-size: var(--step-label);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .lead {
    font-size: var(--step-lead);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
    max-width: 34ch;
  }

  .small { font-size: var(--step-small); line-height: 1.5; letter-spacing: 0.005em; }
  .muted { color: var(--ink-muted); }

  /* The copper rule: the brand's signature mark under a primary heading. */
  .rule {
    display: block;
    width: 3.25rem;
    height: 3px;
    background: var(--copper);
    border: 0;
    margin-block: var(--space-m) var(--space-m);
  }

  /* ---------------------------------------------------------- buttons */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 3rem;
    padding: 0 var(--space-m);
    border: 1.5px solid var(--btn-border);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step-small);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-quick) var(--ease-out),
                border-color var(--dur-quick) var(--ease-out),
                color var(--dur-quick) var(--ease-out),
                scale var(--dur-quick) var(--ease-out);
  }
  /* Feedback on press, not on release. */
  .btn:active { scale: 0.98; transition-duration: var(--dur-press); }

  .btn--primary { --btn-bg: var(--forest); --btn-fg: var(--paper); --btn-border: var(--forest); }
  .btn--primary:hover { --btn-bg: var(--forest-hover); --btn-border: var(--forest-hover); }

  .btn--secondary { --btn-fg: var(--ink); --btn-border: var(--rule-strong); }
  .btn--secondary:hover { --btn-border: var(--ink); }

  .btn--on-forest { --btn-bg: var(--paper); --btn-fg: var(--forest); --btn-border: var(--paper); }
  .btn--on-forest:hover { --btn-bg: var(--paper-soft); --btn-border: var(--paper-soft); }

  .btn--small { min-height: 2.75rem; padding-inline: var(--space-s); }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    scale: 1;
  }
  .btn[aria-busy="true"] { cursor: progress; }

  /* Text link with a drawn chevron, for secondary actions. */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    min-height: 2.75rem;
  }
  .link-arrow::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    rotate: 45deg;
    transition: translate var(--dur-base) var(--ease-out);
  }
  .link-arrow:hover::after { translate: 0.2em 0; }
  .link-arrow span {
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--rule-strong);
    transition: text-decoration-color var(--dur-quick) var(--ease-out);
  }
  .link-arrow:hover span { text-decoration-color: currentColor; }

  /* ---------------------------------------------------------- panels */
  .panel {
    border-radius: var(--radius-panel);
    border: 1px solid var(--rule);
    padding: var(--space-l);
  }
  .panel--forest {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper-soft);
  }

  /* Forest band: full-width section on forest. */
  .band--forest {
    background: var(--forest);
    color: var(--paper-soft);
  }

  /* Everything that sits on forest inherits the reversed palette. */
  :is(.panel--forest, .band--forest, .site-footer) {
    --ink-soft: var(--paper-soft);
    --ink-muted: var(--paper-muted);
    --rule: var(--rule-on-forest);
    --rule-strong: var(--paper-muted);
    scrollbar-color: var(--paper-muted) var(--forest);
  }
  :is(.panel--forest, .band--forest, .site-footer) :is(h1, h2, h3, h4, strong, a:not(.btn)) { color: var(--paper); }
  :is(.panel--forest, .band--forest, .site-footer) .btn--secondary { --btn-fg: var(--paper); }
  :is(.panel--forest, .band--forest, .site-footer) .btn--secondary:hover { --btn-border: var(--paper); }
  :is(.panel--forest, .band--forest, .site-footer) :focus-visible { outline-color: var(--paper); }
  :is(.panel--forest, .band--forest, .site-footer) ::selection { background: var(--paper); color: var(--forest); }

  /* ---------------------------------------------------------- header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
  /* Scroll-edge fade instead of a hard border. */
  .site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--space-xs);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 45%, transparent), transparent);
    pointer-events: none;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    height: var(--header-h);
  }

  .site-logo { display: inline-flex; align-items: center; min-height: 2.75rem; flex-shrink: 0; border-radius: 4px; }
  .site-logo img { height: 1.625rem; width: auto; }
  @media (min-width: 56rem) {
    .site-logo img { height: 2rem; }
  }

  .site-nav { display: none; }
  @media (min-width: 56rem) {
    .site-nav { display: flex; align-items: center; gap: var(--space-l); }
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-l);
    list-style: none;
    padding: 0;
  }
  .site-nav__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--step-small);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
  }
  /* Current page: a short copper rule under the label. */
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    width: 100%;
    height: 2px;
    background: var(--rule-strong);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--dur-base) var(--ease-out);
  }
  .site-nav__list a:hover::after { scale: 1 1; }
  /* "page" on the section's own page, "true" on its child pages (e.g. a blog post). */
  .site-nav__list a[aria-current]::after { background: var(--copper); scale: 1 1; width: 1.5rem; }

  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }
  .menu-button__bars {
    display: inline-block;
    width: 1rem;
    height: 0.625rem;
    border-block: 1.5px solid currentColor;
  }
  @media (min-width: 56rem) {
    .menu-button { display: none; }
  }

  /* Mobile menu: native popover, grows from the menu button and returns the same way. */
  .menu-sheet {
    position: fixed;
    inset: calc(var(--header-h) + var(--space-2xs)) var(--gutter) auto auto;
    width: min(22rem, calc(100vw - 2 * var(--gutter)));
    margin: 0;
    padding: var(--space-m);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--paper);
    color: var(--ink-soft);
    box-shadow: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--forest) 28%, transparent);
    transform-origin: top right;
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition: opacity var(--dur-base) var(--ease-out),
                scale var(--dur-base) var(--ease-out),
                translate var(--dur-base) var(--ease-out),
                overlay var(--dur-base) allow-discrete,
                display var(--dur-base) allow-discrete;
  }
  .menu-sheet:not(:popover-open) { opacity: 0; scale: 0.96; translate: 0 -0.5rem; }
  @starting-style {
    .menu-sheet:popover-open { opacity: 0; scale: 0.96; translate: 0 -0.5rem; }
  }
  .menu-sheet::backdrop {
    background: color-mix(in srgb, var(--forest) 24%, transparent);
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-out),
                overlay var(--dur-base) allow-discrete,
                display var(--dur-base) allow-discrete;
  }
  .menu-sheet:not(:popover-open)::backdrop { opacity: 0; }
  @starting-style {
    .menu-sheet:popover-open::backdrop { opacity: 0; }
  }
  html:has(.menu-sheet:popover-open) { overflow: hidden; }

  /* Browsers without popover would show the sheet permanently; hide it and let js/site.js toggle it. */
  @supports not selector(:popover-open) {
    .menu-sheet { display: none; }
    .menu-sheet.is-open { display: block; }
  }

  .menu-sheet__list { list-style: none; padding: 0; margin-bottom: var(--space-m); }
  .menu-sheet__list li + li { border-top: 1px solid var(--rule); }
  .menu-sheet__list a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    font-size: var(--step-h3);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-decoration: none;
  }
  .menu-sheet__list a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--copper);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
  .menu-sheet .btn { width: 100%; }

  /* ---------------------------------------------------------- footer */
  .site-footer {
    background: var(--forest);
    color: var(--paper-soft);
    padding-block: var(--space-2xl) var(--space-l);
    font-size: var(--step-small);
  }
  .site-footer__logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer__logo img { height: 1.75rem; width: auto; }
  .site-footer__grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--rule-on-forest);
  }
  @media (min-width: 40rem) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  }
  .site-footer__list { list-style: none; padding: 0; display: grid; margin-top: var(--space-2xs); }
  .site-footer__list a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer__list li:not(:has(a)) { padding-block: var(--space-3xs); }
  .site-footer__tagline { margin-top: var(--space-m); max-width: 32ch; }
  .site-footer a { color: var(--paper-soft); text-decoration-color: var(--rule-on-forest); }
  .site-footer a:hover { color: var(--paper); text-decoration-color: currentColor; }
  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s);
    padding-top: var(--space-m);
    color: var(--paper-muted);
  }

  /* ---------------------------------------------------------- forms */
  .field { display: grid; gap: var(--space-2xs); }
  .field__label {
    font-size: var(--step-small);
    font-weight: 500;
    color: var(--ink);
  }
  .field__optional { font-weight: 400; color: var(--ink-muted); }
  .field__help { font-size: var(--step-small); color: var(--ink-muted); line-height: 1.45; }
  .field__error {
    font-size: var(--step-small);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
  }
  .field__error:empty { display: none; }

  .input, .select, .textarea {
    width: 100%;
    min-height: 3rem;
    padding: var(--space-xs) var(--space-s);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-input);
    color: var(--ink);
    font-size: max(1rem, var(--step-body)); /* 16px floor stops iOS zoom on focus */
    line-height: 1.4;
    transition: border-color var(--dur-quick) var(--ease-out),
                box-shadow var(--dur-quick) var(--ease-out);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-muted); opacity: 1; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 2px;
    border-color: var(--forest);
  }
  .textarea { min-height: 9rem; resize: vertical; }

  .select {
    appearance: none;
    padding-right: 2.75rem;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 50%, calc(100% - 0.95rem) 50%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
  }

  /* Invalid: heavier Ink edge plus a written message; never colour alone. */
  [aria-invalid="true"]:is(.input, .select, .textarea) {
    border: 2px solid var(--ink);
    padding-inline-start: calc(var(--space-s) - 1px);
  }

  .input:disabled, .select:disabled, .textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .check {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    font-size: var(--step-small);
    line-height: 1.5;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .check input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1em;
    accent-color: var(--forest);
  }

  /* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* ---------------------------------------------------------- FAQ */
  .faq { border-bottom: 1px solid var(--rule); }
  .faq details { border-top: 1px solid var(--rule); }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    min-height: 3.5rem;
    padding-block: var(--space-s);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  /* Plus that becomes minus. */
  .faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: rotate var(--dur-base) var(--ease-out), background-size var(--dur-base) var(--ease-out);
  }
  .faq details[open] summary::after {
    rotate: 180deg;
    background-size: 100% 1.5px, 1.5px 0;
  }
  .faq__body { padding-bottom: var(--space-m); color: var(--ink-soft); }

  @supports selector(::details-content) {
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--dur-slow) var(--ease-out),
                  content-visibility var(--dur-slow) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }

  /* ---------------------------------------------------------- prose */
  .prose { max-width: var(--measure); color: var(--ink-soft); }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: clamp(1.5rem, 1.36rem + 0.57vw, 1.875rem); margin-top: 2.2em; }
  .prose h3 { margin-top: 1.8em; }
  .prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: 0.4em; }
  .prose li::marker { color: var(--ink-muted); }
  .prose blockquote {
    padding-top: var(--space-m);
    background: linear-gradient(var(--copper), var(--copper)) top left / 3.25rem 3px no-repeat;
    font-size: var(--step-lead);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .prose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--step-small); }
  .prose th, .prose td { text-align: left; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: 1px solid var(--rule); }
  .prose th { font-weight: 600; color: var(--ink); }
  .prose td.num, .prose th.num { text-align: right; }
  /* Wide tables scroll inside their own box rather than widening the page. */
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 18rem; }

  /* ---------------------------------------------------------- section heading */
  .section-head { margin-bottom: var(--space-xl); }
  .section-head p { margin-top: var(--space-s); }
  .section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
  }

  /* ---------------------------------------------------------- hero (03-digital) */
  .hero { padding-block: var(--space-l) var(--section-y); }
  @media (min-width: 56rem) {
    .hero { padding-block: var(--space-xl) var(--section-y); }
  }
  .hero__grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 56rem) {
    .hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: center;
    }
  }
  .hero__copy { padding-top: var(--space-m); }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
    margin-top: var(--space-l);
  }
  .hero__panel {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    padding: var(--space-xl);
  }
  .hero__panel img { width: min(70%, 22rem); opacity: 0.22; }
  @media (min-width: 56rem) {
    .hero__panel {
      aspect-ratio: auto;
      height: clamp(26rem, calc(100dvh - var(--header-h) - 7rem), 38rem);
    }
  }

  /* One authored moment: the hero settles in on load, the copper rule draws from the left. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__copy > * { animation: rise var(--dur-slow) var(--ease-out) both; }
    .hero__copy > :nth-child(2) { animation: draw 560ms var(--ease-out) 120ms both; }
    .hero__copy > :nth-child(3) { animation-delay: 160ms; }
    .hero__copy > :nth-child(4) { animation-delay: 220ms; }
    .hero__panel { animation: settle 640ms var(--ease-out) 80ms both; }
  }
  @keyframes rise   { from { opacity: 0; translate: 0 10px; } }
  @keyframes draw   { from { scale: 0 1; } }
  @keyframes settle { from { opacity: 0; scale: 0.985; } }
  .hero__copy .rule { transform-origin: left; }

  /* ---------------------------------------------------------- then / now contrast (forest band) */
  .shift__grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-2xl);
  }
  @media (min-width: 56rem) {
    .shift__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
  }
  .shift__item { padding-top: var(--space-m); border-top: 1px solid var(--rule-on-forest); }
  .shift__item h3 { font-size: var(--step-h2); line-height: 1.12; letter-spacing: -0.02em; }
  .shift__item p { margin-top: var(--space-s); max-width: 40ch; }
  /* "Then" is quieter than "now". */
  .shift__item--then h3 { color: var(--paper-muted); }
  .shift__item--now {
    border-top-color: transparent;
    background:
      linear-gradient(var(--copper), var(--copper)) top left / 3.25rem 3px no-repeat,
      linear-gradient(var(--rule-on-forest), var(--rule-on-forest)) top left / 100% 1px no-repeat;
  }

  /* ---------------------------------------------------------- services (1 large + 2) */
  .services {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 56rem) {
    .services {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-rows: auto auto;
    }
    .service--lead { grid-row: span 2; }
  }
  .service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  }
  .service:hover { border-color: var(--rule-strong); }
  .service:has(a:active) { scale: 0.995; }
  .service h3 a { color: inherit; text-decoration: none; }
  /* Whole tile is the link target. */
  .service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .service h3 a:focus-visible { outline: none; }
  .service:has(h3 a:focus-visible) { outline: 2px solid var(--forest); outline-offset: 3px; }
  .service p { color: var(--ink-soft); }
  .service .link-arrow { margin-top: auto; pointer-events: none; }

  .service--lead {
    background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    border-color: transparent;
    padding: var(--space-xl) var(--space-l);
  }
  @media (min-width: 56rem) {
    .service--lead { padding: var(--space-xl); }
  }
  .service--lead:hover { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); border-color: transparent; }
  .service--lead h3 { font-size: var(--step-h2); line-height: 1.1; letter-spacing: -0.02em; }
  .service__topics {
    display: grid;
    gap: var(--space-2xs) var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: var(--space-s) 0 var(--space-m);
    color: var(--ink);
    font-weight: 500;
  }
  @media (min-width: 40rem) {
    .service__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .service__topics li { padding-block: var(--space-2xs); border-top: 1px solid var(--rule); }

  /* ---------------------------------------------------------- how we work */
  .steps {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: 0;
    counter-reset: step;
  }
  @media (min-width: 40rem) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-l); }
  }
  @media (min-width: 64rem) {
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* A hairline with a copper segment marking each step's start. */
  .steps li {
    padding-top: var(--space-m);
    background:
      linear-gradient(var(--copper), var(--copper)) top left / 1.5rem 3px no-repeat,
      linear-gradient(var(--rule), var(--rule)) top left / 100% 1px no-repeat;
  }
  .steps h3 { margin-bottom: var(--space-2xs); }
  .steps p { font-size: var(--step-body); }

  /* ---------------------------------------------------------- latest articles */
  .post-list {
    display: grid;
    gap: 0 var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: 0;
  }
  @media (min-width: 56rem) {
    .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-m) var(--space-l);
    border-top: 1px solid var(--rule);
  }
  .post-card h3 a { color: inherit; text-decoration: none; }
  .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
  .post-card h3 a:focus-visible { outline: none; }
  .post-card:has(h3 a:focus-visible) { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }
  .post-card:hover h3 { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong); }
  .post-card__meta { font-size: var(--step-small); color: var(--ink-muted); }
  .post-card p:last-child { color: var(--ink-soft); }

  /* ---------------------------------------------------------- closing call to action */
  .closing {
    text-align: center;
    padding-block: var(--section-y);
    border-top: 1px solid var(--rule);
  }
  .closing h2 { max-width: 20ch; margin-inline: auto; }
  .closing .rule { margin-inline: auto; }
  .closing p { margin-inline: auto; max-width: 46ch; }
  .closing .btn { margin-top: var(--space-l); }

  /* ---------------------------------------------------------- inner page intro */
  .page-intro { padding-block: var(--space-2xl) var(--space-xl); }
  @media (min-width: 56rem) {
    .page-intro { padding-block: var(--space-3xl) var(--space-2xl); }
  }
  .page-intro .lead { max-width: 40ch; }
  .page-intro--quiet { padding-bottom: var(--section-y); }

  .link-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-l);
    list-style: none;
    padding: 0;
    margin-top: var(--space-l);
  }

  /* Plain list with hairlines between items. */
  .list-ruled { list-style: none; padding: 0; }
  .list-ruled li { padding-block: var(--space-2xs); border-top: 1px solid var(--rule); }
  .list-ruled li:last-child { border-bottom: 1px solid var(--rule); }

  /* ---------------------------------------------------------- services page */
  .svc-layout {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--section-y);
  }
  @media (min-width: 64rem) {
    .svc-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-2xl); }
  }

  /* In-page index: wrapping pills on phones, a sticky list on desktop. */
  .svc-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
  }
  .svc-index .btn { padding-inline: var(--space-xs); }
  @media (min-width: 64rem) {
    .svc-index { position: sticky; top: calc(var(--header-h) + var(--space-l)); align-self: start; }
    .svc-index ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .svc-index .btn {
      justify-content: flex-start;
      width: 100%;
      min-height: 2.75rem;
      padding-inline: 0;
      border: 0;
      border-top: 1px solid var(--rule);
      border-radius: 0;
      text-align: left;
      white-space: normal;
      line-height: 1.3;
    }
    .svc-index li:last-child .btn { border-bottom: 1px solid var(--rule); }
    .svc-index .btn:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
  }

  .svc { padding-block: var(--space-2xl); border-top: 1px solid var(--rule); }
  .svc:first-child { padding-top: 0; border-top: 0; }
  .svc > .lead { margin-top: var(--space-s); max-width: 40ch; }

  .svc__facts {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-xl);
  }
  @media (min-width: 40rem) {
    .svc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .svc__facts h3, .svc__clusters h3, .svc__faq-title {
    font-size: var(--step-body);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2xs);
  }

  .svc__clusters {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-xl);
  }
  @media (min-width: 40rem) {
    .svc__clusters { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  }
  .svc__clusters .list-ruled { color: var(--ink-soft); }

  .svc__faq-title { margin-top: var(--space-xl); }

  /* ---------------------------------------------------------- about page */
  .principles {
    display: grid;
    gap: var(--space-l) var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: 0;
  }
  @media (min-width: 48rem) {
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .principles li { padding-top: var(--space-m); border-top: 1px solid var(--rule); }
  .principles h3 {
    font-size: clamp(1.5rem, 1.33rem + 0.7vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .principles p { margin-top: var(--space-2xs); max-width: 42ch; }

  .roster {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: 0;
  }
  @media (min-width: 48rem) {
    .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .person { padding-top: var(--space-m); border-top: 1px solid var(--rule); }
  .person__role { margin-top: var(--space-3xs); color: var(--ink-muted); font-size: var(--step-small); }
  .person p + p { margin-top: var(--space-s); }
  .person__bio { margin-top: var(--space-s); }
  .person__creds { font-size: var(--step-small); color: var(--ink-muted); }

  /* ---------------------------------------------------------- contact page */
  .contact-grid {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--section-y);
  }
  @media (min-width: 64rem) {
    .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); }
  }
  .contact-form { display: grid; gap: var(--space-l); max-width: 38rem; }
  .contact-form__note { font-size: var(--step-small); color: var(--ink-muted); }
  .contact-form__status:empty { display: none; }
  .contact-form__status {
    padding: var(--space-s) var(--space-m);
    border: 2px solid var(--ink);
    border-radius: var(--radius-input);
    color: var(--ink);
    font-weight: 500;
  }

  .contact-details { align-self: start; }
  @media (min-width: 64rem) {
    .contact-details { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
  }
  .contact-details dl { display: grid; gap: var(--space-m); }
  .contact-details dt { margin-bottom: var(--space-3xs); }
  .contact-details dd { color: var(--ink); }
  .contact-details__map { margin-top: var(--space-m); }

  /* ---------------------------------------------------------- blog index */
  .post-index { list-style: none; padding: 0; max-width: 48rem; }
  .post-index__item {
    position: relative;
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-l);
    border-top: 1px solid var(--rule);
  }
  .post-index__item:last-child { border-bottom: 1px solid var(--rule); }
  .post-index__item h2 { font-size: var(--step-h3); line-height: 1.25; letter-spacing: -0.015em; }
  @media (min-width: 56rem) {
    .post-index__item h2 { font-size: clamp(1.5rem, 1.33rem + 0.7vw, 1.875rem); line-height: 1.2; }
  }
  .post-index__item h2 a { color: inherit; text-decoration: none; }
  .post-index__item h2 a::after { content: ""; position: absolute; inset: 0; }
  .post-index__item h2 a:focus-visible { outline: none; }
  .post-index__item:has(h2 a:focus-visible) { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }
  .post-index__item:hover h2 { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong); }
  .post-index__item p:last-child { color: var(--ink-soft); max-width: 60ch; }

  /* Shown only when the list is empty, no script needed. */
  .empty-state { display: none; max-width: 40ch; padding-block: var(--space-l); border-top: 1px solid var(--rule); }
  .post-index:not(:has(li)) { display: none; }
  .post-index:not(:has(li)) + .empty-state { display: block; }

  /* ---------------------------------------------------------- article */
  .article { padding-bottom: var(--section-y); }
  .article-head { padding-block: var(--space-2xl) var(--space-xl); max-width: 48rem; }
  @media (min-width: 56rem) {
    .article-head { padding-block: var(--space-3xl) var(--space-xl); }
  }
  .article-head h1 {
    font-size: clamp(2rem, 1.61rem + 1.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin-top: var(--space-s);
  }
  .article-head .lead { max-width: 42ch; }
  .article-meta { font-size: var(--step-small); color: var(--ink-muted); }
  .article-meta--date { margin-top: var(--space-m); }

  .prose--article { line-height: 1.65; }
  .prose--article > p:first-child { color: var(--ink); }

  .article-foot {
    max-width: var(--measure);
    margin-top: var(--space-2xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s) var(--space-l);
  }

  /* Placeholder for facts the client still has to supply. */
  .tbd {
    background: color-mix(in srgb, var(--copper) 16%, var(--paper));
    color: var(--ink);
    padding: 0 0.25em;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

}

/* ------------------------------------------------------ user preferences */
/* Reduced motion: no movement, opacity fades stay. */
@media (prefers-reduced-motion: reduce) {
  .btn:active { scale: 1; }
  .link-arrow:hover::after { translate: 0 0; }
  .site-nav__list a::after, .faq summary::after, .faq details::details-content { transition: none; }
  .menu-sheet, .menu-sheet:not(:popover-open) { scale: 1; translate: 0 0; }
  @starting-style {
    .menu-sheet:popover-open { scale: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-soft: var(--ink);
    --ink-muted: color-mix(in srgb, var(--ink) 80%, var(--paper));
    --rule: var(--rule-strong);
  }
  .site-header { background: var(--paper); backdrop-filter: none; border-bottom: 1px solid var(--ink); }
  .site-header::after { display: none; }
}

@media (forced-colors: active) {
  .rule { background: CanvasText; }
  .btn { border-color: ButtonText; }
}