/* ===========================================================================
   Vim & Vigor — public site
   A light theme drawn from the logo: navy wordmark, orange Peace Tower, on a
   warm cream page. The brand, accent, text and page colours arrive as custom
   properties from the admin panel (includes/theme.php); everything else here
   is derived from them, so a colour change in the admin restyles the site.
   =========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --- tokens --------------------------------------------------------------- */
:root {
  /* Fallbacks only. The live values are written onto <html> by theme.php. */
  --brand: #0e2e46;
  --brand-rgb: 14 46 70;
  --brand-hover: #e8651a;
  --accent: #e8651a;
  --accent-rgb: 232 101 26;
  --ink: #0e2e46;
  --ink-rgb: 14 46 70;
  --surface: #fbf8f3;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-ui: "DM Sans", system-ui, sans-serif;

  /* Derived. The logo orange is 3.1:1 on cream — fine for large type and
     shapes, too light for small text — so small orange text uses a darker
     mix of it (~4.9:1), and so does the hover fill behind white button text. */
  --accent-text: color-mix(in srgb, var(--accent) 78%, #000);
  --hover-fill: color-mix(in srgb, var(--brand-hover) 82%, #000);
  --ink-body: rgb(var(--ink-rgb) / .80);
  --ink-muted: rgb(var(--ink-rgb) / .64);
  --line: rgb(var(--ink-rgb) / .12);
  --paper: #ffffff;
  --surface-alt: color-mix(in srgb, var(--surface) 88%, var(--accent) 5%);
  --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / .06), 0 4px 14px rgb(var(--ink-rgb) / .06);
  --shadow-md: 0 2px 6px rgb(var(--ink-rgb) / .06), 0 14px 36px rgb(var(--ink-rgb) / .10);

  --shell: 1280px;
  --shell-gutter: 24px;
  --hero-col: 896px;
  --radius: 16px;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Safety net: no stray wide element (a pasted unbreakable string, an embed)
   can give the page a sideways scroll, or make a phone widen its layout
   viewport — which is what dragged the fixed header and its menu button
   off-screen. Set on the page's own containers, not <body>: on <body> it is
   handed to the viewport, where it no longer contains anything. `clip`, not
   `hidden`, so no scroll box is created and sticky positioning still works. */
main,
.site-footer { overflow-x: clip; }

/* Anchored sections land below the sticky header rather than under it. */
section[id], footer[id], #register { scroll-margin-top: 120px; }

/* Visible only to assistive tech until focused. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: 10px;
  background: var(--brand); color: #fff; font: 600 15px/1 var(--font-ui);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===========================================================================
   Header — a white pill floating over the hero, sticky on scroll.
   =========================================================================== */
.site-header {
  position: absolute;
  inset: 24px 0 auto;
  z-index: 50;
  padding: 0 var(--shell-gutter);
}
.site-header--sticky { position: fixed; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--shell);
  min-height: 88px;
  margin-inline: auto;
  padding: 8px 12px 8px 24px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgb(255 255 255 / .92);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header--sticky.is-stuck .header-bar { background: rgb(255 255 255 / .97); box-shadow: var(--shadow-md); }

/* Logo — width from the admin (150–180 per the brief), height follows. */
.header-logo { flex: 0 0 auto; display: block; }
.header-logo img { width: var(--logo-w, 170px); height: auto; }

.header-actions { display: flex; align-items: center; gap: 28px; }

.header-nav ul { display: flex; align-items: center; gap: 28px; }
.header-nav a {
  position: relative;
  font: 600 16px/22px var(--font-ui);
  color: var(--ink);
  transition: color .18s ease;
}
.header-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after { transform: scaleX(1); }

.social-links { display: flex; align-items: center; gap: 8px; }
.social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.25px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: var(--brand);
  color: #fff;
  font: 700 16px/22px var(--font-ui);
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.header-cta:hover { background: var(--hover-fill); transform: translateY(-1px); }

.header-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  place-items: center;
}
.header-toggle span {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* ===========================================================================
   Hero — the approved artwork, an optional dark overlay (0 by default), then
   the content column.
   =========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--hero-min-height, 799px);
  padding: 96px var(--shell-gutter) 0;
  overflow: hidden;
  background-color: var(--surface);
  background-image:
    linear-gradient(rgb(0 0 0 / var(--hero-overlay, 0)), rgb(0 0 0 / var(--hero-overlay, 0))),
    var(--hero-image, none);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--hero-col);
  padding: 80px 24px 72px;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-bottom: 28px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgb(255 255 255 / .85);
  box-shadow: var(--shadow-sm);
  font: 600 16px/22px var(--font-display);
  color: var(--ink);
}
.hero__badge::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__title {
  margin-bottom: 24px;
  font: 800 68px/1.06 var(--font-display);
  letter-spacing: -1.7px;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero__title span { display: block; }
.hero__title-accent { color: var(--accent); }

.hero__intro {
  max-width: 680px;
  margin: 0 auto 40px;
  font: 400 20px/31px var(--font-display);
  color: var(--ink-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 56px;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 28px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font: 700 17px/23px var(--font-display);
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--hover-fill); }

.btn--ghost { border-color: rgb(var(--ink-rgb) / .28); background: rgb(255 255 255 / .7); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }

.btn--light { background: #fff; color: var(--brand); }
.btn--light:hover { background: var(--hover-fill); color: #fff; }

.btn--block { width: 100%; white-space: normal; }

/* --- Stats ---------------------------------------------------------------- */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  max-width: 680px;
  margin-inline: auto;
  padding-top: 36px;
  border-top: 1px solid rgb(var(--ink-rgb) / .16);
}
.hero__stat { text-align: center; }
.hero__stat dt { font: 800 40px/1.1 var(--font-display); color: var(--ink); }
.hero__stat dd { margin-top: 8px; font: 500 16px/22px var(--font-display); color: var(--ink-muted); }

/* ===========================================================================
   Shared section scaffolding
   =========================================================================== */
.section { padding: 112px var(--shell-gutter); }
.section__inner { max-width: 1152px; margin-inline: auto; padding-inline: 32px; }
.section-head { max-width: 760px; margin-inline: auto; text-align: center; }

.section-label {
  margin: 0;
  font: 800 14px/20px var(--font-display);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.section-label--light { color: #ffd9c2; }

.section-title {
  margin: 14px 0 0;
  font: 800 46px/1.18 var(--font-display);
  letter-spacing: -1.1px;
  color: var(--ink);
  text-wrap: balance;
}
.section-title--left { text-align: left; }

.section-sub {
  max-width: 640px;
  margin: 18px auto 0;
  font: 400 19px/30px var(--font-display);
  color: var(--ink-body);
}
.section-sub--wide { max-width: 760px; }

.section-cta { margin-top: 48px; text-align: center; }

/* Multi-paragraph copy from a single admin textarea. */
.prose p { font: 400 19px/31px var(--font-display); color: var(--ink-body); }
.prose p + p { margin-top: 18px; }
.prose--center { max-width: 760px; margin: 28px auto 0; text-align: center; }

/* A highlighted one-liner (About). */
.highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 18px 22px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: rgb(var(--accent-rgb) / .09);
  font: 700 20px/28px var(--font-display);
  color: var(--ink);
}
.highlight svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-text); }

/* --- Cards (Why Exhibit, Exhibitor Participation) -------------------------- */
.cards { display: grid; gap: 24px; margin-top: 56px; }
.cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
.cards--4 .card { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; }
.cards--4 .card__icon { grid-row: span 2; }
.cards--4 .card__title { margin-top: 2px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.card--center { align-items: center; text-align: center; }
.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgb(var(--accent-rgb) / .12);
  color: var(--accent-text);
}
.card__icon svg { width: 24px; height: 24px; }
.card__title { margin-top: 20px; font: 800 21px/29px var(--font-display); color: var(--ink); }
.card__body { margin-top: 10px; font: 400 17px/27px var(--font-display); color: var(--ink-body); }

/* ===========================================================================
   About
   =========================================================================== */
.about { background: var(--surface); }
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.about__inner--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.about .section-title { margin-bottom: 28px; }
.about__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* ===========================================================================
   Collaboration
   =========================================================================== */
.collaboration { background: var(--paper); }
.collaboration__sub {
  margin-top: 16px;
  font: 700 21px/30px var(--font-display);
  color: var(--accent-text);
}
.collaboration__grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  margin-top: 56px;
}
.collaboration__grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }

