/* A consistent section rhythm with alternating full-width surfaces. */
:root { --section-space: clamp(56px, 6vw, 88px); }
.hero, #industry, #pathway, #register {
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
}
.hero { padding-block: 30px 34px; }
/* The hero image is sized from viewport WIDTH elsewhere, which on a short
   screen pushes the stats and institution strips past the fold and clips
   the logos. Cap it against the remaining viewport HEIGHT as well:
   100dvh - header(95) - hero padding(64) - figcaption(29) - stats(76)
   - institution(71), rounded to a round 300.
   The pre-attendance QR is a modal, not an inline card, precisely so
   this budget does not have to grow - an inline QR block measured
   headroom at -74px here. */
.hero-media img { max-height: calc(100dvh - 370px); }

/* On a short viewport the hero TEXT becomes the binding constraint (the
   h1 alone runs ~244px), so the strips still fall past the fold. Scale
   the headline and its spacing down with viewport height, not width. */
@media (min-width: 701px) and (max-height: 820px) {
  .hero { padding-block: 22px 26px; gap: 40px; }
  .hero h1 { font-size: clamp(40px, 7.2vh, 64px); }
  .hero-copy > p { font-size: 15px; margin-top: 14px; }
  .hero-actions { margin-top: 18px; }
  .hero-meta { gap: 9px; margin-bottom: 12px; }
  .institution { padding-block: 12px 14px; }
  .institution-logo[src*=mogc] { height: 26px; }
  .institution-logo[src*=tvetmara] { height: 23px; }
  .facts-inner { padding-block: 10px; }
  .fact strong { font-size: 30px; }
}

.institution {
  padding-block: 18px 22px;
  align-items: center;
  border-top: 1px solid var(--line);
}
/* Keep both marks on one line with their institution name, and sized so
   the strip stays compact rather than running past the fold. */
.institution-brand { align-items: center; }
.institution-logo[src*=mogc] { height: 30px; }
.institution-logo[src*=tvetmara] { height: 26px; }
#industry, #worlds, #pathway, #register { padding-block: var(--section-space); }
#industry, .pathway-band {
  background: var(--soft);
  border-block: 1px solid var(--line);
}
#industry .section-heading, #worlds .section-heading, #pathway .section-heading {
  margin-bottom: 36px;
}
#industry .section-heading h2::before,
#worlds .section-heading h2::before,
#pathway .section-heading h2::before {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: var(--brand-red);
}
#industry .industry-tabs { margin-bottom: 28px; }
#industry .industry-photo figcaption { background: transparent; }
#industry .equipment-detail, #industry .equipment-list { background: var(--white); }
#finder { padding-block: 48px 0; background: var(--white); }
#finder .finder-cta-inner {
  padding: clamp(28px, 3.5vw, 48px);
  border: 0;
  border-left: 4px solid var(--brand-red);
  border-radius: 14px;
  background: var(--brand-navy);
}
#finder h2 { color: #fff; }
#finder p { color: #d3deef; }
#pathway { background: transparent; }
#pathway .learning-panel {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 8px 24px -18px #061c4333;
}
#register { background: var(--white); border-top: 0; }
#register .event-facts {
  padding: 24px;
  margin-block: 32px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.site-footer { border-top: 3px solid var(--brand-blue); }
@media (min-width: 1000px) {
  #pathway { gap: 28px 40px; }
  #pathway > .section-heading { margin-bottom: 8px; }
}
@media (max-width: 700px) {
  :root { --section-space: 48px; }
  .hero { padding-block: 28px 36px; }
  .institution { padding-block: 14px 18px; }
  .institution-logo[src*=mogc] { height: 25px; }
  .institution-logo[src*=tvetmara] { height: 22px; }
  .institution-brand + .institution-brand { margin-top: 10px; }
  #industry .section-heading, #worlds .section-heading, #pathway .section-heading { margin-bottom: 28px; }
  #industry .industry-tabs { position: static; background: transparent; padding-top: 0; }
  #finder { padding-top: 32px; }
  #register .event-facts { padding: 20px; margin-block: 28px; }
}
@media (max-width: 400px) {
  #industry .industry-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #industry .industry-tab { min-width: 0; font-size: 12px; }
  #industry .industry-tab span { display: block; margin-bottom: 4px; font-size: 10px; }
}

