/* Technology Fist - site.techfist.org - v2.9.1 (extensionless links incl. demo + form handler) */
/* ==========================================================================
   Technology Fist - marketing site design system
   Palette: deep ink + brass gold (primary) + teal (second tone) + warm paper
   Type: Spectral (display serif) + Manrope (UI/body sans)
   ========================================================================== */

:root {
  --ink: #16212e;
  --ink-2: #1f2f40;
  --ink-3: #2c4054;
  --paper: #f5f6f4;
  --paper-warm: #f6f1e8;
  --surface: #ffffff;
  --line: #e3e2da;
  --line-soft: #eeece5;
  --muted: #5a6572;
  --muted-2: #7a8592;

  --gold: #9a7524;
  --gold-2: #c19a4b;
  --gold-3: #dcc07f;
  --gold-soft: #f0e6cf;
  --gold-tint: #faf5e9;

  --teal: #1c6f6a;
  --teal-2: #2f8a83;
  --teal-soft: #dcebe8;
  --teal-tint: #eff6f5;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(22, 33, 46, .05), 0 6px 18px rgba(22, 33, 46, .05);
  --shadow-md: 0 4px 10px rgba(22, 33, 46, .06), 0 22px 48px rgba(22, 33, 46, .10);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-2); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; }
p { margin: 0 0 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold-2); display: inline-block; }
.eyebrow.on-dark { color: var(--gold-3); }
.eyebrow.on-dark::before { background: var(--gold-3); }

