/* ==========================================================================
   WISC Partners — site styles
   Plain CSS, no build step. Order of precedence is set by the layers below,
   so later layers win without specificity tricks or !important.
   ========================================================================== */

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


/* --------------------------------------------------------------------------
   Reset: a light, modern reset in the spirit of Eric Meyer's original.
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :target { scroll-margin-block: 5ex; }
}


/* --------------------------------------------------------------------------
   Tokens: the brand in one place.
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Color */
    --color-ink: #1a1a1a;
    --color-paper: #fff;
    --color-mist: #f7f7f7;      /* light gray panels */
    --color-line: #c4c4c4;      /* rules and borders only (too light for text) */
    --color-muted: #6b6b6b;     /* secondary text: 5.3:1 on white, 5:1 on mist */
    --color-shade: #333;
    --color-accent: #fa4616;    /* orange: large text and graphics on white */
    --color-on-dark-muted: #c4c4c4;
    --color-field-line: #8e8e8e;  /* form underlines: 3.3:1, enough for a control edge */
    --color-accent-strong: #d73105; /* brand orange, deepened: 4.85:1 with white */
    --color-error: var(--color-accent-strong);       /* brand orange, deepened for text: 4.85:1 on white, 4.5:1 on mist */

    /* Type */
    --font-body: "maple-web", ui-sans-serif, system-ui, sans-serif;
    --font-display: "alternate-gothic-atf", "Arial Narrow", ui-sans-serif, sans-serif;

    --text-small: 1rem;
    --text-label: 1.25rem;                                   /* uppercase eyebrow labels */
    --text-body: 1.5rem;                                     /* main reading size */
    --text-lead: 2rem;                                       /* statements, intros */
    --text-title: 3.5rem;                                    /* page titles */
    --text-hero: 4.5rem;                                     /* home page title */

    /* Space */
    --gutter: clamp(1rem, 0.4rem + 2.4vw, 2rem);
    --section-space: clamp(5rem, 3rem + 6vw, 9rem);

    /* Measures */
    --width-text: 46rem;
    --width-content: 67rem;
    --width-wide: 80rem;
    --width-max: 96rem;

    --link-underline: color-mix(in srgb, currentColor 60%, transparent);
  }

  @media (width >= 48rem) {
    :root {
      --text-lead: 2.25rem;
      --text-title: 4.5rem;
      --text-hero: 6rem;
    }
  }
}


/* --------------------------------------------------------------------------
   Base: element defaults.
   -------------------------------------------------------------------------- */
@layer base {
  html {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-ink);   /* the black footer runs to the window's bottom on short pages */
  }

  body { font-size: 1rem; }
  main { display: flow-root; background: var(--color-paper); }   /* flow-root: children's margins stay inside the white */

  h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
  }

  h1 em, h2 em, h1 i, h2 i {
    font-style: normal;
    color: var(--color-accent);
  }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

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

  /* On orange, an orange focus ring would vanish: use ink there. */
  .section--accent, .site-header[data-tone="accent"], .invest-cta, .fit__cta { --focus-ring: var(--color-ink); }
  .site-header[data-tone="accent"][data-menu-open] { --focus-ring: var(--color-accent); }  /* open menu is ink */

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

  blockquote { font-size: var(--text-lead); line-height: 1.35; }
}


