/* ==========================================================================
   GreenCabinWales — site stylesheet
   One file for every page. No webfonts, no third-party requests.
   ========================================================================== */

:root {
  --ground:       #071C13;
  --ink:          #F2FBF6;
  --ink-muted:    rgba(233, 247, 239, .74);
  --ink-faint:    rgba(233, 247, 239, .54);
  --accent:       #3CE35F;
  --accent-line:  rgba(60, 227, 95, .38);
  --hairline:     rgba(242, 251, 246, .14);
  --hairline-2:   rgba(242, 251, 246, .08);

  --shell:        1180px;
  --gut:          clamp(20px, 5vw, 56px);
  --section-y:    clamp(72px, 9vw, 128px);
  --header-h:     72px;
  /* Home: the legal bar is fixed to the bottom of the screen, so header + film
     + bar make exactly one screen. Both values are used in the hero's height. */
  --legal-h:      45px;
  --hero-h:       calc(100svh - var(--header-h) - 1px - var(--legal-h));

  /* Client wall block height, shared by the hero so hero + wall fill the first screen. */
  --wall-cell-h:  clamp(54px, 7.2vw, 88px);
  --wall-pad:     clamp(28px, 5vw, 60px);

  --step-0: clamp(15px, 1.5vw, 17px);
  --step-2: clamp(24px, 2.8vw, 32px);

  --font: "Century Gothic", CenturyGothic, "ITC Avant Garde Gothic", "URW Gothic",
          Futura, "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--gut); top: -80px; z-index: 100;
  padding: 12px 18px; background: var(--accent); color: var(--ground);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gut));
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- Page background: Euan's animated GreenCabin background ----------
   Fixed behind every page and separate from the content (Euan's rule 6).
   The still paints first from CSS; the loop fades in once it is playing.
   The scrim keeps text contrast; the baked-in logo band is cropped at encode. */
.backdrop {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none;
  background: var(--ground) url("../video/backdrop-poster.jpg") center / cover no-repeat;
  will-change: transform;          /* own layer: scrolling never repaints it */
}
.backdrop__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.backdrop__video.is-playing { opacity: 1; }
.backdrop__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 28, 19, .55) 0,
      rgba(7, 28, 19, .20) 22%,
      rgba(7, 28, 19, .20) 78%,
      rgba(7, 28, 19, .70) 100%),
    rgba(7, 28, 19, .45);
}
@media (prefers-reduced-motion: reduce) {
  .backdrop__video { display: none; }
}
main, .legal { position: relative; z-index: 1; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline-2);
}
.site-header__inner {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gut));
  margin-inline: auto;
  padding-inline: var(--gut);
  min-height: var(--header-h);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px;
}
/* Slogan on the right of the header bar. Hidden on narrow phones, where the
   wordmark and the slogan cannot share a row without the header going to two. */
/* Same size and weight as the wordmark next to it (Euan, 23 Sep 2026) — these
   three values are deliberately copied from .brand__name; keep them in step. */
.site-slogan {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1;
  color: var(--ink); white-space: nowrap;
}
.site-slogan strong { position: relative; font-weight: inherit; }
/* The green rule sits under "no-nonsense" only. In em so it keeps the
   proportions from Euan's reference as the clamp changes the size. */
.site-slogan strong::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.32em;
  height: .13em; background: var(--accent);
}
/* At wordmark size the slogan is 290px wide, so with the 212px wordmark, the
   24px flex gap and the side gutters it needs ~600px of header. Measured: it
   sits on one row at 600 with 37px to spare and wraps at 585. Below 600 the
   slogan steps out rather than wrapping the bar to two rows. */
@media (max-width: 599px) { .site-slogan { display: none; } }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 44px; text-decoration: none; color: var(--ink);
}
.brand__mark { width: auto; height: clamp(28px, 3.2vw, 34px); }
.brand__name {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}
.brand__name-alt { color: var(--accent); }

