/* ==========================================================================
   Falcon Metal Resources Botswana
   Design tokens, base, layout, components.
   Brand blue lives in --blue-*; swap those three values to match the logo.
   ========================================================================== */

/* ---------- Optima (licensed webfont, self-hosted) ----------
   Converted from the client's licensed TTFs to WOFF2. The italic file carries
   invalid metadata internally (usWeightClass 5, italicAngle 23853), so the
   descriptors here define its weight and style rather than the file's own values.
   font-display: swap shows the fallback immediately and swaps when the font lands,
   so text is never invisible while the font loads. */
@font-face {
  font-family: "Optima";
  src: url("../fonts/optima-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optima";
  src: url("../fonts/optima-500.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optima";
  src: url("../fonts/optima-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optima";
  src: url("../fonts/optima-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Earth: Kalahari browns, dark to light */
  --earth-950: #17100c;
  --earth-900: #211712;
  --earth-800: #34261d;
  --earth-700: #4f3a2c;
  --earth-600: #6f523f;
  --earth-500: #8e6c54;
  --earth-400: #b39580;

  /* Sand: warm neutrals for surfaces */
  --sand-300: #d9c9b7;
  --sand-200: #e9dfd3;
  --sand-100: #f3ede5;
  --sand-50: #faf7f2;
  --white: #ffffff;

  /* Oxide red, reserved for status labels */
  --brick-600: #a63d2b;
  --brick-700: #8b3122;

  /* The logo's own blue, used only for the mark itself */
  --logo-blue: #4f8fbd;

  /* Brand blue (from the FMRB logo). The only saturated colour on the site. */
  --blue-700: #16427f;
  --blue-600: #1d56a3;
  --blue-300: #8db6ea;

  /* Roles */
  --ink: #241a14;
  --ink-2: #5e4c3f;
  --line: rgba(36, 26, 20, 0.14);
  --line-strong: rgba(36, 26, 20, 0.28);
  --line-inverse: rgba(250, 247, 242, 0.16);
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --focus: var(--blue-600);

  /* Type. Optima, the client's licensed brand face, self-hosted as WOFF2. */
  --font-display: "Optima", "Optima nova", Candara, "Gill Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Optima", "Optima nova", Candara, "Gill Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Marcellus", "Times New Roman", Times, serif;
  --fs-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Space */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --section: clamp(34px, 3.4vw, 52px);
  --header-h: 84px;
  --radius: 2px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 760px) {
  :root {
    --header-h: 68px;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Base ---------- */
body {
  background: var(--sand-50);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* labels, meta and centred lines keep their own alignment */
p.eyebrow,
.card__meta,
.news-meta,
.timeline__phase,
.person__role,
.partner__role,
.download__type,
.stat__label,
.form__foot p,
.highlight__label,
.not-found p {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

.statement-band__text,
.section-head--center p,
.center p,
.timeline__text {
  text-align: center;
}

.timeline__text {
  hyphens: none;
  -webkit-hyphens: none;
}

strong {
  font-weight: 500;
}

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

.on-dark :focus-visible {
  outline-color: var(--blue-300);
}

::selection {
  background: var(--blue-600);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(760px + var(--gutter) * 2);
}

.section {
  padding-block: var(--section);
}

.section--tight {
  padding-block: calc(var(--section) * 0.6);
}

.section--sand {
  background: var(--sand-100);
}

.section--sand-2 {
  background: var(--sand-200);
}

.section--dark {
  background: var(--earth-900);
  color: var(--sand-100);
}

.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.section+.section--flush {
  padding-top: 0;
}

.statement-band+.section {
  padding-top: clamp(26px, 3vw, 48px);
}

.section-head {
  display: grid;
  gap: 16px 56px;
  align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin-bottom: clamp(22px, 2.6vw, 38px);
}

.section-head> :only-child {
  grid-column: 1 / -1;
}

.section-head p:not([class]) {
  color: var(--ink-2);
  max-width: 52ch;
}

.section-head p+p {
  margin-top: 16px;
}

.section--dark .section-head p:not([class]) {
  color: var(--sand-300);
}

.section-head--center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

/* A section head carrying only its eyebrow label. The eyebrow brings its own
   18px below it, so the usual heading-sized gap would read as a hole. */
.section-head--label {
  margin-bottom: clamp(8px, 1vw, 14px);
}

@media (max-width: 860px) {
  .section-head {
    grid-template-columns: 1fr;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.on-dark .eyebrow,
.section--dark .eyebrow {
  color: var(--blue-300);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.on-dark .lead {
  color: var(--sand-200);
}

.muted {
  color: var(--ink-2);
}

/* ---------- Icons ---------- */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn .icon {
  transition: transform 0.25s var(--ease);
}

.btn:hover {
  --btn-bg: var(--accent-hover);
  --btn-bd: var(--accent-hover);
}

.btn:hover .icon--arrow {
  transform: translateX(4px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
}

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--blue-700);
  --btn-bd: var(--white);
}

.btn--light:hover {
  --btn-bg: var(--sand-100);
  --btn-bd: var(--sand-100);
  --btn-fg: var(--blue-700);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.55);
}

.btn--ghost-light:hover {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--white);
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.85rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(4px);
}

.on-dark .link-arrow,
.section--dark .link-arrow {
  color: var(--blue-300);
}

.prose a,
.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover,
.text-link:hover {
  color: var(--accent-hover);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--ink);
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.page-offset {
  height: var(--header-h);
}

.brand {
  --mark-h: 46px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  line-height: 1;
  color: inherit;
}

.brand__mark {
  flex: none;
  height: var(--mark-h);
  width: calc(var(--mark-h) * 0.6854);
  fill: currentColor;
  color: var(--logo-blue);
  transition: color 0.3s var(--ease);
}

/* Four stacked lines beside the mark, sized off the mark so the lockup keeps
   its proportions wherever it appears. */
.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: calc(var(--mark-h) * 0.225);
  line-height: 1.16;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
}

.on-dark .brand__text {
  color: var(--sand-50);
}

@media (max-width: 760px) {
  .brand {
    --mark-h: 40px;
    gap: 11px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: none;
  border: 0;
  color: inherit;
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-current>.nav__link::after {
  transform: scaleX(1);
}

.nav__link .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}

.nav__item:hover>.nav__link .icon,
.nav__item.is-open>.nav__link .icon {
  transform: rotate(180deg);
}

.nav__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px -18px rgba(23, 16, 12, 0.35);
  padding: 10px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav__item:hover>.nav__sub,
.nav__item:focus-within>.nav__sub,
.nav__item.is-open>.nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sub a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
}

.nav__sub a small {
  color: var(--ink-2);
  font-size: 0.78rem;
  white-space: nowrap;
}

.nav__sub a span {
  white-space: nowrap;
}

.nav__sub a:hover,
.nav__sub a[aria-current="page"] {
  background: var(--sand-100);
  color: var(--accent);
}

.nav__sub .nav__sub-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.nav__cta {
  margin-left: 14px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: inherit;
  opacity: 0.9;
}

.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 1080px) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* Mobile menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--sand-100);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: none;
  visibility: visible;
}

.mobile-nav__top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.mobile-nav__body {
  padding-block: 24px 48px;
  flex: 1;
}

.mobile-nav__group {
  border-bottom: 1px solid var(--line);
}

.mobile-nav__group>a,
.mobile-nav__group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.mobile-nav__group summary::-webkit-details-marker {
  display: none;
}

.mobile-nav__group summary .icon {
  transition: transform 0.2s var(--ease);
}

.mobile-nav__group details[open] summary .icon {
  transform: rotate(45deg);
}

.mobile-nav__group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
}

.mobile-nav__group ul a {
  display: block;
  padding: 9px 0;
  color: var(--ink-2);
  text-decoration: none;
}

.mobile-nav__group ul a:hover,
.mobile-nav__group ul a[aria-current="page"] {
  color: var(--accent);
}

.mobile-nav__foot {
  padding-block: 24px 40px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  color: var(--earth-600);
  font-size: var(--fs-small);
}

.mobile-nav__foot a {
  color: var(--ink);
  text-decoration: none;
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: max(560px, calc(100svh - var(--header-h)));
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--earth-900);
  margin-top: var(--header-h);
  padding-block: 48px clamp(56px, 8vw, 104px);
  overflow: hidden;
}

.hero__media,
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.hero__media video,
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 16, 12, 0.62) 0%, rgba(23, 16, 12, 0.12) 34%, rgba(23, 16, 12, 0.35) 62%, rgba(23, 16, 12, 0.9) 100%),
    linear-gradient(90deg, rgba(23, 16, 12, 0.55) 0%, rgba(23, 16, 12, 0) 70%);
}