/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
@layer layout {
  .wrapper {
    width: min(100% - 2 * var(--gutter), var(--wrapper-width, var(--width-content)));
    margin-inline: auto;
  }
  .wrapper--text { --wrapper-width: var(--width-text); }
  .wrapper--wide { --wrapper-width: var(--width-wide); }
  .wrapper--max  { --wrapper-width: var(--width-max); }

  .section { padding-block: var(--section-space); }
  .section--mist { background: var(--color-mist); }
  .section--ink { background: var(--color-ink); color: var(--color-paper); }
  .section--accent { background: var(--color-accent); }

  .stack > * + * { margin-block-start: var(--stack-space, 1.5rem); }
}


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

  /* Skip link ------------------------------------------------------------- */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--color-ink);
    color: var(--color-paper);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  /* Eyebrow label --------------------------------------------------------- */
  .label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
  }

  /* Links in running text -----------------------------------------------
     Content links (bios, quotes, article and page copy) sit in the words,
     so they get a soft highlighter bar rather than an underline: faint at
     rest so they can still be spotted without hovering, warmer on hover.
     Standalone links (arrow links, navigation) keep their own styles. */
  .copy a:not(.arrow-link) {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 0.333em;               /* 12px at 36px text, 8px at 24px */
    text-underline-offset: -0.2em;                    /* pull the bar up behind the letters */
    text-decoration-skip-ink: none;
    text-decoration-color: color-mix(in srgb, currentColor 7%, transparent);
    transition: text-decoration-color 0.2s ease;
  }
  .copy a:not(.arrow-link):hover { text-decoration-color: color-mix(in srgb, var(--color-accent) 22%, transparent); }
  .copy ins { text-decoration: none; }

  /* Avatar: author photo or initials (decorative; the name is beside it) */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-muted);  /* white initials at 5.3:1 */
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-paper);
  }
  .avatar--small { inline-size: 3rem; block-size: 3rem; font-size: 1.125rem; }

  /* Page builder blocks (portfolio projects, Legal) ------------------------ */
  .pb-paragraph {
    --stack-space: 0;                /* live separated paragraphs with a line break, no gap */
    max-inline-size: 46rem;
    margin-inline: auto;
    font-size: var(--text-body);
    line-height: 1.625;
  }
  .pb-quote {
    position: relative;
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: 3.5rem 1rem 3.5rem 1.75rem;
  }
  .pb-quote::before {               /* decorative opening quote */
    content: "\201C";
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-start: -0.25rem;
    font-size: 6rem;
    line-height: 1.5;
    color: var(--color-accent);
  }
  .pb-quote blockquote {
    max-inline-size: 46rem;
    font-size: 2rem;
    line-height: 1.375;
  }
  .pb-quote figcaption {
    display: block;
    padding-block: 1rem 0.4375rem;   /* + the leading under live's inline caption */
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .pb-image { max-inline-size: 54.3rem; margin-inline: auto; }
  .pb-image img { inline-size: 100%; }
  .pb-heading {                     /* section headings (Legal): same as article headings */
    margin-block-end: 1rem;
    font-size: 2rem;                 /* 32px: large text, so the brand orange passes (3.53:1) */
    line-height: 1.375;
    color: var(--color-accent);
  }

  @media (width >= 48rem) {
    .pb-quote { padding-inline-end: 1.75rem; }
    .pb-quote::before { inset-block-start: 2rem; inset-inline-start: -1.5rem; }
    .pb-quote blockquote { font-size: 2.25rem; }
    .pb-quote figcaption { padding-block: 2.5rem 1.1875rem; }
  }
  @media (width >= 64rem) {
    .pb-paragraph { padding-inline-start: 4rem; }
    .pb-quote { padding-inline-end: 7rem; }
  }

  /* Arrow link ------------------------------------------------------------
     Inline, like running text: the underline sits right under the words
     and the arrow follows after a word space. */
  .arrow-link {
    display: inline-block;
    font-size: var(--text-body);
    line-height: 1.5;
    text-decoration: none;
  }
  .arrow-link__text { border-block-end: 1px solid var(--link-underline); }
  .arrow-link__arrow {
    display: inline-block;
    position: relative;
    inset-block-start: 1px;
    margin-inline-start: 0.5rem;
    color: var(--color-accent);
  }
  .arrow-link:hover .arrow-link__text { border-block-end-color: currentColor; }
  .arrow-link--on-dark { color: var(--color-paper); --link-underline: color-mix(in srgb, var(--color-mist) 60%, transparent); }
  .arrow-link--on-accent .arrow-link__arrow { color: var(--color-paper); }
  .arrow-link--back .arrow-link__arrow { margin-inline: 0 0.5rem; transform: rotate(180deg); }

  /* Site header ----------------------------------------------------------- */
  .site-header { background: var(--color-paper); color: var(--color-ink); }
  .site-header[data-tone="dark"] { background: var(--color-ink); color: var(--color-paper); }
  /* Orange header over the article image (Perspectives): ink text, white nav marks */
  .site-header[data-tone="accent"] {
    --nav-accent: var(--color-paper);
    background-color: var(--color-accent);
    background-size: cover;
    color: var(--color-ink);
  }
  .site-header[data-tone="accent"] .menu-toggle { color: var(--color-ink); }
  .site-header[data-tone="accent"][data-menu-open] .menu-toggle { color: var(--color-accent); }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, var(--width-max));
    margin-inline: auto;
    padding: 1rem;
  }

  .site-logo { position: relative; z-index: 60; color: inherit; }
  .site-logo svg { width: 10rem; fill: currentColor; }

  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .site-nav a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-block-end: 1px solid transparent;
  }
  .site-nav a:hover,
  .site-nav a[aria-current] { border-block-end-color: var(--nav-accent, var(--color-accent)); }

  /* Brighter-than-white on HDR screens -------------------------------------
     On a display with HDR headroom (recent MacBook Pro, iPhone, iPad Pro, many
     OLED monitors) in Chrome 137+ or Safari 26+, white-on-black logo, nav and
     page titles glow slightly brighter than ordinary white. The glyphs are
     painted with a tiny gain-map JPEG (images/white-hdr-2x.jpg: plain white,
     plus instructions to show it up to 2x brighter where the screen can).
     Everywhere else (SDR screens, other browsers, print) the same image shows
     as plain white, so nothing changes. Text stays real text; contrast only
     goes up. Left off for people who ask for less contrast or use forced
     colours (Windows High Contrast). */
  @media screen and (dynamic-range: high) and (not (prefers-contrast: less)) and (not (forced-colors: active)) {
    :is(.site-header[data-tone="dark"], .site-header[data-menu-open]) .site-nav a,
    .site-header[data-tone="dark"] .page-intro__title {
      background: url("/images/white-hdr-2x.jpg") center / cover;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    /* The orange words in a title keep their colour, with ink (not the bright
       swatch) behind their edges so they don't get a pale halo. */
    .site-header[data-tone="dark"] .page-intro__title :is(em, i) {
      background: var(--color-ink);
      -webkit-background-clip: text;
      background-clip: text;
      color: var(--color-accent);
    }
    /* The logo is an SVG, so it's drawn as the bright swatch cut to the logo's shape. */
    :is(.site-header[data-tone="dark"], .site-header[data-menu-open]) .site-logo svg {
      background: url("/images/white-hdr-2x.jpg") center / cover;
      -webkit-mask: url("/images/logo-mask.svg") center / 100% 100% no-repeat;
      mask: url("/images/logo-mask.svg") center / 100% 100% no-repeat;
      fill: transparent;
    }
  }

  @media (width >= 48rem) {
    .site-header__bar { padding: 1.75rem; }
    .site-logo svg { width: 11rem; }
    /* 1rem of margin plus a word space between links, and half a rem after the last */
    .site-nav ul { column-gap: 1.21875rem; padding-inline-end: 0.5rem; }
  }
  @media (width >= 64rem) {
    .site-header__bar { padding: 2rem; }
  }

  .menu-toggle {
    display: none;
    position: relative;
    z-index: 60;
    inline-size: 3.5rem;
    block-size: 2.25rem;
    color: var(--color-accent);
  }
  .menu-toggle__icon,
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    position: absolute;
    inset-inline: 0;
    block-size: 4px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .menu-toggle__icon { inset-block-start: calc(50% - 2px); }
  .menu-toggle__icon::before { content: ""; inset-block-start: -1rem; }
  .menu-toggle__icon::after  { content: ""; inset-block-start: 1rem; }

  @media (width < 48rem) {
    .menu-toggle { display: block; }

    .site-nav {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      background: var(--color-ink);
      color: var(--color-paper);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-2rem);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .site-nav ul { flex-direction: column; align-items: center; gap: 2.5rem; }
    .site-nav a { font-size: 1.5rem; }

    .site-header[data-menu-open] .site-nav {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 0s;
    }
    .site-header[data-menu-open] .site-logo { color: var(--color-paper); }
    .site-header[data-menu-open] .menu-toggle__icon { background: transparent; }
    .site-header[data-menu-open] .menu-toggle__icon::before { transform: translateY(1rem) rotate(45deg); }
    .site-header[data-menu-open] .menu-toggle__icon::after  { transform: translateY(-1rem) rotate(-45deg); }
  }


  /* Page intro (title, text and image inside the site header) ------------ */
  .page-intro { display: flow-root; padding-block: 2.5rem 0; }  /* keeps the intro text's margin inside the header */
  .page-intro > .wrapper {
    width: auto;
    max-inline-size: var(--wrapper-width, var(--width-content));
    padding-inline: 1rem;
  }
  .page-intro__title {
    font-size: var(--text-title);
    letter-spacing: -0.025em;
    line-height: 1;
    margin-block-end: 1.5rem;
  }
  .page-intro--hero .page-intro__title { font-size: var(--text-hero); }
  .page-intro__text {
    max-inline-size: 39.5rem;
    padding-block: 1.25rem 2.5rem;  /* padding, not margin: live never collapsed these */
    font-size: var(--text-lead);
    line-height: 1.25;
  }
  .page-intro--aside .page-intro__text {
    max-inline-size: 32rem;
    padding-block-start: 0;
    padding-inline-end: 0.5rem;
    font-size: var(--text-body);
    line-height: 1.625;
  }
  .page-intro__image { display: block; }
  .page-intro__image img { inline-size: 100%; }

  .wrapper--home { --wrapper-width: var(--width-content); }

  @media (width >= 48rem) {
    .page-intro { padding-block-start: 5rem; }
    .page-intro > .wrapper { padding-inline: 1.75rem; }
    .page-intro__title { margin-block-end: 4rem; }
    .page-intro__text { padding-block: 0 5rem; line-height: 1.375; }
    .page-intro--aside .page-intro__text { margin-inline-start: auto; line-height: 1.625; }
  }
  @media (width >= 64rem) {
    .page-intro > .wrapper { padding-inline: 2rem; }
  }
  @media (width >= 96rem) {
    .wrapper--home { --wrapper-width: 80rem; }
  }

  /* Carousel (CSS scroll-snap) ------------------------------------------- */
  .carousel { position: relative; }
  .carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__slide { scroll-snap-align: start; scroll-snap-stop: always; }
  .carousel__slide img { inline-size: 100%; }

  .carousel__controls {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    gap: 0.25rem;
  }
  .carousel__controls[hidden] { display: none; }
  .carousel__button {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    background: color-mix(in srgb, var(--color-ink) 75%, transparent);
    color: var(--color-paper);
    font-size: 1.75rem;
    line-height: 1;
  }
  .carousel__button:hover { background: var(--color-ink); }
  .carousel__pause-icon {
    inline-size: 0.75rem;
    block-size: 0.875rem;
    border-inline: 4px solid currentColor;
  }
  [aria-pressed="true"] > .carousel__pause-icon {
    border: 0;
    inline-size: 0;
    block-size: 0;
    border-block: 0.5rem solid transparent;
    border-inline-start: 0.75rem solid currentColor;
  }

  /* Site footer -----------------------------------------------------------
     Small screens: the blocks sit on top of the footer's top edge and the
     content stacks. Wider: blocks on the left, raised above the edge, with a
     black band running from them across the top of the content. */
  .site-footer {
    position: relative;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .site-footer__blocks {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
    inline-size: 7.8875rem;
    block-size: auto;
  }

  .site-footer__content {
    display: grid;
    max-inline-size: 36rem;
    padding: 4rem 1rem;
  }
  .site-footer__logo { justify-self: start; margin-block-end: 0.375rem; }
  .site-footer__logo svg { width: 10rem; fill: currentColor; opacity: 0.5; }

  .site-footer__nav { justify-self: end; padding: 2.375rem 5rem 3.875rem 0; }
  .site-footer__nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .site-footer__nav a {
    display: block;
    margin-inline: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent);
  }
  .site-footer__nav a:hover { text-decoration: underline; }

  .site-footer__location {
    max-inline-size: 20rem;
    padding-inline-end: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.375;
    letter-spacing: 0.025em;
  }
  .site-footer__legal {
    margin-block-start: 0.75rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-paper) 50%, transparent);
  }
  .site-footer__legal a { margin-inline-start: 0.5rem; }
  .site-footer__meta { padding-block-end: 0.25rem; }  /* the leading under the old inline legal line */

  @media (width >= 48rem) {
    .site-footer { display: flex; justify-content: space-between; }
    .site-footer__blocks {
      position: relative;
      inset-block-end: auto;
      flex: none;
      align-self: flex-start;
      margin-inline-end: 2.5rem;
    }
    .site-footer__content {
      position: relative;
      flex: auto;
      grid-template-columns: auto 1fr;
      max-inline-size: 75rem;
      padding: 0 1.75rem 2.5rem 0;
    }
    .site-footer__logo { grid-row: 1 / span 2; align-self: end; }
    .site-footer__logo svg { width: 11rem; }
    .site-footer__nav {
      grid-column: 2;
      position: relative;
      inset-block-start: -1rem;
      padding: 0;
    }
    .site-footer__nav ul { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0 0.21875rem; }
    .site-footer__meta { grid-column: 2; margin-block-start: 7rem; text-align: end; }
    .site-footer__location { max-inline-size: none; padding-inline-end: 0; }
  }
  @media (width > 48rem) {
    .site-footer__blocks { inset-block-end: 94px; }
    .site-footer__content::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 100%;
      block-size: 4.375rem;
      background: var(--color-ink);
    }
  }
  @media (width >= 64rem) {
    .site-footer__blocks { margin-inline-end: 5rem; }
    .site-footer__content { padding-inline-end: 6rem; }
  }
  @media (width >= 96rem) {
    .site-footer__content { max-inline-size: 90rem; padding-inline-end: 13rem; }
  }
}


