/* ============================================================
   Synergy 2027: info + registration page
   1. Co-mex tokens (verbatim copy), 2. local overrides, 3. page.
   Every colour, size and space comes from a --dx- / --syn- token.
   ============================================================ */
@import url('co-mex-tokens.css');
@import url('tokens-local.css');

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--syn-nav-h-page) + var(--syn-space-4)); }
body { overflow-x: hidden; }
h1, h2, h3 { color: var(--syn-ink); }
p + p { margin-top: var(--syn-space-4); }
strong { font-weight: 700; color: var(--syn-ink); }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--syn-space-4); top: calc(-1 * var(--syn-space-20));
  z-index: 100; background: var(--syn-ink); color: var(--dx-white);
  padding: var(--syn-space-3) var(--syn-space-4); border-radius: var(--syn-radius-button);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--syn-space-4); }

.container { max-width: var(--syn-max-hero); margin: 0 auto; padding: 0 var(--syn-gutter); }

/* Placeholder for anything not yet confirmed. Deliberately visible. */
.tbc {
  background: var(--syn-tint); color: var(--syn-ink);
  padding: 0 var(--syn-space-1); border-radius: 2px;
  font-weight: 600;
}

/* Text links: Bold Gray text (passes everywhere), green underline as the signal. */
.link {
  color: var(--syn-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--syn-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--syn-fast), background var(--syn-fast);
}
.link:hover { text-decoration-thickness: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--syn-space-2);
  font-family: var(--syn-font); font-weight: 700;
  font-size: var(--syn-fs-button); line-height: 1;
  letter-spacing: var(--syn-ls-button); text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: var(--syn-space-4) var(--syn-space-8);
  border-radius: var(--syn-radius-button);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--syn-base), color var(--syn-base), box-shadow var(--syn-fast), transform var(--syn-fast);
}
/* White on #30AB0D = 3.02:1, AA because the label is 19px bold (large text). */
.btn--primary { background: var(--syn-accent); color: var(--syn-on-accent); }
/* One green everywhere: hover lifts the button instead of darkening it. */
.btn--primary:hover { box-shadow: var(--syn-shadow-md); transform: translateY(-1px); }
/* Nav: small label, so Bold Gray on white (10.14:1); green border is the UI shape. */
.btn--ghost {
  color: var(--syn-ink); border-color: var(--syn-accent); background: var(--syn-surface);
  font-size: var(--syn-fs-body-sm); padding: var(--syn-space-3) var(--syn-space-5);
}
.btn--ghost:hover { background: var(--syn-tint); }
/* CoE outline button. Green label passes because it is 19px bold (large text). */
/* White fill, not transparent: green on the muted surface is only 2.89:1. */
.btn--outline { background: var(--syn-surface); color: var(--syn-accent); border-color: var(--syn-accent); }
.btn--outline:hover { background: var(--syn-accent); color: var(--syn-on-accent); }
/* CoE white button, on a green field only. Green 19px bold label on white: large text, passes. */
.btn--white { background: var(--dx-white); color: var(--syn-accent); border-color: var(--dx-white); }
.btn--white:hover { background: var(--syn-tint); border-color: var(--syn-tint); box-shadow: var(--syn-shadow-md); }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--syn-nav-h-page);
  background: var(--syn-surface);
  border-bottom: 1px solid var(--syn-border);
}
.site-nav__inner {
  height: 100%; display: flex; align-items: center; gap: var(--syn-space-4);
}
.site-nav__logo { display: inline-flex; margin-right: auto; }
.site-nav__logo img { height: var(--syn-logo-h); width: auto; }
.site-nav__links { display: flex; align-items: center; gap: var(--syn-space-1); }
.site-nav__links a {
  display: block; color: var(--syn-ink); text-decoration: none;
  font-size: var(--syn-fs-body-sm); font-weight: 600; letter-spacing: var(--syn-ls-nav);
  padding: var(--syn-space-2) var(--syn-space-3); border-radius: var(--syn-radius-button);
  text-decoration-color: var(--syn-accent); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav__links a:hover { text-decoration-line: underline; }
/* Current page: CoE's active pill, in the tint (Bold Gray on #E8F7E3 = 9.10:1). */
.site-nav__links a[aria-current="page"] { background: var(--syn-tint); }
.site-nav__toggle {
  display: none; width: 44px; height: 44px; padding: var(--syn-space-3) var(--syn-space-2);
  background: none; border: 0; border-radius: var(--syn-radius-button); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.site-nav__toggle span { display: block; height: 2px; background: var(--syn-ink); border-radius: 2px; transition: transform var(--syn-base), opacity var(--syn-base); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 959.98px) {
  .site-nav__toggle { display: flex; order: 3; }
  .site-nav__register { order: 2; }
  .site-nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--syn-surface); border-bottom: 1px solid var(--syn-border);
    box-shadow: var(--syn-shadow-md);
    padding: var(--syn-space-2) var(--syn-gutter) var(--syn-space-4);
  }
  .site-nav__menu.is-open { display: block; }
  .site-nav__links { flex-direction: column; align-items: stretch; }
  .site-nav__links a { padding: var(--syn-space-3) var(--syn-space-3); font-size: var(--syn-fs-body); border-bottom: 1px solid var(--syn-border); border-radius: 0; }
}
@media (max-width: 479.98px) {
  .site-nav__logo img { height: var(--syn-logo-h-sm); }
  .site-nav__inner { gap: var(--syn-space-2); }
}

