/* Tony's eight screens (frozen brief of 25 September 2026).

   Loaded last, after brand-refresh.css. Everything here is layout for the
   new copy: the words themselves come from content/sections/ and are never
   shortened to fit. If something does not fit, it is flagged to Tony. */

/* ---- 1 The Promise ---------------------------------------------------------
   The Promise paragraph is about twice the length of the line it replaced,
   so the photo column is a little wider and the paragraph's measure longer. */
.approach-intro { flex-basis: clamp(320px, 31vw, 470px); }
.approach-intro p { max-width: 36ch; font-size: clamp(13px, 1.02vw, 15px); }
.approach-intro h1 { font-size: clamp(31px, 2.8vw, 41px); line-height: 1.04; }
/* One word per panel now, and nothing under it. */
.approach-panel__copy strong { margin-bottom: 0; font-size: clamp(11px, .9vw, 13px); }
@media (max-width: 820px) {
  .approach-intro { height: auto; min-height: min(92svh, 720px); }
  .approach-intro__copy { justify-content: flex-end; gap: 0; padding-bottom: 40px; }
  .approach-intro h1 { font-size: clamp(32px, 8vw, 44px); }
  .approach-intro p { max-width: 42ch; margin-top: 16px; font-size: 15.5px; }
  .approach-panel__copy strong { font-size: 18px; }
  /* On a phone the Promise runs down the top of the photo, over sunlit
     mountains, where the side-on wash above does nothing: contrast_check.py
     measured the headline at 2.39:1 against the 3:1 it needs. Top-down here,
     clearing to the photograph's dark foot. */
  .approach-intro::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ground-3) 78%, transparent) 0%,
      color-mix(in srgb, var(--ground-3) 70%, transparent) 50%,
      color-mix(in srgb, var(--ground-3) 40%, transparent) 75%,
      transparent 95%);
  }
}

/* ---- 2 The Problem ---------------------------------------------------------
   Headline left, Tony's five paragraphs right under one teal rule, rather
   than a rule on every paragraph. */
.reality--problem .reality__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}
.reality--problem h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; }
.reality__copy {
  display: grid;
  gap: 14px;
  border-left: 1px solid var(--brand-accent-line);
  padding-left: clamp(24px, 3vw, 42px);
}
.reality--problem .reality__copy p {
  border-left: 0;
  padding-left: 0;
  max-width: 58ch;
}
@media (max-width: 820px) {
  .reality--problem .reality__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 64px; }
  .reality--problem .reality__copy { padding-left: 20px; }
}

/* ---- 3 What we actually do -------------------------------------------------
   The two messages sit in a wide, shallow band near the top of the frame so
   the harbour and its animated routes remain visible below. */
.hero .copy { max-width: 100%; }
.hero-messages { width: 100%; }
.hero-a, .hero-b { width: 100%; }
.hero-a .hero-lead {
  margin: 0 0 18px;
  color: var(--on-ground);
  font: 700 clamp(26px, 2.35vw, 36px)/1.12 var(--font-display);
  letter-spacing: -.03em;
  max-width: 24ch;
}
.hero-a p, .hero-b p {
  margin: 0 0 12px;
  max-width: 58ch;
  color: var(--on-ground);
  font-size: clamp(14.5px, 1.08vw, 16.5px);
  line-height: 1.55;
}
.hero-a > :last-child, .hero-b > :last-child { margin-bottom: 0; }
.hero-questions {
  margin: 4px 0 14px;
  padding: 2px 0 2px 16px;
  list-style: none;
  border-left: 2px solid var(--brand-accent-on-dark);
  display: grid;
  gap: 3px;
  color: var(--on-ground);
  font-size: clamp(14.5px, 1.08vw, 16.5px);
  line-height: 1.5;
}
.hero-b .hero-stages { margin-top: 20px; }
.hero-stages strong {
  display: block;
  color: var(--brand-accent-on-dark);
  font: 700 clamp(17px, 1.2vw, 20px)/1.4 var(--font-display);
  letter-spacing: .07em;
}
@media (min-width: 821px) {
  .hero .inner {
    align-self: start;
    padding-block: calc(var(--hdr-h, 78px) + 18px) 0;
  }
  .hero-messages { margin-left: 0; }
  .hero-a, .hero-b {
    max-width: 1120px;
    padding: clamp(22px, 1.65vw, 28px) clamp(28px, 2.1vw, 38px);
    background: color-mix(in srgb, var(--ground-3) 48%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.06);
    backdrop-filter: blur(10px) saturate(1.06);
  }
  .hero-a {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: clamp(28px, 3vw, 48px);
    row-gap: 18px;
  }
  .hero-a .hero-lead { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; max-width: 34ch; }
  .hero-a > .hero-lead + p { grid-column: 1; grid-row: 2; }
  .hero-a > .hero-lead + p + p { grid-column: 2; grid-row: 2; }
  .hero-b {
    display: block;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    margin-top: clamp(34px, 4vh, 52px);
    padding: 18px 22px;
  }
  .hero-b .hero-stages { margin: 0; }
  .hero-b .hero-stages strong { white-space: nowrap; }
}
/* Without the pin (phones, short screens, reduced motion) the panels stack;
   the second sits straight under the first rather than 18px below a plate. */
