/* ==========================================================================
   greencyber.ai, the site system.

   Two registers, one page, and the fold is the join.

   Above the fold the page is Apple: near black ground, one idea, enormous
   quiet type, five tiles and nothing competing with them. Below the fold it
   is a broadsheet: light ground, columns, hairline rules, figures set in the
   sans, an argument that rewards reading. Adam ruled that shape on 19 August
   2026 and it is the whole design.

   Every colour and typeface here is read from the same toolkit values the
   landing pages use, via go-greencyber/assets/css. Nothing is sampled by eye.
   The one value that is not in the toolkit is --ink, the almost black green,
   which Adam asked for on 12 August and which the landing pages already ship.
   It is recorded as a toolkit change to confirm rather than adopted quietly.

   Imagery rule, enforced structurally. There is no decorative image slot in
   this file. The only photographs the system can carry are photographs of
   Adam, and the only landscape is the forest road, which is ghosted so far
   back that it reads as paper texture rather than as a picture of a forest.
   ========================================================================== */

:root {
  /* Dark register, above the fold. */
  --ink:        #0E1409;
  --panel:      #17220D;
  --raised:     #1A2411;
  --d-display:  #F4F3EA;
  --d-body:     #BCC8AE;
  --d-second:   #AAB79C;
  --d-kicker:   #B3C09F;
  --d-footer:   #7F8A72;
  --d-rule:     rgba(244, 243, 234, .13);
  --d-rule-firm:rgba(244, 243, 234, .26);

  /* Light register, the broadsheet below the fold. */
  --ground:     #F4F3EA;
  --recessed:   #EDECDD;
  --raised-l:   #F7F6EC;
  --display:    #1A2411;
  --standfirst: #3D4737;
  --body:       #4C5546;
  --kicker:     #77826A;
  --footer:     #8B937E;
  --rule:       rgba(26, 36, 17, .14);
  --rule-firm:  rgba(26, 36, 17, .30);

  --accent:     #C9F22D;

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 34rem;
  --gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --band:    clamp(4rem, 8vw, 7.5rem);
  --ease:    cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--d-body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -.008em;
  text-wrap: balance;
  color: var(--d-display);
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
a { color: inherit; }

/* Load bearing brand rule, enforced here rather than remembered. Every
   figure is set in the sans in both registers, because a display serif
   setting numerals is what put the wrong price in front of a chief
   executive on 6 August 2026. */
.fig, .stat-n, .num, time, output, .tile-n {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.wrap { max-width: 78rem; margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 58rem; margin: 0 auto; padding-inline: var(--gutter); }

.kicker {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--d-kicker);
  margin: 0 0 1.25rem;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 700; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* --------------------------------------------------------------------------
   Masthead. Apple discipline: the mark, and one way forward.
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 20, 9, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.masthead.is-scrolled { border-bottom-color: var(--d-rule); }

.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4.25rem;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { height: 1.85rem; width: auto; display: block; }
.brand span {
  font-family: var(--sans); font-weight: 700; font-size: .9375rem;
  letter-spacing: .01em; color: var(--d-display);
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: var(--d-second); transition: color .2s var(--ease);
}
.nav a:hover { color: var(--d-display); }
.nav .nav-cta {
  border: 1px solid var(--d-rule-firm); border-radius: 999px;
  padding: .5rem 1.1rem; color: var(--d-display);
}
.nav .nav-cta:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 30rem) { .btn { white-space: nowrap; } }

.nav-toggle {
  display: none; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--d-rule-firm); border-radius: 999px;
  color: var(--d-display); font-family: var(--sans); font-size: .8125rem;
  font-weight: 600; padding: .5rem .9rem; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: .85rem; height: 1.5px; background: currentColor; content: "";
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -.28rem; }
.nav-toggle-bars::after { position: absolute; top: .28rem; }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .masthead .wrap { position: relative; }
  .nav {
    position: absolute; top: calc(100% + .5rem); right: var(--gutter);
    left: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border: 1px solid var(--d-rule);
    border-radius: .75rem; padding: .5rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem .9rem; border-radius: .5rem; }
  .nav a:hover { background: var(--ink); }
  .nav .nav-cta { border: 0; color: var(--accent); }
}

/* At phone width the masthead is the widest thing on the page, and a
   masthead wider than the viewport gives the whole site a horizontal
   scrollbar. The wordmark goes, the mark stays. */
@media (max-width: 26rem) {
  .brand span { display: none; }
  .nav .nav-cta { padding: .45rem .9rem; font-size: .8125rem; }
  .masthead .wrap { height: 3.75rem; }
}