/* ---------- Hero ----------
   The Co-mex composite key visual (seam, grey arc, disc and the lead
   rider breaking the seam) sits bottom-right at the hero's full height.
   Its panel side is white, so the lockup sits on white wherever the
   image is cropped. Under 960px the hero stacks: photo, then text. */
.hero { position: relative; overflow: hidden; background: var(--syn-panel); container-type: inline-size; }
.hero__stage { position: relative; }
.hero__img { display: block; }

.lockup__mark { display: block; width: var(--mark-w, clamp(220px, 24cqw, 380px)); height: auto; }
.lockup__meta {
  margin-top: var(--syn-space-4);
  font-size: var(--syn-fs-lead); line-height: 1.45; color: var(--syn-ink);
}
.lockup__tagline {
  margin-top: var(--syn-space-6);
  font-size: var(--tag-fs, clamp(24px, 2.8cqw, 40px)); font-weight: 700;
  line-height: 1.16; letter-spacing: var(--syn-ls-heading);
  text-transform: uppercase; color: var(--syn-ink);
}
.lockup__meta span, .lockup__tagline span { display: block; }
.lockup__tagline span + span { color: var(--syn-accent); }  /* >= 24px bold: large text, 3.02:1 passes */
.hero__cta {
  margin-top: var(--syn-space-8);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--syn-space-3) var(--syn-space-5);
}
.hero__deadline { font-size: var(--syn-fs-body-sm); line-height: var(--syn-lh-tight); color: var(--syn-ink); margin: 0; }
.hero__deadline strong { display: block; }

@media (min-width: 960px) {
  .hero { height: var(--syn-hero-h); }
  .hero__stage { position: absolute; inset: 0; }
  .hero__img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; }
  .hero__content {
    position: relative; z-index: 2; height: 100%;
    display: flex; align-items: center;
  }
  /* Explicit white: identical to the visual's panel side (the panel box is
     tested to stay >= 16px clear of any opaque pixel), and it lets contrast
     checkers resolve the background instead of guessing from the image. */
  .hero__panel { width: clamp(340px, 30cqw, 440px); background: var(--syn-panel); }
}
@media (max-width: 959.98px) {
  .hero__stage { aspect-ratio: 1.5; }
  .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
  .hero__content { padding-top: var(--syn-space-8); padding-bottom: var(--syn-space-18); }
  .hero__panel { --mark-w: clamp(200px, 50cqw, 320px); --tag-fs: clamp(24px, 6.4cqw, 36px); }
}
@media (max-width: 599.98px) {
  .hero__stage { aspect-ratio: var(--syn-kv-ratio-mobile); }
}

/* ============================================================
   Everything below the hero follows the Circle of Excellence
   design language (centred section heads with a 44px green rule,
   green-top cards, pill day labels, icon rows, green page banner,
   green CTA box, green footer), with its contrast failures fixed:
   small labels are Bold Gray, and green or white text only appears
   at WCAG large-text sizes (>= 24px, or >= 19px bold).
   ============================================================ */
