/* ==========================================================================
   Ag360 — colour-block language (whole site)

   A deep green page ground carrying large flat panels of brand colour and a
   warm neutral. Photography leads nearly every section. Display type is set
   in heavy caps.

   Every page loads this file. components.css and pages.css (the earlier
   editorial language) have been removed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ground and type overrides
   -------------------------------------------------------------------------- */
body {
  background: var(--canopy);
  color: var(--text-on-invert);
}

/* Display face is Inter at 800. The brand's serif is deliberately not used
   here: this language wants poster weight, not editorial contrast.

   NO text-transform. The client sets heading case in the copy itself - first
   letter of each word up, the rest down - so any transform here would
   overwrite their wording on screen. Headings used to be uppercased in CSS;
   that is why the line-height below is 1.04 and not the 0.98 caps wants.
   Do not put text-transform back on these. */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-variation-settings: normal;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

/* Sizes come from the tokens, never from here. Line-height and tracking are
   set PER LEVEL: one blanket 1.04 was too tight for a 24px h3 and too loose
   for a 54px h1, which is a large part of why the type felt unbalanced. */
h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: var(--ls-h3); }
h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

/* Emphasised words inside a headline. Colour only, never a filled block
   behind the text. On dark grounds this is Tertiary Green (about 8:1); on
   light grounds it darkens so it still clears AA. */
.mark { color: var(--ag-green-light); }
.on-bone .mark, .why .mark, .row__card .mark { color: var(--ag-forest); }
/* The mint CTA panel is the one ground where BOTH greens above fail: the
   default is the panel colour itself, and Secondary Green is too light. */
.cta__panel .mark { color: var(--green-on-mint); }