html:not(.hero-enhanced) .hero-b { margin-top: 14px; }
@media (max-width: 820px) {
  html:not(.hero-enhanced) .heroscroll .hero { min-height: 0; }
  html:not(.hero-enhanced) .hero-b { margin-top: 28px; }
  .hero-a .hero-lead { font-size: clamp(26px, 6.6vw, 34px); }
  .hero-a p, .hero-b p, .hero-questions { font-size: 16px; }
}

/* The converging-lines band is this section's picture now (Tony, 30
   September: "enlarge the existing converging-lines-of-insight image and use
   it in place of the photograph"). It keeps its own image, figure, wash and
   band-gravity.js; only its box changes. The figure is drawn on the
   photograph's pixels, so image and SVG must keep cropping identically
   (cover / slice, both centred), which the band's own rules already ensure. */
.heromedia .intelligence-band { position: absolute; inset: 0; height: auto; }
/* Filling a full screen crops the 3:1 photograph's sides. The crop is
   anchored RIGHT so the rig the lines travel to, and the sun over it, stay in
   view; the convergence happens behind the text panel on the left. The
   desktop figure's preserveAspectRatio is xMaxYMid to match (make_band_figure.py). */
@media (min-width: 821px) {
  .heromedia .intelligence-band__image img { object-position: 100% 50%; }
}
@media (max-width: 820px) {
  /* Phones: the band at its own phone height and figure, as before, with the
     two panels on the navy beneath it. */
  .hero .heromedia { height: auto; min-height: 0; }
  .heromedia .intelligence-band { position: relative; inset: auto; height: 570px; }
  .hero .scrim { height: 570px; }
}
@media (max-width: 480px) {
  .heromedia .intelligence-band { height: 540px; }
  .hero .scrim { height: 540px; }
}

/* ---- 4 Across a whole organisation ------------------------------------------
   One screen in place of the four AI screens: Tony's copy on the left, his
   four-line summary on the right on the site's thin teal line. */
.across { background: var(--paper); }
.across__inner { display: grid; gap: clamp(36px, 6vw, 110px); align-items: center; }
@media (min-width: 900px) {
  .across__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
.across h2 { margin: 0; max-width: 18ch; }
.across__subhead {
  margin: 18px 0 0;
  color: var(--brand-accent-strong);
  font: 700 clamp(20px, 1.9vw, 26px)/1.25 var(--font-display);
  letter-spacing: -.015em;
}
.across__body { margin-top: 24px; display: grid; gap: 14px; max-width: 64ch; color: var(--ink-60); }
.across__body p { margin: 0; }
.across__summary {
  margin: 0;
  padding: 4px 0 4px clamp(22px, 2.4vw, 34px);
  list-style: none;
  border-left: 2px solid var(--brand-accent);
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}
.across__summary li {
  color: var(--ink);
  font: 700 clamp(19px, 1.7vw, 24px)/1.3 var(--font-display);
  letter-spacing: -.015em;
}

/* ---- 5 Where could this help me? -------------------------------------------- */
#where { position: relative; }
#where::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(clamp(20px, 5vw, 40px), calc((100% - 1120px) / 2 + clamp(20px, 5vw, 40px)));
  width: clamp(280px, 32vw, 520px);
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-accent) 82%, transparent) 0 68%,
    transparent 100%);
}
.where-intro { margin-top: 22px; display: grid; gap: 12px; }
.where-intro .lede { margin: 0; }
.where-closing {
  margin: clamp(30px, 3.5vw, 44px) 0 0;
  max-width: 46ch;
  color: var(--ink);
  font: 300 clamp(20px, 2.2vw, 27px)/1.3 var(--font-display);
  letter-spacing: -.012em;
}

/* ---- 6 In practice ---------------------------------------------------------
   The illustration's title is the plate's heading now, followed by a fixed
   Situation / How we work / What this can enable structure. */