.container--narrow { max-width: var(--syn-content); margin: 0 auto; padding: 0 var(--syn-gutter); }
.container--content { max-width: var(--syn-max); margin: 0 auto; padding: 0 var(--syn-gutter); }

.section { padding: var(--syn-section-y) 0; }
.section--muted { background: var(--syn-surface-muted); --syn-focus: var(--syn-ink); }

/* ---------- Page banner (sub-pages) ----------
   Primary Green band. The header image sits in the right corner under a
   translucent green layer, and its left edge fades into the green. The
   title column and the image box never overlap, so the white title always
   sits on flat #30AB0D (large text: 3.02:1 passes AA). */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--syn-accent); color: var(--dx-white);
  min-height: var(--syn-page-hero-h); display: flex; align-items: center;
  --syn-focus: var(--dx-white);
  --hero-text-w: min(560px, 46%);
}
.page-hero__media {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(max(var(--syn-gutter), (100% - var(--syn-max)) / 2 + var(--syn-gutter)) + var(--hero-text-w) + var(--syn-space-6));
}
/* Translucent green layer over the photo. */
.page-hero__media::after {
  content: ''; position: absolute; inset: 0; background-color: var(--syn-banner-overlay);
}
/* Screen blend: the photo's black studio background becomes exactly the banner
   green, and only the metal, glove and water highlights show through. */
.page-hero__media img {
  mix-blend-mode: screen; filter: grayscale(1);
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--syn-accent) 45%);
          mask-image: linear-gradient(to right, transparent 0, var(--syn-accent) 45%);
}
.page-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: var(--syn-space-13); padding-bottom: var(--syn-space-13); }
.page-hero__text { max-width: var(--hero-text-w); }
.page-hero h1 {
  color: var(--dx-white); font-size: var(--syn-fs-h1); font-weight: 700;
  line-height: var(--syn-lh-heading); letter-spacing: var(--syn-ls-heading);
}
.page-hero p { margin-top: var(--syn-space-3); font-size: var(--syn-fs-button); font-weight: 700; }  /* 19px bold: large text on green */
@media (max-width: 759.98px) {
  .page-hero { display: block; min-height: 0; }
  .page-hero__media { position: relative; left: auto; height: clamp(160px, 46vw, 300px); }
  /* The screen blend already turns the photo's black into banner green; no
     masks here (stacked masks break the blend in Chromium). The green layer
     fades the bottom edge so the title below sits on flat green. */
  .page-hero__media img { -webkit-mask-image: none; mask-image: none; }
  .page-hero__media::after { background: linear-gradient(to top, var(--syn-accent), transparent 45%), var(--syn-banner-overlay); }
  .page-hero__inner { padding-top: 0; padding-bottom: var(--syn-space-10); }
  .page-hero__text { max-width: none; }
}

/* Inside pages: content columns share the banner title's left edge, and the
   first section sits closer to its banner. */
.page-hero + .section { padding-top: var(--syn-space-20); }
.kbyg-list { max-width: var(--syn-content); }

/* ---------- Banner wipe (all inside pages) ----------
   Starts as the black banner: the photo, unblended, fading into black.
   One second after load (main.js adds .is-covered) the green banner,
   identical to the other pages, is revealed left to right and stays.
   Text is white on black before and white on green after. */
.page-hero--wipe { background: var(--syn-header-dark); }
.page-hero__media--dark img { mix-blend-mode: normal; filter: none; }
.page-hero__media--dark::after { display: none; }
/* Feathered wipe: a gradient mask with a soft leading edge (--syn-wipe-feather
   wide) slides from left to right. --wipe is the position of the edge's
   transparent end: 0% = fully hidden, 100% + feather = fully shown. */
@property --wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.page-hero__wipe {
  position: absolute; inset: 0; background: var(--syn-accent);
  --wipe: 0%;
  -webkit-mask-image: linear-gradient(to right, var(--syn-header-dark) calc(var(--wipe) - var(--syn-wipe-feather)), transparent var(--wipe));
          mask-image: linear-gradient(to right, var(--syn-header-dark) calc(var(--wipe) - var(--syn-wipe-feather)), transparent var(--wipe));
  transition: --wipe var(--syn-wipe-duration) cubic-bezier(.45, 0, .25, 1);
}
.page-hero--wipe.is-covered .page-hero__wipe { --wipe: calc(100% + var(--syn-wipe-feather)); }
@media (max-width: 759.98px) {
  .page-hero__media--dark::after { display: block; background: linear-gradient(to top, var(--syn-header-dark), transparent 45%); }
}

