/* ==========================================================================
   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: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, 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: 700;
  margin: 0;
  line-height: 1.06;
  letter-spacing: 0;
  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 image, one line, one action.

   The forest road runs full bleed instead of ghosted at twenty per cent,
   because a hero with no visual anchor is a headline floating on black and
   that is not restraint, it is an empty page. It is Adam's own image, graded
   into the palette rather than filtered at runtime, and it drifts once on
   load so the page arrives rather than appears.
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  min-height: min(90vh, 54rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 7rem;
}

.hero-art {
  position: absolute; inset: 0;
  background-image: url("/assets/img/hero-forest.jpg");
  background-size: cover; background-position: center 42%;
  transform: scale(1.08);
  animation: drift 26s cubic-bezier(.2, .6, .2, 1) forwards;
}
@keyframes drift { to { transform: scale(1); } }

/* Two scrims rather than one. The lower one carries the type, the upper one
   keeps the masthead legible without a bar behind it. */
.hero::before, .hero::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
.hero::before {
  top: 0; height: 55%;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(14, 20, 9, .72) 34%, transparent 100%);
}
.hero::after {
  bottom: 0; height: 82%;
  background: linear-gradient(to bottom, transparent, rgba(14, 20, 9, .78) 40%, var(--ink) 90%);
}

.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(3rem, 7vw, 6rem); }

.hero-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-kicker); margin: 0 0 1.75rem;
}
.hero-eyebrow::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--accent); flex: none;
}