.evidence-intro { margin-top: 22px; display: grid; gap: 12px; }
.evidence-intro .lede { margin: 0; max-width: 52ch; }
.case h3.fig { margin: 0; font-weight: inherit; }
.case .fig.alt b { letter-spacing: .01em; }
@media (min-width: 840px) {
  .evidence-scroll .case { width: min(100%, 1040px); }
}

/* ---- 7 Who will I be working with? ----------------------------------------- */
.who-intro { margin-top: 22px; max-width: 64ch; }
.who-closing {
  margin: clamp(44px, 5.5vw, 70px) 0 0;
  padding-top: 22px;
  max-width: 60ch;
  border-top: 2px solid var(--brand-accent);
  color: var(--ink);
  font: 700 clamp(18px, 1.65vw, 22px)/1.4 var(--font-display);
  letter-spacing: -.01em;
}

/* ---- 8 The Conversation ------------------------------------------------------ */
.close-copy { margin-top: 22px; display: grid; gap: 14px; }
.close-copy .lede { margin: 0; }
.close-copy strong { color: var(--on-ground); font-weight: 700; }

/* ---- Footer -----------------------------------------------------------------
   Three columns now: the brand, Tony's menu, and Get in touch. */
.ftr .cols { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 860px) { .ftr .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr .cols { grid-template-columns: 1fr; } }
.lockup .tag { display: block; }

/* The In practice photograph starts where the section does. brand-refresh.css
   gives every .section its padding, which here showed as a pale strip above
   the photograph. */
.section.evidence-scroll { padding-block: 0; }

/* In practice: the plate being read no longer fades the others to .28. At that
   strength their text failed WCAG contrast (axe measured 1.4-1.75:1 on
   26 September) while still on screen. The plates keep their rise into
   place; only the fade is gone. */
@media (prefers-reduced-motion: no-preference) {
  .evidence-scroll.stepping .evidence-step > * { opacity: 1; }
}

/* ---- Body copy one step larger (Tony, 30 September 2026) --------------------
   "Please increase the body-copy size modestly throughout to improve
   readability on desktop and mobile. Keep the existing font, headline
   hierarchy and overall proportions."

   Every reading paragraph is about 8% larger, rounded to the half pixel,
   each keeping its own responsive curve. Untouched on purpose: headlines,
   the display statements (Screen 4 subhead and summary, the Where and Who
   closing lines), labels, buttons, the menu, form fields and the footer.
   Each rule below repeats the selector it overrides, so deleting this block
   restores the 26 September sizes exactly. */
.approach-intro p { font-size: clamp(16px, 1.25vw, 19px); }
.reality p { font-size: clamp(16px, 1.35vw, 18.5px); }
.hero-a p, .hero-b p, .hero-questions { font-size: clamp(15.5px, 1.17vw, 18px); }
.across__body, .where-intro .lede { font-size: 18px; }
.lede { font-size: clamp(19px, 1.73vw, 22px); }
.sit p { font-size: 16.5px; }
.case-body dd { font-size: 17.5px; }
.person__text p { font-size: 18px; }
.formcard > .cf-intro { font-size: 16px; }
@media (max-width: 820px) {
  .approach-intro p { font-size: 17.5px; }
  .reality p { font-size: 17px; }
  .hero-a p, .hero-b p, .hero-questions { font-size: 17px; }
  .across__body, .where-intro .lede { font-size: 17.5px; }
  .person__text p { font-size: 17.5px; }
}

/* ---- Screen 4: "hundreds - potentially thousands" (Tony, 30 September) ----
   "Please keep HUNDREDS - POTENTIALLY THOUSANDS visually prominent." The
   words are his and unchanged; build-copy.mjs wraps the phrase, and only its
   weight changes here - the treatment Tony saw on 29 September. Capitals by
   text-transform, so the text itself keeps its case. */
