/* ---------------------------------------------------------------------------
   Cyber AI Achievers Awards — awards.cyber100.club
   Spec section 16. Tokens taken verbatim from the live .lux system on
   cyber100.club so the two sites stay visually interchangeable.
   Everything is namespaced under .lux.
   --------------------------------------------------------------------------- */

.lux {
  --navy:      #163A5B;
  --navy-ink:  #0B1E33;
  --blue:      #0D508E;
  --emerald:   #36A470;
  --gold:      #C6A45E;
  --gold-soft: #E1CE9F;
  --tint:      #EDF1FC;
  --paper:     #FBFAF6;

  /* Taken verbatim from the live cyber100.club stylesheet so the two sites
     stay interchangeable. Do not substitute near-misses. */
  --navy-deep:  #102A44;
  --gold-line:  rgba(198,164,94,.34);
  /* Gold is 2.27:1 on paper and fails AA as text. This is the same hue
     darkened until it passes (4.67:1), for gold text on light grounds.
     The bright --gold stays correct on the dark sections. */
  --gold-ink:   #8A6D2F;
  --ink:        #1A2632;
  --muted:      #5C6a78;
  --muted-d:    #A9BACB;
  --line:       #D9E3F1;
  --gutter:     clamp(20px, 4.5vw, 72px);
  --maxw:       1340px;
  --pad:        clamp(80px, 10vw, 160px);

  --line-soft:  #EAEFF5;
  --white:      #FFFFFF;
  --danger:     #B3261E;
  --amber:      #B26B00;

  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --step:   8px;
  --gap:    16px;
  --gap-lg: 32px;
  --gap-xl: 48px;
  --gap-2xl: 72px;

  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(11,30,51,.06), 0 8px 24px rgba(11,30,51,.06);
  --shadow-lg: 0 2px 4px rgba(11,30,51,.08), 0 18px 48px rgba(11,30,51,.10);

  --header-h: 148px;
  --wrap: 1120px;
  --measure: 720px;

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Safety net. The browser's own [hidden] { display: none } lives in the UA
   stylesheet, so ANY author rule that sets display on the same element beats
   it and the element stays on screen with hidden set. This project shipped
   exactly that bug: step 1's category panes carried .choice-list, which set
   display: grid, so all eight categories rendered at once for weeks while
   pane.hidden reported true. Nothing here should need to be both hidden and
   displayed, so this is safe to force.
   It is a net, not the mechanism: rules that set display on a hideable
   element are scoped :not([hidden]) so they are correct without it. */
.lux [hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.lux { min-height: 100vh; display: flex; flex-direction: column; }

.lux h1, .lux h2, .lux h3, .lux h4 {
  /* No heading should leave a single orphaned word on its own line.
     Unsupported browsers simply fall back to normal wrapping. */
  text-wrap: balance;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy-ink);
  margin: 0 0 var(--gap);
  letter-spacing: -.01em;
}
.lux h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.lux h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.lux h3 { font-size: 1.25rem; font-weight: 700; }
.lux h4 { font-size: 1.05rem; font-weight: 700; }
.lux p  { margin: 0 0 var(--gap); max-width: var(--measure); text-wrap: pretty; }
.lux a  { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lux a:hover { color: var(--navy); }
.lux strong { font-weight: 650; }
.lux small { font-size: .875rem; color: var(--muted); }

/* Accessibility floor, spec 16.8 --------------------------------------------- */
.lux :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.lux .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lux .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-ink); color: var(--white); padding: 12px 20px;
}
.lux .skip-link:focus { left: 0; }

/* The gold rule under section headings, spec 16.3 ---------------------------- */
.lux .rule::after {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--gold); margin-top: 14px; border-radius: 2px;
}
.lux .rule.center::after { margin-left: auto; margin-right: auto; }

/* Layout --------------------------------------------------------------------- */
.lux .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.lux .wrap-narrow { max-width: 820px; }
.lux .section { padding: var(--gap-2xl) 0; }
.lux .section-tint { background: var(--tint); }
.lux .section-paper { background: var(--paper); }
.lux main { flex: 1 0 auto; }
.lux .center { text-align: center; }
.lux .lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }

/* Header --------------------------------------------------------------------- */
.lux .site-header {
  background: var(--navy-ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 40;
}
.lux .site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h);
}


