/* Balmoral & Co - the stylesheet.
 *
 * Every colour, size and radius in this file comes from the approved design.
 * There are exactly three deliberate departures, each one a contrast floor the
 * design missed, each marked DEVIATION below with the measurement that forced it.
 *
 * The rule this file is built on: no colour literal outside the :root block.
 * Anything else is a value nobody can find later.
 */

/* ------------------------------------------------------------------ fonts */

/* Instrument Sans, Archivo and Geist Mono are Google Fonts. PP Right Grotesk is
   the licensed Pangram Pangram display face and is self-hosted. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Geist+Mono:wght@100..900&display=swap");

@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Light.4161443deb.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Medium.5a90f8376a.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Bold.4d9535d564.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* Ground */
  --white: #FFFFFF;
  /* Lightened 2026-08-05 from #E7E1D4, which read as too beige. Three points of
     HSL lightness, 86.9% to 89.9%, with hue and saturation held so it is the
     same colour less heavily laid on rather than a different one. Deliberately
     not further: the retired --plate-bg sat at 93.9%, and a ground three points
     off another ground is a distinction nobody can see and everybody has to
     maintain. Contrast improved by lightening, as it must - slate on this is
     7.88:1 where it was 7.40, navy 12.63:1. */
  --parchment: #ECE8DE;
  /* --plate-bg was here, #F5F2EA. Its only user was .confirm, which went with
     the last CONFIRM render. A token nothing reads is a colour the next person
     has to prove is dead before they dare touch anything near it. */

  /* Ink */
  --navy: #0F2540;
  --navy-deep: #15273E;
  --slate: #33465E;

  /* DEVIATION 1. The design set the diagram meta labels and the film caption in
     #6B7B90 on white. Measured, that is 4.32:1 against white, and both are set
     below 18px, so WCAG 2.2 SC 1.4.3 wants 4.5:1. #64748B measures 4.79:1 and
     is visually indistinguishable at 10-15px. */
  --slate-muted: #64748B;

  /* Blues */
  --blue: #1F5FA9;
  --blue-hover: #16457C;
  --blue-bright: #2C7BD4;
  --blue-light: #7FB3EA;

  /* On dark */
  --mist: #C8D6E5;
  --pale: #93A8C0;

  /* Lines */
  --rule: #E3DED3;
  --rule-on-dark: #33465E;
  --rule-hairline-hero: rgba(15, 37, 64, 0.35);

  /* Accent */
  --brass: #B1904F;

  /* Print only. Ink on paper is not the navy; it is black. */
  --print-ink: #000000;

  /* Type */
  --font-display: "PP Right Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape */
  --radius-node: 2px;
  --radius-plate: 4px;
  /* --radius-panel was here, 8px. Its only user was .contact-box, which was
     folded into the beige panel; that panel carries --radius-card. */
  --radius-card: 24px;
  --radius-pill: 9999px;

  /* Rhythm */
  --gutter: 177px;
  --gutter-edge: 60px;
  /* The header is a fixed height, and the hero block subtracts it to work out
     how much screen is left for the film. Kept in step with .site-header. */
  --header-h: 120px;
  /* The service heading's metrics. The icon beside it centres on this line box,
     so both must read the same numbers or they drift apart silently. */
  --service-h3-size: 24px;
  --service-h3-lh: 1.2;
  /* The beige panel's vertical padding. The photograph inside it cancels
     exactly this to reach the panel's top and bottom edges, so the two must
     read the same number or the bleed stops being flush. */
  --structure-pad-y: 88px;
  /* The horizontal twin of the above, and it is a token for the same reason:
     the picture escapes exactly this much to reach the panel's right edge, and
     it is added to the figure's basis so the growth is the padding rather than
     a second number that happens to match today. Restated at each breakpoint
     below, because a negative margin left at 80 inside a 24px padding would
     hang the picture off the side of the panel. */
  --structure-pad-x: 80px;
  /* How far the hero subheader sits inboard of the right gutter. At 0 its right
     edge lands on --gutter; raising it walks the whole column left without
     changing its width. One dial, so "left a bit" is a number somebody can
     change rather than a rule to re-derive. */
  --hero-aside-inset: 200px;
  --motion: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 { margin: 0; color: var(--navy); }
p { margin: 0; }
img, video { max-width: 100%; }

