/* The site-wide page canvas (base.css) is a light grey (--bg) with white
   cards floating on it - the convention every other page still uses. The
   home page's redesigned sections are full-bleed white instead (About,
   Dates, Sites, Process, Jury, FAQ), so without this the grey canvas would
   show through as visible bands between them. Scoped to .page-home only -
   see body_class in base.html - so it doesn't touch any other page. */
body.page-home main {
  background: #fff;
}

/* Shared section rhythm */
.home-eyebrow {
  display: inline-block;
  font: 18px var(--font-heading);
  /* color: var(--isun-orange); */
  color: #F05A22CC;
  font-weight: 500;
  margin: 0 0 var(--space-3);
}

.home-eyebrow-light {
  color: #f05a22;
}

.home-heading {
  font: 600 clamp(1.75rem, 3vw, 2.25rem) var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--isun-ink);
  margin: 0 0 var(--space-4);
}

.home-heading-light {
  color: #fff;
}

/* Matches the vertical-bar-before-heading treatment used site-wide (About,
   FAQs, Awards, Design Brief, Guidelines, Site Brief, Partners). Floated
   rather than a flex sibling: several of these headings are long enough to
   wrap onto multiple lines in their column, and a flex row splits a
   wrapping prefix/accent pair into jumbled side-by-side fragments instead
   of one flowing block of text. Floating keeps the bar beside the first
   line only and lets the rest wrap normally underneath, full width. */
.home-heading-bar {
  float: left;
  width: 7px;
  height: 0.85em;
  margin: 0.15em var(--space-3) 0 0;
  background: var(--isun-orange);
  border-radius: 3px;
}

/* The trailing word/phrase of a heading, styled apart from the rest - text
   comes from a paired `_prefix`/`_accent` ContentBlock pair (see seed.py),
   not a single split string, so editing either half in admin can't
   desynchronise the two colours. Orange on navy text; the light-heading
   variant swaps in gold for enough contrast on the dark contact card. */
.home-heading-accent {
  color: var(--isun-orange);
}

.home-heading-light .home-heading-accent {
  color: #f05a22;
}

.home-heading-light .home-heading-bar {
  background: #f05a22;
}

/* ===== Hero ===== */
.home-hero {
  position: relative;
  /* min-height: 640px; */
  min-height: 570px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  color: #fff;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  background: url('/static/img/home/hero-bg.webp') center / cover no-repeat, var(--isun-navy);
}

.home-hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  width: 100%;
}

.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  margin-bottom: var(--space-5);
}

.home-hero-badge-label {
  font: 325 var(--text-sm) var(--font-body);
  color: var(--isun-body);
  white-space: nowrap;
}

.home-hero-badge-mark {
  display: block;
  height: 26px;
  width: auto;
}

.home-hero-headline {
  font: 600 clamp(2.25rem, 5vw, 3.5rem) var(--font-heading);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  max-width: 700px;
}

.home-hero-subhead {
  font: 325 var(--text-lg) var(--font-heading);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-6);
}

.home-hero-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.home-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-countdown-value {
  font: 300 clamp(2rem, 4vw, 3.4rem) var(--font-body);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-countdown-label {
  font: 425 13px var(--font-heading);
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.8);
}

.home-hero-countdown-caption {
  font: 400 var(--text-sm) var(--font-body);
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-3) 0 0;
}

.home-countdown-sep {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.4);
  align-self: center;
}

.home-hero-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* A compact floating glass pill pinned to the hero's own bottom-right corner
   - deliberately NOT inside .home-hero-inner's 1280px content column (that
   column sits well short of the actual right edge on wide viewports), matching
   the Figma source (Frame 1618873678 / Group 1321315511) and the reference
   screenshot, where this sits flush against the photo's right edge. */
.home-hero-partners {
  position: absolute;
  right: 0;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-6));
}

.home-hero-partners-label {
  font: 700 var(--text-sm) var(--font-body);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  margin-right: 2rem;
}