/* Footer --------------------------------------------------------------------- */
.lux .site-footer { background: var(--navy-ink); color: rgba(255,255,255,.72); padding: var(--gap-xl) 0 var(--gap-lg); margin-top: auto; }
.lux .site-footer a { color: var(--gold-soft); text-decoration: none; }
.lux .site-footer a:hover { text-decoration: underline; }
.lux .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap-lg); }
.lux .footer-grid h4 { color: var(--white); font-size: .95rem; margin-bottom: 12px; }
.lux .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.lux .footer-bottom {
  margin-top: var(--gap-lg); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* Buttons. Gold is the only accent, spec 16.3 -------------------------------- */
.lux .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  padding: 16px 32px; min-height: 52px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lux .btn-primary { background: var(--gold); color: var(--navy-ink); border-color: var(--gold); }
.lux .btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-ink); }
.lux .btn-secondary { background: transparent; color: var(--navy); border-color: var(--line); }
/* Deleting a nomination is the one irreversible action in the admin, so it
   should not look like the buttons beside it. */
.lux .btn-danger { background: #A3241F; color: #fff; border-color: #A3241F; }
.lux .btn-danger:hover { background: #8A1E19; border-color: #8A1E19; }
.lux .btn-secondary:hover { border-color: var(--navy); color: var(--navy); }
.lux .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.lux .btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.lux .btn[disabled], .lux .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}
.lux .btn-row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }

/* Cards and the category grid ------------------------------------------------ */
.lux .card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--gap-lg); box-shadow: var(--shadow);
}
.lux .grid { display: grid; gap: var(--gap-lg); }
.lux .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lux .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lux .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lux .type-band { margin-bottom: var(--gap-xl); }
.lux .type-label {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--gold-soft);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.lux .award-card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.lux .award-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.lux .award-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Notices -------------------------------------------------------------------- */
.lux .notice {
  border-left: 4px solid var(--gold); background: var(--tint);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--gap-lg);
}
.lux .notice-error { border-left-color: var(--danger); background: #FDF3F2; }
.lux .notice-error strong { color: var(--danger); }
.lux .notice-success { border-left-color: var(--emerald); background: #F1FAF5; }
.lux .notice p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   The form. Spec 16.4: the form is the product. One question per block,
   32px between blocks, labels above inputs, hints lighter beneath the label,
   inputs at least 48px tall.
   --------------------------------------------------------------------------- */

.lux .form-shell { max-width: 820px; margin: 0 auto; padding: var(--gap-xl) 0 var(--gap-2xl); }

/* Progress bar, the one piece of persistent chrome, spec 16.5 ---------------- */
.lux .progress {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 18px 0 16px;
}
.lux .progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.lux .progress-step { font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lux .progress-name { font-family: var(--font-head); font-weight: 800; color: var(--navy-ink); font-size: 1.05rem; }
.lux .progress-track { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.lux .progress-fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width .35s ease; }

/* Blocks --------------------------------------------------------------------- */
.lux .field { margin-bottom: var(--gap-lg); }
.lux .field:last-child { margin-bottom: 0; }
.lux .field > label, .lux .fieldset-legend {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; color: var(--navy-ink); margin-bottom: 6px;
}
.lux .hint { display: block; color: var(--muted); font-size: .92rem; font-weight: 400; margin-bottom: 10px; }
.lux .req { color: var(--danger); margin-left: 3px; }
.lux .optional { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 6px; }

.lux input[type="text"], .lux input[type="email"], .lux input[type="url"],
.lux input[type="tel"], .lux input[type="number"], .lux input[type="password"],
.lux input[type="date"], .lux select, .lux textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); transition: border-color .16s ease, box-shadow .16s ease;
}
.lux textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.lux select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.lux input:hover, .lux select:hover, .lux textarea:hover { border-color: #B9C6D6; }
.lux input:focus, .lux select:focus, .lux textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,58,91,.12); outline: none;
}
.lux .field.has-error input, .lux .field.has-error select, .lux .field.has-error textarea { border-color: var(--danger); }
.lux .field-error { display: none; color: var(--danger); font-size: .92rem; font-weight: 500; margin-top: 8px; }
.lux .field.has-error .field-error { display: block; }

/* Radio and checkbox blocks -------------------------------------------------- */
.lux fieldset { border: 0; margin: 0 0 var(--gap-lg); padding: 0; }
.lux .choice-list { display: grid; gap: 12px; }
/* Step 1's category panes are hideable, so their display is scoped to the
   not-hidden case. Sharing .choice-list is what defeated [hidden] before. */