/* ---------- Section head (CoE .s-head) ---------- */
.s-head { text-align: center; margin-bottom: var(--syn-head-gap); }
.s-head__title {
  font-size: var(--syn-fs-h2); font-weight: 700;
  line-height: var(--syn-lh-heading); letter-spacing: var(--syn-ls-heading);
}
.s-head__line {
  width: 44px; height: 3px; background: var(--syn-accent); border-radius: 2px;
  margin: var(--syn-space-5) auto var(--syn-space-4);
}
.s-head__sub { color: var(--syn-muted); max-width: 520px; margin: 0 auto; }

/* ---------- Home: welcome (CoE .welcome) ---------- */
.welcome { text-align: center; }
.welcome .s-head { margin-bottom: var(--syn-space-8); }
.welcome__body { max-width: var(--syn-content); margin: 0 auto; line-height: 1.82; }
.welcome__body + .welcome__body { margin-top: var(--syn-space-4); }
.welcome__signoff { margin-top: var(--syn-space-6) !important; font-weight: 700; color: var(--syn-ink); }
.countdown {
  display: inline-flex; align-items: baseline; gap: var(--syn-space-2);
  margin-top: var(--syn-space-8);
  padding: var(--syn-space-2) var(--syn-space-6); border-radius: var(--syn-radius-pill);
  background: var(--syn-tint); color: var(--syn-ink);
}
.countdown__num { font-size: var(--syn-fs-h3); font-weight: 700; }
.countdown__label { font-weight: 600; }
.welcome__actions { margin-top: var(--syn-space-10); display: flex; gap: var(--syn-space-4); justify-content: center; flex-wrap: wrap; }

/* ---------- Home: event at a glance (CoE .glance cards) ---------- */
.glance__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--syn-space-5); }
.glance__card {
  background: var(--syn-surface); border-radius: var(--syn-radius-card);
  border-top: 3px solid var(--syn-accent); box-shadow: var(--syn-shadow-sm);
  padding: var(--syn-space-8) var(--syn-space-5); text-align: center;
  transition: box-shadow var(--syn-base), transform var(--syn-base);
}
.glance__card:hover { box-shadow: var(--syn-shadow-md); transform: translateY(-2px); }
.glance__card img { width: 68px; height: 68px; margin: 0 auto var(--syn-space-4); }
.glance__card h3 {
  font-size: var(--syn-fs-label); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--syn-space-2);
}
.glance__card p { font-size: var(--syn-fs-body-sm); line-height: var(--syn-lh-tight); color: var(--syn-body); }
.glance__footer { text-align: center; margin-top: var(--syn-space-10); }
@media (max-width: 899.98px) { .glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) {
  .glance__grid { gap: var(--syn-space-3); }
  .glance__card { padding: var(--syn-space-5) var(--syn-space-3); }
  .glance__card img { width: var(--syn-space-13); height: var(--syn-space-13); }
}

/* ---------- CTA box (CoE .contact-cta) ---------- */
/* After another white section, don't stack two section paddings. */
.section:not(.section--muted) + .cta-section { padding-top: 0; }
.cta {
  background: var(--syn-accent); color: var(--dx-white); text-align: center;
  border-radius: var(--syn-radius-card);
  padding: var(--syn-space-18) var(--syn-gutter);
  --syn-focus: var(--dx-white);
}
.cta h2 { color: var(--dx-white); font-size: var(--syn-fs-h2); font-weight: 700; line-height: var(--syn-lh-heading); }
.cta p { font-size: var(--syn-fs-body); line-height: var(--syn-lh-body); max-width: 520px; margin: var(--syn-space-3) auto 0; }
.cta p + p { margin-top: var(--syn-space-1); }
.cta .tbc { font-weight: 700; }
.cta__action { margin-top: var(--syn-space-10); }
@media (max-width: 479.98px) { .cta .btn { white-space: normal; } }