/* Smallest phones (320-360px): keep wordmark and menu button on one row. */
@media (max-width: 360px) {
  .site-header__inner { column-gap: 10px; }
  .brand { gap: 8px; }
  .brand__mark { height: 25px; }
  .brand__name { font-size: 16px; }
}

/* ---------- Services inside a practice ---------- */
.service { padding-block: clamp(30px, 3.8vw, 46px); border-top: 1px solid var(--hairline); }
.service:first-child { padding-top: 0; border-top: 0; }

/* ---------- Awards (previous site's format, sized for a half column) ---------- */

/* ---------- Website pricing (stacked in the right half) ---------- */
.tiers {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(24px, 3vw, 32px);
}

/* ==========================================================================
   LOCKED — BOTH DESIGNS. Euan locked the desktop and the mobile layouts on
   29 Sep 2026 after a full audit. Desktop: headline + awards dead centre,
   landscape ring bottom left, contact panel bottom right, thin fixed legal
   bar, one screen. Mobile (<=599px): awards hidden, headline in three lines,
   ring centred between headline and contact box, box at the bottom, one
   screen. Do not re-lay-out, re-align or "tidy" either without Euan asking.
   Byte-for-byte copies, every measurement and the launch blockers are in
   _source/locked-2026-09-29/. Copy and colour edits are fine.
   NOTE the phone rules at the END of this file are load-bearing and must stay
   last — placed higher up, the base rules silently override them.
   ========================================================================== */

/* ==========================================================================
   Home: hero — Gower drone flyover, no overlay, no text (for now)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  /* The film fills the whole first screen under the header; the client wall sits
     on top of it, at exactly the height it used to sit below it.
     +1px: the header's bottom border sits outside its 72px height. */
  height: calc(100vh - var(--header-h) - 1px - var(--legal-h));
  height: var(--hero-h);
  min-height: 300px;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Headline over the film, sitting just above the client wall. The film is shaded
   from halfway down so the words always read, whatever the footage is doing;
   the shading runs into the band behind the logos. */
