/* ===================================================================
   GreenCabinWales — stylesheet
   Sections: 1 tokens · 2 base · 3 background · 4 header · 5 hero
             6 cards · 7 band · 8 footer · 9 responsive · 10 motion
   =================================================================== */

/* ---------- 1. TOKENS (change colours here, nowhere else) ---------- */
:root {
  /* greens, sampled from the reference photograph */
  --green-900: #071c13;   /* deepest — bottom of the wall */
  --green-800: #0d2b1e;
  --green-700: #123c2a;
  --green-600: #1c6647;
  --green-500: #226e4d;   /* the wall's mid green */
  --green-400: #388c66;   /* where the light falls */
  /* THE brand green, taken from the logo mark. Every green on the site is
     this one colour — solid, or this same colour at some transparency.
     Change it here and it changes everywhere. */
  --accent:     #3ce35f;
  --accent-rgb: 60, 227, 95;   /* same colour, for rgba() tints */

  /* neutrals */
  --ink:       #f2fbf6;
  --ink-muted: rgba(233, 247, 239, 0.72);
  --line:      rgba(255, 255, 255, 0.16);
  --panel:     rgba(255, 255, 255, 0.055);

  /* layout */
  /* Full-bleed layout: content runs to the page edges, held off them by
     --pad. No centred column, so nothing is stranded in the middle of a
     wide monitor.
     NOTE: when running text is added later, cap that block's own width
     (around 65ch) — full-bleed paragraphs are unreadable at this size. */
  --maxw: 100%;
  --pad: clamp(1.5rem, 3.5vw, 4.5rem);
  --radius: 14px;

  /* type — Century Gothic, with the nearest geometric sans at each step
     down. It ships with Microsoft Office rather than with macOS or Windows
     themselves, so visitors without it land on Avant Garde / URW Gothic /
     Futura, which share its geometric, single-storey-'a' character. */
  --font: "Century Gothic", CenturyGothic, "ITC Avant Garde Gothic",
          "URW Gothic", Futura, "Avenir Next", "Segoe UI",
          ui-sans-serif, sans-serif;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Column layout so <main> can simply absorb whatever height the header
     doesn't use. Previously sections guessed the header height with
     calc(100vh - 5rem), which broke the moment the logo got bigger.
     The fixed .bg layers are out of flow and unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--green-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   3. ANIMATED BACKGROUND
   Four stacked layers, all fixed behind the page and click-through:
     .bg-wall     the painted green wall + faint vertical seams (static)
     .bg-leaves   two foliage-shadow layers that sway at different speeds
     .bg-vignette darkening toward the edges
     .bg-grain    fine noise so the gradients don't band
   The leaf shadows are fractal-noise SVGs. Only `transform` is
   animated, so the whole thing runs on the GPU.
   =================================================================== */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--green-900);
}

.bg-wall {
  position: absolute;
  inset: 0;
  background:
    /* light pooling across the upper left */
    radial-gradient(80% 70% at 22% 18%, rgba(96, 186, 140, 0.5), transparent 62%),
    /* shadow gathering at the foot of the wall */
    radial-gradient(120% 70% at 45% 116%, var(--green-900) 0%, transparent 58%),
    /* the wall itself */
    linear-gradient(176deg,
      #2c7d59 0%,
      #2a7454 30%,
      #1f5c41 58%,
      var(--green-700) 78%,
      var(--green-800) 100%);
}

/* faint vertical striations + panel seams, as in the photograph */
.bg-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0 1px,
      transparent 1px 4px),
    linear-gradient(90deg,
      transparent 35.8%, rgba(0, 0, 0, 0.07) 36%, transparent 36.2%,
      transparent 57.4%, rgba(0, 0, 0, 0.06) 57.6%, transparent 57.8%);
}