/* Inner-page heroes carry a photograph worth seeing, so the veil lifts across the
   picture and stays only where it has to: behind the headline, bottom left. */
.page-hero::after {
  background:
    linear-gradient(180deg, rgba(23, 16, 12, 0.34) 0%, rgba(23, 16, 12, 0) 30%, rgba(23, 16, 12, 0.10) 58%, rgba(23, 16, 12, 0.62) 100%),
    linear-gradient(105deg, rgba(23, 16, 12, 0.66) 0%, rgba(23, 16, 12, 0.30) 42%, rgba(23, 16, 12, 0) 72%);
}

/* With a lighter veil the type can cross a bright patch of the photograph, so it
   carries its own shadow rather than the whole picture being darkened again. */
.page-hero h1,
.page-hero .lead,
.page-hero .crumbs,
.page-hero .eyebrow {
  text-shadow: 0 1px 16px rgba(23, 16, 12, 0.72), 0 1px 3px rgba(23, 16, 12, 0.5);
}

/* One photograph carries a token 5% veil and nothing else. With almost no help
   from the background, the type leans harder on its own shadow. */
.page-hero--clear::after {
  background: rgba(23, 16, 12, 0.05);
}

.page-hero--clear h1,
.page-hero--clear .lead,
.page-hero--clear .crumbs,
.page-hero--clear .eyebrow {
  text-shadow: 0 2px 10px rgba(23, 16, 12, 0.9), 0 1px 3px rgba(23, 16, 12, 0.85), 0 0 34px rgba(23, 16, 12, 0.6);
}

