:root {
  --bg: #000000;
  --text: #ffffff;
  --gold: #f0d78c;
  --navy: #0a1128;
  --ivory: #f4efe4;
}

/* phones draw a blue flash on every tap; the site's own hover and focus styles replace it */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* no browser scrollbar on the page (the page still scrolls; the homepage has its own .scroll-rail) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* ---------- Homepage intro (~2.9s, on refresh / outside arrival; driven by js/intro.js) ----------
   0.1s   "Student Celebrity Awards" spins up letter by letter with a bounce, each letter its own colour,
          bobbing in a wave; red-carpet camera flashes pop in the background
   0.6s   gold rule draws underneath
   0.8s   a flare runs across the letters and turns each one gold
   1.3s   the hero starts settling from a slight zoom, still behind the black
   1.6s   the black backdrop fades; js/intro.js flies the
          title up into the header tagline, where it hands over to the real one (2.3s-2.8s).
          Without the script in time, the title just fades out where it is */
.sca-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 0 1.5rem;
}
html:not(.js) .sca-intro,
.intro-seen .sca-intro { display: none; }

/* the black backdrop is its own layer so it can fade while the title is still travelling */
.sca-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  animation: scaIntroOut 0.8s ease-in-out 1.6s forwards;
}

/* camera flashes, kept above and below the title so they never wash it out */
.sca-intro-flash {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(120px, 28vmin, 260px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgb(255 246 224 / 0.55) 18%, rgb(255 246 224 / 0.12) 42%, transparent 66%);
  opacity: 0;
  animation: scaIntroFlash 0.9s ease-out var(--d) forwards;
}

.sca-intro-inner {
  position: relative;
  text-align: center;
  animation: scaIntroOut 0.6s ease-in-out 1.6s forwards;
}
/* js/intro.js takes over: the title flies to the header instead of fading here. While it flies, the
   wave pauses (only the wave, the gold flare finishes) and the title moves as one composited layer */
.sca-intro.is-flying .sca-intro-inner { animation: none; }
.sca-intro.is-flying .sca-intro-title { will-change: transform, opacity; }
.sca-intro.is-landing .sca-intro-word > span { animation-play-state: running, paused, running; }

.sca-intro-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.32em;
  margin: 0;
  font: 500 clamp(2.4rem, 7vw, 5.5rem)/1.05 'Oswald', sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* a word never breaks mid-word; each word masks its letters as they rise. Only the bottom edge clips
   (the letters come up from below): a box clip cut the glow into faint rectangles, plainly visible on
   OLED screens where the black is truly black. The bottom edge sits low enough to clear the glow, and
   the clip is dropped once every letter is up (the last one lands at 1.33s) */
.sca-intro-word {
  display: inline-flex;
  padding: 0.3em 0.15em 0.8em;
  margin: -0.3em -0.15em -0.8em;
  clip-path: inset(-1em -1em 0 -1em);
  animation: scaIntroUnclip 1ms linear 1.35s forwards;
}
.sca-intro-word > span {
  display: block;
  /* solid metal colour, no gradient, with one soft glow */
  color: var(--c);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 45%, transparent));
  /* starts below the word's padded box (1.85em = 176%) with room for the glow, so nothing shows before it rises */
  transform: translateY(220%);
  transform-origin: 50% 100%;
  /* the wave runs from the start (negative delay, last letter at 0) so every letter is already
     moving when it rises; the ripple still travels left to right. The gold flare follows the same order */
  animation:
    scaIntroRise 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards,
    scaIntroWave 1.6s ease-in-out infinite,
    scaIntroGold 0.7s ease-in-out forwards;
  animation-delay: calc(0.1s + var(--i) * 0.03s), calc((var(--i) - 21) * 0.08s), calc(0.8s + var(--i) * 0.02s);
}
.sca-intro-rule {
  display: block;
  width: min(220px, 50vw);
  height: 1px;
  margin: 1.5rem auto 0;
  /* gold with a white band parked off to the side; the gleam slides it across */
  background: linear-gradient(90deg, var(--gold) 0 40%, #fff 50%, var(--gold) 60%) 100% 0 / 300% 100%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
  transform: scaleX(0);
  animation:
    scaIntroRule 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards,
    scaIntroGleam 0.6s ease-in-out 1s,
    scaIntroOut 0.5s ease-in-out 1.6s forwards;
}
/* hero settles in as the backdrop fades off it: a small zoom that is already under way while the
   backdrop is still black and eases in and out, so there is no visible start or stop (a fast-start
   curve here showed as a little bump right as the page appeared) */
html.js:not(.intro-seen) .hero {
  animation: scaHeroSettle 2s cubic-bezier(0.45, 0, 0.25, 1) 1.3s both;
}
/* the header tagline waits for the flying title, then takes its place (also shows if the script never runs) */
html.js:not(.intro-seen) .site-header .tagline {
  animation: scaTaglineIn 0.5s ease-in-out 2.3s both;
}

/* spins up from a tilt, overshoots slightly, settles */
@keyframes scaIntroRise  {
  from { transform: translateY(220%) rotate(14deg) scale(0.7); }
  65%  { transform: translateY(-10%) rotate(-3deg) scale(1.06); }
  to   { transform: none; }
}
@keyframes scaIntroUnclip { to { clip-path: none; } }
@keyframes scaIntroRule  { to { transform: scaleX(1); } }
@keyframes scaIntroGleam { to { background-position: 0 0; } }
/* liquid: each letter bobs and swells on its own offset, using the separate translate and scale
   properties so it doesn't fight the rise */
@keyframes scaIntroWave  {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -7px; scale: 1.05; }
}
/* a bright flare, then the letter settles in gold with a gold glow */
@keyframes scaIntroGold {
  40% { filter: drop-shadow(0 0 22px rgb(255 234 184 / 0.85)) brightness(1.6); }
  to  { color: var(--gold); filter: drop-shadow(0 0 12px rgb(240 215 140 / 0.45)); }
}
@keyframes scaIntroFlash {
  0%   { opacity: 0; scale: 0.6; }
  6%   { opacity: 1; scale: 1; }
  30%, 100% { opacity: 0; scale: 1.1; }
}
@keyframes scaIntroOut   { to { opacity: 0; } }
@keyframes scaTaglineIn  { from { opacity: 0; } }
@keyframes scaHeroSettle { from { transform: scale(1.03); } to { transform: none; } }

.scroll-rail {
  position: fixed;
  right: 1.75rem;
  top: 0;
  height: 100vh;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8rem 0 4rem;
}

.scroll-rail-track {
  position: relative;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240, 215, 140, 0.6);
  /* progress is a scaleY set by js/script.js: a transform skips layout on every scroll */
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.1s linear;
}

.scroll-rail-numbers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.rail-number {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}

.rail-number.active {
  color: var(--gold);
}