/* Small pill label. Used above section headings and as panel tags. */
.pill {
  display: inline-block;
  padding: 0.5em 1.05em;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  background: var(--ag-green);
  color: #06210F;
  margin-bottom: var(--s-5);
}
.pill--mint { background: var(--panel-mint); color: #06210F; }
.pill--bone { background: var(--bone); color: var(--ink); }
.pill--outline {
  background: transparent;
  color: var(--text-on-invert);
  border: 1px solid var(--rule-invert);
}

/* --------------------------------------------------------------------------
   Buttons — pills in this language
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 1rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.004em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Mint on dark ground: 8.2:1 against canopy, and it reads as the same
   action colour as the darker green used on light grounds. */
.btn--primary { background: var(--panel-mint); color: #06210F; }
.btn--primary:hover { background: #6FE0A2; }

/* On bone panels the action colour darkens so white text clears AA. */
.on-bone .btn--primary,
.btn--primary-dark { background: var(--ag-forest); color: #fff; }
.on-bone .btn--primary:hover,
.btn--primary-dark:hover { background: #007136; }

.btn--ghost {
  background: transparent;
  border-color: rgba(244, 240, 230, 0.45);
  color: var(--text-on-invert);
}
.btn--ghost:hover { border-color: var(--bone); background: rgba(244, 240, 230, 0.1); }

.btn--wide { display: flex; width: 100%; }
.on-bone .btn--ghost { border-color: rgba(11, 20, 32, 0.3); color: var(--ink); }
.on-bone .btn--ghost:hover { border-color: var(--ink); background: rgba(11, 20, 32, 0.05); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--canopy);
  border-bottom: 1px solid rgba(244, 240, 230, 0.12);
}
.hdr__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
/* The supplied logos are transparent, and their blue arc and tagline are
   near-black, so they disappear on the dark ground. Every placement sits the
   logo on a light circular plate.

   PADDING RULE: the artwork is not inscribed in its own square. Its furthest
   point (the green arrowhead, at 147 degrees) sits at 1.123x the half-width,
   so a circular plate flush to the image WILL clip the arrowheads. Padding
   must be at least 5.5% of the plate width; every placement below uses ~11%
   for visible breathing room. If you resize a plate, rescale its padding. */
.brand__logo {
  width: 52px;
  height: 52px;
  flex: none;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  object-fit: contain;
}
.brand__name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-h3);
  letter-spacing: -0.03em;
  color: var(--text-on-invert);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  color: var(--text-on-invert);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a[aria-current='page'] { border-bottom-color: var(--panel-mint); }
.nav .btn { padding: 0.7rem 1.2rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(244, 240, 230, 0.35);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-on-invert);
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .hdr__inner { position: relative; }
  .nav {
    position: absolute;
    top: calc(var(--nav-h) - 1px);
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--canopy);
    border-bottom: 1px solid rgba(244, 240, 230, 0.12);
    padding: var(--s-3) var(--gutter) var(--s-5);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: var(--s-4); border-bottom: 1px solid rgba(244, 240, 230, 0.12); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin-top: var(--s-4); }
}

/* --------------------------------------------------------------------------
   Hero — inset rounded photo panel with a docked facts bar
   -------------------------------------------------------------------------- */
/* Bottom padding matches the top so the panel is inset from BOTH ends. It
   used to be 0, relying on the next section's top padding for the gap - but
   that padding sits inside the next section's own background, so a bone band
   or the footer started flush against the panel's bottom edge. */
.hero { padding: var(--s-5) 0; }
.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-panel);
  min-height: min(74vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 1rem + 5vw, 5rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem) 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 26, 16, 0.92) 0%, rgba(6, 26, 16, 0.55) 45%, rgba(6, 26, 16, 0.45) 100%);
}
.hero__copy { text-align: center; max-width: 940px; margin: 0 auto; }
.hero__title { margin: 0 auto var(--s-5); color: #fff; max-width: 15ch; }
.hero__sub {
  max-width: 52ch;
  margin: 0 auto var(--s-6);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-lead);
  line-height: 1.5;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* Facts bar docked inside the bottom of the hero panel. */
.facts {
  margin-top: clamp(2.5rem, 1rem + 5vw, 5rem);
  background: rgba(6, 26, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--s-4) var(--s-6);
  align-items: center;
}
.fact__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--panel-mint);
  margin-bottom: 0.35rem;
}
.fact__value {
  display: block;
  font-size: var(--t-small);
  font-weight: 650;
  color: #fff;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .btn { grid-column: span 2; width: 100%; }
}
@media (max-width: 520px) {
  .hero__panel { min-height: 0; padding-top: var(--s-9); }
  .hero__copy { max-width: none; }
}

/* --------------------------------------------------------------------------
   Statement band — two colour panels plus overlapping photography
   -------------------------------------------------------------------------- */
.statement { padding-block: var(--section-y); }
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--s-5);
  align-items: stretch;
}
.panel {
  border-radius: var(--radius-panel);
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
}
.panel--blue { background: var(--panel-blue); color: #fff; }
.panel p { font-size: var(--t-lead); line-height: 1.5; }
.panel--green { background: var(--panel-green); color: #06210F; }
.panel--mint { background: var(--panel-mint); color: var(--ink); }
.panel--navy { background: var(--panel-navy); color: #fff; }
.panel--bone { background: var(--panel-bone); color: var(--ink); }

.statement__lead {
  /* One step above --t-lead, one below h3. */
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-5);
}
/* Two paragraph groups side by side INSIDE one panel. The panel is merged;
   only the text is columned, so the measure stays readable at full width
   instead of running the whole 1140px. */
.panel__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  align-items: start;
}
@media (max-width: 780px) {
  .panel__cols { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* One photograph under the About card, spanning the content width. This was
   a two-column grid when the section carried a PAIR of 4/3 photos; with a
   single image the grid did nothing, so it is a plain block. The negative
   margin-top is the section's established overlap: the photo tucks up under
   the card above it. */
.statement__photos {
  margin-top: calc(var(--s-8) * -1);
  padding-inline: clamp(1rem, 0.5rem + 2.5vw, 3.5rem);
}
.statement__photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
  border: 6px solid var(--canopy);
}
@media (max-width: 880px) {
  .statement__grid { grid-template-columns: 1fr; }
  /* Overlap off on small screens: the card and photo stack instead, and the
     side inset drops so the photo is not squeezed. */
  .statement__photos { margin-top: var(--s-5); padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Section heading, centred
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Section head

   An asymmetric band, not a centred stack: heading left, supporting text
   right, anchored by a hairline with a solid mint tick where the section
   starts. Centred headings on their own read flat at this weight, and using
   only the middle 880px wastes the container. This also matches the .why
   band, which already sets its heading top-left - the pattern is already in
   the design, it just was not used here.

   No copy is added. The tick and the rule are the whole device; keep the
   rest of the block quiet.
   -------------------------------------------------------------------------- */
.sect-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 4rem);
  align-items: start;
  position: relative;
  margin-bottom: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(234, 241, 236, 0.16);
}
/* The tick: sits on the rule at the section's start edge. */
.sect-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--panel-mint);
}
.sect-head h2 { margin-bottom: 0; }
.sect-head .pill { margin-bottom: var(--s-4); }