/* ============================================================
   EVENT PROMINENCE
   The expo is the reason the site exists, so it gets a real
   presence: a solid hero badge, a nav entry, and a section
   heading that leads with the dates.
   ============================================================ */

/* --- Hero badge ---------------------------------------------------
   Sits on white with a red left rule, the same accent the finder CTA
   and the event facts card use, so it reads as part of the page
   rather than a foreign dark chip. -------------------------------- */
.event-intro {
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 2px 14px;
  border: 0;
  border-left: 3px solid var(--brand-red);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.event-intro:hover { background: none; }
.event-intro:hover .event-intro-meta { color: var(--brand-red); }
.event-intro > span.event-intro-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.event-intro-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  transition: color .2s ease;
}
.event-intro-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9aa8bd;
}
.event-intro .icon { width: 14px; height: 14px; color: var(--brand-red); }
.event-intro-meta strong { font-weight: 800; }

/* --- Nav entry so the expo is reachable from any scroll position --- */
.nav-event {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-event-date {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 20px;
  background: #fde8ea;
  color: var(--brand-red);
}
.nav-event:hover .nav-event-date { background: var(--brand-red); color: #fff; }

/* --- Section heading leads with a live marker and a lede --- */
.event-kicker { display: flex; align-items: center; gap: 9px; }
.event-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 4px #c908181f;
  flex: none;
}
.event-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  margin-top: 14px;
}

/* --- Facts card: dates carry the most weight --- */
#register .event-facts { border-left: 4px solid var(--brand-red); }
#register .event-facts dd { font-size: 18px; }
#register .event-facts > div:first-child dd { font-size: 21px; color: var(--brand-navy); }

@media (max-width: 700px) {
  .event-intro { padding: 2px 0 2px 12px; }
  .event-intro > span.event-intro-tag { font-size: 9px; }
  .event-intro-meta { font-size: 12px; gap: 6px; }
  .event-lede { font-size: 15px; margin-top: 12px; }
  #register .event-facts > div:first-child dd { font-size: 19px; }
}

/* The expo link adds a seventh nav item, so stop labels breaking across
   two lines and tighten the row to absorb it. */
.primary-nav > a,
.primary-nav .nav-worlds > summary { white-space: nowrap; }
@media (min-width: 701px) {
  .primary-nav { gap: 22px; }
}
@media (min-width: 701px) and (max-width: 1500px) {
  .primary-nav { gap: 16px; font-size: 13px; }
  .nav-event-date { font-size: 9px; padding: 3px 6px; }
}
@media (min-width: 701px) and (max-width: 1320px) {
  /* Below this the date pill is the first thing that can go. */
  .nav-event-date { display: none; }
}

/* Bahasa Melayu runs longer and wraps to more lines, and its own h1 rule
   (brand.css) is width-based, so the hero outgrows the viewport and pushes
   the logo strip out of the first screen. Scale it by height too. */
@media (min-width: 701px) {
  html[lang=ms] .hero h1 { font-size: clamp(34px, 5.4vh, 64px); }
  html[lang=ms] .hero-copy > p { font-size: 15px; margin-top: 14px; }
}

/* Keep the badge on one line in both languages, and stop the hero buttons
   stacking on wide screens where there is ample room. */
.event-intro-meta { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 1100px) {
  .hero-actions { flex-direction: row; align-items: center; }
}

/* ============================================================
   EVENT SECTION - fit one viewport
   The section ran ~939px against an ~800px viewport. Compress the
   generous rhythm here so the whole expo block reads at a glance,
   without touching the other sections' spacing.
   ============================================================ */