@media (max-width: 900px) {
  /* Compact rail: a hairline progress track pinned to the right edge, overlaid on the
     content (takes no width), showing only the current section number beside it.
     Sits under the fixed header (z 100) so the open burger menu covers it. */
  .scroll-rail {
    right: 0.4rem;
    height: 100vh;
    height: 100svh;
    z-index: 90;
    flex-direction: row-reverse;
    gap: 0.45rem;
    padding: 6.5rem 0 3rem;
    pointer-events: none;
  }

  .scroll-rail-track {
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .rail-number {
    font-size: 0.62rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.25s ease, color 0.2s ease;
  }

  /* inactive numbers stay in the column (invisible) so the active one
     sits at its own section's position along the track */
  .rail-number.active {
    opacity: 1;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  }

  body {
    padding-right: 1.6rem;
  }

  .site-header {
    margin-right: -1.6rem;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-right: 4.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 3rem;
  margin-right: -4.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.logo-img {
  height: 3.89rem;
  aspect-ratio: 1.865 / 1;
  object-fit: fill;
  object-view-box: inset(13% 5% 16% 5%);
  margin: -0.6rem 0;
  padding: 0;
  border-radius: 6px;
  display: block;
}

@media (max-width: 600px) {
  .logo-img { height: 2.75rem; margin: -0.4rem 0; }
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Fraunces', serif;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(240, 215, 140, 0.45);
  line-height: 1.1;
}

.tagline {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text);
}

.main-nav {
  grid-column: 2;
  display: flex;
  gap: clamp(1rem, 3vw, 5rem);
}

.main-nav a {
  font-size: 0.95rem;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--gold);
}

.vote-btn {
  justify-self: end;
  white-space: nowrap;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.vote-btn:hover {
  background: var(--gold);
  color: #000;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4rem 3rem;
  min-height: 100vh;
  min-height: 100svh;
  /* same emblem image on every screen size; placement is set per breakpoint in "Polish · 01 Hero".
     --hero-ph is a ~400-byte blurred copy painted underneath, so the hero shows at once and
     sharpens when the photo lands (each layer shares the size/position below).
     Photos throughout this file are declared twice: the WebP line, then an image-set() with an
     AVIF copy (about half the size) that browsers which understand it use instead */
  --hero-ph: url('data:image/webp;base64,UklGRpABAABXRUJQVlA4IIQBAADwCACdASobADAAPt1or1EopaQipWmZEBuJaACdOUFU1ThTjqjp6A4aVy9/NX2E1o7OMbrtLtEtDpDvRsb2uB6qsPGQQ30sFtG9ONYmjTfoAAD++WW+TId7qOLfquHEnOdsLWm43rHi1B8hAHP/+QxgiFnpWOKRHawTZiUZkwAmjCpiTJWtscFV4lzvTtuiFuts97Yvd04VZKuca1y1UayWQFqii4ICbqROjXhS9Ass+Ri0WEvQwE6FhqYdjurR9HqAY74PfxEpmdW3+bK8oWkR00KcbllGyF50chefQ4iwZdCu09CWvyVZmDNz+Ratfg29kS8MQBO/SQ1EJpLXylHjFD7mm2oPWbyNpDKoNhApzGuiyn136NCfD0PxBe2Zn+6OMUazXK6GM8L3vuqmHAWLJH0WWlW0m3P+sgSdg0EGwD4DcqUDB9MPfq8/8/GQlDs5CkzXGG+1Vd/72028TdoU2QNbc0EMuSbD8LKdIqRpuLy9gifJcYUNGiqluBEw0gyRIAAA');
  background-image: url('../assets/home-page-photos/hero-img-mobile.webp'), var(--hero-ph); background-image: image-set(url('../assets/home-page-photos/hero-img-mobile.avif') type('image/avif'), url('../assets/home-page-photos/hero-img-mobile.webp') type('image/webp')), var(--hero-ph);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: #000;
}

/* phones get an 800px-wide copy (tablets keep the full-size one above); the
   mobile preload in index.html uses the same breakpoint */
@media (max-width: 700px) {
  .hero { background-image: url('../assets/home-page-photos/hero-img-mobile-800.webp'), var(--hero-ph); background-image: image-set(url('../assets/home-page-photos/hero-img-mobile-800.avif') type('image/avif'), url('../assets/home-page-photos/hero-img-mobile-800.webp') type('image/webp')), var(--hero-ph); }
}

/* Homepage: the header floats over the hero instead of pushing it down,
   so the photo fills exactly one screen (the PHP pages keep the sticky header) */
body:has(.hero) .site-header {
  position: fixed;
  left: 0;
  right: 0;
  margin-right: 0;
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-right: 4rem;
  transform: scale(1.1);
  transform-origin: right center;
}

.hero-text h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
}

.gold {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(240, 215, 140, 0.45);
}

.hero-text h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 1.5rem 0 0;
}

.hero-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 1rem 0 0;
  max-width: 32rem;
}

.hero-buttons {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.8rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
}

.btn-primary:hover {
  background: transparent;
  color: var(--gold);
}

.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

main {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.section {
  min-height: 60vh;
  padding: 4rem 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.section-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #000;
  overflow: hidden;
}

.section-2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../pages/assets/img/home/section-2-desktop-1200.webp'); background-image: image-set(url('../pages/assets/img/home/section-2-desktop-1200.avif') type('image/avif'), url('../pages/assets/img/home/section-2-desktop-1200.webp') type('image/webp'));
  background-size: 72%;
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 72%);
  mask-image: linear-gradient(to right, #000 30%, transparent 72%);
}

.section-2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 700px) {
  .section-2-bg {
    background-image: url('../pages/assets/img/home/section-2-mobile-800.webp'); background-image: image-set(url('../pages/assets/img/home/section-2-mobile-800.avif') type('image/avif'), url('../pages/assets/img/home/section-2-mobile-800.webp') type('image/webp'));
  }
}

.section-2-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.section-2-left,
.section-2-right {
  min-width: 0;
}

.section-2-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 3rem;
  text-align: left;
  margin-left: 15rem;
}

.section-2-left h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 3.74rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
}

.section-2-left .subtext {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

.section-2-right {
  position: relative;
  margin-left: 12.6rem;
  padding-top: 2rem;
}

.section-2-right p.lead {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 22rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gold);
}

.stats-row {
  position: absolute;
  left: 0;
  right: 3rem;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.stat-logo {
  width: 56px;
  height: 56px;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.stat-logo svg {
  width: 100%;
  height: 100%;
}

.stat-logo.icon-globe {
  background-color: var(--gold);
  -webkit-mask-image: url('../assets/home-page-photos/globe.svg');
  mask-image: url('../assets/home-page-photos/globe.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.stat-item p {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  margin: 0;
}

.section-3 {
  background-image: url('../pages/assets/img/home/section-3-desktop-1280.webp'); background-image: image-set(url('../pages/assets/img/home/section-3-desktop-1280.avif') type('image/avif'), url('../pages/assets/img/home/section-3-desktop-1280.webp') type('image/webp'));
}

@media (max-width: 700px) {
  .section-3 {
    background-image: url('../pages/assets/img/home/section-3-mobile-800.webp'); background-image: image-set(url('../pages/assets/img/home/section-3-mobile-800.avif') type('image/avif'), url('../pages/assets/img/home/section-3-mobile-800.webp') type('image/webp'));
  }
}

.section-3-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
  max-width: 42rem;
  margin: 0;
}

.section-3-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 32rem;
  margin: 1.5rem 0 0;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 4rem;
}

.feature-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}

.feature-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--gold);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.feature-logo.icon-vote {
  -webkit-mask-image: url('../assets/home-page-photos/vote.svg');
  mask-image: url('../assets/home-page-photos/vote.svg');
}

.feature-logo.icon-participation {
  -webkit-mask-image: url('../assets/home-page-photos/participation.svg');
  mask-image: url('../assets/home-page-photos/participation.svg');
}

.feature-logo.icon-award {
  -webkit-mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
  mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
}

.feature-text h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
  color: var(--gold);
}

.feature-text p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 28rem;
}

.section-4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.country-row {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 10px;
  z-index: 0;
}

.country-item {
  flex: 1;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.section-4-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.section-4-text h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.64rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.section-4-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 28rem;
  margin: 1.5rem 0 2rem;
}

.section-3,
.section-4,
.section-8 {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-3::before,
.section-4::before,
.section-8::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.section-4::before {
  z-index: 1;
}

.section-3 > *,
.section-8 > * {
  position: relative;
  z-index: 1;
}

.section-4-text {
  z-index: 2;
}

.section-2-content {
  position: relative;
  z-index: 2;
}

.section-5 {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 3rem;
  background-image: url('../pages/assets/img/home/section-5-desktop.webp'); background-image: image-set(url('../pages/assets/img/home/section-5-desktop.avif') type('image/avif'), url('../pages/assets/img/home/section-5-desktop.webp') type('image/webp'));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-5::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.section-5-inner {
  position: relative;
  z-index: 2;
  max-width: 60rem;
}

.section-5-inner h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ivory);
  margin: 0 0 2.5rem;
}

.section-5-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
}

.section-5-names p {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.section-5-names p:not(:last-child)::after {
  content: '\2022';
  display: inline-block;
  margin: 0 1.1rem;
  color: rgba(240, 215, 140, 0.5);
}

@media (max-width: 700px) {
  .section-5-names p:not(:last-child)::after {
    display: none;
  }
}

.section-5-cta {
  margin-top: 2.5rem;
  display: inline-block;
}

@media (max-width: 700px) {
  .section-5-cta {
    margin-top: 2rem;
  }
}

.section-6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  min-height: 0;
  padding: 2rem 3rem;
}

