/* ==========================================================================
   ALANY — ABOUT PAGE
   Layered on top of home.css: same tokens, same type, same warmth.
   The page reads as a record rather than a brochure — a dark masthead, a
   founder plate, ledgers, a dossier of responsibilities and an archive of
   years. None of the home page's devices (panels, rail, band) are reused,
   so the two pages feel related without looking like the same layout twice.
   No hairline borders: every rule here is a fading gradient, every division
   is a change of tone.
   ========================================================================== */

/* ==========================================================================
   PAGE-WIDE OVERRIDES
   Matched to the programmes page: the section number reads as a label ABOVE
   its heading rather than in a column beside it, and body copy runs one step
   larger than the home page - this is a long read.
   ========================================================================== */
.shead {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.shead__n {
  padding-top: 0;
  font-size: 0.8rem;
}
.shead__t {
  max-width: 26ch;
}
.shead__p {
  max-width: 78ch;
}
.lead {
  font-size: clamp(1.04rem, 0.3vw + 0.98rem, 1.16rem);
  line-height: 1.75;
}
.small {
  font-size: 0.95rem;
}
.label {
  font-size: 0.75rem;
}

/* ==========================================================================
   NAV OVER THE DARK MASTHEAD
   The bar is transparent until it sticks, so on this page it starts life on
   near-black and has to invert. Once .is-stuck paints its own light chrome,
   everything reverts.
   ========================================================================== */
.nav--ondark:not(.is-stuck) .brand img {
  filter: brightness(0) invert(1);
  transition: filter 0.45s var(--e);
}
.nav--ondark:not(.is-stuck) .nav__burger {
  background: rgba(255, 250, 242, 0.14);
}
.nav--ondark:not(.is-stuck) .nav__burger i,
.nav--ondark:not(.is-stuck) .nav__burger i::before,
.nav--ondark:not(.is-stuck) .nav__burger i::after {
  background: var(--cream);
}
.nav--ondark:not(.is-stuck) .lang--m {
  background: rgba(255, 250, 242, 0.14);
}
.nav--ondark:not(.is-stuck) .lang--m .lang__a {
  color: rgba(255, 250, 242, 0.7);
}
.nav--ondark:not(.is-stuck) .lang--m .lang__a.is-on {
  background: var(--cream);
  color: var(--ink);
}
/* the desktop list sits on the dark bar; on mobile it is a light panel, so
   these only apply above the burger breakpoint */
@media (min-width: 981px) {
  .nav--ondark:not(.is-stuck) .nav__links > li > a {
    color: var(--cream);
  }
  .nav--ondark:not(.is-stuck) .nav__links > li > a[aria-current] {
    color: var(--orange-2);
  }
  .nav--ondark:not(.is-stuck) .lang {
    background: rgba(255, 250, 242, 0.14);
  }
  .nav--ondark:not(.is-stuck) .lang__a {
    color: rgba(255, 250, 242, 0.7);
  }
  .nav--ondark:not(.is-stuck) .lang__a.is-on {
    background: var(--cream);
    color: var(--ink);
  }
  .nav--ondark:not(.is-stuck) .nav__cta {
    color: #2a1206;
  }
}

/* ==========================================================================
   01 · MASTHEAD
   Type-led and near-black — the deliberate opposite of the home hero, which
   opens on photographs. The organisation's vital statistics sit beside the
   headline as a record card, because that is what a reader comes here for.
   ========================================================================== */
.amast {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(78% 62% at 8% -10%, rgba(255, 107, 44, 0.17), transparent 62%),
    radial-gradient(60% 50% at 96% 6%, rgba(31, 58, 68, 0.55), transparent 66%),
    var(--ink);
  color: #a99c8e;
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5vw, 4.4rem));
  padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
}
.amast h1 {
  color: var(--cream);
  max-width: 17ch;
  margin-top: clamp(0.9rem, 1.8vw, 1.3rem);
}
.amast .label i {
  color: var(--cream);
  opacity: 0.34;
}