a { color: var(--blue); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- sections */

.section {
  box-sizing: border-box;
  padding: 96px var(--gutter);
  background: var(--white);
}

.section--top { padding: 140px var(--gutter) 104px; }
.section--edge { padding: 0 var(--gutter-edge) 36px; }

/* --------------------------------------------------------------- wordmark */

.wordmark { display: block; text-decoration: none; }
.wordmark img { display: block; width: auto; }
.site-header .wordmark img { height: 25px; }
.site-footer .wordmark img { height: 33px; }

/* --------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--motion);
}
.btn:hover { background: var(--blue-hover); color: var(--white); }
.btn--sm { height: 44px; padding: 0 28px; font-size: 15px; }
.btn--lg { height: 56px; padding: 0 36px; font-size: 17px; }

.textlink {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--blue);
}
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- header */

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 120px;
  padding: 38px var(--gutter-edge) 0;
}
.site-header nav { display: flex; align-items: center; gap: 36px; }
.site-header .btn { margin-top: 5px; }

/* ------------------------------------------------------------------- hero */

/* The hero is two columns, and the right one is anchored to the middle of the
 * screen rather than to the end of the headline.
 *
 * The aside is half the content box wide and sits hard against the right
 * gutter, so its LEFT edge lands on the centre line and its RIGHT edge on the
 * 177px gutter. That works because the section's padding is symmetric: the
 * content box's own 50% mark is 177 + (100vw - 354)/2, which is exactly 50vw.
 * No viewport unit needed, so a scrollbar cannot shift it.
 *
 * space-between, not a fixed gap: the headline keeps its own measure at the left
 * gutter and the slack opens up BETWEEN the two columns, rather than pushing the
 * aside off the centre. */
.hero-grid {
  display: flex;
  gap: 120px;
  align-items: flex-start;
  justify-content: space-between;
}
.hero-h1 {
  /* The design's measure, allowed to shrink but not below the point where
     "Foundations." stops fitting on one line at this size. When the screen is
     too narrow for both, the ASIDE gives up the centre line rather than the
     headline being crushed - the min-width is what decides which one yields. */
  flex: 0 1 620px;
  min-width: 520px;
  width: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* A quarter of the content box, pinned right. The right edge still lands on
     the gutter; the left edge now sits half way between the centre line and it,
     because at half the screen the paragraph was a wide thin band rather than a
     column. */
  /* Back to 25% after 40% was tried. Widening the aside to 1.6x left the h1 with
     619px against a 620px basis, one pixel under the width at which
     "Structured Thinking. Strong Foundations." sets on two lines, so it broke to
     three. The headline is the first thing on the page and the lead is the
     second; a wider lead is not worth a worse headline. */
  /* GROW into the spare room rather than claim a share of the width. The h1 does
     not grow, so whatever is left after its 620px, the gap and the inset comes
     here - which is the widest the lead can be without pushing the headline onto
     a third line, computed by the browser at every viewport instead of by me at
     one. A flat 40% was right at 1919 and wrong at 1728. */
  flex: 1 1 300px;
  margin-right: var(--hero-aside-inset);
  width: auto;
  padding-top: 8px;
}
/* The lead scales with its column, and that is a consequence of anchoring the
 * aside to the centre line rather than a preference.
 *
 * The column is a quarter of the content box. At a fixed size it would run to
 * 39 characters a line on a laptop and 87 on an ultrawide; the readable band is
 * 45 to 75, so the size has to move with it.
 *
 * The divisor holds the measure near 70 characters whatever the column does.
 * text-wrap: balance is what removes the visible rag: without it line one runs
 * full and line two is a stub, and the block reads as a triangle. */
.hero-lead {
  font-size: clamp(17px, calc((100vw - 2 * var(--gutter)) / 120), 24px);
  line-height: 1.6;
  text-wrap: balance;
  color: var(--slate);
}

/* The hero block: copy on top, film below, at least as tall as the viewport
 * under the header.
 *
 * The film used to be a fixed band. On a monitor taller than about 1200px that
 * left the film ending part-way up the screen with white beneath it, because the
 * band was sized for the design's own canvas and nothing told it about the
 * screen it landed on.
 *
 * Now the copy takes the height it needs and the film takes the remainder, so
 * its TOP edge stays exactly where the design puts it and its BOTTOM edge grows
 * down to the fold. */
.hero-block {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  /* svh where supported: on mobile 100vh measures the viewport with the URL bar
     retracted, which is taller than what the reader can actually see. */
  min-height: calc(100svh - var(--header-h));
}
.hero-block .section--top { flex: 0 0 auto; }