.section-6-text h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 3.12rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
}

.section-6-text p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 1.5rem 0 0;
  max-width: 26rem;
}

.pillar-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.75rem;
  margin-left: 2rem;
}

.pillar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pillar-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--gold);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pillar-logo.icon-credibility {
  width: 58.08px;
  height: 58.08px;
  -webkit-mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
  mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
}

.pillar-logo.icon-gratitude {
  -webkit-mask-image: url('../assets/home-page-photos/cup-1-svgrepo-com.svg');
  mask-image: url('../assets/home-page-photos/cup-1-svgrepo-com.svg');
}

.pillar-logo.icon-culture {
  -webkit-mask-image: url('../assets/home-page-photos/culture.svg');
  mask-image: url('../assets/home-page-photos/culture.svg');
}

.pillar-logo.icon-unity {
  -webkit-mask-image: url('../assets/home-page-photos/group.svg');
  mask-image: url('../assets/home-page-photos/group.svg');
}

.pillar-item p {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0;
}

.section-7 {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.5rem 3rem;
  min-height: 0;
  margin-top: -70px; /* cancel main's gap so no black band shows under the section 6 photo */
}

.section-7-text {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-7-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
}

.section-7-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 1.25rem 0 2rem;
}

.section-7 .btn-primary {
  background: #000;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.section-7 .btn-primary:hover {
  background: var(--gold);
  color: #000;
}

.section-7-sticky {
  display: contents;
}

.season-one-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  flex: 1;
  min-width: 0;
}

.season-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  text-align: left;
}

.season-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%);
}

.photo-stack {
  position: absolute;
  inset: 8%;
  z-index: 0;
}

.photo-stack-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 3px solid #0a0a0a;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  will-change: transform;
}

/* The country tiles and these stacks set their photo inline as --photo (WebP) and
   --photo-avif (about 40% lighter); browsers that can pick between them take the AVIF.
   A url() inside a custom property resolves against THIS file, so the inline paths start
   with ../ like every other path in css/ (relative to css/, not to the page) */
.country-item,
.photo-stack-item {
  background-image: var(--photo);
}
@supports (background-image: image-set(url('x.avif') type('image/avif'))) {
  .country-item,
  .photo-stack-item {
    background-image: image-set(var(--photo-avif) type('image/avif'), var(--photo) type('image/webp'));
  }
}

.photo-stack-item:nth-child(1) {
  transform: rotate(-16deg) translate(-18%, 10%);
}

.photo-stack-item:nth-child(2) {
  transform: rotate(13deg) translate(15%, -8%);
}

.photo-stack-item.photo-stack-main {
  transform: rotate(0deg) scale(1.08);
  z-index: 1;
}

.season-tile p {
  position: relative;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  padding: 0.9rem;
}

.section-8 {
  display: flex;
  align-items: center;
  background-image: url('../pages/assets/img/home/section-8-desktop.webp'); background-image: image-set(url('../pages/assets/img/home/section-8-desktop.avif') type('image/avif'), url('../pages/assets/img/home/section-8-desktop.webp') type('image/webp'));
  background-size: 85% !important;
  background-position: right top !important;
}

.section-8::before {
  content: none;
}

.section-8-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
}

.section-8-text h2 {
  white-space: nowrap;
}

.section-8-text h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
}

.section-8-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 1.5rem 0 2rem;
}

.site-footer {
  border-top: 1px solid rgba(240, 215, 140, 0.2);
  padding: 4rem 3rem 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  padding-bottom: 3rem;
}

.footer-brand .logo {
  font-size: 2rem;
}

.footer-tagline {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-col h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.footer-col a {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Match the 24px section gutters on tablets */
@media (max-width: 900px) {
  .site-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 700px) {
  .site-footer {
    padding: 3rem 1.5rem 1.5rem;
  }

  .footer-top {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@keyframes logoPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(240, 215, 140, 0.45); }
  50% { text-shadow: 0 0 26px rgba(240, 215, 140, 0.9); }
}

@keyframes votePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 215, 140, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(240, 215, 140, 0); }
}

@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(240, 215, 140, 0.5); }
  50% { box-shadow: 0 0 14px rgba(240, 215, 140, 1); }
}

.logo {
  animation: logoPulse 3.5s ease-in-out infinite;
}

.vote-btn {
  position: relative;
  animation: votePulse 2.6s ease-out infinite;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vote-btn:hover {
  transform: scale(1.08) rotate(-1deg);
}

.scroll-rail-fill {
  animation: railPulse 2s ease-in-out infinite;
}

.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary::before,
.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
  left: 130%;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-3px) scale(1.03);
}

.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

.site-header:hover .main-nav a.active:not(:hover)::after {
  width: 0;
}

.site-header:hover .main-nav a.active:not(:hover) {
  color: var(--text);
}

.reveal {
  opacity: 0;
  transform: translateY(55px);
  /* no permanent will-change: ~40 always-promoted layers ate phone GPU memory;
     the browser promotes each element for the length of its transition anyway */
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* no JS: nothing would ever add .in-view, so show the text as-is.
   .js-late (head script, scripts not running 1s in): the hero copy shows at once */
html:not(.js) .reveal,
.js-late .hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* .vt-hold (head script): the page-switch animation is still playing; the hero copy waits
   for it to finish, then makes its entrance */
.vt-hold .hero .reveal {
  opacity: 0;
  transition: none;
}

.stagger-children > *:nth-child(1) { --delay: 0.05s; }
.stagger-children > *:nth-child(2) { --delay: 0.15s; }
.stagger-children > *:nth-child(3) { --delay: 0.25s; }
.stagger-children > *:nth-child(4) { --delay: 0.35s; }
.stagger-children > *:nth-child(5) { --delay: 0.45s; }

.season-tile {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.season-tile:hover {
  transform: translateY(-6px);
}

.photo-stack-item {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.season-tile:hover .photo-stack-item:nth-child(1) {
  transform: rotate(-26deg) translate(-32%, 16%);
}

.season-tile:hover .photo-stack-item:nth-child(2) {
  transform: rotate(22deg) translate(26%, -14%);
}

.season-tile:hover .photo-stack-item.photo-stack-main {
  transform: rotate(0deg) scale(1.14);
}

.country-item {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.country-item:hover {
  transform: scale(1.06);
  filter: brightness(1.15) saturate(1.2);
  z-index: 2;
}

.pillar-logo,
.feature-logo,
.stat-logo {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pillar-item:hover .pillar-logo,
.feature-item:hover .feature-logo,
.stat-item:hover .stat-logo {
  transform: scale(1.2) rotate(-6deg);
}

.award-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 1;
}

.award-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 3rem;
  background: radial-gradient(ellipse at 50% 30%, var(--navy) 0%, var(--bg) 70%);
  overflow: hidden;
}

.award-hero::before {
  content: '';
  position: absolute;
  top: 42%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(240, 215, 140, 0.14), transparent 70%);
  transform: translate(-50%, -50%);
  animation: awardGlow 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes awardGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.award-hero-headline {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ivory);
  max-width: 60rem;
  margin: 0;
}

.award-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.award-scroll-cue::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  animation: scrollCueMove 2s ease-in-out infinite;
}

@keyframes scrollCueMove {
  0% { top: 0; opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.award-founding {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 3rem;
  min-height: 70vh;
}

.award-founding-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.award-founding-media {
  flex: 0 0 22rem;
}

.award-founding-media img {
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 4px solid var(--ivory);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.award-founding-text {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .award-founding-inner {
    flex-direction: column;
    text-align: center;
  }

  .award-founding-media {
    flex: none;
    max-width: 20rem;
    margin: 0 auto;
  }
}

.award-statement {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.35;
  color: var(--ivory);
  margin: 0 0 2rem;
}

.award-statement.gold-line {
  color: var(--gold);
}

.award-statement.support {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(244, 239, 228, 0.75);
  margin-bottom: 0;
}

.award-attribution {
  margin: 3rem 0 0;
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240, 215, 140, 0.55);
}

.award-values {
  background: var(--bg);
  padding: 7rem 3rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.award-values-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.5rem;
  margin-top: 3rem;
}

.award-value-item {
  position: relative;
  max-width: 14rem;
}

.award-value-item:not(:last-child)::after {
  content: '·';
  position: absolute;
  top: -0.2rem;
  right: -2rem;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.25);
}

.award-value-word {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.award-value-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 900px) {
  .award-value-item:not(:last-child)::after {
    content: none;
  }
}

:root {
  --sca-red: #c81f2c;
  --sca-red-deep: #3d0a10;
}

.s1-body {
  background: var(--sca-red);
}

.s1-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2.5rem;
  padding: 0.9rem 2rem;
  background: var(--sca-red-deep);
  border-bottom: 1px solid rgba(240, 215, 140, 0.25);
}

.s1-subnav a {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.75);
  transition: color 0.2s ease;
}