/* ---------- Agenda (CoE .agenda-wrap) ---------- */
.agenda-wrap { max-width: 740px; }
.agenda-note {
  background: var(--syn-tint); border-left: 4px solid var(--syn-accent);
  border-radius: 0 8px 8px 0; padding: var(--syn-space-5) var(--syn-space-6);
  font-size: var(--syn-fs-body-sm); line-height: 1.65; color: var(--syn-ink);
  margin-bottom: var(--syn-space-13);
}
.day-block { margin-bottom: var(--syn-space-10); }
.day-header { display: flex; align-items: center; margin-bottom: var(--syn-space-2); }
/* Pill label: 19px bold keeps white on green at AA (CoE's was 12px and failed). */
.day-label {
  background: var(--syn-accent); color: var(--dx-white);
  font-size: var(--syn-fs-button); font-weight: 700; line-height: 1.2;
  letter-spacing: var(--syn-ls-button); text-transform: uppercase;
  padding: var(--syn-space-2) var(--syn-space-5); border-radius: var(--syn-radius-pill); white-space: nowrap;
}
.day-rule { flex: 1; height: 1px; background: var(--syn-border); margin-left: var(--syn-space-4); }
.event-row {
  display: flex; align-items: flex-start; gap: var(--syn-space-4);
  padding: var(--syn-space-3); border-radius: var(--syn-radius-button);
  transition: background var(--syn-fast);
}
.event-row:hover { background: var(--syn-surface-muted); }
.event-dot { width: 7px; height: 7px; flex: none; margin-top: 9px; background: var(--syn-accent); border-radius: 50%; }
.event-dot--light { background: var(--dx-cool-gray); }
.event-desc { font-size: var(--syn-fs-body-sm); font-weight: 500; color: var(--syn-ink); line-height: 1.55; }
.event-desc--light { color: var(--syn-muted); font-weight: 400; font-style: italic; }

/* ---------- Practical info (CoE .kbyg-block) ---------- */
.kbyg-block {
  display: flex; align-items: flex-start; gap: var(--syn-space-10);
  padding: var(--syn-space-13) 0; border-bottom: 1px solid var(--syn-border);
}
.kbyg-block:first-child { padding-top: 0; }
.kbyg-block:last-child { border-bottom: 0; padding-bottom: 0; }
.kbyg-icon { flex: none; width: 88px; text-align: center; }
.kbyg-icon img { width: 74px; height: 74px; margin: 0 auto; }
/* Green 19px bold uppercase: large text, passes on white. */
.kbyg-body h2 {
  font-size: var(--syn-fs-h4); font-weight: 700; color: var(--syn-accent);
  text-transform: uppercase; letter-spacing: var(--syn-ls-nav); margin-bottom: var(--syn-space-4);
}
.kbyg-body p { line-height: 1.78; }
.kbyg-body p + p { margin-top: var(--syn-space-3); }
.kbyg-body address { font-style: normal; color: var(--syn-ink); margin-top: var(--syn-space-3); }
.checklist { margin-top: var(--syn-space-4); }
.checklist li { position: relative; padding: var(--syn-space-1) 0 var(--syn-space-1) var(--syn-space-6); line-height: 1.5; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--syn-accent); font-weight: 700; }
@media (max-width: 699.98px) {
  .kbyg-block { flex-direction: column; gap: var(--syn-space-4); padding: var(--syn-space-10) 0; }
  .kbyg-icon { width: auto; }
  .kbyg-icon img { margin: 0; }
}

/* ---------- FAQ (CoE .schedule-summary styling, as an accordion) ---------- */
.faq-list { max-width: var(--syn-content); }
.faq-item {
  background: var(--syn-surface-muted); border-left: 4px solid var(--syn-accent);
  border-radius: var(--syn-radius-card); margin-bottom: var(--syn-space-5);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--syn-space-6);
  padding: var(--syn-space-5) var(--syn-space-6);
  font-weight: 700; line-height: var(--syn-lh-tight); color: var(--syn-ink);
  border-radius: var(--syn-radius-card);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: var(--syn-space-4); height: var(--syn-space-4); margin-top: var(--syn-space-1);
  background:
    linear-gradient(var(--syn-accent), var(--syn-accent)) center / 100% 3px no-repeat,
    linear-gradient(var(--syn-accent), var(--syn-accent)) center / 3px 100% no-repeat;
  transition: transform var(--syn-base);
}
.faq-item.is-open summary::after, .faq-item[open]:not(.js-faq) summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--syn-tint); }
/* No padding on the animated box, so its height can reach 0 (main.js animates it). */
.faq-item__answer { overflow: hidden; }
.faq-item__answer > p { padding: 0 var(--syn-space-6) var(--syn-space-6); }