.hero__inner {
  /* Dead centre of the film, both axes (Euan, 29 Sep 2026). */
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding-inline: var(--gut);
  max-width: min(680px, 92vw);   /* room for the longest award line */
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero__title {
  max-width: 16ch;
  font-size: clamp(30px, 5vw, 62px);
  font-weight: 700; line-height: 1.04; letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(3, 14, 9, .9), 0 2px 10px rgba(3, 14, 9, .75), 0 8px 34px rgba(3, 14, 9, .5);
}
/* Awards under the headline — one line each, centred, exactly as Euan's
   screenshot (29 Sep 2026): organisation in muted ink, an em dash, the title in
   bold white, the year in brand green. Gold and bronze are the pale tones
   sampled from his image, not the heavier --gold/--bronze. */
.laurels {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(9px, 1.1vw, 16px);
  margin-top: clamp(34px, 4.6vw, 72px);   /* dropped lower, Euan 29 Sep 2026 */
}
.laurels li {
  /* nowrap on the flex line as well as the text: with everything bold, the
     longest row (Fintech Global) was breaking its year onto a second line. */
  display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center;
  gap: 0 .42em;
  font-size: clamp(12px, 1.02vw, 15px); line-height: 1.25;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(3, 14, 9, .9), 0 2px 10px rgba(3, 14, 9, .75), 0 8px 34px rgba(3, 14, 9, .5);
}
.laurels__org  { color: var(--ink); font-weight: 700; }   /* white AND bold, matching the title across the dash (Euan, 29 Sep 2026) */
.laurels__dash { color: rgba(242, 251, 246, .42); }
.laurels__what { font-weight: 700; color: var(--ink); }
.laurels__year { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.laurels__tier { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.laurels__tier--gold   { color: rgb(232, 208, 136); }
.laurels__tier--bronze { color: rgb(200, 160, 120); }

/* Sub-headline under the H1, in the logo green (Euan, 28 Sep 2026). */
.hero__sub {
  margin-top: clamp(10px, 1.4vw, 18px);
  max-width: 22ch;
  font-size: var(--step-2);
  font-weight: 700; line-height: 1.12; letter-spacing: -.015em;
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(3, 14, 9, .9), 0 2px 10px rgba(3, 14, 9, .75), 0 8px 34px rgba(3, 14, 9, .5);
}

/* A sharper copy buffers out of sight, then fades in at the loop point. */
.hero__video--next { opacity: 0; transition: opacity .5s ease; }
.hero__video--next.is-front { opacity: 1; }

/* ==========================================================================
   Home: client wall — merry-go-round (LOCKED: copied verbatim from the
   previous site, which Euan approved and tested on his iPhone)
   --------------------------------------------------------------------------
   - Rotation is one CSS transform on the ring, on the compositor. No JS.
   - Images are eager with explicit width/height. `loading="lazy"` here was
     the original stutter bug. Do not reintroduce it.
   - Each cell is double-sided so the logo never reads mirrored at the back.
   - Depth is an opacity-only animation on the FACES. Never add `filter` to a
     cell or face: it defeats backface culling and mirrors the rear logos.
   ========================================================================== */
.clients { position: relative; padding-bottom: var(--section-y); }

/* Home: the ring is lifted out of the flow and laid over the film — a strip at
   the bottom of the first screen on phones, a vertical ring at the far right of
   it from 861px up. `main` is the positioning context and the hero is its first
   child, so `top` is measured from the top of the film. */
.page-home .clients {
  position: absolute; z-index: 2;
  left: 0; right: 0;
  top: calc(var(--hero-h) - var(--wall-cell-h) - var(--wall-pad));
  padding-bottom: 0;
}

.carousel {
  --count: 11;
  --theta: calc(360deg / var(--count));
  --ring-r: clamp(210px, 32vw, 430px);
  --cell-w: calc(var(--ring-r) * 0.587);
  --cell-h: var(--wall-cell-h);
  --spin: 52s;

  position: relative;
  contain: layout;
}
.carousel__stage {
  width: 100%;
  height: calc(var(--cell-h) + var(--wall-pad));
  perspective: 1150px;
  perspective-origin: 50% 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.carousel__ring {
  position: relative;
  width: var(--cell-w);
  height: var(--cell-h);
  transform-style: preserve-3d;
  will-change: transform;
  animation: carousel-turn var(--spin) linear infinite;
}
@keyframes carousel-turn {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}
.carousel__cell {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * var(--theta))) translateZ(var(--ring-r));
}
@keyframes carousel-depth {
  0%   { opacity: 1;   }
  16%  { opacity: .62; }
  32%  { opacity: .27; }
  44%  { opacity: .12; }
  50%  { opacity: .09; }
  56%  { opacity: .12; }
  68%  { opacity: .27; }
  84%  { opacity: .62; }
  100% { opacity: 1;   }
}
.carousel__face {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: calc(var(--cell-w) * 0.84);
  max-height: calc(var(--cell-h) * 0.6);
  width: auto; height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: carousel-depth var(--spin) linear infinite;
  animation-delay: calc(var(--spin) * (var(--i) - var(--count)) / var(--count));
}
.carousel__face--back { transform: rotateY(180deg); }

/* Weak connections (Euan's rule 7): hold the carousel still and invisible until
   every logo has downloaded and decoded (inline script after the carousel adds
   .is-ready, at most 4s), then fade in and turn. Ring and faces are paused
   together so the depth fade stays in step with the spin.
   The fade sits on the STAGE, never the ring or a cell: opacity on a
   preserve-3d element flattens the 3D and mirrors the rear logos.
   Without JavaScript there is no .js class, so the carousel runs as before. */
.carousel__stage { transition: opacity .6s ease; }
.js .carousel:not(.is-ready) .carousel__stage { opacity: 0; }
.js .carousel:not(.is-ready) .carousel__ring,
.js .carousel:not(.is-ready) .carousel__face { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .carousel__stage {
    perspective: none;
    height: auto;
    overflow: visible;
    -webkit-mask-image: none; mask-image: none;
    padding-inline: var(--gut);
  }
  .carousel__ring {
    width: 100%; height: auto;
    transform-style: flat;
    animation: none;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: clamp(22px, 4vw, 54px);
  }
  .carousel__cell {
    position: static;
    inset: auto;
    transform: none;
    transform-style: flat;
    animation: none;
    opacity: .9;
    display: flex; align-items: center;
  }
  .carousel__face {
    position: static;
    max-width: 150px; max-height: 34px;
    backface-visibility: visible;
    animation: none;
    opacity: 1;
    filter: none;
  }
  .carousel__face--back { display: none; }
}

/* ==========================================================================
   Privacy Policy (headings, email, phone and back link in the header green)
   ========================================================================== */
.policy {
  max-width: calc(780px + 2 * var(--gut));
  padding-block: clamp(56px, 9vw, 120px) var(--section-y);
}
.policy__title {
  font-size: clamp(34px, 5.4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em;
  color: var(--accent);
}
.policy__updated { margin-top: 14px; font-size: 15px; color: var(--ink-faint); }
.policy__section {
  margin-top: clamp(34px, 4.4vw, 52px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--hairline-2);
}
.policy__section h2 {
  font-size: clamp(21px, 2.3vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: var(--accent);
}
.policy__section p {
  margin-top: 14px; max-width: 65ch;
  line-height: 1.72; color: rgba(242, 251, 246, .86); text-wrap: pretty;
}
.policy__green {
  color: var(--accent); font-weight: 700; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.policy__green:hover { text-decoration-color: var(--accent); }
.policy__plain {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px;
}
.policy__plain:hover { text-decoration-color: var(--ink); }
.policy__back {
  margin-top: clamp(44px, 5vw, 64px); padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
}
.policy__back .policy__green { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* ==========================================================================
   Contact (approved structure)
   ========================================================================== */
.contact {
  padding-block: var(--section-y);
  border-top: 1px solid var(--hairline-2);
  scroll-margin-top: var(--header-h);
}
.contact__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 3vw, 32px); text-align: center;
}
.contact__head {
  font-size: clamp(26px, 3.6vw, 42px); font-weight: 700; line-height: 1.16; letter-spacing: -.02em;
  text-wrap: balance;
}
.contact__head-line { display: block; }
.contact__actions {
  /* align-items: one pill has a label above it and one does not, so line the
     pills themselves up rather than the tops of their columns. */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: clamp(14px, 2vw, 22px); width: 100%;
}
.contact__item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Plain white, no box (Euan, 29 Sep 2026: "No bright green box for email or
   phone, keep all content inside contact box in white"). Applied at every
   width, not just in the panel, so the rule holds on phones too. */
.contact__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 4px;
  font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; text-decoration: none;
  color: var(--ink); background: none; border: 0;
  transition: color .2s ease;
}
.contact__link:hover { color: var(--accent); }
@media (max-width: 640px) {
  .contact__actions { flex-direction: column; align-items: stretch; }
  .contact__item { align-items: stretch; }
  .contact__link { padding-inline: 16px; }
}

.socials { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 34px); }
.social {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding-inline: 4px;
  font-size: 15px; color: var(--ink-muted); text-decoration: none;
  transition: color .2s ease;
}
.social:hover { color: var(--ink); }
.social svg { flex: none; }

/* ==========================================================================
   Legal footer (approved structure)
   ========================================================================== */
.legal {
  padding-block: clamp(28px, 4vw, 44px);
  padding-bottom: calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-2);
  background: rgba(4, 18, 12, .88);
}
.legal__inner { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.legal__registered, .legal__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  font-size: clamp(12px, 1.3vw, 14px);
}
.legal__registered { color: var(--ink-muted); }
.legal__sep { opacity: .38; }
.legal__meta a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--accent-line);
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.legal__meta a:hover { text-decoration-color: var(--accent); }

/* Home: the bar is pinned to the bottom of the screen and cut to one thin row —
   solid like the header, not a wash laid over the film. */
.page-home .legal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding-block: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ground);
}
.page-home .legal__inner {
  flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
  min-height: calc(var(--legal-h) - 1px);
  gap: 0 14px;
}
.page-home .legal__registered,
.page-home .legal__meta { font-size: clamp(11px, 1.1vw, 13px); }
.page-home .legal__meta a { min-height: calc(var(--legal-h) - 1px); }
/* Phones: the line cannot hold one row, so the bar is two and the hero height
   token is told the truth about it. Measured, not guessed. */