.s1-subnav a:hover,
.s1-subnav a.active {
  color: var(--gold);
}

.s1-main {
  background: var(--sca-red);
}

.s1-section-red {
  background: var(--sca-red);
}

.s1-section-deep {
  background: var(--sca-red-deep);
}

.s1-section-black {
  background: #000;
}

.s1-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  text-align: center;
}

.s1-heading {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ivory);
  text-align: center;
  margin: 0 0 1.5rem;
}

.s1-heading.small {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-top: 3.5rem;
}

.s1-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: 6rem;
  margin: 0 auto 2.5rem;
}

.s1-divider::before,
.s1-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(240, 215, 140, 0.35);
}

.s1-divider-mark {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
}

.s1-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(240, 215, 140, 0.4);
  background: rgba(240, 215, 140, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.25rem;
}

.s1-icon-glyph {
  width: 26px;
  height: 26px;
  background-color: var(--gold);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.s1-icon-glyph.icon-ceremony {
  -webkit-mask-image: url('../assets/home-page-photos/entertainment.svg');
  mask-image: url('../assets/home-page-photos/entertainment.svg');
}

.s1-icon-glyph.icon-winners {
  -webkit-mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
  mask-image: url('../assets/home-page-photos/laurel-wreath.svg');
}

.s1-icon-glyph.icon-international {
  -webkit-mask-image: url('../assets/home-page-photos/globe.svg');
  mask-image: url('../assets/home-page-photos/globe.svg');
}

.s1-icon-glyph.icon-media {
  -webkit-mask-image: url('../assets/home-page-photos/book-svgrepo-com.svg');
  mask-image: url('../assets/home-page-photos/book-svgrepo-com.svg');
}

.s1-icon-glyph.icon-gallery {
  -webkit-mask-image: url('../assets/home-page-photos/group.svg');
  mask-image: url('../assets/home-page-photos/group.svg');
}

#s1-winners .s1-icon-badge {
  margin: 0 auto 1.5rem;
}

#s1-international .s1-icon-badge {
  margin: 0 0 1.25rem auto;
}

#s1-gallery .s1-icon-badge {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
}

#s1-gallery .s1-icon-glyph {
  width: 20px;
  height: 20px;
}

.s1-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(244, 239, 228, 0.85);
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.s1-hero {
  position: relative;
  padding: 6rem 3rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--sca-red);
  overflow: hidden;
}

.s1-hero::before {
  content: '';
  position: absolute;
  top: -8%;
  left: 50%;
  width: 65vw;
  height: 65vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(240, 215, 140, 0.18), transparent 70%);
  transform: translateX(-50%);
  animation: awardGlow 8s ease-in-out infinite;
  pointer-events: none;
}

.s1-logo-mark,
.s1-hero > .s1-kicker,
.s1-headline,
.s1-sub {
  position: relative;
  z-index: 1;
}

.s1-logo-mark {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.2em;
  color: var(--ivory);
  margin-bottom: 2rem;
}

.s1-headline {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ivory);
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  margin: 0;
}

.s1-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  color: rgba(244, 239, 228, 0.85);
  margin: 1.25rem 0 3.5rem;
}

.s1-photo-essay {
  width: 100%;
  max-width: 68rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.s1-photo-lg img,
.s1-photo-full img,
.s1-photo-item img,
.s1-ceremony-photo img,
.s1-archive-photo img {
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.s1-photo-lg img {
  border: 4px solid var(--ivory);
}

.s1-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.s1-statement {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.4;
  color: var(--ivory);
  text-align: center;
  max-width: 40rem;
  margin: 1rem auto;
}

.s1-ceremony {
  padding: 6rem 3rem;
  text-align: center;
}

.s1-ceremony-head {
  max-width: 64rem;
  margin: 0 auto 3rem;
  text-align: left;
}

.s1-ceremony-head .s1-kicker,
.s1-ceremony-head .s1-heading {
  text-align: left;
}

.s1-ceremony-head .s1-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  max-width: 24rem;
  margin: 0;
}

.s1-ceremony-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem;
  max-width: 64rem;
  margin: 0 auto;
  text-align: left;
}

.s1-video-frame {
  position: relative;
  flex: 0 0 460px;
  max-width: 460px;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.s1-video-ambient {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(45px) brightness(0.6) saturate(1.3);
  transform: scale(1.2);
  pointer-events: none;
}

.s1-video-main {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(244, 239, 228, 0.25);
  border-radius: 8px;
}

.s1-ceremony-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.s1-ceremony-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: none;
  margin: 0;
}

.s1-archive {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .s1-ceremony-head,
  .s1-ceremony-head .s1-kicker,
  .s1-ceremony-head .s1-heading {
    text-align: center;
  }

  .s1-ceremony-head .s1-heading {
    margin: 0 auto;
  }

  .s1-ceremony-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .s1-video-frame {
    flex: none;
    max-width: 340px;
    margin: 0 auto;
  }
}

.s1-archive-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.55);
  margin: 0 0 0.75rem;
}

.s1-archive-photo img {
  width: 100%;
  display: block;
  border-radius: 4px;
  filter: grayscale(15%);
  opacity: 0.92;
}

.s1-winners {
  padding: 6rem 3rem;
}

.s1-winners .s1-heading {
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  letter-spacing: 0.01em;
}

.s1-winners-hero {
  position: relative;
  max-width: 50rem;
  margin: 0 auto 4rem;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1-winners-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 2, 3, 0.72);
}

.s1-winners-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2rem;
}

.s1-winners-hero-inner::before,
.s1-winners-hero-inner::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(240, 215, 140, 0.75);
  pointer-events: none;
}

.s1-winners-hero-inner::before {
  top: 1rem;
  left: 1rem;
  border-right: none;
  border-bottom: none;
}

.s1-winners-hero-inner::after {
  bottom: 1rem;
  right: 1rem;
  border-left: none;
  border-top: none;
}

.s1-winners-hero-line {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ivory);
  margin: 0.25rem 0;
}

.s1-winners-hero-line.gold {
  color: var(--gold);
}

.s1-major-winners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 60rem;
  margin: 0 auto 4rem;
}

.s1-winner-major {
  border-top: 1px solid rgba(244, 239, 228, 0.25);
  padding-top: 1.5rem;
}

.s1-winner-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--ivory);
  margin: 0;
}

.s1-winner-count {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.35rem 0 1rem;
}

.s1-winner-awards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.s1-winner-awards li {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 239, 228, 0.85);
}

.s1-honorees {
  max-width: 56rem;
  margin: 0 auto;
}

.s1-honorees-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.55);
  text-align: center;
  margin: 0 0 1.5rem;
}

.s1-honoree-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 3rem;
}

.s1-honoree-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(244, 239, 228, 0.15);
}

.s1-honoree-name {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--ivory);
}

.s1-honoree-award {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(244, 239, 228, 0.65);
  text-align: right;
}

.s1-international,
.s1-media {
  padding: 6rem 3rem;
  text-align: center;
}

#s1-international .s1-kicker,
#s1-international .s1-heading,
#s1-international .s1-copy {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

#s1-international .s1-heading:not(.small) {
  max-width: 36rem;
}

#s1-international .s1-heading.small {
  max-width: 30rem;
}

#s1-international .s1-copy {
  max-width: 30rem;
}