/* --------------------------------------------------------------------------
   Page-specific styles live below, one block per template.
   -------------------------------------------------------------------------- */
@layer pages {
  /* Home ----------------------------------------------------------------- */

  /* Hero slider: the info panel's band (below) covers its bottom 4.5rem,
     so the controls sit above that. */
  .page-intro--hero .carousel { padding-block-start: 1.5rem; }  /* padding, so it adds to the title's margin */
  .page-intro--hero .carousel__controls { inset-block-end: 5.5rem; }

  .home-info {
    position: relative;
    overflow-x: clip;               /* blocks bleed off the right edge on phones */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .home-info__panel {
    position: relative;
    z-index: 1;
    margin-inline-end: 2.5rem;
    padding-block: 0 4rem;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .home-info__panel::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: 4.5rem;
    background: inherit;
  }
  .home-info__items {
    display: grid;
    gap: 4rem;
    max-inline-size: 54.3rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  .home-info__item { display: flex; flex-direction: column; align-items: flex-start; }
  .home-info__label { color: var(--color-accent); }
  .home-info__text {
    margin-block: 1.5rem auto;
    font-size: var(--text-lead);
    line-height: 1;
    letter-spacing: 0.025em;
  }
  .home-info__item .arrow-link { margin-block-start: 2rem; }
  .home-info__blocks {
    position: absolute;
    inset-block-start: 5rem;
    inset-inline-end: -1.25rem;
    inline-size: 9.85625rem;
    block-size: auto;
  }

  @media (width >= 48rem) {
    .page-intro--hero .carousel { padding-block-start: 1rem; }
    .home-info__panel { margin-inline-end: 0; padding-block: 0 6rem; }
    .home-info__items { display: flex; gap: 0; padding-inline: 1.75rem 0; }
    .home-info__item { flex: 0 0 50%; padding-inline-end: 1.5rem; }
    .home-info__text { line-height: 1.25; }
    .home-info__item .arrow-link { margin-block-start: 4rem; }
    .home-info__blocks { position: static; margin: 3.5rem 1.5rem 0 0; }
  }
  @media (width >= 64rem) {
    .home-info__item { padding-inline-end: 1rem; }
    .home-info__blocks { margin-inline-end: 2.75rem; }
  }
  @media (width >= 80rem) {
    .home-info__item { padding-inline-end: 1.5rem; }
  }
  @media (width >= 96rem) {
    .home-info__items { max-inline-size: 67rem; }
  }

  /* Approach: text block over the image. --inner is the 67rem column the
     text lines up with, inside the wider section the image is pinned to. */
  .home-approach {
    --inner: min(100%, 67rem);
    position: relative;
    display: flex;
    flex-direction: column;
    max-inline-size: 75rem;
    margin: 2.5rem auto 0;
  }
  .home-approach__image { order: -1; }
  .home-approach__image img { inline-size: 100%; }
  .home-approach__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-inline-size: 32rem;
    padding: 1rem;
    background: var(--color-paper);
  }
  .home-approach__title {
    padding-block: 2rem;
    font-size: var(--text-title);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .home-approach__body { --stack-space: 1.625em; font-size: var(--text-body); line-height: 1.625; }  /* one blank line between paragraphs */
  .home-approach .arrow-link { margin-block: 3.9375rem 4rem; }

  @media (width >= 48rem) {
    .home-approach { margin-block: 9rem 11rem; }
    .home-approach__text {
      inline-size: calc((var(--inner) - 1.75rem) * 7 / 12);
      max-inline-size: none;
      margin-inline-start: calc((100% - var(--inner)) / 2 + 1.75rem);
      margin-block-end: 9rem;
      padding: 0;
    }
    .home-approach__text::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-end: -3rem;
      inline-size: 3rem;
      background: inherit;
    }
    .home-approach__title { padding-block: 0 2rem; }
    .home-approach .arrow-link { margin-block-start: 4.4375rem; }
    .home-approach__image {
      position: absolute;
      inset-block-start: 7rem;
      inset-inline-end: 0;
    }
    .home-approach__image img { inline-size: auto; }
  }
  @media (width >= 64rem) {
    .home-approach__text { inline-size: calc((var(--inner) - 1.75rem) / 2); }
    .home-approach__text::before { inset-inline-end: -5rem; inline-size: 5rem; }
    .home-approach .arrow-link { margin-block-end: 0; }
  }
  @media (width >= 96rem) {
    .home-approach { --inner: 100%; max-inline-size: 80rem; }
  }

  /* Perspectives feature */
  .home-feature { padding-block: 8rem 9rem; text-align: center; }
  .home-feature .wrapper { width: auto; max-inline-size: 64rem; padding-inline: 1rem; }
  .home-feature__text {
    max-inline-size: 52rem;
    margin: 2.5rem auto 0;
    font-size: var(--text-lead);
    line-height: 1.375;
  }
  .home-feature .arrow-link { margin-block-start: 3rem; }

  /* Contact */
  .home-contact { padding-block: 5rem 9rem; }
  .home-contact .wrapper { width: auto; max-inline-size: 52rem; padding-inline: 1rem; }
  .home-contact__text {
    max-inline-size: 36rem;
    margin-block-start: 2.5rem;
    font-size: var(--text-lead);
    line-height: 1.375;
    letter-spacing: 0.025em;
    color: var(--color-paper);
  }
  .home-contact .arrow-link {
    display: block;
    margin-block-start: 4rem;
    padding-inline-end: 1.5rem;
    text-align: end;
  }

  @media (width >= 48rem) {
    .home-feature .wrapper { padding-inline: 1.75rem; }
    .home-feature__text { margin-block-start: 4rem; }
    .home-feature .arrow-link { margin-block-start: 3.5rem; }

    .home-contact { padding-block: 11rem 14rem; }
    .home-contact .wrapper { padding-inline: 1.75rem; }
    .home-contact__text { padding-inline-end: 2rem; }
    .home-contact .arrow-link { padding-inline-end: 0; }
  }

  /* Team listing ---------------------------------------------------------- */
  .team-grid {
    display: grid;
    gap: 1rem 1.25rem;
    max-inline-size: 75rem;
    margin: 0.5rem auto 9rem;
  }
  .team-card { display: block; color: inherit; text-decoration: none; }
  .team-card__image { position: relative; }
  .team-card__image img { inline-size: 100%; }
  .team-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1.75rem;
    background: color-mix(in srgb, var(--color-accent) 90%, transparent);
    opacity: 0;
    visibility: hidden;
    /* fade out, then hide; visibility waits so the fade can finish */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .team-card:hover .team-card__hover,
  .team-card:focus-visible .team-card__hover {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .team-card__bio {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-inline-size: 20rem;
    font-size: 2.25rem;
    line-height: 1.375;
    letter-spacing: 0.025em;
    color: var(--color-paper);
  }
  .team-card__more { padding-block-start: 4rem; color: var(--color-ink); }
  .team-card__info { padding: 2rem 1rem; }
  .team-card__name { font-size: 2.25rem; line-height: 1; }
  .team-card__arrow { margin-inline-start: 0.5rem; font-size: 1.5rem; color: var(--color-accent); }

  @media (width >= 48rem) {
    .team-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; margin-block-end: 11rem; }
    .team-card__hover { padding: 2.5rem; }
    .team-card__bio { -webkit-line-clamp: 4; }
    .team-card__info { padding: 3rem 2.5rem; }
  }
  @media (width >= 64rem) {
    .team-card__hover { padding: 6rem; }
    .team-card__bio { -webkit-line-clamp: 6; }
  }

  /* Team member ----------------------------------------------------------- */
  .member {
    display: grid;
    grid-template-areas: "photo" "intro" "bio" "lists";
    margin-block-start: 0.75rem;
  }
  .member__photo { grid-area: photo; }
  .member__photo img { inline-size: 100%; max-inline-size: 36rem; margin-inline: auto; }

  .member__intro {
    grid-area: intro;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
  }
  .member__intro-inner { inline-size: 100%; max-inline-size: 32rem; padding-block-start: 3rem; }
  .member__name { display: inline; font-size: 4.5rem; letter-spacing: -0.025em; line-height: 1; }
  .member__title {
    display: inline;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }
  .member__links { display: inline-block; padding-block-start: 3rem; }
  .member__links li { display: inline; }
  .member__links a {
    margin-inline-end: 1.5rem;
    font-size: 1.125rem;
    text-decoration: none;
    border-block-end: 1px solid currentColor;
  }

  .member__bio {
    grid-area: bio;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem 3.5rem;
  }
  .member__bio p {
    inline-size: 100%;
    max-inline-size: 32rem;
    margin-block-start: 2.5rem;
    font-size: var(--text-body);
    line-height: 1.625;
  }

  .member__lists {
    grid-area: lists;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2.5rem 9rem 0;
    background: var(--color-mist);
  }
  .member__list {
    inline-size: 100%;
    max-inline-size: 32rem;
    margin-block: 1.25rem;
    padding-inline: 1rem;
  }
  .member__list .label { margin-block-end: 0.5rem; }
  .member__list li {
    font-size: var(--text-body);
    line-height: 1.3;
    color: color-mix(in srgb, var(--color-ink) 50%, transparent);
  }
  .member__list li + li { margin-block-start: 0.5rem; }  /* separates items that wrap */

  @media (width >= 48rem) {
    .member {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "intro photo" "lists bio";
      margin-block-start: 0;
    }
    .member__photo { background: var(--color-mist); }
    .member__photo img { max-inline-size: 39.5rem; margin-inline: 0; }
    .member__intro { padding-inline: 0; }
    .member__intro-inner { padding-block-start: 0; padding-inline-start: 1.75rem; }
    .member__bio { padding: 2rem 2.5rem 11rem; }
    .member__lists { padding-block: 2rem 10rem; }
    .member__list { margin-block: 2.5rem; padding-inline: 1.75rem 0; }
  }
  @media (width >= 64rem) {
    .member__name { font-size: 6rem; }
    .member__links { padding-block-start: 6rem; }
    .member__links a { font-size: 1.25rem; }
    .member__bio { padding: 5rem 6rem 11rem; }
    .member__lists { padding-block-start: 5rem; padding-inline-end: 0; }
  }

  /* Investors ------------------------------------------------------------- */

  /* Header image: full-bleed on phones, then right-aligned and nudged past
     the column edge as on live */
  .page-intro--investors .page-intro__image { max-inline-size: none; margin-inline: -1rem; }
  .page-intro--investors .page-intro__image img {
    inline-size: auto;
    margin-block-start: 2rem;
    margin-inline-start: auto;
  }

  .investors-info { position: relative; display: flex; align-items: stretch; overflow-x: clip; }   /* blocks bleed off the right edge on phones */
  .investors-info__blocks {
    position: absolute;
    inset-block-start: 2.5rem;
    inset-inline-end: -9rem;
    flex: none;
    inline-size: 11.825rem;
    block-size: auto;
  }
  .investors-info__panel {
    position: relative;
    z-index: 1;
    flex: auto;
    margin-inline-end: 2.5rem;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .investors-info__panel::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: 4.5rem;
    background: inherit;
  }
  .criteria {
    max-inline-size: 52rem;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
  }
  .criteria__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .criteria__term {
    padding-block-end: 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
  }
  .criteria__values {
    margin: 0;
    padding-block-end: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .criteria__values span {
    font-size: var(--text-body);
    line-height: 1;
    color: var(--color-on-dark-muted);
  }

  /* Icon blocks (Investors, Companies) */
  .feature-blocks { max-inline-size: 32rem; padding-inline: 1rem; }
  .feature-blocks--investors { margin-block: 3.5rem 4rem; }
  .feature-blocks--companies { margin-block: 0 5rem; }
  .feature-blocks__title { margin-block-end: 3rem; }
  .feature-blocks__grid { display: grid; gap: 3.5rem 2.5rem; }
  .feature-blocks__item h3 {
    margin-block: 1.25rem 0.5rem;
    font-size: 2rem;
    line-height: 1.375;
    color: var(--color-accent);
  }
  .feature-blocks__item p { font-size: var(--text-body); line-height: 1.625; letter-spacing: 0.025em; }

  .invest-cta {
    position: relative;
    overflow: hidden;
    padding-block: 5rem 6rem;
    background: var(--color-accent);
  }
  .invest-cta__shape {
    display: none;
    position: absolute;
    inset-block-start: -2.5rem;
    inset-inline-end: 0;
    mix-blend-mode: luminosity;
  }
  .invest-cta__inner {
    position: relative;
    z-index: 1;
    max-inline-size: 56.2rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  .invest-cta__title {
    max-inline-size: 28rem;
    padding-inline-end: 2rem;
    font-size: 2rem;
    line-height: 1.375;
    letter-spacing: 0.025em;
    color: var(--color-paper);
  }
  .invest-cta__text {
    max-inline-size: 32rem;
    margin-block-start: 1rem;
    padding-inline-end: 2rem;
    font-size: var(--text-body);
    line-height: 1.625;
    letter-spacing: 0.025em;
  }
  .invest-cta .arrow-link {
    display: block;
    max-inline-size: 46rem;
    margin-block-start: 4rem;
    text-align: end;
  }

  /* Centered label, statement and link (testimonial, portfolio) */
  .statement { text-align: center; }
  .statement--testimonial { margin-block-end: 11rem; padding-block-start: 6rem; }
  .statement--portfolio { margin-block: 5rem 6rem; }
  .statement__inner { max-inline-size: 64rem; margin-inline: auto; padding-inline: 1rem; }
  .statement__text {
    max-inline-size: 52rem;
    margin-inline: auto;
    padding-block-start: 2.5rem;
    font-size: var(--text-lead);
    line-height: 1.375;
  }
  .statement__text blockquote,
  .statement__text figcaption { display: inline; font: inherit; }
  .statement .arrow-link { margin-block-start: 3rem; }

  @media (width >= 48rem) {
    .page-intro--investors .page-intro__image { margin-inline: 0; }
    .page-intro--investors .page-intro__image img { margin-block-start: 0.5rem; margin-inline-end: -1.75rem; }

    .investors-info__blocks {
      position: relative;
      inset: auto;
      align-self: flex-start;
      margin: 5rem 0 0 2rem;
    }
    .investors-info__panel { margin-inline-end: 0; }
    .criteria { padding: 1.75rem 0 2.5rem; }
    .criteria__row { flex-direction: row; padding-block: 1rem; }
    .criteria__term { inline-size: 40%; padding: 0 0.5rem 0 0; text-align: end; }
    .criteria__values { inline-size: 60%; padding: 0 1rem 0 0.5rem; }
    .criteria__values span { display: inline-block; padding-block-end: 0.25rem; }

    .feature-blocks { max-inline-size: 64rem; margin: 7rem auto 6rem; padding-inline: 1.75rem; }
    .feature-blocks__grid { grid-template-columns: 1fr 1fr; row-gap: 7rem; }

    .invest-cta { padding-block: 7rem; }
    .invest-cta__shape { display: block; }
    .invest-cta__inner { padding-inline: 1.75rem; }
    .invest-cta .arrow-link { margin-block-start: 7rem; }

    .statement--testimonial { margin-block-start: 5rem; }
    .statement--portfolio { margin-block-start: 10rem; }
    .statement__inner { padding-inline: 1.75rem; }
    .statement__text { padding-block-start: 4rem; }
    .statement .arrow-link { margin-block-start: 6rem; }
  }
  @media (width >= 64rem) {
    .investors-info__blocks { margin-inline-start: 7rem; }
    .criteria { padding-block: 3rem; }
    .feature-blocks__title, .feature-blocks__grid { padding-inline-start: 4rem; }
    .feature-blocks__grid { column-gap: 5rem; }
    .feature-blocks__item { padding-inline-end: 0.5rem; }
  }
  @media (width >= 80rem) {
    .page-intro--investors .page-intro__image img { margin-inline-end: -3rem; }
    .criteria__term { margin-inline-start: -10rem; }
  }
  @media (width >= 96rem) {
    .criteria { max-inline-size: 67rem; }
    .feature-blocks { max-inline-size: 75rem; }
    .invest-cta__inner { max-inline-size: 67rem; }
    .invest-cta .arrow-link { max-inline-size: 52rem; }
  }

  /* Companies ------------------------------------------------------------- */

  /* Intro image in a black panel under a 6.5rem band; on phones the blocks
     graphic turns on its side below the image, as on live */
  .companies-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block-start: 3.5rem;
  }
  .companies-intro::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 6.5rem;
    background: var(--color-ink);
  }
  .companies-intro__panel { position: relative; order: -1; flex: auto; background: var(--color-ink); }
  .companies-intro__blocks {
    flex: none;
    inline-size: 9.85625rem;
    block-size: auto;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right;
  }
  .companies-intro__image {
    display: flex;
    align-items: flex-end;
    inline-size: 100%;
    max-inline-size: 67rem;
    block-size: 100%;
  }
  .companies-intro__image img { inline-size: 100%; }

  /* Good fit: statement and criteria on black, orange call-to-action
     dropping 5rem into the next section */
  .fit { padding-block-start: 6rem; background: var(--color-ink); color: var(--color-paper); }
  .fit__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-inline-size: 96rem;
    margin-inline: auto;
  }
  .fit__row { display: flex; flex-direction: column; max-inline-size: 67rem; padding: 1rem; }
  .fit__intro { padding-block-end: 5rem; }
  .fit__title {
    margin-block-end: 2rem;
    font-size: var(--text-title);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .fit__text { max-inline-size: 39.5rem; font-size: var(--text-lead); line-height: 1.375; }
  .fit__criteria { max-inline-size: 28rem; }
  .fit__criteria > div { padding-block-end: 2.5rem; }
  .fit__criteria dt { margin-block-end: 0.25rem; font-size: 2rem; line-height: 1.5; color: var(--color-accent); }
  .fit__criteria dd {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.625;
    letter-spacing: 0.025em;
    color: var(--color-on-dark-muted);
  }
  .fit__cta {
    position: relative;
    overflow: hidden;
    align-self: flex-end;
    inline-size: 100%;
    margin-block-start: 2.5rem;
    padding: 8rem 1rem 7rem;
    background: var(--color-accent);
  }
  .fit__shape {
    position: absolute;
    inset-block-start: -1.5rem;
    inset-inline-end: -1rem;
    mix-blend-mode: luminosity;
  }
  .fit__cta-inner { position: relative; z-index: 1; }
  .fit__cta-title { font-size: 2.25rem; line-height: 1.375; letter-spacing: 0.025em; color: var(--color-paper); }
  .fit__cta .arrow-link { margin-block-start: 4rem; }

  /* Perspectives teaser */
  .perspectives-teaser { padding: 5rem 1rem 9rem; background: var(--color-mist); }
  .perspectives-teaser__inner { max-inline-size: 64rem; margin-inline: auto; }
  .perspectives-teaser__grid { display: grid; gap: 3rem 1.25rem; margin-block-start: 2rem; }
  .perspectives-teaser__grid > li { display: flex; }
  .perspective-card {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-paper);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;   /* same fade as the Team cards */
  }
  /* Hover: brand orange with ink text (4.93:1, passes at every size). */
  .perspective-card:hover,
  .perspective-card:focus-visible {
    background: var(--color-accent);
    color: var(--color-ink);
  }
  .perspective-card__author { transition: color 0.3s ease; }
  .perspective-card:hover .perspective-card__author,
  .perspective-card:focus-visible .perspective-card__author { color: var(--color-ink); }
  .perspective-card__top { display: block; margin-block-end: 2rem; }
  .perspective-card img { inline-size: 100%; }
  .perspective-card__title { display: inline-block; padding: 1.5rem 1.25rem; font-size: var(--text-body); line-height: 1.375; }
  .perspective-card__author {
    padding: 1rem 1.25rem;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.025em;
    color: var(--color-muted);          /* live's #8e8e8e is too light for small text */
  }
  .perspectives-teaser__more { text-align: end; }
  .perspectives-teaser__more .arrow-link { inline-size: 10rem; margin-block-start: 4rem; text-align: end; }

  @media (width >= 48rem) {
    .companies-intro { flex-direction: row; padding-block-start: 0.5rem; }
    .companies-intro__panel { order: 0; }
    .companies-intro__blocks { align-self: flex-start; transform: none; margin: 6rem 0 0 2rem; }

    .fit { padding-block-start: 8rem; }
    .fit__row { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem; }
    .fit__intro { padding: 0 1.25rem 0 0; }
    .fit__title { margin-block-end: 3rem; }
    .fit__criteria > div { padding: 0 0 4rem 1.25rem; }
    .fit__cta {
      inset-block-start: 5rem;
      max-inline-size: 39.5rem;
      margin-block-start: 0;
      padding: 5rem 4rem;
    }
    .fit__cta-title { line-height: 1.5; }
    .fit__cta .arrow-link { margin-block-start: 1.5rem; }

    .perspectives-teaser { padding: 6rem 0.875rem 10rem; }
    .perspectives-teaser__inner { padding-inline: 0.875rem; }
    .perspectives-teaser__grid { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; margin-block-start: 1rem; }
    .perspective-card__top { margin-block-end: 1.5rem; }
    .perspectives-teaser__more .arrow-link { inline-size: 100%; margin-block-start: 5rem; }
  }
  @media (width >= 64rem) {
    .companies-intro__blocks { margin-inline-start: 11rem; }
    .fit__intro { padding-inline-end: 4rem; }
    .fit__criteria > div { padding-inline-start: 2.5rem; }
  }
  @media (width >= 96rem) {
    .fit__row { max-inline-size: 80rem; }
    .fit__criteria { max-inline-size: 32rem; }
  }

  /* Contact --------------------------------------------------------------- */
  .contact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact__image { display: block; flex: 1 0 0%; inline-size: 100%; margin-block-start: 1rem; }
  .contact__image img { inline-size: 100%; }
  .contact__panel {
    position: relative;
    inset-block-start: -2.5rem;
    flex: 1 1 auto;
    inline-size: 91.666667%;
    margin-inline: 1rem;
    padding: 5rem 0 10rem;
    background: var(--color-paper);
  }

  /* Underlined fields; placeholders show the field names, and each field
     also has a real (visually hidden) label for assistive technology */
  .contact-form__field { margin-block-end: 2.5rem; }
  .contact-form__field--email { margin-block-end: 7rem; }
  .contact-form input,
  .contact-form textarea {
    display: block;
    inline-size: 100%;
    padding: 1rem 0;
    border: 0;
    border-block-end: 2px solid var(--color-field-line);
    border-radius: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.025em;
    color: var(--color-ink);
    appearance: none;
  }
  .contact-form textarea {
    line-height: 1.375;          /* live's 24px line on 36px text made lines overlap */
    resize: none;
    overflow: hidden;
    field-sizing: content;       /* grows with the message; site.js covers older browsers */
    min-block-size: calc(1lh + 2rem + 2px);
  }
  .contact-form ::placeholder { color: var(--color-muted); opacity: 1; }
  /* Focus changes the underline's color only, never its weight */
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-block-end-color: var(--color-ink);
  }
  /* A field with a problem: red underline (kept while it's being fixed),
     and its message just below */
  /* Problem fields: underline in true brand orange (3.5:1, enough for a
     control edge), deepening on focus; message text in the deepened orange */
  .contact-form [aria-invalid="true"] { border-block-end-color: var(--color-accent); }
  .contact-form [aria-invalid="true"]:focus { border-block-end-color: var(--color-error); }
  .contact-form__field-error {
    margin-block-start: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-error);
  }

  .cf-turnstile.is-shown { margin-block-end: 1.5rem; }   /* room above Send when the checkbox appears */
  .contact-form__submit {
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-ink);
    cursor: pointer;
  }

  .contact-form__success,
  .contact-form__errors {
    margin-block-end: 2.5rem;
    padding-inline-start: 1rem;
    border-inline-start: 4px solid var(--color-accent);
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .contact-form__errors { border-inline-start-color: var(--color-error); }
  .contact-form__errors:focus { outline: none; }
  .contact-form__errors ul { margin-block-start: 0.5rem; }
  .contact-form__errors a { color: var(--color-error); text-underline-offset: 0.2em; }

  .contact-form__trap {
    position: absolute;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }

  @media (width >= 48rem) {
    .page-intro--contact .page-intro__title { margin-block-start: -1rem; }

    .contact { flex-direction: row; align-items: flex-start; }
    .contact__image { max-inline-size: 24rem; }
    .contact__panel {
      inset-block-start: 0;
      inline-size: auto;
      max-inline-size: 28rem;
      margin-inline: 0;
      padding: 4rem 1.75rem 7rem 0;
    }
    /* the white panel reaches back over the photo */
    .contact__panel::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: -4rem;
      inline-size: 4rem;
      background: inherit;
    }
  }
  @media (width >= 64rem) {
    .contact__image { max-inline-size: 28rem; }
    .contact__panel { max-inline-size: 39.5rem; padding: 4rem 5rem 8rem 1.25rem; }
    .contact__panel::before { inset-inline-start: -5rem; inline-size: 5rem; }
    .contact-form__field--email { margin-block-end: 9rem; }
    .contact-form input,
    .contact-form textarea { font-size: 2.25rem; }
    .contact-form__submit { font-size: 1.5rem; }
  }
  @media (width >= 80rem) {
    .contact__image { max-inline-size: 39.5rem; }
    .contact__panel { max-inline-size: 52rem; }
  }

  /* Portfolio ------------------------------------------------------------- */
  .portfolio { margin-block-start: 1.25rem; padding-block: 1.25rem 6rem; background: var(--color-mist); }
  .portfolio__list { max-inline-size: 48rem; margin-inline: auto; padding-inline: 1rem; }
  .project { display: flex; flex-direction: column; align-items: center; margin-block-end: 3rem; }
  .project__image { inline-size: 100%; }
  .project__image img { inline-size: 100%; }
  .project__info { display: flex; align-items: center; justify-content: center; padding-block: 2rem; }
  .project__content { padding-block-start: 1.5rem; }
  .project__name img { inline-size: auto; max-block-size: 3.5rem; margin-block-end: 1.5rem; }
  .project__description { font-size: var(--text-body); line-height: 1.625; letter-spacing: 0.025em; }
  .project .arrow-link { margin-block-start: 2.5rem; }

  /* Portfolio project page */
  .project-page__top { margin-block-start: 0.75rem; background: var(--color-paper); }
  .project-page__top img {
    inline-size: 100%;
    max-inline-size: 64rem;
    margin: 0 auto -2rem;           /* the photo overlaps the gray band below */
  }
  .project-page__logo-band { background: var(--color-mist); }
  .project-page__logo-wrap { max-inline-size: 64rem; margin-inline: auto; }
  .project-page__logo {
    position: relative;
    z-index: 1;
    margin-inline-end: 1.25rem;
    padding-block: 2.5rem;
    background: var(--color-mist);
  }
  .project-page__logo img { inline-size: auto; max-block-size: 4rem; margin-inline: 1rem; }
  .page-builder--project { padding: 0.5rem 1rem 0; background: var(--color-mist); }
  .project-page__back {
    /* right-aligned within a centered 67rem column */
    padding: 4.5rem max(1rem, (100% - 67rem) / 2 + 1rem) 12rem;
    background: var(--color-mist);
    text-align: end;
  }

  @media (width >= 48rem) {
    .portfolio { padding-block-start: 4rem; }
    .portfolio__list { padding-inline: 1.75rem; }
    .project { margin-block-end: 5rem; }
    .project__info { padding-block: 2.5rem; }
    .project__name img { max-block-size: 5rem; margin-block-end: 2.5rem; }

    .project-page__top { margin-block-start: 0; }
    .project-page__top img { padding-inline: 1.75rem; margin-block-end: -5rem; }
    .project-page__logo-wrap { padding-inline: 1.75rem; }
    .project-page__logo { inline-size: 40%; margin-inline-end: 0; padding-block: 4rem; }
    .project-page__logo img { max-block-size: 6rem; margin-inline: 0 5rem; }
    .page-builder--project { padding: 3rem 1.75rem 0; }
    .project-page__back { padding: 6.25rem max(1.75rem, (100% - 67rem) / 2 + 1.75rem) 11.75rem; }
  }
  @media (width >= 64rem) {
    .portfolio { padding-block-end: 10rem; }
    .portfolio__list { max-inline-size: 75rem; padding-inline: 0; }
    .project { flex-direction: row; }
    .project__image { inline-size: 50%; order: 1; }
    .project--flip .project__image { order: 3; }
    .project__info { inline-size: 50%; order: 2; padding: 0 2.5rem; }
    .project__content { max-inline-size: 26rem; padding-block-start: 0; }
  }

  /* Perspectives article ---------------------------------------------------- */
  .site-header--article { block-size: 11rem; }

  .article { display: flex; flex-direction: column; align-items: flex-end; }
  /* On phones the byline column is just a white tab cutting into the header */
  .article__byline {
    position: relative;
    inset-block-start: -2.5rem;
    inline-size: 41.666667%;
    block-size: 2.5rem;
    background: var(--color-paper);
  }
  .article__byline > * { display: none; }
  .article__author {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);          /* live's #8e8e8e is too light for this size */
  }
  .article__body {
    position: relative;
    align-self: stretch;
    padding: 0.5rem 1rem 0;
    background: var(--color-paper);
  }
  .article__head { max-inline-size: 52rem; margin-block-end: 2rem; }
  .article__title {
    margin-block-end: 1.5rem;
    font-size: var(--text-title);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .article__byline-inline { display: flex; align-items: center; gap: 1rem; margin-block-end: 3.5rem; }
  .article__intro { max-inline-size: 46rem; font-size: var(--text-lead); line-height: 1.375; }
  .article__text { max-inline-size: 46rem; font-size: var(--text-body); line-height: 1.625; }
  .article__text > * + * { margin-block-start: 1.625em; } /* one blank line between paragraphs, as live */
  .article__text + .article__text { margin-block-start: 1.625em; }   /* a list set gets the same break as a paragraph */
  .article__text :is(ol, ul) { padding-inline-start: 1.5rem; }
  .article__text ol { list-style: decimal; }   /* live's numbered lists */
  .article__text ul { list-style: disc; }
  .article__text li + li { margin-block-start: 0.25em; }
  .article__text h2 {                 /* section headings, in red like the feature-block titles */
    margin-block-start: 3.65625rem;   /* one and a half blank lines of body text above */
    font-size: 2rem;                  /* 32px: large text, so the brand orange passes (3.53:1) */
    line-height: 1.375;
    color: var(--color-accent);
  }
  .article__text h2 + * { margin-block-start: 1rem; }
  .article__image { max-inline-size: 54.3rem; }
  .article__image img { inline-size: 100%; }
  .article__end { inline-size: 1rem; block-size: 1rem; margin-block-start: 1.5rem; background: var(--color-accent); }

  .perspectives-teaser--related { margin-block-start: 6rem; padding-block-end: 11rem; }
  .perspectives-teaser--index { margin-block-start: 1.25rem; }
  .perspectives-teaser--index .perspectives-teaser__grid { margin-block-start: 0; }

  @media (width >= 48rem) {
    .site-header--article { block-size: 18rem; }
    .article { flex-direction: row; align-items: stretch; }
    .article__byline {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      align-items: flex-end;
      inline-size: auto;
      block-size: auto;
      padding: 8rem 0.5rem 8rem 2.5rem;
    }
    .article__byline > * { display: revert; }
    .article__byline .avatar { display: inline-flex; }
    .article__byline .article__author { margin-block-start: 0.5rem; }
    .article__body { flex: 1 1 auto; inset-block-start: -5rem; padding: 4rem 2.5rem 0; }
    .article__title { margin-block-end: 2rem; }
    .article__byline-inline { display: none; }
    .perspectives-teaser--related { margin-block-start: 0; padding-block-end: 10rem; }
  }
  @media (width >= 64rem) {
    .article__byline { padding-inline-start: 5rem; }
    .article__body { padding-inline-start: 5rem; }
    .article__intro, .article__text { padding-inline-end: 3rem; }
  }

  /* Plain page-builder pages (Legal) --------------------------------------- */
  .page-builder--plain { padding: 3rem 1rem 9rem; background: var(--color-mist); }
  .page-builder--plain > * { margin-block-end: 3.5rem; }

  /* 404 --------------------------------------------------------------------- */
  .page-404 .page-intro > .wrapper { min-block-size: 48vh; }   /* live: below the top margin */
  .page-404__home { padding-block-start: 3rem; }
  .page-404__band { margin-block-start: 1.25rem; padding-block: 1.25rem 6rem; background: var(--color-mist); }

  @media (width >= 48rem) {
    .page-builder--plain { padding: 5rem 1.75rem 9rem; }
    .page-404__band { padding-block-start: 4rem; }
  }
  @media (width >= 64rem) {
    .page-404__band { padding-block-end: 10rem; }
  }
}


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}