.lux .category-pane:not([hidden]) { display: grid; gap: 12px; }
.lux .choice {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; background: var(--white); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.lux .choice:hover { border-color: #B9C6D6; }
.lux .choice input { margin: 3px 0 0; width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--navy); }
.lux .choice:has(input:checked) { border-color: var(--gold); background: #FEFCF7; box-shadow: inset 0 0 0 1px var(--gold); }
.lux .choice-body strong { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy-ink); margin-bottom: 4px; }
.lux .choice-body span { color: var(--muted); font-size: .94rem; }
.lux .choice-inline { display: flex; gap: 16px; flex-wrap: wrap; }
.lux .choice-inline .choice { flex: 1 1 200px; align-items: center; }

/* Character counter, spec 9: amber at 1300, red at 1450 --------------------- */
.lux .counter { display: block; text-align: right; font-size: .85rem; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lux .counter.warn { color: var(--amber); font-weight: 600; }
.lux .counter.over { color: var(--danger); font-weight: 700; }

/* Steps and navigation ------------------------------------------------------- */
.lux .step { display: none; }
.lux .step.is-active { display: block; animation: stepIn .28s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lux .step-head { margin-bottom: var(--gap-xl); }
.lux .step-head h2 { margin-bottom: 8px; }
.lux .step-actions {
  display: flex; justify-content: space-between; align-items: center; gap: var(--gap);
  margin-top: var(--gap-xl); padding-top: var(--gap-lg); border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Save indicator ------------------------------------------------------------- */
.lux .save-state { font-size: .88rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.lux .save-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lux .save-state.saving::before { background: var(--amber); }
.lux .save-state.saved::before { background: var(--emerald); }
.lux .save-state.failed { color: var(--danger); }
.lux .save-state.failed::before { background: var(--danger); }

/* Honeypot, hidden with CSS not type=hidden, spec 17.5 ---------------------- */
.lux .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Review step ---------------------------------------------------------------- */
.lux .review-group { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); margin-bottom: var(--gap-lg); overflow: hidden; }
.lux .review-group-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; background: var(--tint); border-bottom: 1px solid var(--line); }
.lux .review-group-head h3 { margin: 0; font-size: 1rem; }
.lux .review-list { margin: 0; padding: 8px 24px 20px; }
.lux .review-list dt { font-weight: 650; color: var(--navy-ink); margin-top: 18px; font-size: .95rem; }
.lux .review-list dd { margin: 6px 0 0; color: var(--ink); white-space: pre-wrap; }
.lux .review-list dd.empty { color: var(--muted); font-style: italic; }

/* Admin ---------------------------------------------------------------------- */
.lux .admin-bar { background: var(--navy-ink); color: var(--white); padding: 14px 0; }
.lux .admin-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lux .admin-bar a { color: var(--gold-soft); text-decoration: none; margin-left: 20px; font-size: .93rem; }
.lux .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); margin-bottom: var(--gap-lg); }
.lux .stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.lux .stat b { display: block; font-family: var(--font-head); font-size: 1.9rem; color: var(--navy-ink); line-height: 1.1; }
.lux .stat span { color: var(--muted); font-size: .88rem; }
.lux .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.lux table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.lux thead th { text-align: left; background: var(--tint); font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); padding: 14px 16px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.lux tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.lux tbody tr:hover { background: #FAFCFF; }
.lux .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.lux .pill-draft { background: var(--line-soft); color: var(--muted); }
.lux .pill-submitted { background: #E4F5EC; color: #1F6B47; }
.lux .filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--gap-lg); }
.lux .filter-bar .field { margin: 0; flex: 1 1 180px; }
.lux .filter-bar .field > label { font-size: .82rem; }

/* Jury and key dates --------------------------------------------------------- */
/* --- 5. Jury ---------------------------------------------------------------- */
.lux .lux-jury { background: var(--tint); padding-block: var(--pad); }
.lux .juror-grid {
  /* Four across, then two, then one. Explicit rather than auto-fit: with
     repeat(auto-fit, minmax(min, max)) the track count is worked out from the
     MAX, so a capped column silently settled on three even at 1440px and left
     the fourth juror hanging alone on a second row. Stepping 4 - 2 - 1 keeps
     every row full for a panel of four, and for the six it becomes if the UAE
     Cyber Security Council seat and John Quinn are confirmed. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-lg); align-items: stretch;
}
.lux .juror {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 26px; text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.lux a.juror:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(22,58,91,.12); }
.lux .juror img, .lux .juror .avatar-fallback {
  width: 170px; height: 170px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(198,164,94,.45); margin: 0 auto 22px; display: block;
}
.lux .juror .avatar-fallback {
  background: var(--navy); color: var(--gold-soft);
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lux .juror h3 {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: 1.1rem; color: var(--navy);
}
.lux .juror__role {
  margin: 6px 0 0; font-family: var(--font-body); font-size: .88rem;
  color: var(--muted); line-height: 1.5; max-width: none;
}
.lux .juror__rule {
  width: 40px; height: 1px; background: var(--gold); border: 0; margin: 16px auto;
}
/* A span, not a nested anchor: the whole card is already the link. */
.lux .juror__link {
  display: block; margin-top: auto;
  font-family: var(--font-head); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.lux .lux-jury__note {
  margin: var(--gap-lg) auto 0; text-align: center;
  font-size: .88rem; color: var(--muted); max-width: 80ch;
}
@media (max-width: 1040px) {
  /* Two across on tablets: four would leave each card narrower than the
     170px portrait it has to hold. */
  .lux .juror-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lux .juror-grid { grid-template-columns: 1fr; }
  .lux .juror img, .lux .juror .avatar-fallback { width: 130px; height: 130px; }
}

.lux .dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lux .dates li { display: flex; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--white); border: 1px solid var(--line); flex-wrap: wrap; }
.lux .dates li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.lux .dates li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.lux .dates b { font-family: var(--font-head); color: var(--navy-ink); }
.lux .dates span { color: var(--muted); }

/* Prose pages: rules, terms, privacy ----------------------------------------- */
.lux .prose { max-width: var(--measure); }
.lux .prose h2 { margin-top: var(--gap-xl); }
.lux .prose h3 { margin-top: var(--gap-lg); }
.lux .prose ul, .lux .prose ol { padding-left: 22px; margin: 0 0 var(--gap); }
.lux .prose li { margin-bottom: 10px; }
.lux .prose > p:first-child { font-size: 1.1rem; color: var(--muted); }

/* Responsive. Mobile first in practice, spec 16.7 --------------------------- */
@media (max-width: 900px) {
  .lux .grid-3, .lux .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lux .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lux { font-size: 16px; }
  .lux .section { padding: var(--gap-xl) 0; }
  .lux .wrap { padding: 0 18px; }
  .lux .grid-2, .lux .grid-3, .lux .grid-4 { grid-template-columns: 1fr; }
  .lux .footer-grid { grid-template-columns: 1fr; }
  .lux { --header-h: 132px; }

  .lux .step-actions { flex-direction: column-reverse; align-items: stretch; }
  .lux .step-actions .btn { width: 100%; }
  .lux .btn { padding: 15px 24px; }
  .lux .card { padding: 24px; }
}

/* Reduced motion, spec 16.8 --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lux *, .lux *::before, .lux *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Print: the admin single-submission view is read on paper by judges --------- */
@media print {
  .lux .site-header, .lux .site-footer, .lux .admin-bar, .lux .btn, .lux .progress { display: none !important; }
  .lux { background: #fff; font-size: 12pt; }
  .lux .card, .lux .review-group { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}

/* ===========================================================================
   Event-site alignment. Every value below is taken verbatim from the live
   cyber100.club stylesheet so a visitor moving between the two domains does
   not perceive a change (spec 16.2).
   =========================================================================== */

/* --- Brand lockup ---------------------------------------------------------- */
.lux .lux-brand {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
}
.lux .lux-brand__logo {
  height: 124px !important;
  max-height: 124px !important;
  width: auto !important;
  max-width: 300px !important;
  object-fit: contain !important;
  display: block !important;
}
.lux .lux-foot .lux-brand__logo {
  height: 84px !important;
  max-height: 84px !important;
}
.lux .lux-brand__text b {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; line-height: 1.2;
}
.lux .lux-brand__text span {
  display: block; margin-top: 6px;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}

/* --- Supported by ---------------------------------------------------------- */
.lux .lux-supporters {
  /* Card height, and the content height inside it once 16px padding top and
     bottom is removed. Kept together so they cannot drift apart. */
  --supporter-h: 184px;
  --supporter-inner: 152px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px); align-items: stretch;
}
/* The three logos have very different aspect ratios, so the cards are made
   equal height and the logo is centred inside. Without this the row reads as
   ragged, which is not how the event site looks. */
.lux .lux-supporters > div { display: flex; flex-direction: column; }
.lux .lux-supporters > div > .lux-supporter__card { flex: 1 1 auto; min-height: var(--supporter-h); }
.lux .lux-supporter__card {
  background: #fff;
  border-radius: 12px;
  /* Tighter than before: 26px either side left the wide lockups floating in
     a large white box while the logo itself stayed small. */
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.lux .lux-supporter__card picture { display: block; width: 100%; }
.lux .lux-supporter__card img {
  /* max-width/max-height rather than width:100% plus a 120px cap, so each
     logo grows to whichever edge it meets first and nothing is fighting a
     height limit smaller than the card. --supporter-inner is the card's
     content height, so this tracks min-height rather than guessing. */
  max-width: 100%;
  max-height: var(--supporter-inner);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}
.lux .lux-supporter__caption {
  display: block; margin-top: 14px; text-align: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  /* B3: this was --muted-d, a pale blue-grey that measured 1.9:1 on paper
     and failed AA outright. Body text on light grounds is --muted. */
  color: var(--muted);
  /* Two lines reserved for every caption. "UAE Cyber Security Council" wraps
     and the others do not, and without this the wrapping one steals height
     from its own card and the row stops being level. */
  line-height: 1.35; min-height: 2.7em;
}
.lux .lux-supporter__caption--gold { color: var(--gold-ink); }

/* Three-logo variant, used on the thank you page. Finesse is deliberately
   absent there and in the emails: the trophy sponsorship is unconfirmed and
   an email cannot be corrected once it has gone. */
.lux .lux-supporters--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .lux .lux-supporters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lux .lux-supporters--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lux .lux-supporters,
  .lux .lux-supporters--three { grid-template-columns: 1fr; }
}

/* --- Hero ------------------------------------------------------------------ */
.lux .lux-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  /* The event site's 140-190px top padding exists because its .lux-nav is
     position:absolute and overlays the hero. Our header is a solid band above
     the hero, so that clearance already exists and repeating it produced a
     dead gap. This is breathing room only. */
  padding-top: clamp(40px, 5vh, 72px);
  padding-bottom: var(--pad);

  /* OPTIONAL awards ceremony photograph.
     Drop the file in at public/assets/img/hero-awards.jpg and uncomment the
     line below. It must sit FIRST in the stack, above the gradients.
     The .72 navy overlay directly beneath it is what keeps the white
     headline legible over a photograph. Do not uncomment one without
     the other. */
  background:
    /* url('/assets/img/hero-awards.jpg') center / cover no-repeat, */
    /* linear-gradient(rgba(11,30,51,.72), rgba(11,30,51,.72)), */
    radial-gradient(1100px 620px at 82% -8%, rgba(13,80,142,.55), transparent 60%),
    radial-gradient(900px 700px at -6% 108%, rgba(198,164,94,.12), transparent 55%),
    linear-gradient(160deg, #163A5B 0%, #102A44 46%, #0B1E33 100%);
}
.lux .lux-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(198,164,94,.05) 1px, transparent 1px);
  background-size: 100% 96px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  opacity: .5;
}
.lux .lux-hero__grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(32px, 4.5vw, 72px); align-items: center;
}
.lux .lux-hero__eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 20px;
}
.lux .lux-hero h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.02em; color: #fff; margin: 0 0 24px;
}
.lux .lux-hero h1 .line2 {
  position: relative; display: inline-block;
  font-weight: 400; color: var(--gold-soft);
}
.lux .lux-hero h1 .line2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .08em; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.lux .lux-hero__copy {
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  color: #C4D2E0; max-width: 64ch; line-height: 1.75; font-weight: 300;
  margin: 0 0 40px;
  /* Two even lines rather than two long ones and an orphan. */
  text-wrap: balance;
}
.lux .lux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 17px 32px; border-radius: 2px; border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s,
              background .35s, color .35s, border-color .35s;
}
.lux .lux-btn--gold {
  color: var(--navy-ink);
  background: linear-gradient(135deg, #E7D3A0 0%, var(--gold) 52%, #B48F49 100%);
  box-shadow: 0 14px 34px rgba(150,116,52,.32);
}
.lux .lux-btn--gold:hover {
  transform: translateY(-3px); box-shadow: 0 20px 44px rgba(150,116,52,.42);
  color: var(--navy-ink);
}
.lux .lux-btn--ghost {
  color: var(--gold-soft); border-color: var(--gold-line); background: transparent;
}
.lux .lux-btn--ghost:hover {
  border-color: var(--gold); color: #fff; background: rgba(198,164,94,.08);
}
.lux .lux-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Header button: identical to the hero button, at the event site's nav size. */
.lux .lux-btn--nav { padding: 12px 24px; }
@media (max-width: 880px) {
  /* Below this the header is the logo lockup and nothing else. */
  .lux .lux-btn--nav { display: none; }
}

/* --- Hero framed card ------------------------------------------------------ */
.lux .lux-card { position: relative; max-width: 440px; margin-inline: auto; }
.lux .lux-card__frame {
  padding: 14px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(225,206,159,.55), rgba(198,164,94,.12) 40%, rgba(255,255,255,.06));
  box-shadow: 0 40px 90px rgba(4,14,26,.6), 0 0 0 1px rgba(198,164,94,.35);
}
.lux .lux-card__inner {
  position: relative; border-radius: 9px; overflow: hidden; background: #0b1f33;
  aspect-ratio: 4 / 5;
}
.lux .lux-card__inner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lux .lux-card__inner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,30,51,.72));
}
.lux .lux-card__tag {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(11,30,51,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
}
.lux .lux-card__tag b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; color: #fff; line-height: 1.3;
}
.lux .lux-card__tag span {
  display: block; margin-top: 4px;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-d);
}
.lux .lux-card__tag > div:last-child { text-align: right; }
.lux .lux-card__seal {
  position: absolute; top: -20px; right: -20px; z-index: 3;
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #E7D3A0, var(--gold) 55%, #9c7a3e);
  color: var(--navy-ink);
  box-shadow: 0 12px 30px rgba(120,90,40,.5);
  border: 1px solid rgba(255,255,255,.4);
  font-family: var(--font-head); font-weight: 800;
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.45; text-align: center;
}