.sect-head__body {
  max-width: 62ch;
  align-self: end;            /* body baseline settles toward the heading's */
}
.sect-head__body p {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(234, 241, 236, 0.82);
}
.sect-head__body p + p { margin-top: var(--s-4); }
.sect-head__body p:last-child { margin-bottom: 0; }

/* No heading: the page h1 above is the heading, so this is a lead paragraph
   block. One column, and no tick - there is no section start to mark. */
.sect-head--intro { grid-template-columns: 1fr; }

@media (max-width: 820px) {
  .sect-head { grid-template-columns: 1fr; gap: var(--s-5); }
  .sect-head__body { align-self: start; }
}

/* --------------------------------------------------------------------------
   Sector rows — one continuous card, split bone / colour, with the
   photograph floating over the seam between the two halves.
   The colour of the right half rotates row to row.
   -------------------------------------------------------------------------- */
.rows { display: grid; gap: var(--s-6); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

/* Both halves reserve room in the middle so their text never runs under the
   photograph that straddles the seam. */
.row__left {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  /* The photo is 26% of the row and is centred on the seam, so it reaches
     26% into each half. Both halves reserve 36% of their own width, which
     leaves a consistent gap between text and photograph at every size. */
  padding-right: 36%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.row__right {
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-left: 36%;
}

/* The floating photograph. Inset top and bottom so both panels show around
   it, centred on the seam. */
.row__photo {
  position: absolute;
  left: 50%;
  top: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  bottom: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  transform: translateX(-50%);
  width: 26%;
  border-radius: var(--radius-card);
  overflow: hidden;
  z-index: 2;
}
.row__photo img { width: 100%; height: 100%; object-fit: cover; }

.row__name { margin-bottom: var(--s-2); }
.row__meta {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 700;
  color: #4A574F;
  margin-bottom: var(--s-5);
}
.row__left p { font-size: var(--t-small); line-height: 1.6; color: #2A3A31; }
.row__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); }

/* "What we cover": short paragraphs with a bold lead-in term, not bullets. */
.row__right h4 {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  margin-bottom: var(--s-5);
}
.row__cover { display: grid; gap: var(--s-4); }
.row__cover p { font-size: var(--t-small); line-height: 1.55; margin: 0; }
.row__cover b { font-weight: 800; letter-spacing: 0.01em; }

/* Panels light enough for dark text carry it; the darker two carry white.
   Heading and body share a colour, so hierarchy comes from size and weight. */
/* Light panels carry dark text, dark panels carry white. Heading and body
   share a colour; hierarchy comes from size and weight. */
.panel--green h2, .panel--green h3, .panel--green h4,
.panel--mint h2, .panel--mint h3, .panel--mint h4 { color: #06210F; }
.panel--blue h2, .panel--blue h3, .panel--blue h4,
.panel--navy h2, .panel--navy h3, .panel--navy h4 { color: #fff; }
/* Footnotes use opacity elsewhere; on light panels that drops them below AA. */
.panel--green .footnotes,
.panel--mint .footnotes { opacity: 1; color: var(--ink); }

@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; }
  .row__left, .row__right { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
  .row__photo {
    position: static;
    transform: none;
    width: auto;
    border-radius: 0;
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   Masterclass feature
   -------------------------------------------------------------------------- */
.feature { padding-block: var(--section-y); }
.feature__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
  margin-bottom: var(--s-7);
}
.feature__logo {
  width: 116px;
  height: 116px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 13px;              /* see the padding rule on .brand__logo */
  margin-bottom: var(--s-5);
}
.feature__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.feature__shot { position: relative; border-radius: var(--radius-panel); overflow: hidden; }
.feature__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 880px) {
  .feature__top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .feature__photos { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Numbered "why" band on bone
   -------------------------------------------------------------------------- */
.why {
  background: var(--bone);
  color: var(--ink);
  padding-block: var(--section-y);
}
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: stretch;
}
.why h2 { color: var(--ink); }

/* The photograph takes whatever height the numbered list leaves, so the two
   columns always finish level. Do not give the image a fixed aspect ratio at
   desktop: that is what left dead space under the shorter column. */
.why__left { display: flex; flex-direction: column; }
/* The column stretches its children; the pill must not stretch with it. */
.why__left > .pill { align-self: flex-start; }
.why__media {
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.why__media img { width: 100%; height: 100%; object-fit: cover; }

.why__lead {
  color: var(--ink);
  font-size: var(--t-lead);
  line-height: 1.5;
  margin: 0 0 var(--s-6);
  max-width: 34ch;
}

.numbers { display: grid; gap: 0; }
.number {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid rgba(11, 20, 32, 0.14);
  align-items: start;
}
.number:last-child { border-bottom: 1px solid rgba(11, 20, 32, 0.14); }
.number__n {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--green-text);
  padding-top: 0.2rem;
}
.number h3 { color: var(--ink); margin-bottom: var(--s-3); }
.number p { font-size: var(--t-small); line-height: 1.6; color: #3A4A41; max-width: 58ch; }

@media (max-width: 880px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__media { flex: none; min-height: 0; }
  .why__media img { height: auto; aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Closing CTA — a bright panel between the dark page and the dark footer,
   carrying the actual contact routes rather than just a button.
   -------------------------------------------------------------------------- */
.cta { padding-block: var(--section-y) var(--s-9); }
.cta__panel {
  background: var(--panel-mint);
  color: var(--ink);
  border-radius: var(--radius-panel);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
}
.cta__panel h2 { color: var(--ink); margin-bottom: var(--s-4); max-width: 14ch; }
.cta__panel p { color: #14382A; max-width: 46ch; margin: 0; font-size: var(--t-lead); line-height: 1.5; }

.cta__contact {
  display: grid;
  gap: var(--s-4);
  /* Anchored to the panel's right edge so the headline and the contact
     details read as two poles rather than leaving a gap on the right. */
  justify-items: end;
  text-align: right;
}
.cta__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: #14382A;
}
.cta__link {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid rgba(11, 20, 32, 0.25);
  padding-bottom: 2px;
  word-break: break-word;
}
.cta__link:hover { border-bottom-color: var(--ink); }
.cta__panel .btn { margin-top: var(--s-3); }

@media (max-width: 880px) {
  .cta__panel { grid-template-columns: 1fr; align-items: start; }
  .cta__contact { justify-items: start; text-align: left; }
}

/* --------------------------------------------------------------------------
   Footer — dark, so the page closes on the same ground it opened on
   -------------------------------------------------------------------------- */
.ftr {
  background: var(--canopy);
  color: var(--text-on-invert);
  padding-block: var(--s-9) var(--s-6);
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid rgba(244, 240, 230, 0.16);
}
.ftr__brand { margin-bottom: var(--s-5); }
/* Large enough that the full lockup, tagline included, is legible. */
.ftr__logo {
  width: 116px;
  height: 116px;
  background: #fff;
  border-radius: 50%;
  padding: 13px;
  object-fit: contain;
}
.ftr__tag {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--panel-mint);
  margin-bottom: var(--s-5);
  max-width: 22ch;
}
.ftr__address {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--text-muted-invert);
  max-width: 34ch;
  margin: 0;
}

.ftr__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--s-6);
}
.ftr h4 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--panel-mint);
  margin-bottom: var(--s-5);
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: var(--s-3); }
.ftr a { color: var(--text-on-invert); text-decoration: none; font-size: var(--t-small); }
.ftr a:hover { color: var(--panel-mint); }
.ftr__contact a { font-family: var(--font-mono); font-size: var(--t-micro); }