.hero__content {
  max-width: 860px;
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--white);
}

.hero h1 span {
  color: var(--blue-300);
}

.hero .lead {
  margin-top: 24px;
  max-width: 58ch;
  color: var(--sand-200);
}

.hero .btn-row {
  margin-top: 36px;
}

.hero__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero__fact {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.hero__fact b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--white);
}

.hero__fact span {
  font-size: var(--fs-small);
  color: var(--sand-300);
}

@media (max-width: 760px) {
  .hero__foot {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--earth-900);
  min-height: clamp(440px, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  margin-top: var(--header-h);
  /* The bottom pad clears the 28px angled step as well as spacing the text. */
  padding-block: 36px clamp(44px, 4.6vw, 62px);
}

.page-hero--short {
  min-height: clamp(360px, 46vh, 480px);
}

/* For a hero whose picture carries its own labels along the bottom, the copy
   moves to the top so the two never sit on top of each other. */
.page-hero--text-top {
  align-items: flex-start;
  padding-block: 34px clamp(44px, 4.6vw, 62px);
}

/* Angled step where a hero meets the section below it */
.hero,
.hero-under {
  background: var(--under, transparent);
  margin-top: var(--header-h);
}

.hero-under>.page-hero {
  margin-top: 0;
}

.hero,
.page-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 55% calc(100% - 28px), 50% 100%, 0 100%);
}

.page-hero h1 {
  color: var(--white);
  max-width: 18ch;
}

.page-hero .lead {
  margin-top: 20px;
  max-width: 60ch;
  color: var(--sand-200);
}

.page-hero .badge {
  margin-left: 12px;
  vertical-align: middle;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sand-300);
}

.crumbs li+li::before {
  content: "/";
  opacity: 0.5;
}

.crumbs a {
  color: var(--sand-100);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--blue-300);
}

.crumbs--dark li {
  color: var(--ink-2);
}

.crumbs--dark a {
  color: var(--ink);
}

.crumbs--dark a:hover {
  color: var(--accent);
}

/* ---------- Contour texture (from the client's map reference) ---------- */
.contours {
  position: relative;
  isolation: isolate;
}

.contours::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../img/contours.svg") center / cover no-repeat;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(125% 115% at 50% 50%, #000 35%, rgba(0, 0, 0, 0) 88%);
  mask-image: radial-gradient(125% 115% at 50% 50%, #000 35%, rgba(0, 0, 0, 0) 88%);
}

.contours--light::after {
  filter: invert(1);
  opacity: 0.18;
}

/* ---------- Statement band (under the hero) ---------- */
.statement-band {
  padding-block: clamp(30px, 3.6vw, 56px) 0;
}

