/* ==========================================================================
   Muruq Mining — main stylesheet
   Layout concept: deep-emerald bands (header, hero, CTA, footer) frame airy
   Mist content sections; sharp corners and single facet cuts echo the gem.
   Order: fonts · tokens · base · layout · header · heroes · components · footer
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see assets/fonts/OFL.txt) ------ */
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geologica-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geologica-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Brand palette (logo files, Edition 1) — the same in both themes. Every other
     colour below is one of these, or a tint of one mixed as its comment says. */
  --deep: #003627;            /* Deep Emerald — header, hero, footer */
  --emerald: #006c4d;
  --jade: #4d9882;
  --mint: #add0c6;
  --mist: #f2f8f6;
  --ink: #121e18;
  --stone: #596760;
  --gold: #d1ac5a;            /* accent, used sparingly: main buttons */
  --gold-hover: #dcc183;      /* Gold 75% on white */
  --on-deep: #ffffff;
  --on-deep-muted: var(--mint);
  --on-gold: var(--deep);
  --line-on-deep: rgba(173, 208, 198, 0.22);  /* Mint at 22% */

  /* theme colour (light) */
  --bg: var(--mist);
  --surface: #ffffff;
  --surface-alt: #daeae5;     /* Mint 35% on Mist */
  --fg: var(--ink);
  --fg-muted: var(--stone);
  --heading: var(--deep);
  --accent: var(--emerald);
  --accent-hover: var(--deep);
  --line: #c9e0d9;            /* Mint 60% on Mist */
  --field-line: var(--jade);  /* form field borders: 3.4:1 on white */
  --rule: var(--mint);        /* decorative lines, such as the steps timeline */
  --chip-bg: var(--mint);     /* icon tiles and tags */
  --chip-fg: var(--deep);
  --band: var(--mint);        /* .section--alt, the brand band */
  --band-card: #ffffff;
  --focus: var(--emerald);
  --error: #b3261e;
  --shadow: 0 18px 40px -24px rgba(0, 54, 39, 0.35);
  --scroll-shadow: rgba(0, 54, 39, 0.18);

  /* type */
  --font: "Geologica", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.45rem + 1.8vw, 2.875rem);
  --step-4: clamp(2.375rem, 1.6rem + 3.4vw, 4.5rem);
  --label-tracking: 0.24em;

  /* space */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --container: 75rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 5.5rem;         /* fits the logo plus its brand clear space */
  --cut: 2.75rem;             /* facet cut on photo frames and cards */
}

/* The site is always shown in the light brand colours, whatever the visitor's
   system setting. This dark theme (Ink page, Deep Emerald surfaces, Mist and
   Mint text) only applies if data-theme="dark" is set on <html>. */
:root[data-theme="dark"] {
  --bg: var(--ink);
  --surface: var(--deep);
  --surface-alt: #0c4636;     /* Jade 16% on Deep Emerald */
  --fg: var(--mist);
  --fg-muted: var(--mint);
  --heading: var(--mist);
  --accent: var(--mint);
  --accent-hover: var(--mist);
  --line: #27493d;            /* Jade 35% on Ink */
  --field-line: var(--jade);  /* 3.9:1 on Deep Emerald */
  --rule: var(--emerald);
  --chip-bg: var(--surface-alt);
  --chip-fg: var(--mint);
  --band: var(--deep);
  --band-card: var(--ink);
  --focus: var(--mint);
  --error: #f2938c;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --scroll-shadow: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

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

/* The root is padded by the safe-area insets (notches, home indicator) and
   painted Deep Emerald, so the bands above the header and below the footer
   always match them. The page itself sits on Mist via body. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--deep);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* paints the iOS status-bar band in the header colour when the page sits under it */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--deep);
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

strong { font-weight: 500; }

address { display: grid; font-style: normal; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-deep :focus-visible, .on-deep:focus-visible { --focus: var(--gold); }

::selection { background: var(--mint); color: var(--deep); }

.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;
}