@media (min-width: 901px) {
  #register { padding-block: 36px; }
  #register .event-heading { margin-bottom: 0; gap: 28px; align-items: start; }
  #register .event-heading h2 { font-size: clamp(34px, 3.4vw, 50px); }
  #register .event-lede { font-size: 15px; margin-top: 10px; max-width: 40ch; }
  #register .event-kicker { margin-bottom: 10px; }
  #register .event-facts { padding: 16px 20px; margin-block: 18px; }
  #register .event-facts dd { font-size: 16px; }
  #register .event-facts > div:first-child dd { font-size: 18px; }
  #register .event-facts dt { margin-bottom: 4px; }
  /* Left column stretches so the button sits level with the poster's
     foot instead of leaving a tall gap beneath it. */
  #register .event-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
  #register .event-story { display: flex; flex-direction: column; }
  #register .event-story .button { align-self: flex-start; margin-top: auto; }
  #register .event-heading .event-message { max-width: 16ch !important; }
  #register .event-story h3 { font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 9px; }
  #register .event-registration { font-size: 11px; margin-bottom: 14px; }
  #register .event-poster figcaption { padding-top: 9px; font-size: 9px; }
}
/* Shorter screens need the headline and lede to give up more. */
@media (min-width: 901px) and (max-height: 860px) {
  #register { padding-block: 22px; }
  #register .event-heading h2 { font-size: clamp(28px, 2.8vw, 38px); }
  #register .event-lede { display: none; }
  #register .event-facts { padding: 12px 16px; margin-block: 12px; }
  #register .event-facts dd { font-size: 15px; }
  #register .event-facts > div:first-child dd { font-size: 17px; }
  #register .event-registration { margin-bottom: 11px; }
  #register .event-poster { max-width: 520px; margin-left: auto; }
}

/* ============================================================
   REGISTRATION CTA + FINDER -> EXPO LINK
   The expo section used to end with a button that sent people back
   to the directory they came from, and the finder result never
   mentioned the event at all. Both now lead somewhere.
   ============================================================ */
.event-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin-top: auto;
  padding-top: 16px;
}
.event-action { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.event-action-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 6px;
}
.event-action .event-registration { margin-bottom: 12px; }
.event-action .button { margin-top: auto; }
/* Honest state: the link is not live yet, so it reads as an announcement
   rather than a button that pretends to do something. */
.event-actions .button.is-pending {
  background: var(--soft);
  color: var(--brand-navy);
  border: 1px dashed #b8c9e0;
  cursor: default;
}
.event-actions .button.is-pending:hover { background: #eaf0f9; color: var(--brand-navy); }
.event-actions .button.is-pending .icon { color: var(--brand-red); }
.event-call { font-size: 12px; margin-top: 9px; }
/* The employer path is secondary to the student CTA, so keep it outlined
   rather than a second solid button competing for the same attention. */
.event-actions .button--ghost {
  background: var(--white);
  color: var(--brand-blue);
  border: 1px solid #b8c9e0;
}
.event-actions .button--ghost:hover {
  background: var(--soft);
  color: var(--brand-navy);
  border-color: var(--brand-blue);
}
.event-actions .button--ghost .icon { color: var(--brand-blue); }

/* Finder result -> expo. The one place a matched student is told the
   event exists. */
.result-expo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-red);
  border-radius: 10px;
  background: var(--white);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.result-expo:hover { border-color: var(--brand-blue); background: var(--soft); }
