/* ==========================================================================
   Yes x Football FAM Malaysia: landing page styles
   Every rule is scoped by a .fam-* class, so it cannot leak into the Yes site.
   No inline styles are needed (CSP: style-src 'self').
   Unit: 1 design px = var(--u). The Figma artboard is 2556 px wide.
   ========================================================================== */

@font-face { font-family: "Montserrat FAM"; src: url("../assets/fonts/montserrat-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat FAM"; src: url("../assets/fonts/montserrat-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat FAM"; src: url("../assets/fonts/montserrat-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat FAM"; src: url("../assets/fonts/montserrat-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

.fam-landing, .fam-header {
  --fam-dark: #1e1e1e;
  --fam-cream: #fffaf3;
  --fam-yellow: #fcee21;
  --fam-pink: #ff00a0;
  --fam-pink-soft: #ff73b6;
  --fam-yes: #ff0084;
  --fam-fx-bg: #1c1c1c;
  --fam-fx-card: #292929;
  /* Heading font: one variable. When Marketing confirms the Integral CF web licence, change this line. */
  --fam-font-display: "Montserrat FAM", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fam-font: "Montserrat FAM", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --u: calc(min(100vw, 2560px) / 2556);
  --fam-h2: max(15px, calc(63 * var(--u)));   /* one size for the section headings ("DARI PADANG, LAHIR CERITA" is the reference) */
}
.fam-landing {
  position: relative;
  display: block;
  overflow-x: clip;
  background: var(--fam-dark);
  color: #fff;
  font-family: var(--fam-font);
  font-weight: 600;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Resets use :where() so they have zero specificity and never beat the component rules below. */
:where(.fam-landing) *,
:where(.fam-landing) *::before,
:where(.fam-landing) *::after { box-sizing: border-box; }
:where(.fam-landing) :is(img, video, svg) { display: block; max-width: 100%; }
:where(.fam-landing) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.fam-landing) :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--fam-yellow); outline-offset: 3px; }

@media (max-width: 720px) {
  .fam-landing, .fam-header { --u: calc(100vw / 1100); }
  .fam-landing { --fam-h2: clamp(13px, 4.4vw, 26px); }
  .fam-tag--xl { font-size: clamp(14px, 5vw, 28px); }
  .fam-tag--ink { font-size: clamp(14px, 4.5vw, 28px); }
}

/* Visually hidden, still read by screen readers and search engines */
.fam-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fam-skip {
  position: absolute; left: 12px; top: -80px; z-index: 1000;
  padding: 10px 16px; border-radius: 8px;
  background: #fcee21; color: #1e1e1e;
  font: 700 14px/1.2 "Montserrat FAM", system-ui, sans-serif;
  text-decoration: none;
}
.fam-skip:focus { top: 12px; }

/* ---------- Shared: tag (parallelogram label) ---------- */
.fam-tag {
  --tag-bg: var(--fam-yellow);
  --tag-fg: var(--fam-dark);
  position: relative;
  display: inline-block;
  max-width: 92%;
  padding: .3em 1.25em;
  color: var(--tag-fg);
  font-family: var(--fam-font-display);
  font-weight: 900;
  font-size: var(--fam-h2);
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}
.fam-tag::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tag-bg);
  transform: skewX(-9deg);
  z-index: 0;
}
.fam-tag > span { position: relative; z-index: 1; display: inline-block; }
.fam-tag--cream { --tag-bg: var(--fam-cream); --tag-fg: #111; }
.fam-tag--ink { --tag-bg: #111; --tag-fg: var(--fam-cream); font-size: max(16px, calc(82 * var(--u))); padding: .3em 1.35em; }
.fam-tag--xl { font-size: max(20px, calc(80 * var(--u))); padding: .33em 1.6em; }

/* ---------- Page base (was css/demo-page.css) ---------- */
.fam-page { margin: 0; background: #1e1e1e; -webkit-text-size-adjust: 100%; }

/* ---------- Header: Apple-style glass bar ---------- */
/* Over the hero: clear. Scrolled: hides going down, comes back as glass going up (js: is-glass, is-hidden).
   The glass = translucent fill + backdrop blur and saturation + a thin light edge and inner highlight. */
.fam-header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;   /* edge to edge */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; height: max(60px, calc(150 * var(--u))); padding: 0 max(16px, calc(110 * var(--u)));
  border-bottom: 1px solid transparent;
  font-family: var(--fam-font, "Montserrat FAM", "Montserrat", system-ui, sans-serif);
  transition: translate .45s cubic-bezier(.2, .8, .2, 1), height .35s ease, background-color .35s ease, border-bottom-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.fam-header.is-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .1));
  background-color: rgba(30, 30, 30, .28);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 32px rgba(0, 0, 0, .3);
}
.fam-header.is-glass { height: max(48px, calc(100 * var(--u))); }   /* compact while scrolled; full size again at the top */
.fam-header.is-hidden { translate: 0 calc(-100% - 12px); }
.fam-header__logos { display: block; width: auto; height: 70%; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.fam-header__nav { display: flex; align-items: center; gap: 10px; }
.fam-header__home {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.1em; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: max(13px, calc(26 * var(--u))); line-height: 1; white-space: nowrap;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, color .2s ease, font-size .35s ease, padding .35s ease;
}
.fam-header__home svg { width: 1.35em; height: 1.35em; flex: none; }
.fam-header.is-glass .fam-header__home { padding: .5em 1em; font-size: max(12px, calc(23 * var(--u))); }
.fam-header__home:hover { background-color: rgba(255, 255, 255, .24); }
.fam-header__home:focus-visible { outline: 3px solid var(--fam-yellow); outline-offset: 3px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fam-header.is-glass { background-color: rgba(30, 30, 30, .86); }
}
/* lite mode: no live blur (it is costly on weak phones), a solid dark glass instead */
html.fam-lite .fam-header.is-glass, html.fam-lite .fam-header__home { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fam-lite .fam-header.is-glass { background: rgba(30, 30, 30, .9); }

/* ---------- Shared: media (cover image above a video) ---------- */
.fam-media {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}
.fam-media__video,
.fam-cover,
.fam-cover img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fam-media__video { background: #000; }
.fam-cover { display: block; transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.fam-cover img { display: block; }
.fam-cover.is-hidden { opacity: 0; transform: scale(1.05); visibility: hidden; pointer-events: none; transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1), visibility 0s 1s; }

/* ---------- 1. Hero ---------- */
.fam-hero {
  position: relative;
  overflow: hidden;
  background: #000;
  height: min(56.25vw, calc(100svh - var(--fam-header-h, 0px)));
  min-height: 240px;
}
@media (max-width: 720px) {
  .fam-hero { height: 56.25vw; min-height: 0; }
}

/* Hero scroll hint (a soft dark fade under it keeps it readable on bright frames): "SKROL UNTUK TEROKA" + a mouse that bounces, so visitors scroll on instead of only watching the video */
.fam-hero::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); pointer-events: none; }
.fam-scroll {
  position: absolute; z-index: 3; left: 50%; translate: -50% 0;
  bottom: max(12px, calc(34 * var(--u)));
  display: flex; flex-direction: column; align-items: center; gap: max(6px, calc(12 * var(--u)));
  color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 700;
  font-size: max(11px, calc(24 * var(--u))); letter-spacing: .24em; text-indent: .24em; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  animation: fam-scroll-bounce 1.8s ease-in-out infinite;
}
.fam-scroll__mouse {
  position: relative; display: block; box-sizing: border-box;
  width: max(18px, calc(40 * var(--u))); height: max(29px, calc(64 * var(--u)));
  border: max(1.5px, calc(3 * var(--u))) solid #fff; border-radius: 999px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.fam-scroll__wheel {
  position: absolute; left: 50%; top: 22%; translate: -50% 0;
  width: max(3px, calc(7 * var(--u))); height: max(6px, calc(13 * var(--u))); border-radius: 999px; background: #fff;
  animation: fam-scroll-wheel 1.8s ease-in-out infinite;
}
.fam-scroll:hover .fam-scroll__txt { color: var(--fam-yellow); }
.fam-scroll:focus-visible { outline: 3px solid var(--fam-yellow); outline-offset: 6px; border-radius: 4px; }
@keyframes fam-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(max(-9px, calc(-16 * var(--u)))); } }
@keyframes fam-scroll-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(max(7px, calc(15 * var(--u)))); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fam-scroll, .fam-scroll__wheel { animation: none; } }