/* ---------- Contact (CoE .contact-card) ---------- */
.contact-intro { max-width: 580px; margin: 0 auto var(--syn-space-13); text-align: center; line-height: 1.7; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--syn-space-6); }
.contact-card {
  display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: var(--syn-space-6); align-items: start;
  background: var(--syn-surface-muted); border-radius: var(--syn-radius-card);
  border-top: 3px solid var(--syn-accent); box-shadow: var(--syn-shadow-sm);
  padding: var(--syn-space-6);
  --syn-focus: var(--syn-ink);
}
/* CoE team photo framing: 3:4 portrait, card radius. */
.contact-card__photo { display: block; aspect-ratio: 3 / 4; border-radius: var(--syn-radius-card); overflow: hidden; background: var(--syn-border); }
.contact-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-card__body h2:first-of-type { margin-top: var(--syn-space-4); }
/* Name at 19px bold in Bold Gray (CoE's 14px green title failed AA). */
.contact-card h2 { font-size: var(--syn-fs-h4); font-weight: 700; color: var(--syn-ink); }
.contact-card__for { color: var(--syn-body); }
.contact-card__role { color: var(--syn-ink); }
.contact-card .link { display: inline-block; margin-top: var(--syn-space-3); word-break: break-word; }
.contact-note {
  background: var(--syn-tint); border-left: 4px solid var(--syn-accent);
  border-radius: 0 8px 8px 0; padding: var(--syn-space-5) var(--syn-space-6);
  margin-top: var(--syn-space-10); color: var(--syn-ink);
}
.contact-note address { font-style: normal; display: inline; }
@media (max-width: 1023.98px) { .contact-cards { grid-template-columns: 1fr; } }
@media (max-width: 419.98px) { .contact-card { grid-template-columns: 1fr; } .contact-card__photo { width: 45%; } }

/* ---------- Footer ----------
   The one brand green, #30AB0D, with links in exactly the nav-link type. */
.site-footer {
  background: var(--syn-accent); color: var(--dx-white); text-align: center;
  padding: var(--syn-space-13) var(--syn-gutter);
  --syn-focus: var(--dx-white);
}
.site-footer__inner { max-width: var(--syn-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--syn-space-5); }
.site-footer__logo { height: var(--syn-logo-h); width: auto; filter: brightness(0) invert(1); }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--syn-space-1); }
.site-footer__links a {
  display: block; color: var(--dx-white); text-decoration: none;
  font-size: var(--syn-fs-body-sm); font-weight: 600; letter-spacing: var(--syn-ls-nav);
  padding: var(--syn-space-2) var(--syn-space-3); border-radius: var(--syn-radius-button);
  text-decoration-color: var(--dx-white); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-footer__links a:hover { text-decoration-line: underline; }
.site-footer__links a[aria-current="page"] { text-decoration-line: underline; }
.site-footer__copy { font-size: var(--syn-fs-body-sm); color: var(--dx-white); }

/* ---------- Scroll reveal (CoE .fade-up, gated) ----------
   Only active once main.js adds .reveal-ready to <html> (JS on, motion
   allowed), so the page is fully visible without JS or with reduced motion. */
.reveal-ready [data-reveal]:not(section) {
  opacity: 0;
  transform: translate3d(0, var(--syn-reveal-shift), 0);
  transition: opacity var(--syn-slow) ease, transform var(--syn-slow) var(--syn-reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal="fade"]:not(section) { transform: none; }
.reveal-ready [data-reveal].is-visible:not(section) { opacity: 1; transform: none; }
/* Revealed by keyboard focus: no stagger, no slide. */
.reveal-ready [data-reveal].is-focus-revealed:not(section) { transition-delay: 0ms; transition-duration: var(--syn-fast); }