.statement-band__text {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ---------- Commodity features (3-up) ---------- */
/* Portfolio: commodity list beside a revolving image */
.portfolio {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
}

/* Top-aligned, so the first commodity sits level with the top of the slideshow
   rather than floating against its middle. */
.portfolio__list {
  display: grid;
  gap: clamp(18px, 1.8vw, 26px);
  align-content: start;
}

.pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.pill .element {
  margin-bottom: 0;
}

.pill h3 {
  font-size: 1.12rem;
  margin: 6px 0 6px;
}

.pill h3 a {
  text-decoration: none;
}

.pill h3 a:hover {
  color: var(--accent);
}

.pill p:not([class]) {
  color: var(--ink-2);
  font-size: 0.95rem;
}

.portfolio .btn-row {
  margin-top: 4px;
}

.slideshow {
  margin: 0;
  display: grid;
}

.slideshow__frame {
  position: relative;
  overflow: hidden;
  background: var(--sand-200);
  min-height: clamp(300px, 30vw, 520px);
}

.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.slideshow__img.is-active {
  opacity: 1;
}

.slideshow {
  position: relative;
}

.slideshow__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  padding: 0;
  background: rgba(250, 247, 242, 0.88);
  color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(23, 16, 12, 0.6);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.slideshow__nav:hover {
  background: var(--white);
}

.slideshow__nav:active {
  transform: translateY(-50%) scale(0.94);
}

.slideshow__nav .icon {
  width: 19px;
  height: 19px;
}

.slideshow__nav--prev {
  left: 14px;
}

.slideshow__nav--prev .icon {
  transform: rotate(180deg);
}

.slideshow__nav--next {
  right: 14px;
}

@media (max-width: 560px) {
  .slideshow__nav {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__img {
    transition: none;
  }
}

@media (max-width: 900px) {
  .portfolio {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .slideshow {
    order: -1;
  }

  .slideshow__frame {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.feature {
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature p:not([class]) {
  color: var(--ink-2);
}

.feature .link-arrow {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 860px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.element {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.element small {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.8;
}

.element--sm {
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  margin: 0;
}

.element--sm small {
  top: 3px;
  left: 5px;
  font-size: 0.5rem;
}

/* ---------- Split (image + copy) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}

.split--reverse {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.split--reverse .split__media {
  order: 2;
}

.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split__copy>h2 {
  margin-bottom: 28px;
}

.split__copy .lead {
  margin-bottom: 20px;
}

.split__copy p+p {
  margin-top: 16px;
}

.split__copy .btn-row,
.split__copy .link-arrow {
  margin-top: 32px;
}

@media (max-width: 900px) {

  .split,
  .split--reverse,
  .split--even {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--reverse .split__media {
    order: 0;
  }
}

.sticky {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

@media (max-width: 900px) {

  .sticky,
  .doc-group>div:first-child {
    position: static;
  }
}

.points {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  column-gap: clamp(22px, 2.6vw, 48px);
}

.points>div {
  padding-block: 20px;
  border-top: 1px solid var(--line);
}

.points:not([style])>div:last-child {
  border-bottom: 1px solid var(--line);
}

@media (max-width: 860px) {
  .points {
    grid-template-columns: 1fr;
  }
}

.points h3 {
  margin-bottom: 8px;
}

.points p {
  color: var(--ink-2);
}

/* Figures with zoom */
.figure {
  position: relative;
}

.figure__frame {
  position: relative;
  overflow: hidden;
  background: var(--sand-200);
  aspect-ratio: var(--ratio, 4 / 3);
}

.figure__frame img,
.figure__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.figure a:hover .figure__frame img {
  transform: scale(1.03);
}

.figure figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-2);
}

/* Technical plates: maps, sections and geophysics. Shown whole, because cropping
   one cuts off its legend or scale bar. */
.figure--plate .figure__frame {
  background: var(--white);
  border: 1px solid var(--line);
}

.figure--plate .figure__frame img {
  object-fit: contain;
}

.figure--plate a:hover .figure__frame img {
  transform: none;
}

/* Gallery filter. Borrows the card's border and the eyebrow's lettering so the
   row reads as part of the page rather than a control panel bolted on top. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.chip__n {
  font-size: 0.82em;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.gallery__empty {
  color: var(--ink-2);
}

/* Revealed by the script once it has counted what is left. */
.gallery__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 2.8vw, 38px);
}

.gallery__more-n {
  color: var(--ink-2);
  font-weight: 400;
}

.btn--ghost:hover .gallery__more-n {
  color: inherit;
}

.gallery .figure[hidden] {
  display: none;
}

/* Logo chip over a figure: marks a neighbouring operation on a location map.
   Sized from the frame, so it stays proportional at every breakpoint. */
.figure__stamp {
  position: absolute;
  left: 3.2%;
  bottom: 3.2%;
  z-index: 2;
  width: clamp(72px, 17%, 168px);
  padding: 2.6% 3%;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 6px 18px -10px rgba(23, 16, 12, 0.55);
  display: flex;
  pointer-events: none;
}

.figure__stamp img {
  width: 100%;
  height: auto;
  display: block;
}

.zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(250, 247, 242, 0.92);
  color: var(--ink);
  border-radius: 50%;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

a:hover>.figure__frame .zoom,
a:focus-visible>.figure__frame .zoom {
  background: var(--accent);
  color: var(--white);
}

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.92);
  color: var(--accent);
}

.play .icon {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.stat {
  padding-top: 22px;
  border-top: 1px solid var(--line-inverse);
  position: relative;
}

.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--blue-300);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.stat__value small {
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--sand-300);
}

.stat__label {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--sand-300);
  max-width: 26ch;
}

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* ---------- Badges & tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--earth-600);
  background: transparent;
}

.badge--blue {
  color: var(--accent);
}

.badge--solid {
  background: var(--sand-50);
  color: var(--earth-700);
  border-color: var(--sand-50);
}

.badge--listed {
  background: var(--brick-600);
  color: var(--white);
  border-color: var(--brick-600);
}

.page-hero .badge {
  color: var(--sand-100);
  border-color: rgba(255, 255, 255, 0.5);
}

.page-hero .badge--listed {
  background: var(--brick-600);
  color: var(--white);
  border-color: var(--brick-600);
}

/* ---------- Project cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}

.cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .cards,
  .cards--2 {
    grid-template-columns: 1fr;
  }
}

/* Four across, so the active row and the listed row each hold four */
.cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}

/* A project awaiting its details carries the same plate as one awaiting its
   photography, so it sits in the grid like any other card. */
@media (max-width: 1200px) {
  .cards--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cards--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 24px 48px -32px rgba(23, 16, 12, 0.45);
  transform: translateY(-3px);
}

.card--static:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

/* Listed projects read as archive material: greyscale, and they stay that way */
.card--static .card__media img {
  filter: grayscale(1);
}

/* The same treatment everywhere else a listed asset appears: the project rows on
   the projects page, listed news cards, and the listed projects' own pages. */
.project-row--static .project-row__media img,
.news-card--static .news-card__media img,
.listed-page .project-row__media img,
.listed-page .page-hero__media img,
.listed-page .news-card__media img,
.listed-page .figure img,
.listed-page figure img {
  filter: grayscale(1);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-200);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__media .badge,
.news-card__media .badge,
.project-row__media .badge {
  position: absolute;
  top: 14px;
  left: 14px;
}

