@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima_nova_regular.woff2") format("woff2"), url("../fonts/proxima_nova_regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proxima_nova_bold.woff2") format("woff2"), url("../fonts/proxima_nova_bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sigvar Serial";
  src: url("../fonts/Sigvar-Serial-Light.woff2") format("woff2"), url("../fonts/Sigvar-Serial-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;   /* UAT 26 Oct: Light replaces Medium (headline only) */
}

:root {
  --font-sans: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sigvar Serial", Georgia, serif;
  --black: #000;
  --white: #fff;
  --text-muted-hover: #979797;   /* WTWC link hover on dark */
  --line: rgba(255, 255, 255, .3);
  --footer-line: #e5e9f0;
  --footer-text: #4c4c4c;
  --container: 1120px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Dev note #3: default hand cursor on text links (underline keeps them identifiable).
   If accessibility needs more, uncomment the WTWC colour change below. */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* .text-link:hover, .text-link:focus-visible { color: var(--text-muted-hover); } */

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

/* ---------- Play button (shared) — dev note #2: WTWC hover ---------- */
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .3s ease, border-color .3s ease;
  pointer-events: none;
}
.play-btn svg { width: 24px; height: 24px; margin-left: 2px; }
.play-btn path { fill: var(--white); transition: fill .3s ease; }

.video-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-trigger:hover .play-btn,
.video-trigger:focus-visible .play-btn { background: var(--white); border-color: var(--white); }
.video-trigger:hover .play-btn path,
.video-trigger:focus-visible .play-btn path { fill: #222; }

/* ---------- Hero ---------- */
.masthead {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* UAT 15 Oct: batik goes behind the video. The masthead is its own stacking layer and the
   florets sit at its back (raising the hero instead blanks the rounded mobile player in Chrome). */
.masthead { isolation: isolate; }
.masthead .floret { z-index: -1; }
.hero { order: -1; width: 100%; }
/* Hero film plays inline (Figma: "Teaser to Main Film … Loops"); cards use the modal.
   UAT 15 Oct: no poster image; the film autoplays muted on load and loops.
   UAT 26 Oct (Figma R3): on desktop the film and the 60px "Scroll to explore" strip fill the first
   screen. The film is cover-cropped top and bottom to fit, but never by more than 15% of its
   height (burned-in captions); past that, the strip drops just below the fold. On screens taller
   than the full film + 60px, the strip grows to fill the rest of the screen so the cue stays centred. */
.masthead {
  container-type: inline-size;
  --cue-h: 60px;
  --screen-h: 100vh;
  --film-h: 56.25vw;   /* the film's 16:9 height at full width */
  --hero-h: min(var(--film-h), max(calc(var(--screen-h) - var(--cue-h)), calc(var(--film-h) * .85)));
}
@supports (width: 1cqw) and (height: 1svh) {
  .masthead { --screen-h: 100svh; --film-h: 56.25cqw; }
}
.hero__player { position: relative; width: 100%; height: var(--hero-h); overflow: hidden; background: #000; cursor: pointer; }
.hero__player iframe, .hero__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero__player video { object-fit: cover; }
/* UAT 16 Oct: seamless hero with no YouTube UI. The iframe is taller than the frame, so YouTube
   letterboxes the film inside it and its title bar and logo land in the bars, which the frame crops.
   26 Oct: the film shows as soon as YouTube starts it (the earlier 3.5s hide that covered YouTube's
   start-up overlay left a black frame, so it was removed on request).
   Clicks never reach YouTube; our own pause and sound buttons drive the player. */
.hero__player iframe {
  top: calc((var(--hero-h) - var(--film-h)) / 2 - 100px); bottom: auto; height: calc(var(--film-h) + 200px); pointer-events: none;
}
/* UAT 27 Oct: a still from the film covers the frame while YouTube loads, and fades out as soon
   as the film starts playing (no delay, on request 28 Oct). */
.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: top; /* 28 Oct: crop from the bottom only so the SIA logo (top right) is never cut */
  pointer-events: none; transition: opacity .5s ease;
}
.hero__poster.is-hidden { opacity: 0; }
.hero__controls { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: flex; gap: 8px; }
.hero__btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer;
}
.hero__btn:hover { background: rgba(0, 0, 0, .75); }
.hero__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero__btn svg { width: 18px; height: 18px; fill: currentColor; }

/* UAT 26 Oct: "Scroll to explore" (Figma R3). A click scrolls to the next section. No blink (user, 26 Oct). */
.scroll-cue {
  order: -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: max(var(--cue-h), calc(var(--screen-h) - var(--hero-h))); padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 22px;   /* UAT 30 Oct: 12pt (= 16px), desktop only; mobile stays 12px */
}
.scroll-cue svg { width: 10px; height: 6px; }

.masthead__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px var(--gutter);
}
.logo { width: 110px; height: auto; }   /* UAT 26 Oct: logo size increased (Figma R3) */

