/* ── fonts ─────────────────────────────────────────── */
      /* Self-hosted, subset to the 132 characters the site sets, and served
         from this origin: no fonts.googleapis.com round trip before the fonts
         can even start, and no second connection to fonts.gstatic.com. The
         three families are OFL; the licenses sit beside the files in
         assets/fonts, and assets/fonts/README.md records how they were built.
         Archivo and Literata stay variable because the stylesheet drives wdth
         and optical sizing; their axes are clipped to the ranges used here.
         The mono is IBM Plex Mono. A subset is a Modified Version under its
         license and "Plex" is a Reserved Font Name, so the subset carries its
         own name. */
      @font-face {
        font-family: "Archivo";
        src: url("/assets/fonts/archivo-subset.woff2") format("woff2");
        font-weight: 400 800;
        font-stretch: 75% 120%;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Literata";
        src: url("/assets/fonts/literata-subset.woff2") format("woff2");
        font-weight: 300 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Northwork Mono";
        src: url("/assets/fonts/northwork-mono-400.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Northwork Mono";
        src: url("/assets/fonts/northwork-mono-500.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --paper: #e9eae5;
        --paper-2: #dfe1db;
        --ink: #11161c;
        --ink-soft: #586269;
        --plan: #15222f;
        --plan-soft: #94a6b4;
        --draft: #2c6489;
        --draft-lit: #79add2;
        --rule: #c8cac4;
        --card: #f3f4f0;
        --lift: 0 1px 2px rgba(17, 22, 28, 0.05),
          0 10px 26px -14px rgba(17, 22, 28, 0.3);
        --rule-dark: #2e4155;
        --measure: 33rem;
        --gut: clamp(1.25rem, 5vw, 4rem);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        -webkit-text-size-adjust: 100%;
      }

      body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family: "Literata", Georgia, serif;
        font-optical-sizing: auto;
        font-size: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
        line-height: 1.65;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
      }

      .wrap {
        width: 100%;
        max-width: 72rem;
        margin-inline: auto;
        padding-inline: var(--gut);
      }

      /* ── type roles ────────────────────────────────────── */
      .display {
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 118;
        font-weight: 700;
        letter-spacing: -0.028em;
        line-height: 0.98;
        text-wrap: balance;
      }
      .label {
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 78;
        font-weight: 600;
        font-size: 0.74rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      .meta {
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-soft);
      }

      /* ── masthead ──────────────────────────────────────── */
      .masthead {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.6rem 1rem;
        padding-block: 1.5rem;
      }
      .mark {
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 112;
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: inherit;
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .mark:hover {
        color: var(--draft);
      }

      /* ── brand mark ────────────────────────────────────── */
      /* The N as a tile, inlined into both brand links rather than loaded as
         an img so that the three colour variables reach the rect and the two
         paths. Header and footer carry the same markup and differ only in the
         values they set: a navy field with light ink up top, the inverse in
         the band.

         The tile is square and full bleed, and the mark inside it sits where
         icon-512.png puts it, at 61 percent of the tile, so the lockup and the
         app icon are cut from one geometry.

         It is a block rather than a letter, so it centres on the wordmark
         optically. The wordmark is uppercase, so that means the cap band, not
         the x-height: vertical-align middle would centre on the x-height and
         leave the tile sitting 1.3px low. A length instead raises the tile's
         bottom edge that far above the baseline, and half a cap height less
         half a tile puts the two centres together. Archivo's cap height
         measures 0.687em at the weight and width the wordmark uses, so half of
         it is 0.3435em. */
      .brand-mark {
        width: var(--mark-size, 28px);
        height: var(--mark-size, 28px);
        margin-inline-end: 0.6em;
        vertical-align: calc(0.3435em - var(--mark-size, 28px) / 2);
      }
      .brand-mark .mark-field {
        fill: var(--mark-field, #15222f);
      }
      .brand-mark .mark-n {
        fill: var(--mark-ink, #e4ebf1);
      }
      .brand-mark .mark-wedge {
        fill: var(--mark-accent, #79add2);
      }
      .masthead .mark {
        --mark-size: 32px;
        --mark-field: #15222f;
        --mark-ink: #e4ebf1;
        --mark-accent: #79add2;
      }
      /* three items now: wrap with plain gaps when narrow, and only carry
         separators where the row is guaranteed to stay on one line */
      .masthead nav {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.3rem 1.1rem;
      }
      @media (min-width: 23rem) {
        .masthead nav {
          flex-wrap: nowrap;
          gap: 0;
        }
        .masthead nav a + a::before,
        .masthead nav a + .nav-markets > a::before {
          content: "\00b7";
          display: inline-block;
          margin-inline: 1.1rem;
          color: var(--ink-soft);
        }
      }
      .masthead nav a {
        white-space: nowrap;
        color: var(--ink);
        font-size: 0.74rem;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--ink-soft);
        text-underline-offset: 4px;
        transition:
          color 0.15s ease,
          text-decoration-color 0.15s ease;
      }
      .masthead nav a:hover {
        color: var(--draft);
        text-decoration-color: var(--draft);
      }

      /* Markets is a link first. On a desktop pointer it also drops the six
         city pages; a touch device or a phone-width screen gets the link
         alone, so a tap goes straight to /markets. The panel is held closed
         with visibility rather than display, which keeps its links out of the
         tab order until focus enters the item and opens it. */
      .nav-markets {
        position: relative;
      }
      .nav-drop {
        display: none;
      }
      @media (min-width: 46rem) and (hover: hover) and (pointer: fine) {
        .nav-drop {
          display: block;
          position: absolute;
          top: calc(100% + 0.9rem);
          right: 0;
          z-index: 20;
          margin: 0;
          padding: 0.75rem 0;
          list-style: none;
          background: var(--card);
          border: 1px solid var(--rule);
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.15s ease;
        }
        .nav-markets:hover .nav-drop,
        .nav-markets:focus-within .nav-drop {
          opacity: 1;
          visibility: visible;
        }
        /* the panel sits 0.9rem clear of the link, and a cursor crossing that
           gap belongs to neither, so hover drops and the panel closes. This
           bridges the gap without moving the panel. */
        .nav-markets::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          height: 0.9rem;
        }
        /* in the panel these are menu rows, not masthead links: no rule under
           them, no caps, and the whole row takes the pointer */
        .nav-drop li + li {
          margin-top: 0;
        }
        .masthead nav .nav-drop a {
          display: block;
          padding: 0.5rem 1.1rem;
          font-size: 0.9rem;
          letter-spacing: normal;
          text-transform: none;
          text-decoration: none;
          color: var(--ink-soft);
          transition:
            color 0.15s ease,
            background-color 0.15s ease;
        }
        .masthead nav .nav-drop a:hover {
          background: var(--paper-2);
          color: var(--ink);
          text-decoration: none;
        }
      }

      /* ── hero ──────────────────────────────────────────── */
      .hero {
        padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3rem, 7vw, 5rem);
        border-top: 1px solid var(--rule);
      }
      .hero h1 {
        margin: 0 0 2rem;
        font-weight: 800;
        font-size: clamp(2.6rem, 1rem + 6.9vw, 6.5rem);
        max-width: 15ch;
      }
      /* city heads carry longer words ("management"), which overflow a 320px
         column at the default floor. Lower floor only, same cap. */
      .hero--city h1 {
        font-size: clamp(2.15rem, 0.85rem + 6.6vw, 6.5rem);
      }
      .hero h1 span {
        color: var(--draft);
      }
      /* Composed line breaks, desktop only. Below 72rem the column is still
         changing width, so the headline wraps naturally instead. */
      .br-desktop {
        display: none;
      }
      @media (min-width: 72rem) {
        .br-desktop {
          display: inline;
        }
        /* The display line gets its own measure. 72rem is a body-copy cap and
           the headline does not owe it anything; max-content sizes the box to
           the longest composed line, so it grows right off the shared left
           edge. Everything else in the hero stays in the 72rem column. */
        .hero--composed h1 {
          text-wrap: normal;
          width: max-content;
          max-width: 80rem;
        }
      }
      /* Webfont reflow guard, for slow connections only. Self-hosting and
         preloading the fonts settles this on any connection fast enough for
         Archivo to land before first paint: measured, the font is in at 26ms
         against a 137ms first paint, the guard never engages, and CLS is
         0.0000. It engages where that race is lost. On throttled 3G the
         stylesheet finishes at 5.5s, the page paints, and Archivo arrives 1.4s
         later; without a reserve the headline takes a fifth line on the swap
         and drops everything below it 42px, which measured 0.21 CLS at 390px.

         Archivo sets this headline about 7.6% wider than the system fallback,
         and from 364px up that is the difference between four lines and five.
         Reserving five lines (4.9em at the 0.98 line-height) holds the box at
         the height Archivo is going to need. Below 364px both fonts already
         set five lines and the reserve is the natural height, so it costs
         nothing there. 423px is not a design breakpoint: it is the measured
         width where Archivo itself drops to four lines, and past it the
         reserve would hold open 45px of dead space.

         This is pinned to the wrap behaviour of the current headline. If that
         copy changes, the 364-423px band has to be measured again. */
      @media (max-width: 423px) {
        .hero--composed h1 {
          min-height: 4.9em;
        }
      }
      .hero p {
        margin: 0;
        max-width: var(--measure);
        font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
        line-height: 1.55;
        color: var(--ink-soft);
      }
      .hero p + p {
        margin-top: 1.15rem;
      }
      /* the composed headline runs 1058px, so its subhead opens up to meet it
         while staying inside a readable body measure */
      .hero--composed p {
        max-width: 42rem;
      }

      /* ── hero strip ────────────────────────────────────── */
      /* Separators exist only at full measure, where the four items are
         guaranteed one line. A wrapping row can never carry them: whichever
         item owns the separator, it lands at a line edge on wrap. */
      .hero-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        margin: 2.25rem 0 0;
        padding: 1rem 0 0;
        border-top: 1px solid var(--rule);
        list-style: none;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.68rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-soft);
      }
      @media (min-width: 46rem) {
        .hero-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.55rem 2rem;
        }
      }
      /* .wrap is at its 72rem cap here, so the row width stops changing */
      @media (min-width: 72rem) {
        .hero-strip {
          display: flex;
          flex-wrap: nowrap;
          gap: 0;
        }
        .hero-strip li + li::before {
          content: "\00b7";
          margin-inline: 1.1rem;
          color: var(--rule);
        }
      }

      /* ── pillars ───────────────────────────────────────── */
      .pillars {
        display: grid;
        gap: 1rem;
        padding-bottom: clamp(3rem, 7vw, 5rem);
      }
      .pillar {
        padding: 1.9rem clamp(1.15rem, 2.5vw, 1.6rem) 1.75rem;
        background: var(--card);
        border: 1px solid var(--rule);
        border-top: 2px solid var(--draft);
        box-shadow: var(--lift);
      }
      .pillar h2 {
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 104;
        font-weight: 600;
        font-size: 1.22rem;
        letter-spacing: -0.015em;
        line-height: 1.2;
        margin: 0 0 0.5rem;
      }
      .pillar p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 0.98rem;
      }
      @media (min-width: 52rem) {
        .pillars {
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(1rem, 2vw, 1.5rem);
        }
      }

      /* ── prose page ────────────────────────────────────── */
      /* section heads on the same hairline rhythm as .terms, body at a
         reading measure rather than the full column */
      .prose {
        padding-bottom: clamp(3rem, 7vw, 5rem);
      }
      .prose h2 {
        margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem;
        padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
        border-top: 1px solid var(--rule);
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 110;
        font-weight: 700;
        font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
        letter-spacing: -0.022em;
        line-height: 1.2;
      }
      .prose h2:first-child {
        margin-top: 0;
      }
      .prose p {
        max-width: 42rem;
        margin: 0 0 1.15rem;
        color: var(--ink-soft);
      }
      .prose p:last-child {
        margin-bottom: 0;
      }

      /* ── the record ────────────────────────────────────── */
      .record {
        background: var(--plan);
        color: #e4ebf1;
        padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4.5rem, 10vw, 8rem);
      }
      /* location pages: shorter band, tighter rhythm */
      .record--brief {
        padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 6.5vw, 5rem);
      }
      .record--brief .terms-head {
        margin-bottom: 2rem;
      }
      .record--brief .lede {
        margin-bottom: 1.5rem;
      }
      .record--brief .lede:last-child {
        margin-bottom: 0;
      }

      .record-entry + .record-entry {
        margin-top: 3.5rem;
        padding-top: 3.5rem;
        border-top: 1px solid var(--rule-dark);
      }

      /* signature: signed under the proof, on the same divider rhythm as an entry */
      .signature {
        margin-top: 3.5rem;
        padding-top: 3.5rem;
        border-top: 1px solid var(--rule-dark);
      }
      .signature-lines p {
        margin: 0;
        font-size: 0.8rem;
        line-height: 1.85;
        color: var(--plan-soft);
      }
      /* the name reads first; the two lines under it stay quiet */
      .signature-name {
        font-size: 0.9rem;
        color: #e4ebf1;
      }
      .record .label {
        color: var(--draft-lit);
      }
      .record .terms-head .label {
        color: var(--draft-lit);
      }
      /* .terms on the dark band: light-theme rule and text need remapping */
      .record .terms li {
        border-top-color: var(--rule-dark);
      }
      .record .terms span {
        color: var(--plan-soft);
      }
      .record-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem 2rem;
        padding-bottom: 2.5rem;
      }
      .record-head .meta {
        color: var(--plan-soft);
      }
      .record-head .meta a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--rule-dark);
      }
      .record-head .meta a:hover {
        color: var(--draft-lit);
      }
      /* the underline is the link colour, not --rule-dark: a navy hairline on
         the navy band is invisible, which is what made these read as labels */
      .record .record-link {
        color: var(--draft-lit);
        text-decoration: none;
        border-bottom: 1px solid var(--draft-lit);
      }
      .record .record-link:hover {
        color: #e4ebf1;
        border-bottom-color: #e4ebf1;
      }

      .quote {
        max-width: 44rem;
        margin: 0 0 3rem;
        font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
        font-weight: 300;
        line-height: 1.48;
      }
      .quote p {
        margin: 0;
      }
      .quote cite {
        display: block;
        margin-top: 1.4rem;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-style: normal;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }

      .lede {
        max-width: var(--measure);
        margin: 0 0 2.75rem;
        color: var(--plan-soft);
      }
      /* in the proof entries the body copy sits under a quote: same column */
      .record-entry .lede {
        max-width: 44rem;
      }
      /* stacked ledes read as one block, not separate components */
      .lede:has(+ .lede) {
        margin-bottom: 1.5rem;
      }
      .lede strong {
        color: #e4ebf1;
        font-weight: 500;
      }
      .lede a {
        color: #e4ebf1;
        text-decoration: none;
        border-bottom: 1px solid var(--draft-lit);
      }
      .lede a:hover {
        color: var(--draft-lit);
      }
      .legal {
        padding-bottom: 5rem;
      }
      .legal a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--draft);
      }
      .legal a:hover {
        color: var(--draft);
      }

      /* signature: four true corner marks */
      .plat {
        --arm: 20px;
        --hair: 1px;
        padding: 2.25rem clamp(1.1rem, 2.5vw, 2rem);
        background-image:
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit)),
          linear-gradient(var(--draft-lit), var(--draft-lit));
        background-size:
          var(--arm) var(--hair),
          var(--hair) var(--arm),
          var(--arm) var(--hair),
          var(--hair) var(--arm),
          var(--arm) var(--hair),
          var(--hair) var(--arm),
          var(--arm) var(--hair),
          var(--hair) var(--arm);
        background-position:
          left top,
          left top,
          right top,
          right top,
          left bottom,
          left bottom,
          right bottom,
          right bottom;
        background-repeat: no-repeat;
      }

      .plat-head {
        display: none;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--rule-dark);
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 78;
        font-weight: 600;
        font-size: 0.66rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }
      .row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem 2.5rem;
        padding-block: 1rem;
        border-bottom: 1px solid var(--rule-dark);
      }
      .row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }
      .found,
      .fixed {
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
      }
      .found {
        color: var(--plan-soft);
      }
      .fixed {
        color: #e4ebf1;
      }
      .mk {
        flex: none;
        width: 1ch;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.85em;
      }
      .found .mk {
        color: #a9707a;
      }
      .fixed .mk {
        color: var(--draft-lit);
      }
      @media (min-width: 52rem) {
        .plat-head {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2.5rem;
        }
        .row {
          grid-template-columns: 1fr 1fr;
        }
      }

      .finding {
        max-width: 42rem;
        margin: 3.25rem 0 0;
        padding-left: 1.5rem;
        border-left: 2px solid var(--draft-lit);
        color: var(--plan-soft);
        font-size: 1.02rem;
      }
      .finding strong {
        color: #e4ebf1;
        font-weight: 500;
      }
      .record-note {
        max-width: 42rem;
        margin: 1.75rem 0 0;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.74rem;
        line-height: 1.6;
        color: var(--plan-soft);
      }
      .record-visit {
        margin: 1.75rem 0 0;
      }
      .record-more {
        margin: 2.75rem 0 0.75rem;
      }

      /* case study: the same record band, but carrying a whole page. It needs
         a head and a heading step the homepage entries never did; the rules
         are the light-theme ones remapped, same as .terms above. */
      /* two columns on a desktop pointer: the title stack on the left, the
         client's own mark held at a fixed width on the right, both hung off
         the top of the row. Below 46rem the columns stack and the mark sits
         above the label rather than squeezing in beside the headline. */
      .study-head {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1.75rem;
        margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
        padding-bottom: clamp(2rem, 4vw, 2.75rem);
        border-bottom: 1px solid var(--rule-dark);
      }
      /* the mark is dark on light and the band is navy, so it sits on a light
         panel carrying the same hairline the .shot figures use. 180px: the
         badge is a detailed circular thing and its rim type stops reading
         much below that. */
      .study-mark {
        flex: none;
        width: 180px;
        max-width: 100%;
        background: var(--card);
        border: 1px solid var(--rule-dark);
        padding: 0.9rem;
      }
      .study-mark picture,
      .study-mark img {
        display: block;
        width: 100%;
        height: auto;
      }
      @media (min-width: 46rem) {
        .study-head {
          flex-direction: row;
          justify-content: space-between;
          gap: 2.5rem;
        }
        /* hang the panel off the headline rather than the label above it: the
           drop is the line the label sits on (the body strut, 1.65em here) plus
           the headline's own top margin. Both are read from the same values the
           title stack uses, so the two tops stay level as the body size scales
           with the viewport. */
        .study-mark {
          margin-top: calc(1.65em + 0.9rem);
        }
      }
      .study-head h1 {
        margin: 0.9rem 0 0;
        font-weight: 800;
        font-size: clamp(2rem, 0.9rem + 4.3vw, 3.9rem);
        max-width: 18ch;
      }
      /* the sub line and the client's own domain share a baseline, the way
         the homepage header row carries its meta and its link */
      .study-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem 1.75rem;
        margin-top: 1.1rem;
      }
      .study-sub {
        margin: 0;
        color: var(--plan-soft);
      }
      .study h2 {
        margin: clamp(2.75rem, 5.5vw, 4rem) 0 1.75rem;
        padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
        border-top: 1px solid var(--rule-dark);
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 110;
        font-weight: 700;
        font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
        letter-spacing: -0.022em;
        line-height: 1.2;
      }
      .study .quote:last-child {
        margin-bottom: 0;
      }

      /* ── screenshots (dark band) ───────────────────────── */
      /* one component for every screenshot on the band: hairline frame, no
         shadow, caption under it in the same mono idiom as .proof-cap. The
         img carries width and height so the space is held before it loads.
         Wrap the img in an anchor where the shot should open the client's
         site; the figure is the same either way. */
      .shot {
        margin: 3rem 0;
      }
      .shot a,
      .shot picture,
      .shot img {
        display: block;
      }
      .shot img {
        width: 100%;
        height: auto;
        border: 1px solid var(--rule-dark);
      }
      /* the GBP panel is a tall portrait screenshot. Run at the column width it
         dominates the page it is meant to support, so it holds a 520px measure
         and centres in the column. The source is 906px wide, so it is still
         being set down rather than stretched. */
      .shot--panel {
        max-width: 520px;
        margin-inline: auto;
      }
      .shot figcaption {
        margin-top: 0.9rem;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.63rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }

      /* ── proof figures (dark band) ─────────────────────── */
      /* same chart language as the client reports: mono caption bar,
         hairline frame, navy/blue bars, Archivo figures. */
      .proof {
        margin: 3rem 0 0;
        border: 1px solid var(--rule-dark);
        background: rgba(255, 255, 255, 0.022);
      }
      .proof-cap {
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--rule-dark);
        background: rgba(255, 255, 255, 0.03);
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.63rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }
      .proof-body {
        display: grid;
        gap: 2rem;
        padding: 1.6rem 1rem;
      }

      /* score dial */
      .proof-score {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.25rem;
      }
      .proof-dial {
        flex: none;
        width: 84px;
        height: 84px;
      }
      .proof-score-text {
        flex: 1 1 14rem;
        min-width: 0;
        max-width: 38rem;
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--plan-soft);
      }
      .proof-score-text b {
        color: #e4ebf1;
        font-weight: 500;
      }

      /* before/after bars */
      .proof-bars-head {
        margin: 0 0 0.9rem;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 78;
        font-weight: 600;
        font-size: 0.66rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }
      .proof-bar {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.7rem;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }
      .proof-bar + .proof-bar {
        margin-top: 0.5rem;
      }
      .proof-bar i {
        display: block;
        min-width: 2px;
        height: 13px;
        background: var(--draft);
      }
      .proof-bar--after i {
        background: var(--draft-lit);
      }
      .proof-bar b {
        font-weight: 500;
        color: #e4ebf1;
        white-space: nowrap;
        text-align: right;
      }

      /* figure tiles */
      .proof-figs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1.25rem;
      }
      .proof-figs b {
        display: block;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 112;
        font-weight: 700;
        font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
        letter-spacing: -0.03em;
        line-height: 1;
        color: #e4ebf1;
      }
      .proof-figs span {
        display: block;
        margin-top: 0.55rem;
        font-size: 0.82rem;
        line-height: 1.35;
        color: var(--plan-soft);
      }
      @media (min-width: 46rem) {
        .proof-body {
          padding: 1.9rem 1.5rem;
        }
        .proof-figs {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .proof-figs--pair {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          max-width: 34rem;
        }
      }

      /* ── terms ─────────────────────────────────────────── */
      .terms-band {
        padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.5rem);
      }
      .terms-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.75rem 1.5rem;
        margin-bottom: 2.75rem;
      }
      .terms-head .label {
        color: var(--draft);
      }
      .terms-head h2 {
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 110;
        font-weight: 700;
        font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
        letter-spacing: -0.024em;
        margin: 0;
      }
      .terms-band .market-prose {
        margin-bottom: 2.75rem;
      }
      .terms {
        display: grid;
        gap: 1.9rem 3.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .terms li {
        padding-top: 1rem;
        border-top: 1px solid var(--rule);
      }
      .terms b {
        display: block;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 100;
        font-weight: 600;
        font-size: 1.02rem;
        letter-spacing: -0.008em;
        margin-bottom: 0.3rem;
      }
      .terms b a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--ink-soft);
        text-underline-offset: 4px;
        transition:
          color 0.15s ease,
          text-decoration-color 0.15s ease;
      }
      .terms b a:hover {
        color: var(--draft);
        text-decoration-color: var(--draft);
      }
      .terms span {
        color: var(--ink-soft);
        font-size: 0.97rem;
      }
      @media (min-width: 46rem) {
        .terms {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (min-width: 66rem) {
        .terms {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* the city market sections argue in prose rather than terms, on the
         same reading measure .prose uses */
      .market-prose p {
        max-width: 42rem;
        margin: 0 0 1.15rem;
        color: var(--ink-soft);
      }
      .market-prose p:last-child {
        margin-bottom: 0;
      }

      /* ── market note ───────────────────────────────────── */
      .pillars:has(+ .market-note) {
        padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
      }
      .market-note {
        max-width: 42rem;
        margin: 0 0 clamp(3rem, 7vw, 5rem);
        padding-left: 1.5rem;
        border-left: 2px solid var(--draft-lit);
        color: var(--ink-soft);
        font-size: 1.02rem;
      }
      .market-note--lead {
        border-left-color: var(--draft);
        color: var(--ink);
      }

      /* ── pricing ───────────────────────────────────────── */
      .price-band {
        padding-block: 0 clamp(3.5rem, 8vw, 6rem);
      }
      .price {
        display: grid;
        gap: 2rem 3.5rem;
        padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 2rem;
        background: var(--card);
        border: 1px solid var(--rule);
        border-top: 2px solid var(--draft);
        box-shadow: var(--lift);
      }
      .price-head .label {
        display: block;
        color: var(--draft);
        margin-bottom: 0.9rem;
      }
      .price-figure {
        margin: 0;
        font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.9rem);
      }
      .price-figure span {
        font-variation-settings: "wdth" 100;
        font-weight: 400;
        font-size: 0.34em;
        letter-spacing: 0.02em;
        color: var(--ink-soft);
      }
      .price-terms {
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--ink-soft);
        font-size: 0.97rem;
      }
      .price-terms li + li {
        margin-top: 0.45rem;
      }
      .price-cta {
        display: inline-block;
        justify-self: start;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 106;
        font-weight: 700;
        font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
        letter-spacing: -0.012em;
        color: var(--ink);
        text-decoration: none;
        border-bottom: 2px solid var(--draft);
        padding-bottom: 0.2rem;
        transition:
          color 0.18s ease,
          border-color 0.18s ease;
      }
      .price-cta:hover,
      .price-cta:focus-visible {
        color: var(--draft);
        border-color: var(--ink);
      }
      @media (min-width: 52rem) {
        .price {
          grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
          align-items: start;
        }
        .price-cta {
          grid-column: 2;
        }
      }

      /* ── contact ───────────────────────────────────────── */
      .contact {
        background: var(--paper-2);
        padding-block: clamp(3.25rem, 7vw, 5rem);
        border-top: 1px solid var(--rule);
      }
      .contact h2 {
        margin: 0 0 1.4rem;
        font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem);
        max-width: 20ch;
      }
      .contact p {
        max-width: var(--measure);
        color: var(--ink-soft);
        margin: 0 0 2.5rem;
      }
      .mailto {
        display: inline-block;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 106;
        font-weight: 700;
        font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
        letter-spacing: -0.012em;
        color: var(--ink);
        text-decoration: none;
        border-bottom: 2px solid var(--draft);
        padding-bottom: 0.2rem;
        transition:
          color 0.18s ease,
          border-color 0.18s ease;
      }
      .mailto:hover,
      .mailto:focus-visible {
        color: var(--draft);
        border-color: var(--ink);
      }

      /* audit form: hairline fields, same rule language as the rest of the page */
      .audit-form {
        display: grid;
        gap: 1.6rem 2.5rem;
        max-width: 46rem;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .field .label span {
        font-weight: 400;
        letter-spacing: 0.12em;
        color: var(--ink-soft);
      }
      .audit-form input,
      .audit-form textarea {
        width: 100%;
        font-family: "Literata", Georgia, serif;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--ink);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--rule);
        border-radius: 0;
        padding: 0.25rem 0;
        transition: border-color 0.18s ease;
      }
      .audit-form textarea {
        resize: vertical;
      }
      .audit-form input::placeholder {
        color: var(--ink-soft);
        opacity: 0.65;
      }
      .audit-form input:hover,
      .audit-form textarea:hover {
        border-bottom-color: var(--ink-soft);
      }
      .audit-form input:focus,
      .audit-form textarea:focus {
        border-bottom-color: var(--draft);
      }
      .audit-form input:focus-visible,
      .audit-form textarea:focus-visible {
        outline: 2px solid var(--draft);
        outline-offset: 3px;
      }
      .send {
        justify-self: start;
        margin-top: 0.5rem;
        font-family: "Archivo", system-ui, sans-serif;
        font-variation-settings: "wdth" 106;
        font-weight: 700;
        font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
        letter-spacing: -0.012em;
        color: var(--ink);
        background: transparent;
        border: 0;
        border-bottom: 2px solid var(--draft);
        border-radius: 0;
        padding: 0 0 0.2rem;
        cursor: pointer;
        transition:
          color 0.18s ease,
          border-color 0.18s ease;
      }
      .send:hover,
      .send:focus-visible {
        color: var(--draft);
        border-color: var(--ink);
      }
      /* honeypot: off-screen, never focusable */
      .hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      @media (min-width: 46rem) {
        .audit-form {
          grid-template-columns: 1fr 1fr;
        }
        .field--wide {
          grid-column: 1 / -1;
        }
      }

      footer {
        background: var(--plan);
        color: var(--plan-soft);
        padding-block: 4rem 2.5rem;
      }
      .foot-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2.5rem 4rem;
      }
      .foot-brand {
        max-width: 24rem;
      }
      .foot-mark {
        display: block;
        font-family: "Archivo", system-ui, sans-serif;
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #ffffff;
        text-decoration: none;
      }
      .foot-mark:hover {
        color: var(--draft-lit);
      }
      .foot-mark {
        --mark-size: 40px;
        --mark-field: #e9eae5;
        --mark-ink: #15222f;
        --mark-accent: #79add2;
      }
      .foot-line {
        margin: 0.85rem 0 0;
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--plan-soft);
      }
      .foot-head {
        display: block;
        margin-bottom: 0.45rem;
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--plan-soft);
      }
      .foot-links a {
        display: block;
        color: #e4ebf1;
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.95;
      }
      .foot-links a:hover {
        color: var(--draft-lit);
      }
      .foot-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 2rem;
        margin-top: 3.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--rule-dark);
        font-family: "Northwork Mono", ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .foot-bottom a {
        color: inherit;
        text-decoration: none;
      }
      .foot-bottom a:hover {
        color: var(--draft-lit);
      }
      .foot-legal a + a {
        margin-left: 1.75rem;
      }

      a:focus-visible {
        outline: 2px solid var(--draft);
        outline-offset: 3px;
      }

      .reveal {
        opacity: 0;
        transform: translateY(8px);
      }
      .reveal.in {
        opacity: 1;
        transform: none;
        transition:
          opacity 0.45s ease,
          transform 0.45s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
        }
        .reveal.in {
          transition: none;
        }
      }