.hero-film {
  display: block;
  width: 100%;
  flex: 1 1 auto;

  /* Never shorter than the design's band, whatever the leftover space says. */
  min-height: 517px;

  /* THE POINT AT WHICH THE HEIGHT IS EXHAUSTED.
     The film is 2560x1098, so 2.3315:1. At full width its own pixels run out at
     100vw / 2.3315; past that the browser is upscaling and the picture softens.
     So the film grows to the fold, or to its native scale, whichever comes
     first - and on a screen tall enough to want more than that, the remainder
     shows as white beneath it rather than as a stretched frame. */
  max-height: calc(100vw / 2.3315);

  object-fit: cover;
  object-position: center;
  background: var(--parchment);
}
.hero-rule { border-top: 1px solid var(--rule-hairline-hero); }

/* -------------------------------------------------------------- structure */

.structure {
  box-sizing: border-box;
  margin: 56px var(--gutter-edge);
  padding: var(--structure-pad-y) var(--structure-pad-x);
  /* The 5px navy stroke the framed contact box used to carry. That box is gone
     and this panel took over its job, so it takes the frame with it. On the
     panel's own 24px radius rather than the box's 8px: the picture is already
     wrapped into these corners, and a frame is not a reason to unround them. */
  border: 5px solid var(--navy);
  border-radius: var(--radius-card);
  background: var(--parchment);
  display: flex;
  gap: 64px;
  align-items: stretch;
  /* The picture bleeds into the padding on three sides, and the panel's own
     radius is what rounds it into the corners. This is the whole mechanism: the
     figure is given a negative margin equal to the padding it should escape,
     and `overflow: hidden` against `border-radius` does the corner. There is no
     radius on the picture itself, so it cannot disagree with the panel's.

     The stroke does not change any of that. `overflow: hidden` clips to the
     PADDING box, which is the inner edge of the border, so the negative margins
     still land the picture flush and the stroke now frames it on three sides.
     The clip picks up the inner radius, 24 less the 5px border, automatically -
     there is no second radius to keep in step. */
  overflow: hidden;
}
/* A flex column, not a block. The button is `display: inline-flex`, so in a
   block it would be an atomic inline box sitting on a text baseline and would
   carry a few pixels of descender space under it that no declaration here
   accounts for. As a flex item it does not, and `align-items: flex-start` is
   what stops it stretching to the column's full width. */
.structure-copy {
  flex: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.structure h2 {
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* .structure-caption was here - the specimen note that sat under the heading.
   The button occupies that slot now, so the panel reads as a question and the
   thing you do about it. .structure-copy is a flex column, so this is a plain
   top margin on a flex item and there is no baseline gap under the button. */
.structure .btn { margin-top: 28px; }

/* The photograph of the sheet, run to the panel's top and bottom edges.
 *
 * The negative margin cancels the panel's own vertical padding exactly, so the
 * picture reaches the edges of the beige rather than stopping inside them. It
 * reads --structure-pad-y for that, which is the same token the padding uses;
 * two copies of 88px would come apart the first time the panel's spacing moved.
 *
 * object-fit: cover, because the box is now as tall as the copy beside it plus
 * the padding it cancelled, which is not the picture's own 16:9. The sheet sits
 * left of centre in the frame, so the crop is biased that way to keep it. */
/* 699px, not 619px, and the extra 80 is exactly the padding it escapes on the
 * right. The two numbers move together on purpose: the figure's MARGIN box stays
 * 619px wide, so the copy column beside it does not move, while the picture
 * itself grows by the width of the strip of parchment that used to sit between
 * it and the panel edge. Written as a basis plus a negative margin rather than
 * as one bigger number, because that is what says the growth IS the padding. */
.structure-figure {
  flex: 0 1 calc(619px + var(--structure-pad-x));
  align-self: stretch;
  margin-top: calc(var(--structure-pad-y) * -1);
  margin-bottom: calc(var(--structure-pad-y) * -1);
  margin-right: calc(var(--structure-pad-x) * -1);
  display: flex;
}
.structure-scene {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
}

/* --------------------------------------------------------------- services */

.section-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.services-rule { height: 2px; background: var(--navy); margin: 40px 0 0; }

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.service {
  box-sizing: border-box;
  padding: 32px 28px;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.services .service:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.services .service:nth-child(3n) { padding-right: 0; }
.services .service:nth-last-child(-n + 3) { padding-bottom: 0; border-bottom: 0; }
/* Centred on the heading's line box, so the icon's middle and the heading's
   middle are the same height. It used to sit 3px BELOW the top of that box,
   which put a 40px icon's centre about 6px under the cap line. */
.service-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: calc(var(--service-h3-size) * var(--service-h3-lh));
}
.service-icon svg { display: block; }
.ico-ink { stroke: var(--navy-deep); fill: none; }
.ico-blue { stroke: var(--blue); fill: none; }
.ico-fill { fill: var(--blue); stroke: var(--blue); }
.ico-dot { fill: var(--navy-deep); stroke: var(--navy-deep); }
.service-body { display: flex; flex-direction: column; gap: 12px; }
.service h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--service-h3-size);
  line-height: var(--service-h3-lh);
}
.service p { font-size: 16px; line-height: 1.7; }