.collaboration__logos { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
/* The logos are shown exactly as supplied: contained on white, never cropped. */
.collaboration__logo {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.collaboration__logo a { display: block; }
.collaboration__logo img { width: 100%; max-width: 320px; max-height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.collaboration__x {
  align-self: center;
  font: 300 30px/1 var(--font-display);
  color: var(--accent-text);
}
.collaboration__closing {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 700 21px/31px var(--font-display);
  color: var(--ink);
}

/* ===========================================================================
   Why Exhibit
   =========================================================================== */
.why-exhibit { background: var(--surface-alt); }

/* ===========================================================================
   Exhibitor call to action — photo under a navy overlay. The overlay strength
   is the admin's (0.45–0.55 per the brief); the soft centre vignette on top
   keeps white body copy above 4.5:1 even over the light launch artwork.
   =========================================================================== */
.exhibitor-cta {
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: 112px var(--shell-gutter);
  text-align: center;
  background-color: var(--brand);
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgb(var(--brand-rgb) / .38), rgb(var(--brand-rgb) / 0) 100%),
    linear-gradient(rgb(var(--brand-rgb) / var(--cta-overlay, .5)), rgb(var(--brand-rgb) / var(--cta-overlay, .5))),
    var(--cta-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.exhibitor-cta__inner { width: 100%; max-width: 780px; }
.exhibitor-cta__title {
  margin-top: 16px;
  font: 800 54px/1.12 var(--font-display);
  letter-spacing: -1.3px;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(var(--brand-rgb) / .35);
}
.exhibitor-cta__body {
  margin: 20px auto 36px;
  font: 500 20px/31px var(--font-display);
  color: #fff;
  text-shadow: 0 1px 12px rgb(var(--brand-rgb) / .45);
}

/* ===========================================================================
   Upcoming Events
   =========================================================================== */
.events { background: var(--paper); }
.events__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  margin-top: 56px;
}
.events__grid--solo { grid-template-columns: minmax(0, 720px); justify-content: center; }

.event-feature {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.event-feature__figure { position: relative; margin: 0; }
.event-feature__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-feature__expand {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgb(255 255 255 / .9);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.event-feature__expand svg { width: 16px; height: 16px; }
.event-feature__body { padding: 32px; }
.event-feature__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / .12);
  font: 800 13px/18px var(--font-display);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.event-feature__title { margin-top: 14px; font: 800 30px/1.2 var(--font-display); letter-spacing: -.5px; color: var(--ink); }

.event-meta { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.event-meta li { display: flex; align-items: flex-start; gap: 14px; font: 600 18px/26px var(--font-display); color: var(--ink); }
.event-meta__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--accent-text);
}
.event-meta__icon svg { width: 18px; height: 18px; }
.event-meta__label {
  display: block;
  font: 500 14px/18px var(--font-display);
  color: var(--ink-muted);
}

.event-feature__map {
  height: 200px;
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.event-feature__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.events__subhead { margin-top: 56px; font: 800 24px/32px var(--font-display); color: var(--ink); text-align: center; }
.events__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }
.event-mini { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.event-mini__title { font: 800 20px/28px var(--font-display); color: var(--ink); }
.event-mini .event-meta { margin-top: 16px; }

.events__more {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 860px;
  margin: 56px auto 0;
  padding: 28px 32px;
  border: 2px dashed rgb(var(--accent-rgb) / .45);
  border-radius: 20px;
  background: rgb(var(--accent-rgb) / .05);
}
.events__more-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}
.events__more-icon svg { width: 24px; height: 24px; }
.events__more-title { font: 800 23px/31px var(--font-display); color: var(--ink); }
.events__more-body { margin-top: 6px; font: 400 18px/28px var(--font-display); color: var(--ink-body); }
.events__empty { margin-top: 40px; text-align: center; color: var(--ink-muted); }

/* ===========================================================================
   Forms — the attendee registration panel and the exhibitor application.
   Large type and generous targets: this audience is 50+.
   =========================================================================== */
.form-panel {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.events .form-panel { background: #fff; }
.form-panel__title { font: 800 26px/34px var(--font-display); color: var(--ink); }
.form-panel__intro { margin-top: 8px; font: 400 17px/27px var(--font-display); color: var(--ink-body); }

.form { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; margin-top: 0; }
.form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form__field--wide { grid-column: 1 / -1; }

.form__label { font: 700 16px/22px var(--font-display); color: var(--ink); padding: 0; }
.form__req { margin-left: 4px; color: var(--accent-text); }
.form__opt { font-weight: 500; color: var(--ink-muted); }
.form__hint { margin-top: -2px; font: 400 15px/21px var(--font-display); color: var(--ink-muted); }

.form__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid rgb(var(--ink-rgb) / .22);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 18px/26px var(--font-display);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form__textarea { min-height: 120px; resize: vertical; }
.form__select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230e2e46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .22);
}
.form__input.is-invalid { border-color: #c0392b; }
.form__error { font: 600 15px/21px var(--font-display); color: #b03a2e; }

.form__options { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgb(var(--ink-rgb) / .18);
  border-radius: 12px;
  font: 500 17px/24px var(--font-display);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__dot {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(var(--ink-rgb) / .35);
  border-radius: 50%;
}
.choice__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform .15s ease;
}
.choice:has(input:checked) { border-color: var(--brand); background: rgb(var(--brand-rgb) / .04); }
.choice input:checked + .choice__dot { border-color: var(--brand); }
.choice input:checked + .choice__dot::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.form__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font: 500 16px/24px var(--font-display);
  color: var(--ink-body);
}
.form__note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--accent-text); }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  font: 600 16px/24px var(--font-display);
}
.form-note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.form-note--ok { background: #e7f5ec; color: #1e6b3d; }
.form-note--error { background: #fbeae8; color: #9b2c22; }
.form-note--big { margin-top: 0; padding: 24px; font-size: 19px; line-height: 29px; }
.form-note--big svg { width: 24px; height: 24px; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===========================================================================
   Exhibitor Participation
   =========================================================================== */
.participation { background: var(--surface-alt); }
.participation__closing {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  font: 800 24px/34px var(--font-display);
  color: var(--ink);
}

/* ===========================================================================
   Become an Exhibitor (application form)
   =========================================================================== */
.exhibit { background: var(--paper); }
.exhibit__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}
.exhibit__intro { position: sticky; top: 140px; }
.exhibit__lede { margin-top: 20px; font: 400 19px/31px var(--font-display); color: var(--ink-body); }
.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgb(var(--accent-rgb) / .09);
  border: 1px solid rgb(var(--accent-rgb) / .25);
}
.callout__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
.callout__icon svg { width: 20px; height: 20px; }
.callout p { font: 600 17px/27px var(--font-display); color: var(--ink); }
.form-panel--wide { background: var(--surface); }

/* ===========================================================================
   Contact — one card per detail the admin filled in (email, phone, address).
   The grid is sized to the number of cards so one or two never sit
   stranded at the left of a three-column track.
   =========================================================================== */
.contact { background: var(--surface-alt); }
.contact__grid { display: grid; gap: 24px; margin: 56px auto 0; }
.contact__grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.contact__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.contact__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgb(var(--accent-rgb) / .12);
  color: var(--accent-text);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card__label {
  margin-top: 18px;
  font: 800 14px/20px var(--font-display);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-card__value {
  margin-top: 8px;
  font: 700 20px/29px var(--font-display);
  color: var(--ink);
  /* Emails carry a <wbr> after the @ (contact.php), so if one ever has to
     wrap it splits there, never mid-word; break-word is only the last resort. */
  overflow-wrap: break-word;
}
a.contact-card__value:hover { color: var(--accent-text); }
.contact-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font: 700 16px/22px var(--font-display);
  color: var(--brand);
}
.contact-card__action svg { width: 15px; height: 15px; transition: transform .18s ease; }
.contact-card__action:hover { color: var(--accent-text); }
.contact-card__action:hover svg { transform: translateX(3px); }
.contact__empty { margin-top: 32px; text-align: center; font: 500 18px/28px var(--font-display); color: var(--ink-muted); }

/* ===========================================================================
   Gallery — five-tile masonry blocks: hero 3fr x 500 with a 2fr stacked pair,
   then a 1fr/1fr row. A partial block closes its own gaps via data-tiles.
   =========================================================================== */
.gallery { background: var(--surface); }
.gallery__grid,
.gallery__block { display: flex; flex-direction: column; gap: 16px; }
.gallery__grid { margin-top: 56px; }
.gallery__row { display: grid; gap: 16px; }
.gallery__row--top { grid-template-columns: 3fr 2fr; grid-template-rows: 242px 242px; }
.gallery__tile--hero { grid-column: 1; grid-row: 1 / span 2; }
.gallery__tile--b    { grid-column: 2; grid-row: 1; }
.gallery__tile--c    { grid-column: 2; grid-row: 2; }
.gallery__row--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
.gallery__row--top[data-tiles="1"] { grid-template-columns: 1fr; grid-template-rows: 500px; }
.gallery__row--top[data-tiles="1"] .gallery__tile--hero { grid-row: 1; }
.gallery__row--top[data-tiles="2"] { grid-template-rows: 500px; }
.gallery__row--top[data-tiles="2"] .gallery__tile--hero,
.gallery__row--top[data-tiles="2"] .gallery__tile--b { grid-row: 1; }
.gallery__row--bottom[data-tiles="1"] { grid-template-columns: 1fr; }

.gallery__tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery__tile:hover img { transform: scale(1.04); }
.gallery__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(var(--brand-rgb) / .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.gallery__tile:hover .gallery__overlay,
.gallery__tile:focus-visible .gallery__overlay { opacity: 1; }
.gallery__overlay-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  font: 700 16px/21px var(--font-display);
  color: var(--ink);
  transform: translateY(6px);
  transition: transform .25s ease;
}
.gallery__tile:hover .gallery__overlay-label,
.gallery__tile:focus-visible .gallery__overlay-label { transform: translateY(0); }
.gallery__overlay-label svg { width: 16px; height: 16px; }
.gallery__empty {
  margin-top: 40px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-muted);
}

/* --- Lightbox: GLightbox restyled to the site's palette -------------------- */
.glightbox-clean .gslide-description { background: #fff; }
.glightbox-clean .gslide-title { font: 700 18px/25px var(--font-display); color: var(--ink); }
.glightbox-clean .gdesc-inner { padding: 18px 22px; }
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 50%;
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover { background: var(--accent); border-color: transparent; }
.gbtn svg { fill: #fff; }
.goverlay { background: rgb(var(--brand-rgb) / .94); }
.gslide-media { border-radius: 12px; overflow: hidden; }

/* ===========================================================================
   Footer — navy, with the logo on a white tile.
   =========================================================================== */
.site-footer { background: var(--brand); color: rgb(255 255 255 / .82); }
.site-footer__inner {
  display: grid;
  /* The Contact column is as wide as its longest line (an email address must
     never break mid-word); the brand and Explore columns share the rest. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) max-content;
  gap: 48px;
  max-width: 1152px;
  margin-inline: auto;
  padding: 72px 56px 48px;
}
.site-footer__inner--two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.site-footer__logo {
  display: inline-block;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
}
.site-footer__logo img { width: 170px; height: auto; }
.site-footer__desc { margin-top: 22px; max-width: 460px; font: 400 17px/27px var(--font-display); }
.site-footer__collab { margin-top: 14px; max-width: 460px; font: 600 16px/25px var(--font-display); color: #ffd9c2; }

.site-footer__heading {
  margin: 0 0 18px;
  font: 800 14px/20px var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a,
.site-footer__link-btn {
  padding: 0;
  font: 500 17px/24px var(--font-display);
  color: rgb(255 255 255 / .86);
  text-align: left;
  cursor: pointer;
  transition: color .18s ease;
}
.site-footer__links a:hover,
.site-footer__link-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact { display: flex; flex-direction: column; gap: 14px; }
.site-footer__contact li { width: 100%; }
.site-footer__email {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font: 600 17px/24px var(--font-display);
  color: #fff;
  white-space: nowrap;
}
.site-footer__email svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: #ffd9c2; }
a.site-footer__email:hover span { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__social { margin-top: 18px; }
.site-footer__social .social-link { border-color: rgb(255 255 255 / .3); color: #fff; }
.site-footer__social .social-link:hover { background: #fff; color: var(--brand); }

.site-footer__bar { border-top: 1px solid rgb(255 255 255 / .14); }
.site-footer__copy {
  max-width: 1152px;
  margin-inline: auto;
  padding: 22px 56px;
  font: 400 15px/22px var(--font-display);
  color: rgb(255 255 255 / .72);
}
/* Rich text: Quill wraps every line in <p>. */
.site-footer__copy p { margin: 0; }
/* Admin-written text: a long word, URL or run of non-breaking spaces breaks
   instead of widening its column. */
.site-footer__copy,
.site-footer__desc,
.site-footer__collab,
.richtext-content { overflow-wrap: anywhere; }
.site-footer__copy a { color: #fff; text-decoration: underline; }

/* ===========================================================================
   Modal — the Privacy Policy pop-up and the event image.
   =========================================================================== */
body.has-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgb(var(--brand-rgb) / .72); }
.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: min(84vh, 760px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgb(0 0 0 / .3);
  overflow: hidden;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.modal__title { font: 800 24px/32px var(--font-display); letter-spacing: -.4px; color: var(--ink); }
.modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}
.modal__close:hover { background: var(--surface-alt); }
.modal__body { padding: 24px 28px 28px; overflow-y: auto; }
.modal__body:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.modal__panel--image { max-width: 960px; max-height: min(90vh, 900px); }
.modal__body--image { display: grid; place-items: center; padding: 0; background: var(--surface-alt); }
.modal__body--image img { width: 100%; height: auto; max-height: min(90vh, 900px); object-fit: contain; }

/* Admin-authored rich text. Only the elements the sanitiser allows need rules. */
.richtext-content { font: 400 18px/29px var(--font-display); color: var(--ink-body); }
.richtext-content > :first-child { margin-top: 0; }
.richtext-content > :last-child { margin-bottom: 0; }
.richtext-content p { margin: 0 0 14px; }
.richtext-content h2,
.richtext-content h3,
.richtext-content h4 { margin: 26px 0 10px; font-family: var(--font-display); font-weight: 800; line-height: 1.35; color: var(--ink); }
.richtext-content h2 { font-size: 21px; }
.richtext-content h3 { font-size: 20px; }
.richtext-content h4 { font-size: 18px; }
.richtext-content ul,
.richtext-content ol { margin: 0 0 14px; padding-left: 22px; }
.richtext-content ul { list-style: disc; }
.richtext-content ol { list-style: decimal; }
.richtext-content li { margin-bottom: 8px; }
.richtext-content a { color: var(--brand); text-decoration: underline; }
.richtext-content blockquote { margin: 0 0 14px; padding-left: 18px; border-left: 3px solid var(--accent); }
.richtext-content strong { color: var(--ink); font-weight: 700; }
.richtext-content hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.richtext-content pre { margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--surface-alt); font-size: 15px; overflow-x: auto; }
.richtext-content code { font-size: .92em; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1120px) {
  .hero__title { font-size: 56px; letter-spacing: -1.4px; }
  .exhibitor-cta__title { font-size: 46px; }
}

/* Five menu items, the logo and the button need about 1040px; below that the
   menu folds into a drawer under the pill. */
@media (max-width: 1060px) {
  .header-toggle { display: grid; }
  .header-actions {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .header-actions.is-open { display: flex; }
  .header-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .header-nav a { display: block; padding: 12px 8px; font-size: 18px; border-radius: 10px; }
  .header-nav a::after { content: none; }
  .header-nav a:hover { background: var(--surface-alt); }
  .social-links { justify-content: center; }
  .header-cta { width: 100%; min-height: 54px; font-size: 17px; }
}

@media (max-width: 900px) {
  .site-header { inset-block-start: 14px; }
  .header-bar { min-height: 72px; padding: 8px 10px 8px 18px; }
  .header-logo img { width: min(var(--logo-w, 170px), 140px); }

  .hero { align-items: center; }
  .hero__inner { padding: 120px 8px 64px; }
  .hero__title { font-size: 44px; letter-spacing: -1px; }
  .hero__intro { font-size: 18px; line-height: 29px; }
  .hero__actions { margin-bottom: 44px; }
  .hero__stats { gap: 28px 44px; padding-top: 28px; }
  .hero__stat dt { font-size: 34px; }

  .section { padding: 72px var(--shell-gutter); }
  .section__inner { padding-inline: 0; }
  .section-title { font-size: 34px; letter-spacing: -.7px; }
  .section-sub, .prose p { font-size: 18px; line-height: 29px; }

  .about__inner,
  .collaboration__grid,
  .events__grid,
  .exhibit__grid { grid-template-columns: 1fr; gap: 36px; }
  .about__media { order: -1; }
  .collaboration__grid { margin-top: 40px; }
  .collaboration__logos { max-width: 460px; margin-inline: auto; width: 100%; }
  .exhibit__intro { position: static; }
  .cards--3 { grid-template-columns: 1fr; }
  .cards { margin-top: 40px; }
  .contact__grid--2,
  .contact__grid--3 { grid-template-columns: 1fr; max-width: 460px; }
  .contact__grid { margin-top: 40px; }
  .events__grid { margin-top: 40px; }

  .exhibitor-cta { min-height: 0; padding: 80px var(--shell-gutter); }
  .exhibitor-cta__title { font-size: 34px; letter-spacing: -.7px; }
  .exhibitor-cta__body { font-size: 18px; line-height: 29px; }

  .gallery__grid { margin-top: 40px; }
  .gallery__row,
  .gallery__row--top[data-tiles="1"],
  .gallery__row--top[data-tiles="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 200px;
  }
  .gallery__row .gallery__tile--hero { grid-column: 1 / -1; grid-row: auto; }
  .gallery__row .gallery__tile--b,
  .gallery__row .gallery__tile--c { grid-column: auto; grid-row: auto; }

  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 56px 24px 36px; gap: 36px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__copy { padding: 20px 24px; }

  .modal { padding: 14px; }
  .modal__panel { max-height: 88vh; }
  .modal__head { padding: 18px 20px; }
  .modal__title { font-size: 21px; line-height: 28px; }
  .modal__body { padding: 18px 20px 22px; }
}

@media (max-width: 600px) {
  .hero__inner { padding: 112px 0 56px; }
  .hero__badge { font-size: 15px; padding: 7px 14px; margin-bottom: 22px; }
  .hero__title { font-size: 36px; letter-spacing: -.6px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn { width: 100%; white-space: normal; }
  .hero__stats { gap: 22px; }
  .hero__stat { flex: 1 1 100%; }
  .hero__stat dt { font-size: 30px; }

  .section-title { font-size: 30px; }
  .cards--4 { grid-template-columns: 1fr; }
  .cards--4 .card { grid-template-columns: 1fr; }
  .cards--4 .card__icon { grid-row: auto; }
  .cards--4 .card__title { margin-top: 18px; }
  .card { padding: 26px 22px; }
  .form-panel { padding: 22px 18px; }
  .form--grid { grid-template-columns: 1fr; }
  .event-feature__body { padding: 22px; }
  .event-feature__title { font-size: 25px; }
  .events__more { flex-direction: column; padding: 24px 20px; }
  .highlight { font-size: 18px; line-height: 26px; }
  .contact-card { padding: 28px 16px 24px; }
  .contact-card__value { font-size: 18px; line-height: 26px; }

  .gallery__row,
  .gallery__row--top[data-tiles="1"],
  .gallery__row--top[data-tiles="2"] { grid-template-columns: 1fr; grid-auto-rows: 220px; }

  /* Footer on phones: one centred column — brand, then Explore, then
     Contact, each group set off by a hairline — with finger-sized links. */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 48px 20px 12px;
    text-align: center;
  }
  .site-footer__brand { display: flex; flex-direction: column; align-items: center; padding-bottom: 32px; }
  .site-footer__desc,
  .site-footer__collab { margin-inline: auto; }
  .site-footer__col { padding: 28px 0; border-top: 1px solid rgb(255 255 255 / .14); }
  .site-footer__heading { margin-bottom: 12px; }
  .site-footer__links { align-items: center; gap: 2px; }
  .site-footer__links a,
  .site-footer__link-btn { display: inline-block; padding: 10px 16px; text-align: center; }
  .site-footer__contact { align-items: center; gap: 6px; }
  .site-footer__contact li { width: auto; }
  .site-footer__email {
    justify-content: center;
    padding: 8px 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .site-footer__social { justify-content: center; }
  .site-footer__copy { padding: 20px 20px 24px; text-align: center; }
}

/* The smallest phones (iPhone SE and similar): a typical email address
   still fits on one line in the contact card. */
@media (max-width: 360px) {
  .contact-card__value { font-size: 16px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}