/* Data Image — website mockup, Revision 06, with the brand update of the final developer handover (6 October 2026):
   the supplied logo (alone in the header, its strapline written in the footer), charcoal #363432, lime #C6D219 and
   pale #F4F4F0 on white-led pages.
   Built to the Revision 06 page visuals: 1440px reference, 5% page gutters, three-column card grids,
   white / paper / charcoal with lime accents, set in the Nimbus Sans the visuals were drawn with.
   Sizes in comments are the 1440px reference values. Type and spacing follow the page's width down to a 390px
   phone and up to a 1600px page, and stop growing there: a larger screen gets more room, not larger words.
   The opening of every page is also sized by the HEIGHT of the screen (--vh), so that the first screen always
   shows where the real content starts; no picture or card is taller than the screen. tools/firstscreen.mjs
   measures this on eight screens. */

@font-face { font-family: 'Nimbus Sans'; src: url('../fonts/NimbusSans-Regular.woff') format('woff'), url('../fonts/NimbusSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nimbus Sans'; src: url('../fonts/NimbusSans-Bold.woff') format('woff'), url('../fonts/NimbusSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --white: #ffffff;
  --paper: #f4f4f0;                         /* brand pale */
  --paper-2: #eff1e8;
  --paper-3: #f2f4ea;
  --ink: #363432;                           /* brand charcoal: text, and the ground of the picture controls */
  --ink-2: #555951;
  --ink-3: #62675b;
  --line: #e6e7df;
  --card-line: #e0e2d8;
  --rule: #cdd0c5;
  --field: #878e7b;
  --lime: #c6d219;                          /* brand lime: accents, and behind charcoal text. Never small text on white */
  --lime-2: #d2dc3f;
  --lime-ink: #647000;
  --lime-soft: #eaf0cc;
  --lime-tag: #e2e8c6;
  --dark: #171916;
  --dark-line: #41463a;
  --on-dark-2: #c5c9bd;
  --on-dark-3: #b8bcae;
  --error: #b12f2f;
  --font: 'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter: clamp(22px, 5vw, 80px);
  /* The header. --header-h is its height when a page opens, with the strapline under the logo; --header-stuck its
     height once the page is scrolled, when the strapline has moved beside the logo (whatever sticks under the
     header is placed by that). --logo-open and --logo-stuck are the logo's width in each. Alfie set the scale on
     7 October 2026: the handover's 148px header (logo and strapline together at 220px) was "massive" and 92px
     with the logo at the brand's 180px "still disproportionately massive", so the logo is smaller than the brand
     guidelines' 180px; and the strapline, dropped when the header was slimmed, "needs to be there, but it needs
     to be smart". */
  --header-h: 80px;
  --header-stuck: 56px;
  --logo-open: 120px;
  --logo-stuck: 96px;
  --tag-size: 12px;                       /* the strapline beside the logo */
  --tag-open: .9167;                      /* its scale under the logo: 11px */
  --lift: 6.5px;                          /* how far the logo moves up to make room for the strapline under it */
  --tag-side: 29px;                       /* from the logo across to the strapline: 14px, a 1px hairline, 14px */
  --cap: .718;                            /* the height of a capital letter in Nimbus Sans, as a share of the type size */
  --tag-ems: 14.04;                       /* the strapline's width over its type size; the page gives the real figure */
  --hd: .22s;                             /* one step of the header's change (it changes in two steps) */
  --hd-wait: var(--hd);                   /* how long the second step waits for the first */
  --vh: 1vh;                              /* 1% of the screen's height (the small-viewport unit where the browser has it) */
  --section: clamp(36px, min(4.52vw, calc(7.6 * var(--vh))), 72.3px);   /* 65px */
  --gap: clamp(20px, 1.95vw, 31.2px);       /* 28px */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@supports (height: 1svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-stuck) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 18px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea, summary { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button, a, summary { touch-action: manipulation; }
h1, h2, h3, p, figure, ul, ol, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
h1, h2, h3 { font-weight: 700; }
:focus-visible { outline: 3px solid #526000; outline-offset: 4px; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }
::selection { background: var(--lime); color: var(--ink); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--white); color: var(--ink); padding: 16px 20px; font-weight: 700; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page { max-width: 1920px; margin-inline: auto; background: var(--white); }
.wrap { padding-inline: var(--gutter); }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1 { font-size: clamp(40px, min(4.444vw, calc(8.2 * var(--vh))), 71.1px); line-height: 1.015; letter-spacing: clamp(-3.8px, -.2361vw, -2.3px); }   /* 64px, -3.4px */
h2 { font-size: clamp(34px, 3.056vw, 48.9px); line-height: 1.1; letter-spacing: clamp(-2px, -.125vw, -1.3px); margin-bottom: 28px; }   /* 44px, -1.8px */
h3 { font-size: 24px; line-height: 1.18; letter-spacing: -.7px; margin-bottom: 12px; }
p { margin: 14px 0 24px; max-width: 800px; color: var(--ink-2); }
.large { max-width: 960px; font-size: clamp(23px, 2vw, 32px); line-height: 1.3715; letter-spacing: -.5px; }   /* 28.8px on 39.5px */
.center-start { align-self: start; }

.eyebrow { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; max-width: none; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: ''; width: 30px; height: 3px; background: var(--lime); flex: none; margin-top: calc(.7em - 1.5px); }
.eyebrow i { font-style: normal; }
.eyebrow .lc { text-transform: none; }
.eyebrow.sm { font-size: 9px; letter-spacing: 1px; margin-bottom: 16px; }
.num { display: block; margin-bottom: 22px; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--lime-ink); font-variant-numeric: tabular-nums; }

/* ── Buttons and links ───────────────────────────────────────────────── */
.arr { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 66px; padding: 0 25px; background: var(--lime); color: var(--ink); border: 0; font-size: 16px; line-height: 1.2; font-weight: 700; white-space: nowrap; transition: background .2s var(--ease); }
.btn:hover { background: var(--lime-2); }
.btn:hover .arr, .tlink:hover .arr, .card:hover .more .arr, .tcard:hover .more .arr, .rowlinks a:hover .arr, .sub-all:hover .arr, .f-map:hover .arr { transform: translate(2px, -2px); }
.btn-sm { min-height: 59px; padding: 0 20px; font-size: 14px; gap: 24px; }
.btn.inline { min-height: 58px; gap: 8px; }
.btn.inline .arr { width: 13px; height: 13px; }
.btn-sm .arr { width: 14px; height: 14px; }
.btn[disabled] { opacity: .6; cursor: default; }
.tlink { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; padding: 8px 0; margin-top: 14px; border-bottom: 1px solid var(--ink); font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.tlink .arr { width: 13px; height: 13px; }
.more { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.more .arr { width: 11px; height: 11px; }

/* ── Header ──────────────────────────────────────────────────────────── */
/* The header keeps the room it opens with (--header-h) for as long as the page is open; only the white bar inside
   it gets shorter once the page is scrolled (--bar-h). Nothing below moves when that happens, so the page never
   jumps and the header cannot flicker at the point where it changes (it did, when the header itself changed
   height). The room under the shorter bar is empty and lets clicks through. The line under the bar is a shadow,
   not a border, so that the bar's own height is a whole, even number and what is centred in it lands on whole
   pixels.

   When a page opens, the strapline sits under the logo and the menu in the middle of the page. Once the page is
   scrolled the bar slims: the strapline moves beside the logo, behind a hairline, and the menu moves across to
   the button. It changes in two steps, so that the strapline never crosses the logo: first sideways (the
   strapline and the menu), then the bar tightens (its height, the logo, the strapline up to the middle); and the
   other way round on the way back.

   How it is laid out. The bar has three parts: the logo and strapline (.brand), the menu, and the button
   (.tools). When a page opens the first and last share the spare room equally, which puts the menu exactly in
   the middle of the page; once scrolled the last gives up its share, which puts the menu beside the button. That
   switch is made at once, and the script slides the menu from where it was to where it now belongs (the browser
   cannot ease between the two layouts evenly by itself: it all but jumps). The logo
   and strapline are laid out as they stand once scrolled, side by side; the opening arrangement is that layout
   moved: the strapline back under the logo (--drop), the logo up to make room for it (--lift). The pair is
   centred as one block, from the top of the logo's circles to the line the strapline's letters stand on.

   Under the logo the strapline is the wider of the two (154px against 120px), so it is the strapline that starts
   at the page's left margin and the logo that is moved in (--logo-in) to stand centred over it: Alfie, 8 October
   2026, "the tagline needs to be centered, not have the text start in the same place". Once scrolled the logo is
   back at the margin. */
.site-header { --bar-h: var(--header-h);
  /* The strapline's capitals under the logo are --tag-size x --tag-open x --cap tall (7.9px). With the logo moved
     up by --lift and the pair centred, the gap between them is twice --lift less that height (5.1px; 4.1px on a
     phone), and the strapline's middle sits --drop below the middle of the bar. .41908 is the logo's height as a
     share of its width. */
  --tag-gap: calc(2 * var(--lift) - var(--tag-size) * var(--tag-open) * var(--cap)); --drop: calc((var(--logo-open) * .41908 + var(--tag-gap)) / 2);
  /* How far in from the margin the logo stands when the strapline is under it: half of what the strapline is wider
     by (17px; 25px on a phone, where the logo is smaller). */
  --logo-in: max(0px, calc((var(--tag-size) * var(--tag-ems) * var(--tag-open) - var(--logo-open)) / 2));
  position: sticky; top: 0; z-index: 60; height: var(--header-h); pointer-events: none; }
.site-header.scrolled { --bar-h: var(--header-stuck); }
.site-header.instant { --hd: 0s; --hd-wait: 0s; }   /* a page opened part-way down arrives already slim, without the show */
@media (prefers-reduced-motion: reduce) { .site-header { --hd: 0s; --hd-wait: 0s; } }   /* less motion asked for: it changes at once */
.bar { height: var(--bar-h); display: flex; align-items: center; gap: 28px; padding-inline: var(--gutter); background: var(--white); box-shadow: 0 1px 0 #e5e5e1, 0 14px 28px -22px rgba(54, 52, 50, 0); pointer-events: auto; transition: height var(--hd) var(--ease), box-shadow .25s var(--ease); }
.site-header.lifted .bar { box-shadow: 0 1px 0 #e5e5e1, 0 14px 28px -22px rgba(54, 52, 50, .45); }
/* The words in the bar (the strapline, the menu, the button, Menu) are centred on the height of their capital
   letters: from the top of a capital to the line the letters stand on. Left to itself this typeface sits about
   2px high in any box (its own measurements put the middle of a line below the middle of its capitals), and the
   browser rounds each size of type differently, which left the menu a pixel above the button's words. Where the
   browser can trim a line of type to its capitals it does exactly that; elsewhere the words are moved down by
   the difference. */
.site-header .cap { display: block; line-height: 1; }
@supports (text-box: trim-both cap alphabetic) { .site-header .cap { text-box: trim-both cap alphabetic; } }
@supports not (text-box: trim-both cap alphabetic) { .site-header .cap { position: relative; top: .13em; } }
.brand { flex: 1 1 0; min-width: 0; display: flex; align-items: center; pointer-events: none; }
.logo { flex: none; display: block; width: var(--logo-open); translate: var(--logo-in) 0; transform: translateY(calc(-1 * var(--lift))); pointer-events: auto; transition: width var(--hd) var(--ease), transform var(--hd) var(--ease), translate var(--hd) var(--ease) var(--hd-wait); }
.logo img { display: block; width: 100%; height: auto; }
.tagline { flex: none; position: relative; margin: 0 0 0 14px; padding-left: calc(var(--tag-side) - 14px); font-size: var(--tag-size); letter-spacing: .01em; white-space: nowrap; color: var(--ink); transform: translateX(calc(-1 * (var(--logo-open) + var(--tag-side)))); transition: transform var(--hd) var(--ease) var(--hd-wait); }
.tagline::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 24px; margin-top: -12px; background: var(--rule); opacity: 0; transition: opacity var(--hd) var(--ease); }
.tagline .cap { transform-origin: 0 50%; transform: translateY(var(--drop)) scale(var(--tag-open)); transition: transform var(--hd) var(--ease); }
.nav { flex: none; display: flex; align-items: stretch; gap: 28px; height: 100%; font-size: 15px; font-weight: 700; transition: transform var(--hd) var(--ease); }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-link:hover::after, .nav-item:focus-within .nav-link::after, .nav-link[aria-current='page']::after, .nav-link[data-current]::after { transform: scaleX(1); }
.tools { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.header-cta { min-height: 46px; padding: 0 20px; gap: 22px; font-size: 15px; transition: background .2s var(--ease), min-height var(--hd) var(--ease), padding var(--hd) var(--ease), gap var(--hd) var(--ease), font-size var(--hd) var(--ease), transform var(--hd) var(--ease); }
.header-cta .arr { width: 14px; height: 14px; }
/* Once the page is scrolled. Here the sideways step goes first and the tightening waits for it. */
.site-header.scrolled .bar { transition-delay: var(--hd-wait), 0s; }
.site-header.scrolled .tools { flex-grow: 0; }
.site-header.scrolled .logo { width: var(--logo-stuck); translate: 0 0; transform: none; transition-delay: var(--hd-wait), var(--hd-wait), 0s; }
.site-header.scrolled .tagline { transform: none; transition-delay: 0s; }
.site-header.scrolled .tagline::before { opacity: 1; transition-delay: var(--hd-wait); }
.site-header.scrolled .tagline .cap { transform: none; transition-delay: var(--hd-wait); }
.site-header.scrolled .header-cta { min-height: 38px; padding: 0 16px; gap: 16px; font-size: 14px; transition-delay: 0s, var(--hd-wait), var(--hd-wait), var(--hd-wait), var(--hd-wait), var(--hd-wait); }
.sub { position: absolute; top: calc(100% - 16px); left: -24px; min-width: 268px; padding: 14px 0 0; background: var(--white); border: 1px solid var(--card-line); box-shadow: 0 30px 50px -30px rgba(21, 21, 21, .35); font-weight: 400; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.sub.wide { min-width: 560px; }
.sub.wide ul { columns: 2; column-gap: 0; }
.sub ul { padding-bottom: 12px; }
.sub li { break-inside: avoid; }
.sub li a { display: block; padding: 9px 24px; font-size: 15px; line-height: 1.3; }
.sub li a:hover { background: var(--paper); }
.sub-all { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 24px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; background: var(--paper); }
.sub-all .arr { width: 12px; height: 12px; }
.nav-item:hover .sub, .nav-item:focus-within .sub { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 14px; transition: transform var(--hd) var(--ease); }
.menu-btn .tri { width: 0; height: 0; border-left: 7px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .2s var(--ease); }
.menu-btn[aria-expanded='true'] .tri { transform: rotate(90deg); }
.mobile-nav { display: none; }

/* A short screen (most Windows laptops show 650 to 730 pixels of page): the plain opening's own button and gaps are slimmer. */
@media (min-width: 1040px) and (max-height: 780px) {
  .hero-plain .btn { min-height: 56px; }
  .hero-plain .hero-intro { margin: 20px 0; }
}

/* A small laptop: the menu is set a little closer so that, once the page is scrolled, the strapline, the menu and
   the button share the bar. */
@media (min-width: 1040px) and (max-width: 1179px) {
  .nav { gap: 20px; font-size: 14px; }
  .header-cta, .site-header.scrolled .header-cta { padding: 0 16px; gap: 14px; }
}
/* Six menu items (a build without Our work's menu holding Ideas) leave no room beside the logo on anything but a
   wide screen: there the logo stands alone, as it does in the brand guidelines' compact header. */
@media (min-width: 1040px) and (max-width: 1399px) {
  .site-header.nav6 .tagline { display: none; }
  .site-header.nav6 .logo { translate: 0 0; transform: none; }
  .site-header.nav6 .nav { gap: 20px; font-size: 14px; }
}
@media (max-width: 1039px) {
  .nav { display: none; }
  .bar { gap: 14px; }
  .header-cta, .site-header.scrolled .header-cta { min-height: 44px; padding: 0 13px; gap: 8px; font-size: 13px; }
  .header-cta .arr { width: 12px; height: 12px; }
  .menu-btn { display: inline-flex; }
  .mobile-nav { display: block; position: absolute; left: 0; right: 0; top: var(--bar-h); max-height: calc(100svh - var(--bar-h)); pointer-events: auto; overflow-y: auto; background: var(--white); border-top: 1px solid #e5e5e1; border-bottom: 1px solid var(--line); padding: 6px var(--gutter) 28px; box-shadow: 0 40px 60px -40px rgba(21, 21, 21, .4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
  body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .mobile-nav > a, .mobile-nav summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 700; letter-spacing: -.02em; list-style: none; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-right: 4px; transition: transform .2s var(--ease); }
  .mobile-nav details[open] summary::after { transform: rotate(-135deg); }
  .mobile-nav details ul { padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
  .mobile-nav details li a { display: block; padding: 10px 0; font-size: 16px; color: var(--ink-2); }
  .mobile-nav details li a strong { color: var(--ink); }
  .mobile-nav > a.m-cta { justify-content: space-between; margin-top: 22px; border: 0; font-size: 16px; letter-spacing: 0; min-height: 60px; }
  .m-contact { margin: 20px 0 0; font-size: 15px; line-height: 1.8; }
  .m-contact a { text-decoration: underline; text-underline-offset: 3px; }
}
/* A phone, or a small tablet held upright. The strapline sits under the logo while the page is at the top; once
   scrolled there is no room for it beside the logo, so the slim bar carries the logo alone (the brand guidelines'
   compact header). It is placed, not laid out, so it never pushes the button. */
@media (max-width: 699px) {
  :root { --header-h: 72px; --logo-open: 104px; --lift: 6px; --hd-wait: 0s; }   /* a whole number: the button moves by it too, and must stay sharp */
  .brand { position: relative; }
  .tagline { position: absolute; left: 0; top: calc(50% + var(--drop)); margin: 0; padding: 0; transform: translateY(-50%); transition: opacity .15s var(--ease) .12s, visibility 0s; }
  .tagline::before { display: none; }
  .tagline .cap, .site-header.scrolled .tagline .cap { transform: scale(var(--tag-open)); transition: none; }
  .site-header.scrolled .tagline { transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .1s var(--ease), visibility 0s linear .1s; }
}
/* A phone: the strapline runs on under the button, so the button and Menu sit level with the logo, above it. */
@media (max-width: 479px) {
  .header-cta, .menu-btn { transform: translateY(calc(-1 * var(--lift))); }
  .site-header.scrolled .header-cta, .site-header.scrolled .menu-btn { transform: none; }
}
/* A narrow phone: the button loses its arrow and a little padding so that the logo, the button and Menu share the bar. */
@media (max-width: 399px) {
  .bar, .tools { gap: 10px; }
  .header-cta, .site-header.scrolled .header-cta { padding: 0 11px; }
  .header-cta .arr { display: none; }
  .menu-btn { gap: 6px; }
}

/* ── Pictures and captions ───────────────────────────────────────────── */
.fig { position: relative; overflow: hidden; background: var(--paper-2); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; bottom: 16px; z-index: 2; max-width: calc(100% - 24px); padding: 5px 8px; background: rgba(21, 21, 21, .7); color: #fff; font-size: 11px; line-height: 1.5; }
.chip.right { right: 16px; }
.chip.left { left: 8px; bottom: 6px; padding: 3px 7px; font-size: 9px; background: rgba(23, 23, 23, .72); }
.figb .frame { height: clamp(220px, 25.7vw, 411.2px); overflow: hidden; background: var(--paper-2); }   /* 370px */
.figb img { width: 100%; height: 100%; object-fit: cover; }
.figb figcaption { padding: 8px 0; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* ── Heroes ──────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 47% 53%; min-height: min(clamp(520px, 43.06vw, 689px), calc(100 * var(--vh) - var(--header-h))); background: var(--paper); }   /* 620px */
.hero-text { align-self: center; padding: clamp(30px, min(5.14vw, calc(8 * var(--vh))), 82.2px) 4.23vw clamp(30px, min(4.72vw, calc(7.4 * var(--vh))), 75.5px) var(--gutter); }   /* 74px 61px 68px 72px */
.hero-intro { margin: 28px 0; max-width: 800px; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.46; }   /* 21.6px */
.hero-media { min-height: 100%; }
.hero-media img { position: absolute; inset: 0; }
.hero.inset { grid-template-columns: 43% 57%; }
.hero.inset h1 { font-size: clamp(38px, min(4.028vw, calc(7.4 * var(--vh))), 64.4px); }   /* 58px */
.hero.inset .hero-text { padding-right: 2.4vw; }
.hero.inset .hero-media { margin: 2.5vw 0 2.92vw; min-height: 0; }   /* 36px, 42px */
/* A 16:9 picture loses its sides when the picture area gets squarer on a small laptop, so there it keeps its own shape. */
@media (min-width: 900px) and (max-width: 1199px) { .hero.inset .hero-media.wide { align-self: center; aspect-ratio: 16 / 9; } }
.hero-plain { min-height: clamp(0px, min(25vw, calc(34 * var(--vh))), 400px); padding: clamp(28px, min(4.444vw, calc(7 * var(--vh))), 71.1px) 0; background: var(--paper); }   /* 360px, 64px */
.hero-plain .wrap { max-width: clamp(0px, 75.7vw, 1211.2px); }   /* 1090px: a long headline turns at the same point as the visuals */
.hero-plain h1 { font-size: clamp(40px, min(5.139vw, calc(9.4 * var(--vh))), 82.2px); }   /* 74px */
.hero-plain .hero-intro { max-width: 840px; }
/* On a wide screen the opening is one row: the heading, then the intro, then the button. Stacked, it filled the
   first screen of a laptop on its own and the page's content started below it.
   The heading takes the room its words need (up to 62% of the row) so that it stays on one line where it can. */
@media (min-width: 1040px) {
  .hero-plain { min-height: 0; }
  .hero-plain .wrap { display: grid; grid-template-columns: fit-content(62%) minmax(0, 1fr) auto; column-gap: clamp(28px, 3.6vw, 57.6px); align-items: end; max-width: none; }
  .hero-plain .eyebrow { grid-column: 1 / -1; }
  .hero-plain h1 { grid-column: 1; }
  .hero-plain .hero-intro { grid-column: 2; margin: 0 0 .3em; max-width: 34em; font-size: clamp(17px, 1.39vw, 22.2px); }   /* 20px */
  .hero-plain .hero-actions { grid-column: 3; margin-bottom: .45em; }
  .hero-plain h1:last-child { grid-column: 1 / -1; }
  /* A page that is a list to browse: a slightly smaller heading, so even a long one keeps to its line. */
  .hero-plain.list h1 { font-size: clamp(40px, min(4.4vw, calc(8.4 * var(--vh))), 70.4px); }   /* 63px */
  .hero-plain.list .wrap { grid-template-columns: fit-content(70%) minmax(0, 1fr) auto; }
}
/* On a laptop (a wide screen that is not tall) a list page leaves its opening button out: the header's is a few
   lines above it, and the room goes to the list. A tall screen has the room and keeps the button. */
@media (min-width: 1040px) and (max-height: 899px) {
  .hero-plain.list .hero-actions { display: none; }
  .hero-plain.list .wrap { grid-template-columns: fit-content(70%) minmax(0, 1fr); }
}
/* A very short screen also drops the small count line above the list's heading. */
@media (min-width: 1040px) and (max-height: 700px) {
  .hero-plain.list + .section .wrap > .eyebrow { display: none; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The home page's opening (the final developer handover, 6 October 2026): a headline and button that stay put, and
   four pictures shown in turn behind or below them. One picture is on show at a time (.is-active); the one it
   replaces stays whole underneath (.is-leaving) while the next fades in over it, so the picture never dims
   half way. .hh-bar is one slim charcoal bar holding the name of the picture on show (.hh-name) and, once the
   script that turns the pictures is running, an arrow back, the count and an arrow on (.hh-controls). --ctl is
   the bar's height and the size of each arrow: 36px for a mouse, 40px for a finger.
   Each kind of screen has its own arrangement:
     a wide screen   the pictures fill the opening, the white card sits on them at the left, and the bar sits
                     at the bottom right. The opening is never taller than the screen under the header; on a
                     short screen the card and its words get smaller with it, so the button and the bar are
                     always on the first screen.
     a tablet        the card, then the pictures below it at 2:1, with the bar on the picture's bottom right.
     a phone         the card, then the pictures, then the bar across the full width under the picture: the
                     name on the left, the arrows on the right where a thumb reaches them, and none of the
                     picture hidden. */
.home-hero { background: var(--paper); }
.hh-card { padding: 40px var(--gutter); }
.hh-card .hero-intro { max-width: 620px; }
.hh-media { position: relative; height: min(50vw, calc(46 * var(--vh))); min-height: 300px; overflow: hidden; background: var(--dark); }
.hh-slides { position: absolute; inset: 0; }
.hh-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.hh-slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity .9s ease; }
.hh-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; }
.hh-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hh-slide.is-active { transition: none; } }
.hh-bar { --ctl: 36px; position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: stretch; max-width: calc(100% - 32px); background: rgba(54, 52, 50, .94); color: #fff; }
.hh-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--ctl); margin: 0; max-width: none; padding: 4px 14px; color: #fff; font-size: 13px; line-height: 1.25; font-weight: 700; }
.hh-name small { margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--on-dark-2); }
.hh-controls { display: flex; align-items: stretch; flex: none; border-left: 1px solid rgba(255, 255, 255, .22); }
.hh-controls[hidden] { display: none; }
.hh-controls button { display: grid; place-items: center; width: var(--ctl); min-height: var(--ctl); padding: 0; background: none; border: 0; color: #fff; transition: background .2s var(--ease), color .2s var(--ease); }
.hh-controls button:hover { background: rgba(255, 255, 255, .14); color: var(--lime); }
.hh-controls button:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.hh-controls .chev { width: 14px; height: 14px; }
.hh-count { display: grid; place-items: center; min-width: 38px; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .hh-bar { --ctl: 40px; } }
@media (min-width: 1100px) {
  /* --w is one reference pixel at the page's width (1440 wide in the visuals). --hh is the opening's height: the
     680 of the visuals, but never more than the screen under the header. --u is the reference pixel the card is
     drawn in: --w, or smaller when the opening is short, so the card (561 tall in the visuals) always fits with
     room above and below. The card sits a little above the middle, as the visuals place it. */
  .home-hero {
    --w: calc(min(100vw, 1920px) / 1440);
    --hh: clamp(460px, calc(100 * var(--vh) - var(--header-h)), calc(680 * var(--w)));
    --u: min(var(--w), calc(var(--hh) / 625));
    position: relative; height: var(--hh); overflow: hidden; background: var(--dark);
  }
  .hh-media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hh-card { position: absolute; z-index: 4; left: var(--gutter); top: calc((var(--hh) - 561 * var(--u)) * .4); width: calc(429 * var(--u)); min-height: calc(561 * var(--u)); padding: calc(30.9 * var(--u)) calc(32 * var(--u)) calc(33 * var(--u)); background: var(--white); }
  .hh-card .eyebrow { margin-bottom: calc(22.2 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: calc(1 * var(--u)); }
  .hh-card .eyebrow::before { width: calc(30 * var(--u)); }
  .hh-card h1 { font-size: calc(51.4 * var(--u)); line-height: 1.0117; letter-spacing: calc(-2.73 * var(--u)); }
  .hh-card .hero-intro { margin: calc(25.6 * var(--u)) 0 calc(23.8 * var(--u)); font-size: calc(19.3 * var(--u)); line-height: 1.425; }
  .hh-card .btn { min-height: calc(66 * var(--u)); padding: 0 calc(25 * var(--u)); gap: calc(30 * var(--u)); font-size: calc(16 * var(--u)); }
  .hh-card .btn .arr { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .hh-bar { right: 24px; bottom: 24px; }
}

/* ── The connected message that leads the benefits (home) ────────────── */
.section.lead-in { padding-bottom: 0; }
.lead-in h2 { margin-bottom: 6px; }
.lead-in + .benefits { padding-top: clamp(24px, 2.6vw, 41.6px); }

/* ── Benefits strip ──────────────────────────────────────────────────── */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 32px var(--gutter); border-bottom: 1px solid #dddddd; }
.benefits p { margin: 8px 0 0; font-size: 16px; }
.benefits .b-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding: var(--section) 0; }
.section + .section, .notice + .section { border-top: 1px solid var(--line); }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.wrap.twocol > h2 { margin-bottom: 0; }
.useful p { font-size: 16px; }
.useful .btn { margin-top: 7px; }

/* ── Two things side by side: a heading, a line of text and a link (home, "The complete production picture.") ── */
.overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(32px, 4.2vw, 67.2px); }
.overview h3 { font-size: clamp(24px, 2.014vw, 32.2px); }   /* 29px */
.overview p { margin: 0; max-width: 34em; }
.overview .tlink { margin-top: 20px; }

/* ── Specialist print & finishes: the tactile pictures (the final developer handover) ──
   A tactile picture is always shown whole, at its own 3:2: the raised word in the lettering picture is never cut. */
.figb.whole .frame { height: auto; aspect-ratio: 3 / 2; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
.duo h3 { margin: 22px 0 10px; }
.duo .figb + h3 { margin-top: 22px; }
.duo .figb:has(figcaption) + h3 { margin-top: 12px; }
.duo p { margin: 0; max-width: 34em; font-size: 17px; }
.section.tint { background: var(--paper); }
.section.tint, .section.tint + .section { border-top: 0; }
.twocol.mid { align-items: center; }
.tint .feature-text h2 { margin-bottom: 18px; }
.tint .feature-text p { margin: 0; }

/* ── A short list of facts in ruled columns, and the small print under it (Sustainability, on-site energy) ── */
.facts-intro { margin: 30px 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin-bottom: 30px; }
.facts li { padding: 22px 0 26px; border-top: 2px solid var(--ink); font-size: clamp(22px, 1.8vw, 28.8px); line-height: 1.18; font-weight: 700; letter-spacing: -.6px; color: var(--ink); }   /* 26px */
.facts + p { margin-top: 0; }
.fine { margin-bottom: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* ── Ruled, numbered columns ─────────────────────────────────────────── */
.numbered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; }
.numbered.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numbered > div { border-top: 2px solid var(--ink); padding: 24px 0; }
.numbered h3 { max-width: 320px; font-size: clamp(24px, 2.014vw, 32.2px); }   /* 29px */
.numbered.c4 h3 { font-size: 24px; }
.numbered p { font-size: 17px; }
.numbered.nonum h3 { font-size: 22px; }
.numbered.nonum p { font-size: 16px; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--card-line); transition: border-color .2s var(--ease); }
.card-media { aspect-ratio: 1.6; }
.card-media img { transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.035); }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 25px; }
.card h3, .tcard h3 { font-size: 25px; margin-bottom: 12px; }
.card p, .tcard p { margin: 0 0 20px; font-size: 16px; line-height: 1.4; }
.card:hover, .tcard:hover { border-color: #b9bdaa; }
.card.is-hidden { display: none; }
.tcard { display: flex; flex-direction: column; padding: 25px; background: var(--white); border: 1px solid var(--card-line); border-top: 3px solid var(--lime); transition: border-color .2s var(--ease); }
.tcard:hover { border-top-color: var(--lime); }
/* The lead card opens the Ideas & inspiration grid (and the Our work grid) at full width, picture beside
   text. Desktop only: below 900px it is an ordinary card, so the two-column Ideas grid still divides evenly. */
@media (min-width: 900px) {
  .cards .card.lead { grid-column: 1 / -1; flex-direction: row; }
  .cards .card.lead .card-media { flex: 0 0 58%; aspect-ratio: 16 / 9; max-height: min(calc(58 * var(--vh)), 540px); }
  .cards .card.lead .card-body { justify-content: center; padding: clamp(30px, 3.6vw, 57.6px); }
  .cards .card.lead .eyebrow.sm { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 20px; }
  .cards .card.lead h3 { font-size: clamp(32px, 2.78vw, 44.5px); line-height: 1.08; letter-spacing: -1.4px; margin-bottom: 16px; }   /* 40px */
  .cards .card.lead p { margin-bottom: 26px; font-size: 18px; line-height: 1.5; }
  .cards .card.lead .more { margin-top: 0; font-size: 16px; }
  .cards .card.lead .more .arr { width: 13px; height: 13px; }
}

/* ── One idea at several sizes ───────────────────────────────────────── */
/* Each picture keeps its own proportions (--r, width over height); growing in proportion to --r gives the row one height. */
.sizes { display: flex; align-items: flex-start; gap: var(--gap); }
.large + .sizes { margin-top: 36px; }
.sizes + .tlink { margin-top: 30px; }
.sizes figure { flex: var(--r) 1 0; min-width: 0; }
.sizes .frame { aspect-ratio: var(--r); overflow: hidden; background: var(--paper-2); }
.sizes img { width: 100%; height: 100%; object-fit: cover; }
.sizes figcaption { padding-top: 16px; }
.sizes figcaption strong { display: block; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.sizes figcaption span { display: block; max-width: 420px; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.sizes figcaption small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* ── "Your project, connected" band ──────────────────────────────────── */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 70px; padding: var(--section) var(--gutter); background: var(--dark); color: #fff; }
.band .eyebrow { color: #fff; }
.band h2 { font-size: clamp(34px, 3.611vw, 57.8px); line-height: 1.05; }   /* 52px */
.band p { color: var(--on-dark-2); }
.band-intro p:not(.eyebrow) { margin: 0 0 24px; max-width: 520px; }
.band .tlink { color: #fff; border-color: var(--lime); }
.band-list article { padding: 20px 0; border-bottom: 1px solid var(--dark-line); }
.band-list article:first-child { padding-top: 0; }
.band-list span { display: block; font-size: 11px; line-height: 27px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--lime); }
.band-list h3 { margin: 10px 0 5px; }
.band-list p { margin: 0; max-width: 440px; font-size: 16px; }

/* ── Closing band ────────────────────────────────────────────────────── */
.closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 60px var(--gutter); background: var(--paper-2); }
.closing .eyebrow { margin-bottom: 18px; }
.closing h2 { margin-bottom: 12px; }
.closing p:not(.eyebrow) { margin: 0; }
.closing .btn { flex: none; }

/* ── Concept notice ──────────────────────────────────────────────────── */
.notice { padding: 20.5px var(--gutter); background: var(--lime-soft); }
.notice p { margin: 0; max-width: none; font-size: 14.4px; line-height: 24px; color: #23261a; }
.notice strong { color: var(--ink); }

/* ── Lists ───────────────────────────────────────────────────────────── */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; border-top: 2px solid var(--ink); }
.checks li { padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.checks strong { display: block; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 4px; }
.checks span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.linklist { display: grid; justify-items: start; }
.linklist .btn { margin-top: 14px; }
.rowlinks { border-top: 2px solid var(--ink); }
.rowlinks a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rowlinks strong { font-size: 18px; letter-spacing: -.02em; }
.rowlinks span { font-size: 14px; color: var(--ink-3); }
.rowlinks .arr { width: 13px; height: 13px; }
.rowlinks a:hover strong { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.index-group { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 60px; padding: 46px 0; }
.index-group + .index-group { border-top: 1px solid var(--line); }
.index-group:first-child { padding-top: 0; }
.index-group:last-child { padding-bottom: 0; }
.index-group h2 { font-size: clamp(28px, 2.4vw, 38.4px); margin-bottom: 6px; }
.index-group .num { margin: 0; }

/* ── Questions ───────────────────────────────────────────────────────── */
.faqs { max-width: 1000px; border-top: 2px solid var(--ink); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 24px; align-items: center; padding: 22px 0; list-style: none; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { position: relative; width: 28px; height: 28px; background: var(--paper-2); transition: background .2s var(--ease); }
.faq .pm::before, .faq .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.faq .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .pm { background: var(--lime); }
.faq[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .a { padding: 0 52px 24px 0; max-width: 820px; }
.faq .a p { margin: 0; font-size: 17px; }

/* ── Illustrative panels ─────────────────────────────────────────────── */
.screen { padding: 32px; background: var(--paper-3); border: 1px solid #d5d9c9; }
.screen small { display: block; font-size: 9px; line-height: 27px; letter-spacing: 1px; text-transform: uppercase; color: #666666; }
.screen-title { margin: 25px 0; max-width: none; font-size: 24px; line-height: 1.18; letter-spacing: -.7px; font-weight: 700; color: var(--ink); }
.statusrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid #d4d8c9; font-size: 15px; color: var(--ink); }
.statusrow b { padding: 3px 8px; background: var(--lime-tag); font-size: 13px; }
/* A certificate record: the same panel, holding real details and saying where they came from. */
.reg { font-size: .5em; line-height: 0; vertical-align: .78em; letter-spacing: 0; }   /* the ® in FSC® */
.record dd .reg { font-size: .72em; vertical-align: .32em; }
.record dl { margin: 0; }
.record .statusrow { align-items: baseline; gap: 24px; }
.record dt { flex: none; color: var(--ink-2); white-space: nowrap; }
.record dd { margin: 0; font-weight: 700; text-align: right; }
.record-note { max-width: none; margin: 0; padding-top: 18px; border-top: 1px solid #d4d8c9; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ── Filters ─────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
/* A list's heading and its filters share a row when the screen has room for both. */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: 30px; }
.list-head h2, .list-head .filters { margin-bottom: 0; }
@media (min-width: 1040px) and (max-width: 1599px) { .list-head .filter { min-height: 40px; padding: 0 14px; font-size: 13px; } .list-head .filters { gap: 8px; } }
.filter { min-height: 44px; padding: 0 20px; background: var(--white); border: 1px solid #dddddd; font-size: 14px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.filter:hover { border-color: var(--ink); }
.filter.active { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ── Enquiry form ────────────────────────────────────────────────────── */
/* Start a project is one composition, not an opening band with a form under it: the words on the left, the form
   on the right, both starting at the top of the page and sharing one grid, so the form's first fields are on the
   first screen and nothing floats. In the page the order is the heading, the form, then the notes; on a wide
   screen the heading and the notes share the left column and the form takes the right. On a tablet and a
   phone they stack in that order, and the form's panel runs to the edges of a phone. */
.enquire { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'head form' 'side form'; column-gap: clamp(40px, 5.6vw, 89.6px); padding: clamp(30px, min(3.6vw, calc(6 * var(--vh))), 57.6px) var(--gutter) var(--section); }
.enq-head { grid-area: head; }
.enq-head h1 { font-size: clamp(40px, min(4.2vw, calc(8 * var(--vh))), 67.2px); text-wrap: balance; }   /* 60px */
.enq-head .hero-intro { margin: clamp(18px, 1.7vw, 27.2px) 0 0; max-width: 30em; font-size: 18px; }   /* one reading size on this page: 18px */
.enq-side { grid-area: side; margin-top: clamp(28px, 2.9vw, 46.4px); padding-top: clamp(26px, 2.6vw, 41.6px); border-top: 1px solid var(--line); }
.enq-side h2 { margin-bottom: 12px; font-size: clamp(26px, 2.15vw, 34.4px); letter-spacing: -.9px; }   /* 31px */
/* One reading size for the whole page: 18px for the intro, the side column and what people type; labels 16px bold; notes 14px. */
.enq-side > p { margin: 0; max-width: 30em; font-size: 18px; }
#enquiry { grid-area: form; align-self: start; padding: clamp(22px, 2.5vw, 40px); background: var(--paper); }
.aside { margin-top: 28px; padding: 24px 26px; background: var(--paper); }
.aside h3 { font-size: 20px; margin-bottom: 10px; }
.aside p { margin: 0; font-size: 18px; }
.aside p + p { margin-top: 10px; }
.direct { margin: 24px 0 0 !important; font-size: 18px !important; }
.direct a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* The form's type: heading 20px (as the side column's h3), labels 16px bold, what people type 17px, notes 14px. */
.context { margin: 0; max-width: none; padding: 2px 0 2px 14px; border-left: 3px solid var(--lime); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.field label { display: block; margin: 22px 0 8px; font-size: 16px; font-weight: 700; }
.field label span { margin-left: 8px; font-size: 14px; font-weight: 400; color: #616559; }
.field input, .field textarea { display: block; width: 100%; min-height: 50px; padding: 13px; background: var(--white); border: 1px solid var(--field); border-radius: 0; color: var(--ink); font-size: 18px; }
.field textarea { margin-bottom: 10px; resize: vertical; line-height: 1.5; }
.field input[type='file'] { padding: 11px 13px; font-size: 14px; }
.field input::placeholder, .field textarea::placeholder { color: #70756a; opacity: 1; }
.field input:focus, .field textarea:focus { outline: 3px solid #526000; outline-offset: 2px; border-color: var(--ink); }
.field .hint { margin: 8px 0 0; font-size: 14px; }
.field .err { display: none; margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--error); }
.field.invalid input, .field.invalid textarea { border: 2px solid var(--error); padding: 12px; }
.field.invalid .err { display: block; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.more-details { margin-top: 28px; padding: 18px 0; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
.more-details summary { min-height: 28px; font-size: 16px; }
.consent { margin: 14px 0 24px; font-size: 14px; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
#enquiry .btn { margin-top: 10px; }
.dev-note { font-size: 13px; color: var(--ink-3); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error-summary { display: none; margin-top: 20px; padding: 15px; border: 2px solid var(--error); color: #9d2727; font-size: 15px; }
.error-summary.show { display: block; }
.error-summary ul { margin: 8px 0 0 18px; list-style: disc; }
.error-summary a { text-decoration: underline; }

/* ── Information pages ───────────────────────────────────────────────── */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5.5vw, 88px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-stuck) + 24px); font-size: 14px; }
.toc h2 { margin-bottom: 14px; font-size: 12px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; }
.toc ol { border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--ink-2); }
.toc a:hover { color: var(--ink); border-left-color: var(--lime); }
.policy { max-width: 800px; }
.policy p { margin: 0; font-size: 17px; }
.policy p + p { margin-top: 14px; }
.policy .draft-note { margin-bottom: 30px; padding: 22px 26px; background: #f3f4ed; border-left: 3px solid var(--lime); font-size: 15px; color: var(--ink); }
.policy .policy-intro { font-size: 21px; line-height: 1.45; color: var(--ink); }
.policy section { margin-top: 42px; padding-top: 40px; border-top: 1px solid var(--line); }
.policy h2 { margin-bottom: 16px; font-size: clamp(25px, 2vw, 32px); letter-spacing: -.035em; scroll-margin-top: calc(var(--header-stuck) + 24px); }
.policy .bullets { margin: 14px 0; display: grid; gap: 10px; }
.policy .bullets li { position: relative; padding-left: 22px; font-size: 17px; color: var(--ink-2); }
.policy .bullets li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }
.policy .bullets + p { margin-top: 14px; }
.policy .btn { margin: 4px 0; }
.policy .policy-foot { margin-top: 48px; font-size: 14px; color: var(--ink-3); }
.table-wrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--card-line); }
.table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.table-wrap th, .table-wrap td { padding: 13px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: #f3f4ed; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.table-wrap tbody th { font-weight: 700; white-space: nowrap; }
.table-wrap td { color: var(--ink-2); }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { padding: 55px var(--gutter) 31px; background: var(--dark); color: #fff; }
.site-footer .cols { display: grid; grid-template-columns: 381fr 273fr 219fr 288fr; gap: 45px; }
.flogo { width: 180px; height: auto; margin-top: 4px; }   /* the supplied white-and-lime logo, at the brand's smallest size for it */
.f-brand p { margin: 30px 0 25px; font-size: 14.4px; line-height: 24px; color: #babfb1; }
/* The strapline, once on every page, as ordinary words in the logo's own white: the header is too small to carry it. */
.f-brand .f-strap { margin: 18px 0 0; font-size: 15px; line-height: 1.4; color: #fff; }
.f-brand .f-strap + p { margin-top: 14px; }
.site-footer h2 { margin: 5px 0 20px; font-size: 13px; line-height: 1.4; letter-spacing: .5px; color: var(--lime); }
.site-footer li a, .site-footer address, .f-find p, .f-find p a { font-size: 14.4px; line-height: 24px; color: #f3f4ee; }
.site-footer li { font-size: 14px; line-height: 21px; }
.site-footer li a { font-size: 14px; line-height: 21px; }
.site-footer ul { display: grid; gap: 11px; padding-top: 5px; }
.f-find p { margin: 18px 0 0; }
.f-find p + p { margin-top: 8px; }
.f-find p:last-child { margin-top: 16px; }
.site-footer li a:hover, .f-find p a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.f-find .f-map { display: inline-flex; align-items: center; gap: 5px; color: var(--lime); }
/* The contact details are set to the right on a wide screen, and to the left where the columns stack. */
@media (min-width: 900px) { .f-find { text-align: right; } }
.f-map .arr { width: 10px; height: 10px; }
.f-legal { margin-top: 50px; padding-top: 21px; border-top: 1px solid #454a3d; }
.f-legal p { margin: 0; max-width: none; font-size: 11px; line-height: 21.5px; text-align: center; color: var(--on-dark-3); }   /* the formal company details are centred */
.f-legal strong { color: #f3f4ee; }
.f-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 30px; margin-top: 26px; font-size: 12px; line-height: 1.5; color: var(--on-dark-3); }
.f-base nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.f-base a:hover, .f-base button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.f-base button { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }   /* Cookie settings: opens the notice */

/* ── Mockup pill and cookie choice ───────────────────────────────────── */
.mock-pill { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); opacity: .86; }
.mock-pill:hover { opacity: 1; }
.mock-pill i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
/* ── The blog: articles brought over from the current website ────────────
   Not in Revision 06. The front page is the card grid with the idea filters; an article is a narrow column of
   text under a wide picture, set like the legal pages but larger, with the site's own headings and links. */
.post-card .card-media { aspect-ratio: 16 / 9; }
.post-card h3 { font-size: 22px; line-height: 1.2; }
.post-card .card-body > p:not(.eyebrow) { font-size: 15px; }
.post-head { padding: clamp(20px, 2.1vw, 33.6px) var(--gutter) clamp(24px, 2.4vw, 38.4px); }
.post-head .eyebrow { margin-bottom: clamp(12px, 1.1vw, 17.6px); }
.post-head h1 { max-width: 20em; font-size: clamp(36px, min(4.3vw, calc(7.9 * var(--vh))), 68.8px); line-height: 1.04; letter-spacing: clamp(-3.2px, -.2vw, -1.2px); }   /* 62px */
.post-meta { margin: clamp(14px, 1.3vw, 20.8px) 0 0; max-width: none; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
/* 2:1, but never taller than two thirds of the screen. A height, not a ratio with a cap: a capped ratio makes the picture narrower. */
.post-hero { margin: 0 var(--gutter); height: min(calc((min(100vw, 1920px) - 2 * var(--gutter)) * .5), calc(66 * var(--vh)), 660px); overflow: hidden; background: var(--paper-2); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-body { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(34px, 4vw, 64px) var(--gutter) clamp(44px, 5vw, 80px); }
.post-body p { max-width: none; font-size: 18px; line-height: 1.62; }
.post-body > * + * { margin-top: 18px; }   /* the gap between one paragraph, list or picture and the next */
.post-body h2 { margin-top: clamp(38px, 3.4vw, 54.4px); font-size: clamp(26px, 2.2vw, 35.2px); line-height: 1.14; letter-spacing: -.035em; }
.post-body h3 { margin-top: 32px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.post-body h4 { margin-top: 26px; font-size: 18px; line-height: 1.3; }
.post-body a:not(.tlink) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.post-body a:not(.tlink):hover { text-decoration-color: var(--ink); }
.post-body ul, .post-body ol { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: n; }
.post-body li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.post-body ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }
.post-body ol li { counter-increment: n; padding-left: 30px; }
.post-body ol li::before { content: counter(n) '.'; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
.post-body blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--lime); }
.post-body blockquote p { font-size: 21px; line-height: 1.45; color: var(--ink); }
.post-fig { margin: clamp(26px, 2.6vw, 41.6px) 0; }
.post-fig img { width: 100%; height: auto; background: var(--paper-2); }
.post-fig figcaption { padding-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.post-cta { margin-top: 6px; }
.post-cta .tlink { margin-top: 0; }
.post-more { background: var(--paper); }
@media (max-width: 650px) {
  .post-head { padding: 14px var(--gutter) 24px; }
  .post-head h1 { font-size: 34px; letter-spacing: -1.4px; }
  .post-hero { margin: 0; height: min(75vw, calc(58 * var(--vh))); }
  .post-body p, .post-body li { font-size: 17px; }
}

/* The cookie banner (Accept, No thanks) and, behind "Cookie settings", three switches: visit counting,
   analytics and marketing. One box, two views; data-view says which is showing. */
.cookie { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; background: var(--white); border: 1px solid var(--card-line); box-shadow: 0 30px 60px -30px rgba(21, 21, 21, .5); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 14px; font-size: 14px; }
.cookie strong { color: var(--ink); }
.cookie a { text-decoration: underline; text-underline-offset: 2px; }
.cookie .c-title { margin-bottom: 12px; font-size: 16px; }
.cookie .c-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cookie .c-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lime-ink); cursor: pointer; }
.cookie .c-row b { display: block; font-size: 14px; line-height: 1.35; color: var(--ink); }
.cookie .c-row small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.cookie[data-view="ask"] .c-set, .cookie[data-view="set"] .c-ask { display: none; }
.cookie .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cookie .c-set .btns { padding-top: 14px; border-top: 1px solid var(--line); }
.cookie .c-link { margin-left: 6px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cookie .c-link:hover { color: var(--lime-ink); }
.cookie .c-foot { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.cookie .btn { min-height: 46px; padding: 0 16px; font-size: 14px; }
.cookie .btn.plain { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.cookie .btn.plain:hover { background: var(--paper); }

/* ── Our work: the grid and the case study pages ──────────────────────────
   Case study page visuals, 3 October 2026: client name, one large colour photograph (5:3), the confirmed
   facts, three short sections beside a line illustration, and a dark enquiry panel. Grid thumbnails are 4:3.
   The lime full stop after the name and the section headings is the concepts' own. */
.card.work .card-media { aspect-ratio: 4 / 3; }
/* A pencil drawing as the thumbnail: the whole drawing, never cropped, on the same paper colour as its own
   background, with a rule where the paper meets the card. It is not blown up past the size it was drawn at
   by more than a little, so the lines stay lines. */
.card.work.drawn .card-media { display: grid; place-items: center; background: #fdfbf4; border-bottom: 1px solid var(--line); }
.card.work.drawn .card-media img { object-fit: contain; }
.cards.work.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) {
  .cards.work.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards.work.c4 .card:not(.lead) h3 { font-size: 23px; }
  .cards.work.c4 .card:not(.lead) .card-body > p:not(.eyebrow) { font-size: 15px; }
}
@media (max-width: 1199px) { .cards.work.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 651px) and (max-width: 899px) { .cards.work .card.lead { grid-column: 1 / -1; } }   /* lead over a 2 × 2 */
@media (min-width: 900px) { .cards.work .card.lead .card-media { aspect-ratio: 4 / 3; flex-basis: 56%; } }
.work-ideas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: clamp(26px, 2.8vw, 44.8px) 0 0; max-width: none; font-size: 18px; }
.work-ideas .tlink { margin-top: 0; }

.dot { color: var(--lime); }
.case-head { padding: clamp(20px, 2.1vw, 33.6px) var(--gutter) clamp(24px, 2.4vw, 38.4px); }
.back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: clamp(8px, 1.1vw, 17.6px); font-size: 15px; line-height: 1.3; font-weight: 700; }
.back .arr { width: 12px; height: 12px; transform: rotate(-135deg); }
.back:hover .arr { transform: rotate(-135deg) translate(2px, -2px); }
.back:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.case-head h1 { font-size: clamp(50px, min(7.64vw, calc(14 * var(--vh))), 122.2px); line-height: .98; letter-spacing: clamp(-6.6px, -.41vw, -2.6px); }   /* 110px */
.case-title { margin: clamp(10px, 1.1vw, 17.6px) 0 0; max-width: 27em; font-size: clamp(24px, 2.78vw, 44.5px); line-height: 1.12; letter-spacing: clamp(-1.3px, -.083vw, -.6px); color: var(--ink); }   /* 40px */
.case-credit { margin: clamp(8px, .8vw, 12.8px) 0 0; max-width: none; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.4; }   /* 21.6px */
/* 5:3 as the concepts draw it, but never taller than three quarters of the screen (a height, for the same reason as the article's picture). */
.case-hero { margin: 0 var(--gutter); height: min(calc((min(100vw, 1920px) - 2 * var(--gutter)) * .6), calc(74 * var(--vh)), 800px); overflow: hidden; background: var(--paper-2); }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(12px, 1.25vw, 20px) var(--gutter) 0; padding: clamp(16px, 1.6vw, 25.6px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.case-facts > div { padding: 2px clamp(16px, 2.2vw, 35.2px); border-left: 1px solid var(--rule); }
.case-facts > div:first-child { padding-left: 0; border-left: 0; }
.case-facts dt { margin-bottom: 6px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.case-facts dd { margin: 0; font-size: clamp(18px, 1.67vw, 26.7px); line-height: 1.2; letter-spacing: -.3px; color: var(--ink); }   /* 24px */
.case-story { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 59fr); margin: 0 var(--gutter); padding: clamp(20px, 1.9vw, 30.4px) 0 var(--section); }
.case-text { padding: 0 clamp(20px, 2.5vw, 40px) 0 0; border-right: 1px solid var(--rule); }
.case-text section + section { margin-top: clamp(24px, 2.6vw, 41.6px); }
.case-text h2 { margin: 0 0 8px; font-size: clamp(26px, 2.36vw, 37.8px); line-height: 1.1; letter-spacing: clamp(-1.1px, -.07vw, -.6px); }   /* 34px */
.case-text p { margin: 0; max-width: 23em; font-size: clamp(16px, 1.32vw, 21.1px); line-height: 1.4; }   /* 19px */
.case-line { align-self: start; margin-left: clamp(16px, 1.7vw, 27.2px); }
.line-frame { border: 1px solid var(--rule); background: #fdfbf4; }
.line-frame img { width: 100%; height: auto; }
.case-line figcaption { padding-top: 8px; font-size: 12px; line-height: 1.4; text-align: right; color: var(--ink-3); }
.case-hero.empty, .line-frame.empty { display: grid; place-items: center; padding: 20px; background: #e9e9e5; border: 0; color: var(--ink-3); font-size: clamp(16px, 1.6vw, 25.6px); text-align: center; }
.line-frame.empty { aspect-ratio: 1.7; }
.case-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 0 var(--gutter) var(--section); padding: clamp(26px, 2.5vw, 40px) clamp(24px, 3vw, 48px); background: var(--dark); }
.case-cta h2 { margin: 0 0 8px; color: #fff; }
.case-cta p { margin: 0; max-width: none; font-size: clamp(17px, 1.5vw, 24px); color: var(--on-dark-2); }
.case-cta .btn { flex: none; }
.case-cta :focus-visible { outline-color: var(--lime); }
.case-note { margin: calc(var(--section) * -.5) var(--gutter) var(--section); padding: 14px 18px; border: 1px dashed #b9bdaa; background: var(--paper-3); }
.case-note p { margin: 0; max-width: none; font-size: 13px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }   /* a file name in a note must not widen a phone page */
.case-note strong { color: var(--ink); }
@media (max-width: 899px) {
  .case-story { grid-template-columns: minmax(0, 1fr); }
  .case-text { padding: 0; border-right: 0; }
  .case-line { margin: 32px 0 0; }
}
@media (max-width: 650px) {
  .cards.work.c4, .cards.work.c2 { grid-template-columns: minmax(0, 1fr); }
  .work-ideas { font-size: 16px; }
  .case-head { padding: 14px var(--gutter) 26px; }
  .case-head h1 { letter-spacing: -2.4px; }
  .case-hero { margin: 0; height: min(75vw, calc(58 * var(--vh))); }
  .case-facts { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding: 0; border-top: 0; }
  .case-facts > div, .case-facts > div:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .case-facts > div:first-child { border-top: 0; }
  .case-story { padding-top: 26px; }
  .case-cta { display: block; padding: 28px 22px; }
  .case-cta h2 { font-size: 30px; }
  .case-cta .btn { margin-top: 22px; }
}

/* ── Reveal ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .hero, .hero.inset { display: flex; flex-direction: column; min-height: 0; }
  .hero-text { align-self: stretch; padding: 48px var(--gutter) 44px; }
  .hero-media, .hero.inset .hero-media { margin: 0; min-height: 0; aspect-ratio: 16 / 10; }
  .cards, .numbered, .numbered.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twocol, .legal-layout, .index-group { grid-template-columns: minmax(0, 1fr); }
  .twocol { gap: 30px; }
  /* Start a project, stacked: the heading, the form, then the notes (the form before the notes, as in the Revision 06 mobile visual). */
  .enquire { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'head' 'form' 'side'; row-gap: 32px; }
  .enq-side { margin-top: 0; padding-top: 0; border-top: 0; }
  .useful .btn { margin-top: 0; }
  .band { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .toc { display: none; }
  .site-footer .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f-brand { grid-column: 1 / -1; }
  .index-group { gap: 20px; }
  .figb .frame { height: auto; }
  .figb img { height: auto; }
  .hero-media.wide, .hero.inset .hero-media.wide { aspect-ratio: 16 / 9; }
  .sizes.n3 { flex-wrap: wrap; }
  .sizes.n3 figure:first-child { flex-basis: 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  .facts li { padding: 16px 0 18px; }
  .facts li:last-child { border-bottom: 2px solid var(--ink); }
}
@media (max-width: 650px) {
  body { font-size: 16px; }
  h1, .hero.inset h1, .hero-plain h1 { font-size: 43px; letter-spacing: -2px; }
  .hero-plain .wrap { max-width: none; }
  h2, .band h2 { font-size: 34px; letter-spacing: -1.2px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.4px; margin-bottom: 20px; }
  .section { padding: 40px 0; }
  .hero-text, .hh-card { padding: 40px var(--gutter); }
  .hero-intro { font-size: 18px; line-height: 1.5; margin: 22px 0; }
  .hh-card h1 { font-size: 45px; }
  .hh-card .eyebrow { letter-spacing: 1px; }
  .hh-card .hero-intro { font-size: 19px; line-height: 27.5px; }
  /* The header pictures on a phone: the picture, then the bar across the full width underneath it. */
  .hh-media { height: auto; min-height: 0; overflow: visible; background: none; }
  .hh-slides { position: relative; height: min(58vw, calc(36 * var(--vh))); min-height: 200px; overflow: hidden; background: var(--dark); }
  .hh-bar { --ctl: 40px; position: static; max-width: none; background: var(--ink); }
  .hh-name { flex: 1; padding-inline: var(--gutter) 12px; }
  .overview, .duo { grid-template-columns: minmax(0, 1fr); }
  .overview { gap: 30px; }
  .duo { gap: 34px; }
  .lead-in h2 { margin-bottom: 0; }
  .hero-media, .hero.inset .hero-media { aspect-ratio: auto; height: 310px; }
  .hero-media.wide, .hero.inset .hero-media.wide { aspect-ratio: 16 / 9; height: auto; }
  .hero-plain { padding: 30px 0; }
  /* A list page on a phone: the header's button is always in view, so the opening's own is left out, and the
     filters are one row to swipe along, not three rows to scroll past. The first card then starts on the first screen. */
  .hero-plain.list .hero-actions { display: none; }
  .hero-plain.list .hero-intro { margin-bottom: 0; }
  .hero-plain.list + .section { padding-top: 30px; }
  .list-head { display: block; margin-bottom: 20px; }
  .list-head h2 { margin-bottom: 16px; }
  .list-head .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .list-head .filters::-webkit-scrollbar { display: none; }
  .list-head .filter { flex: none; }
  .chip.right { right: 12px; bottom: 10px; }
  .large { font-size: 23px; }
  .cards, .cards.two, .numbered, .numbered.c4, .checks, .formgrid, .benefits { grid-template-columns: minmax(0, 1fr); }
  .cards, .twocol, .numbered { gap: 22px; }
  .sizes, .sizes.n3 { flex-direction: column; flex-wrap: nowrap; gap: 26px; }
  .sizes figure, .sizes.n3 figure:first-child { flex: none; width: 100%; }
  .large + .sizes { margin-top: 28px; }
  .enquire { padding: 28px var(--gutter) 40px; row-gap: 26px; }
  .enq-head h1 { font-size: 43px; letter-spacing: -2px; }
  #enquiry { margin-inline: calc(-1 * var(--gutter)); padding: 26px var(--gutter) 30px; }
  .benefits { gap: 22px; padding: 28px var(--gutter); }
  .card-body, .tcard { padding: 22px; }
  .numbered > div { padding: 20px 0 0; }
  .num { margin-bottom: 12px; }
  .numbered h3 { font-size: 26px; }
  .numbered.c4 h3, .numbered.nonum h3 { font-size: 22px; }
  .band { padding: 40px var(--gutter); gap: 30px; }
  .band-list article { padding: 18px 0; }
  .band-intro p:not(.eyebrow) { font-size: 17px; }
  .closing { display: block; padding: 40px var(--gutter); }
  .closing h2 { font-size: 33px; }
  .closing .btn { margin-top: 24px; }
  .screen { padding: 22px; }
  .filters { gap: 8px; }
  .filter { padding: 0 13px; }
  .aside { margin-top: 22px; padding: 22px; }
  .field label { margin-top: 20px; }
  .field input, .field textarea { font-size: 16px; }
  .faq summary { font-size: 19px; gap: 16px; }
  .faq .a { padding-right: 0; }
  .site-footer { padding: 36px var(--gutter) 31px; }
  .site-footer .cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .f-brand p { margin: 25px 0 23px; }
  .f-brand { margin-bottom: -6px; }
  .site-footer h2 { margin-bottom: 14px; }
  .site-footer ul { padding-top: 3px; }
  .f-legal { margin-top: 38px; padding-top: 18px; }
  .f-legal p { font-size: 12px; }
  .f-base { margin-top: 20px; gap: 17px 30px; }
  .rowlinks a { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 16px; }
  .rowlinks span { grid-column: 1; }
  .rowlinks .arr { grid-row: 1 / span 2; grid-column: 2; }
  .mock-pill span { display: none; }
  .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 24px); padding: 16px; }
  .cookie .c-title { margin-bottom: 8px; }
  .cookie .c-row { padding: 9px 0; }
  .cookie .c-set .btns { padding-top: 12px; }
  .cookie .c-foot { margin-top: 10px; }
  .btn { max-width: 100%; }
  .policy .policy-intro { font-size: 19px; }
  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { display: block; padding: 14px; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap tbody th, .table-wrap td { display: block; padding: 0; border: 0; white-space: normal; }
  .table-wrap td { margin-top: 8px; }
  .table-wrap td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .record .statusrow { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0; }   /* codes stay on one line */
  .record dd { text-align: left; }
  /* The smallest phones. The logo, moved in to stand over the strapline, must still clear the button, so it is
     smaller here; and it and the button go up a pixel more, so that the strapline running on under the button
     keeps its distance from it. */
  :root { --logo-open: 92px; --logo-stuck: 92px; --lift: 7px; }
  .bar, .tools { gap: 8px; }
  .header-cta, .site-header.scrolled .header-cta { padding: 0 9px; font-size: 12px; }
  .menu-btn { gap: 5px; font-size: 13px; }
  h1, .hero.inset h1, .hero-plain h1, .enq-head h1 { font-size: 38px; }
  .hh-card h1 { font-size: 40px; }
}
@media print {
  .site-header, .mock-pill, .cookie { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}