/* -------------------------------------------------------------- resources */

.resources {
  box-sizing: border-box;
  overflow: hidden;
  padding: 72px 64px;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
}
.resources h2 { color: var(--white); }
/* The panel is one row of three columns: the heading with the first paragraph
 * under it, the second paragraph beside that, and the list down the right.
 *
 * It was two columns with all the prose stacked in the left one, which made the
 * panel 754px tall with the list finishing less than half way down and a void
 * under it. The copy column was also 856px wide while its paragraphs were capped
 * at 480px, so the empty band down the middle was the column being wider than
 * anything in it.
 *
 * A grid rather than flex, so the second paragraph starts level with the first
 * instead of level with the heading: the heading occupies row one of column one,
 * both paragraphs sit in row two, and the list spans both rows. */
.resources-top {
  display: grid;
  grid-template-columns: 1fr 1fr 34%;
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  /* The grid is two rows - the heading, then both paragraphs - so this single
     value IS the space under "Balmoral's strength is in its network" and there
     is nowhere else to look for it. Raised from 22px, which sat the body too
     close to a 50px heading. The jurisdiction list spans both rows and starts at
     the top, so widening this gives the list more room rather than moving it. */
  row-gap: 36px;
  align-items: start;
}
/* The heading is asked to hold one line, so its size is derived rather than
 * chosen. "Balmoral's strength is in its network" was measured in the real face
 * (Archivo 600, the served weight) with PIL: 16.217em wide, so 811px at the
 * 50px `.section-h2` size. Column one alone is ~487px at a 1919px viewport,
 * which is why it spans two.
 *
 * The available span is `0.66 * inner - 64` where `inner = 100vw - 248` (the
 * 60px page edge and the panel's own 64px, both doubled). Dividing by 16.217
 * gives `0.0407 * 100vw - 14.04`; the 3.9/13.5 below is that with about 4%
 * taken off, so a hinting difference between this measurement and a browser's
 * shaping cannot push it over. Verified 1280 through 2560.
 *
 * If the heading text changes, RE-MEASURE it. A number here derived from the
 * old string is a number about a heading that no longer exists, and the failure
 * is silent: a longer string just wraps, which is the one thing this rule was
 * added to prevent. Below 900px the mobile `.section-h2` size wins and wrapping
 * is allowed again, because at a phone width no legible size fits on one line. */
.resources-h {
  grid-column: 1 / span 2;
  grid-row: 1;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(36px, calc(3.9vw - 13.5px), 50px);
}
.resources-p--1 { grid-column: 1; grid-row: 2; }
.resources-p--2 { grid-column: 2; grid-row: 2; }
.resources-top .jurisdictions { grid-column: 3; grid-row: 1 / span 2; }

/* No max-width: the column IS the measure now, and a cap inside it only
   reopens the gap the grid was introduced to close. */
.resources-p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mist);
}

/* The jurisdiction list: the right column of the panel. It was described here as
 * "the one thing in it a reader can act on", which was true of the design and
 * has never been true of the built site - all five pointed at "#". They are
 * plain rows until the pages exist. */
.jurisdictions { display: flex; flex-direction: column; }
.jurisdiction {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule-on-dark);
  text-decoration: none;
  color: var(--white);
  transition: color var(--motion);
}
.jurisdiction:last-child { border-bottom: 1px solid var(--rule-on-dark); }
/* Hover belongs to the LINK variant only. A colour change under the cursor on a
   row that goes nowhere is the same false promise as the pointer, and it was
   firing on all five while every href was "#". Rows become links again the
   moment their pages exist and the content carries an href. */