/* the outsized word behind everything — pure texture, never read aloud */
.amast__ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.3em;
  z-index: 0;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(7rem, 23vw, 19rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: rgba(255, 250, 242, 0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px #000) {
  .amast__ghost {
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(255, 250, 242, 0.075);
  }
}

.amast__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(1.8rem, 4vw, 4.2rem);
  align-items: end;
}
.amast__lead {
  color: #a99c8e;
  max-width: 54ch;
  margin-top: clamp(0.9rem, 1.7vw, 1.25rem);
}
.amast__legal {
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.4);
}

/* ---------- the record card ---------- */
.arec {
  background: rgba(255, 250, 242, 0.055);
  border-radius: 24px;
  padding: clamp(1.2rem, 2.2vw, 1.75rem);
}
.arec__t {
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.arec dl {
  margin-top: clamp(0.8rem, 1.6vw, 1.15rem);
}
.arec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.66rem 0;
}
/* a rule that fades out rather than a border that stops dead */
.arec__row + .arec__row {
  background-image: linear-gradient(
    90deg,
    rgba(255, 250, 242, 0.16),
    rgba(255, 250, 242, 0)
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.arec dt {
  font-size: 0.88rem;
  color: rgba(255, 250, 242, 0.5);
}
.arec dd {
  margin: 0;
  font-family: var(--font-d);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--cream);
  text-align: right;
}
.arec dd em {
  display: block;
  font-style: normal;
  font-family: var(--font-t);
  font-size: 0.81rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 250, 242, 0.42);
  margin-top: 0.12rem;
}

@media (max-width: 900px) {
  .amast__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 4vw, 2.2rem);
  }
  .amast h1 {
    max-width: none;
  }
  .amast__ghost {
    font-size: clamp(5.5rem, 30vw, 11rem);
    bottom: -0.24em;
  }
}

/* ==========================================================================
   02 · THE FOUNDER
   A tall portrait plate with the name block hung off its bottom edge, and a
   service record beside it. The overlap is the whole device — nothing on the
   home page overlaps like this.
   ========================================================================== */
.fdr__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.8rem, 4.4vw, 4.4rem);
  align-items: start;
}
.fdr__plate {
  position: sticky;
  top: calc(var(--nav-h) + 1.4rem);
  align-self: start;
}
.fdr__shot {
  position: relative;
  aspect-ratio: 5 / 6;
  max-height: calc(100vh - var(--nav-h) - 10rem);
  max-height: calc(100svh - var(--nav-h) - 10rem);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand-deep);
}
.fdr__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.fdr__shot::after {
  content: "";
  position: absolute;
  inset: 42% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, 0.42));
  pointer-events: none;
}
.fdr__name {
  position: relative;
  z-index: 2;
  width: min(100%, 18rem);
  margin: -3.1rem 0 0 auto;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.45rem);
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 30px 56px -30px rgba(22, 18, 15, 0.62);
}
.fdr__name b {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.fdr__name span {
  display: block;
  margin-top: 0.42rem;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.fdr__name em {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 250, 242, 0.6);
}

.fdr__body > p {
  max-width: 62ch;
}
.fdr__body > h2 {
  margin-top: clamp(0.8rem, 1.6vw, 1.15rem);
  max-width: 20ch;
}
.fdr__body > .lead {
  margin-top: clamp(0.9rem, 1.6vw, 1.2rem);
}

/* ---------- service record ---------- */
.srec {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.srec__t {
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.5rem;
}
.srec__row {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: clamp(0.7rem, 2vw, 1.6rem);
  padding: 0.92rem 0;
}
.srec__row + .srec__row {
  background-image: linear-gradient(
    90deg,
    rgba(22, 18, 15, 0.17),
    rgba(22, 18, 15, 0) 78%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.srec__when {
  font-family: var(--font-d);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: var(--clay);
  padding-top: 0.2rem;
}
.srec__what b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
}
.srec__what span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--txt-mute);
}

@media (max-width: 940px) {
  .fdr__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 5vw, 2.6rem);
  }
  /* one column: there is no second column to scroll past, so pinning the
     photograph here would just park it over the text */
  .fdr__plate {
    position: static;
    max-width: 26rem;
  }
  .fdr__shot {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
}
@media (max-width: 620px) {
  .fdr__name {
    width: min(100%, 19rem);
    margin-top: -2.4rem;
  }
  .srec__row {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }
  .srec__when {
    padding-top: 0;
  }
}