/* --------------------------------------------------------------------------
   Hero. One idea, and the forest road so far back it reads as texture.
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: clamp(4rem, 11vh, 8rem) 0 clamp(3rem, 7vh, 5rem); }

.hero-ghost {
  position: absolute; inset: -10% -5% auto -5%; height: 118%;
  background-image: var(--ghost-src);
  background-size: cover; background-position: center 38%;
  filter: grayscale(.72) brightness(.42) contrast(1.08);
  opacity: .2;
  mask-image: radial-gradient(115% 85% at 62% 30%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(115% 85% at 62% 30%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 6rem);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }

/* The typing line, kept from the old site because it answers "what is this"
   before a cold visitor scrolls. Rebuilt so it reserves its own height and
   never reflows the paragraph beneath it. */
.typer {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
  font-weight: 600;
  color: var(--d-display);
  min-height: 2.4em;
  margin: 0 0 1.75rem;
  max-width: 40rem;
}
.typer .lead-in { color: var(--d-second); font-weight: 400; }
.typer .caret {
  display: inline-block; width: .06em; height: 1.05em;
  background: var(--accent); margin-left: .12em;
  transform: translateY(.14em);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* The typed phrase runs to three lines on a phone. The line reserves that
   height so the paragraph below it never moves while the sentence types. */
@media (max-width: 40rem) { .typer { min-height: 4.6em; } }

.hero .standfirst {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--d-body); max-width: 38rem; margin-bottom: 2.25rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 700;
  text-decoration: none; border-radius: 999px;
  padding: .875rem 1.6rem; border: 1px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg, .card-go svg { width: .95rem; height: .95rem; flex: none; }
.btn-primary { background: var(--accent); color: #10170A; }
.btn-primary:hover { transform: translateY(-1px); background: #D6FA4A; }
.btn-quiet { border-color: var(--d-rule-firm); color: var(--d-display); }
.btn-quiet:hover { border-color: var(--d-display); }
.btn-light { background: var(--display); color: var(--ground); }
.btn-light:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   The five tiles. Apple on the surface.

   Scroll is the primary trigger and hover is an enhancement, because hover
   does not exist on a phone and a hover only reveal shows most of the
   traffic a row of silent tiles. The reveal plays on entry, once, and the
   pointer version simply plays it earlier and adds the lift.
   -------------------------------------------------------------------------- */

.offers { padding: calc(var(--band) * .55) 0 calc(var(--band) * .8); position: relative; z-index: 3; }

.offers-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--d-rule);
}
.offers-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.offers-head p { margin: 0; color: var(--d-second); font-size: .9375rem; max-width: 26rem; }

/* Five is an awkward number in a grid, and auto-fit solves it by leaving an
   empty cell, which reads as a missing sixth offer. So the five are laid out
   deliberately: three across, then two across, both rows full width. */
.tiles {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--d-rule);
  border: 1px solid var(--d-rule);
  border-radius: 1.25rem; overflow: hidden;
}
@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(5) { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tile:nth-child(-n+3) { grid-column: span 2; }
  .tile:nth-child(n+4) { grid-column: span 3; }
}

.tile {
  position: relative; display: block; text-decoration: none;
  background: var(--ink);
  padding: 2rem 1.75rem 1.75rem;
  min-height: 21rem;
  display: flex; flex-direction: column;
  transition: background .45s var(--ease), transform .45s var(--ease);
  isolation: isolate;
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, rgba(201, 242, 45, .10), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:hover { background: var(--panel); }

.tile-n {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  color: var(--d-footer); margin-bottom: auto;
}
.tile h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  margin: 2.5rem 0 .75rem; max-width: 14ch;
}
.tile .tile-line {
  font-size: .975rem; color: var(--d-body); margin: 0; max-width: 26ch;
  min-height: 3.1em;
}

/* The peel. Held at zero height until the tile is seen, then released.
   Height is animated through a grid row rather than through max-height, so
   the reveal is exactly as tall as the words and never leaves a gap. */
.tile-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease);
  opacity: 0;
}
.tile-more > div { overflow: hidden; }
.tile-more p {
  font-size: .9375rem; color: var(--d-second);
  margin: .9rem 0 0; max-width: 30ch;
  padding-top: .9rem; border-top: 1px solid var(--d-rule);
}
.tile.is-seen .tile-more { grid-template-rows: 1fr; opacity: 1; }

.tile-go {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); margin-top: 1rem;
  opacity: 0; transform: translateY(.35rem);
  transition: opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s;
}
.tile.is-seen .tile-go { opacity: 1; transform: none; }
.tile-go svg { width: .85rem; height: .85rem; transition: transform .25s var(--ease); }
.tile:hover .tile-go svg { transform: translateX(.2rem); }

@media (prefers-reduced-motion: reduce) {
  .tile-more, .tile-go, .tile, .btn { transition: none; }
  .caret { animation: none; }
}