/* --- Hero stats ------------------------------------------------------------ */
/* --- 2. Hero fact bar ------------------------------------------------------
   Replaces three floating stat columns. Each item reads as a sentence, so
   the meaning is on the surface rather than inferred from a tiny label, and
   the whole thing is one shallow bar instead of three tall stacks. */
.lux .lux-facts {
  display: flex; align-items: stretch;
  margin-top: clamp(34px, 4vw, 46px);
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  border-radius: 10px; padding: 20px 28px;
}
.lux .lux-fact {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  /* Content-proportional rather than equal thirds: the venue string is much
     longer than "8 award categories" and equal columns forced it to wrap,
     which made the bar taller than it needed to be. */
  flex: 1 1 auto;
}
.lux .lux-fact + .lux-fact {
  border-left: 1px solid rgba(198,164,94,.2);
  padding-left: clamp(16px, 2.4vw, 30px); margin-left: clamp(16px, 2.4vw, 30px);
}
.lux .lux-fact svg {
  width: 18px; height: 18px; flex: none; color: var(--gold);
}
.lux .lux-fact p {
  margin: 0; font-family: var(--font-body); font-weight: 400;
  font-size: .92rem; line-height: 1.45; color: #C4D2E0; max-width: none;
}
.lux .lux-fact b {
  font-family: var(--font-head); font-weight: 700; color: #fff;
}
/* The deadline is the single most important fact on the page, so it is
   weighted rather than being the third of three equals. */