.home-hero-partners-pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  backdrop-filter: blur(7px);
  /* border-radius: var(--radius-pill); */
  padding: var(--space-3) var(--space-5);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;

}

.home-hero-partners-pill img {
  height: 28px;
  width: auto;
  display: block;
}

.home-hero-partners-pill img.home-hero-partners-griha {
  height: 38px;
}

.home-hero-partners-pill a,
.home-hero-badge a {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.home-hero-partners-pill a:hover,
.home-hero-badge a:hover {
  opacity: 0.75;
}

.home-hero-partners-sep {
  width: 1px;
  align-self: stretch;
  background: #CACACA;
}

/* ===== Ticker (stage-driven, not in the original mockup - kept as a slim
   strip so the live competition-stage status message isn't dropped) ===== */
.home-ticker {
  background: var(--isun-cream);
  border-bottom: 1px solid var(--isun-line);
  padding: var(--space-3) var(--space-6);
  /* display: flex; */
  display: none;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  font: 600 var(--text-sm) var(--font-heading);
  letter-spacing: 0.03em;
  color: var(--isun-ink);
  text-align: center;
}

.home-ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--isun-orange);
  flex: none;
}

/* ===== About =====
   A white, rounded-top "sheet" that overlaps the bottom of the hero photo
   (negative margin-top pulls it up over the hero, which has overflow:hidden
   so nothing spills out the top). The image bleeds to the true left edge of
   the viewport - the section itself carries no horizontal padding; the copy
   column insets itself instead - while the row's total width still tracks
   the site's usual 1280px rhythm via grid-template-columns: 1fr 1fr on a
   full-width grid. */
.home-about {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-8) 0;
}

.home-about-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-about-video {
  width: 100%;
  height: 100%;
  /* Matches the source video's native 1920x1080 (16:9) so contain shows the
     full frame with no letterboxing. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--isun-cream);
}

.home-about-video-cta {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  background: rgba(14, 16, 75, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: #fff;
  font: 600 var(--text-base) var(--font-heading);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(13, 15, 73, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-about-video-cta:hover {
  background: rgba(14, 16, 75, 0.75);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 15, 73, 0.32);
  color: #fff;
  text-decoration: none;
}

.home-about-video-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--isun-orange);
  color: #fff;
}

.home-about-video-cta-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.home-about-copy {
  max-width: 640px;
  padding-right: var(--space-6);
}

.home-about-body {
  color: var(--isun-body);
  margin: 0 0 var(--space-4);
  line-height: 1.7;
}

.home-about-callout {
  background: rgba(22, 29, 147, 0.06);
  border-left: 4px solid var(--isun-navy);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0 0;
}

.home-about-callout-heading {
  font: 600 var(--text-md) var(--font-heading);
  color: var(--isun-ink);
  margin-bottom: var(--space-2);
}

.home-about-callout-body {
  color: var(--isun-body);
  margin: 0;
  font-size: var(--text-sm);
}

/* ===== Key dates ===== */
.home-dates {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 2rem 1.5rem;
}

.home-dates-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.home-carousel-arrows {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.home-carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(14, 16, 75, 0.08);
  color: var(--isun-ink);
  font-size: 20px;
  cursor: pointer;
}

.home-carousel-arrow-active {
  background: var(--isun-navy);
  color: #fff;
}

.home-dates-track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* old Edge/IE */
}

.home-dates-track::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/new Edge */
}

.home-date-card {
  display: flex;
  align-items: stretch;
  flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
  background: #fff;
  border: 1px solid var(--isun-line);
  border-radius: 15px;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Flush to the card's left/top/bottom edges (overflow:hidden on the card
   clips it to match the card's own rounded corners on that side) rather
   than an inset block - the date is a left-hand panel, not a top strip. */
.home-date-card-badge {
  flex: none;
  width: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, rgba(233, 66, 17, 0.12) 0%, rgba(255, 179, 48, 0.06) 100%);
  padding: var(--space-4);
  align-items: center;
}