/* The cross cutting line under the five, so the retainer and the OT
   specialism have a home without becoming a sixth and seventh tile. */
.beneath {
  display: grid; gap: 1px; margin-top: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  background: var(--d-rule); border: 1px solid var(--d-rule);
  border-top: 0; border-radius: 0 0 1.25rem 1.25rem; overflow: hidden;
}
.tiles:has(+ .beneath) { border-radius: 1.25rem 1.25rem 0 0; }
.beneath a {
  background: var(--ink); padding: 1.5rem 1.75rem; text-decoration: none;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  transition: background .35s var(--ease);
}
.beneath a:hover { background: var(--panel); }
.beneath strong { color: var(--d-display); font-size: 1rem; font-weight: 700; }
.beneath span { color: var(--d-second); font-size: .875rem; }

/* --------------------------------------------------------------------------
   The fold. One rule, and the register changes underneath it.
   -------------------------------------------------------------------------- */

.broadsheet {
  background: var(--ground);
  color: var(--body);
  padding: var(--band) 0;
  border-top: 1px solid var(--d-rule);
}
.broadsheet h1, .broadsheet h2, .broadsheet h3 { color: var(--display); }
.broadsheet .kicker { color: var(--kicker); }

.folio {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: .75rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 2px solid var(--display);
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--display);
}
.folio span:last-child { color: var(--kicker); font-weight: 600; }

.lede { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lede h2 { font-size: clamp(1.9rem, 4vw, 3.25rem); margin-bottom: 1.25rem; }
.lede p {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--standfirst); max-width: 40rem;
}

/* The columns. Three on a desktop, one on a phone, hairlines between them,
   which is the whole broadsheet effect and costs nothing. */
.columns {
  columns: 3; column-gap: clamp(1.75rem, 3vw, 3rem); column-rule: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.7;
}
.columns h3 {
  font-family: var(--sans); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--display);
  margin: 0 0 .5rem; break-after: avoid;
}
.columns p { max-width: none; margin: 0 0 1.35em; break-inside: avoid; }
.columns p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3.1em; line-height: .82;
  float: left; padding: .06em .12em 0 0; color: var(--display);
}
@media (max-width: 62rem) { .columns { columns: 2; } }
@media (max-width: 40rem) {
  .columns { columns: 1; }
  .columns p:first-of-type::first-letter { font-size: 2.6em; }
}

.rule-band { border-top: 1px solid var(--rule); margin: clamp(3rem, 6vw, 5rem) 0; }

/* Proof figures. Set in the sans, tabular, no decoration. */
.proof {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.proof div { border-top: 2px solid var(--display); padding-top: .9rem; }
.proof .stat-n {
  display: block; font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700; color: var(--display); line-height: 1;
}
.proof p { font-size: .875rem; color: var(--body); margin: .6rem 0 0; max-width: 22ch; }

/* The founder band. The one place a photograph carries the page. */
.founder {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: start;
}
@media (max-width: 54rem) { .founder { grid-template-columns: 1fr; } }
.founder figure { margin: 0; }
@media (min-width: 54rem) { .founder figure { position: sticky; top: 6rem; } }
.founder img {
  width: 100%; height: auto; display: block;
  border-radius: .5rem; filter: grayscale(1) contrast(1.04);
}
.founder figcaption {
  font-size: .8125rem; color: var(--kicker); margin-top: .75rem;
  padding-top: .75rem; border-top: 1px solid var(--rule);
}
.founder h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); margin-bottom: 1.25rem; }
.founder blockquote {
  margin: 2rem 0 0; padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.32; color: var(--display);
}
.founder blockquote p { max-width: 32ch; margin: 0; }

/* The rail in an offer hero. It names the other four and marks where you
   are, because a visitor who arrived on one offer from an advertisement has
   no idea the other four exist. */
.page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 56rem) { .page-hero-grid { grid-template-columns: 1fr; } }

.rail { border-top: 1px solid var(--d-rule-firm); padding-top: 1rem; }
.rail-head {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--d-footer); margin: 0 0 .75rem;
}
.rail ol { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .1rem; }
.rail ol a {
  display: grid; grid-template-columns: 2rem 1fr; gap: .5rem;
  text-decoration: none; color: var(--d-second); font-size: .875rem;
  padding: .45rem 0; border-bottom: 1px solid var(--d-rule);
  transition: color .2s var(--ease);
}
.rail ol a span {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: .75rem; color: var(--d-footer);
}
.rail ol a:hover { color: var(--d-display); }
.rail .here a { color: var(--d-display); font-weight: 600; }
.rail .here a span { color: var(--accent); }
.rail-more { display: block; font-size: .8125rem; color: var(--d-footer); text-decoration: none; }
.rail-more:hover { color: var(--d-display); }