/* ==========================================================================
   03 · THE DOSSIER
   What the office is actually accountable for. Numbered rows that fill with
   tone on hover — a spec sheet, not a card grid.
   ========================================================================== */
.dsr {
  display: grid;
  gap: 0.2rem;
}
.dsr__row {
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(0.8rem, 2.4vw, 2.2rem);
  align-items: start;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(0.9rem, 1.8vw, 1.4rem);
  border-radius: 20px;
  transition:
    background 0.45s var(--e),
    transform 0.45s var(--e);
}
.dsr__row:hover {
  background: var(--sand);
  transform: translateX(5px);
}
.dsr__n {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(184, 67, 28, 0.28);
}
@supports (-webkit-text-stroke: 1px #000) {
  .dsr__n {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--clay);
  }
}
.dsr__k {
  font-family: var(--font-d);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.24;
  color: var(--ink);
}
.dsr__v {
  font-size: 1.02rem;
  line-height: 1.74;
  color: var(--txt-soft);
}
.dsr__v + .dsr__v {
  margin-top: 0.5rem;
}
@media (max-width: 860px) {
  .dsr__row {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .dsr__v {
    grid-column: 2;
  }
  .dsr__row:hover {
    transform: none;
  }
}

/* ==========================================================================
   04 · OUR STORY
   Full width, two columns. The prose holds the left; the quote, the mission
   and a photograph stand together on the right so the section has weight on
   both sides instead of one centred ribbon of text.
   ========================================================================== */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
}
.story__main > p {
  font-size: clamp(1.04rem, 0.3vw + 0.98rem, 1.14rem);
  line-height: 1.8;
  color: var(--txt-soft);
}
.story__main > p + p {
  margin-top: 1.1em;
}
/* the drop cap is the only ornament the prose gets */
.story__lede::first-letter {
  float: left;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 0.07em 0.12em 0 0;
  color: var(--orange);
}
.story__note {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding-left: clamp(0.9rem, 1.8vw, 1.3rem);
  /* a rule that fades out, in place of a border */
  background-image: linear-gradient(
    180deg,
    var(--orange),
    rgba(255, 107, 44, 0)
  );
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--txt-mute);
}

.story__side {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* ---------- the quote, as a slab rather than an indent ---------- */
.story__q {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem)
    clamp(1.3rem, 2.4vw, 1.8rem);
  border-radius: 26px;
  background: var(--ink);
  color: var(--cream);
}
.story__q::before {
  content: "\201C";
  position: absolute;
  right: 0.4rem;
  top: -0.42em;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(6rem, 11vw, 9rem);
  line-height: 1;
  color: var(--orange);
  opacity: 0.22;
  pointer-events: none;
}
.story__q p {
  position: relative;
  font-family: var(--font-d);
  font-size: clamp(1.14rem, 1.7vw, 1.42rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.34;
  color: var(--cream);
  text-wrap: balance;
}
.story__q cite {
  position: relative;
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-2);
}

/* ---------- the photograph that closes the column ---------- */
.story__shot {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand-deep);
}
.story__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--e);
}
.story__shot:hover img {
  transform: scale(1.05);
}

/* ---------- the mission, stated plainly ---------- */
.amission {
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 2.6vw, 1.9rem);
  border-radius: 26px;
  background: var(--cream);
}
.sec--cream .amission {
  background: var(--sand);
}
.amission__t {
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}
.amission p {
  margin-top: 0.8rem;
  font-family: var(--font-d);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.42;
  color: var(--ink);
}