.hero h1 {
  font-size: clamp(3rem, 8.4vw, 7.25rem);
  line-height: .98;
  max-width: 15ch;
  margin-bottom: 1.75rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero .standfirst {
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  line-height: 1.5;
  color: var(--d-display); opacity: .82;
  max-width: 36rem; margin-bottom: 2.5rem;
}

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

/* Buttons. Two weights and no more: one thing to do, and one quiet way to
   look first. The pill is Apple's, the discipline is that only one of them is
   ever filled. */
.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: .95rem 1.7rem; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s 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(-2px); background: #D6FA4A; }
.btn-quiet {
  border-color: rgba(244, 243, 234, .32); color: var(--d-display);
  background: rgba(14, 20, 9, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-quiet:hover { border-color: var(--d-display); transform: translateY(-2px); }
.btn-light { background: var(--display); color: var(--ground); }
.btn-light:hover { transform: translateY(-2px); background: #2A3A1D; }
@media (min-width: 30rem) { .btn { white-space: nowrap; } }

/* The strip under the hero. It does the job the typing line used to do,
   which was telling a cold visitor what this is before they scroll, and it
   does it without a cursor blinking at somebody who came here to decide
   whether to trust us. */
.hero-index {
  position: relative; z-index: 2;
  border-top: 1px solid var(--d-rule);
  background: rgba(14, 20, 9, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-index .wrap {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-block: 0; padding-bottom: 0;
}
.hero-index a {
  display: block; text-decoration: none;
  min-height: 5.25rem;
  padding: 1.15rem 1.25rem 1.25rem 0;
  font-size: .875rem; font-weight: 600; color: var(--d-second);
  border-right: 1px solid var(--d-rule);
  transition: color .2s var(--ease);
}
.hero-index a:last-child { border-right: 0; }
.hero-index a:hover { color: var(--d-display); }
.hero-index a span {
  display: block; font-family: var(--sans); font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em; color: var(--d-footer); margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 60rem) {
  .hero-index .wrap {
    display: flex; overflow-x: auto; gap: 0;
    scrollbar-width: none;
  }
  .hero-index .wrap::-webkit-scrollbar { display: none; }
  /* A scrollable row that ends flush looks clipped rather than scrollable. */
  .hero-index { position: relative; }
  .hero-index::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3rem;
    background: linear-gradient(to right, transparent, var(--ink));
    pointer-events: none;
  }
  .hero-index a { flex: 0 0 auto; padding-right: 1.5rem; margin-right: 1.5rem; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   The five tiles.

   These were a one pixel grid of bordered cells, which reads as a table of
   contents. They are now surfaces: each carries its own photograph from the
   work, its own edge, and real space between them. The first is wide, because
   five equal boxes is a grid and a grid is where elegant quietly becomes
   corporate.

   Scroll is still the trigger and hover is still only an enhancement, because
   hover does not exist on a phone and most of this traffic is a phone.
   -------------------------------------------------------------------------- */

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

.offers-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.offers-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 16ch; }
.offers-head p { margin: 0; color: var(--d-second); font-size: .9375rem; max-width: 26rem; }

.tiles {
  display: grid; gap: clamp(.75rem, 1.4vw, 1.15rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile-wide { grid-column: 1 / -1; }
}

.tile {
  position: relative; display: block; text-decoration: none;
  border-radius: 1.1rem; overflow: hidden;
  min-height: 21rem;
  background: var(--panel);
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile-wide { min-height: 26rem; }
@media (min-width: 46rem) {
  .tile-wide .tile-body { max-width: 34rem; }
}

.tile-art {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 45%;
  transform: scale(1.02);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
/* The scrim. Type sits on a photograph here, so it is not optional and it is
   not a flat wash: it is heaviest where the words are. */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 13, 4, .96) 18%, rgba(8, 13, 4, .74) 52%, rgba(8, 13, 4, .34) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(201, 242, 45, .07), transparent 62%);
  transition: opacity .5s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }
.tile:hover .tile-art { transform: scale(1.07); filter: brightness(1.18); }

.tile-body {
  position: relative; display: flex; flex-direction: column;
  height: 100%; padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.tile-n {
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em;
  color: var(--d-kicker); margin-bottom: auto;
}
.tile h3 {
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  margin: 2.5rem 0 .65rem; max-width: 15ch; color: var(--d-display);
}
.tile-wide h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.tile .tile-line {
  font-size: 1rem; color: var(--d-body); margin: 0; max-width: 30ch;
}

/* The peel. Held at zero height until the tile is seen, then released. */
.tile-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease);
  opacity: 0;
}
.tile-more > span { overflow: hidden; display: block; }
.tile-more-p {
  display: block;
  font-size: .9375rem; color: var(--d-second);
  margin: .9rem 0 0; max-width: 34ch;
  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: .45rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); margin-top: 1.1rem;
  opacity: 0; transform: translateY(.35rem);
  transition: opacity .45s var(--ease) .1s, transform .45s 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(.25rem); }

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

/* The line under the five, where the retainer and the specialism live. */
.beneath {
  display: grid; gap: clamp(.75rem, 1.4vw, 1.15rem); margin-top: clamp(.75rem, 1.4vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.beneath a {
  background: var(--panel); border: 1px solid var(--d-rule);
  border-radius: 1.1rem;
  padding: 1.35rem 1.6rem; text-decoration: none;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.beneath a:hover { background: var(--raised); border-color: var(--d-rule-firm); }
.beneath strong { color: var(--d-display); font-size: 1.0625rem; 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: calc(var(--band) * 1.15) 0;
  border-top: 1px solid var(--d-rule);
  font-size: 1.125rem; line-height: 1.66;
}
.broadsheet h1, .broadsheet h2, .broadsheet h3 { color: var(--display); }
.broadsheet .kicker { color: var(--kicker); display: flex; align-items: center; gap: .55rem; }
.broadsheet .kicker::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--accent); flex: none;
}

.folio {
  position: relative;
  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; }
/* A short flash of accent riding on the folio rule, left aligned with the
   text column, so the eye finds the top of every section. */
.folio::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 3.5rem; height: 2px; background: var(--accent);
}

.lede { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lede h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); margin-bottom: 1.5rem; max-width: 18ch; }
.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: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); column-rule: 1px solid var(--rule);
  font-size: 1.0625rem; line-height: 1.72;
}
.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;
  padding-top: .9rem; position: relative;
}
.columns h3::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 1.5rem; height: 2px; background: var(--accent);
}
.columns h3:first-child { padding-top: 0; }
.columns h3:first-child::before { display: none; }
.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: 48rem) { .columns { columns: 1; } }
@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; }

/* The statement. One line, full width, nothing else on the screen. The
   institutional half of the page needs a moment where it stops explaining and
   simply asserts, and this is it. */