.lux .lux-fact--deadline {
  border-left: 2px solid var(--gold) !important;
}
.lux .lux-fact--deadline b { color: var(--gold-soft); }

@media (max-width: 760px) {
  .lux .lux-facts { flex-direction: column; padding: 16px 20px; }
  .lux .lux-fact { padding: 12px 0; }
  .lux .lux-fact + .lux-fact {
    border-left: 0; margin-left: 0; padding-left: 0;
    border-top: 1px solid rgba(198,164,94,.2);
  }
  .lux .lux-fact--deadline {
    border-left: 0 !important;
    border-top: 1px solid rgba(198,164,94,.2) !important;
  }
  .lux .lux-fact:first-child { padding-top: 0; }
  .lux .lux-fact:last-child { padding-bottom: 0; }
}

@media (max-width: 960px) {
  .lux .lux-hero__grid { grid-template-columns: 1fr; }
  .lux .lux-card { margin-top: 8px; }
}

/* --- Scroll reveal --------------------------------------------------------- */
/* Gated on .js so that if the script never runs, nothing is left invisible. */
.js .lux [data-r] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
}
.js .lux [data-r].is-in { opacity: 1; transform: none; }
.js .lux [data-r][data-d="1"] { transition-delay: .08s; }
.js .lux [data-r][data-d="2"] { transition-delay: .16s; }
.js .lux [data-r][data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js .lux [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Searchable combobox ---------------------------------------------------
   Replaces <datalist>, which iOS Safari renders inconsistently and several
   Android keyboards never open.

   NOTE ON COLOUR. The brief specified a #14293E dark navy panel "matching the
   select styling already in awards.css". That hex does not appear anywhere in
   this file and the form inputs are white on paper, so a dark panel would have
   hung under a white input. The panel therefore matches the inputs as they
   actually are. To switch the panel to dark, override the four tokens below;
   nothing else needs to change.
   --------------------------------------------------------------------------- */
.lux {
  --combo-bg:       var(--white);
  --combo-fg:       var(--ink);
  --combo-border:   var(--line);
  --combo-hover-bg: var(--tint);
}
/* Dark panel alternative, if that is genuinely wanted:
.lux {
  --combo-bg:       #14293E;
  --combo-fg:       #FFFFFF;
  --combo-border:   rgba(198,164,94,.45);
  --combo-hover-bg: #1D3A55;
}
*/

.lux .combo { position: relative; }

.lux .combo input[role="combobox"] { width: 100%; }

.lux .combo__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 288px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--combo-bg); color: var(--combo-fg);
  border: 1.5px solid var(--combo-border); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(11,30,51,.18);
}
.lux .combo input[role="combobox"]:focus { border-color: var(--gold); }
.lux .combo input[role="combobox"]:focus + .combo__list { border-color: var(--gold); }