/* Social as round icon buttons. The visible label is dropped so the pair
   always sits on one line at any column width; each link keeps its
   aria-label, so the accessible name is unchanged. */
.social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 240, 230, 0.28);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.social a:hover { border-color: var(--panel-mint); color: var(--panel-mint); }
.social a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-6);
  font-size: var(--t-micro);
  color: var(--text-muted-invert);
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ftr__legal a { font-size: var(--t-micro); color: var(--text-muted-invert); }

@media (max-width: 900px) {
  .ftr__top { grid-template-columns: 1fr; gap: var(--s-8); }
}
@media (max-width: 620px) {
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__contact { grid-column: span 2; }
}

/* Focus ring needs to clear both the dark ground and the bone panels. */
:focus-visible { outline: 3px solid var(--panel-mint); outline-offset: 3px; }
.on-bone :focus-visible,
.why :focus-visible,
.ftr :focus-visible,
.row__card :focus-visible { outline-color: var(--ag-blue); }

/* Actions row inside the masterclass feature (left aligned, unlike the hero). */
.feature__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* Bone pill needs an edge to separate it from the bone band behind it. */
.pill--edge { border: 1px solid rgba(11, 20, 32, 0.16); }


/* Consecutive dark sections were stacking two full section paddings and
   opening dead gaps. Sections that follow another dark section start tighter. */