.result-expo-label {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: var(--brand-navy);
  line-height: 1.35;
}
.result-expo-detail { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.result-expo > span:first-child { flex: 1; min-width: 0; }
.result-expo .icon { width: 18px; height: 18px; color: var(--brand-red); flex: none; }

@media (max-width: 700px) {
  .event-actions { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .event-actions .button { width: 100%; justify-content: space-between; }
  .result-expo { padding: 12px 14px; gap: 10px; }
}

/* ============================================================
   EVENT STORY — tighten the left column
   It read as five loose blocks stranded in whitespace, with the
   two CTAs floating at different heights. Group it into three
   bands: journey → pitch → a bordered "Take part" panel.
   ============================================================ */
@media (min-width: 901px) {
  #register .event-story { gap: 0; }

  /* Journey and pitch sit close together as one unit. */

  /* The CTA pair becomes one panel instead of two floating columns. */
  #register .event-actions {
    margin-top: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    gap: 18px 24px;
    row-gap: 0;
  }
  #register .event-actions-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  /* A rule between the two paths, so they read as alternatives. */
  #register .event-action + .event-action {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }
  /* Each path is its own column so the two buttons land on one
     baseline no matter how long the blurb above them runs. */
  /* Subgrid keeps the label / blurb / button / call-link rows aligned
     across both columns, so the two buttons share one baseline even
     though only the employer column has a trailing phone link. */
  #register .event-actions { grid-template-rows: auto auto 1fr auto auto; }
  #register .event-action {
    display: grid;
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  /* Pin each child to a named row. Without this the employer column's
     extra phone link shifts its button down once BM's longer copy
     wraps to another line. */
  #register .event-action .event-action-label { grid-row: 1; }
  #register .event-action .event-registration { grid-row: 2; align-self: start; }
  /* Stretch rather than end-align: the two buttons have different
     intrinsic heights (the pending one wraps in BM), so aligning by
     the bottom edge left their tops out of line. */
  #register .event-actions .button { grid-row: 3; align-self: stretch; }
  #register .event-call { grid-row: 4; }
  #register .event-action .event-registration {
    font-size: 11.5px;
    line-height: 1.55;
    margin: 0 0 14px;
  }
  #register .event-actions .button {
    width: 100%;
    justify-content: space-between;
    min-height: 50px;
    font-size: 13px;
    /* BM labels are longer than EN. Let the text shrink a little and stay
       on one line instead of wrapping, which used to make this button
       taller than its neighbour and break the shared baseline. */
    white-space: nowrap;
    gap: 12px;
  }
  #register .event-actions .button > .icon { flex: none; }
  html[lang=ms] #register .event-actions .button { font-size: 12px; padding-inline: 14px; }
  #register .event-call { margin-top: 10px; font-size: 11.5px; }
}

@media (min-width: 901px) and (max-height: 860px) {
  #register .event-actions { padding: 14px 16px; }
  #register .event-actions-title { margin-bottom: 10px; padding-bottom: 8px; }
  #register .event-action .event-registration { margin-bottom: 10px; }
}

/* ============================================================
   FACTS MOVED INTO THE LEFT COLUMN
   The when/where/region band ran the full width and pushed the
   poster down to half size. It now stacks in the narrow left
   column so the poster — the real draw — gets the wide side.
   ============================================================ */
@media (min-width: 901px) {
  /* Narrow details column, wide poster. */
  #register .event-content { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 34px; }

  #register .event-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 14px 16px;
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-red);
    border-radius: 12px;
    background: var(--soft);
  }
  #register .event-facts > div { padding: 9px 0; }
  #register .event-facts > div + div { border-top: 1px solid var(--line); }
  #register .event-facts dt {
    font-size: 9px;
    letter-spacing: .13em;
    margin-bottom: 3px;
  }
  #register .event-facts dd,
  #register .event-facts > div:first-child dd { font-size: 14px; line-height: 1.4; }

  /* The poster is now the widest thing in the section. */
  #register .event-poster { max-width: none; align-self: start; }
  #register .event-poster img { width: 100%; height: auto; }
}
@media (min-width: 901px) and (max-height: 860px) {
  #register .event-facts { padding: 11px 14px; margin-bottom: 12px; }
  #register .event-facts > div { padding: 7px 0; }
  #register .event-facts dd,
  #register .event-facts > div:first-child dd { font-size: 13px; }
}

/* ============================================================
   INDUSTRY SECTION - FIT ONE VIEWPORT
   Measured over http://career.test/ the section ran 734px at
   1366x768 against 519px of usable height, 804/651 at 1440x900
   and 970/831 at 1920x1080 - roughly 140-215px too tall
   everywhere. The section padding alone was 161-176px, so that
   is the first lever; the rest comes from the heading block,
   the tab rule and the equipment panel, which carried desktop
   spacing that a laptop screen cannot afford.
   Only applies where there is a real two-column layout (>=901px)
   and the viewport is short enough to need it. Phones keep the
   stacked, scrolling layout untouched.
   ============================================================ */