.card__media .badge--listed,
.news-card__media .badge--listed,
.project-row__media .badge--listed {
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  padding: 11px 16px;
  border-radius: 0;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  background: rgba(166, 61, 43, 0.93);
  border: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px -18px rgba(23, 16, 12, 0.7);
}

.card__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__meta .sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sand-300);
}

.card__meta .alt {
  color: var(--ink-2);
}

.card h3 a {
  text-decoration: none;
}

.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card p:not([class]) {
  color: var(--ink-2);
  font-size: 0.97rem;
}

.card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.card__facts b {
  color: var(--ink);
  font-weight: 500;
}

.card .link-arrow {
  margin-top: auto;
  padding-top: 6px;
}

/* Wide project rows (projects overview) */
.project-rows {
  display: grid;
  gap: clamp(28px, 3.2vw, 46px);
}

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: stretch;
}

.project-row:nth-child(even) .project-row__media {
  order: 2;
}

.project-row__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sand-200);
  min-height: clamp(240px, 22vw, 360px);
}

.project-row>div:not(.project-row__media) {
  align-self: center;
}

.project-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.project-row__media:hover img {
  transform: scale(1.03);
}

.project-row h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  margin: 6px 0 16px;
}

.band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-row .lead {
  color: var(--ink-2);
}

.project-row p+p,
.project-row .lead p+p {
  margin-top: 16px;
}

.project-row .facts {
  margin-top: 22px;
}

.project-row .steps {
  margin-top: 4px;
}

.project-row .steps li {
  padding: 13px 0;
}

.points--stack {
  display: grid;
  grid-template-columns: 1fr;
}

.points--stack>div:last-child {
  border-bottom: 1px solid var(--line);
}

.project-row p:not([class]) {
  color: var(--ink-2);
}

.project-row .facts {
  margin-top: 20px;
}

.project-row .btn-row {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .project-row {
    grid-template-columns: 1fr;
  }

  .project-row:nth-child(even) .project-row__media {
    order: 0;
  }

  .project-row__media {
    aspect-ratio: 5 / 4;
    min-height: 0;
  }
}

/* ---------- Facts / snapshot ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
}

.facts>div {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.facts dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.facts dd {
  margin-top: 4px;
  font-weight: 500;
}

.facts--single {
  grid-template-columns: 1fr;
}

.snapshot {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: clamp(24px, 3vw, 40px);
}

.snapshot .eyebrow {
  margin-bottom: 12px;
}

.snapshot .facts>div:first-child,
.snapshot .facts>div:nth-child(2) {
  border-top: 0;
}

@media (max-width: 520px) {
  .facts {
    grid-template-columns: 1fr;
  }

  .snapshot .facts>div:nth-child(2) {
    border-top: 1px solid var(--line);
  }
}

/* ---------- Numbered items ---------- */
.numbered {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  counter-reset: n;
}

.numbered>li {
  counter-increment: n;
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
}

.numbered>li::before {
  content: counter(n, decimal-leading-zero);
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.numbered h3 {
  margin-bottom: 10px;
}

.numbered p {
  color: var(--ink-2);
}

.section--dark .numbered>li {
  border-top-color: var(--line-inverse);
}

.section--dark .numbered>li::before {
  color: var(--blue-300);
}

.section--dark .numbered p {
  color: var(--sand-300);
}

@media (max-width: 900px) {
  .numbered {
    grid-template-columns: 1fr;
  }
}

/* ---------- Timeline (exploration milestones, Kaoko-style axis) ---------- */
.timeline {
  --tl-label: 18px;
  /* phase caption row  */
  --tl-stem: 22px;
  /* caption-to-axis tick */
  --tl-dot: 13px;
  /* node on the axis   */
  --tl-bg: var(--sand-50);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--tl-label) + var(--tl-stem) + var(--tl-dot) / 2);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 9%, var(--line-strong) 91%, transparent);
}

.timeline__item {
  display: grid;
  justify-items: center;
  text-align: center;
  grid-template-rows: var(--tl-label) var(--tl-stem) var(--tl-dot) auto auto;
  padding-inline: clamp(8px, 1.4vw, 22px);
}

.timeline__phase {
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--tl-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.timeline__stem {
  grid-row: 2;
  width: 1px;
  height: 100%;
  background: var(--line-strong);
}

.timeline__dot {
  grid-row: 3;
  align-self: center;
  position: relative;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--tl-bg);
  border: 1.5px solid var(--accent);
}

.section--sand .timeline {
  --tl-bg: var(--sand-100);
}

.section--sand-2 .timeline {
  --tl-bg: var(--sand-200);
}

.timeline__dot--active {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(29, 86, 163, 0.12);
}

.timeline__title {
  grid-row: 4;
  font-size: 1.05rem;
  margin: 22px 0 8px;
}

.timeline__text {
  grid-row: 5;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 30ch;
}

@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .timeline {
      grid-template-rows: var(--tl-label) var(--tl-stem) var(--tl-dot) auto auto;
    }

    .timeline__item {
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
  }
}