.across em { font-style: normal; }
.across .emph-scale {
  color: var(--brand-accent-strong);
  font-weight: 700;
  font-size: 1.28em;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---- Screen 7: the three approved photographs (Tony, 30 September) ---------
   The 26 September layout is kept: text left, photograph right, one row each,
   all three at the same size. The slot takes the photographs' own 5:4 shape
   instead of the 4:5 placeholder, so nothing is cropped away; the 260px phone
   cap existed only because the placeholders were tall. */
.portrait { aspect-ratio: 5 / 4; }
@media (max-width: 899px) { .person .portrait { max-width: 360px; } }

/* ---- 1 Opening: Tony's two paragraphs (Ben, 1 October) ---------------------
   Two real paragraphs with a paragraph's gap between them (they were one
   paragraph split by a line break), and the opening's reading text brought up
   to the rest of the page's body copy. The column's flex layout does not
   collapse margins, so each paragraph sets only its own. */
.approach-intro p { max-width: 30ch; margin: 0; line-height: 1.5; }
.approach-intro h1 + p { margin-top: 18px; }
.approach-intro p + p { margin-top: .8em; }
.approach-intro p + .btn { margin-top: 24px; }

/* ---- 1 Opening on phones: picture on top, words below (Ben, 1 October) -----
   The panorama no longer sits behind the words on a phone, where the wash
   that kept them readable hid almost all of it. The picture gets the top of
   the screen at its own 2:3, under the fixed header, fading into the navy the
   words sit on, from the phone photograph's <source media="(max-width: 820px)">
   (the approach_intro slot's mobile variant in build-images.mjs). */
@media (max-width: 820px) {
  .approach-gallery {
    display: flex;
    flex-direction: column;
    padding-top: var(--hdr-h, 78px);
    background: var(--ground-3);
  }
  .approach-gallery::after { content: none; }
  .approach-gallery__image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: 74svh;
    overflow: hidden;
  }
  /* Ben's upright photograph (Images/Redesign/New mobile opening.png). Where
     74svh is shorter than 2:3, the sky gives way first; the man and the view
     stay in frame. */
  .approach-gallery__image img { object-position: 50% 72%; }
  .approach-gallery__image::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 28%;
    background: linear-gradient(to top, var(--ground-3), transparent);
    pointer-events: none;
  }
  .approach-intro { height: auto; min-height: 0; flex: none; }
  .approach-intro::after { content: none; }
  .approach-intro__copy { justify-content: flex-start; padding: 6px var(--gut) 48px; }
  .approach-intro p { max-width: 42ch; }
}

/* ---- 3 What we do: Tony's superimposed headline (30 September) --------------
   "Superimpose: We find out what's really happening - and help you do
   something about it." Bottom right of the picture, over the open water and
   fog below the rig (Ben's reference, 1 October), clear of the text panels
   and the figure's destination. The panel's first line is now a lead
   paragraph styled exactly as before, so this is the section's one heading. */
.hero-statement {
  position: absolute;
  z-index: 3;
  right: var(--gut, 48px);
  bottom: clamp(40px, 9vh, 96px);
  max-width: min(17ch, 44vw);
  margin: 0;
  color: var(--brand-accent-on-dark);
  font: 700 clamp(30px, 2.9vw, 46px)/1.1 var(--font-display);
  letter-spacing: -.03em;
  text-align: right;
  text-wrap: balance;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--ground-3) 70%, transparent);
}
@media (max-width: 820px) {
  /* On a phone the section is a grid, picture in row 1, panel in row 2. The
     headline shares the picture's row, top left, in the cloud above the
     harbour (Ben, 1 October), and is held to 80% of the width so it stays
     left of the helicopter's dot at the top right. */
  /* Every child placed in column 1 explicitly: with the headline locked to
     row 1 / column 1, auto-placement otherwise put the picture into a second,
     zero-width column, and the harbour vanished on phones. */
  #what-we-do > .heromedia, #what-we-do > .scrim { grid-column: 1; }
  #what-we-do > .wrap.inner { grid-column: 1; }
  .hero-statement {
    position: relative;
    right: auto;
    bottom: auto;
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    max-width: 80%;
    /* Below the fixed header, which covers the section's first ~70px when
       the menu's "What we do" link scrolls it to the top. */
    margin: calc(var(--hdr-h, 70px) + 14px) var(--gut) 0;
    font-size: clamp(22px, 6.4vw, 30px);
    text-align: left;
  }
}
/* Large phones and portrait tablets: the picture is cropped wider, so the
   crane and tank dots climb towards the top. A 22px headline keeps to two or
   three lines between the header and those dots. */
@media (min-width: 461px) and (max-width: 820px) {
  .hero-statement { font-size: 22px; }
}

/* ---- Phone menu: full screen, as built (1 October) --------------------------
   The menu is position:fixed; inset:0 inside the header, meant to fill the
   screen. Any transform or backdrop-filter on the header makes the header its
   containing block instead, so the "full-screen" menu was cut to the header's
   70px and its links spilled over the page (also true on 26 September). The
   shown header's translateY(0) moved nothing, so it becomes none (the slide-in
   from the hidden state still animates), and the blur goes where the burger
   menu is used - the header there is near-opaque anyway. */
html.hdr-gated.hdr-entered .hdr { transform: none; }
/* The blur is switched off at burger widths in site.css, for every page. */