.statement {
  margin: clamp(3.5rem, 7vw, 6rem) 0;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 2px solid var(--display);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.statement::after {
  content: ""; position: absolute; left: var(--gutter); top: -2px;
  width: 5rem; height: 2px; background: var(--accent);
}
.statement p {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  line-height: 1.14; letter-spacing: 0;
  color: var(--display); margin: 0; max-width: 24ch;
  text-wrap: balance;
}

/* The principles. A set, not a sequence, so they carry no numbers. Hairlines
   do the ordering work instead. */
.principles {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.principles > div { border-top: 1px solid var(--rule-firm); padding-top: 1.1rem; position: relative; }
.principles > div::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 1.75rem; height: 2px; background: var(--accent);
}
.principles h3 {
  font-family: var(--sans); font-size: .875rem; font-weight: 700;
  letter-spacing: .06em; color: var(--display); margin: 0 0 .6rem;
}
.principles p { font-size: .9875rem; line-height: 1.62; margin: 0; max-width: 40ch; }

/* Sectors. A dense hairline list, which is the most institutional shape
   there is, and it is evidence rather than decoration. */
.sectors {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}
@media (max-width: 54rem) { .sectors { grid-template-columns: 1fr; } }
.sectors-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 20ch; }
.sectors ul { list-style: none; margin: 0; padding: 0; }
.sectors li {
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 1.0625rem; color: var(--display);
  display: flex; align-items: baseline; gap: .8rem;
}
.sectors li::before {
  content: ""; width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--accent); flex: none;
}
.sectors li:first-child { border-top: 1px solid var(--rule); }

/* 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: 1.4rem; position: relative; }
.proof div::before {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 1.75rem; height: 2px; background: var(--accent);
}
.proof .stat-n {
  display: block; font-size: clamp(3rem, 6.4vw, 5.25rem);
  font-weight: 700; color: var(--display); line-height: .92;
  letter-spacing: -.02em;
}
.proof p { font-size: .9375rem; color: var(--body); margin: 1rem 0 0; max-width: 22ch; line-height: 1.5; }

/* 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); position: relative;
}
.founder figcaption::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 1.5rem; height: 2px; background: var(--accent);
}
.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; }
.founder blockquote cite {
  display: block; margin-top: .9rem;
  font-family: var(--sans); font-style: normal;
  font-size: .8125rem; letter-spacing: .04em; color: var(--kicker);
}

/* 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;
  position: relative;
}
.plate figcaption::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 1.5rem; height: 2px; background: var(--accent);
}
@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);
  position: relative;
}
.stage figcaption::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 1.25rem; height: 2px; background: var(--accent);
}
.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(--accent); 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.25rem, 5.7vw, 4.5rem); max-width: 17ch; 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 a { color: var(--display); text-decoration: none;
  box-shadow: inset 0 -.36em 0 rgba(201, 242, 45, .5); }
.prose a:hover { box-shadow: inset 0 -.9em 0 rgba(201, 242, 45, .5); }
.prose h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  margin: 2.75rem 0 1rem; padding-top: 1.25rem; position: relative;
}
.prose h2::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 3px; background: var(--accent);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 2rem 0 .5rem; color: var(--display); }
.prose ul { padding-left: 0; margin: 0 0 1.4em; list-style: none; }
.prose li { margin-bottom: .6rem; padding-left: 1.4rem; position: relative; }
/* The bullet is the accent, which is the smallest possible dose of it and
   the one that repeats most often down a page. */
.prose li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent);
}
.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(--accent); 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; }

/* --------------------------------------------------------------------------
   The threat intelligence library.

   An index of issues, and the issues themselves. These are long documents
   rather than blog posts, so the reading column is set for someone who will
   be here for ten minutes: a wider measure than the marketing pages, more
   room between headings, and figures that stay in the sans.
   -------------------------------------------------------------------------- */

.issues { display: grid; gap: 0; border-top: 2px solid var(--display); }

.issue {
  display: block; text-decoration: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background .3s var(--ease);
}
.issue::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 0; height: 2px; background: var(--accent);
  transition: width .45s var(--ease);
}
.issue:hover::before { width: 6rem; }
.issue:hover h2 { color: var(--display); }