#s1-media .s1-kicker,
#s1-media .s1-heading,
#s1-media .s1-copy {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

#s1-media .s1-heading {
  max-width: 30rem;
}

#s1-media .s1-copy {
  max-width: 34rem;
}

@media (max-width: 900px) {
  #s1-international .s1-kicker,
  #s1-international .s1-heading,
  #s1-international .s1-copy,
  #s1-media .s1-kicker,
  #s1-media .s1-heading,
  #s1-media .s1-copy {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

.s1-flags-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-top: 3.5rem;
}

.s1-flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s1-flag-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
}

.s1-flag-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ivory);
  margin: 0;
}

.s1-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 1.25rem;
  max-width: 68rem;
  margin: 3.5rem auto 0;
}

.s1-media-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s1-media-item:hover {
  transform: translateY(-4px) scale(1.02);
}

.s1-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s1-media-item.size-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.s1-media-item.size-md {
  grid-column: span 2;
  grid-row: span 1;
}

.s1-media-item.size-sm {
  grid-column: span 1;
  grid-row: span 1;
}

.s1-gallery {
  position: relative;
  min-height: 100vh;
  padding: 6rem 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.s1-gallery::before {
  content: '';
  position: absolute;
  bottom: -15%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(240, 215, 140, 0.12), transparent 70%);
  transform: translateX(-50%);
  animation: awardGlow 9s ease-in-out infinite;
  pointer-events: none;
}

.s1-gallery > * {
  position: relative;
  z-index: 1;
}

.s1-gallery .s1-kicker {
  font-size: 0.7rem;
  margin-bottom: 0.75rem;
}

.s1-gallery .s1-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom: 0;
}

.s1-slider {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 65vh;
  min-height: 380px;
  margin-top: 2.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
}

.s1-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.s1-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.s1-slide.active {
  opacity: 1;
}

.s1-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.s1-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ivory);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.s1-slider-arrow:hover {
  background: var(--gold);
  color: #000;
}

.s1-slider-arrow.prev {
  left: 1.25rem;
}

.s1-slider-arrow.next {
  right: 1.25rem;
}

.s1-slider-counter {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1.25rem;
}

.s1-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.s1-lightbox.open {
  display: flex;
}

.s1-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.s1-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 2.2rem;
  color: var(--ivory);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.s1-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ivory);
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 1;
}

.s1-lightbox-arrow:hover {
  background: var(--gold);
  color: #000;
}

.s1-lightbox-arrow.prev {
  left: 1.5rem;
}

.s1-lightbox-arrow.next {
  right: 1.5rem;
}

@media (max-width: 900px) {
  .s1-photo-row,
  .s1-ceremony-photos {
    grid-template-columns: 1fr;
  }

  .s1-major-winners {
    grid-template-columns: 1fr;
  }

  .s1-honoree-grid {
    grid-template-columns: 1fr;
  }

  .s1-media-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }

  .s1-media-item.size-lg {
    grid-column: span 2;
    grid-row: span 2;
  }

  .s1-media-item.size-md {
    grid-column: span 2;
    grid-row: span 1;
  }

  .s1-flag-img {
    width: 96px;
    height: 96px;
  }
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 3rem;
  background: radial-gradient(ellipse at 50% 30%, var(--navy) 0%, var(--bg) 70%);
  overflow: hidden;
}

.coming-soon::before {
  content: '';
  position: absolute;
  top: 42%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(240, 215, 140, 0.14), transparent 70%);
  transform: translate(-50%, -50%);
  animation: awardGlow 8s ease-in-out infinite;
  pointer-events: none;
}

.coming-soon-kicker {
  position: relative;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.75rem;
}

.coming-soon-headline {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ivory);
  max-width: 54rem;
  margin: 0 0 1.75rem;
}

.coming-soon-sub {
  position: relative;
  z-index: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(244, 239, 228, 0.75);
  max-width: 34rem;
  margin: 0 0 2.5rem;
}

.coming-soon-tag {
  position: relative;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.85rem 1.75rem;
  border: 1px solid rgba(240, 215, 140, 0.4);
  border-radius: 999px;
}

.marquee {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}

.marquee-track span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.32);
  padding: 0 1.25em;
  white-space: nowrap;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-band {
  position: relative;
  width: 100%;
  padding: 3.5rem 0;
  background: var(--bg);
  border-top: 1px solid rgba(240, 215, 140, 0.18);
  border-bottom: 1px solid rgba(240, 215, 140, 0.18);
  overflow: hidden;
}

.marquee-band-track {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 30s linear infinite;
}

.marquee-band-group {
  display: inline-flex;
  align-items: center;
}

.marquee-band-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(0.96rem, 2.04vw, 1.8rem);
  line-height: 1;
  letter-spacing: 0.03em;
  font-variant-caps: all-small-caps;
  color: var(--ivory);
  padding: 0 1.5em;
  white-space: nowrap;
}

.marquee-band-icon {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  background-color: #ffffff;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.marquee-band-icon.icon-youth {
  -webkit-mask-image: url('../assets/home-page-photos/participation.svg');
  mask-image: url('../assets/home-page-photos/participation.svg');
}

.marquee-band-icon.icon-education {
  -webkit-mask-image: url('../assets/home-page-photos/graduation-cap-svgrepo-com.svg');
  mask-image: url('../assets/home-page-photos/graduation-cap-svgrepo-com.svg');
}

.marquee-band-icon.icon-entertainment {
  -webkit-mask-image: url('../assets/home-page-photos/entertainment.svg');
  mask-image: url('../assets/home-page-photos/entertainment.svg');
}

.marquee-band-icon.icon-diplomacy {
  -webkit-mask-image: url('../assets/home-page-photos/globe.svg');
  mask-image: url('../assets/home-page-photos/globe.svg');
}