.lux .combo__option {
  padding: 12px 14px; border-radius: 6px; cursor: pointer;
  font-size: 1rem; line-height: 1.4; color: var(--combo-fg);
  /* 44px minimum touch target: this is a phone-first audience. */
  min-height: 44px; display: flex; align-items: center;
}
.lux .combo__option.is-active,
.lux .combo__option:hover { background: var(--combo-hover-bg); }
.lux .combo__option.is-active { box-shadow: inset 0 0 0 1.5px var(--gold); }

.lux .combo__none {
  padding: 12px 14px; color: var(--muted); font-size: .94rem; font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .lux .combo__list { scroll-behavior: auto; }
}

/* ===========================================================================
   Shared page furniture for the editorial sections.
   =========================================================================== */

/* Dark band: the hero's gradient stack, reusable. Kept as its own class
   rather than extending .lux-hero so a change to one cannot silently move
   the other. */
.lux .lux-band--dark {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: var(--pad);
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(13,80,142,.55), transparent 60%),
    radial-gradient(900px 700px at -6% 108%, rgba(198,164,94,.12), transparent 55%),
    linear-gradient(160deg, #163A5B 0%, #102A44 46%, #0B1E33 100%);
}
.lux .lux-band--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(198,164,94,.05) 1px, transparent 1px);
  background-size: 100% 96px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  opacity: .5;
}