.issue-date {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--kicker); margin: 0 0 .9rem;
}
.issue-latest {
  font-size: .625rem; letter-spacing: .14em;
  background: var(--accent); color: #10170A;
  padding: .2rem .5rem; border-radius: 999px;
}
.issue h2 {
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  max-width: 26ch; margin-bottom: .75rem;
  transition: color .3s var(--ease);
}
.issue-line {
  font-size: 1.0625rem; color: var(--body); max-width: 62ch; margin: 0 0 1rem;
}

/* An issue title is a document title and runs long. It gets a wider measure
   and a smaller step than a marketing headline, or it takes the whole screen
   before the reader has learned anything. */
.page-hero h1.issue-title {
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  max-width: 24ch;
}

/* The issue itself. */
.prose.issue-doc { max-width: 46rem; }
.prose.issue { max-width: 46rem; }
.prose.issue h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  color: var(--display); margin: 2.75rem 0 .9rem;
  padding-top: 1.25rem; position: relative; letter-spacing: 0;
}
.prose.issue h3::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 3px; background: var(--accent);
}
.prose.issue h4 {
  font-family: var(--sans); font-size: .9375rem; font-weight: 700;
  color: var(--display); margin: 2rem 0 .5rem; letter-spacing: .01em;
}
.prose.issue p { font-size: 1.0625rem; line-height: 1.72; max-width: 37rem; }
.prose.issue li { font-size: 1.0625rem; max-width: 36rem; }
.prose.issue ol { counter-reset: q; list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.prose.issue ol li {
  counter-increment: q; position: relative; padding-left: 2.25rem; margin-bottom: .7rem;
}
.prose.issue ol li::before {
  content: counter(q); position: absolute; left: 0; top: .1em;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  color: var(--display); background: none;
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--rule-firm);
  border-radius: 50%; display: grid; place-items: center;
}
.prose.issue blockquote {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 2px solid var(--accent);
}
.prose.issue blockquote p {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.4;
  color: var(--display); margin: 0; max-width: 40ch;
}
.prose.issue .rule-band { margin: 2.5rem 0; }
.prose.issue a { color: var(--display); box-shadow: inset 0 -.36em 0 rgba(201, 242, 45, .5); text-decoration: none; }

.issue-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-firm); padding-top: 1.5rem;
}
@media (max-width: 40rem) { .issue-nav { grid-template-columns: 1fr; } }
.issue-nav a {
  text-decoration: none; color: var(--display);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.2;
}
.issue-nav a span {
  display: block; font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kicker);
  margin-bottom: .45rem;
}
.issue-nav-next { text-align: right; }
.issue-nav a:hover { color: var(--kicker); }

/* --------------------------------------------------------------------------
   Podcasts. A shelf of episodes rather than a list of show names, because a
   show name tells a visitor nothing about whether the conversation was any
   good. Thumbnails are stored here rather than hotlinked, so the page loads
   nothing from anybody else, which is what the privacy page promises.
   -------------------------------------------------------------------------- */

.shows-roll {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 54rem) { .shows-roll { grid-template-columns: 1fr; } }
.shows-roll ul { list-style: none; margin: 0; padding: 0; }
.shows-roll li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
}
.shows-roll li:first-child { border-top: 1px solid var(--rule); }
.shows-roll strong { color: var(--display); font-size: 1.0625rem; font-weight: 700; }
.shows-roll span { color: var(--kicker); font-size: .875rem; }
.shows-note { font-size: .9375rem; color: var(--body); max-width: 34rem; }

.eps {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.ep { text-decoration: none; display: block; }
.ep-art {
  display: block; overflow: hidden; border-radius: .6rem;
  background: var(--recessed); border: 1px solid var(--rule);
}
.ep-art img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: saturate(.86);
}
.ep:hover .ep-art img { transform: scale(1.04); filter: saturate(1); }
.ep-meta {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: .85rem 0 .4rem;
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kicker);
}
.ep-show { color: var(--display); }
.ep-meta time { color: var(--kicker); font-variant-numeric: tabular-nums; }
.ep-title {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 1.125rem; line-height: 1.24; color: var(--display);
}
.ep:hover .ep-title { color: var(--kicker); }