.marquee-band-icon.icon-unity {
  -webkit-mask-image: url('../assets/home-page-photos/group.svg');
  mask-image: url('../assets/home-page-photos/group.svg');
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .vote-btn,
  .scroll-rail-fill,
  .award-hero::before,
  .award-scroll-cue::after,
  .coming-soon::before,
  .s1-hero::before,
  .s1-gallery::before,
  .marquee-track,
  .marquee-band-track {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ============================================================
   MOBILE — shared chrome + homepage
   Breakpoints: 900 (nav + layout collapse) / 700 / 420
   ============================================================ */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* The base `body { padding-right }` / `.site-header { margin-right }` rules are
     declared after the earlier 900px block, so they win there. Reset them here. */
  body { padding-right: 0; }

  /* --- Header: logo | vote | burger --- */
  .site-header {
    margin-right: 0;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
  }

  .logo { font-size: 1.7rem; letter-spacing: 0.12em; }
  .tagline { font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1.25; }
  .nav-toggle { display: flex; }

  .vote-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Nav becomes a full-width dropdown panel --- */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-column: auto;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  }

  .main-nav.is-open {
    max-height: calc(100vh - var(--header-h, 4.75rem));
    max-height: calc(100svh - var(--header-h, 4.75rem));
    height: calc(100vh - var(--header-h, 4.75rem));
    height: calc(100svh - var(--header-h, 4.75rem));
    justify-content: center;
    border-bottom-color: rgba(240, 215, 140, 0.28);
  }

  .main-nav a {
    padding: 1.05rem 1.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
  }

  .main-nav a:last-child { border-bottom: 0; }
  .main-nav.is-open a { opacity: 1; transform: none; }
  .main-nav.is-open a:nth-child(1) { transition-delay: 0.05s; }
  .main-nav.is-open a:nth-child(2) { transition-delay: 0.09s; }
  .main-nav.is-open a:nth-child(3) { transition-delay: 0.13s; }
  .main-nav.is-open a:nth-child(4) { transition-delay: 0.17s; }
  .main-nav.is-open a:nth-child(5) { transition-delay: 0.21s; }
  .main-nav.is-open a:nth-child(6) { transition-delay: 0.25s; }
  .main-nav.is-open a:nth-child(7) { transition-delay: 0.29s; }

  /* --- Global rhythm --- */
  main { gap: 44px; overflow-x: clip; }
  .section { min-height: 0; padding: 3.25rem 1.5rem; }
  .marquee-band { padding: 2.25rem 0; }

  /* --- Hero --- */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 3rem 1.5rem 0;
    justify-content: flex-start;
    align-items: flex-end;
    background-size: cover;
    background-position: center top;
  }

  .hero::after {
    content: none;
  }

  .hero-text {
    transform: none;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-text h1 { font-size: clamp(1.75rem, 7.5vw, 2.6rem); line-height: 1.25; }
  .hero-text h2 { font-size: 0.95rem; margin-top: 1.1rem; }
  .hero-text p { font-size: 0.9rem; margin-top: 0.9rem; }
  .hero-buttons { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

  /* --- Section 2 --- */
  .section-2 { min-height: 664px; }
  .section-2-content { grid-template-columns: 1fr; gap: 2rem; align-content: end; }

  .section-2-bg {
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
  }

  /* Darker scrim so body copy stays readable over the ballot-box artwork */
  .section-2::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.85) 100%); }

  .section-2-left { margin-left: 0; padding-top: 0; }
  .section-2-left h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  .section-2-right { margin-left: 0; padding-top: 0; }
  .section-2-right p.lead { max-width: 100%; font-size: 0.95rem; }

  .stats-row {
    position: static;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2.25rem;
  }

  .stat-logo { width: 34px; height: 34px; margin-bottom: 0.5rem; }
  .stat-item p { font-size: 0.7rem; letter-spacing: 0; overflow-wrap: anywhere; }

  /* --- Section 3 --- */
  .section-3-heading { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .section-3-lead { font-size: 0.95rem; margin-top: 1.25rem; }
  .section-3-lead br { display: none; }
  .feature-list { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
  .feature-logo { width: 40px; height: 40px; }

  /* --- Section 4: countries become a swipeable strip --- */
  .section-4 { flex-direction: column; align-items: stretch; }
  .section-4::before { content: none; }

  .country-row {
    position: static;
    order: 2;
    margin: 2rem -1.5rem 0;
    padding: 0 1.5rem 0.25rem;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .country-row::-webkit-scrollbar { display: none; }

  .country-item {
    flex: 0 0 62%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    border-radius: 6px;
    scroll-snap-align: start;
  }

  .section-4-text { order: 1; }
  .section-4-text h2 { font-size: clamp(1.55rem, 6vw, 2.2rem); }
  .section-4-text p { font-size: 0.95rem; margin: 1.25rem 0 1.75rem; }

  /* --- Section 5 --- */
  .section-5 {
    min-height: 0;
    padding: 3.5rem 1.5rem;
    background-image: url('../assets/home-page-photos/section-5-mobile.webp'); background-image: image-set(url('../assets/home-page-photos/section-5-mobile.avif') type('image/avif'), url('../assets/home-page-photos/section-5-mobile.webp') type('image/webp'));
    background-position: center;
  }
  @media (max-width: 700px) {
    .section-5 { background-image: url('../assets/home-page-photos/section-5-mobile-800.webp'); background-image: image-set(url('../assets/home-page-photos/section-5-mobile-800.avif') type('image/avif'), url('../assets/home-page-photos/section-5-mobile-800.webp') type('image/webp')); }
  }
  .section-5-inner h2 { margin-bottom: 1.75rem; }

  /* --- Section 6 --- */
  .section-6 { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
  .section-6-text h2 { font-size: clamp(2rem, 7.8vw, 2.86rem); }
  .section-6-text p { font-size: 0.9rem; margin-top: 1.25rem; }
  .section-6-text p br { display: none; }

  .pillar-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-left: 0;
  }

  .pillar-logo { width: 40px; height: 40px; }
  .pillar-logo.icon-credibility { width: 48px; height: 48px; }
  .pillar-item p { font-size: 0.9rem; }

  /* --- Section 7: season tiles become a swipeable strip --- */
  .section-7 {
    display: block;
    padding: 0;
    height: var(--s7-height, auto);
    margin-top: -44px; /* matches main's mobile gap */
  }

  /* content-height block, pinned centred via --s7-top (set in script.js) so no
     empty screen-height space is left before section 8 when the pin releases */
  .section-7-sticky {
    position: sticky;
    top: var(--s7-top, 0px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
    padding: 5.5rem 1.5rem 2rem;
  }

  .section-7-heading { font-size: clamp(1.55rem, 6vw, 2.2rem); }
  .section-7-lead { margin: 1rem 0 1.75rem; }
  .section-7-lead br { display: none; }

  .season-one-grid {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 -1.5rem;
    padding: 0 1.5rem 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .season-one-grid::-webkit-scrollbar { display: none; }
  .season-tile { flex: 0 0 68%; }

  /* --- Section 8 --- */
  .section-8 {
    flex-direction: column;
    justify-content: center;
    background-size: cover !important;
    background-position: center !important;
  }

  .section-8::before { content: ''; background: rgba(0, 0, 0, 0.62); }
  .section-8-text h2 { white-space: normal; font-size: clamp(1.5rem, 5.8vw, 2.2rem); }
  .section-8-text p { font-size: 0.95rem; margin: 1.25rem 0 1.75rem; }
  .section-8-text p br { display: none; }

  /* --- Footer --- */
  .footer-brand .logo { font-size: 1.6rem; }
  .footer-links { gap: 2.5rem; }
}

@media (max-width: 700px) {
  /* bullets are hidden at this width — restore spacing between names */
  .section-5-names { column-gap: 1.25rem; }
}

@media (max-width: 420px) {
  .logo { font-size: 1.45rem; }
  .vote-btn { padding: 0.45rem 0.7rem; font-size: 0.7rem; }

  .hero { padding: 2.5rem 1.5rem 0; }

  /* Compact header so the burger fits at 320px */
  .site-header { padding-left: 0.9rem; padding-right: 0.9rem; gap: 0.5rem; }
  .logo-wrap { gap: 0.5rem; }
  .logo-img { height: 2.25rem; margin: 0; }

  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons a { text-align: center; }

  .country-item { flex-basis: 74%; }
  .season-tile { flex-basis: 78%; }
  .footer-links { gap: 1.75rem; }
}


/* ---------- Page transitions (cross-document View Transitions, same as v2) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.55s cubic-bezier(0.65, 0, 0.35, 1) both; }
::view-transition-new(root) { animation: vt-in 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes vt-out { to { opacity: 0.2; transform: translateY(-4vh) scale(0.985); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Header hides on scroll down, returns on scroll up (toggled by js/nav.js) */
.site-header {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }

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

/* Section 6 background: campus at night (desktop / tablet / mobile crops) */
.section-6 {
  position: relative;
  min-height: 80vh;
  align-items: center;
  padding: 5rem 3rem;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.7) 100%),
    url('../assets/home-page-photos/section-6-desktop.webp');
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.7) 100%),
    image-set(url('../assets/home-page-photos/section-6-desktop.avif') type('image/avif'), url('../assets/home-page-photos/section-6-desktop.webp') type('image/webp'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 1100px) {
  .section-6 {
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.7) 100%),
      url('../assets/home-page-photos/section-6-tablet.webp');
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.7) 100%),
      image-set(url('../assets/home-page-photos/section-6-tablet.avif') type('image/avif'), url('../assets/home-page-photos/section-6-tablet.webp') type('image/webp'));
  }
}

@media (max-width: 900px) {
  .section-6 {
    min-height: 0;
    padding: 3rem 1.5rem;
  }
}

@media (max-width: 700px) {
  .section-6 {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.8) 100%),
      url('../assets/home-page-photos/section-6-mobile-800.webp');
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.8) 100%),
      image-set(url('../assets/home-page-photos/section-6-mobile-800.avif') type('image/avif'), url('../assets/home-page-photos/section-6-mobile-800.webp') type('image/webp'));
    background-position: center bottom;
  }
}

