/* ============================================================
   Holdpoint — site layout (extends colors_and_type.css tokens)
   Layout + section composition only. All color/type from tokens.
   ============================================================ */

   * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg1);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* Wide-margin content frame — never a tight centred column */
  .page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  
  /* ---------- Nav ---------- */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(245, 245, 245, 0.92);
    border-bottom: 1px solid var(--hairline);
  }
  
  .site-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  
  .site-nav__brand {
    font-size: 1.25rem;
    text-decoration: none;
  }
  
  .site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-7);
  }
  
  .site-nav__link {
    font-size: 0.9375rem;
    color: var(--fg1);
    text-decoration: none;
    transition: color 140ms ease;
  }
  
  .site-nav__link:hover {
    color: var(--fg3);
  }
  
  .site-nav__cta {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    transition: color 140ms ease;
  }
  
  .site-nav__cta:hover {
    color: var(--fg3);
  }
  
  .site-nav {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(245, 245, 245, 0.75);
  }
  
  /* ---------- Hero ---------- */
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-10);
  }
  
  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-9);
    align-items: center;
  }
  
  .hero__heading {
    margin-top: var(--space-5);
    max-width: 14ch;
  }
  
  .hero__lead {
    margin-top: var(--space-6);
    max-width: 44ch;
  }
  
  .hero__cta {
    display: inline-block;
    margin-top: var(--space-7);
    text-decoration: none;
  }
  
  .hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hero__svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
  }
  
  /* hero graphic — cool-toned, restrained, single purple accent */
  .hg-plane {
    fill: none;
    stroke: #c4c6cb;
    stroke-width: 1.5;
  }
  
  .hg-plane--base {
    stroke: #d2d4d8;
  }
  
  .hg-edge {
    stroke: #d2d4d8;
    stroke-width: 1.5;
  }
  
  .hg-spine {
    stroke: #b6b8bd;
    stroke-width: 1.5;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
  }
  
  .hg-node {
    fill: #b0b2b8;
  }
  
  .hg-node--accent {
    fill: var(--accent);
  }
  
  .hg-core {
    fill: #ffffff;
    stroke: #9a9da3;
    stroke-width: 1.5;
  }
  
  .hg-core--accent {
    fill: var(--accent);
    stroke: var(--accent);
  }
  
  /* ---------- Generic section ---------- */
  .section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  section[id] {
    scroll-margin-top: 96px;
  }
  
  .section__head {
    max-width: 64ch;
  }
  
  .section__title {
    margin-top: var(--space-4);
  }
  
  /* What we do — single vertical column of stacked rows */
  .wwd-list { margin-top: var(--space-7); }
  
  .wwd-row {
    position: relative;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--hairline);
  }
  
  .wwd-row:last-child { border-bottom: 1px solid var(--hairline); }
  
  /* All rows — shared overrides */
  .wwd-row .col-head { font-size: 1.44rem; }
  
  .wwd-row .wwd-text {
    max-width: 1000px;
    padding-left: 48px;
  }
  
  .wwd-row .wwd-icon { display: none; }
  
  /* Background image — inside .wwd-text so it moves with padding */
  .wwd-bg-img {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    object-fit: contain;
    opacity: 0.95;
    pointer-events: none;
  }
  
  /* Tablet range only (image hidden below 900px, clear of text above
        1240px): reserve the image's zone with right padding and shrink
        the image a step. */
  @media (min-width: 901px) and (max-width: 1240px) {
    .wwd-row .wwd-text {
      padding-right: 220px;
    }
    .wwd-bg-img {
      width: 170px;
      height: 170px;
      right: 24px;
    }
  }
  
  
  /* far-left solid black bar — appears on hover */
  .wwd-bar {
    position: absolute;
    left: 0;
    top: -1px;
    /* cover the hairline */
    bottom: -1px;
    width: 2px;
    background: var(--fg1);
    opacity: 0;
    transition: opacity 250ms ease;
  }
  
  .wwd-row:hover .wwd-bar {
    opacity: 1;
  }
  
  /* the icon + text block — shifts together 8px on hover */
  .wwd-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    transition: transform 250ms ease;
    will-change: transform;
  }
  
  .wwd-row:hover .wwd-inner {
    transform: translateX(8px);
  }
  
  .wwd-icon {
    flex: none;
    display: block;
    margin-top: 2px;
    color: var(--fg3);
    transition: color 250ms ease;
  }
  
  .wwd-icon svg {
    display: block;
    width: 32px;
    height: 32px;
  }
  
  .wwd-row:hover .wwd-icon {
    color: var(--fg1);
  }
  
  .wwd-text {
    max-width: 68ch;
  }
  
  .wwd-text .col-head {
    max-width: none;
  }
  
  .wwd-text .p {
    margin-top: var(--space-4);
  }
  
  .col-head {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--tracking-snug);
    color: var(--fg1);
    margin: 0;
    max-width: 22ch;
  }
  
  /* ---------- Who we build for — Tristan's version ----------
        Three text-only cards on the dark panel. No corner brackets.
        Each card: a short accent tick above the label, label, body.
        Hover: faint background lift, tick extends and brightens, label
        catches the accent. Panel keeps extra breathing room at the bottom. */
  .wbf-panel {
    background: #202426;
    border-radius: 6px;
    margin: 0 var(--gutter);   /* integration: aligned with the What-we-build panel */
    padding: 72px 0 calc(72px + 48px);
    /* ^ extra 48px of dark grey at the bottom — tweak the +48px to taste */
  }

  /* section title reads white on the dark panel, and runs a single line */
  .wbf-panel .section__head {
    max-width: none;
  }

  .wbf-panel .section__title {
    color: #ffffff;
  }

  .wbf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
  }

  .wbf-card {
    --wbf-accent: var(--accent);               /* Holdpoint orange from tokens */
    position: relative;
    padding: 40px 28px 44px;
    background: #30353a;                       /* same inner-card shade as What we build */
    border-radius: var(--radius);              /* matches the What-we-build cards */
    cursor: default;
    transition: background 320ms ease;
  }
  .wbf-card:hover,
  .wbf-card:focus-within {
    background: #363b40;                       /* one step lighter on hover */
  }

  /* ---- accent tick above the label ---- */
  .wbf-tick {
    display: block;
    width: 32px;
    height: 1px;
    background: rgba(224, 95, 49, 0.45);
    margin-bottom: 28px;
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease;
  }
  .wbf-card:hover .wbf-tick,
  .wbf-card:focus-within .wbf-tick {
    width: 56px;
    background: var(--wbf-accent);
  }

  /* ---- type ---- */
  .wbf-card__label {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0 0 16px;
    transition: color 260ms ease;
  }
  .wbf-card:hover .wbf-card__label,
  .wbf-card:focus-within .wbf-card__label {
    color: var(--wbf-accent);
  }
  .wbf-card__body {
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .wbf-tick, .wbf-card, .wbf-card__label { transition: none; }
  }

  /* ---------- What we build — dark flagship panel ----------
        One wide foundation card, three capability cards standing on it,
        joined by hairline stems. Same dark grammar as .wbf-panel. */
  .wwb-panel {
    background: #202426;
    border-radius: 6px;
    margin: 0 var(--gutter);
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
  }

  /* centered header: eyebrow + heading only */
  .wwb__head {
    text-align: center;
  }

  .wwb__title {
    margin: var(--space-4) auto 0;
    color: #ffffff;
    max-width: 18ch;
  }

  /* Foundation — full-width card, text left, lattice right */
  .wwb__foundation {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
    background: #30353a;
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-8);
    margin-top: var(--space-8);
    transition: transform 300ms ease, box-shadow 300ms ease;
    will-change: transform;
  }

  .wwb__foundation:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.45);
  }

  .wwb__foundation-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--tracking-snug);
    color: #ffffff;
    margin: var(--space-3) 0 0;
    transition: color 300ms ease;
  }

  .wwb__foundation:hover .wwb__foundation-title {
    color: #e05f31;
  }

  .wwb__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: rgba(255, 255, 255, 0.70);
    margin: var(--space-4) 0 0;
  }

  .wwb__foundation-art {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Connector stems between foundation and the three cards */
  .wwb-stems {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .wwb-stems span {
    justify-self: center;
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.22);
  }

  /* Three capability cards */
  .wwb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .wwb-card {
    background: #30353a;
    border-radius: var(--radius);
    padding: var(--space-7) var(--space-6) var(--space-6);
    transition: transform 300ms ease, box-shadow 300ms ease;
    will-change: transform;
  }

  .wwb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.45);
  }

  .wwb-card__art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) 0 var(--space-6);
  }

  .wwb-card__label {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--tracking-snug);
    color: #ffffff;
    margin: var(--space-3) 0 0;
    transition: color 300ms ease;
  }

  .wwb-card:hover .wwb-card__label {
    color: #e05f31;
  }

  .wwb-card__body {
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, 0.70);
  }

  /* second and later paragraphs sit a little further apart */
  .wwb-card__body + .wwb-card__body {
    margin-top: var(--space-4);
  }

  /* Line-art: hairline white strokes, one keyed accent element per card */
  .wwb-art {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
    color: rgba(255, 255, 255, 0.85);
  }

  .wwb-art--wide {
    max-width: 300px;
  }

  .wwb-art rect,
  .wwb-art line,
  .wwb-art circle {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
  }

  .wwb-art .wwb-key {
    transition: stroke 300ms ease, fill 300ms ease;
  }

  .wwb__foundation:hover .wwb-key,
  .wwb-card:hover .wwb-key {
    stroke: #e05f31;
  }

  .wwb__foundation:hover circle.wwb-key {
    fill: #e05f31;
  }

  /* ---------- What we offer, detail page ----------
        Placeholder layout: measured prose column with a sticky contents
        rail on wide screens. Plain by design so the visual treatment can
        be settled separately without touching the content. */
  .offer-page {
    padding: var(--space-9) 0 var(--space-10);
  }

  .offer__head {
    max-width: 62ch;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--hairline);
  }

  .offer__title {
    margin-top: var(--space-5);
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  }

  .offer__lead {
    margin-top: var(--space-5);
  }

  .offer__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(var(--space-7), 6vw, var(--space-9));
    margin-top: var(--space-8);
    align-items: start;
  }

  /* contents rail */
  .offer__toc {
    position: sticky;
    top: 120px;
  }

  .offer__toc-label {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fg3);
  }

  .offer__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--hairline);
  }

  .offer__toc-list li + li {
    margin-top: var(--space-3);
  }

  .offer__toc-link {
    display: block;
    padding-left: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--fg2);
    text-decoration: none;
    transition: color 160ms ease;
  }

  .offer__toc-link:hover {
    color: var(--accent);
  }

  /* prose column */
  .offer__body {
    max-width: 68ch;
  }

  .offer__section + .offer__section {
    margin-top: var(--space-9);
    padding-top: var(--space-8);
    border-top: 1px solid var(--hairline);
  }

  .offer__h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    scroll-margin-top: 120px;
  }

  .offer__h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    color: var(--fg1);
    margin: 0;
  }

  .offer__p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-prose);
    color: var(--fg2);
    margin: var(--space-5) 0 0;
  }

  .offer__p--lead {
    color: var(--fg1);
  }

  /* the three reasons, set off from the surrounding prose */
  .offer__points {
    margin-top: var(--space-6);
    padding-left: var(--space-6);
    border-left: 2px solid var(--hairline-strong);
  }

  .offer__point + .offer__point {
    margin-top: var(--space-6);
  }

  .offer__point .offer__p {
    margin-top: var(--space-3);
  }

  .offer__cta {
    margin-top: var(--space-9);
    padding-top: var(--space-8);
    border-top: 1px solid var(--hairline);
  }

  .offer__cta .btn-accent {
    display: inline-block;
    text-decoration: none;
  }

  @media (max-width: 900px) {
    .offer-page  { padding-top: var(--space-8); }
    .offer__grid { grid-template-columns: 1fr; }
    .offer__toc  { display: none; }
  }

  /* "Learn more" — bottom right of the panel, through to the detail page.
        Rest: orange with a faint underline. Hover: underline reaches full
        width and the arrow slides right, so it reads as clickable. */
  .wwb__more {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-7);
  }

  .wwb__more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    padding-bottom: 4px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    transition: color 200ms ease;
  }

  .wwb__more-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    transform: scaleX(0.55);
    transform-origin: left;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  }

  .wwb__more-link:hover,
  .wwb__more-link:focus-visible {
    color: #f07a4f;
  }

  .wwb__more-link:hover::after,
  .wwb__more-link:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .wwb__more-link:focus-visible {
    outline: none;
  }

  .wwb__more-arrow {
    display: inline-flex;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wwb__more-link:hover .wwb__more-arrow,
  .wwb__more-link:focus-visible .wwb__more-arrow {
    transform: translateX(5px);
  }

  @media (prefers-reduced-motion: reduce) {
    .wwb__more-link::after,
    .wwb__more-arrow { transition: none; }
  }

  .wwb__close {
    margin: var(--space-8) auto 0;
    max-width: 70ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Tablets and below: the three-column grid gets too narrow, producing
        tall ribbons of text. Stack the foundation and cards instead. */
  @media (max-width: 1200px) {
    .wwb__foundation {
      grid-template-columns: 1fr;
      gap: var(--space-6);
      padding: var(--space-6);
    }
    .wwb-stems { display: none; }
    .wwb-grid {
      grid-template-columns: 1fr;
      margin-top: var(--space-6);
    }
  }

  /* Why this, why now */
  .why__title {
    max-width: 22ch;
  }
  
  .why__title-muted {
    color: var(--fg3);
  }
  
  .section-prose {
    margin-top: var(--space-8);
  }
  
  .section-prose>.p {
    color: var(--fg2);
    max-width: 64ch;
  }
  
  .section-prose>.p+.p {
    margin-top: var(--space-5);
  }
  
  /* The Shift — Palantir-style centred treatment */
  .shift-statement {
    margin: 0 auto;
    max-width: 38ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--fg1);
  }
  
  /* The Shift — Palantir-style centred treatment */
  .shift-statement {
    margin: 0 auto;
    max-width: 38ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--fg1);
  }
  
  /* "There is now." — the punchline lands in a muted colour. Not interactive. */
  .shift-statement__trigger {
    color: var(--fg3);
  }
  
  .shift-statement__hidden {
    color: transparent;
  }
  
  /* The problem — full-bleed grey band, tonally separated from the page */
  #the-problem {
    background-color: #ebebeb;
  }
  
  /* Left-aligned two-column layout */
  .problem {
    text-align: left;
  }
  
  /* heading + graphic left, prose right */
  .problem__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(var(--space-7), 6vw, var(--space-10));
    align-items: start;
  }
  
  .problem__heading {
    margin-top: var(--space-6);
    max-width: 14ch;
  }
  
  .problem__dot {
    color: var(--accent);
  }
  
  /* Body copy — right column; pushed down so the column doesn't hug the
        top while the taller left column leaves space beneath it */
  .problem__prose {
    max-width: 62ch;
    margin: var(--space-9) 0 0;
    text-align: left;
  }
  
  .problem__prose p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-prose);
    color: var(--fg2);
    margin: 0 0 var(--space-5);
    break-inside: avoid;
    text-wrap: pretty;
    text-align: left;
  }
  
  .problem__prose p:last-child {
    margin-bottom: 0;
  }
  
  .problem__prose strong {
    color: var(--fg1);
    font-weight: 600;
  }
  
  /* ProblemGraph container — sits under the heading in the left column */
  .problem__media {
    max-width: 560px;
    width: 100%;
    margin: var(--space-8) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Keep .pg-wrap in case ProblemGraph uses it internally */
  .pg-wrap {
    width: 100%;
    transform: translateX(30px);
  }
  
  /* Caption below the graph — runs the full width of the left column */
  .problem__caption {
    margin: var(--space-7) 0 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.0625vw, 1.009375rem);
    font-weight: 400;
    font-style: italic;
    color: var(--fg1);
    letter-spacing: -0.005em;
  }
  /* Closing statement */
  .problem__closer {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6875rem; /* 27px */
    color: var(--fg1);
    margin: var(--space-8) 0 0;
  }
  
  /* Small screens */
  @media (max-width: 720px) {
    .problem__pole    { font-size: 52px; }
    .problem__binary  { gap: 22px !important; } /* overrides the JS reveal gap */
    .problem__sub     { font-size: 1.3125rem; }
    .problem__prose   { column-count: 1; width: 100%; }
    .problem__closer  { font-size: 1.375rem; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .problem__binary {
      gap: 44px !important;
      color: var(--fg1) !important;
    }
  }
  
  /* (Leave the .pg-* rules — node, edge, ring, tip — exactly as they are.
        Only the section layout above changes.) */
  
  /* ---------- Contact CTA tiles (home) — framed band, inset rounded tiles ---------- */
  .cta-tiles {
    padding: var(--space-8) 0 0;
  }
  
  .cta-tiles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  
  .cta-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    border-radius: 12px;
    padding: var(--space-6) clamp(28px, 4vw, 56px) var(--space-9);
    text-decoration: none;
    transition: background-color 250ms ease, color 250ms ease;
  }
  
  .cta-tile__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    margin: 0;
    transition: transform 250ms ease;
  }
  
  .cta-tile__line {
    flex: none;
    width: 56px;
    height: 2px;
    background: currentColor;
    transition: transform 250ms ease;
  }
  
  /* left: light grey → slightly darker grey on hover (text stays dark) */
  .cta-tile--light {
    background: #e0e0e0;
    color: #111111;
  }
  
  .cta-tile--light:hover {
    background: #c6c6c6;
  }
  
  /* right: near-black → mid grey on hover (text stays white) */
  .cta-tile--dark {
    background: #202426;
    color: #ffffff;
  }
  
  .cta-tile--dark:hover {
    background: #868686;
  }
  
  /* pinch toward tile centre on hover */
  .cta-tile:hover .cta-tile__title {
    transform: translateX(6px);
  }
  
  .cta-tile:hover .cta-tile__line {
    transform: translateX(-6px);
  }
  
  /* ---------- Contact page ---------- */
  .contact-page {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  
  .contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
  
  .contact__title {
    margin-top: var(--space-4);
  }
  
  .contact__lead {
    margin-top: var(--space-6);
    max-width: 42ch;
  }
  
  .contact__meta {
    margin: var(--space-8) 0 0;
  }
  
  .contact__meta-row {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--hairline);
  }
  
  .contact__meta-row:last-child {
    border-bottom: 1px solid var(--hairline);
  }
  
  .contact__meta-key {
    flex: none;
    width: 64px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg3);
  }
  
  .contact__meta-val {
    margin: 0;
  }
  
  /* ---------- Form ---------- */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .field__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg2);
  }
  
  .field__input {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--fg1);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  
  .field__input::placeholder {
    color: var(--fg3);
  }
  
  .field__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  
  .field__input--area {
    resize: vertical;
    line-height: var(--leading-body);
    min-height: 120px;
  }
  
  .form__submit {
    width: 100%;
    margin-top: var(--space-2);
  }
  
  .form__note {
    margin: 0;
  }
  
  .form__error {
    margin: 0;
    color: var(--accent-press);
  }
  
  /* Honeypot field — off-screen for people, present for bots */
  .form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  
  .contact__sent {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-8);
    background: var(--surface);
  }
  
  .contact__sent .p {
    margin-top: var(--space-3);
  }
  
  .contact__back {
    display: inline-block;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
  }
  
  .contact__back:hover {
    color: var(--accent-press);
  }
  
  /* ---------- Section divider — plain full-bleed hairline, no markers ---------- */
  .section-rule {
    padding: var(--space-8) 0;
  }
  
  .section-rule__line {
    border-top: 1px solid var(--fg2);
  }
  
  /* ---------- Footer ---------- */
  .site-footer {
    padding-bottom: var(--space-8);
  }
  
  .site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  
  .site-footer__brand {
    font-size: 1.125rem;
    text-decoration: none;
  }
  
  .site-footer__meta {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  
  .site-footer__link {
    color: var(--fg2);
    text-decoration: none;
    transition: color 140ms ease;
  }
  
  .site-footer__link:hover {
    color: var(--accent);
  }

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

  .site-footer__icon {
    display: inline-flex;
    align-items: center;
    color: var(--fg2);
    transition: color 140ms ease;
  }

  .site-footer__icon:hover {
    color: var(--accent);
  }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .wwd-inner {
      gap: var(--space-5);
    }
  }
  
  /* Who we build for — stack on small screens (Tristan's breakpoint) */
  @media (max-width: 900px) {
    .wbf-grid { grid-template-columns: 1fr; gap: 20px; }
  }
  
  @media (max-width: 900px) {
  
    .hero__grid,
    .problem__grid,
    .contact__grid {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
  
    .hero__media {
      order: 1;
    }
  
    .hero__svg {
      max-width: 360px;
    }
  
    .cta-tiles__grid {
      grid-template-columns: 1fr;
    }
  }
  /* ============================================================
     MOBILE — hamburger nav + layout + type scale
     ============================================================ */
  
  /* -- Hamburger button: hidden on desktop, visible on mobile -- */
  .site-nav__burger {
    display: none !important;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--fg1);
  }
  
  /* -- Mobile overlay menu: hidden on desktop -- */
  .site-nav__overlay {
    display: none !important;
  }
  
  @keyframes nav-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  .site-nav__overlay-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  
  .site-nav__overlay-link {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--fg1);
    text-decoration: none;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hairline);
  }
  
  .site-nav__overlay-cta {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    padding: var(--space-3) 0;
    margin-top: var(--space-4);
  }
  
  /* ---- Breakpoint: tablet (≤ 900px) ---- */
  @media (max-width: 900px) {
  
    /* Show hamburger, hide desktop links */
    .site-nav__burger { display: block !important; }
    .site-nav__links  { display: none !important; }
  
    /* Overlay menu — only enabled on mobile */
    .site-nav__overlay {
      display: flex !important;
      position: fixed;
      inset: 0;
      top: 72px;
      background: #f5f5f5;
      z-index: 99;
      flex-direction: column;
      padding: var(--space-8) var(--gutter);
      animation: nav-overlay-fade 200ms ease;
    }
  
    /* Tighten section spacing */
    .hero          { padding-top: var(--space-7); padding-bottom: var(--space-8); }
    .hero__heading { max-width: none; }
    .section       { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  
    /* Type scale down */
    .h1            { font-size: clamp(2.25rem, 8vw, 3rem); }
    .h2            { font-size: clamp(1.75rem, 5vw, 2.25rem); }
    .lead          { font-size: 1.0625rem; }
  
    /* What-we-do rows: remove left padding, hide bg images */
    .wwd-row .wwd-text {
      padding-left: 0;
    }
  
    .wwd-bg-img    { display: none; }
    .wwd-row       { padding: var(--space-6) 0; }
  
    /* Inset bands (what-we-build, who-we-build-for): less
       horizontal inset on small screens — the inner .page padding
       already provides the breathing room */
    .wwb-panel,
    .wbf-panel     { margin: 0 var(--space-3); }
  
    /* CTA tiles */
    .cta-tile      { padding: var(--space-5) var(--space-5) var(--space-7); }
    .cta-tile__title { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  
    /* Contact page */
    .contact__grid { gap: var(--space-8); }
  
    /* Footer */
    .site-footer__row {
      flex-wrap: nowrap;
      gap: var(--space-4);
    }
  
    .site-footer__brand svg {
      height: 28px;
      width: auto;
    }
  
    .site-footer__meta {
      gap: var(--space-4);
    }
  }
  
  /* ---- Breakpoint: small phone (≤ 480px) ---- */
  @media (max-width: 480px) {
  
    /* Even tighter type */
    .h1              { font-size: 2rem; }
    .h2              { font-size: 1.5rem; }
    .h3              { font-size: 1.25rem; }
    .lead            { font-size: 1rem; }
    .p               { font-size: 1rem; }
  
    /* Hero */
    .hero            { padding-top: var(--space-6); padding-bottom: var(--space-7); }
    .hero__svg       { max-width: 260px; }
  
    /* Problem section */
    .problem__heading { font-size: 1.75rem; }
    .problem__closer  { font-size: 1.125rem; }
    .problem__caption { font-size: 1rem; }
  
    /* CTA tiles */
    .cta-tile__line  { width: 32px; }
  
    /* What-we-do row headings */
    .wwd-row .col-head { font-size: 1.1875rem; }
  
    /* Shift statement */
    .shift-statement { font-size: 1.25rem; }
  
    /* Section rule spacing */
    .section-rule    { padding: var(--space-6) 0; }
  }