@media (max-width: 900px) {
  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: calc(var(--tl-dot) / 2);
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--line-strong) 85%, transparent);
  }

  .timeline__item {
    grid-template-columns: var(--tl-dot) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: start;
    text-align: left;
    column-gap: 20px;
    padding: 0 0 26px;
  }

  .timeline__item:last-child {
    padding-bottom: 0;
  }

  .timeline__phase {
    grid-area: 1 / 2;
    margin-bottom: 6px;
  }

  .timeline__stem {
    display: none;
  }

  .timeline__dot {
    grid-area: 1 / 1;
    align-self: start;
    margin-top: 3px;
  }

  .timeline__title {
    grid-column: 2;
    margin: 0 0 6px;
  }

  .timeline__text {
    grid-column: 2;
    text-align: left;
    max-width: 52ch;
  }
}

/* Vertical steps (project next steps) */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: s;
}

.steps--split {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  column-gap: clamp(22px, 2.6vw, 48px);
}

.steps--split li:last-child {
  border-bottom: 0;
}

@media (max-width: 1000px) {
  .steps--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .steps--split {
    grid-template-columns: 1fr;
  }
}

.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.steps li:last-child {
  border-bottom: 1px solid var(--line);
}

.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--accent);
}

/* Bullets */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ticks li .icon {
  width: 20px;
  height: 20px;
  margin-top: 0.12em;
  color: var(--accent);
}

.section--dark .ticks li .icon {
  color: var(--blue-300);
}

/* Highlight figures */
.highlights {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.highlight {
  background: var(--white);
  padding: clamp(22px, 2.6vw, 32px);
}

.metric-icon {
  display: block;
  color: var(--accent);
  margin-bottom: 14px;
}

.metric-icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.4;
}

.stat .metric-icon {
  color: var(--blue-300);
  margin-bottom: 16px;
}

.highlight__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.highlight__label {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .highlights {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--white);
}

.table {
  font-size: 0.97rem;
  min-width: 560px;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--sand-100);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--sand-50);
}

.table td:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  white-space: nowrap;
}

.table a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.table a:hover {
  text-decoration: underline;
}

/* ---------- Team ---------- */
.team-group+.team-group {
  margin-top: clamp(34px, 4vw, 56px);
}

.team-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--earth-600);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Five across is the point of this row, so the column gap tightens as the
   viewport narrows rather than the grid dropping to four. */
.team {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px) clamp(10px, 1.5vw, 26px);
}

/* Keep photo, role, name and bio on the same baselines right across a row. */
@supports (grid-template-rows: subgrid) {
  .team {
    grid-template-rows: auto auto auto auto;
    grid-auto-rows: auto;
  }

  .person {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }

  .person__photo {
    grid-row: 1;
  }

  .person__role {
    grid-row: 2;
    align-self: end;
  }

  .person h4 {
    grid-row: 3;
    align-self: end;
  }

  .person p:not([class]) {
    grid-row: 4;
  }
}

.person__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand-200);
  margin-bottom: 16px;
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.45s var(--ease);
}

.person:hover .person__photo img,
.person:focus-within .person__photo img {
  filter: grayscale(0) contrast(1);
}

@media (hover: none) {
  .person__photo img {
    filter: none;
  }
}

.person__photo--tba {
  display: grid;
  place-items: center;
  background: var(--sand-200);
}

.person__mark {
  width: 34%;
  height: auto;
  aspect-ratio: 0.6854;
  fill: currentColor;
  color: var(--earth-600);
  opacity: 0.16;
}

.person--tba .person__role {
  color: var(--earth-600);
}