.lead { font-size: 1.18rem; color: var(--muted); line-height: 1.62; max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 8px 20px rgba(154, 117, 36, .28); }
.btn-gold:hover { background: #886719; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(154, 117, 36, .34); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold-2); color: var(--gold); background: var(--gold-tint); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost.on-dark:hover { border-color: var(--gold-3); color: var(--gold-3); background: rgba(255,255,255,.05); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

.arrow-link { font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 7px; }
.arrow-link svg { transition: transform .25s var(--ease); }
.arrow-link:hover { color: #886719; }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* v2.12: the header colour lives in a variable so the brand tag's notched
     legend can paint the exact same shade over the keyline and stay in step
     with the scrolled state. */
  --header-bg: rgba(22, 33, 46, .96);
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { --header-bg: rgba(20, 30, 42, .98); border-bottom-color: rgba(255,255,255,.08); background: var(--header-bg); box-shadow: 0 10px 30px rgba(10,16,24,.28); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: linear-gradient(145deg, var(--ink-2), var(--ink));
  color: var(--gold-3); display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(22,33,46,.18);
}
.brand-mark span { background: linear-gradient(160deg, var(--gold-3), var(--gold-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand small { display: block; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: #c6cfd8;
  padding: 9px 15px; border-radius: 999px; position: relative; transition: color .2s, background .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
  background: var(--gold-3); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); opacity: 0;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-links a.active { color: var(--gold-3); }
.nav-links a.active::after { transform: scaleX(1); opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

.menu-btn {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); background: transparent;
  border-radius: 12px; cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.menu-btn svg { width: 22px; height: 22px; stroke: #fff; }

/* ---------- sections ---------- */
section { position: relative; }
.band { padding: 96px 0; }
.band-tight { padding: 66px 0; }
.band-paper { background: var(--paper); }
.band-white { background: var(--surface); }
.band-warm { background: var(--paper-warm); }
.band-tint { background: linear-gradient(180deg, var(--gold-tint), var(--paper)); }
.band-ink { background: var(--ink); color: #eef1f4; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; }
.band-ink p { color: #b9c4cf; }

.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: .5rem; }
.band-ink .section-head p { color: #aab6c2; }

/* ---------- hero ---------- */
.hero { padding: 74px 0 84px; background:
  radial-gradient(1200px 520px at 82% -8%, var(--gold-tint), transparent 60%),
  radial-gradient(900px 480px at 6% 110%, var(--teal-tint), transparent 62%),
  var(--paper);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lead { margin: 20px 0 30px; font-size: 1.22rem; color: #46515e; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-tagline { margin-top: 26px; font-family: var(--sans); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--muted-2); }
.hero-tagline b { color: var(--gold); }

.hero-visual { position: relative; }
.hero-frame {
  position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 4.4;
  background: linear-gradient(155deg, var(--ink-3), var(--ink));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-md);
}
/* v2.25: real photographs. `mix-blend-mode: luminosity` and `opacity:.9` used to
   sit here - they drained the colour out so the placeholder artwork read as one
   branded panel. Over a photograph they produce a monochrome teal wash, which is
   not what a photograph is for. Removed. The gradient below is kept but taken
   right down: enough to seat the image in the dark hero, not enough to tint it. */
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(28,111,106,.10) 0%, rgba(18,34,47,.06) 45%, rgba(18,34,47,.30) 100%); }
.hero-badge {
  position: absolute; left: -22px; bottom: 30px; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-md); max-width: 232px;
}
.hero-badge .k { font-family: var(--serif); font-weight: 700; font-size: 1.7rem; color: var(--ink); line-height: 1; }
.hero-badge .k b { color: var(--gold); }
.hero-badge .t { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.hero-chip {
  position: absolute; right: -16px; top: 26px; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px 9px 12px; box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.hero-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-2); display: inline-block; }

/* ---------- credential strip ---------- */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.cred { padding: 26px 28px; border-right: 1px solid var(--line-soft); }
.cred:last-child { border-right: 0; }
.cred .k { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.cred .k b { color: var(--gold); font-weight: 700; }
.cred .t { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

/* ---------- intro split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-narrow { grid-template-columns: 1.05fr .95fr; }
.pillar-list { display: grid; gap: 14px; }
.pillar {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.pillar .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; }
.pillar .ic.teal { background: var(--teal-tint); color: var(--teal); }
.pillar h3 { font-size: 1.15rem; margin: 2px 0 4px; }
.pillar p { margin: 0; font-size: 14.7px; color: var(--muted); }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.cell.span-3 { grid-column: span 3; }
.cell.span-2 { grid-column: span 2; }
.cell.span-4 { grid-column: span 4; }
.cell.span-6 { grid-column: span 6; }
.cell.dark { background: linear-gradient(160deg, var(--ink-2), var(--ink)); border-color: rgba(255,255,255,.10); color: #eaeef2; }
.cell.dark h3 { color: #fff; }
.cell.dark p { color: #aebac6; }
.cell.tealfill { background: linear-gradient(160deg, var(--teal), #17605b); border-color: transparent; color: #eafaf7; }
.cell.tealfill h3 { color: #fff; } .cell.tealfill p { color: #cdeae5; }
.cell.goldline { background: var(--gold-tint); border-color: var(--gold-soft); }
.cell .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; margin-bottom: 16px; }
.cell.dark .ic { background: rgba(220,192,127,.15); color: var(--gold-3); }
.cell.tealfill .ic { background: rgba(255,255,255,.15); color: #fff; }
.cell h3 { font-size: 1.28rem; margin-bottom: 8px; }
.cell p { margin: 0; color: var(--muted); font-size: 15px; }
.cell .big { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.mini-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.mini-list li { font-size: 14.5px; color: var(--muted); padding-left: 22px; position: relative; }
.cell.dark .mini-list li, .cell.tealfill .mini-list li { color: #bcc8d2; }
.cell.tealfill .mini-list li { color: #d3ece7; }
.mini-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold-2); }
.cell.tealfill .mini-list li::before { border-color: var(--gold-3); }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-soft); }
.svc .num { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--gold); width: 52px; height: 52px; border-radius: 13px; background: var(--gold-tint); display: grid; place-items: center; }
.svc h3 { font-size: 1.16rem; margin: 4px 0 6px; }
.svc p { margin: 0; color: var(--muted); font-size: 14.7px; }

/* ---------- events ---------- */
/* v2.26: three equal cards, not one large card beside two stacked ones.
   The old 1.4fr/1fr split put ICECCE in a grid cell whose height was set by the
   two cards next to it. .event is a flex column, so the card filled that cell and
   its content simply ran out - about 300px of empty white inside the card. The
   Flagships page already listed these three side by side, so the home page was
   also contradicting it. */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 1080px) { .event-grid { grid-template-columns: repeat(2, 1fr); } }
.event {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.event:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.event-media { position: relative; aspect-ratio: 16 / 8; background: linear-gradient(150deg, var(--ink-3), var(--ink)); overflow: hidden; }
.event.lg .event-media { aspect-ratio: 16 / 9; }
/* v2.25: was `opacity:.82; mix-blend-mode: luminosity` with a 30%/62% teal wash
   over the top. That made the three host cities read as one blue-grey texture -
   Kuala Lumpur, Istanbul and Dubai were indistinguishable. Photographs now show
   as photographs; the light scrim further down is all that remains. */
.event-media img { width: 100%; height: 100%; object-fit: cover; }
.event-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(18,34,47,0) 60%, rgba(18,34,47,.26) 100%); }
.event-tag { position: absolute; z-index: 2; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; }
/* v2.26: the three series have very different amounts to say - ICECCE carries
   eight year-chips, ICIICE two. Letting the body grow and pushing the "Next"
   block down means the coloured bars and the year rows line up across all three
   cards instead of floating at three different heights. */
.event-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
/* The "Next" line and the year row belong together as a footer, so the slack is
   taken above the pair rather than between them - pinning only the year row left
   a gap splitting the two apart. Slack now falls after the description, which is
   where a reader expects a paragraph to simply end. */
.event-body .event-next { margin-top: auto; }
.event-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.event-body .meta { font-size: 13.5px; color: var(--gold); font-weight: 700; letter-spacing: .02em; margin-bottom: 10px; }
.event-body p { color: var(--muted); font-size: 14.7px; margin: 0; }
.event-years { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.event-years span { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.event-side { display: grid; gap: 22px; }

/* ---------- governance points ---------- */
.gov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gov {
  padding: 26px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.gov .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(220,192,127,.16); color: var(--gold-3); display: grid; place-items: center; margin-bottom: 16px; }
.gov h3 { font-size: 1.18rem; }
.gov p { color: #aab6c2; font-size: 14.7px; margin: 0; }

/* ---------- collaborators ---------- */
.collab { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.region { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.region i { width: 34px; height: 34px; border-radius: 9px; background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; flex: none; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(150deg, var(--ink-2), var(--ink)); color: #fff; border-radius: 22px; padding: 56px; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(193,154,75,.35), transparent 65%); }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); position: relative; }
.cta-band p { color: #c3cdd7; position: relative; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; position: relative; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #aeb9c4; padding: 66px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 34px; }
.foot-brand .brand { color: #fff; margin-bottom: 14px; }
.foot-brand .brand small { color: var(--gold-3); font-size: 7.5px; letter-spacing: .1065em; margin-right: -.1065em; }
.foot-brand p { color: #93a0ac; font-size: 14.5px; max-width: 34ch; }
.foot-col h4 { color: #fff; font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.foot-col a { display: block; color: #a7b3bf; font-size: 14.5px; padding: 6px 0; }
.foot-col a:hover { color: var(--gold-3); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; border-top: 1px solid rgba(255,255,255,.10); margin-top: 46px; padding-top: 22px; font-size: 13.5px; color: #8492a0; }
.foot-tag { font-family: var(--serif); font-style: italic; color: var(--gold-3); }

/* ---------- reveal animation ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* v2.24: when js/enhance.js (Motion) has loaded it owns the reveal entirely.
   Drop the CSS transition so the two do not animate opacity/transform at the
   same time - that double-drive is what makes library animation on top of CSS
   look subtly wrong. Without the .motion class nothing here applies and the
   CSS path above stays in charge. */
.motion .reveal { transition: none; }
.motion .reveal[data-d] { transition-delay: 0s; }

/* Home hero parallax. --parallax is written by enhance.js on scroll and is 0
   unless that module is running, so this is inert by default.
   Applied to .hero-frame, NOT .hero-visual: .hero-visual carries .reveal, whose
   own transform (and the inline transform:none written when the reveal
   settles) would fight this and win. */
.hero-frame { transform: translate3d(0, var(--parallax, 0px), 0); }
@media (prefers-reduced-motion: reduce) { .hero-frame { transform: none; } }
@media (max-width: 980px) { .hero-frame { transform: none; } }

/* ---------- page hero (sub-pages) ---------- */
.page-hero { padding: 64px 0 56px; background:
  radial-gradient(900px 420px at 88% -20%, var(--gold-tint), transparent 62%),
  var(--paper); border-bottom: 1px solid var(--line-soft); }
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); max-width: 16ch; }
.page-hero .lead { margin-top: 14px; }
.crumb { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 16px; text-transform: uppercase; }
.crumb a { color: var(--gold); }

/* prose blocks for governance/policies */
.prose-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.doc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.doc-card .badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: var(--teal-tint); border-radius: 7px; padding: 4px 10px; margin-bottom: 12px; }
.doc-card h3 { font-size: 1.22rem; }
.doc-card p { color: var(--muted); font-size: 14.7px; margin-bottom: 14px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.role-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; border-top: 3px solid var(--gold-2); }
.role-card.teal { border-top-color: var(--teal-2); }
.role-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
.role-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
.role-card .tagrow { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.role-card .tagrow span { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 4px; font-family: var(--serif); font-size: 1.12rem; color: var(--ink); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; font-family: var(--sans); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); padding: 0 4px 22px; margin: 0; font-size: 15.5px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 7px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; background: var(--surface); transition: border-color .2s, box-shadow .2s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted-2); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--gold-tint); }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-line { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.contact-line:last-child { border-bottom: 0; }
.contact-line i { width: 40px; height: 40px; border-radius: 11px; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; flex: none; }
.contact-line b { display: block; color: var(--ink); font-size: 15px; }
.contact-line span { color: var(--muted); font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; }
  .split, .collab, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell.span-3, .cell.span-4, .cell.span-6, .cell.span-2 { grid-column: span 2; }
  .svc-grid, .prose-cols { grid-template-columns: 1fr; }
  .event-grid { grid-template-columns: 1fr; }
  .gov-grid, .team-grid { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .cred { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cred:last-child { border-bottom: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .region-grid { grid-template-columns: 1fr; }
}
/* v2.30: the nav rules below used to live in the 760px block, which is far below
   the width at which the nav actually stops fitting. The brand lock plus six nav
   links plus the login button need about 1110px; between 768px and ~1200px they
   did not fit and the WHOLE PAGE became horizontally scrollable - on every
   tablet and small laptop, on every page of the site. Measured, not guessed:
   1140px is the narrowest width at which the full header still fits with the
   current six nav items. ADDING A SEVENTH NAV ITEM REOPENS THIS BUG - board.html
   carried one and overflowed to 1241px until v2.30 removed it. If a seventh link
   is ever needed, re-measure and raise this number. Everything at 760px and
   below is unchanged: 760px is inside this query, so it still gets these rules
   plus its own. */
@media (max-width: 1140px) {
  .nav-links, .nav-cta .btn:not(.menu-btn) { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 20px 18px; box-shadow: 0 18px 40px rgba(10,16,24,.35);
  }
  .nav-open .nav-links a { padding: 13px 14px; border-radius: 10px; }
  .nav-open .nav-links a:hover { background: rgba(255,255,255,.07); }
  .nav-open .nav-links a::after { display: none; }
  .nav-open .nav-cta .btn { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .band { padding: 64px 0; }
  .cta-band { padding: 36px 26px; }
  .bento { grid-template-columns: 1fr; }
  .cell.span-3, .cell.span-4, .cell.span-6, .cell.span-2 { grid-column: span 1; }
  .svc-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-badge { left: 0; }
}

/* ---------- workflow steps (platform page) ---------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: st; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 16px; position: relative; }
.step .n { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 1.05rem; display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: var(--gold-tint); align-items: center; justify-content: center; margin-bottom: 12px; }
.step h4 { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--ink); margin: 0 0 5px; }
.step p { font-size: 12.8px; color: var(--muted); margin: 0; line-height: 1.45; }
.step::after { content: ""; position: absolute; right: -10px; top: 34px; width: 12px; height: 2px; background: var(--gold-3); z-index: 2; }
.step:last-child::after { display: none; }
/* v2.30: a four-step variant of .steps. It is a CLASS and it sits above the
   media queries deliberately - an inline grid-template-columns on the element
   would beat every query below and pin four columns onto a phone. */
.steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .steps, .steps.four { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } }
@media (max-width: 500px){ .steps, .steps.four { grid-template-columns: 1fr; } }

/* ---------- media split (image + text) ---------- */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.media-split.rev .media-frame { order: 2; }
.media-frame { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(155deg, var(--ink-3), var(--ink)); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); position: relative; }
/* v2.25: same removal as .event-media above - the luminosity blend and the teal
   wash drained every panel photograph to the same colour. */
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame::after { content:""; position:absolute; inset:0; background: linear-gradient(170deg, rgba(18,34,47,0) 62%, rgba(18,34,47,.22) 100%); }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { padding-left: 32px; position: relative; color: var(--ink-2); font-size: 15.5px; }
.check-list li b { color: var(--ink); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--gold-tint); border: 1.5px solid var(--gold-2); }
.check-list li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 7px; height: 4px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
@media (max-width: 980px){ .media-split { grid-template-columns: 1fr; gap: 34px; } .media-split.rev .media-frame { order: 0; } }

/* quote */
.pullquote { max-width: 860px; margin: 0 auto; text-align: center; }
.pullquote p { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: 1.34; color: var(--ink); font-weight: 600; }
.band-ink .pullquote p { color: #fff; }
.pullquote cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }

/* two-up value cards on ink */
.val-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px){ .val-grid { grid-template-columns: 1fr; } }

/* ===== v1.1 additions: upcoming-edition chip, monograms, board messages, team ===== */
.event-next { display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; font-weight:700;
  color:var(--gold); background:var(--gold-tint); border:1px solid var(--gold-soft); border-radius:8px; padding:6px 11px; }
.event-next::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--gold-2); flex:none; }

.mono-block { padding-top:56px; text-align:center; }
.mono-label { font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:24px; }
.monogram-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.monogram { width:66px; height:66px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-family:var(--serif); font-weight:700; font-size:1.05rem; letter-spacing:.02em;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .25s; }
.monogram:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold-2); color:var(--gold); }
.mono-note { color:var(--muted-2); font-size:13px; margin-top:22px; }

/* board / convener messages */
.msg-card { display:grid; grid-template-columns:190px 1fr; gap:34px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin-bottom:22px; }
.msg-card.rev .msg-photo { order:2; }
.msg-photo { display:flex; flex-direction:column; align-items:center; gap:10px; }
.avatar-ph { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line);
  background:linear-gradient(150deg, var(--teal-tint), var(--gold-tint)); color:var(--teal); }
.avatar-ph.sm { width:60px; height:60px; }
/* A headshot layers over the initials disc rather than replacing it: if the file
   is missing the <img> removes itself and the initials remain, so the roster
   never shows a broken image and a photo can be added later by dropping one
   file into /img/people/ with no rebuild. */
.avatar-ph { position:relative; overflow:hidden; }
.avatar-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:50%; display:block; background:var(--surface); }
.photo-cap { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.msg-role { font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.msg-quote { font-family:var(--serif); font-size:1.22rem; line-height:1.45; color:var(--ink); margin:0 0 14px; }
.msg-sign b { color:var(--ink); font-size:15px; }
.msg-sign span { display:block; color:var(--muted); font-size:13.5px; margin-top:2px; }
.msg-bio { color:var(--muted-2); font-size:13.5px; margin:12px 0 0; }
@media (max-width:760px){ .msg-card { grid-template-columns:1fr; gap:20px; text-align:center; padding:26px 22px; } .msg-card.rev .msg-photo { order:0; } }

/* team roster */
.person-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.person-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.person-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold-soft); }
.person-card .avatar-ph { margin:0 auto 12px; }
.person-card h3 { font-size:1.08rem; margin:0 0 3px; }
.person-card .p-role { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.person-card p { color:var(--muted); font-size:13.8px; margin:0; }
@media (max-width:820px){ .person-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .person-grid { grid-template-columns:1fr; } }

/* ---- brand logos (real assets) ----
   The wordmark is a light cream/silver lockup on transparent, designed for a
   dark ground, so in the light header it sits on an ink brand plate to stay
   legible and deliberate. The footer is already dark, so the icon sits bare. */
.brand-logo { box-sizing: content-box; display: block; width: 148px; height: 60px; padding: 0; background-color: transparent; background-image: url('/img/logo-ccac2fbb.png'); background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; }
.foot-logo { display: block; flex: none; width: 40px; height: 50px; background-image: url('/img/logo-4a99a52a.png'); background-repeat: no-repeat; background-position: center; background-size: contain; }
/* Header brand stacks the mark over a small tagline */
.brand-lock { align-items: center; gap: 13px; }
.brand-rule { width: 1px; height: 55px; flex: none; background: var(--gold-3); }
/* v2.12 - the AMS scope tag: a thin gold keyline frame holds the four words
   together as one object, with "AMS for" notched into the top edge like a
   certificate legend. Replaces the stacked plate + four dotted lines, which
   ran taller than the logo and competed with it. */
.brand small.brand-tag { position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 0; width: auto; margin-top: 0; padding: 8px 8px 6px;
  border: 1px solid rgba(220,192,127,.38); border-radius: 7px;
  font-family: var(--sans); font-weight: 600; font-size: 7.6px;
  letter-spacing: .09em; text-transform: uppercase; color: #c9d2da; text-align: center;
  line-height: 1; white-space: nowrap; transition: border-color .25s var(--ease); }
.brand:hover small.brand-tag { border-color: rgba(220,192,127,.62); }
.brand small.brand-tag .tag-lead { position: absolute; top: -6px; left: 9px;
  background: var(--header-bg, var(--ink)); color: var(--gold-3); box-shadow: none;
  font-weight: 800; font-size: 7px; letter-spacing: .24em; text-indent: .24em;
  padding: 0 5px; margin: 0; border-radius: 0; align-self: auto; }
.brand small.brand-tag .row + .row { margin-top: 3px; }
.brand small.brand-tag .row .sep { color: var(--gold-2); margin: 0 .42em; }

/* v2.12: between roughly 1000px and 1440px the header still shows the full
   nav, so the scope tag tightens rather than pushing the Author login button
   off the edge. Below 980px the links collapse into the menu and the tag has
   room again. */
@media (min-width: 981px) and (max-width: 1439px){
  .brand-lock { gap: 9px; }
  .brand small.brand-tag { font-size: 6.2px; letter-spacing: .04em; padding: 7px 5px 5px; border-radius: 6px; }
  .brand small.brand-tag .tag-lead { font-size: 6.4px; letter-spacing: .18em; text-indent: .18em; left: 7px; padding: 0 4px; }
  .brand small.brand-tag .row .sep { margin: 0 .3em; }
}
@media (max-width: 760px){
  .brand-logo { width: 110px; height: 45px; padding: 0; }
  .brand-lock { gap: 11px; }
  .brand-rule { height: 43px; }
  .brand small.brand-tag { font-size: 7px; letter-spacing: .11em; padding: 7px 8px 5px; border-radius: 6px; }
  .brand small.brand-tag .tag-lead { font-size: 6.5px; letter-spacing: .2em; text-indent: .2em; top: -5px; left: 7px; padding: 0 4px; }
  .brand small.brand-tag .row + .row { margin-top: 2px; }
  .nav { min-height: 68px; }
}

/* ---- Cookie consent notice ---- */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 18px;
  background: var(--ink); color: #eef1f4; border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 15px 20px; box-shadow: 0 14px 44px rgba(22,33,46,.30);
  transform: translateY(150%); opacity: 0; transition: transform .34s ease, opacity .34s ease; }
.cookie-bar.show { transform: translateY(0); opacity: 1; }
.cookie-msg { margin: 0; font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: #d7dde3; }
.cookie-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.cookie-link { color: var(--gold-3); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.cookie-link:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .cookie-bar { flex-direction: column; align-items: flex-start; gap: 12px;
    left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .cookie-actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: opacity .2s ease; transform: none; }
}


/* ---- Collaborator logos (replace the placeholder monograms) ---- */
.collab-logo-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.collab-logo { display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:9px 14px; height:56px; min-width:92px; max-width:160px;
  box-shadow:0 2px 10px rgba(22,33,46,.05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.collab-logo:hover { transform: translateY(-3px); box-shadow:0 10px 26px rgba(22,33,46,.10); }
.collab-logo img { max-height:34px; max-width:125px; width:auto; height:auto; object-fit:contain; display:block; }
@media (max-width:760px){
  .collab-logo { height:50px; padding:7px 11px; min-width:80px; }
  .collab-logo img { max-height:30px; max-width:104px; }
}


/* ---- v2.2: legal pages, pricing, footer legal line ---- */
.foot-legal { color:#7c8794; font-size:12.5px; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.08); margin-top:34px; line-height:1.6; }
.foot-legal a { color:#a7b2bd; }
.legal-prose { max-width: 820px; }
.legal-updated { color: var(--muted-2); font-size:.85rem; margin-bottom: 26px; }
.legal-prose h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.legal-prose p { color: var(--muted); line-height: 1.75; margin-bottom: 12px; }
.legal-prose strong { color: var(--ink); }
.legal-prose a { font-weight: 600; }

.price-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.price-card { background: var(--surface); border:1px solid var(--line); border-radius: 18px; padding: 30px 28px;
  display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,33,46,.10); }
.price-card.featured { border-color: var(--gold); border-width: 2px; box-shadow: 0 10px 30px rgba(154,117,36,.12); }
.price-name { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.price-amount { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; color: var(--ink); margin: 10px 0 6px; }
.price-amount span { font-size: 1rem; color: var(--muted-2); font-family: var(--sans); font-weight: 500; }
.price-desc { color: var(--muted); font-size: .93rem; line-height: 1.6; }
.price-list { list-style: none; padding: 0; margin: 14px 0 22px; flex: 1; }
.price-list li { padding: 6px 0 6px 26px; position: relative; color: var(--ink-2); font-size: .92rem; }
.price-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--teal); font-weight: 700; }
@media (max-width: 980px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ==========================================================================
   v2.6 - pricing & contact redesign
   ========================================================================== */
::selection { background: var(--gold-soft); color: var(--ink); }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }

/* --- audience orientation strip (pricing hero) --- */
.aud-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.aud-chip { display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 17px 20px; color: var(--ink); transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.aud-chip:hover { border-color: var(--gold-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.aud-chip i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--gold-tint); color: var(--gold); }
.aud-chip.teal i { background: var(--teal-tint); color: var(--teal); }
.aud-chip b { display: block; font-size: 15.5px; line-height: 1.3; }
.aud-chip small { color: var(--muted); font-size: 13.5px; display: block; font-weight: 500; }
.aud-chip .go { margin-left: auto; color: var(--muted-2); flex: none; transition: transform .3s var(--ease), color .25s; }
.aud-chip:hover .go { transform: translateY(3px); color: var(--gold); }

/* --- plan cards --- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 34px 30px 30px; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.plan-name { font-weight: 800; font-size: 1.08rem; color: var(--ink); letter-spacing: -.005em; }
.plan-for { color: var(--muted-2); font-size: 13px; margin-top: 3px; font-weight: 500; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); }
.plan-price .amt { font-family: var(--serif); font-weight: 700; font-size: 2.9rem; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.plan-price .per { color: var(--muted-2); font-size: 14px; font-weight: 600; }
.plan-tagline { color: var(--muted); font-size: 14.5px; line-height: 1.58; margin: 12px 0 0; }
.plan-divide { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.plan-divide::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.plan-feats { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.plan-feats li svg { flex: none; margin-top: 4px; color: var(--teal); }
.plan .btn { width: 100%; text-align: center; justify-content: center; display: inline-flex; align-items: center; }
.plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold-2); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(154,117,36,.3); white-space: nowrap; }
.plan.hero-plan { background: linear-gradient(160deg, var(--ink-2), var(--ink)); border-color: var(--ink); box-shadow: 0 18px 44px rgba(22,33,46,.22); }
.plan.hero-plan:hover { border-color: var(--gold-2); box-shadow: 0 24px 54px rgba(22,33,46,.28); }
.plan.hero-plan .plan-name { color: #fff; }
.plan.hero-plan .plan-for { color: #9fb0bf; }
.plan.hero-plan .plan-price { border-top-color: rgba(255,255,255,.16); }
.plan.hero-plan .plan-price .amt { color: #fff; }
.plan.hero-plan .plan-price .per { color: #9fb0bf; }
.plan.hero-plan .plan-tagline { color: #b7c2cd; }
.plan.hero-plan .plan-divide { color: var(--gold-3); }
.plan.hero-plan .plan-divide::after { background: rgba(255,255,255,.15); }
.plan.hero-plan .plan-feats li { color: #dfe6ec; }
.plan.hero-plan .plan-feats li svg { color: var(--gold-3); }

/* --- comparison table --- */
.compare-wrap { margin-top: 52px; }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 14.5px; }
.compare th, .compare td { padding: 13px 20px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; width: 42%; }
.compare thead th { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--paper); font-weight: 800; border-bottom: 1px solid var(--line); }
.compare thead th.hi { color: var(--gold); }
.compare td:first-child { color: var(--ink-2); font-weight: 600; }
.compare td .tick { color: var(--teal); vertical-align: middle; }
.compare td .dash { color: var(--muted-2); font-weight: 600; }
.compare tbody tr:hover td { background: var(--gold-tint); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tr.price-row td { background: var(--paper); font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); border-top: 1px solid var(--line); }
.compare tr.price-row td:first-child { font-family: var(--sans); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.compare tr.price-row td small { font-family: var(--sans); font-weight: 500; color: var(--muted-2); font-size: 12.5px; }

/* --- delivery steps --- */
.buy-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.buy-step { position: relative; }
.buy-step-no { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 2px solid var(--gold-2); color: var(--gold); font-weight: 700; display: grid; place-items: center; font-size: 16px; font-family: var(--serif); position: relative; z-index: 1; }
.buy-step::before { content: ""; position: absolute; top: 23px; left: 58px; right: -22px; height: 2px; background: var(--line); }
.buy-step:last-child::before { display: none; }
.buy-step h3 { margin: 18px 0 6px; font-size: 1.16rem; }
.buy-step p { color: var(--muted); font-size: 14.6px; line-height: 1.6; margin: 0; }

/* --- APC section --- */
.apc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
.cover-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.cover-list li { display: flex; gap: 15px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.cover-list li:last-child { border-bottom: 0; }
.cover-list i { width: 40px; height: 40px; border-radius: 11px; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; flex: none; }
.cover-list b { display: block; color: var(--ink); font-size: 15px; line-height: 1.4; }
.cover-list span { color: var(--muted); font-size: 13.8px; line-height: 1.5; }
.apc-panel { background: linear-gradient(165deg, #fdfaf3, var(--paper-warm)); border: 1px solid var(--gold-soft); border-radius: 20px; padding: 38px 34px; box-shadow: var(--shadow-sm); }
.apc-panel .apc-eyelabel { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.apc-range { font-family: var(--serif); font-weight: 700; font-size: clamp(2.3rem, 4.2vw, 3.1rem); line-height: 1.1; color: var(--ink); margin: 10px 0 2px; letter-spacing: -.01em; }
.apc-range-sub { color: var(--muted); font-size: 15px; }
.apc-facts { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px dashed var(--gold-soft); display: grid; gap: 15px; }
.apc-facts li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.apc-facts li svg { flex: none; margin-top: 2px; color: var(--gold); }
.apc-facts b { color: var(--ink); }

/* --- contact page --- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px 34px; box-shadow: var(--shadow-sm); }
.form-card > h2 { font-size: 1.5rem; margin-bottom: 6px; }
.form-card .form-sub { color: var(--muted); font-size: 14.8px; margin: 0 0 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field label b { color: var(--gold); font-weight: 700; }
.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6572' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-actions .alt { color: var(--muted-2); font-size: 13.5px; }
.contact-card h3 { display: flex; align-items: center; gap: 10px; }
.contact-card .card-cap { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }

/* --- office band (ink) --- */
.office-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.office-item { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px 22px; transition: border-color .3s, background .3s, transform .35s var(--ease); }
.office-item:hover { border-color: rgba(220,192,127,.5); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.office-item i { width: 42px; height: 42px; border-radius: 12px; background: rgba(220,192,127,.14); color: var(--gold-3); display: grid; place-items: center; margin-bottom: 15px; }
.office-item b { display: block; color: #fff; font-size: 15px; margin-bottom: 5px; }
.office-item span { color: #b7c2cd; font-size: 13.8px; line-height: 1.55; display: block; }
.office-item a { color: #dfe6ec; }
.office-item a:hover { color: var(--gold-3); }

/* --- responsive: v2.6 --- */
@media (max-width: 980px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plan.hero-plan { order: -1; }
  .apc-grid { grid-template-columns: 1fr; gap: 34px; }
  .office-grid { grid-template-columns: 1fr 1fr; }
  .buy-steps { grid-template-columns: 1fr; gap: 26px; }
  .buy-step { padding-left: 62px; }
  .buy-step .buy-step-no { position: absolute; left: 0; top: 0; }
  .buy-step::before { left: 22px; top: 54px; right: auto; bottom: -26px; width: 2px; height: auto; }
  .buy-step h3 { margin-top: 4px; }
}
@media (max-width: 760px) {
  .aud-strip { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .office-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .contact-grid > * { min-width: 0; }
  .contact-card .btn { white-space: normal; }
}

/* ==========================================================================
   v2.7 - pricing page visual theme
   ========================================================================== */
/* dark hero */
.pricing-hero { background:
  radial-gradient(1000px 460px at 88% -12%, rgba(193,154,75,.30), transparent 62%),
  radial-gradient(700px 420px at -8% 112%, rgba(47,138,131,.16), transparent 60%),
  linear-gradient(160deg, var(--ink-2), var(--ink));
  padding: 76px 0 68px; }
.pricing-hero .crumb { color: #8d99a6; }
.pricing-hero .crumb a { color: var(--gold-3); }
.pricing-hero h1 { color: #fff; }
.pricing-hero h1 em { font-style: italic; color: var(--gold-3); }
.pricing-hero .lead { color: #b7c2cd; }
.pricing-hero .aud-chip { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); color: #fff; }
.pricing-hero .aud-chip small { color: #9fb0bf; }
.pricing-hero .aud-chip i { background: rgba(220,192,127,.15); color: var(--gold-3); }
.pricing-hero .aud-chip.teal i { background: rgba(47,138,131,.22); color: #7fc4be; }
.pricing-hero .aud-chip .go { color: #8d99a6; }
.pricing-hero .aud-chip:hover { border-color: var(--gold-2); background: rgba(255,255,255,.09); color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.pricing-hero .aud-chip:hover .go { color: var(--gold-3); }

/* plan cards */
.plan { border-radius: 22px; }
.plan-glyph { width: 46px; height: 46px; border-radius: 13px; background: var(--gold-tint); border: 1px solid var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin-bottom: 18px; }
.plan-price .cur { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--gold); }
.plan-feats li .ck { width: 21px; height: 21px; border-radius: 50%; background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; flex: none; margin-top: 3px; }
.plan.hero-plan { border: 1.5px solid transparent;
  background: linear-gradient(160deg, #1e2e3f, #131d29) padding-box,
              linear-gradient(160deg, var(--gold-2), rgba(193,154,75,.22) 45%, var(--gold-3)) border-box;
  box-shadow: 0 24px 60px rgba(22,33,46,.34), 0 8px 30px rgba(154,117,36,.16); }
.plan.hero-plan:hover { box-shadow: 0 30px 70px rgba(22,33,46,.4), 0 10px 34px rgba(154,117,36,.22); }
.plan.hero-plan .plan-glyph { background: rgba(220,192,127,.13); border-color: rgba(220,192,127,.35); color: var(--gold-3); }
.plan.hero-plan .plan-price .cur { color: var(--gold-3); }
.plan.hero-plan .plan-feats li .ck { background: rgba(220,192,127,.15); color: var(--gold-3); }

/* comparison table */
.compare-scroll { box-shadow: var(--shadow-md); }
.compare thead th { background: var(--ink); color: #aab6c2; border-bottom: 0; padding: 15px 20px; }
.compare thead th:first-child { color: #fff; }
.compare thead th.hi { color: var(--gold-3); }
.compare tbody tr:nth-child(odd) td { background: #fbfaf7; }
.compare tbody tr:hover td { background: var(--gold-tint); }
.compare tbody tr.price-row td { background: var(--gold-tint); border-top: 1px solid var(--gold-soft); }

/* delivery steps */
.buy-step-no { background: linear-gradient(160deg, var(--gold-2), var(--gold)); border: 0; color: #fff; box-shadow: 0 10px 22px rgba(154,117,36,.32); }
.buy-step::before { background: none; border-top: 2px dashed var(--gold-3); height: 0; opacity: .6; }

/* APC panel - dark */
.apc-panel { background:
  radial-gradient(480px 300px at 92% -12%, rgba(193,154,75,.30), transparent 62%),
  linear-gradient(160deg, var(--ink-2), var(--ink));
  border: 1px solid rgba(193,154,75,.4); box-shadow: 0 20px 50px rgba(22,33,46,.28); }
.apc-panel .apc-eyelabel { color: var(--gold-3); }
.apc-range { color: #fff; }
.apc-range-sub { color: #9fb0bf; }
.apc-facts { border-top-color: rgba(255,255,255,.16); }
.apc-facts li { color: #c9d3dc; }
.apc-facts b { color: #fff; }
.apc-facts li svg { color: var(--gold-3); }
.apc-facts a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 3px; }
.apc-facts a:hover { color: #fff; }

@media (max-width: 980px) {
  .buy-step::before { border-top: 0; border-left: 2px dashed var(--gold-3); width: 0; height: auto; }
}

/* v2.8 demo section */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; gap: 22px; } }

/* v2.9 - live demo prominence */
.nav-demo { color: var(--gold-3) !important; font-weight: 800; white-space: nowrap; }
.site-header .nav-links a.nav-demo:hover { color: #fff !important; }
.btn-demo { background: #fff; color: var(--ink); border: 1.5px solid var(--gold-2);
  display: inline-flex; align-items: center; gap: 9px; }
.btn-demo:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(154,117,36,.34); }
.btn-demo.on-dark { background: rgba(255,255,255,.08); color: #fff; }
.btn-demo.on-dark:hover { background: var(--gold); color: #fff; }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none;
  box-shadow: 0 0 0 0 rgba(74,222,128,.55); animation: demo-pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .demo-dot { animation: none; } }
@keyframes demo-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* ============================================================
   v2.11 - pricing parity with ams.techfist.org
   Offer banner + struck-through "was" prices, the two-track fee
   model, the per-paper processing tiles, disclaimers, and the
   preprint posting-fee block. Every figure here mirrors the
   Super Chair's Settings -> Pricing values on AMS.
   ============================================================ */
.offer-banner { display: flex; align-items: center; gap: 12px; background: linear-gradient(100deg, var(--gold-tint), #fff8ea); border: 1.5px solid var(--gold-2); border-radius: 14px; padding: 15px 20px; color: var(--gold); font-weight: 700; font-size: 15px; margin-bottom: 34px; box-shadow: var(--shadow-sm); }
.offer-banner svg { flex: none; }
/* v2.31: .was is retired on the plan cards.
   A struck-through "was" price must be one genuinely charged in the recent past
   - UK/EU price-indication rules - and a card processor's underwriter reads an
   invented one as bait-and-switch. The plans now state the future standard
   price in words instead: same urgency, and it is checkable. The rule below is
   kept because .was is still used elsewhere on the site for genuine former
   prices. */
.plan-price .was { text-decoration: line-through; color: var(--muted-2); font-size: 1.15rem; font-weight: 600; font-family: var(--serif); }
.plan.hero-plan .plan-price .was { color: #8b9aa8; }
.plan-standard { margin-top: 8px; font-size: 12.8px; line-height: 1.45; color: var(--muted-2); }
.plan-standard b { color: var(--muted); font-weight: 700; }
.plan.hero-plan .plan-standard { color: #9fb0bf; }
.plan.hero-plan .plan-standard b { color: #c9d6e2; }
.plan-apply { margin-top: 10px; font-size: 12.4px; line-height: 1.45; color: #9fb0bf; }
.plan:not(.hero-plan) .plan-apply { color: var(--muted-2); }
.offer-tag { display: inline-block; align-self: flex-start; background: #b6532a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-bottom: 6px; }

.track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.track { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; }
.track.hi { border: 1.5px solid var(--teal); background: var(--teal-tint); }
.track-label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; background: var(--line-soft); color: var(--muted); margin-bottom: 10px; }
.track.hi .track-label { background: var(--teal); color: #fff; }
.track h3 { font-size: 1.16rem; margin: 0 0 8px; color: var(--ink); }
.track p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.track ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.62; }
.track ul li { margin-bottom: 6px; }

.note { display: flex; gap: 13px; align-items: flex-start; border-radius: 14px; padding: 18px 22px; font-size: 14.5px; line-height: 1.62; }
.note svg { flex: none; margin-top: 2px; }
.note.info { background: var(--teal-tint); border: 1px solid var(--teal-soft); color: var(--ink-2); }
.note.info svg { color: var(--teal); }
.note b { color: var(--ink); }

.fee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.fee-tile { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--surface); }
.fee-amt { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; color: var(--ink); line-height: 1.1; }
.fee-amt .was { text-decoration: line-through; color: var(--muted-2); font-size: 1rem; margin-right: 6px; }
.fee-when { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 4px 0 8px; }
.fee-tile p { margin: 0; color: var(--muted); font-size: 13.6px; line-height: 1.58; }

.pp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 24px; }
.pp-card { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); }
.pp-card.hi { border: 1.5px solid var(--gold-2); background: var(--gold-tint); }
.pp-card h3 { font-size: 1.04rem; margin: 0 0 4px; color: var(--ink); }
.pp-card > p { color: var(--muted); font-size: 13.8px; margin: 0 0 12px; }
.pp-card ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.pp-card ul li { margin-bottom: 6px; }
.pp-fee { display: inline-block; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; }

@media (max-width: 900px) {
  .track-grid, .fee-grid, .pp-grid { grid-template-columns: 1fr; }
}


/* v2.23 - accessibility and layout corrections.
   Each of these was found by audit; the reason is stated so the next person
   does not undo it. */

/* Every in-page anchor landed underneath the sticky header, hiding the very
   heading the visitor jumped to. */
section[id], div[id] { scroll-margin-top: 104px; }
@media (max-width: 760px) { section[id], div[id] { scroll-margin-top: 80px; } }

/* Focus was drawn in --gold-2 (2.6:1) and removed entirely on form fields, so
   a keyboard user could not see where they were - worst exactly on the contact
   and demo forms. --gold-focus is 4.6:1 on white and passes WCAG 1.4.11. */
:root { --gold-focus: #8a6820; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-focus);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-focus);
  outline-offset: 1px;
}

/* Skip link - there was none, so every page began with the brand plus six nav
   items before a keyboard user could reach the content. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* The flagship calendar used inline fixed columns totalling 460px, so it forced
   horizontal scroll on every phone. Inline styles cannot be overridden by a
   normal rule, hence !important - the alternative was editing markup. */
@media (max-width: 760px) {
  .cal-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 16px 18px !important; }
}

/* The comparison table scrolls horizontally; without a tabindex a keyboard-only
   user could not reach the third column. */
.table-scroll:focus-visible { outline: 3px solid var(--gold-focus); outline-offset: 2px; }

/* Muted small text sat at 3.75:1, below the 4.5:1 minimum for body copy. */
:root { --muted-2: #6b7684; }

/* v2.23: grid blowout on the pricing cards at narrow widths.
   A grid item defaults to min-width:auto, so its content can force the column
   wider than the container - the plan grid measured 342px while its column
   computed to 371px, pushing the whole page into horizontal scroll on a phone.
   min-width:0 lets the item shrink, which is what was intended all along. */
.plan-grid > *, .plan-grid { min-width: 0; }
.plan-grid > * { overflow-wrap: anywhere; }

/* Same class of defect, guarded generally: long unbroken strings (a DOI, a URL,
   an email address) in any card must wrap rather than widen the page. */
.plan, .card, .form-card, .event-card { overflow-wrap: anywhere; }

/* v2.25: the frames now hold real photographs.
   v2.23 filled these frames with a branded panel because there was no image to
   put in them - a diagonal rule over a dark gradient, plus a gold radial wash.
   That treatment was written to be deleted the moment real pictures arrived, and
   it has been: over a photograph the dark background is invisible anyway, and
   the gold wash tinted every image the same colour, which made fourteen
   different photographs look like fourteen versions of one.
   The dark gradient is kept ONLY as a backdrop, so a frame whose image is still
   loading, or fails to load, reads as a deliberate panel rather than a hole. */
.hero-frame img, .media-frame img, .event-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-frame, .media-frame, .event-media {
  background-image: linear-gradient(150deg, #12222f 0%, #16303f 55%, #1b2f3c 100%);
  background-size: cover;
  position: relative;
}
/* A restrained scrim on the wide panels: it seats the photograph against the
   page and keeps the rounded corner reading, without recolouring the image. */
.media-frame::after, .event-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(18,34,47,0) 55%, rgba(18,34,47,.22) 100%);
  pointer-events: none;
}