@media (max-width: 960px) {
  .story {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 4vw, 2.4rem);
  }
  .story__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .story__q {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .story__side {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   05 · THE FIGURES
   Why the Bronx. Big numerals, and the comparison figure carried in a pill
   underneath so the reader never has to take the number on trust.
   ========================================================================== */
.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.3rem, 3vw, 2.6rem);
}
.fig__n {
  font-family: var(--font-d);
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.92;
  color: var(--cream);
}
.fig__n sup {
  font-size: 0.42em;
  font-weight: 600;
  margin-left: 0.06em;
  color: var(--orange);
}
.fig__l {
  margin-top: 0.7rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #cfd9db;
  max-width: 26ch;
}
.fig__note {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 107, 44, 0.15);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--orange-2);
}
.figs__src {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-size: 0.88rem;
  color: rgba(223, 232, 234, 0.5);
  max-width: 74ch;
}
@media (max-width: 900px) {
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .figs {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   06 · CAPABILITIES
   Three tonal slabs. Related to the home page's panels only in colour — the
   shape, the numbering and the hover all differ.
   ========================================================================== */
.caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
.cap {
  position: relative;
  overflow: hidden;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: 24px;
  /* on the default sand section the slab lifts to cream … */
  background: var(--cream);
  transition:
    transform 0.5s var(--e),
    background 0.5s var(--e);
}
/* … and on a cream section it drops to sand, so it is never the same tone as
   the ground it sits on */
.sec--cream .cap {
  background: var(--sand);
}
.sec--sand2 .cap {
  background: var(--cream);
}
.cap:hover {
  transform: translateY(-5px);
  background: var(--sand-deep);
}
.sec--cream .cap:hover {
  background: var(--sand-deep);
}
/* a corner wedge that grows on hover — cheap depth, no border */
.cap::after {
  content: "";
  position: absolute;
  right: -3.2rem;
  top: -3.2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: rgba(255, 107, 44, 0.12);
  transform: scale(0.55);
  transition: transform 0.6s var(--e);
}
.cap:hover::after {
  transform: scale(1);
}
.cap__n {
  position: relative;
  font-family: var(--font-d);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--clay);
}
.cap h3 {
  position: relative;
  margin-top: 0.75rem;
  max-width: 18ch;
}
.cap p {
  position: relative;
  margin-top: 0.7rem;
  font-size: 1.01rem;
  line-height: 1.72;
  color: var(--txt-soft);
}
@media (max-width: 860px) {
  .caps {
    grid-template-columns: 1fr;
  }
  .cap h3 {
    max-width: none;
  }
}

/* ==========================================================================
   07 · SELECTION RIBBON
   Four steps read left to right along a fading orange thread. The programmes
   page runs its process vertically, so this one runs across.
   ========================================================================== */
.rib {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
}
.rib::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  top: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--orange),
    rgba(255, 107, 44, 0.5) 62%,
    rgba(255, 107, 44, 0.12)
  );
}
.rib__i {
  position: relative;
}
.rib__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-d);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rib h3 {
  margin-top: 1rem;
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
  letter-spacing: -0.024em;
  line-height: 1.28;
}
.rib p {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--txt-soft);
}
@media (max-width: 900px) {
  .rib {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.4rem;
  }
  .rib::before {
    display: none;
  }
}
@media (max-width: 560px) {
  .rib {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   08 · THE ARCHIVE
   Milestones as a records index: the year set large in the left column, the
   row filling with tone as the reader moves down it.
   ========================================================================== */
.arch__row {
  display: grid;
  grid-template-columns: clamp(4.6rem, 9vw, 8rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.1rem, 2vw, 1.55rem) clamp(0.8rem, 1.6vw, 1.25rem);
  border-radius: 20px;
  transition:
    background 0.45s var(--e),
    transform 0.45s var(--e);
}
.arch__row + .arch__row {
  background-image: linear-gradient(
    90deg,
    rgba(22, 18, 15, 0.15),
    rgba(22, 18, 15, 0) 82%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.arch__row:hover {
  background-color: var(--cream);
  background-image: none;
  transform: translateX(5px);
}
.sec--cream .arch__row:hover {
  background-color: var(--sand);
}
.arch__y {
  font-family: var(--font-d);
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--ink);
  transition: color 0.45s var(--e);
}
.arch__row:hover .arch__y {
  color: var(--clay);
}
.arch h3 {
  font-size: clamp(1.14rem, 1.45vw, 1.32rem);
  letter-spacing: -0.026em;
  line-height: 1.28;
}
/* the entry runs the full width of the row - no measure cap */
.arch p {
  margin-top: 0.55rem;
  font-size: 1.02rem;
  line-height: 1.74;
  color: var(--txt-soft);
  max-width: none;
}
@media (max-width: 620px) {
  .arch__row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .arch__row:hover {
    transform: none;
  }
}

/* ==========================================================================
   09 · CREDENTIAL WALL
   Where the staff were trained. Tonal tiles on near-black, no logos — the
   institutions carry themselves.
   ========================================================================== */
.cwall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}
.cwall__i {
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  border-radius: 20px;
  background: rgba(255, 250, 242, 0.05);
  transition: background 0.45s var(--e);
}
.cwall__i:hover {
  background: rgba(255, 250, 242, 0.095);
}
.cwall__i b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.32;
  color: var(--cream);
}
.cwall__i span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.68;
  color: rgba(222, 213, 201, 0.62);
}
.ccert {
  margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}