.person__role {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.person h4 {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.78rem + 0.3vw, 1.02rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 8px;
}

.person p:not([class]) {
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* Below this the cards are too narrow for a name to sit on two lines. */
@media (max-width: 940px) {
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .person__photo {
    margin-bottom: 12px;
  }

  .person h4 {
    font-size: 0.98rem;
  }

  .person p:not([class]) {
    font-size: 0.85rem;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
}

@media (max-width: 380px) {
  .team {
    grid-template-columns: 1fr;
  }
}

.partners {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.partner {
  background: var(--white);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.partner__logo {
  --logo-h: 124px;
  height: var(--logo-h);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* width:100% made a wide wordmark fill the cell while square marks sat small.
   Sizing by height instead, with a cap, puts every logo on the same footing. */
.partner__logo--tba {
  display: grid;
  place-items: center;
}

.partner__logo--tba span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--earth-600);
  opacity: 0.55;
}

.partner__logo img {
  width: auto;
  max-width: 82%;
  height: var(--logo-h);
  object-fit: contain;
}

.partner__role {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.partner h3 {
  font-size: 1.05rem;
  margin-top: 4px;
}

/* Sits inside the text block, not as a flex child, so it adds no column gap. */
.partner__site {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.partner__site:hover,
.partner__site:focus-visible {
  text-decoration: underline;
}

@media (max-width: 1080px) {
  .partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .partners {
    grid-template-columns: 1fr;
  }
}

/* ---------- News ---------- */
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand-200);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.news-card:hover .news-card__media img {
  transform: scale(1.04);
}

/* ASX Listed assets stay greyscale and completely still. This block sits after every
   hover rule above on purpose, so the zooms it cancels cannot win on source order. */
.card--static:hover .card__media img,
.project-row--static .project-row__media:hover img,
.news-card--static:hover .news-card__media img,
.listed-page .project-row__media:hover img,
.listed-page .news-card:hover .news-card__media img,
.listed-page .figure a:hover .figure__frame img {
  transform: none;
}

.news-card time,
.news-meta {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-card h3 a {
  text-decoration: none;
}

.news-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card h3 a:hover {
  color: var(--accent);
}

.news-card p:not([class]) {
  color: var(--ink-2);
  font-size: 0.96rem;
}

.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  position: relative;
  padding-bottom: clamp(34px, 4.2vw, 60px);
  margin-bottom: clamp(34px, 4.2vw, 60px);
  border-bottom: 1px solid var(--line);
}

.news-feature .news-card__media {
  aspect-ratio: 16 / 10;
}

.news-feature h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  margin: 12px 0 16px;
}

.news-feature h2 a {
  text-decoration: none;
}

.news-feature h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-feature p:not([class]) {
  color: var(--ink-2);
}

.news-feature .link-arrow {
  margin-top: 24px;
}

.news-feature--solo {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 900px) {
  .news-feature {
    grid-template-columns: 1fr;
  }
}

/* Article */
.article-head {
  padding-top: calc(var(--header-h) + clamp(34px, 4vw, 60px));
  padding-bottom: clamp(26px, 3vw, 44px);
}

.article-head h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem);
  margin-top: 16px;
}

.article-head .byline {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.article-lead {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

/* The lead sizes to its own proportions and centres, so a portrait photo sits
   straight on the page background instead of in a letterboxed panel. */
.article-lead img {
  display: block;
  width: auto;
  margin-inline: auto;
  max-width: 100%;
  max-height: 72vh;
}

.prose {
  font-size: 1.08rem;
  line-height: 1.75;
}

.prose>*+* {
  margin-top: 1.1em;
}

.prose h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  margin-top: 2em;
}

.prose h3 {
  font-size: 1.15rem;
  margin-top: 1.6em;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li+li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--accent);
}

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
}

.prose .note {
  background: var(--sand-100);
  border-left: 2px solid var(--earth-500);
  padding: 18px 22px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

.prose .table-wrap {
  margin-top: 1.6em;
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: clamp(34px, 4vw, 54px);
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

.pager a span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.pager a strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
}

.pager a:hover strong {
  color: var(--accent);
}

.pager__next {
  text-align: right;
  align-items: flex-end;
  grid-column: 2;
}

@media (max-width: 600px) {
  .pager {
    grid-template-columns: 1fr;
  }

  .pager__next {
    grid-column: auto;
    text-align: left;
    align-items: flex-start;
  }
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}

.gallery--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery .figure__frame {
  --ratio: 4 / 3;
}

.gallery a {
  display: block;
}

@media (max-width: 900px) {

  .gallery,
  .gallery--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {

  .gallery,
  .gallery--4 {
    grid-template-columns: 1fr;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(23, 16, 12, 0.96);
  color: var(--sand-100);
}

.lightbox.is-open {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gutter);
  font-size: var(--fs-small);
  color: var(--sand-300);
}

/* Flex, not grid: a centred grid item is sized by its own content, so a tall
   photo grew the row and blew past the viewport instead of fitting inside it. */
.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

.lightbox__caption {
  padding: 16px var(--gutter) 24px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--sand-300);
  min-height: 1.6em;
}

.lightbox button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-inverse);
  color: var(--white);
  border-radius: 50%;
}

.lightbox button:hover {
  background: var(--white);
  color: var(--ink);
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: var(--gutter);
}

.lightbox__next {
  right: var(--gutter);
}

.lightbox__prev .icon {
  transform: rotate(180deg);
}

@media (max-width: 700px) {

  /* Keep the controls inside the stage so they never sit off-screen */
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 10px;
    transform: none;
    width: 44px;
    height: 44px;
    background: rgba(23, 16, 12, 0.55);
  }

  .lightbox__prev {
    left: 10px;
  }

  .lightbox__next {
    right: 10px;
  }

  .lightbox__stage {
    padding-inline: 8px;
  }
}

/* ---------- Downloads ---------- */
.downloads {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.download--wide {
  grid-column: span var(--span, 1);
}

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

  .download--wide {
    grid-column: auto;
  }
}

.download {
  position: relative;
  background: var(--white);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: center;
  transition: background-color 0.2s var(--ease);
}

.download:hover {
  background: var(--sand-50);
}

.download__type {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.download h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  grid-column: 1;
}

.download h3 a {
  text-decoration: none;
}

.download h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.download__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  transition: all 0.2s var(--ease);
}

.download:hover .download__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

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

.doc-groups {
  display: grid;
  gap: clamp(30px, 3.6vw, 48px);
}

.doc-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(24px, 5vw, 80px);
}

.doc-group>div:first-child {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  align-self: start;
}

.doc-group h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
}

.doc-group>div:first-child p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.96rem;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line-strong);
}

.doc-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.doc-list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 56px);
  border-top: 0;
}