/* ---------- 2. Storyline ---------- */
.fam-story {
  position: relative;
  overflow: hidden;
  background: var(--fam-dark);
}
.fam-story__stage {
  /* Photos and text keep the Marketing reference proportions (1362 x 902). Sizes follow --art-w; the photos stay anchored to the page edges and are cut off by them, as in the reference. */
  --art-w: min(100vw, calc((100svh - var(--fam-header-h, 0px)) * 1.51));
  --art-h: calc(var(--art-w) / 1.51);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--fam-header-h, 0px));
  overflow: hidden;
}
.fam-story__steps {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: calc(200 * var(--u));
  padding: calc(160 * var(--u)) 5vw;
  list-style: none;
  text-align: center;
}
.fam-story__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34 * var(--u));
  width: 100%;
}
.fam-story__line {
  max-width: 19.5em;
  color: var(--fam-cream);
  font-weight: 700;
  font-size: calc(var(--art-w) * .0213);
  line-height: 1.28;
  text-wrap: balance;
}
.fam-story__line p + p { margin-top: 1.3em; }
.fam-story__step .fam-tag { font-size: calc(var(--art-w) * .0246); }
.fam-story__meter { display: none; }

/* pinned mode (added by JS) */
.fam-story--pin .fam-story__stage { height: calc(100svh - var(--fam-header-h, 0px)); min-height: 0; }
.fam-story--pin .fam-story__steps { display: block; width: 100%; height: 100%; padding: 0; }
.fam-story--pin .fam-story__step { position: absolute; inset: 0; justify-content: center; padding: 0 5vw; }
.fam-story--pin .fam-story__step:not(:first-child) { opacity: 0; visibility: hidden; }   /* until the JS takes over, only slide 1 shows */
/* iPhone: CSS sticky instead of the JS pin (see js/fam.js 'story-early'). The section gets taller by the scroll distance. */
.fam-story--sticky { overflow: visible; overflow: clip; height: calc(100svh + var(--story-scroll, 300svh)); }
.fam-story--sticky .fam-story__stage { position: sticky; top: 0; }
.fam-story--pin .fam-story__meter {
  position: absolute; left: 50%; bottom: calc(46 * var(--u)); z-index: 3;
  display: flex; align-items: center; gap: 14px;
  transform: translateX(-50%);
  color: rgba(255, 250, 243, .7);
  font-size: max(11px, calc(26 * var(--u)));
  font-weight: 700; letter-spacing: .08em;
}
.fam-story__count b { color: var(--fam-yellow); font-weight: 800; }
.fam-story__bar { position: relative; width: max(80px, calc(260 * var(--u))); height: 3px; background: rgba(255, 255, 255, .18); border-radius: 3px; overflow: hidden; }
.fam-story__bar i { position: absolute; inset: 0; background: var(--fam-yellow); transform-origin: left center; transform: scaleX(0); }