/* A page plate. One photograph carrying its own caption, in colour, because
   on these the screen behind Adam is the evidence and grey would throw it
   away. Sits between the folio and the argument so the page opens with a
   picture of the work rather than with a paragraph about it. */
.plate { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.plate img {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;
  object-position: center 46%;
  border-radius: .5rem;
}
.plate figcaption {
  font-size: .8125rem; color: var(--kicker); margin-top: .7rem;
  padding-top: .7rem; border-top: 1px solid var(--rule); max-width: 46rem;
}
@media (max-width: 44rem) {
  .plate img { aspect-ratio: 4 / 3; }
}

/* The stage band. Photographs of Adam working, treated to mono so they
   belong to the page rather than sit on top of it, which is the same
   treatment the founder portrait gets. The first frame is the tallest and
   takes the wide slot when the row folds. */
.stage {
  display: grid; gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 52rem) {
  .stage { grid-template-columns: 1fr 1fr; }
  .stage figure:first-child { grid-column: span 2; }
}
@media (max-width: 34rem) {
  .stage { grid-template-columns: 1fr; }
  .stage figure:first-child { grid-column: auto; }
}
.stage figure { margin: 0; }
.stage img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  object-position: center 28%;
  border-radius: .5rem; filter: grayscale(1) contrast(1.06);
}
.stage figcaption {
  font-size: .8125rem; color: var(--kicker);
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rule);
}
.stage-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.stage-note { margin-top: 1.5rem; font-size: .9375rem; color: var(--body); max-width: 40rem; }

/* Cards, used for the retainer, the pillar and the resources. */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card {
  background: var(--raised-l); border: 1px solid var(--rule);
  border-radius: .75rem; padding: 1.5rem; text-decoration: none;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
a.card:hover { border-color: var(--rule-firm); transform: translateY(-2px); }
.card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.card p { font-size: .9375rem; margin: 0; }
.card .card-go { margin-top: 1rem; font-size: .8125rem; font-weight: 700; color: var(--display); }

/* --------------------------------------------------------------------------
   Enquiry. The form is dark, because it is the moment the page asks for
   something and the register should change when it does.
   -------------------------------------------------------------------------- */

.enquire { background: var(--ink); padding: var(--band) 0; }
.enquire-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 54rem) { .enquire-grid { grid-template-columns: 1fr; } }
.enquire h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.25rem; }
.enquire .standfirst { color: var(--d-body); max-width: 32rem; }
.enquire .reassure { list-style: none; padding: 0; margin: 2rem 0 0; }
.enquire .reassure li {
  font-size: .9375rem; color: var(--d-second);
  padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--d-rule); position: relative;
}
.enquire .reassure li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }

form { display: grid; gap: 1rem; }
form button[type=submit] { justify-self: start; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--d-kicker); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; color: var(--d-display);
  background: #080D04; border: 1px solid var(--d-rule);
  border-radius: .5rem; padding: .8rem .9rem; width: 100%;
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .8125rem; color: var(--d-footer); margin: 0; }
.form-status { font-size: .9375rem; margin: 0; min-height: 1.5rem; }
.form-status.err { color: #F4B8B8; }
.form-status.ok { color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --------------------------------------------------------------------------
   Colophon.
   -------------------------------------------------------------------------- */

.colophon {
  background: var(--ink); color: var(--d-footer);
  border-top: 1px solid var(--d-rule);
  padding: 3rem 0 2.5rem; font-size: .8125rem;
}
.colophon-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid var(--d-rule);
}
.colophon h4 {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--d-kicker); margin: 0 0 .9rem; font-weight: 700;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.colophon a { text-decoration: none; color: var(--d-second); }
.colophon a:hover { color: var(--d-display); }
.colophon-base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Inner pages. One offer, argued at length, in the broadsheet register.
   -------------------------------------------------------------------------- */

.page-hero { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(2rem, 5vh, 3.5rem); position: relative; }
.page-hero h1 { font-size: clamp(2.1rem, 5.4vw, 4.25rem); max-width: 16ch; margin-bottom: 1.25rem; }
.page-hero .standfirst { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--d-body); max-width: 38rem; }

.crumbs { font-size: .8125rem; color: var(--d-footer); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; color: var(--d-second); }
.crumbs a:hover { color: var(--d-display); }

.prose { max-width: 42rem; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); margin: 2.5rem 0 1rem; }
.prose h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 2rem 0 .5rem; color: var(--display); }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.4em; }
.prose li { margin-bottom: .5rem; }
.prose .pull {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.28; color: var(--display);
  border-top: 2px solid var(--display); border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0; margin: 2.5rem 0;
}
.prose .pull p { max-width: none; margin: 0; }

.next-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: 2.5rem; }