.skip-link {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) - 4rem);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * 2rem);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 40em) {
  .container {
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
  }
}

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

/* The brand band: Mint in light mode, Deep Emerald in dark mode. Stone and
   Emerald text fall below AA on Mint, so the band's own text takes the
   strongest colours; cards inside it sit on white (Ink in dark mode). */
.section--alt { background: var(--band); --surface: var(--band-card); }
.section--alt .section-head__lead { color: var(--fg); }
.section--alt :is(.eyebrow, .section-link a) { color: var(--heading); }
.section--alt .photo-slot { background: var(--bg); }
.section--tight { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }

.section-head {
  display: grid;
  gap: var(--space-m);
  margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
}
@media (min-width: 56em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-xl);
  }
}
.section-head__lead { max-width: 38rem; color: var(--fg-muted); font-size: var(--step-1); line-height: 1.55; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-s);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
/* a short Jade rule leads into each label */
.eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 2px; background: var(--jade); }
.section--alt .eyebrow::before { background: currentColor; }
.on-deep .eyebrow { color: var(--on-deep-muted); } /* gold stays for actions */

.prose { max-width: 40rem; }
.prose p { color: var(--fg); }
.prose > * + * { margin-top: var(--space-s); }
.prose h2 { margin-top: var(--space-l); font-size: var(--step-2); }
.prose h3 { margin-top: var(--space-m); }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--accent); }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--fg-muted); }

/* Fixed column counts per breakpoint, so a row never ends with one card alone */
.grid { display: grid; gap: var(--space-m); }
@media (min-width: 36em) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48em) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52em) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid > *, .split > * { min-width: 0; }

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.split--top { align-items: start; }

/* Vertical rhythm for a column of text: eyebrow, heading, then body blocks */
.stack > * + * { margin-top: var(--space-m); }
.stack > .eyebrow + * { margin-top: 0; }
.stack > .steps { margin-top: var(--space-l); }
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--deep);
  color: var(--on-deep);
  border-bottom: 1px solid var(--line-on-deep);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
  flex-wrap: wrap;
}

/* Clear space above and below the logo: the height of the gem's crown,
   which is 24.01 of the logo's 293.58 width units (about 16 px). */
.brand { display: inline-flex; align-items: center; padding-block: calc(12.5rem * 24.01 / 293.58); }
.brand img { width: 12.5rem; height: auto; } /* 200 px: the brand minimum for the horizontal logo */

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--on-deep);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--mint); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.site-nav .nav-cta {
  padding: 0.6rem 1.15rem;
  border: 0;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 500;
}
.site-nav .nav-cta:hover { background: var(--gold-hover); color: var(--on-gold); }
.site-nav .nav-cta[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--deep); }

/* Light / dark switch: an icon button at the end of the menu on wide screens,
   a labelled switch row in the phone menu. It needs JavaScript, so it only
   appears once main.js can make it work. */
.site-nav__theme { display: none; }
.js .site-nav__theme { display: block; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-on-deep);
  background: transparent;
  color: var(--on-deep);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--mint); color: var(--mint); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
/* the icon shows the theme the button switches to */
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.theme-toggle__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-on-deep);
  background: transparent;
  color: var(--on-deep);
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 56.24em) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; flex-basis: 100%; padding-bottom: var(--space-m); }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav li { border-top: 1px solid var(--line-on-deep); }
  .js .site-nav a { display: block; padding-block: 0.9rem; border-bottom: 0; }
  .js .site-nav a[aria-current="page"] { color: var(--gold); }
  .js .site-nav .site-nav__cta { border-top: 0; padding-top: var(--space-s); }
  .js .site-nav .nav-cta { text-align: center; }
  .js .site-nav .site-nav__theme { margin-top: var(--space-s); }
  .js .site-nav .theme-toggle { justify-content: space-between; width: 100%; height: auto; padding-block: 0.9rem; border: 0; }
  :root.js .site-nav .theme-toggle svg { display: none; } /* outranks the dark-theme icon rule */
  .js .site-nav .theme-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  /* a square switch whose Mint knob slides across when dark mode is on */
  .js .site-nav .theme-toggle::after {
    content: "";
    flex: none;
    width: 2.75rem;
    height: 1.5rem;
    border: 1px solid var(--line-on-deep);
    background: linear-gradient(var(--mint), var(--mint)) left 0.25rem center / 0.875rem 0.875rem no-repeat;
    transition: background-position 0.18s ease, border-color 0.18s ease;
  }
  .js .site-nav .theme-toggle[aria-pressed="true"]::after { border-color: var(--mint); background-position: right 0.25rem center; }
}