/* When dark sections stack, the preceding section's bottom padding is the
   whole gap. Doubling it up opened dead space between panels. */
.statement + .statement,
.statement + .feature,
.statement + .cta,
.feature + .statement,
.feature + .cta,
.feature { padding-top: 0; }

/* NOT in the list above: .why + .cta. This rule only works when the two
   sections share the page ground, so the first one's bottom padding reads as
   the gap. .why paints its own bone band, so its bottom padding is INSIDE
   that band and separates nothing - zeroing the CTA's top padding put the
   mint panel hard against the bone. Any future section with its own
   background needs the same exemption. */

/* `.nav a` (0,1,1) outranks `.btn--primary` (0,1,0), which was leaving the
   nav's Register pill with near-white text on mint. Restate it at higher
   specificity so the pill keeps its dark label. */
.nav a.btn--primary { color: #06210F; }
.nav a.btn--primary:hover { border-bottom-color: transparent; }
.nav a.btn { border-bottom: 1px solid transparent; }

/* ==========================================================================
   INNER PAGES
   Same language as the homepage: dark ground, flat brand panels, bone cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — shorter than the homepage hero, no facts bar by default
   -------------------------------------------------------------------------- */
/* See the note on .hero: inset from both ends, not just the top. */
.phero { padding: var(--s-5) 0; }
.phero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-panel);
  padding: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(1.5rem, 0.5rem + 3vw, 4rem);
}
.phero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.phero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(6, 26, 16, 0.94) 0%, rgba(6, 26, 16, 0.82) 52%, rgba(6, 26, 16, 0.6) 100%);
}
.phero h1 { max-width: 18ch; margin-bottom: var(--s-5); color: #fff; }
.phero__sub { max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; color: rgba(255,255,255,.9); }

/* Event header variant: logo beside the title */
.phero__with-logo {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  align-items: center;
}
.phero__logo {
  width: 132px; height: 132px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 15px;              /* see the padding rule on .brand__logo */
}
@media (max-width: 700px) {
  .phero__with-logo { grid-template-columns: 1fr; }
  .phero__logo { width: 96px; height: 96px; padding: 11px; }
}

/* Meta line of mono facts */
.phero__actions { margin-top: var(--s-5); }
.metaline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--panel-mint);
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   Prose band
   -------------------------------------------------------------------------- */