@media (min-width: 901px) and (max-height: 1000px) {
  #industry { padding-block: clamp(28px, 4.2vh, 52px); }

  /* The rule + heading + lede stack was 116-124px. */
  #industry .section-heading { margin-bottom: clamp(14px, 2.2vh, 26px); }
  #industry .section-heading h2 { font-size: clamp(30px, 4.6vh, 46px); line-height: 1.08; }
  #industry .section-heading h2::before { width: 36px; height: 3px; margin-bottom: clamp(8px, 1.4vh, 16px); }
  #industry .section-heading > p { font-size: 14px; line-height: 1.6; }

  #industry .industry-tabs { margin-bottom: clamp(12px, 2vh, 22px); }
  #industry .industry-tab { font-size: 16px; padding-bottom: 9px; }

  /* Equipment panel: the detail card and chip row together ran
     194px of a 353px column. Tighten both, and cap the detail so
     a long description scrolls inside the card instead of
     stretching the whole section. */
  #industry .industry-copy h3 { font-size: clamp(20px, 3vh, 26px); margin-bottom: 8px; }
  #industry .industry-copy > p { font-size: 13.5px; line-height: 1.55; }
  #industry .industry-links { margin: 10px 0; }
  #industry .industry-links a { padding: 8px 0; font-size: 11.5px; }
  #industry .industry-copy > .button { min-height: 42px; padding: 10px 16px; font-size: 12.5px; }

  #industry .equipment-detail {
    min-height: 0;
    padding: 11px 14px;
    margin-top: 12px;
  }
  #industry .equipment-detail h3 { font-size: 17px; margin: 5px 0 4px; }
  #industry .equipment-detail p { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
  #industry .equipment-detail a { font-size: 12px; }
  #industry .equipment-list { padding: 8px; gap: 5px; }
  #industry .equipment-chip { font-size: 10.5px; padding: 7px 9px; }
  #industry .industry-photo figcaption { margin-top: 6px; font-size: 9px; }

  /* The photo grew with viewport WIDTH, so on a wide-but-short
     screen it alone overran the fold and became the tallest thing
     in the section. The image is 3:2 inside .equipment-stage, so
     capping the stage HEIGHT is what actually bounds it - capping
     its width does nothing once the column is narrower than that.
     Budget: viewport - header(95) - section padding(~56)
     - heading(~76) - tabs(~35) - figcaption(~21) - breathing room. */
  #industry .equipment-stage {
    max-height: calc(100vh - 350px);
    margin-inline: auto;
  }
  #industry .equipment-stage img { max-height: calc(100vh - 350px); object-fit: contain; }
}

/* Laptop screens - the tightest case measured (519px usable).
   BM runs ~20px taller than EN here because the longer equipment
   description wraps an extra line, so the margin is cut for both
   rather than only for html[lang=ms]: keeping one set of numbers
   avoids the two languages drifting apart again later. */
@media (min-width: 901px) and (max-height: 800px) {
  #industry .section-heading > p { font-size: 13px; }
  #industry .section-heading { margin-bottom: 12px; }
  #industry .equipment-detail p { margin-bottom: 6px; line-height: 1.45; }
  #industry .equipment-detail { padding: 10px 13px; margin-top: 10px; }
  #industry .industry-links { margin: 8px 0; }
  #industry .equipment-stage,
  #industry .equipment-stage img { max-height: calc(100vh - 300px); }
}

/* 1280x720 and other short laptops: the copy column, not the
   photo, is what overruns here (BM was 55px over). Drop the
   equipment description to the essentials and let the chip row
   carry the rest. */
@media (min-width: 901px) and (max-height: 620px) {
  #industry { padding-block: 22px; }
  #industry .section-heading { margin-bottom: 10px; }
  #industry .section-heading h2 { font-size: 28px; }
  #industry .section-heading h2::before { margin-bottom: 8px; }
  #industry .section-heading > p { font-size: 12.5px; }
  #industry .industry-tabs { margin-bottom: 10px; }
  #industry .industry-copy h3 { font-size: 19px; }
  #industry .industry-copy > p { font-size: 12.5px; line-height: 1.45; }
  #industry .equipment-detail { padding: 9px 12px; margin-top: 8px; }
  #industry .equipment-detail h3 { font-size: 15px; }
  #industry .equipment-detail p { font-size: 12px; line-height: 1.4; margin-bottom: 5px; }
  #industry .equipment-list { padding: 6px; }
  #industry .equipment-chip { font-size: 10px; padding: 6px 8px; }
  #industry .industry-copy > .button { min-height: 38px; padding: 9px 14px; font-size: 12px; }
  #industry .equipment-stage,
  #industry .equipment-stage img { max-height: calc(100vh - 275px); }

  /* Measured at 1280x720: BM ran 34px taller than EN and all of
     it was wrapping - the three .industry-links labels wrapped to
     a second line (34 -> 52px) and the equipment description
     wrapped too (17 -> 34px). Stacking the links one per row was
     tried and made it worse (453 -> 505px), so keep the flex row
     and let the longer BM labels size down to stay on one line. */
  html[lang=ms] #industry .industry-links a { font-size: 10.5px; }
  html[lang=ms] #industry .equipment-detail p { font-size: 11px; }
}