.jurisdiction--link:hover { color: var(--blue-light); }
.jurisdiction b {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
}
.jurisdiction span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--pale);
  white-space: nowrap;
}

/* ----------------------------------------------------------- detail pages */

/* The eleven jurisdiction and service pages. One layout for both: they are the
   same document with and without a facts table, so they share a stylesheet
   section for the same reason they share a component. */
.detail { max-width: 1180px; margin: 0 auto; }
.detail-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-muted);
}
.detail-h1 {
  margin-top: 14px;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* Wider than the body measure below on purpose: a standfirst is read in one
   pass and reads better long, where body copy read in sequence does not. */
.detail-lead {
  margin-top: 24px;
  max-width: 760px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--slate);
}

/* The facts table. A definition list, not a grid of divs: these are name and
   value pairs and a screen reader should hear them as pairs. */
.facts {
  margin: 48px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--rule);
}
.fact {
  display: flex;
  gap: 32px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.fact dt {
  flex: 0 0 240px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-muted);
}
.fact dd { margin: 0; flex: 1; font-size: 17px; line-height: 1.6; color: var(--navy); }

.detail-body { margin-top: 56px; }
.prose + .prose { margin-top: 44px; }
.prose h2 {
  max-width: 760px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* 680px is about 80 characters at 19px, which is the measure the rest of the
   site reads at. The standfirst above is deliberately wider; this is not. */
.prose p {
  margin-top: 18px;
  max-width: 680px;
  font-size: 19px;
  line-height: 1.75;
  color: var(--slate);
}
.detail-back { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }

/* The service heading link on the home page. Inherits the heading's colour
   rather than taking the link blue, so the grid of six still reads as headings
   and not as a list of links. */
.service-link { color: inherit; text-decoration: none; }
.service-link:hover { color: var(--blue); }

/* ----------------------------------------------------------------- notice */

/* .contact-box, .contact-copy and .section--notice were all here at one point or
   another. The regulatory status has now moved three times - beside the button
   in a framed box, then into a section of its own under the panel, now into the
   panel as the body copy under the heading - and each move deleted the layout
   that carried the last one rather than leaving it behind to rot.

   Its heading is `.visually-hidden` in the markup, so there is deliberately no
   `.notice h3` rule here. A font-size on a 1px clipped box is a declaration
   that does nothing, and the next person to read this file would have to work
   out which of the two was the mistake. */
.notice { max-width: 640px; margin-top: 24px; }
/* 14px. It was 16 as a caption, 12 as a footnote under the panel, then 15 when
   it became the panel's body copy; this is one step down from that. It is the
   thing a reader skims on the way to the button, so it should sit below the
   heading without competing with it. */
.notice p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: calc(100% - 120px);
  box-sizing: border-box;
  margin: 0 auto 20px;
  padding: 52px 48px;
  border-radius: var(--radius-card);
  background: var(--navy);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 420px;
}
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.15;
  color: var(--white);
}
.footer-blurb {
  width: 340px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mist);
}
.footer-links {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 72px;
  row-gap: 14px;
}
.footer-links a {
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
  color: var(--white);
}
.footer-links a:hover { color: var(--blue-light); }
.footer-links span { font-size: 16px; line-height: 1.6; color: var(--mist); }
/* The column's 36px gap is right everywhere above this rule and too much below
   it: the rule reads as a divider between two blocks rather than as the line
   the colophon sits under. The negative margin takes the space beneath it to
   14px without touching the gap above, which is why it is here and not on
   .site-footer. */
.footer-rule {
  height: 1px;
  background: var(--rule-on-dark);
  margin-bottom: -22px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 64px;
}
/* DEVIATION 3. The design set the colophon in #74777B on the navy footer:
   3.46:1, under 4.5:1 at 13px. --pale measures 6.32:1 on --navy. */
.footer-bottom p {
  max-width: 720px;
  font-size: 13px;
  /* 1.45, down from 1.7. Leading is half the reason the rule looked far away:
     a 13px line in a 1.7 line box carries about 4.5px of empty space above the
     letters before the text starts, so tightening the leading moves the text up
     under the rule as surely as moving the rule down does. */
  line-height: 1.45;
  color: var(--pale);
}
.footer-bottom .mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--pale);
  white-space: nowrap;
}