/* photos: the exported PNGs already carry the white frame and the tilt */
.fam-story__art { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fam-photo {
  position: absolute; margin: 0; will-change: transform;
  width: calc(var(--w) * var(--art-w));
  top: calc(50% - var(--art-h) / 2 + var(--t) * var(--art-h));
}
.fam-photo picture { display: block; }
.fam-photo img { display: block; width: 100%; height: auto; }
/* --l / --r = distance from the left / right page edge, --t = top, --w = width (shares of the artboard; negative = cut off by the edge) */
.fam-photo--l1 { --w: .2878; --t: .0787; --l: -.0264; left: calc(var(--l) * var(--art-w)); z-index: 1; }
.fam-photo--l2 { --w: .2173; --t: .3271; --l: -.0007; left: calc(var(--l) * var(--art-w)); z-index: 2; }
.fam-photo--l3 { --w: .2996; --t: .653;  --l: -.0294; left: calc(var(--l) * var(--art-w)); z-index: 3; }
.fam-photo--r1 { --w: .2673; --t: .0765; --r: -.0492; right: calc(var(--r) * var(--art-w)); z-index: 1; }
.fam-photo--r2 { --w: .2702; --t: .48;   --r: .0132;  right: calc(var(--r) * var(--art-w)); z-index: 2; }
@media (max-width: 720px) {
  /* Phone: the left three sit across the top, the right two across the bottom, the text in between. */
  .fam-photo { width: auto; }
  .fam-story__line { max-width: 15em; font-size: 4.3vw; }
  .fam-story__step .fam-tag { font-size: 4.1vw; }
  .fam-photo--l1 { left: -4%; right: auto; top: -3.5%; width: 43%; }
  .fam-photo--l2 { left: 36%; right: auto; top: -2%;   width: 27%; }
  .fam-photo--l3 { left: 61%; right: auto; top: -3%;   width: 44%; }
  .fam-photo--r1 { left: -5%; right: auto; top: auto; bottom: -3.5%; width: 36%; }
  .fam-photo--r2 { left: 36%; right: auto; top: auto; bottom: -4.5%; width: 44%; }
  .fam-story--pin .fam-story__meter { bottom: auto; top: 21%; }   /* clear of the photos that now bleed off the top and bottom */
  .fam-story__steps { padding-block: 40vw; }
  /* a dark gap under the hero, so the top photos do not look stuck to the video (they bleed off this line instead) */
  .fam-story__art { top: 7vw; }
}
/* Phone, pinned (animated) story: layout from Marketing's phone reference (28 Oct). All five photos sit together in the
   lower part and bleed off the sides and the bottom; tag and text sit above. Positions use vw (screen width), so the
   group keeps the reference proportions on every phone height. Lite mode and "reduce motion" do not pin, so they keep
   the layout above. */
@media (max-width: 720px) {
  .fam-story--pin .fam-story__art { top: 0; }
  /* text centred between the counter (top) and the photo group (bottom: the group is about 67vw tall) */
  .fam-story--pin .fam-story__step { justify-content: center; gap: 4svh; padding-top: calc(9svh + 32px); padding-bottom: calc(67vw + 2svh); }
  .fam-story--pin .fam-story__meter { top: 9svh; }
  .fam-story--pin .fam-photo--l1 { left: -8%; top: auto; bottom: 32vw;  width: 38%; z-index: 2; }   /* schoolyard, left, bleeds left */
  .fam-story--pin .fam-photo--l2 { left: 28%; top: auto; bottom: 11vw;  width: 41%; z-index: 4; }   /* players, centre, in front */
  .fam-story--pin .fam-photo--r1 { left: 68%; top: auto; bottom: 28vw;  width: 34%; z-index: 1; }   /* boys at the goal, right */
  .fam-story--pin .fam-photo--l3 { left: -2%; top: auto; bottom: -1vw;  width: 38%; z-index: 3; }   /* training, bottom left */
  .fam-story--pin .fam-photo--r2 { left: 55%; top: auto; bottom: -16vw; width: 46%; z-index: 3; }   /* boots, bottom right */
}
/* very tall phones (screen twice as tall as wide or more, most new models): a bigger photo group, so there is less empty
   space between the text and the photos */
@media (max-width: 720px) and (max-aspect-ratio: 1/2) {
  .fam-story--pin .fam-story__step { padding-bottom: calc(86vw + 2svh); }
  .fam-story--pin .fam-photo--l1 { left: -12%; bottom: 41vw;  width: 49%; }
  .fam-story--pin .fam-photo--l2 { left: 22%;  bottom: 14vw;  width: 52%; }
  .fam-story--pin .fam-photo--r1 { left: 63%;  bottom: 36vw;  width: 44%; }
  .fam-story--pin .fam-photo--l3 { left: -4%;  bottom: -1vw;  width: 49%; }
  .fam-story--pin .fam-photo--r2 { left: 50%;  bottom: -20vw; width: 59%; }
}
/* FILL LAYOUT (28 Oct, on trial; revert = ?fill=off, or delete the class line in js/fam.js setupStory).
   Tall phones only: bigger text and tag that sit just above a 10 % bigger photo group, so the screen has less empty space. */
@media (max-width: 720px) and (max-aspect-ratio: 1/2) {
  .fam-story--pin.fam-story--fill .fam-story__step { padding-bottom: calc(96vw + 2svh); }
  .fam-story--pin.fam-story--fill .fam-story__line { font-size: 5.4vw; }
  .fam-story--pin.fam-story--fill .fam-story__step .fam-tag { font-size: 5vw; }
  .fam-story--pin.fam-story--fill .fam-photo--l1 { left: -14%; bottom: 45vw;  width: 54%; }
  .fam-story--pin.fam-story--fill .fam-photo--l2 { left: 19%;  bottom: 15vw;  width: 57%; }
  .fam-story--pin.fam-story--fill .fam-photo--r1 { left: 61%;  bottom: 40vw;  width: 48%; }
  .fam-story--pin.fam-story--fill .fam-photo--l3 { left: -5%;  bottom: -1vw;  width: 54%; }
  .fam-story--pin.fam-story--fill .fam-photo--r2 { left: 48%;  bottom: -22vw; width: 65%; }
}
/* short phones: the text a little higher, so the longest story text stays clear of the photos */
@media (max-width: 720px) and (max-height: 650px) {
  .fam-story--pin .fam-story__step { gap: 3svh; padding-top: calc(9svh + 24px); }
}

/* PHASE 2: FILM (parked, see _phase2/README.md). Remove this comment mark to bring it back.
.fam-film { background: var(--fam-dark); }
.fam-film__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2584 / 1450;
  background: #000;
}
.fam-film__stage .fam-media__video { opacity: 0; transition: opacity .6s ease; }
.fam-film__stage.is-started .fam-media__video { opacity: 1; }
.fam-film__controls {
  position: absolute;
  left: calc(56 * var(--u)); bottom: calc(56 * var(--u)); z-index: 3;
  display: flex; align-items: center; gap: calc(22 * var(--u));
}
.fam-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-width: max(46px, calc(96 * var(--u))); height: max(46px, calc(96 * var(--u)));
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: rgba(30, 30, 30, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  font: 800 max(12px, calc(34 * var(--u)))/1 var(--fam-font);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, padding .3s ease;
}
.fam-ctl:hover { transform: scale(1.07); background: var(--fam-yellow); border-color: var(--fam-yellow); color: var(--fam-dark); }
.fam-ctl:active { transform: scale(.96); }
.fam-ctl__icon { width: max(20px, calc(44 * var(--u))); height: max(20px, calc(44 * var(--u))); flex: none; }
.fam-landing .fam-ctl__icon--pause { display: none; }
.fam-ctl__label { white-space: nowrap; }
.fam-ctl--play { padding-inline: calc(34 * var(--u)) calc(44 * var(--u)); background: var(--fam-yellow); border-color: var(--fam-yellow); color: var(--fam-dark); }
.fam-film__stage.is-started .fam-ctl--play { padding: 0; background: rgba(30, 30, 30, .62); border-color: rgba(255, 255, 255, .9); color: #fff; }
.fam-film__stage.is-started .fam-ctl--play:hover { background: var(--fam-yellow); border-color: var(--fam-yellow); color: var(--fam-dark); }
.fam-film__stage.is-started .fam-ctl__label { display: none; }
.fam-landing .fam-film__stage.is-playing .fam-ctl__icon--play { display: none; }
.fam-landing .fam-film__stage.is-playing .fam-ctl__icon--pause { display: block; }
.fam-film__toast {
  position: absolute; left: 50%; bottom: calc(60 * var(--u)); z-index: 4;
  max-width: 90%; padding: .7em 1.2em;
  border-radius: 999px; background: rgba(30, 30, 30, .88); color: #fff;
  font-size: max(12px, calc(32 * var(--u))); font-weight: 700; text-align: center;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.fam-film__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  .fam-film__controls { left: 3.5vw; bottom: 3.5vw; gap: 2.4vw; }
  .fam-ctl { min-width: 40px; height: 40px; }
  .fam-ctl__icon { width: 18px; height: 18px; }
  .fam-ctl--play { padding-inline: 14px 18px; font-size: 12px; }
}
END PHASE 2: FILM */

/* ---------- 3. Marquee band (V2: the film section was removed) ---------- */
.fam-ticker { background: var(--fam-dark); }

/* marquee: news-bulletin ticker, right to left */
.fam-marquee {
  position: relative;
  z-index: 2;
  display: flex; align-items: center;
  height: calc(var(--fam-h2) * 1.72);   /* same height as the white heading rectangle: line 1.12 + padding .3em x 2 */
  overflow: hidden;
  background: var(--fam-yellow);
  color: var(--fam-dark);
}
.fam-marquee__track { display: flex; flex: none; width: max-content; will-change: transform; }
.fam-marquee__group { display: flex; flex: none; align-items: center; list-style: none; }
.fam-marquee__group li {
  display: flex; align-items: center; flex: none;
  font-family: var(--fam-font-display);
  font-weight: 800;
  font-size: max(14px, calc(48 * var(--u)));
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fam-marquee__group li::after {
  content: "";
  flex: none;
  width: max(22px, calc(54 * var(--u))); height: max(22px, calc(54 * var(--u)));
  margin-inline: max(18px, calc(60 * var(--u)));
  background: url("../assets/img/ball.svg") center / contain no-repeat;
}

/* ---------- 4. Statement ---------- */
.fam-statement {
  display: flex; justify-content: center;
  padding: calc(66 * var(--u)) 0;
  overflow: hidden;
  background: var(--fam-dark);
}
.fam-statement .fam-tag { margin: 0; }
.fam-statement .fam-word { display: inline-block; white-space: nowrap; }
.fam-statement .fam-word > span { display: inline-block; }

/* ---------- 5. Reel ---------- */
.fam-reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;            /* the 9 Grid video is 16:9: show the whole frame, no crop */
  background: #000;
}
.fam-reel .fam-media { inset: 0; }   /* no parallax overshoot on the reel, so nothing is cut at the bottom */

/* ---------- 6. Fixtures ---------- */
.fam-fx {
  --fx-gap: clamp(10px, .9vw, 20px);
  padding: clamp(26px, 3.4vw, 80px) clamp(16px, 4.3vw, 110px) clamp(16px, 1.6vw, 36px);
  background: var(--fam-fx-bg);
}
.fam-fx__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.1fr);
  gap: clamp(18px, 2.4vw, 56px);
  align-items: start;
}
.fam-fx__none { padding: 1.2em; color: #b9b9b9; font-weight: 600; font-size: clamp(12px, .85vw, 16px); }
.fam-fx__card { position: relative; }
.fam-fx__live {
  display: inline-flex; align-items: center; gap: .45em; margin-bottom: .8em;
  padding: .28em .7em; border-radius: 999px; background: #ff0084; color: #fff;
  font-size: clamp(9px, .62vw, 12px); font-weight: 800; letter-spacing: .06em;
}
.fam-fx__live::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: fam-live 1.2s ease-in-out infinite; }
@keyframes fam-live { 50% { opacity: .25; } }
.fam-fx__card.is-live { box-shadow: 0 0 0 2px #ff0084; }
.fam-fx__recent { padding-right: clamp(16px, 2vw, 44px); border-right: 1px solid rgba(255, 255, 255, .12); }
.fam-fx__label {
  margin: 0 0 clamp(10px, .9vw, 20px);
  color: #cfcfcf;
  font-size: clamp(10px, .72vw, 15px);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fam-fx__list,
.fam-fx__track { list-style: none; }
.fam-fx__track {
  display: flex; gap: var(--fx-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fam-fx__track::-webkit-scrollbar { display: none; }
.fam-fx__slide { display: flex; flex: 0 0 calc((100% - 2 * var(--fx-gap)) / 3); scroll-snap-align: start; min-width: 0; }
.fam-fx__item { display: flex; }
.fam-fx__card {
  display: block; flex: 1 1 auto; min-width: 0;
  padding: clamp(14px, 1.3vw, 30px);
  border-radius: clamp(8px, .7vw, 16px);
  background: var(--fam-fx-card);
  color: #fff; text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s ease;
}
.fam-fx__card:hover { transform: translateY(-4px); background: #333; }
.fam-fx__item.is-updated .fam-fx__card { animation: fam-fx-pulse 1.5s ease 3; }
@keyframes fam-fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 132, 0); } 40% { box-shadow: 0 0 0 6px rgba(255, 0, 132, .55); } }
.fam-fx__date { display: block; font-size: clamp(11px, .8vw, 17px); font-weight: 800; }
.fam-fx__meta { display: block; margin-top: 1em; color: #b9b9b9; font-size: clamp(10px, .62vw, 13px); font-weight: 600; line-height: 1.35; }
.fam-fx__comp { display: block; margin: .35em 0 1.2em; color: #b9b9b9; font-size: clamp(9px, .62vw, 13px); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.fam-fx__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75em;
  margin-top: .6em;
  font-size: clamp(11px, .8vw, 17px); font-weight: 700; text-transform: uppercase;
}
.fam-fx__flag { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; background: #444; }
.fam-fx__team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-fx__score { display: grid; place-items: center; min-width: 1.9em; height: 1.9em; padding-inline: .35em; border-radius: .35em; background: #3a3a3a; font-size: .92em; font-variant-numeric: tabular-nums; }
.fam-fx__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: clamp(10px, .9vw, 18px); }
.fam-fx__btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.fam-fx__btn svg { width: 16px; height: 16px; }
.fam-fx__btn:hover { background: var(--fam-yellow); border-color: var(--fam-yellow); color: var(--fam-dark); }
.fam-fx__btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.fam-fx__source { margin-top: clamp(8px, .8vw, 16px); color: #8f8f8f; font-size: clamp(10px, .65vw, 12px); font-weight: 600; }
.fam-fx__source a { color: #bdbdbd; }
@media (max-width: 720px) {
  .fam-fx__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fam-fx__recent { padding: 0 0 22px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .fam-fx__slide { flex-basis: 78%; }
  .fam-fx__label { font-size: 11px; }
  .fam-fx__date, .fam-fx__row { font-size: 13px; }
  .fam-fx__comp { font-size: 10px; }
  .fam-fx__nav { display: none; }
}

/* ---------- 7. Product ---------- */
/* Container query units (cqw) keep the section true to the Figma frame (2007 x 1357): 1cqw = 20.07 design px. */
.fam-product { container-type: inline-size; position: relative; z-index: 1; background: #ff0084; }
.fam-product__stage {
  position: relative; overflow: hidden;
  /* One scale for the whole desktop composition (guy, tag line, price box, small line, CTA). 1 = Figma size. Change --s to make the section taller or shorter. */
  --s: .85;
  height: calc((3.2 + 50.71 * var(--s) + 3.5) * 1cqw);   /* top space + composition + bottom space */
  background-color: #ff0084;
  background-image: radial-gradient(circle at center, #ff5ed4 0.1cqw, rgba(255, 94, 212, 0) 0.16cqw);
  background-size: 1.614cqw 1.614cqw;
  color: #fff;
}
.fam-product picture { display: block; }
.fam-product img { display: block; width: 100%; height: auto; }
.fam-product__guy { position: absolute; left: calc(49% - 44.04% * var(--s));   /* 49%: the guy's image has more empty space on its left, so this looks centred */ top: 3.2cqw; width: calc(44.2% * var(--s)); aspect-ratio: 884 / 887; }
.fam-pg { position: absolute; }
.fam-pg--main { left: 16.8%; top: 8.48%; width: 82.3%; }
.fam-pg--horn { left: 14.43%; top: 77.38%; width: 20.97%; }
.fam-pg--hand { left: 66.85%; top: 1.58%; width: 13.08%; }
.fam-pg--gol { left: 70.24%; top: 63.69%; width: 29.76%; }
/* Right column (tag line, price box, small line) has the same height as the guy: top at his head, bottom at his chin. The whole composition is centred. */
.fam-product__headline { position: absolute; left: calc(50% + 1.603% * var(--s)); top: 3.2cqw; width: calc(42.44% * var(--s)); margin: 0; }
/* z-index keeps the line above the dot background and any layer behind it. Size and place follow the OCT27 price blurb. */
.fam-product__sub { position: absolute; z-index: 2; left: calc(50% + 12.953% * var(--s)); top: calc(3.2cqw + 42.1cqw * var(--s)); width: calc(19.8% * var(--s)); }
.fam-price {
  --k: calc(.93 * var(--s));
  position: absolute; left: calc(50% + 12.703% * var(--s)); top: calc(3.2cqw + 30.76cqw * var(--s)); width: calc(21.75% * var(--k));
  overflow: hidden; border-radius: calc(.8cqw * var(--k)); background: #fff;
  box-shadow: 0 calc(.9cqw * var(--k)) calc(2.4cqw * var(--k)) rgba(120, 0, 70, .4);   /* soft, blurred */
  text-align: center;
}
.fam-price__head { margin: 0; padding: calc(.7cqw * var(--k)) 0; background: #000; color: #fff; font-weight: 600; font-size: calc(1.2cqw * var(--k)); line-height: 1.2; }
.fam-price__body { margin: 0; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: calc(.5cqw * var(--k)); padding: calc(1.2cqw * var(--k)) calc(1cqw * var(--k)) calc(1.3cqw * var(--k)); color: #e8338a; font-weight: 800; }
.fam-price__lead { display: grid; justify-items: start; line-height: .95; }
.fam-price__hanya { color: #111; font-size: calc(1.75cqw * var(--k)); font-weight: 700; }
.fam-price__rm { font-size: calc(2.75cqw * var(--k)); font-weight: 800; }
.fam-price__amt { font-size: calc(6.1cqw * var(--k)); font-weight: 800; line-height: .8; letter-spacing: -.03em; }
.fam-price__side { display: grid; justify-items: start; gap: calc(.9cqw * var(--k)); align-self: stretch; align-content: space-between; padding-block: calc(.3cqw * var(--k)); }
.fam-price__old { color: #111; font-size: calc(1.7cqw * var(--k)); font-weight: 700; text-decoration-thickness: .12em; }
.fam-price__per { font-size: calc(1.7cqw * var(--k)); font-weight: 700; }
.fam-product__cta {
  position: absolute; left: calc(50% - 15.57% * var(--s)); top: calc(3.2cqw + 47.12cqw * var(--s)); width: calc(31.14% * var(--s)); aspect-ratio: 625 / 72;
  display: grid; place-items: center;
  background: #1c1b1c; color: var(--fam-cream); text-decoration: none; text-transform: uppercase;
  font-weight: 900; font-size: calc(2.1cqw * var(--s)); letter-spacing: .01em;
  clip-path: polygon(2.9% 0, 100% 0, 97.1% 100%, 0 100%);
  transition: background-color .25s ease, color .25s ease, translate .25s ease;
}
.fam-product__cta:hover { background: var(--fam-yellow); color: #111; translate: 0 -.3cqw; }
.fam-product__cta:focus-visible { outline: 3px solid var(--fam-yellow); outline-offset: 4px; clip-path: none; }
@media (max-width: 720px) {
  /* Phone: no fixed canvas. Parts stack in one column, sized so guy + tag line + price + CTA fit one screen (about 660 px tall). */
  .fam-product__stage { height: auto; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 3cqw; padding: 7cqw 5cqw 9cqw; background-size: 6cqw 6cqw; background-image: radial-gradient(circle at center, #ff5ed4 .28cqw, rgba(255, 94, 212, 0) .42cqw); }
  .fam-product__headline, .fam-product__sub, .fam-price, .fam-product__cta { position: static; }
  .fam-product__sub { z-index: 2; }
  .fam-product__guy { position: relative; left: -4.5%; top: auto; width: 62%; }   /* the layers fill only the right 86% of this box (horn 14% to GOL 100%), so pull it left to centre what you see */
  .fam-product__headline { width: 84%; margin-top: -6cqw; }
  .fam-price { --k: 2.2; width: 56%; }
  .fam-product__sub { width: 52%; }
  .fam-product__cta { width: 76%; font-size: 4cqw; margin-top: 1cqw; }
}
/* Short phones (iPhone SE and similar, about 550 px of visible height): one size smaller again */
@media (max-width: 720px) and (max-height: 600px) {
  .fam-product__stage { gap: 2.5cqw; padding: 5cqw 5cqw 7cqw; }
  .fam-product__guy { left: -3.7%; width: 52%; }
  .fam-product__headline { width: 74%; }
  .fam-price { --k: 2; width: 50%; }
  .fam-product__sub { width: 46%; }
  .fam-product__cta { width: 68%; font-size: 3.7cqw; }
}

/* ---------- 8. News ---------- */
.fam-news {
  --news-gap: calc(71 * var(--u));
  --news-pad: calc(108 * var(--u));
  --news-v: 4.5;   /* cards in view, always k + 0.5 so a part of the next card shows and invites a scroll */
  --news-k: 4;     /* whole cards in view */
  position: relative; z-index: 1;
  padding: calc(130 * var(--u)) 0 calc(110 * var(--u));
  background: var(--fam-dark);
  color: var(--fam-cream);
}
.fam-news__head { display: flex; flex-direction: column; align-items: center; gap: calc(44 * var(--u)); margin-bottom: calc(110 * var(--u)); padding: 0 5vw; }
.fam-news__sub { color: var(--fam-cream); font-size: max(13px, calc(38 * var(--u))); font-weight: 600; text-align: center; }
.fam-news__track {
  display: flex; gap: var(--news-gap);
  padding: calc(26 * var(--u) + 8px) var(--news-pad) calc(80 * var(--u));
  margin-block: calc(-26 * var(--u) - 8px) calc(-50 * var(--u));   /* room for the hover lift and shadow; the layout does not move */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--news-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fam-news__track::-webkit-scrollbar { display: none; }
.fam-news__item { flex: 0 0 calc((100% + var(--news-pad) - var(--news-k) * var(--news-gap)) / var(--news-v)); scroll-snap-align: start; min-width: 0; }
@media (max-width: 1180px) { .fam-news { --news-v: 3.5; --news-k: 3; } }
@media (max-width: 900px)  { .fam-news { --news-v: 2.5; --news-k: 2; } }
.fam-card { display: block; color: inherit; text-decoration: none; }
.fam-card__thumb {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 7.3%;
  background: #ff0084;   /* brand pink: the thumbnail PNG is transparent */
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.fam-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fam-card__thumb video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.fam-card:hover .fam-card__thumb { transform: translateY(-8px); box-shadow: 0 1.2vw 2.4vw rgba(255, 0, 160, .28); }
.fam-card__ig {
  position: absolute; right: 5%; bottom: 5%;
  display: grid; place-items: center; width: 12%; min-width: 30px; aspect-ratio: 1;
  border-radius: 50%; background: #fff; color: var(--fam-pink);
  opacity: 0; transform: scale(.6);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.fam-card__ig svg { width: 56%; height: 56%; }
.fam-card:hover .fam-card__ig,
.fam-card:focus-visible .fam-card__ig { opacity: 1; transform: scale(1); }
.fam-card__title {
  margin-top: calc(46 * var(--u));
  color: #fff;
  font-size: max(13px, calc(40 * var(--u)));
  font-weight: 700;
}
.fam-card--soon .fam-card__title { color: #a3a3a3; }   /* "coming soon" captions in grey, the live card heading in white */
.fam-card__text { margin-top: calc(18 * var(--u)); color: var(--fam-cream); font-size: max(12px, calc(29 * var(--u))); font-weight: 600; line-height: 1.34; }
.fam-card:focus-visible { outline-offset: 8px; }
@media (max-width: 720px) {
  .fam-news { --news-gap: 4vw; --news-pad: 5vw; --news-v: 1.5; --news-k: 1; padding: 14vw 0 10vw; }
  .fam-card__title { margin-top: 14px; font-size: 14px; }
  .fam-card__text { margin-top: 6px; font-size: 12px; }
  .fam-news__sub { font-size: 13px; }
}

/* ---------- 10. Site footer (Yes, from the PDC package; BM). Colours: new light Yes footer design (28 Oct). ---------- */
.fam-footer { background: #e7e9ed; color: #26282a; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.fam-footer *, .fam-footer *::before, .fam-footer *::after { box-sizing: border-box; }
.fam-footer :where(ul) { margin: 0; padding: 0; list-style: none; }
.fam-footer :where(p) { margin: 0; }
.fam-footer a { color: inherit; text-decoration: none; }
.fam-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fam-footer a:focus-visible, .fam-footer summary:focus-visible { outline: 3px solid #ff0084; outline-offset: 3px; border-radius: 3px; }
.fam-footer__inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.fam-footer > .fam-footer__inner { padding-top: 56px; }
.fam-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
.fam-footer__logo { display: block; width: 72px; height: auto; margin-bottom: 24px; }
.fam-footer__icons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fam-footer__icons img, .fam-footer__icons svg { display: block; width: 24px; height: 24px; }
.fam-footer__icons img { filter: brightness(0); opacity: .85; }   /* the PDC icons are white: shown dark on the light footer */
.fam-footer__icons--app svg { width: 28px; height: 28px; }
.fam-footer__app { margin: 22px 0 14px; font-weight: 700; font-size: 17px; }
.fam-footer__col summary {
  display: block; margin: 0 0 18px; cursor: default; list-style: none;
  font-family: var(--fam-font, "Montserrat FAM", "Montserrat", system-ui, sans-serif); font-weight: 800; font-size: 17px;
}
.fam-footer__col summary::-webkit-details-marker { display: none; }
.fam-footer__col li + li { margin-top: 16px; }
.fam-footer__col a { font-size: 15px; }
.fam-footer__cfm { margin-top: 40px; font-size: 15px; font-weight: 600; }
.fam-footer__cfm a { color: #3a46cf; }
.fam-footer__bar { margin-top: 36px; padding: 18px 0; background: #ff0084; color: #fff; }
.fam-footer__bar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.fam-footer__bar p { font-size: 14px; }
.fam-footer__bar img { display: block; width: auto; height: 44px; max-width: 100%; }
@media (max-width: 1000px) {
  .fam-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .fam-footer__brand { grid-column: 1 / -1; }
}
/* phone: link groups fold like yes.my (tap the title to open) */
@media (max-width: 781px) {
  .fam-footer > .fam-footer__inner { padding-top: 40px; }
  .fam-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .fam-footer__brand { margin-bottom: 18px; }
  .fam-footer__col summary {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 12px 0; border-bottom: .5px solid rgba(38, 40, 42, .25); cursor: pointer; font-size: 15px;
  }
  .fam-footer__col summary::after { content: ""; width: 12px; height: 12px; background: url("../assets/img/footer/expand.svg") center / contain no-repeat; filter: brightness(0); transition: transform .2s ease; }
  .fam-footer__col[open] summary::after { transform: rotate(45deg); }
  .fam-footer__col ul { padding: 10px 10px 6px; }
  .fam-footer__col li + li { margin-top: 10px; }
  .fam-footer__col a { font-size: 14px; }
  .fam-footer__cfm { margin-top: 24px; font-size: 13px; }
  .fam-footer__bar-row { flex-direction: column; align-items: center; text-align: center; padding-inline: 16px; }
  .fam-footer__bar p { font-size: min(12px, 2.95vw); white-space: nowrap; }   /* one line, like the PDC footer */
  .fam-footer__bar img { height: 34px; }
}

/* ---------- Lite mode (weak phone, slow network, "save data"): see js/fam.js. Fewer effects, same content. ---------- */
html.fam-lite .fam-scroll, html.fam-lite .fam-scroll__wheel { animation: none; }
html.fam-lite .fam-media { will-change: auto; }
html.fam-lite .fam-price { box-shadow: none; }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .fam-landing *, .fam-landing *::before, .fam-landing *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 9. Closing statement (V2) ---------- */
.fam-close { background: var(--fam-dark); color: #fff; text-align: center; padding: calc(130 * var(--u)) 5vw calc(210 * var(--u)); }
.fam-close__logos { display: block; width: max(150px, calc(520 * var(--u))); height: auto; margin: 0 auto calc(110 * var(--u)); }
.fam-close__title { margin: 0; font-weight: 900; text-transform: uppercase; font-size: max(30px, calc(81 * var(--u))); line-height: .96; }
.fam-close__title span { display: block; }
.fam-close__line { margin: calc(40 * var(--u)) 0 0; font-weight: 700; font-size: max(16px, calc(46 * var(--u))); }
.fam-close__line br{
  display: none;
}
@media (max-width: 720px) {
  .fam-close { padding: 14vw 6vw 22vw; }
  .fam-close__logos { width: 52vw; margin-bottom: 9vw; }
  .fam-close__title { font-size: 9.6vw; }
  .fam-close__line { margin-top: 5vw; font-size: 4.6vw; }

  .fam-close__line br{
  display: block;
}
}