/* Dark glass while the header is over a light section (toggled by js/nav.js) */
.site-header {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.on-light {
  background: rgba(20, 3, 6, 0.6);
  border-bottom-color: rgba(20, 3, 6, 0.2);
}

/* Page transitions (cross-document View Transitions) — matches pages/css/base.css
   so navigating between the homepage and the other pages animates both ways. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.55s cubic-bezier(0.65, 0, 0.35, 1) both; }
::view-transition-new(root) { animation: vt-in 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes vt-out { to { opacity: 0.2; transform: translateY(-4vh) scale(0.985); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Polish · 01 Hero ---------- */
/* soft shade behind the text block so the copy reads cleanly over the photo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}
.hero-text h1 { line-height: 1.12; letter-spacing: 0.015em; }
.hero-text h2 {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(240, 215, 140, 0.35);
  max-width: 30rem;
}
.hero-text h2 .gold { text-shadow: none; }
.hero-text p { line-height: 1.75; color: rgba(255, 255, 255, 0.8); max-width: 30rem; }
.hero-buttons { margin-top: 2.25rem; }
.hero-buttons a { padding: 0.9rem 2rem; letter-spacing: 0.1em; }

@media (max-width: 900px) {
  /* Mobile: the emblem image is shown whole at full width, and the copy starts on the
     reflective floor below the podium (~76% down the 940x1671 image) instead of over the wordmark */
  .hero {
    --hero-img-h: calc(100vw * 1671 / 940);
    min-height: 0;
    padding-top: calc(var(--hero-img-h) * 0.76);
    background-size: 100% auto;
    background-position: center top;
  }
  /* emblem stays clear; the floor fades to black behind the copy and below the image */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) calc(var(--hero-img-h) * 0.7),
      rgba(0, 0, 0, 0.6) calc(var(--hero-img-h) * 0.8),
      rgba(0, 0, 0, 0.9) calc(var(--hero-img-h) * 0.9),
      #000 var(--hero-img-h));
  }
  .hero-text { padding-bottom: 2.5rem; }
  .hero-text h2 { font-size: 0.82rem; letter-spacing: 0.12em; margin-top: 1.25rem; padding-top: 1rem; }
}

@media (min-width: 901px) {
  /* Desktop: landscape image with the emblem composed on the left
     (hero-img-desktop-left.jpg, emblem spans ~7–59% of its width), shown zoomed out to
     88% of the hero's width so the emblem keeps that position on every aspect ratio
     (emblem ends at ~52% of the hero). The leftover right/top/bottom is black and the
     fades below hide the image edges. padding-left keeps the copy right of the emblem. */
  .hero {
    /* image height (hero width ≈ 100vw minus the 4.5rem rail gutter) and its top: centred
       in the space below the fixed header, but never above 7.5rem so the header can't cover it */
    --hero-img-h: calc((100vw - 4.5rem) * 0.88 * 941 / 1672);
    --hero-img-top: max(7.5rem, calc(50svh + 3.75rem - var(--hero-img-h) / 2));
    --hero-ph: url('data:image/webp;base64,UklGRpwBAABXRUJQVlA4IJABAAAwCQCdASowABsAPt1iqU+opSOiKqgBEBuJagCl31C490Yug2//pEwoBxqbC7RFyagljNCnkLuO4bWl8UuXH33QwpGJYHJiCXMLS3muYOciO4gAAP7xSxogk7zjjb+ypm3hn0NPssrb41P1RkIZ2M2gvReH3I38E+6KtQUhZmro8M/rNArJN1SJa1GowrxhSM+zzBSRP7WNF9WxYDtcpfPnd+2+1KMtjIGd6yv2rdsy1BYDx1lNKgu3N9vPdo3vI+7tJKmrMujvpoC/hJXP7DKl9Qah6TXDSZYYx2JOv5mfg8wxN4gXL7hH2EfiotnSJsNsuT+hvV75AZhoEq7PY8GtMQP9AbcdOyNPk0cWYoRiLu1n5l7Q7AwZrMN5f72EwiQY7EY+l2OqZ+3+bHqSytR8DzBIEvKNXrCiR0eSvdFxX5kzKe+tqmZ2irQimL3RsmrEF5mevwZ//Gnz1SATeM2FlkJ/z7ejeR/HdaEqre3LQD+v4JAnzrfhs2xFSTS8Oqz0dcMgdJECp5V3OexqyIAA');
    background-image: url('../assets/home-page-photos/hero-img-desktop-left-1440.webp'), var(--hero-ph); background-image: image-set(url('../assets/home-page-photos/hero-img-desktop-left-1440.avif') type('image/avif'), url('../assets/home-page-photos/hero-img-desktop-left-1440.webp') type('image/webp')), var(--hero-ph);
    background-size: 88% auto;
    background-position: left 0 top var(--hero-img-top);
    padding-top: 7.5rem;
    padding-left: calc(52% + 2rem);
  }
  /* the 1440px copy covers screens up to ~1700px wide; larger ones get the full-size image
     (index.html preloads whichever one matches) */
  @media (min-width: 1700px) {
    .hero { background-image: url('../assets/home-page-photos/hero-img-desktop-left.webp'), var(--hero-ph); background-image: image-set(url('../assets/home-page-photos/hero-img-desktop-left.avif') type('image/avif'), url('../assets/home-page-photos/hero-img-desktop-left.webp') type('image/webp')), var(--hero-ph); }
  }
  /* shade behind the copy (solid at the far right to hide the image's right edge),
     plus fades on the image's own top and bottom edges */
  .hero::before {
    background:
      linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.75) 14%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0) 46%),
      linear-gradient(180deg,
        #000 var(--hero-img-top),
        rgba(0, 0, 0, 0) calc(var(--hero-img-top) + var(--hero-img-h) * 0.12),
        rgba(0, 0, 0, 0) calc(var(--hero-img-top) + var(--hero-img-h) * 0.8),
        #000 calc(var(--hero-img-top) + var(--hero-img-h)));
  }
  /* the 1.1 zoom grows rightward into the margin, never back over the emblem */
  .hero-text {
    max-width: 32rem;
    margin-right: 2rem;
    transform-origin: left center;
  }
}

/* ---------- Polish · Marquee band ---------- */
/* edges fade into black, gold icons, a small gold diamond between items, pauses on hover */
.marquee-band {
  padding: 2.75rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.marquee-band-track { animation-duration: 38s; }
.marquee-band:hover .marquee-band-track { animation-play-state: paused; }
.marquee-band-item {
  position: relative;
  padding: 0 2.25em;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-variant-caps: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 228, 0.88);
}
.marquee-band-item::after {
  content: '';
  position: absolute;
  right: -0.2em;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  background: var(--gold);
  opacity: 0.7;
  transform: translateY(-50%) rotate(45deg);
}
.marquee-band-icon { width: 1.15em; height: 1.15em; background-color: var(--gold); }

@media (max-width: 900px) {
  .marquee-band { padding: 1.75rem 0; }
  .marquee-band-item { padding: 0 1.6em; letter-spacing: 0.1em; }
}