.ccert__k {
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.ccert__v {
  font-size: 1rem;
  color: rgba(222, 213, 201, 0.82);
}
@media (max-width: 860px) {
  .cwall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cwall {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10 · GOVERNANCE
   The wider team, the board, and the screening statement that belongs on
   every page about a youth organisation.
   ========================================================================== */
.gov {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.gcard {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 24px;
  background: var(--cream);
}
.sec--cream .gcard {
  background: var(--sand);
}
.gcard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.gcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--e);
}
.gcard:hover .gcard__media img {
  transform: scale(1.05);
}
.gcard__body {
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
}
.gcard__tag {
  display: inline-block;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 107, 44, 0.14);
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.gcard h3 {
  margin-top: 0.8rem;
  font-size: clamp(1.14rem, 1.45vw, 1.32rem);
  letter-spacing: -0.026em;
  line-height: 1.26;
}
.gcard p {
  margin-top: 0.7rem;
  font-size: 1.01rem;
  line-height: 1.72;
  color: var(--txt-soft);
}
.gnote {
  margin-top: clamp(1.1rem, 2.2vw, 1.7rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.7rem);
  border-radius: 22px;
  background: var(--ink);
  color: rgba(222, 213, 201, 0.88);
  font-size: 0.98rem;
  line-height: 1.74;
}
.gnote b {
  color: var(--cream);
  font-family: var(--font-d);
  font-weight: 600;
}
@media (max-width: 860px) {
  .gov {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11 · AT-A-GLANCE CARD
   Sits on the CTA photograph, so it has to hold its own over an image: a
   translucent slab rather than a tinted one.
   ========================================================================== */
.abox {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-radius: 24px;
  background: rgba(255, 250, 242, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.abox h3 {
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.abox ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.abox li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 1.03rem;
  line-height: 1.65;
  color: #e2d8cc;
}
.abox li + li {
  margin-top: 0.72rem;
}
/* a drawn tick, not a bullet glyph */
.abox li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--orange-2);
  border-bottom: 2px solid var(--orange-2);
  transform: rotate(-45deg);
}

/* ==========================================================================
   REDUCED MOTION
   home.css already flattens the reveals; these are the hover transforms this
   page adds on top of them.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dsr__row:hover,
  .arch__row:hover,
  .cap:hover {
    transform: none;
  }
  .gcard:hover .gcard__media img {
    transform: none;
  }
}