/* The pre-attendance trigger adds ~63px (47px row + 16px margin) to the
   hero copy column, which is what binds the fold here - measured at
   1366x768 the copy column is 398px against 273px of media. Reclaim
   that much from the headline and the gaps around it, so the
   institution logos stay inside the first view as before. */
@media (min-width: 701px) and (max-height: 790px) {
  .hero { padding-block: 16px 20px; gap: 34px; }
  .hero h1 { font-size: clamp(36px, 6.4vh, 54px); }
  .hero-copy > p { font-size: 14px; margin-top: 10px; line-height: 1.55; }
  .hero-actions { margin-top: 14px; }
  .hero-actions .button { min-height: 48px; font-size: 14px; }
  .hero-meta { gap: 7px; margin-bottom: 9px; }
  .hero-attend { margin-top: 11px; }
  .institution { padding-block: 9px 11px; }
  .facts-inner { padding-block: 7px; }
  .fact strong { font-size: 26px; }
  .fact span { font-size: 13px; }
  .hero-media figcaption { margin-top: 8px; }
}

/* ============================================================
   HERO - PRE-ATTENDANCE TRIGGER (top of hero, high emphasis)
   Sits above the event strip as the first thing in the hero,
   on solid brand red so it reads as the primary call rather
   than one more hairline card. The pulse ring draws the eye
   without the layout shifting: it is a separate absolutely
   positioned element, so nothing around it reflows as it
   animates, and it is purely decorative (aria-hidden).
   ============================================================ */
/* The legacy .event-intro margin-bottom (sections.css 18px, event.css
   22px on phones) was set when it sat directly above the h1. Inside
   .hero-meta the gap owns that spacing, so zero it here rather than
   editing two older files and risking the event section. */
.hero-meta .event-intro { margin-bottom: 0; }
.hero-meta .hero-attend { margin-bottom: 0; }

/* The pill and the expo strip are one meta block, stacked. They were
   both inline-flex siblings before, so they sat on the same line and
   read as two competing calls instead of a heading and its detail. */
.hero-meta {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-bottom: 22px;
}
.hero-attend {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 13px;
  border-radius: 999px;
  background: var(--brand-red);
  color: var(--white);
  box-shadow: 0 6px 18px #b9020333;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-attend:hover {
  background: #a00203;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px #b9020342;
}
.hero-attend:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 3px; }

/* The ring sits behind the pill and scales outward. It never affects
   layout, so the headline below it does not move. */
.hero-attend-pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--brand-red);
  opacity: .55;
  animation: attend-pulse 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes attend-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
.hero-attend-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: #ffffff21;
  color: var(--white);
}
.hero-attend-mark .icon { width: 17px; height: 17px; }
.hero-attend-copy { display: grid; gap: 1px; min-width: 0; }
.hero-attend-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #ffffffc4;
}
.hero-attend-title {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--white);
}
.hero-attend-go { width: 15px; height: 15px; flex: none; color: var(--white); }

/* A blinking element is a problem for vestibular sensitivity and for
   anyone who finds it distracting, so the motion is opt-out by default
   where the system asks for it. The pill stays just as prominent. */
@media (prefers-reduced-motion: reduce) {
  .hero-attend-pulse { animation: none; opacity: 0; }
  .hero-attend:hover { transform: none; }
}

@media (min-width: 701px) and (max-height: 820px) {
  .hero-attend { padding: 9px 16px 9px 11px; gap: 10px; }
  .hero-attend-mark { width: 27px; height: 27px; }
  .hero-attend-mark .icon { width: 16px; height: 16px; }
  .hero-attend-title { font-size: 13px; }
}
@media (max-width: 700px) {
  .hero-attend { display: flex; width: 100%; margin-bottom: 14px; border-radius: 14px; }
  .hero-attend-copy { flex: 1; }
}