/* Section header: eyebrow, heading, gold rule. Left aligned everywhere. */
.lux .lux-shead { margin-bottom: clamp(36px, 5vw, 60px); }
.lux .lux-shead__eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.lux .lux-shead h2 {
  margin: 0; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.02em;
}
.lux .lux-band--dark .lux-shead h2 { color: #fff; }
.lux .lux-shead h2::after {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--gold); margin-top: 18px; border-radius: 2px;
}
.lux .lux-shead__lead {
  margin: 22px 0 0; max-width: 66ch; font-weight: 300; text-wrap: balance;
  font-size: 1.02rem; line-height: 1.7; color: var(--muted);
}
.lux .lux-band--dark .lux-shead__lead { color: #B9C8D8; }

/* --- 1. Awards ledger ------------------------------------------------------ */
.lux .lux-ledger { border-top: 1px solid rgba(198,164,94,.14); }
.lux .lux-ledger__row {
  display: grid; grid-template-columns: 64px 1.5fr 1fr;
  gap: clamp(20px, 3vw, 48px); align-items: start;
  padding: 34px 0; border-bottom: 1px solid rgba(198,164,94,.14);
  transition: background-color .35s;
}
.lux .lux-ledger__num {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  letter-spacing: .1em; color: var(--gold-line); margin-top: .5em;
  transition: color .35s;
}
.lux .lux-ledger__eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 12px;
}
.lux .lux-ledger__name {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15;
  letter-spacing: -.02em; color: #fff;
}
.lux .lux-ledger__desc {
  margin: 0; font-family: var(--font-body); font-weight: 300;
  font-size: .95rem; line-height: 1.7; color: #B9C8D8; max-width: none;
}
.lux .lux-ledger details { margin-top: 14px; }
.lux .lux-ledger summary {
  font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
  cursor: pointer; list-style: none;
}
.lux .lux-ledger summary::-webkit-details-marker { display: none; }
.lux .lux-ledger summary::after { content: ' +'; }
.lux .lux-ledger details[open] summary::after { content: ' –'; }
.lux .lux-ledger details p {
  margin: 12px 0 0; font-weight: 300; font-size: .95rem;
  line-height: 1.7; color: #B9C8D8; max-width: none;
}
@media (hover: hover) {
  .lux .lux-ledger__row:hover { background: rgba(198,164,94,.045); }
  .lux .lux-ledger__row:hover .lux-ledger__num { color: var(--gold); }
}
@media (max-width: 820px) {
  .lux .lux-ledger__row { grid-template-columns: 1fr; gap: 0; padding: 28px 0; }
  .lux .lux-ledger__head { display: flex; align-items: baseline; gap: 14px; }
  .lux .lux-ledger__num { margin-top: 0; }
  .lux .lux-ledger__eyebrow { margin: 0; }
  .lux .lux-ledger__name { margin-top: 10px; font-size: 1.35rem; }
  .lux .lux-ledger__desc { margin-top: 14px; }
}