/* ---------- Heroes ------------------------------------------------------- */
.on-deep { background: var(--deep); color: var(--on-deep); }
.on-deep h1, .on-deep h2, .on-deep h3 { color: var(--on-deep); }
.on-deep :where(a:not(.btn)) { color: var(--mint); }
.on-deep :where(a:not(.btn)):hover { color: var(--on-deep); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 7vw, 9rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
/* The facet field rises from the right and fades out before it reaches the text. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(64%, 62rem);
  background: url("../img/facet-field-hero.svg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
  mask-image: linear-gradient(to right, transparent, #000 45%);
  pointer-events: none;
}
.hero__content { position: relative; max-width: 44rem; }
.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-m);
  color: var(--on-deep-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

.hero__facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-m);
  margin: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-on-deep);
  max-width: 52rem;
}
.hero__facts div { min-width: 0; }
.hero__facts dt {
  color: var(--on-deep-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.hero__facts dd { margin: 0.35rem 0 0; color: var(--on-deep); font-size: var(--step-1); }

@media (max-width: 47.99em) {
  .hero::before {
    inset: 0 0 auto auto;
    width: 100%;
    height: 24rem;
    background-position: right top;
    -webkit-mask-image: linear-gradient(215deg, #000 10%, transparent 60%);
    mask-image: linear-gradient(215deg, #000 10%, transparent 60%);
  }
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.75rem, 2.8rem + 4.5vw, 6.5rem);
}
/* The faint gem sits on the right and fades out before it reaches the text. */
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../img/facet-frame.svg") right bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 70%);
  mask-image: linear-gradient(to right, transparent 30%, #000 70%);
  pointer-events: none;
}
/* Up to tablet width the text runs across the gem, so it stays softer. */
@media (max-width: 63.99em) {
  .page-hero::before {
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 55%);
    mask-image: linear-gradient(200deg, #000 10%, transparent 55%);
  }
}
.page-hero__content { position: relative; max-width: 46rem; }
.page-hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); }
.page-hero__lead { margin-top: var(--space-m); max-width: 38rem; color: var(--on-deep-muted); font-size: var(--step-1); line-height: 1.55; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform 0.18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hover); color: var(--on-gold); }
.btn--ghost { border-color: var(--line-on-deep); color: var(--on-deep); }
.btn--ghost:hover { border-color: var(--mint); color: var(--on-deep); }
.btn--primary { background: var(--accent); color: var(--surface); }
.btn--primary:hover { background: var(--accent-hover); color: var(--surface); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  text-decoration: none;
}
.text-link svg { width: 1rem; height: 1rem; transition: transform 0.18s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Pillars / features ------------------------------------------ */
.feature {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
/* Line icons sit on a Mint tile with one facet cut, like the cards. */
.feature__icon, .value__icon, .callout__icon {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  background: var(--chip-bg);
  color: var(--chip-fg);
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0 100%);
}
.feature p { color: var(--fg-muted); }

/* ---------- Process steps ------------------------------------------------
   .steps is a vertical timeline (diamond markers joined by a hairline);
   .steps--row lays it out as a single row on wide screens. */
.steps {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps > li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-left: 3rem;
}
.steps > li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--accent);
  transform: rotate(45deg);
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 0.78rem;
  top: 1.75rem;
  bottom: calc(-1 * var(--space-l) + 0.4rem);
  width: 1px;
  background: var(--rule);
}
.steps > li:last-child::after { display: none; }
.steps > li:last-child::before { background: var(--gold); } /* the last step: value delivered */
.steps__num {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--fg-muted); }
.steps ul { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--fg-muted); font-size: var(--step--1); }
.steps ul li + li { margin-top: 0.3rem; }
.steps ul li::marker { color: var(--accent); }