.home-date-card-daymonth {
  display: flex;
  align-items: center;
  /* gap: 6px; */
  flex-direction: column;
  font-weight: 900;
  align-content: center;
}

.home-date-card-day {
  font: 700 32px var(--font-heading);
  color: var(--isun-ink);
  letter-spacing: -0.04em;
}

.home-date-card-month {
  font: 700 13px var(--font-heading);
  letter-spacing: 0.06em;
  color: var(--isun-ink);
}

/* Range badge ("14 Sep – 12 Oct") - smaller than the single-date day
   number so both ends fit the 116px panel. */
.home-date-card-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 700 17px var(--font-heading);
  color: var(--isun-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}
.home-date-card-range-sep { font-size: 13px; line-height: 1; }

.home-date-card-year {
  font: 700 12px var(--font-heading);
  letter-spacing: 0.06em;
  color: var(--isun-orange);
}

.home-date-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
}

.home-date-card-label {
  font: 400 0.9rem var(--font-heading);
  color: var(--isun-ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.home-date-card-time {
  font: 600 12px var(--font-heading);
  letter-spacing: 0.02em;
  color: var(--isun-body);
}

/* Milestones whose date has already gone by (HomeMilestone.date_text < today,
   see milestone_date_parts) - greyed out rather than removed, since the card
   is still useful as a record of what's happened. */
.home-date-card-past {
  border-color: var(--isun-line);
}

.home-date-card-past .home-date-card-badge {
  background: var(--bg);
}

.home-date-card-past .home-date-card-range,
.home-date-card-past .home-date-card-day,
.home-date-card-past .home-date-card-month,
.home-date-card-past .home-date-card-year,
.home-date-card-past .home-date-card-label,
.home-date-card-past .home-date-card-time {
  color: var(--isun-body);
}

.home-dates-link {
  margin-top: var(--space-5);
  /* Hidden for now per request. Not deleted, same as .home-ticker: easy to
     re-show later - the link target is live now (/design-brief#timeline). */
  display: none;
}

/* ===== Three Islands ===== */
.home-sites {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.home-sites-body {
  color: var(--isun-body);
  max-width: 640px;
  margin: 0 0 var(--space-6);
}

.home-sites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.home-site-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(13, 16, 74, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-site-card:hover,
.home-site-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(13, 16, 74, 0.24);
  outline: none;
}

.home-site-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: contain;
  border-radius: 0;
  border: none;
}

.home-site-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 16, 75, 0.7);
  backdrop-filter: blur(4px);
  /* padding: var(--space-4); */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Anchored to the overlay itself (its containing block), not the card -
   sits at the overlay's own top-right corner regardless of overlay height. */
.home-site-card-flag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: auto;
  background: var(--isun-cream);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
}

.home-site-card-tick {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.home-site-card-name {
  font: 350 20px var(--font-heading);
  color: #fff;
  letter-spacing: -0.03em;
}

.home-site-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 350 var(--text-sm) var(--font-heading);
  color: var(--isun-orange-deep);
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding: 4px 0 0;
  margin: 0;
  transition: gap 0.2s ease, color 0.2s ease;
}

.home-site-card:hover .home-site-card-link,
.home-site-card:focus-visible .home-site-card-link {
  gap: 10px;
  text-decoration: underline;
}

/* ===== Process ===== */
.home-process {
  max-width: 1280px;
  margin: 0 auto;
  /* padding: var(--space-8) var(--space-6); */
  padding: 1rem 2rem 1.5rem;
}

.home-process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
}

.home-process-card {
  position: relative;
  background: var(--isun-navy);
  /* border-radius: var(--radius-md); */
  overflow: hidden;
  min-height: 360px;
  color: #fff;
}

.home-process-card:nth-child(2n) {
  background: var(--isun-orange);
}

/* A colour-tinted duotone wash over the photo - navy on odd cards, orange on
   even (matching .home-process-card's own alternation above), near-opaque at
   the bottom where the label/desc sit and lighter toward the top so the
   photo still reads through. A pseudo-element rather than a background on
   the <img> itself, since a background can't show through an opaque photo. */