/* ---------- Polish · 02 One generation ---------- */
.section-2-left h2 { line-height: 1.1; letter-spacing: 0.01em; }
.section-2-left .subtext {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  font: 500 0.78rem/1 'Oswald', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-2-left .subtext::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.section-2-right p.lead { font-size: 1.05rem; line-height: 1.8; max-width: 24rem; color: rgba(255, 255, 255, 0.82); }

/* stats: hairline on top, thin dividers, uppercase labels, gentle hover */
.stats-row { gap: 0; padding-top: 1.75rem; border-top: 1px solid rgba(240, 215, 140, 0.22); }
.stat-item { padding: 0 1.25rem; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.stat-item:first-child { padding-left: 0; }
.stat-item + .stat-item { border-left: 1px solid rgba(240, 215, 140, 0.18); }
.stat-logo { width: 42px; height: 42px; margin-bottom: 1.1rem; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.stat-item:hover .stat-logo { transform: translateY(-4px); }
.stat-item p {
  font: 500 0.78rem/1.45 'Oswald', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
  .stats-row { padding-top: 1.25rem; }
  .stat-item { padding: 0 0.6rem; }
  .stat-logo { width: 30px; height: 30px; margin-bottom: 0.6rem; }
  .stat-item p { font-size: 0.7rem; letter-spacing: 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-item, .stat-logo { transition: none; }
}

/* ---------- Polish · 03 Not another awards ceremony ---------- */
.section-3-heading { font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: 0.01em; }
.section-3-lead { margin-top: 1.75rem; line-height: 1.8; padding-left: 1.25rem; border-left: 1px solid var(--gold); }

/* the three points become numbered columns on a shared gold hairline */
.feature-list { counter-reset: hm-feature; gap: 0; margin-top: 4.5rem; border-top: 1px solid rgba(240, 215, 140, 0.25); }
.feature-item {
  counter-increment: hm-feature;
  position: relative;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 2rem 0 0;
}
.feature-item + .feature-item { padding-left: 2rem; border-left: 1px solid rgba(240, 215, 140, 0.15); }
.feature-item::before {
  content: '0' counter(hm-feature);
  position: absolute;
  top: 2rem;
  right: 2rem;
  font: 500 0.75rem/1 'Oswald', sans-serif;
  letter-spacing: 0.2em;
  color: rgba(240, 215, 140, 0.6);
}
.feature-logo { width: 40px; height: 40px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.feature-item:hover .feature-logo { transform: translateY(-4px); }
.feature-text h3 { font-weight: 500; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.feature-text p { line-height: 1.65; }

@media (max-width: 900px) {
  .section-3-heading { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .feature-list { gap: 0; margin-top: 2.5rem; }
  .feature-item, .feature-item + .feature-item {
    padding: 1.5rem 2.5rem 1.5rem 0;
    border-left: 0;
    border-bottom: 1px solid rgba(240, 215, 140, 0.15);
  }
  .feature-item::before { top: 1.6rem; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .feature-logo { transition: none; } }
/* no hairline across the top of the photo; fade the photo's top edge into the black above */
.section-3 { border-top: 0; box-shadow: inset 0 24px 24px -12px #000; }

/* ---------- Polish · 05 The names that defined the year (text only, photo untouched) ---------- */
.section-5-inner h2 {
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
/* short gold rule under the headline */
.section-5-inner h2::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 2rem auto 0;
  background: var(--gold);
  opacity: 0.7;
}
.section-5-names p { font-size: 0.92rem; letter-spacing: 0.24em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
/* small gold diamonds between the fields, matching the marquee */
.section-5-names p:not(:last-child)::after {
  content: '';
  width: 0.38em;
  height: 0.38em;
  margin: 0 1.25rem 0.15em;
  vertical-align: middle;
  background: var(--gold);
  opacity: 0.6;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .section-5-inner h2::after { margin-top: 1.5rem; }
  .section-5-names p { font-size: 0.8rem; }
}

/* ---------- Polish · 06 Born at a university (text and values only, photo untouched) ---------- */
.section-6-text h2 { line-height: 1.1; letter-spacing: 0.01em; }
.section-6-text p { line-height: 1.8; padding-left: 1.25rem; border-left: 1px solid var(--gold); margin-top: 1.75rem; }

/* values become a tidy list: same-size icons, hairline dividers, uppercase labels */
.pillar-list { gap: 0; min-width: 16rem; border-top: 1px solid rgba(240, 215, 140, 0.25); }
.pillar-item {
  width: 100%;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(240, 215, 140, 0.18);
}
.pillar-logo,
.pillar-logo.icon-credibility { width: 40px; height: 40px; }
.pillar-item p {
  font: 500 1rem/1 'Oswald', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .pillar-list { gap: 0 1.25rem; min-width: 0; }
  .pillar-item { padding: 0.9rem 0; gap: 0.9rem; }
  .pillar-logo,
  .pillar-logo.icon-credibility { width: 32px; height: 32px; }
  .pillar-item p { font-size: 0.82rem; letter-spacing: 0.14em; }
}

/* ---------- Polish · 07 Season One (text and labels only, photos untouched) ---------- */
.section-7-heading { line-height: 1.12; letter-spacing: 0.01em; }
.section-7-lead { line-height: 1.8; padding-left: 1.25rem; border-left: 1px solid var(--gold); margin: 1.5rem 0 2.25rem; }

/* tile labels: small gold number above an uppercase Oswald caption */
.season-one-grid { counter-reset: s7-tile; }
.season-tile { counter-increment: s7-tile; }
.season-tile p {
  font: 500 0.8rem/1.3 'Oswald', sans-serif;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.season-tile p::before {
  content: '0' counter(s7-tile);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}

@media (max-width: 900px) {
  .section-7-lead { margin: 1rem 0 1.75rem; }
}

/* ---------- Polish · 08 Cast your vote (text only, photo untouched) ---------- */
.section-8-text h2 {
  font-size: clamp(2.4rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.section-8-text p { line-height: 1.8; padding-left: 1.25rem; border-left: 1px solid var(--gold); margin: 1.75rem 0 2.25rem; }
.section-8-text .btn-primary { padding: 0.9rem 2rem; letter-spacing: 0.1em; }

@media (max-width: 900px) {
  .section-8-text h2 { font-size: clamp(1.5rem, 5.8vw, 2.2rem); }
  .section-8-text p { margin: 1.25rem 0 1.75rem; }
}

/* ---------- Responsive fixes (placed last so they win the cascade) ---------- */

/* Stats: two clean columns on phones instead of four cramped ones */
@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .stat-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat-item p { overflow-wrap: normal; }
}

/* Small laptops / tablet landscape: compact header so the nav + Vote Now fit,
   and a Season One grid that can shrink instead of overflowing */
@media (min-width: 901px) and (max-width: 1300px) {
  .site-header { padding: 1rem 1.5rem; column-gap: 1.25rem; }
  .logo-img { display: none; }
  .main-nav { gap: clamp(0.9rem, 1.6vw, 1.5rem); }
  .main-nav a { font-size: 0.8rem; letter-spacing: 0.08em; }
  .vote-btn { padding: 0.55rem 1.1rem; font-size: 0.8rem; }

  /* hero: the copy drops the 1.1 zoom (the parallax in script.js is off below
     1301px too) and tightens up to fit the narrower column beside the emblem */
  .hero { padding-left: calc(52% + 1.5rem); padding-right: 2rem; }
  .hero-text { transform: none; margin-right: 0; }
  .hero-text h1 { font-size: clamp(2rem, 3.2vw, 3rem); }
  .hero-buttons { flex-wrap: wrap; gap: 0.75rem; }

  .section-7 { flex-direction: column; align-items: stretch; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
  .season-one-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; }
}

/* Wide desktop: keep "Home" from touching the logo image */
@media (min-width: 1301px) {
  .site-header { column-gap: 1.5rem; }
  .main-nav { gap: clamp(1rem, 2.4vw, 5rem); }
}

/* Rail 04 → 05 → 06 (The Night → countries strip → nominees): tighter spacing.
   Negative margins eat into main's gap (70px desktop / 44px mobile). */
.section-4,
.section-5 { margin-top: -46px; } /* 70px → 24px */

@media (max-width: 900px) {
  .section-4,
  .section-5 { margin-top: -28px; } /* 44px → 16px */
  /* the countries strip has no background, so its padding reads as empty space */
  .section-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ---------- Performance helpers (toggled by js/script.js) ---------- */
/* Lazy backgrounds: below-the-fold photos stay unfetched until .bg-in arrives.
   Only with JS (.js on <html>), so the page still shows every photo without it.
   !important keeps the photos off whichever later rule sets them (AVIF/WebP picks). */
.js .lazy-bg:not(.bg-in),
.js .lazy-bg:not(.bg-in) .country-item,
.js .lazy-bg:not(.bg-in) .photo-stack-item {
  background-image: none !important;
}

/* Endless decorative loops are paused while their section is off screen */
.anim-paused,
.anim-paused * {
  animation-play-state: paused !important;
}

/* ---------- Phones / touch screens: keep scrolling at 60fps ----------
   These effects force a repaint on every frame, which phones can't keep up with while scrolling */
@media (hover: none), (max-width: 900px) {
  /* the blur under a sticky header is redone on every scroll frame: darker, unblurred glass instead */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 8, 8, 0.86);
  }
  .site-header.on-light { background: rgba(20, 3, 6, 0.9); }
  .main-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* endless glow pulses animate text-shadow / box-shadow: a repaint per frame, forever */
  .logo,
  .vote-btn,
  .scroll-rail-fill { animation: none; }
}