.bg-leaves {
  position: absolute;
  inset: -18%;
  will-change: transform;
  /* keep the dapple to the right, leaving the left of the wall clean */
  -webkit-mask-image: radial-gradient(62% 100% at 86% 40%, #000 10%, transparent 76%);
          mask-image: radial-gradient(62% 100% at 86% 40%, #000 10%, transparent 76%);
}

/* larger, softer clumps — the canopy further from the wall.
   The feColorMatrix alpha row is the threshold: bigger multiplier and
   more negative offset = fewer, more separated shadow shapes. */
.bg-leaves-a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='800'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.014' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0 0 0 -1.62'/%3E%3C/filter%3E%3Crect width='1000' height='800' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size: 1150px 920px;
  opacity: 0.55;
  filter: blur(6px);
  animation: sway-a 34s ease-in-out infinite alternate;
}

/* smaller, crisper leaves — closer to the wall, moving a touch faster */
.bg-leaves-b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='700'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.03' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.4 0 0 0 -1.95'/%3E%3C/filter%3E%3Crect width='800' height='700' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 720px 620px;
  opacity: 0.5;
  filter: blur(1.5px);
  animation: sway-b 23s ease-in-out infinite alternate;
  /* offset from layer A's mask so the two clump unevenly, as real foliage does */
  -webkit-mask-image: radial-gradient(52% 85% at 80% 62%, #000 6%, transparent 74%);
          mask-image: radial-gradient(52% 85% at 80% 62%, #000 6%, transparent 74%);
}

@keyframes sway-a {
  from { transform: translate3d(-1.6%, -1.1%, 0) scale(1.04) rotate(-0.6deg); }
  to   { transform: translate3d( 1.6%,  1.3%, 0) scale(1.09) rotate( 0.7deg); }
}
@keyframes sway-b {
  from { transform: translate3d( 1.2%,  0.9%, 0) scale(1.06) rotate( 0.5deg); }
  to   { transform: translate3d(-1.4%, -0.7%, 0) scale(1.01) rotate(-0.5deg); }
}

/* ---- the real footage ----
   Covers the viewport like a background-image with `cover`. Starts
   invisible and fades in once enough has buffered to play, so visitors
   never see it pop in mid-load — they see the CSS wall until then.  */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
  /* The footage has the GreenCabin logo burned into the top-left and the
     strapline top-right. Anchoring to the bottom and scaling up pushes the
     top ~20% of the frame off-screen, taking both with it.
     Raise the scale if any branding still peeks in. */
  transform-origin: bottom center;
  transform: scale(1.25);
}
.bg-video.is-ready { opacity: 1; }

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 45% 38%, transparent 44%, rgba(0, 0, 0, 0.38) 100%);
}

.bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: 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='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 4. HEADER ---------- */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  /* logo hard left, strapline hard right — never grouped in the middle */
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 2.5vh, 2rem) var(--pad) 1rem;
  /* NO `margin: 0 auto` here. Body is a flex column, and auto inline
     margins on a flex item make it shrink to its content and centre —
     which pulled the logo and strapline into the middle of the page. */
  width: 100%;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