.home-process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(14, 16, 75, 0.92) 0%, rgba(14, 16, 75, 0.82) 30%, rgba(14, 16, 75, 0.35) 65%, rgba(14, 16, 75, 0.15) 100%);
}

.home-process-card:nth-child(2n)::before {
  background: linear-gradient(0deg, rgba(240, 90, 34, 0.92) 0%, rgba(240, 90, 34, 0.82) 30%, rgba(240, 90, 34, 0.35) 65%, rgba(240, 90, 34, 0.15) 100%);
}

.home-process-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: none;
  transition: transform 0.4s ease;
}

.home-process-card:hover .home-process-card-image {
  transform: scale(1.06);
}

.home-process-card-number {
  position: absolute;
  z-index: 2;
  right: var(--space-4);
  /* top: var(--space-4);
  font: 325 4rem var(--font-heading); */
  top: 12rem;
  font: 325 6rem var(--font-heading);
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.home-process-card-body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4);
}

.home-process-card-label {
  font: 350 20px var(--font-heading);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}

.home-process-card-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* ===== Jury ===== */
.home-jury {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  /* Hidden for now per request, along with the /jury nav link. Not deleted,
     same as .home-ticker: easy to re-show later. */
  display: none;
}

.home-jury-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.home-jury-body {
  max-width: 420px;
  color: var(--isun-body);
  margin: 0;
}

.home-jury-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.home-jury-card-photo {
  position: relative;
  margin-bottom: var(--space-4);
}

.home-jury-card-image {
  aspect-ratio: 3 / 3.5;
  border-radius: 13px;
  border: none;
  background: linear-gradient(180deg, rgba(251, 251, 249, 0) 0%, rgba(240, 90, 34, 0.63) 100%);
  color: rgba(255, 255, 255, 0.85);
}

.home-jury-card-badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--isun-cream);
  font: 350 12px var(--font-heading);
  color: #231F20;
}

.home-jury-card-name {
  font: 400 22px var(--font-heading);
  letter-spacing: -0.04em;
  color: var(--isun-ink);
}

.home-jury-card-role {
  font: 325 var(--text-sm) var(--font-heading);
  letter-spacing: -0.02em;
  color: #272A41;
  margin-top: var(--space-1);
}

/* ===== Prizes ===== */
.home-prizes {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.home-prizes-body {
  color: var(--isun-body);
  margin: 0 0 var(--space-5);
  line-height: 1.7;
}

.home-prizes-images {
  display: flex;
  gap: var(--space-4);
}

.home-prizes-image-card {
  position: relative;
  flex: 1 1 0;
  color: inherit;
  overflow: hidden;
}

/* Winners & Runners-up card hidden for now per request. Not deleted, same
   as .home-jury: easy to re-show later. */
.home-prizes-image-card:first-child {
  display: none;
}

.home-prizes-image-card:hover {
  text-decoration: none;
}

.home-prizes-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(190deg, rgba(14, 16, 75, 0) 30%, var(--isun-navy) 90%);
}

.home-prizes-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 0;
  border: none;
  transition: transform 0.4s ease;
}

.home-prizes-image-card:hover .home-prizes-image {
  transform: scale(1.06);
}

.home-prizes-image-label {
  position: absolute;
  z-index: 2;
  left: var(--space-4);
  bottom: var(--space-4);
  right: var(--space-4);
  color: #fff;
  font: 350 20px var(--font-heading);
  letter-spacing: -0.04em;
  border-top: 1px solid #fff;
  padding-top: var(--space-3);
}

/* ===== FAQ ===== */
.home-faq {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-7);
  align-items: start;
}

.home-faq-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-faq-left .home-heading {
  margin: 0;
}

.home-faq-list {
  border-top: 1px solid #B0B0B0;
}

.home-faq-item {
  border-bottom: 1px solid #B0B0B0;
}