.prose { padding-block: var(--section-y); }
.prose__inner { max-width: 62ch; }
.prose p { font-size: var(--t-lead); line-height: 1.6; color: rgba(234, 241, 236, 0.86); }
.on-bone .prose p, .why .prose p { color: #3A4A41; }
.prose h2 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  margin: var(--s-8) 0 var(--s-4);
}
.prose h3 {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  margin: var(--s-6) 0 var(--s-3);
}
.prose > *:first-child { margin-top: 0; }
.prose ul {
  margin: 0 0 var(--s-5);
  padding-left: 1.25em;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: rgba(234, 241, 236, 0.86);
}
.prose li { margin-bottom: var(--s-3); }
.prose a { color: var(--ag-green-light); }

/* --------------------------------------------------------------------------
   Generic bone card
   -------------------------------------------------------------------------- */
.card {
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.card h2, .card h3, .card h4 { color: var(--ink); }
.card p { color: #2A3A31; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.team-card { display: flex; flex-direction: column; gap: var(--s-5); }
.team-card__photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bone-deep);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__role {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  color: var(--green-text);
  margin-bottom: var(--s-3);
}

/* --------------------------------------------------------------------------
   Countdown — blocky tiles, no ring
   -------------------------------------------------------------------------- */
.countdown {
  display: grid;
  /* SIX tiles: Months / Weeks / Days / Hours / Minutes / Seconds. This was
     left at repeat(5, ...) when the Hours tile was added, which dropped
     Seconds onto a row of its own.

     Every column count here must DIVIDE SIX (6, 3, 2) or the last row
     orphans. auto-fit is not usable for the same reason: it settles on 5
     columns between roughly 760px and 860px. If the tile count changes -
     it is still an open question with the client, see README - change these
     three counts to match. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
}
.count-tile {
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.count-tile__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);   /* tracks h2 */
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.count-tile__label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: #5A6A61;
}
@media (max-width: 760px) {
  .countdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .count-tile { padding: var(--s-4) var(--s-3); }
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
/* Event card head: logo beside the title, same anatomy as .phero__with-logo.
   The logo needs the white plate - both marks carry a near-black tagline and
   a dark arc that vanish on a coloured panel - and at least 5.5% padding or
   the arrowheads clip. See the Logos note in the README. */
.event-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-5);
}
.event-head__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 11px;
}
.event-head h3 { margin-bottom: 0; }
@media (max-width: 480px) {
  .event-head { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); }
  .event-head__logo { width: 72px; height: 72px; padding: 8px; }
}

/* Date and location side by side, icon-led, no labels.

   An explicit 2-column grid, NOT the parent's flex-wrap: inside this panel
   the two items come to about 370px against roughly 399px of usable width,
   so any extra pushed them over the wrap threshold and the location dropped
   to a second line. Two columns hold them side by side regardless of length;
   long text wraps inside its own column instead. */
p.metaline--icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  font-size: var(--t-micro);
  margin-top: 0;
  margin-bottom: var(--s-5);
}
p.metaline--icons span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
p.metaline--icons svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}
@media (max-width: 480px) {
  p.metaline--icons { grid-template-columns: 1fr; gap: var(--s-3); }
}