/* .is-stuck is added by main.js once the page scrolls */
.site-header.is-stuck {
  background: rgba(9, 36, 25, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  /* the header is already full-bleed, so the gutter simply stays put —
     this used to re-derive it from the old centred column width */
  padding-inline: var(--pad);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  /* 1.5x the previous 22.5px */
  font-size: 33.75px;
}

/* (a `.logo img` rule used to live here; it out-specified .logo-mark and
   pinned the mark's height — .logo-mark is the single source now) */

/* "Green" and "Wales" stay white, "Cabin" picks up the brand green */
.logo-accent { color: var(--accent); }

/* the brand mark — sized by height so the aspect ratio looks after itself */
.logo-mark {
  display: block;
  flex: none;
  height: 56.25px;   /* 1.5x the previous 37.5px */
  width: auto;
}
.logo-mark.small { height: 45px; }

/* strapline opposite the logo. The green rule sits just clear of the
   baseline rather than tight against it, as on the brand lockup. */
.tagline {
  margin: 0;
  color: var(--ink);
  font-size: 1.875rem;   /* 1.5x the previous 1.25rem */
  font-weight: 400;
  white-space: nowrap;
}

.tagline strong {
  font-weight: 700;
  border-bottom: 3.75px solid var(--accent);
  padding-bottom: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.site-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 1rem;
}
.site-nav a:hover { color: var(--ink); background: var(--panel); }

/* the one solid button in the header — dark text on brand green */
.site-nav .nav-cta {
  background: var(--accent);
  color: var(--green-900);
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.18s ease;
}
.site-nav .nav-cta:hover {
  background: var(--accent);
  color: var(--green-900);
  transform: translateY(-1px);
}

/* <main> takes the space the header leaves */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---------- 4b. STAGE: AWARDS ----------
   Awards on the left. Symmetric padding plus `align-items: center` means
   the gap to the header above and the contact box below is equal, and
   stays equal at any window height. */
.stage {
  width: 100%;
  padding: clamp(1rem, 3vh, 2rem) var(--pad);
  /* fills whatever <main> is given, so no assumption about header height */
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.awards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
  text-align: left;
}

.award {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.35;
}

.award-org  { color: var(--ink-muted); }
.award-sep  { color: rgba(255, 255, 255, 0.3); }
.award-name { color: var(--ink); font-weight: 600; }

.award-year {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.medal-word        { font-weight: 700; letter-spacing: 0.04em; }
.medal-word.gold   { color: #f2d68d; }
.medal-word.bronze { color: #e0a97e; }

/* ---------- 4c. CONTACT BOX ----------
   Bottom left. `align-self: flex-start` keeps the box to its natural
   width against the left gutter instead of stretching across the page. */
.contact-block {
  align-self: flex-start;
  padding: 0 var(--pad) clamp(2rem, 6vh, 4rem);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2.2rem 2.9rem;
}

/* scoped to out-specify `.card p`, which would otherwise pin the size
   and mute the colour of this paragraph */
.contact-card .contact-lead {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 600;
}

.contact-line {
  color: var(--accent);
  font-size: 1.35rem;
  width: fit-content;
}
.contact-line:hover { color: var(--ink); }

/* ---------- 5. HERO ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 14vh, 9rem) var(--pad) clamp(3rem, 8vh, 5rem);
}

.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 700;
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}

/* the underline under "No-nonsense", as on the brand lockup */
.hero h1 em {
  font-style: normal;
  box-shadow: inset 0 -0.09em var(--accent);
}

.lede {
  margin: 1.5rem 0 0;
  max-width: 52ch;
  font-size: clamp(1.12rem, 2.1vw, 1.32rem);
  color: var(--ink-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--accent);
  color: var(--green-900);
}
/* colour stays put on hover — the lift from .btn is the feedback */
.btn-primary:hover { background: var(--accent); color: var(--green-900); }

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- 6. SECTIONS & CARDS ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) var(--pad);
}

.section-title {
  font-size: clamp(1.6rem, 3.1vw, 2.15rem);
  font-weight: 700;
  margin-bottom: 2rem;
}

/* ---------- 6a. WHAT WE DO ----------
   Two columns of ticked lines. The rule above each row gives the section a
   ledger-like structure without adding another box to the page. */
.services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2.5rem;
}

@media (min-width: 760px) {
  .services { grid-template-columns: 1fr 1fr; }
}

.service {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.05rem 0.2rem;
  border-top: 1px solid var(--line);
  font-size: 1.09rem;
  line-height: 1.5;
}

.tick {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 0.12rem;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card {
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(255, 255, 255, 0.085);
}

.card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1.02rem;
}

/* ---------- 6b. CONTACT: PEOPLE ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.6rem 1.8rem;
}

/* works for both the placeholder <div> and a real <img class="avatar"> */
.avatar {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.22), rgba(7, 28, 19, 0.5));
  color: var(--ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* set once main.js confirms the photo file actually loaded */
.avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* the portrait is already a circle on transparency, so nothing of the
     placeholder gradient should show through behind it */
  background-color: transparent;
}
.avatar.has-photo span { display: none; }

.person .role {
  margin: 0.15rem 0 1.2rem;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.person-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.person-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.97rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.person-links a:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--ink);
}

.icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  color: var(--accent);
}
/* the envelope is drawn as strokes, not a filled shape */
.person-links a[href^="mailto"] .icon {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 6c. COMPANY LINKEDIN ----------
   A card like the two above it, run full width underneath them. The box
   itself comes from .card; this only centres the icon and label. */
.company-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}
.company-link:hover { color: var(--ink); }

/* ---------- 7. SUCCESSES ---------- */
/* Five cards, so the last row is always short. Rather than let it hang to
   the left, the grid runs at twice the number of columns and each card
   spans two — which leaves a spare column at each end of the last row to
   centre it. A 6-column grid with cards spanning 2 gives exactly the same
   card width as a plain 3-column one, so the top row doesn't shift. */
.successes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* two across — the fifth card centres beneath */
@media (min-width: 620px) {
  .successes { grid-template-columns: repeat(4, 1fr); }
  .success { grid-column: span 2; }
  .success:nth-child(5) { grid-column: 2 / span 2; }
}

/* three across — the bottom two centre beneath */
@media (min-width: 900px) {
  .successes { grid-template-columns: repeat(6, 1fr); }
  .success { grid-column: span 2; }
  .success:nth-child(4) { grid-column: 2 / span 2; }
  .success:nth-child(5) { grid-column: 4 / span 2; }
}

.success {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* belt and braces — no marker, whichever way the list is styled */
  list-style: none;
}
.success::marker { content: ""; }

/* a thin green edge that grows down the left on hover */
.success::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.28s ease;
}
.success:hover::before { transform: scaleY(1); }

.success-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.year-pill {
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.success-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.success-org {
  margin: 0;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.93rem;
}

/* GOLD / BRONZE tags */
.medal {
  display: inline-block;
  margin-right: 0.55rem;
  padding: 0.08rem 0.45rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.medal-gold {
  color: #f2d68d;
  background: rgba(232, 197, 106, 0.14);
  border: 1px solid rgba(232, 197, 106, 0.38);
}
.medal-bronze {
  color: #e0a97e;
  background: rgba(192, 132, 87, 0.16);
  border: 1px solid rgba(192, 132, 87, 0.42);
}

/* ---------- 8. FOOTER ---------- */
.site-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem var(--pad) 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.93rem;
}
.site-footer p { margin: 0; }

/* ---------- 9. RESPONSIVE ---------- */

/* never let a nav label break mid-phrase */
.site-nav a { white-space: nowrap; }

@media (max-width: 700px) {
  /* at 1.25x the strapline no longer fits a phone on one line, and
     `nowrap` was pushing it off the right edge */
  .tagline {
    font-size: 1rem;
    white-space: normal;
    text-align: right;
  }

  /* Give the organisation its own line so the year stays attached to the
     award name. Without this the flex row wraps and orphans the year. */
  .award { font-size: 1rem; }
  .award-org { flex: 0 0 100%; }
  .award-sep { display: none; }

  .stage {
    align-items: stretch;
    min-height: 0;
    padding-block: clamp(2.5rem, 8vh, 5rem);
  }
  .awards-list { gap: 1.4rem; }
}

@media (max-width: 700px) {
  /* Three labels no longer fit across a phone. Drop the two section links
     and keep Contact — the page is short enough to scroll, and Contact is
     the only one that's an action rather than a shortcut. */
  .site-nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 560px) {
  .logo-text { display: none; }
  .site-nav a { padding: 0.5rem 0.9rem; font-size: 0.95rem; }
  /* pull the dapple toward the middle so it still reads on a narrow screen */
  .bg-leaves {
    -webkit-mask-image: radial-gradient(85% 60% at 72% 26%, #000 8%, transparent 78%);
            mask-image: radial-gradient(85% 60% at 72% 26%, #000 8%, transparent 78%);
  }
}

/* ---------- 10. REDUCED MOTION ----------
   Anyone who has asked their OS to limit animation gets a still page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-leaves { animation: none; }
  * { transition-duration: 0.01ms !important; }
}