@media (min-width: 62em) {
  .steps--row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-m); }
  .steps--row.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--row > li { padding-left: 0; padding-top: 2.75rem; }
  .steps--row > li::before { left: 0.2rem; top: 0.2rem; }
  .steps--row > li::after { left: 1.8rem; right: calc(-1 * var(--space-m)); top: 0.65rem; bottom: auto; width: auto; height: 1px; }

  .steps--wide > li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--space-xl); }
  .steps--wide > li > :not(ul) { grid-column: 1; }
  .steps--wide > li > ul { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
}

/* ---------- Projects ----------------------------------------------------- */
.project {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--jade);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.project__tag {
  justify-self: start;
  padding: 0.3rem 0.65rem;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project dl { display: grid; gap: 0.75rem; margin: 0; }
.project dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.project dt { color: var(--fg-muted); }
.project dd { margin: 0; text-align: right; font-weight: 400; }

/* Scrolls sideways on small screens; soft shadows show there is more to see. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 3rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 3rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 0.9rem 100% no-repeat scroll,
    var(--surface);
}
.data-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.data-table caption { padding: var(--space-s) var(--space-m); text-align: left; color: var(--fg-muted); caption-side: bottom; border-top: 1px solid var(--line); }
.data-table th, .data-table td { padding: 1rem var(--space-m); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--surface-alt);
}
.data-table tbody th { font-weight: 400; color: var(--heading); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Commitments / values ---------------------------------------- */
.value {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
}
.value p { color: var(--fg-muted); }
.value ul { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); }
.value li + li { margin-top: 0.4rem; }
.value li::marker { color: var(--accent); }