.doc-list--split li:first-child,
.doc-list--split li:nth-child(2) {
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 760px) {
  .doc-list--split {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-strong);
  }

  .doc-list--split li:nth-child(2) {
    border-top: 0;
  }
}

.doc-list li span {
  font-weight: 500;
}

.doc-list li small {
  display: block;
  color: var(--ink-2);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: 2px;
}

.doc-list a {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.doc-list a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .doc-group {
    grid-template-columns: 1fr;
  }
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--blue-700);
  color: var(--white);
  padding-block: clamp(40px, 4.2vw, 62px);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 140% at 100% 0%, rgba(141, 182, 234, 0.22), transparent 60%);
}

.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px 80px;
  align-items: end;
}

.cta h2 {
  color: var(--white);
}

.cta p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
}

.cta .eyebrow {
  color: var(--blue-300);
}

.cta .btn-row {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .cta__inner {
    grid-template-columns: 1fr;
  }

  .cta .btn-row {
    justify-content: flex-start;
  }
}

/* Statement band */
.statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

.statement em {
  font-style: normal;
  color: var(--accent);
}

.section--dark .statement em {
  color: var(--blue-300);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-list>div {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 16px;
}

.contact-list>div:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-list dt {
  grid-row: span 2;
  color: var(--accent);
  padding-top: 3px;
}

.contact-list dt span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
}

.contact-list dd {
  margin: 0;
}

.contact-list dd .label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: 4px;
}

.contact-list a {
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--accent);
}

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form h2 {
  grid-column: 1 / -1;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.field label .opt {
  color: var(--ink-2);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--sand-50);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-2);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(29, 86, 163, 0.18);
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}

.form__foot p {
  font-size: var(--fs-small);
  color: var(--ink-2);
  max-width: 40ch;
}

.form__status {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: var(--sand-100);
  font-size: 0.95rem;
}

.form__status[hidden] {
  display: none;
}

.form__status--error {
  border-left-color: #a23b2a;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */
/* Light footer: a deeper shade of the header's sand */
.site-footer {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sand-200) 0%, var(--sand-300) 62%, #cfbda8 100%);
  color: var(--ink-2);
  font-size: 0.95rem;
  padding-top: clamp(40px, 4.4vw, 64px);
  box-shadow: inset 0 1px 0 rgba(36, 26, 20, 0.10);
}

.site-footer::after {
  background-position: center bottom;
  opacity: 0.14;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 34px 40px;
  padding-bottom: clamp(30px, 3.6vw, 48px);
}

.footer-brand {
  border-right: 1px solid rgba(36, 26, 20, 0.14);
  padding-right: clamp(20px, 2.6vw, 44px);
}

.footer-brand .brand {
  --mark-h: 56px;
  color: var(--ink);
}

.footer-brand p {
  margin-top: 20px;
  max-width: 32ch;
  color: var(--ink-2);
  text-align: left;
  hyphens: none;
}

.footer-brand .link-arrow {
  margin-top: 18px;
  color: var(--accent);
  font-weight: 700;
}

.footer-col h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--earth-700);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.footer-col h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  line-height: 1.5;
}

/* Contact values one step heavier (Optima 500) so they read easily against the
   sand footer. The uppercase labels below already carry their own 700. */
.footer-col address {
  font-style: normal;
  display: grid;
  gap: 11px;
  line-height: 1.5;
  font-weight: 500;
}

.footer-col address span {
  display: block;
  margin-bottom: 1px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--earth-600);
}

.footer-col address a {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.footer-col address>div {
  min-width: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(36, 26, 20, 0.16);
  padding-block: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  font-size: var(--fs-small);
  color: var(--earth-700);
}

.footer-bottom p {
  margin: 0;
  text-align: left;
  hyphens: none;
}

.footer-bottom ul {
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.footer-bottom .social {
  margin: 0;
}

.social {
  display: flex;
  gap: 10px;
}

.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 26, 20, 0.24);
  color: var(--earth-700);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.social a:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

.social .icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 1000px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 6px;
  }
}

@media (max-width: 620px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom ul {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ---------- 404 ---------- */
.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
}

.not-found .code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--sand-300);
}

.not-found h1 {
  font-size: var(--fs-h2);
  margin: 12px 0 16px;
}

.not-found .btn-row {
  justify-content: center;
  margin-top: 32px;
}

/* ---------- Motion ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Utilities ---------- */
.mt-s {
  margin-top: 16px;
}

.mt-m {
  margin-top: 28px;
}

.mt-l {
  margin-top: clamp(34px, 4vw, 54px);
}

.center {
  text-align: center;
}

.max-60 {
  max-width: 60ch;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

@media print {

  .site-header,
  .mobile-nav,
  .cta,
  .site-footer,
  .lightbox {
    display: none !important;
  }

  .page-hero,
  .hero {
    min-height: 0;
    color: var(--ink);
    background: none;
    padding-top: 24px;
  }

  .page-hero::after,
  .hero::after,
  .hero__media,
  .page-hero__media {
    display: none;
  }

  .page-hero h1,
  .hero h1 {
    color: var(--ink);
  }
}