/* .confirm was here: the mono note with the brass rule that rendered an
   unanswered question on the page. Every call site is gone on request, so the
   class has nothing to style. Removed rather than left behind - a rule matching
   nothing is a rule the next person has to prove is dead before touching it. */


/* ----------------------------------------------------------- 1280 and down */

@media (max-width: 1279px) {
  :root { --gutter: 80px; --gutter-edge: 40px; }
  .hero-grid { gap: 64px; }
  /* min-width reset: the desktop floors would overflow a narrow viewport, and
     the centre anchor is not attempted down here anyway. */
  .hero-grid { justify-content: flex-start; }
  .hero-h1 { width: auto; flex: 1 1 55%; min-width: 0; font-size: 60px; }
  .hero-aside { width: auto; flex: 1 1 40%; min-width: 0; margin-right: 0; }
  :root { --structure-pad-y: 64px; --structure-pad-x: 48px; }
  .structure { flex-direction: column; padding: var(--structure-pad-y) var(--structure-pad-x); }
  /* stacked: no bleed, the picture is just a full-width block */
  .structure-figure { flex: 1 1 auto; width: 100%; margin-top: 0; margin-bottom: 0; }
  .structure-scene { width: 100%; height: auto; object-fit: fill; }
  /* Below 1280 the three columns become one, in reading order. */
  .resources-top { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 32px; }
  .resources-h, .resources-p--1, .resources-p--2 { grid-column: 1; grid-row: auto; }
  /* One column now, so the span is the full panel width and the heading has
     more room here than it did above, not less. nowrap still holds. */
  .resources-top .jurisdictions { grid-column: 1; grid-row: auto; width: 100%; }
  .footer-brand { width: auto; flex: 1 1 auto; }
}

/* ------------------------------------------------------------ 900 and down */

@media (max-width: 899px) {
  :root { --gutter: 40px; --gutter-edge: 24px; --header-h: 68px; }
  .section--top { padding: 72px var(--gutter) 56px; }
  .section { padding: 56px var(--gutter); }
  .hero-grid { flex-direction: column; gap: 32px; }
  .hero-h1 { font-size: 44px; }
  /* On a phone the copy alone can fill the screen, so the film goes back to a
     band rather than claiming the rest of the viewport. */
  .hero-block { display: block; min-height: 0; }
  .hero-film { flex: none; height: 320px; min-height: 0; max-height: none; }
  .services { grid-template-columns: 1fr; }
  .service {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  .services .service:nth-child(3n + 1),
  .services .service:nth-child(3n) { padding-left: 0; padding-right: 0; }
  .services .service:nth-last-child(-n + 3) {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule);
  }
  .services .service:last-child { padding-bottom: 0; border-bottom: 0; }
  .section-h2 { font-size: 36px; }
  /* 36px puts the panel heading at 584px, which is wider than the panel from
     about 660px down. Wrapping is the right answer on a phone, so the desktop
     nowrap is released here. This rule must stay AFTER `.section-h2` above:
     both are one class, so source order is what decides which size wins, and
     the clamp on `.resources-h` would otherwise carry a desktop size onto a
     phone. */
  .resources-h { white-space: normal; font-size: 36px; }
  :root { --structure-pad-y: 48px; --structure-pad-x: 24px; }
  .structure { margin: 24px var(--gutter-edge); padding: var(--structure-pad-y) var(--structure-pad-x); }
  .structure h2 { font-size: 36px; }
  .resources { padding: 48px 24px; }
  .detail-h1 { font-size: 40px; }
  .detail-lead { font-size: 18px; }
  /* The facts table stacks: a 240px term column beside a value leaves the value
     about 90px wide on a phone. */
  .fact { flex-direction: column; gap: 6px; }
  .fact dt { flex: 1 1 auto; }
  .prose h2 { font-size: 24px; }
  .prose p { font-size: 17px; }
  /* The cap comes off the notice, not off its paragraph - the max-width moved
     to .notice when it went back inside the panel, and a rule left pointing at
     .notice p would have been a cap that lifts nothing. The stacked column is
     already narrower than 640px, so this is belt and braces either way. */
  .notice { max-width: none; }
  .site-header { height: auto; padding: 24px var(--gutter-edge) 0; }
  .site-footer {
    width: calc(100% - 48px);
    margin: 0 auto 12px;
    padding: 40px 24px;
  }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-blurb { width: auto; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ------------------------------------------------------------------ print */

@media print {
  .hero-film, .site-header nav { display: none; }
  body { color: var(--print-ink); }
}