/* ---------- Media placeholders & people --------------------------------- */
.photo-slot {
  display: grid;
  place-items: center;
  place-content: center;
  gap: var(--space-xs);
  aspect-ratio: 4 / 3;
  max-width: 100%;
  padding: var(--space-m);
  background: var(--surface-alt);
  color: var(--fg-muted);
  text-align: center;
  font-size: var(--step--1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.photo-slot svg { width: 2.5rem; height: 2.5rem; }
.photo-slot--square { aspect-ratio: 1; }
.photo-slot--wide { aspect-ratio: 16 / 9; }

/* Real photographs take the same facet cut as their placeholders. */
.photo {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-alt);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.photo--square { aspect-ratio: 1; }
.photo--wide { aspect-ratio: 16 / 9; }

/* Band across the full container, between a section heading and its content. */
.photo-slot--band, .photo--band {
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.75rem); /* same gap as below .section-head */
}
@media (min-width: 48em) { .photo-slot--band, .photo--band { aspect-ratio: 21 / 9; } }

.person { display: grid; gap: var(--space-xs); align-content: start; }
.person .photo-slot, .person .photo { max-width: 22rem; }
.person h3 { margin-top: var(--space-xs); }
.person__role { color: var(--accent); font-size: var(--step--1); font-weight: 400; }
.person p { color: var(--fg-muted); font-size: var(--step--1); }

/* ---------- Statements & quotes ----------------------------------------- */
.statement {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--jade);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.statement__label {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.statement__text { color: var(--heading); font-size: var(--step-2); line-height: 1.35; text-wrap: balance; }

.section-link { margin-top: var(--space-l); }

/* The symbol on plain Deep Emerald, with its clear space kept free of pattern. */
.mark-figure {
  display: grid;
  place-items: center;
  min-height: 22rem;
  padding: var(--space-xl) var(--space-l);
}
.mark-figure img { width: min(15rem, 70%); }

.callout {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface-alt);
}
.callout h2, .callout h3 { font-size: var(--step-2); font-weight: 300; }
.callout .callout__icon { background: var(--surface); }
.callout .meta-list { margin-top: var(--space-xs); }

/* Label / value pairs: contact details, registration details */
.meta-list { display: grid; gap: var(--space-m); margin: 0; }
.meta-list dt {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.meta-list dd { margin: 0.35rem 0 0; color: var(--heading); font-weight: 400; overflow-wrap: anywhere; }

.checklist { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ---------- CTA band ----------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--emerald);
  color: var(--on-deep);
}
.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(58%, 48rem);
  background: url("../img/facet-field-band.svg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 50%);
  mask-image: linear-gradient(to right, transparent, #000 50%);
  pointer-events: none;
}
.cta-band__inner { position: relative; display: grid; gap: var(--space-m); max-width: 40rem; }
.cta-band h2 { color: var(--on-deep); }
.cta-band p { color: var(--on-deep); font-size: var(--step-1); line-height: 1.55; }
.cta-band a:not(.btn) { color: var(--on-deep); }
.cta-band :focus-visible { --focus: var(--on-deep); }
.cta-band .btn { justify-self: start; }
@media (max-width: 47.99em) {
  .cta-band::before {
    width: 100%;
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(330deg, #000 5%, transparent 45%);
    mask-image: linear-gradient(330deg, #000 5%, transparent 45%);
  }
}

/* ---------- Contact ------------------------------------------------------ */
.contact-layout { display: grid; gap: var(--space-xl); }
@media (min-width: 60em) {
  .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); align-items: start; }
}

.form { display: grid; gap: var(--space-m); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label, .field legend { color: var(--heading); font-size: 0.9375rem; font-weight: 400; }
.field .optional { color: var(--fg-muted); font-weight: 300; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { color: var(--error); font-size: var(--step--1); font-weight: 400; }
.field__error:empty { display: none; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step--1); color: var(--fg-muted); }
.consent label { color: var(--fg-muted); font-size: var(--step--1); font-weight: 300; }
.consent input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: 0.15rem; accent-color: var(--accent); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.form-status { font-size: var(--step--1); } /* never display:none — it is a live region */
.form-status[data-state="success"] { color: var(--accent); }
.form-status[data-state="error"] { color: var(--error); }

.contact-card { display: grid; gap: var(--space-l); align-content: start; }
.contact-card h2 { font-size: var(--step-2); }

/* ---------- Footer ------------------------------------------------------- */
/* A stripe of the gem's colours along the top edge, with Gold kept to a sliver.
   (No Emerald: the CTA band above the footer is Emerald.) */
.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  background:
    linear-gradient(to right, var(--mint) 0 55%, var(--jade) 55% 94%, var(--gold) 94%) top / 100% 4px no-repeat,
    var(--deep);
  font-size: var(--step--1);
}
main:has(> .on-deep:last-child) + .site-footer { border-top: 1px solid var(--line-on-deep); }
.site-footer__grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.site-footer__brand { display: grid; gap: var(--space-m); align-content: start; max-width: 22rem; }
.site-footer__brand img { width: 10rem; } /* 160 px: the brand minimum for the stacked logo */
.site-footer__brand p { color: var(--on-deep-muted); }
.site-footer h2 {
  margin-bottom: var(--space-s);
  color: var(--on-deep-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.site-footer ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer a:not(.btn) { color: var(--on-deep); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--mint); text-decoration: underline; }
.site-footer address { color: var(--on-deep); }
.site-footer .site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer__contact { display: grid; gap: 0.5rem; color: var(--on-deep); overflow-wrap: anywhere; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-on-deep);
  color: var(--on-deep-muted);
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .site-header, .cta-band, .nav-toggle, .skip-link, .form { display: none !important; }
  .on-deep, .hero, .page-hero { background: none !important; color: #000 !important; }
  .on-deep h1, .on-deep h2, .on-deep p, .on-deep dd { color: #000 !important; }
  a { color: #000; }
}