.home-faq-question {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font: 350 var(--text-md) var(--font-heading);
  letter-spacing: -0.02em;
  color: #414040;
}

.home-faq-question::-webkit-details-marker {
  display: none;
}

.home-faq-question-index {
  color: #212121;
  font: 400 var(--text-md) var(--font-heading);
  flex: none;
}

.home-faq-toggle {
  margin-left: auto;
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.home-faq-toggle::before,
.home-faq-toggle::after {
  content: "";
  position: absolute;
  background: #1C1B1F;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.home-faq-toggle::before {
  width: 12px;
  height: 2px;
}

.home-faq-toggle::after {
  width: 2px;
  height: 12px;
}

details[open] .home-faq-toggle::after {
  display: none;
}

.home-faq-answer {
  margin: 0 0 var(--space-5) 40px;
  color: var(--isun-ink);
  font-size: var(--text-sm);
  max-width: 640px;
}

.home-faq-empty {
  color: var(--muted);
  font-style: italic;
}

/* ===== Contact ===== */
.home-contact {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.home-contact-card {
  position: relative;
  background: var(--isun-navy);
  border-radius: 2px;
  overflow: hidden;
}

.home-contact-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the video for text legibility - same duotone-over-media pattern
   used on the process cards, just navy-only here rather than alternating. */
.home-contact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(14, 16, 75, 0.88) 0%, rgba(14, 16, 75, 0.7) 55%, rgba(240, 90, 34, 0.25) 100%);
}

.home-contact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7);
}

.home-contact-body {
  color: rgba(255, 255, 255, 0.8);
  max-width: 540px;
  margin: 0;
}

.home-contact-facts {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  padding: var(--space-5) var(--space-6);
}

.home-contact-fact-label {
  font: 325 var(--text-lg) var(--font-heading);
  color: rgba(255, 255, 255, 0.89);
  margin-bottom: var(--space-1);
}

.home-contact-fact-value {
  font: 350 var(--text-xl) var(--font-heading);
  color: #fff;
  letter-spacing: -0.02em;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {

  .home-hero {
    min-height: auto;
    padding-bottom: var(--space-7);
  }

  .home-hero-partners {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    align-items: center !important;
    margin: var(--space-6) auto 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 var(--space-4) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  .home-hero-partners-label {
    margin-right: 0 !important;
    text-align: center !important;
  }

  .home-hero-partners-pill {
    border-radius: var(--radius-pill) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    padding: var(--space-2) var(--space-4) !important;
  }

  .home-about,
  .home-prizes,
  .home-faq,
  .home-contact-inner {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: the image is now a full-width top banner rather than a
     left-bled column beside text, so only its bottom corners round. */
  .home-about-image {
    border-radius: 0;
  }

  .home-about-copy {
    max-width: none;
    padding: 0 var(--space-6);
  }

  .home-sites-grid,
  .home-process-track,
  .home-jury-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-date-card {
    flex-basis: calc((100% - var(--space-6)) / 2);
  }

  .home-jury-head {
    flex-direction: column;
  }
}

@media (max-width: 640px) {

  .home-hero-headline {
    font-size: clamp(1.85rem, 7vw, 2.5rem);
  }

  .home-hero-subhead {
    font-size: var(--text-base);
  }

  .home-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-2);
  }

  .home-hero-actions .ui-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .home-sites-grid,
  .home-process-track,
  .home-jury-grid {
    grid-template-columns: 1fr;
  }

  .home-date-card {
    flex-basis: 100%;
  }

  .home-hero-countdown {
    gap: var(--space-2);
  }

  .home-countdown-sep {
    height: 28px;
  }

  .home-countdown-value {
    font-size: 1.5rem;
  }

  .home-countdown-label {
    font-size: 11px;
  }

  .home-hero-partners-pill img {
    height: 22px;
  }

  .home-hero-partners-pill img.home-hero-partners-griha {
    height: 28px;
  }

  .home-prizes-images {
    flex-direction: column;
  }
}