/* --- 2. Timeline: How It Works and Key Dates merged ------------------------ */
.lux .lux-timeline {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 32px);
}
.lux .lux-timeline::before {
  content: ''; position: absolute; top: 23px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 12%,
                              var(--gold-line) 88%, transparent);
}
.lux .lux-stage { text-align: center; }
.lux .lux-stage__dot {
  position: relative; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-ink); border: 1px solid var(--gold-line);
  color: var(--gold); font-family: var(--font-head); font-weight: 800;
  font-size: .9rem; margin: 0 auto 22px;
}
.lux .lux-stage__date {
  font-family: var(--font-head); font-weight: 800; font-size: 1.24rem;
  color: #fff; line-height: 1; margin: 0 0 9px;
}
.lux .lux-stage__label {
  font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 10px;
}
.lux .lux-stage__note {
  font-family: var(--font-body); font-weight: 300; font-size: .9rem;
  color: #B9C8D8; line-height: 1.6; max-width: 24ch;
  margin-inline: auto; margin-block: 0;
}
/* Current stage. Which one this is comes from Config::stage(), never markup. */
.lux .lux-stage.is-now .lux-stage__dot {
  background: radial-gradient(circle at 35% 30%, #E7D3A0, var(--gold) 55%, #9c7a3e);
  color: var(--navy-ink); border-color: rgba(255,255,255,.4);
  box-shadow: 0 10px 26px rgba(120,90,40,.5);
}
.lux .lux-stage.is-now .lux-stage__date { color: var(--gold-soft); }

@media (max-width: 820px) {
  .lux .lux-timeline { grid-template-columns: 1fr; gap: 0; }
  .lux .lux-timeline::before {
    top: 0; bottom: 0; left: 23px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--gold-line) 8%,
                                var(--gold-line) 92%, transparent);
  }
  .lux .lux-stage {
    display: grid; grid-template-columns: 48px 1fr; gap: 20px;
    text-align: left; padding-bottom: 34px; align-items: start;
  }
  .lux .lux-stage__dot { margin: 0; }
  .lux .lux-stage__note { max-width: none; margin-inline: 0; }
  .lux .lux-stage:last-child { padding-bottom: 0; }
}

/* --- 3. Closing call to action --------------------------------------------- */
.lux .lux-cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--pad); text-align: center; color: #fff;
  background: linear-gradient(180deg, var(--navy-ink) 0%, #081726 100%);
}
.lux .lux-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 500px at 15% 0%, rgba(198,164,94,.14), transparent 60%);
  opacity: .4;
}
.lux .lux-cta__inner { max-width: 60ch; margin-inline: auto; }
.lux .lux-cta__eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 16px;
}
.lux .lux-cta h2 {
  margin: 0 0 20px; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.02em; color: #fff;
}
.lux .lux-cta__lead {
  margin: 0 auto 34px; max-width: 58ch; text-wrap: balance;
  font-family: var(--font-body); font-weight: 300; font-size: 1.05rem;
  line-height: 1.7; color: #C4D2E0;
}
.lux .lux-cta__small {
  margin: 20px 0 0; font-size: .8rem; color: var(--muted-d);
}

/* --- 4. Intro --------------------------------------------------------------- */
.lux .lux-intro { background: var(--paper); padding-block: var(--pad); }
.lux .lux-intro__grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 6vw, 80px); align-items: start;
}
.lux .lux-intro .lux-shead { margin-bottom: 0; }
.lux .lux-intro__lead {
  margin: 0 0 24px; font-family: var(--font-head); font-weight: 600;
  font-size: 1.28rem; line-height: 1.5; color: var(--navy); max-width: none;
}
.lux .lux-intro__body {
  margin: 0 0 22px; font-family: var(--font-body);
  font-size: 1.08rem; line-height: 1.8; color: var(--muted); max-width: none;
}
.lux .lux-intro__body:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .lux .lux-intro__grid { grid-template-columns: 1fr; }
}

/* --- 3. Sticky mobile nomination bar ---------------------------------------
   Mobile only, at the same 880px where the header button hides. A bar, not a
   floating circle: a circle reads as a chat widget. */
.lux .lux-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(11,30,51,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--gold-line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(100%);
  transition: opacity .3s ease, transform .3s ease;
}
@media (max-width: 880px) {
  /* Scoped so the hidden attribute still wins without needing the net. */
  .lux .lux-sticky:not([hidden]) { display: flex; }
}
.lux .lux-sticky.is-visible { opacity: 1; transform: none; }
.lux .lux-sticky__label {
  display: block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-d); margin: 0 0 4px;
}
.lux .lux-sticky__date {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: .9rem; color: #fff; margin: 0;
}
.lux .lux-sticky .lux-btn { padding: 12px 22px; flex: none; }

/* The bar is fixed, so the footer needs to end above it. The height is
   measured at runtime because safe-area-inset varies by device. */
.lux .site-footer { padding-bottom: calc(var(--gap-lg) + var(--sticky-h, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .lux .lux-sticky { transition: none; }
}