.pricing { display: grid; gap: 0; }
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.price-row:last-child { border-bottom: 0; }
.price-row__label { font-size: var(--t-body); font-weight: 600; }
.price-row__note { display: block; font-weight: 400; font-size: var(--t-micro); opacity: 0.82; margin-top: 3px; }
.price-row__value {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Capacity */
.capacity { margin-top: var(--s-6); }
.capacity__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  margin-bottom: var(--s-3);
}
.capacity__bar { height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.capacity__fill { height: 100%; background: var(--panel-mint); }

/* --------------------------------------------------------------------------
   Forms — always on a bone card
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-small); font-weight: 650; color: var(--ink); }
.field .req { color: var(--green-text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(11, 20, 32, 0.3);
  border-radius: var(--radius-card);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #5A6A61; opacity: 1; }
.field__help { font-size: var(--t-micro); color: #4A574F; }
.field__error { font-size: var(--t-micro); color: #A3231B; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; accent-color: var(--ag-forest); }
.consent label { font-size: var(--t-small); font-weight: 400; color: #3A4A41; }
.form__note { font-family: var(--font-mono); font-size: var(--t-micro); color: #4A574F; }

.qty { display: flex; align-items: center; gap: var(--s-3); }
.qty input { width: 5.5rem; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.qty__total { font-family: var(--font-mono); font-size: var(--t-lead); font-weight: 600; }

/* --------------------------------------------------------------------------
   Checklist inside panels
   -------------------------------------------------------------------------- */
/* The contact panel finishes level with the form beside it; .split is
   align-items:start, which otherwise left it stopping half way down. */
.split > .panel:has(> .contact-list) { align-self: stretch; }

/* Email, phone and address together in one block. Icon-led per the client's
   note "Website designer to update above 2 icons". Rows are separated by
   hairlines rather than bullets so the two actionable rows read as actions. */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list li:last-child { padding-bottom: 0; }
.contact-list svg { width: 22px; height: 22px; fill: var(--panel-mint); margin-top: 0.15em; }
.contact-list a {
  color: #fff;
  font-size: var(--t-lead);
  font-weight: 650;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 0.22em;
}
.contact-list a:hover { text-decoration-color: #fff; }
.contact-list span { color: rgba(234, 241, 236, 0.86); line-height: 1.55; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist li {
  position: relative;
  padding-left: 1.7rem;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.5;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.85;
}
.footnotes { margin-top: var(--s-6); font-size: var(--t-micro); line-height: 1.6; opacity: 0.8; }
.footnotes p { font-size: var(--t-micro); margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   Two-column split used by fees/register and included/footnotes
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split--registration {
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.25rem, 0.85rem + 1.6vw, 2.4rem);
}
.split--registration .panel--fees {
  width: min(100%, 410px);
  padding: clamp(1.55rem, 1.05rem + 1.4vw, 2.35rem);
}
.split--registration .card--registration {
  padding: clamp(1.35rem, 0.95rem + 1.45vw, 2rem);
}
@media (max-width: 900px) {
  .split--registration .panel--fees { width: 100%; }
}



/* A single photograph filling the right column of a split. */
/* The photograph beside a panel takes the panel's height rather than setting
   its own. It used to be locked to 4/5 portrait, which ran roughly twice the
   height of the text next to it and left the row badly unbalanced. Same
   approach as .why__media: the image fills, the text decides how tall.
   .feature__shot is already position:relative + overflow:hidden. */
.split > .feature__shot {
  align-self: stretch;
  min-height: 300px;
}
.split > .feature__shot img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}
@media (max-width: 900px) {
  /* Single column: back to a normal in-flow banner. */
  .split > .feature__shot { min-height: 0; }
  .split > .feature__shot img { position: static; height: auto; aspect-ratio: 16 / 9; }
}

/* Bone button: for CTAs sitting on a green or blue panel, where a green
   button would not separate from its ground. */
.btn--bone { background: var(--bone); color: var(--ink); }
.btn--bone:hover { background: #fff; }

/* Meta line on a light panel. */
.metaline--ink { color: #06210F; }
.soldout__cta { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Photography
   Every image slot now carries a placehold.co image sized to that slot's own
   aspect ratio, so the box states its dimensions and nothing else. Hero and
   page-header grounds carry stock photographs.

   To drop a real photograph in: swap the src and keep the width/height. The
   sizing rules live with each component (.statement__photos img,
   .feature__shot img, .why__media img, .team-card__photo img), not here.

   The earlier hand-built .ph placeholder component has been removed; it is in
   git history if the dashed-outline treatment is ever wanted back.
   -------------------------------------------------------------------------- */