@media (max-width: 599px) {
  /* Measured with the registered office in the line: two rows at this width. */
  :root { --legal-h: 78px; }
  .page-home .legal__inner { gap: 0 10px; }
  .page-home .legal__meta a { min-height: 34px; }
}
/* Narrow phones (360px Androids included): the same line needs three rows.
   Measured: three rows at 360 and 374, two at 375. */
@media (max-width: 374px) {
  :root { --legal-h: 96px; }
}
/* Nothing hides behind the fixed bar (only matters while contact is in flow).
   No hairline above it either (Euan, 28 Sep 2026: no line, no box around the
   contact details) — over the film it read as a white rule across the block. */
.page-home .contact {
  padding-bottom: calc(var(--section-y) + var(--legal-h));
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Wide screens: three columns on the one screen — contact at the far left
   where the headline used to sit, the headline dead centre, the ring at the
   far right (Euan, 28 Sep 2026). From 1400px: once contact became a padded
   panel (29 Sep) it needs more room, and measurement says 1400 is where the
   panel, the centred headline and the ring stop touching. Below that, contact
   returns to a normal section under the film.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .page-home .contact {
    position: absolute; z-index: 2;
    /* Far bottom right, under the ring (Euan, 29 Sep 2026). */
    left: auto; right: var(--gut);
    top: auto; bottom: clamp(18px, 2.2vw, 30px);
    transform: none;
    width: min(300px, 23vw);
    padding: 0;
    /* Euan's reference panel, sampled from his image: a vertical green gradient
       lighter at the top, flat across, with the film grain his version has
       (measured at ~3 levels of noise) drawn as an inline SVG — no download. */
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
      radial-gradient(130% 80% at 50% -12%,
        rgba(74, 150, 104, .55) 0%,
        rgba(74, 150, 104, .16) 42%,
        rgba(74, 150, 104, 0)   72%),
      linear-gradient(180deg,
        rgb(44, 100, 70)  0%,
        rgb(35, 83, 58)   14%,
        rgb(29, 69, 49)   32%,
        rgb(24, 57, 41)   52%,
        rgb(19, 45, 33)   72%,
        rgb(15, 34, 26)   88%,
        rgb(11, 25, 20)   100%);
    border-radius: clamp(14px, 1.3vw, 20px);
    /* Lifted off the film: a long soft shadow, a tighter one under it, and a
       hairline of light along the top edge so it reads as a card. */
    box-shadow:
      inset 0 1px 0 rgba(242, 251, 246, .12),
      0 30px 70px rgba(3, 14, 9, .62),
      0 8px 20px rgba(3, 14, 9, .45);
  }
  /* Centred on itself, the same way the headline is (Euan, 28 Sep 2026) — the
     three heading lines stack on one axis rather than ranging left. */
  .page-home .contact__inner {
    align-items: center; text-align: center;
    padding: clamp(18px, 1.5vw, 24px);
    gap: clamp(9px, .9vw, 13px);
  }
  /* Over the film, so the words carry the same shadow as the headline. */
  .page-home .contact__head {
    font-size: clamp(16px, 1.4vw, 20px);
    text-shadow: 0 1px 2px rgba(3, 14, 9, .9), 0 2px 10px rgba(3, 14, 9, .75), 0 8px 34px rgba(3, 14, 9, .5);
  }
  .page-home .socials .social {
    color: var(--ink);
    text-shadow: 0 1px 2px rgba(3, 14, 9, .9), 0 2px 10px rgba(3, 14, 9, .7);
  }
  /* No green boxes here (Euan, 29 Sep 2026): everything inside the panel is
     plain white text. */
  .page-home .contact__link {
    background: none; border: 0; box-shadow: none;
    color: var(--ink);
  }
  .page-home .contact__link:hover { background: none; color: var(--accent); }
  .page-home .contact__actions {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 10px;
  }
  .page-home .contact__item { align-items: stretch; }
  /* Sized so the email fits inside the column: a pill wider than the column
     pushes its own centre off the axis the heading lines sit on. */
  .page-home .contact__link {
    min-height: 34px; padding: 4px 2px;
    font-size: clamp(12px, .92vw, 14px);
    font-weight: 700;
  }
  .page-home .socials { justify-content: center; gap: clamp(12px, 1.2vw, 18px); }

  .page-home .socials .social { min-height: 30px; font-size: 13px; }

  /* Landscape again (Euan, 29 Sep 2026), as a strip along the BOTTOM LEFT.
     Narrower ring than the full-width version so it fits the half-width strip
     without the front logo growing past it. */
  .page-home .clients {
    left: 0; right: auto; top: auto;
    bottom: clamp(18px, 2.2vw, 30px);
    width: min(700px, 50vw);
    height: auto;
    padding-left: var(--gut); padding-right: 0;
  }
  /* Bigger logos (Euan, 29 Sep 2026): a wider ring makes the cells wider and a
     taller cell makes the faces taller. The stage's own padding comes down to
     match, so the strip stays the same height and keeps clear of the awards. */
  .page-home .carousel {
    --ring-r: clamp(200px, 22vw, 330px);
    --cell-h: clamp(64px, 8vw, 104px);
  }
  .page-home .carousel__stage { height: calc(var(--cell-h) + clamp(24px, 3vw, 44px)); }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Phones and small tablets — DESKTOP IS UNTOUCHED; everything here is scoped.
   Euan, 29 Sep 2026: "way too crowded on the mobile ... shrink the text size so
   you can fit everything without cluttering". Deliberately at the END of the
   sheet: the first attempt sat above the base rules and was overridden by them.
   ========================================================================== */
@media (max-width: 899px) {
  /* The block is absolutely positioned from left:50%, so with no width set it
     shrink-to-fits into the half-screen beside that anchor — 384px of a 768px
     tablet. That, not the type size, was breaking the headline into short
     lines. Above 900px the 680px max-width binds first, so desktop never hit it. */
  .hero__inner { width: min(92vw, 680px); }
  /* Each award flows as ordinary text here. As a flex row its spans wrapped as
     whole blocks, which broke one award across five ragged lines. */
  .laurels li { display: block; white-space: normal; }
  .laurels li > span { display: inline; }
  .laurels li > span + span { margin-left: .36em; }
}

@media (max-width: 599px) {
  /* The block is absolutely positioned from left:50%, so without an explicit
     width it shrink-to-fits into the half-screen beside that anchor — which is
     what was breaking the headline into five short lines, not the type size. */
  .hero__inner { padding-inline: clamp(16px, 5vw, 24px); }
  .hero__title {
    font-size: clamp(21px, 6.4vw, 26px);
    max-width: none;
    letter-spacing: -.02em;
    /* `balance` turns a long headline into five short lines on a narrow screen */
    text-wrap: pretty;
  }
  .hero__sub {
    font-size: clamp(15px, 4.4vw, 19px);
    margin-top: 10px;
    max-width: none;
  }
  .laurels {
    margin-top: clamp(18px, 5vw, 26px);
    gap: clamp(10px, 2.8vw, 15px);
  }
  .laurels li { font-size: clamp(11px, 3.1vw, 13px); line-height: 1.35; }

  /* ---- Phone layout, second pass (Euan, 29 Sep 2026) -------------------
     "still too cluttered / shrink all of the font size / I cant see the
     contact box anywhere. Drop that to the bottom, add the carousel above it
     / Take the awards out." Phones only — desktop is not touched. ---------- */
  .laurels { display: none; }

  .hero__title {
    font-size: clamp(22px, 7.2vw, 30px);
    /* Same three-line break as desktop: a measure near the longest line, with
       `balance` to even them out. */
    max-width: 15ch;
    text-wrap: balance;
  }
  .hero__sub   { font-size: clamp(13px, 3.8vw, 16px); margin-top: 8px; }
  .hero__inner { top: 30%; }

  /* The contact box comes onto the first screen, at the bottom. */
  .page-home .contact {
    position: absolute; z-index: 3;
    left: 50%; right: auto; transform: translateX(-50%);
    top: auto; bottom: clamp(10px, 3vw, 18px);
    width: min(72vw, 260px);   /* narrower box; the type inside is unchanged */
    padding: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
      radial-gradient(130% 80% at 50% -12%,
        rgba(74, 150, 104, .55) 0%, rgba(74, 150, 104, .16) 42%, rgba(74, 150, 104, 0) 72%),
      linear-gradient(180deg,
        rgb(44, 100, 70) 0%, rgb(35, 83, 58) 14%, rgb(29, 69, 49) 32%,
        rgb(24, 57, 41) 52%, rgb(19, 45, 33) 72%, rgb(15, 34, 26) 88%, rgb(11, 25, 20) 100%);
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(242, 251, 246, .12),
      0 18px 40px rgba(3, 14, 9, .55);
  }
  .page-home .contact__inner {
    padding: clamp(10px, 2.8vw, 14px);
    gap: clamp(4px, 1.2vw, 7px);
    align-items: center; text-align: center;
  }
  .page-home .contact__head { font-size: clamp(12px, 3.3vw, 14px); line-height: 1.2; }
  .page-home .contact__actions { flex-direction: column; align-items: stretch; gap: 2px; }
  .page-home .contact__item { align-items: stretch; }
  .page-home .contact__link {
    font-size: clamp(11px, 3vw, 12.5px);
    /* Type unchanged; the tap area is taller than the text so a thumb can hit
       it. 26px was well under the 44px guideline. */
    min-height: 36px; padding: 2px;
    background: none; border: 0; color: var(--ink);
  }
  .page-home .socials { gap: clamp(10px, 3.4vw, 15px); }
  .page-home .social { font-size: 11px; min-height: 32px; gap: 5px; }
  .page-home .social svg { width: 13px; height: 13px; }

  /* The ring sits directly above the contact box. --contact-h is an allowance
     for the box, which grows with the screen as its heading rewraps — measured
     after the box was shrunk: 147px at 320, 151 at 375, 161 at 430, 168 at 599.
     175 clears all of them. Re-measure if the box's contents change. */
  .page-home .clients {
    /* Centred in the space between the headline block and the contact box, so
       the gap above the ring matches the gap below it. Percentage of the film,
       measured rather than derived: the two gaps come out level at 57%. */
    top: 55%;
    bottom: auto;
    transform: translateY(-50%);
  }
  /* Smallest phones: the headline block and the box do not shrink in the same
     proportion as the film, so 57% leaves the ring low. Measured: 55% levels it. */
  @media (max-width: 359px) {
    .page-home .clients { top: 53%; }
  }
}