.countdown { margin-top: 64px; text-align: center; }
.countdown__label {
  margin: 0;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.countdown__units { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }   /* Figma R3.1 (29 Oct): larger DAYS/HOURS gap, 24 > 40 */
.countdown__unit { display: flex; flex-direction: column; align-items: center; }
.countdown__digits { display: flex; gap: 8px; }
.countdown__unit-label {
  margin-top: 24px;
  font-size: 16px; line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Flip card: bordered tile, hinge notches, two stacked "pages" underneath */
.flip {
  --w: 80px; --h: 120px; --fs: 100px; --r: 4px; --stack: 4px;
  position: relative;
  width: var(--w); height: var(--h);
  border: 1px solid var(--white);
  border-radius: var(--r);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--fs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: calc(var(--stack) * 2);
}
.flip::before, .flip::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  height: calc(var(--r) * 2);
  border: 1px solid var(--white);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
}
.flip::before { bottom: calc(var(--stack) * -1 - 1px); }
.flip::after  { bottom: calc(var(--stack) * -2 - 1px); }
.flip__hinge {
  position: absolute; top: 50%;
  width: 1px; height: 12%;
  background: var(--white);
  transform: translateY(-50%);
}
.flip__hinge--l { left: -4px; }
.flip__hinge--r { right: -4px; }
.flip__num { display: block; }
.flip.is-flipping .flip__num { animation: flip-in .45s ease-out; }
@keyframes flip-in {
  0%   { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}

.floret {
  position: absolute;
  width: 355px; height: auto;
  opacity: .2;
  pointer-events: none;
  user-select: none;
}

/* ---------- Content ---------- */
/* UAT 26 Oct (Figma R3): masthead florets resized and docked at the screen edges, placed from the
   top of the logo/countdown block. The content floret is now mobile-only. */
[data-floret="mh-left"]  { left: -62px; top: 276px; width: 262px; }
[data-floret="mh-right"] { right: -162px; top: 0; width: 326px; }
[data-floret="content"]  { display: none; left: calc(50% + 475px); top: 490px; }

.content { position: relative; overflow: hidden; padding: 80px var(--gutter); }
.content .floret--content { opacity: .1; }
.container { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }

.headline {
  max-width: calc(799px + .12em);   /* + one letter-space: browsers add tracking after the last letter, Figma doesn't */
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 300;   /* UAT 26 Oct: Sigvar Serial Light with 12% tracking (Figma R3) */
  font-size: 48px;
  line-height: 58px;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.br-mobile { display: none; }
.subheading {
  margin: 24px 0 0;
  font-size: 24px;
  line-height: 31px;
  font-weight: 700;
  text-align: center;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.card__media {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  aspect-ratio: 536 / 302;
  transition: transform .3s ease;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* WTWC thumbnail hover: slight zoom of the whole thumbnail */
.card .video-trigger:hover .card__media,
.card .video-trigger:focus-visible .card__media { transform: scale(1.05); }
.card .video-trigger { border-radius: 8px; }
.card__title {
  margin: 24px 0 0;   /* UAT 15 Oct: 24px so the hover zoom doesn't crowd the title */
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card__body { margin: 8px 0 0; font-size: 16px; line-height: 24px; }
.card__body + .card__body { margin-top: 24px; }

/* Video section toggle (dev note #1) */
.no-video-section .js-video-section { display: none !important; }



/* ---------- Footer ---------- */
.footer { background: var(--white); color: var(--footer-text); border-top: 1px solid var(--footer-line); }
.footer__inner { max-width: 1080px; margin: 0 auto; }
.footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px 0;
}
.awards { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.awards img { width: auto; height: 50px; }   /* UAT 29 Oct: same order as singaporeair.com footer; all 50px tall */
.follow { text-align: left; }
.follow__label {
  display: block;
  margin-bottom: 24px;
  font-size: 11px; line-height: 1; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
/* UAT 15 Oct: same icons and circle style as the singaporeair.com footer */
.socials { display: flex; align-items: center; gap: 15px; margin: 0; padding: 0; list-style: none; }
.socials a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--footer-line);
  border-radius: 50%;
  background: var(--white);
  transition: border-color .2s ease;
}
.socials a:hover, .socials a:focus-visible { border-color: #666; }
.socials img { width: 12px; height: 12px; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 40px 0;
  border-top: 1px solid var(--footer-line);
}
.group { display: flex; align-items: center; gap: 20px; }
.group__label {
  white-space: nowrap;
  font-size: 11px; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
}
.group__logos { display: flex; align-items: center; gap: 20px; }
.group__logos a, .star-alliance-link { display: block; line-height: 0; }
.group__logos img { height: 30px; width: auto; }
.star-alliance { width: 141px; height: auto; }   /* PNG cropped to the logo itself (was padded on the left) */

/* ---------- Video modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 56px var(--gutter);
  background: rgba(0, 0, 0, .9);
}
.modal.is-open { display: flex; }
.modal__frame { position: relative; width: min(1120px, 100%, calc((100vh - 112px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.modal__frame iframe, .modal__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__close {
  position: absolute; top: -48px; right: 0;
  width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.modal__close svg { width: 24px; height: 24px; }
body.modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .footer__inner { padding: 0 var(--gutter); }
  .footer__top { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 767px) {
  /* Mobile masthead: logo → hero card → countdown */
  .hero { order: 0; padding: 48px var(--gutter) 0; }
  .hero__player { height: auto; aspect-ratio: 16 / 9; border-radius: 8px; }
  .hero__player iframe { top: -100px; height: calc(100% + 200px); }
  /* Figma R3 mobile: the cue sits under the countdown, 20px below the masthead */
  .scroll-cue { order: 1; height: auto; margin-top: 120px; padding-bottom: 20px; font-size: 12px; line-height: 17px; }
  .hero__controls { right: 10px; bottom: 10px; }
  .hero__btn { width: 32px; height: 32px; }
  .hero__btn svg { width: 15px; height: 15px; }
  .masthead { padding-top: 100px; padding-bottom: 0; }
  .masthead__inner { display: contents; }
  .logo { order: -1; width: 80px; }
  .countdown { margin-top: 49px; padding: 0 var(--gutter); }

  .countdown__units { gap: 24px; }   /* Figma R3.1 (29 Oct): 19 > 24 */
  .countdown__digits { gap: 5px; }
  .countdown__unit-label { margin-top: 29px; }
  .flip { --w: 47px; --h: 70px; --fs: 59px; --r: 2.4px; --stack: 2.4px; }

  .floret { width: 178px; }
  [data-floret="mh-left"]  { left: -38px; top: 612px; width: 126px; }
  [data-floret="mh-right"] { right: -76px; top: 30px; width: 156px; }
  [data-floret="content"]  { display: block; left: calc(50% + 111px); top: 559px; }


  .content { padding: 60px var(--gutter) 110px; }
  .headline { font-size: 40px; line-height: 48px; }
  .subheading { font-size: 20px; line-height: 26px; }
  .br-mobile { display: inline; }
  .cards { grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 335 / 188; }
  .card__title { font-size: 16px; }

  .footer__inner { padding: 0; }
  .footer__top { flex-direction: column; gap: 40px; padding: 40px 0; }
  .follow { order: -1; }
  .follow__label { display: none; }
  .socials { justify-content: center; }
  .awards { flex-direction: column; align-items: center; gap: 30px; }
  .footer__bottom { flex-direction: column-reverse; gap: 30px; padding: 30px 24px 40px; }
  /* Figma mobile: label + logos packed and centred, 17px apart */
  .group { justify-content: center; gap: 17px; }
  .group__logos { gap: 17px; }
  .group__logos img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}