/* INQUIRER.net 29th Anniversary */

/* Tokens */
:root {
  --color-primary: #0b72b5;
  --color-primary-light: #31adea;
  --color-primary-lighter: #48c8fa;
  --color-ink: #2f353a;
  --color-ink-muted: rgba(47, 53, 58, 0.64);
  --color-line: #cdcdcd;
  --color-white: #fff;
  --color-navy: #021724;

  --gradient-blue: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  --gradient-blue-reverse: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
  --gradient-year: linear-gradient(95.33deg, var(--color-primary) 0%, var(--color-primary-lighter) 101.6%);
  --gradient-year-md: linear-gradient(91.89deg, var(--color-primary) 0%, var(--color-primary-lighter) 101.6%);
  --gradient-band-overlay: linear-gradient(90deg, rgba(11, 114, 181, 0.8) 0%, rgba(2, 23, 36, 0) 100%);

  /* Dotted-line brand pattern (same as the Weather Updates page) */
  --dots: radial-gradient(rgba(0, 0, 0, 0.16) 0.75px, transparent 0);
  --dots-size: 3px 3px;
  --dots-position: -4px -4px;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif", Georgia, serif;

  --container: 1170px;
  --gutter: 16px;
  --nav-height: 80px;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* No CSS smooth scrolling: it breaks ScrollTrigger measurements on refresh.
     Anchor links scroll smoothly via main.js instead. */
  scroll-padding-top: var(--nav-height);
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) so the sticky nav keeps working; hidden is the
     fallback for older browsers */
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared: timeline pieces */
.timeline-line {
  display: block;
  width: 1px;
  margin-inline: auto;
  background: var(--color-line);
  transform-origin: top center;
}

.timeline-dot {
  display: block;
  width: 25px;
  height: 25px;
  margin-inline: auto;
  border: 6px solid var(--color-primary);
  border-radius: 50%;
  background: transparent;
}

/* Shared: milestone */
.milestone {
  text-align: center;
}

.milestone__year {
  font-weight: 700;
  line-height: normal;
  background: var(--gradient-year);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.milestone__year--xl {
  font-size: 120px;
  letter-spacing: -6px;
}

.milestone__text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-ink);
}

/* Shared: dotted divider (fades out at both edges) */
.dotted-divider {
  height: 46px;
  background-image: var(--dots);
  background-size: var(--dots-size);
  background-position: var(--dots-position);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* Outlined gradient text (see "Outlined text" in main.js).
   Geist is a variable font with overlapping contours, so a plain
   -webkit-text-stroke draws extra lines inside letters. Instead, the stroke
   sits behind and the gradient fill covers its inner half. */
.is-outlined {
  position: relative;
  background: none !important;
}

.outlined__stroke {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #31ADEA;
}

.footer__headline .outlined__stroke {
    -webkit-text-stroke: 2px #fff;
}

/* Extra paint area so glyphs taller than the line box (e.g. "@") are not
   clipped; the negative margin keeps the layout unchanged. */
.outlined__stroke,
.outlined__fill {
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.outlined__fill {
  position: relative;
  display: block;
  background: var(--outline-fill, var(--gradient-year-md));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Entrance animations (see main.js). Uses the individual `translate` and
   `scale` properties so they don't conflict with GSAP transforms. */
.js-anim [data-animate="fade-right"],
.js-anim [data-animate="fade-left"],
.js-anim [data-animate="fade-up"] {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anim [data-animate="fade-right"] { translate: -60px 0; }
.js-anim [data-animate="fade-left"]  { translate: 60px 0; }
.js-anim [data-animate="fade-up"]    { translate: 0 60px; }

.js-anim [data-animate="pop"] {
  scale: 0;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-anim [data-animate].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-white);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo-img {
  width: 147px;
  height: 24px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Gray by default. The dot appears on hover and is absolutely positioned
   so the label does not shift. */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-muted);
  transition: color 0.2s ease;
}

.nav__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav__link:hover::before,
.nav__link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-primary);
}

/* Hero */
.hero {
  position: relative;
  height: 680px;
  color: var(--color-white);
}

.hero__media {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 600px;
  overflow: hidden;
  background: var(--gradient-blue);
}

.hero__bg {
  position: absolute;
  inset: -10% 0 auto;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 23, 36, 0.56), var(--color-navy));
}

/* Blue accent bars around the hero image */
.hero__bar {
  position: absolute;
  z-index: 2;
}

.hero__bar--top-right {
  top: 0;
  left: 15.08%;
  right: 0;
  height: 20px;
  border-top-left-radius: 60px;
  background: var(--gradient-blue-reverse);
}

.hero__bar--top-left {
  top: 20px;
  left: 0;
  width: 15.08%;
  height: 20px;
  border-bottom-right-radius: 60px;
  background: var(--gradient-blue-reverse);
}

.hero__bar--bottom-right {
  top: 560px;
  left: 25%;
  right: 0;
  height: 60px;
  border-top-left-radius: 60px;
  background: var(--gradient-blue);
}

.hero__bar--bottom-left {
  top: 620px;
  left: 0;
  width: 25%;
  height: 60px;
  border-bottom-right-radius: 60px;
  background: var(--gradient-blue-reverse);
}

.hero__divider {
  position: absolute;
  top: 620px;
  left: 0;
  right: 0;
}

/* Vertical "1997 — 2026" marker on the left edge */
.hero__years {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 10px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 30px;
}

.hero__years-label {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

.hero__years-line {
  flex: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 129px;
  text-align: center;
}

.hero__logo {
  width: 105px;
  height: 120px;
  object-fit: cover;
}

.hero__eyebrow {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.hero__title {
  margin-top: 16px;
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 69px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 16px rgba(47, 53, 58, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.integrate__center .hero__cta {
  margin-top: 24px;
}

.hero__cta:hover {
  background: rgba(255, 255, 255, 0.16);
}

.hero__cta-icon {
  width: 9px;
  height: 8px;
  transform: rotate(90deg);
}

/* Intro + 1997 */
.intro {
  padding-inline: var(--gutter);
}

.intro__line--top {
  height: 88px;
}

.intro__text {
  max-width: 760px;
  margin: 22px auto 38px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-align: center;
}

.intro__line--middle {
  height: 60px;
}

.intro__milestone {
  max-width: 500px;
  margin-inline: auto;
}

/* 2007 + 2009–2018 */
.launch {
  position: relative;
  display: flow-root;     /* Prevents the band's top margin from collapsing */
  padding-bottom: 112px;
}

/* Timeline pieces are pinned to the design offsets */
.launch__line,
.launch__dot {
  position: absolute;
  z-index: 2;
  left: 50%;
}

.launch__dot {
  margin-left: -12.5px;
}

.launch__line--top    { top: 25px;  height: 160px; }
.launch__dot--band    { top: 185px; }
.launch__line--middle { top: 443px; height: 320px; }
.launch__dot--growth  { top: 763px; }
.launch__line--bottom { top: 788px; height: 320px; }

.launch__band {
  position: relative;
  z-index: 1;             /* The photo overlaps the dotted divider */
  height: 280px;
  margin: 135px 50px 0;
  border-radius: 4px;
}

/* Band layers (bottom to top): blue base, soft-light texture,
   blue-to-transparent gradient */
.launch__band-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--color-primary);
}

.launch__band-texture {
  position: absolute;
  inset: 0;
  /* Oversized so the background can shift on scroll */
  background: url("../assets/images/2007-band-texture-up.png") 0% 0% / 110% auto no-repeat;
  mix-blend-mode: soft-light;
}

.launch__band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-band-overlay);
}

.launch__band .timeline-row {
  margin-inline: -50px;   /* Align columns to the page center, not the band */
}

.launch__milestone {
  width: 192px;
  margin-top: 76px;
  text-align: left;
}

.timeline-row .launch__photo {
  margin-top: 95px;
}

.launch__divider {
  margin-top: 2px;
}

.launch__growth {
  margin-top: 208px;
}

.launch__quotes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 341px;
}

.launch__milestone--growth {
  width: 380px;
  padding-right: 20px;    /* Text box is 314px wide */
  margin-top: 52px;
  text-align: left;
}

/* 2019 — CDN + Bandera */
.acquire {
  position: relative;
}

.acquire__band {
  position: relative;
  height: 500px;
  margin-inline: 50px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(90deg, #004c87 15%, #d10019 100%);
}

.acquire__dot {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 50%;
  margin-left: -12.5px;
}

.acquire__brand {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.acquire__laptop,
.acquire__phone,
.acquire__logo {
  position: absolute;
  will-change: transform;
}

.acquire__laptop {
  top: 89px;
  height: 322px;
  width: auto;
}

.acquire__phone {
  top: 251px;
  width: 118px;
  height: auto;
}

/* CDN (left side) */
.acquire__brand--cdn .acquire__laptop { left: 0; }
.acquire__brand--cdn .acquire__phone  { left: 156px; }
.acquire__brand--cdn .acquire__logo   { left: 344px; top: 230px; width: 86px; }

/* Bandera (right side), anchored to the right edge */
.acquire__brand--bandera .acquire__laptop { right: 0; }
.acquire__brand--bandera .acquire__phone  { right: 164px; }
.acquire__brand--bandera .acquire__logo   { right: 332px; top: 185px; width: 130px; }

/* Logos sit above the laptops */
.acquire__logo {
  z-index: 1;
}

/* Narrower desktops: scale each brand group toward its outer edge
   so it stays clear of the center column */
.acquire__brand--cdn     { transform-origin: left center; }
.acquire__brand--bandera { transform-origin: right center; }

@media (max-width: 1500px) {
  .acquire__brand { transform: scale(0.9); }
}

@media (max-width: 1400px) {
  .acquire__brand { transform: scale(0.82); }
}

@media (max-width: 1300px) {
  .acquire__brand { transform: scale(0.76); }
}

@media (max-width: 1200px) {
  .acquire__brand { transform: scale(0.68); }
}

.acquire__center {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 360px;
  margin-left: -180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-inline: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}

.acquire__year {
  margin: -10px 0;
  font-size: 100px;
  font-weight: 700;
  line-height: 130px;
  letter-spacing: -0.05em;
  background: var(--gradient-year-md);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  --outline-color: rgba(49, 173, 234, 0.6);   /* Subtle blue outline */
  filter: drop-shadow(0 0 24px rgba(47, 53, 58, 0.16));
}

.acquire__text {
  width: 350px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
}

.acquire__divider {
  margin-top: 2px;
}

/* 2022 */
.niche {
  position: relative;
  height: 545px;
}

.niche__line,
.niche__dot {
  position: absolute;
  z-index: 4;             /* The bottom line runs over the 2025 bars */
  left: 50%;
}

.niche__dot {
  margin-left: -12.5px;
}

.niche__line--top    { top: -30px; height: 320px; }
.niche__dot          { top: 290px; }
.niche__line--bottom { top: 315px; height: 320px; }

.niche__row {
  padding-top: 182px;
}

.niche__milestone {
  width: 319px;
  margin-top: 21px;
  text-align: left;
}

/* Shared: two columns on either side of the timeline */
.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 105px 1fr;
  align-items: start;
}

.timeline-row__left {
  grid-column: 1;
  justify-self: end;
}

.timeline-row__right {
  grid-column: 3;
  justify-self: start;
}

/* 2025 */
.integrate {
  position: relative;
  height: 626px;
  color: var(--color-white);
}

.integrate__band {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 500px;
  overflow: hidden;
  background: var(--color-primary);
}

/* 16:9 photo, taller than the band so it can move up on scroll */
.integrate__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180%;
  object-fit: cover;
  object-position: center;
  /* Default crop when animations are off */
  transform: translateY(-32%);
  will-change: transform;
}

/* Dark overlay on the 2025 band */
.integrate__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 23, 36, 0.72) 0%, rgba(2, 23, 36, 0.88) 55%, #021724 100%);
}

.integrate__bar {
  position: absolute;
  z-index: 2;
  height: 40px;
}

.integrate__bar--top-left {
  top: 0;
  left: 0;
  width: 75%;
  border-top-right-radius: 60px;
  background: var(--gradient-blue);
}

.integrate__bar--top-right {
  top: 40px;
  left: 75%;
  right: 0;
  border-bottom-left-radius: 60px;
  background: var(--gradient-blue);
}

.integrate__bar--bottom-right {
  top: 500px;
  left: 25%;
  right: 0;
  border-top-left-radius: 60px;
  background: var(--gradient-blue);
}

.integrate__bar--bottom-left {
  top: 540px;
  left: 0;
  width: 25%;
  border-bottom-right-radius: 60px;
  background: var(--gradient-blue-reverse);
}

.integrate__divider {
  position: absolute;
  top: 540px;
  left: 0;
  right: 0;
}

/* Vertical tagline on the left edge */
.integrate__tagline {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.integrate__tagline-line {
  width: 1px;
  height: 272px;
  background: rgba(255, 255, 255, 0.4);
}

.integrate__tagline-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.integrate__dot {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 50%;
  margin-left: -12.5px;
}

.integrate__phone {
  position: absolute;
  top: 43px;
  left: calc(50% - 400px);
  width: 190px;
  height: auto;
  will-change: transform;
}

.integrate__center {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 360px;
  margin-left: -180px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-inline: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
}

.integrate__year {
  font-size: 100px;
  font-weight: 700;
  line-height: 130px;
  letter-spacing: -0.05em;
  background: var(--gradient-year-md);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 32px rgba(47, 53, 58, 0.16));
  --outline-color: rgba(49, 173, 234, 0.6);   /* Subtle blue outline */
}

.integrate__text {
  max-width: 290px;       /* Matches the line break in the design */
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
}

/* 2026 + 90M */
.reach {
  position: relative;
  height: 1080px;
}

.reach__line {
  position: absolute;
  z-index: 4;
  top: -70px;
  left: 50%;
  height: 320px;
}

.reach__dot {
  position: absolute;
  z-index: 4;
  top: 250px;
  left: 50%;
  margin-left: -12.5px;
}

.reach__milestone {
  position: absolute;
  top: 320px;
  left: 50%;
  width: 360px;
  margin-left: -180px;
}

.reach__milestone .milestone__year + .milestone__text {
  margin-top: 0;
}

.reach__photo {
  position: absolute;
  border-radius: 4px;
  background: #dedede;
  object-fit: cover;
  will-change: transform;
}

/* Photo 1 sits under the 90M box; the others sit above it */
.reach__photo--1 { z-index: 1; top: 353px; left: calc(50% - 650px); width: 400px; height: 280px; }
.reach__photo--2 { z-index: 3; top: 683px; left: calc(50% - 580px); width: 240px; height: 320px; }
.reach__photo--3 { z-index: 3; top: 273px; left: calc(50% + 250px); width: 400px; height: 280px; }
.reach__photo--4 { z-index: 3; top: 593px; left: calc(50% + 440px); width: 240px; height: 320px; }

.reach__stat {
  position: absolute;
  z-index: 2;
  top: 500px;
  left: 50%;
  margin-left: -400px;
}

.reach__text {
  position: absolute;
  top: 930px;
  left: 50%;
  width: 540px;
  margin-left: -270px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Shared: big stat box */
.stat {
  width: 800px;
  height: 400px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-primary);
}

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

.stat__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;
  margin: 101px auto 0;
  text-align: center;
}

.stat__value {
  margin: -15px 0;
  font-size: 120px;
  font-weight: 700;
  line-height: 156px;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--color-white) 0%, #b6d5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 32px rgba(47, 53, 58, 0.16));
}

.stat__label {
  align-self: stretch;
  padding: 10px 0;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 32px rgba(47, 53, 58, 0.16);
}

/* Newsletter */
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 50px;
  padding-block: 70px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--color-white) 0%, #fafafa 50%, #e7f1f8 100%);
}

.newsletter__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.newsletter__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  color: var(--color-ink);
}

.newsletter__divider {
  width: 1px;
  height: 48px;
  background: rgba(47, 53, 58, 0.16);
}

.newsletter__intro {
  width: 379px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.newsletter__form {
  display: flex;
  align-items: center;
  width: 780px;
  height: 64px;
  margin-top: 32px;
  padding: 4px 4px 4px 32px;
  border: 1px solid #ddd;
  border-radius: 100px;
  background: var(--color-white);
  transition: all .3s ease-in-out;
}

.newsletter__field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 20px;
}

.newsletter__icon {
  width: 21px;
  height: 17px;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: 400 16px/21px var(--font-sans);
  color: var(--color-ink);
}

.newsletter__input::placeholder {
  color: #aaa;
}

.newsletter__form:focus-within {
  border-color: var(--color-ink);
}

.newsletter__submit {
  width: 200px;
  height: 56px;
  border: 0;
  border-radius: 100px;
  background: var(--color-primary);
  font: 700 18px/20px var(--font-sans);
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.newsletter__submit:hover {
  background: var(--color-ink);
}

.newsletter__message {
  position: relative;
  margin-top: 24px;
  padding: 12px 28px;
  border-radius: 100px;
  background: #5bc3a2;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

.newsletter__message:after {
    content: '';
    position: absolute;
    left: 24px;
    top: -12px;
    width: 0;
    height: 0;
    border-right: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid #5bc3a2;
    border-radius: 4px;
}

.newsletter__terms {
  width: 450px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: #707070;
}

.newsletter__terms a {
  font-weight: 600;
  color: var(--color-ink);
  transition: all .3s ease-in-out;
}

.newsletter__terms a:hover {
  text-decoration: underline;
}

/* Sponsors */
.sponsors {
  max-width: var(--container);
  margin-inline: auto;
  padding: 60px 0;
}

/* Title with dotted lines on both sides */
.sponsors__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.sponsors__title::before,
.sponsors__title::after {
  content: "";
  flex: 1;
  height: 12px;            /* 3 rows of dots */
  background-image: var(--dots);
  background-size: var(--dots-size);
  background-position: var(--dots-position);
}

.sponsors__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 32px;
}

.sponsors__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px 40px;
  flex-wrap: wrap;
}

/* Logos are sized by height; width follows the image ratio */
.sponsors__logo {
  width: auto;
}

.sponsors__logo--sm-prime      { height: 135px; }
.sponsors__logo--sm-supermalls { height: 48px; }
.sponsors__logo--sm-cares      { height: 120px; }
.sponsors__logo--villarcity      { height: 110px; }
.sponsors__logo--asus          { height: 58px; }
.sponsors__logo--home-credit   { height: 60px; }
.sponsors__logo--pldt          { height: 64px; }
.sponsors__logo--shopee        { height: 60px; }
.sponsors__logo--jollibee      { height: 110px; }
.sponsors__logo--honor         { height: 110px; }
.sponsors__logo--kojie-san     { height: 25px; }
.sponsors__logo--bonchon       { height: 70px; }
.sponsors__logo--eatpizza      { height: 45px; }

.sponsors__row:nth-child(2) {
  gap: 30px 64px;
}

.sponsors__row:nth-child(3) {
  gap: 48px;
}

/* Sizzle Reel */
.sizzle {
  position: relative;
  display: grid;
  grid-template-columns: 492px 681px;
  justify-content: center;
  height: 652px;
  margin: 0 50px;
  padding: 70px 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(0deg, var(--color-white) 0%, #fafafa 50%, #e7f1f8 100%);
}

.sizzle__intro {
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}

.sizzle__title {
  margin-top: 0;
  padding-right: 80px;    /* Keeps the longer title clear of the video */
}

.sizzle__social {
  margin-top: auto;       /* Pinned to the bottom, level with the video */
}

.sizzle__text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.sizzle__video {
  margin-top: 36px;
}

/* Shared: large section title */
.section-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  color: var(--color-ink);
}

/* Shared: social links */
.social__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-ink);
}

.social__list {
  display: flex;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.social__link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social__link:hover {
  transform: translateY(-2px);
}

.social__link img {
  width: 23px;
  height: 23px;
}

.social__link--facebook  { background: #1877f2; }
.social__link--x         { background: #000; }
.social__link--instagram { background: linear-gradient(180deg, #515bd4 0%, #8134af 25%, #dd2a7b 50%, #f58529 75%, #feda77 100%); }
.social__link--youtube   { background: #f00; }

/* Shared: video embed */
.video {
  position: relative;
  display: block;
  width: 680px;
  aspect-ratio: 680 / 383.59;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #0d1b2a;
  cursor: pointer;
  border: 1px solid #ddd;
}

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

.video__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 79.33%);
  opacity: 0.4;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.video:hover .video__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.video__duration {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 5px 10px;
  border: 1px solid var(--color-white);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  color: var(--color-white);
}

.video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Navigating an ever-changing landscape */
.habit {
  display: grid;
  grid-template-columns: 494px 680px;
  justify-content: center;
  margin: 0 50px;
  padding: 70px 0;
}

.habit__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.habit__title {
  max-width: 440px;
  margin-top: 0;
}

.habit__cards {
  display: grid;
  grid-template-columns: repeat(2, 330px);
  gap: 20px;
}

/* Shared: article card */
.article-card__link {
  display: block;
}

.article-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 330 / 185.62;
  border-radius: 4px;
  background: #dedede;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.article-card__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

.article-card__date {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  color: rgba(47, 53, 58, 0.4);
}

/* .article-card__link:hover .article-card__img {
  opacity: 0.85;
} */

.article-card__link:hover .article-card__title {
  text-decoration: underline;
}

.section-title--tight {
  line-height: 56px;
}

.dotted-divider--thin {
  height: 14px;
  margin-inline: 50px;
}

/* The Latest (reels) */
.reels {
  margin: 0 50px;
  padding: 60px 0;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-white);
}

.reels__head {
  text-align: center;
}

.reels__title {
  color: var(--color-white);
}

.reels__subtitle {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.4);
}

.reels__track {
  display: flex;
  gap: 20px;
  width: 1171px;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 50px auto 0;
  padding: 24px 0;        /* Room for the card glow */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  cursor: grab;
}

.reels__track::-webkit-scrollbar {
  display: none;
}

.reels__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.reels__item {
  flex: 0 0 277.75px;
  scroll-snap-align: start;
}

.reels__progress {
  position: relative;
  touch-action: none;     /* Draggable (see main.js) */
  width: 1170px;
  max-width: calc(100% - 2 * var(--gutter));
  height: 6px;
  margin: 26px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

/* Larger click area for the progress bar */
.reels__progress::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.reels__progress-thumb {
  position: absolute;
  top: 1px;
  left: 0;
  height: 4px;
  width: 55%;
  border-radius: 2px;
  background: var(--color-white);
}

/* Shared: reel card */
.reel {
  position: relative;
  display: block;
  aspect-ratio: 277.75 / 493.86;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a3442 0%, #0d1520 100%);
}

.reel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 79.33%);
  opacity: 0.4;
}

/* Button reset */
button.reel {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

/* Instagram embeds include their own header/footer */
.reel.is-playing {
  background: #000;
  cursor: auto;
}

.reel__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

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

.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 89px;
  height: 89px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  -webkit-user-drag: none;
}

.reel:hover .reel__play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Statement + gallery carousel */
.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px var(--gutter) 0;
  text-align: center;
}

.statement__title {
  max-width: 580px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-primary);
  text-wrap: balance;
}

.statement__text {
  max-width: 640px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* Active slide is full size; neighbours are scaled down.
   Positions are set from main.js via --offset. */
.carousel {
  --slide-w: 569px;
  --slide-h: 320px;
  --side-scale: 0.9;
  --step: 560px;          /* Center-to-center distance to a neighbour */
  --step-far: 532px;      /* Distance for each further slide */
  position: relative;
  margin-top: 64px;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel__track {
  position: relative;
  height: var(--slide-h);
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: grab;
}

.carousel__slide {
  --offset: 0;
  --abs: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slide-w);
  height: var(--slide-h);
  margin-left: calc(var(--slide-w) / -2);
  overflow: hidden;
  border-radius: 4px;
  background: #dedede;
  transform:
    translateX(calc(
      var(--offset) * var(--step-far)
      + clamp(-1, var(--offset), 1) * (var(--step) - var(--step-far))
    ))
    scale(var(--scale, var(--side-scale)));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel__slide.is-active {
  --scale: 1;
}

.carousel__slide.no-transition {
  transition: none;
}

/* "Depth" effect: neighbouring slides tilt away in 3D and dim slightly,
   the active photo zooms in. Remove the carousel--depth class to disable. */
.carousel--depth .carousel__track {
  perspective: 1600px;
}

.carousel--depth .carousel__slide {
  --tilt: calc(clamp(-1, var(--offset), 1) * -28deg);
  transform:
    translateX(calc(
      var(--offset) * var(--step-far)
      + clamp(-1, var(--offset), 1) * (var(--step) - var(--step-far))
    ))
    rotateY(var(--tilt))
    scale(var(--scale, 0.86));
  filter: brightness(var(--dim, 0.55)) saturate(var(--sat, 0.6));
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}

.carousel--depth .carousel__slide.is-active {
  --tilt: 0deg;
  --dim: 1;
  --sat: 1;
  z-index: 2;
}

.carousel--depth .carousel__img {
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel--depth .carousel__slide.is-active .carousel__img {
  transform: scale(1);
}

.carousel--depth .carousel__slide.no-transition,
.carousel--depth .carousel__slide.no-transition .carousel__img {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .carousel--depth .carousel__slide,
  .carousel--depth .carousel__img {
    transition: none;
  }
}

.carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.carousel__dot {
  width: 24px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(11, 114, 181, 0.24);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.carousel__dot[aria-selected="true"] {
  width: 48px;
  background: var(--color-primary);
}

/* Messages */
.messages {
  margin: 81px 50px 0;
  padding: 70px 0 80px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #e7f1f8 0%, #fafafa 50%, var(--color-white) 100%);
}

.messages__title {
  text-align: center;
}

/* Each message sticks while the next one slides over it */
.messages__list {
  position: relative;
  width: 780px;
  margin: 50px auto 0;
}

.message {
  --stick-top: 100px;
  position: sticky;
  z-index: 1;
  top: var(--stick-top);
  transform-origin: center top;
  padding: 21px 20px 40px;
  border-radius: 4px;
  background: var(--color-white);
  box-shadow: 0 -10px 32px rgba(182, 213, 233, 0.16);
}

/* Enough scroll room to finish reading before the next card covers it */
.message + .message {
  margin-top: 45vh;
}

.message__banner {
  height: 220px;
  border-radius: 10px 10px 0 0;
  background: url("../assets/images/messages/banner.jpg") center / cover no-repeat;
}

.message__author {
  position: absolute;
  top: 101px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.message__avatar {
  width: 100px;
  height: 100px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
}

.message__avatar--empty {
  background: #d9dee6;
}

.message__author > div {
  width: fit-content;
}

.message__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  color: var(--color-ink);
}

.message__role {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: rgba(47, 53, 58, 0.48);
}

.message__body {
  width: 660px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.message__signoff {
  font-weight: 600;
}

.message__body p + p {
  margin-top: 23px;
}

/* Footer */
.footer {
  position: relative;
  height: 763px;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}

.footer__bg {
  position: absolute;
  inset: 0;
  /* Soft fade from the white page above */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, transparent 60px,
    rgba(0, 0, 0, 0.12) 140px, rgba(0, 0, 0, 0.5) 230px,
    rgba(0, 0, 0, 0.88) 330px, #000 460px);
  mask-image: linear-gradient(180deg,
    transparent 0, transparent 60px,
    rgba(0, 0, 0, 0.12) 140px, rgba(0, 0, 0, 0.5) 230px,
    rgba(0, 0, 0, 0.88) 330px, #000 460px);
}

/* Image is pre-cropped to the footer */
.footer__bg-image {
  position: absolute;
  inset: 0;
  background: #0B72B5 url("../assets/images/footer-bg-up.png?v=20261024c") center bottom / 100% auto no-repeat;
}

.footer__bg-tint {
  position: absolute;
  top: 67px;
  left: 0;
  right: 0;
  bottom: 0;

}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 104px;
}

.footer__headline {
  font-size: 80px;
  font-weight: 600;
  line-height: 72px;
  background: var(--gradient-year-md);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  --outline-color: var(--color-white);   /* White outline */
  filter: drop-shadow(0 0 24px #b6d5e9);
}

.footer__tagline {
  margin-top: 24px;
  padding-left: 1em;      /* Balances the trailing letter-spacing */
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 1em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 120px;
  margin-top: 40px;
}

.footer__links {
  width: 137px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  text-transform: uppercase;
}

.footer__links--left {
  text-align: right;
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__divider {
  align-self: stretch;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.footer__logo {
  width: auto;
  height: 120px;
}

.footer__copyright {
  margin-top: 40px;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.4);
}

.footer__social {
  margin-top: 16px;
}

.social__link--ghost {
  background: rgba(255, 255, 255, 0.1);
}

/* Scales up from the bottom on hover so it stays attached to the edge */
.footer__top {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 283px;
  margin-left: -141.5px;
  transform-origin: center bottom;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.footer__top:hover,
.footer__top:focus-visible {
  transform: scale(1.05);
}

.footer__top img {
  display: block;   /* Removes the inline gap below the image */
}

/* Shared: screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shared: milestone sizes */
.milestone__year--md {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -0.05em;
  background-image: var(--gradient-year-md);
}

.milestone__year + .milestone__text {
  margin-top: 10px;
}

.milestone__text--light {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.milestone__btn {
  margin-top: 20px;
}

/* Shared: photo */
.photo {
  margin: 0;
  width: 400px;
}

.photo__frame {
  height: 320px;
  overflow: hidden;
  border-radius: 4px;
  background: #d9dee6;
}

.photo--short .photo__frame {
  height: 240px;
}

/* Shows the full 16:9 image without cropping */
.photo--wide .photo__frame {
  height: auto;
  aspect-ratio: 16 / 9;
}

.photo__img {
  color: transparent;     /* Hides alt text while the image loads */
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Extra height only when the image has inner parallax */
.photo__img[data-parallax] {
  height: 120%;
}

.photo__caption {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgba(47, 53, 58, 0.4);
  text-align: right;
}

/* Shared: quote card */
.quote-card {
  margin: 0;
  padding: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e7f1f8 0%, var(--color-white) 100%);
}

.quote-card__text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-ink);
}

/* Shared: pill button */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 12px 20px;
  border: 1px solid rgba(11, 114, 181, 0.24);
  border-radius: 100px;
  background: var(--color-white);
  box-shadow: 0 0 16px rgba(182, 213, 233, 0.24);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-pill:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-pill__icon {
  width: 9px;
  height: 9px;
}

/* Responsive */
/* Header: hamburger (hidden on desktop) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 19px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  height: 3px;
  border-radius: 1px;
  background: var(--color-primary);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(11, 114, 181, 0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--color-white);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.mobile-menu__logo img {
  width: 122px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.mobile-menu__close {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: var(--color-primary);
  cursor: pointer;
}

.mobile-menu__close::before,
.mobile-menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 1px;
  background: var(--color-white);
  transform: rotate(45deg);
}

.mobile-menu__close::after {
  transform: rotate(-45deg);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 20px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.64);
}

.mobile-menu__link--active {
  color: var(--color-white);
}

.mobile-menu__link--active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-white);
}

.mobile-menu__social {
  padding-top: 30px;
  text-align: center;
}

.mobile-menu__social-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.mobile-menu__social .social__list {
  justify-content: center;
  margin-top: 12px;
}

.mobile-menu__copyright {
  margin-top: auto;
  padding: 40px 20px 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* Footer headline line breaks: desktop vs mobile */
.br-mobile {
  display: none;
}

body.is-menu-open {
  overflow: hidden;
}

/* Mobile: single column. Decorative photos and devices are hidden,
   and the timeline uses normal flow so it fits any phone width. */
@media (max-width: 1023px) {
  :root {
    --nav-height: 60px;
    --gutter: 15px;
  }

  /* Nav */
  .nav__menu {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__logo-img {
    width: 122px;
    height: 20px;
  }

  /* Shared timeline pieces in normal flow */
  .timeline-line,
  .timeline-dot {
    position: relative !important;
    z-index: 4;
    top: auto !important;
    left: auto !important;
    flex: none;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .timeline-line {
    height: 120px !important;
  }

  /* Dots inside a band (2019, 2025) stay absolutely positioned
     so they meet the end of the line */
  .acquire__dot,
  .integrate__dot {
    position: absolute !important;
    top: 50px !important;
    left: 50% !important;
    margin-left: -12.5px !important;
    margin-right: 0 !important;
  }

  .timeline-row {
    display: block;
  }

  .photo,
  .hero__years,
  .acquire__brand,
  .integrate__phone,
  .integrate__tagline,
  .reach__photo,
  .video__duration {
    display: none;
  }

  .milestone__text {
    font-size: 16px;
    line-height: 24px;
  }

  .section-title {
    font-size: 48px;
  }

  /* Hero */
  .hero__content {
    padding: 113px var(--gutter) 0;
  }

  .hero__title {
    font-size: 48px;
    line-height: 48px;
  }

  /* Intro + 1997 */
  .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .intro__line--top {
    margin-top: 30px;
  }

  .intro__text {
    max-width: 400px;
    margin: 30px auto;
  }

  .intro__line--middle {
    height: 60px !important;
  }

  .intro__milestone {
    max-width: 400px;
  }

  /* 2007 + 2009–2018 */
  .launch {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .launch__line--top    { order: 1; margin-top: 30px; }
  .launch__dot--band    { order: 2; }
  .launch__band         { order: 3; }
  .launch__divider      { order: 4; }
  .launch__line--middle { order: 5; margin-top: -20px; }
  .launch__dot--growth  { order: 6; }
  .launch__growth       { order: 7; }
  .launch__line--bottom { order: 8; margin-top: 30px; }

  .launch__band {
    height: 280px;
    margin: -75px 0 0;    /* Line and dot overlap the band */
    border-radius: 0;
  }

  .launch__band-texture {
    background-size: cover;
  }

  /* Centered block, left-aligned text */
  .launch__band .timeline-row {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 92px var(--gutter) 0;
  }

  .launch__milestone {
    width: 283px;
    max-width: 100%;
    margin: 0;
  }

  .launch__milestone .milestone__text--light {
    font-size: 15px;
  }

  .launch__divider {
    margin-top: 0;
  }

  .launch__growth {
    display: flex;
    flex-direction: column;
    width: calc(100% - 70px);
    max-width: 360px;
    margin: 30px auto 0;
  }

  .launch__milestone--growth {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .launch__quotes {
    order: 2;
    width: 100%;
    margin-top: 30px;
  }

  /* 2019 */
  .acquire {
    margin-top: -50px;
  }

  .acquire__band {
    height: 360px;
    margin: 0;
    border-radius: 0;
  }

  .acquire__center {
    left: 0;
    width: 100%;
    margin: 0;
    padding: 94px var(--gutter) 0;
    justify-content: flex-start;
    border: 0;
    background: none;
  }

  .acquire__year {
    margin: 0;
    font-size: 96px;
    line-height: 124px;
  }

  .acquire__text {
    width: auto;
    max-width: 360px;
  }

  .acquire__divider {
    margin-top: 0;
  }

  /* 2022 */
  .niche {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .niche__line--top    { order: 1; margin-top: -20px; }
  .niche__dot          { order: 2; }
  .niche__row          { order: 3; }
  .niche__line--bottom { order: 4; margin-top: 30px; }

  .niche__row {
    width: calc(100% - 70px);
    max-width: 360px;
    margin: 30px auto 0;
    padding: 0;
  }

  .niche__milestone {
    width: 100%;
    margin: 0;
  }

  /* 2025 */
  .integrate {
    height: 576px;
    margin-top: -80px;
  }

  .integrate__bar {
    height: 30px;
  }

  .integrate__bar--top-left {
    left: 15.12%;
    right: 0;
    width: auto;
    border-radius: 30px 0 0 0;
    background: var(--gradient-blue-reverse);
  }

  .integrate__bar--top-right {
    top: 30px;
    left: 0;
    right: auto;
    width: 15.12%;
    border-radius: 0 0 30px 0;
    background: var(--gradient-blue-reverse);
  }

  .integrate__band {
    top: 30px;
  }

  .integrate__bar--bottom-right {
    top: 500px;
    border-top-left-radius: 30px;
  }

  .integrate__bar--bottom-left {
    top: 530px;
    border-bottom-right-radius: 30px;
  }

  .integrate__divider {
    top: 530px;
  }

  .integrate__center {
    left: 0;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .integrate__text {
    max-width: 290px;
  }

  /* 2026 + 90M */
  .reach {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .reach__line {
    margin-top: -20px;
  }

  .reach__milestone,
  .reach__stat,
  .reach__text {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
  }

  .reach__milestone {
    margin-top: 30px;
  }

  .reach__stat {
    width: 100%;
    height: 360px;
    margin-top: 30px;
    border-radius: 0;
  }

  .stat__content {
    width: 360px;
    max-width: calc(100% - 2 * var(--gutter));
    margin-top: 68px;
  }

  .stat__label {
    padding-inline: 50px;
  }

  .reach__text {
    width: auto;
    max-width: 400px;
    margin: 30px var(--gutter) 0;
  }

  /* Panels: shared card width */
  .newsletter,
  .sizzle,
  .messages {
    width: calc(100% - 2 * var(--gutter));
    max-width: 600px;
    margin-inline: auto;
  }

  /* Newsletter */
  .newsletter {
    height: auto;
    margin-top: 60px;
    padding: 50px 20px;
    border-radius: 10px;
  }

  .newsletter__head {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .newsletter__divider {
    display: none;
  }

  .newsletter__intro {
    width: auto;
    max-width: 360px;
  }

  .newsletter__form {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-top: 34px;
    padding: 0;
    border: 0;
    background: none;
  }

  .newsletter__field {
    flex: none;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border: 1px solid #ddd;
    border-radius: 100px;
    background: var(--color-white);
  }

  .newsletter__field:focus-within {
    border-color: var(--color-primary);
  }

  .newsletter__input {
    flex: 0 1 191px;
  }

  .newsletter__submit {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }

  .newsletter__terms {
    width: auto;
    max-width: 360px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 18px;
  }

  /* Sponsors */
  .sponsors {
    width: calc(100% - 2 * var(--gutter));
    max-width: 400px;
    padding: 50px 0;
  }

  .sponsors__logos {
    gap: 30px;
    margin-top: 31px;
  }

  .sponsors__row,
  .sponsors__row:nth-child(2),
  .sponsors__row:nth-child(3) {
    flex-wrap: wrap;
    gap: 24px 28px;
  }

  /* SM Prime + SM Cares on top, SM Supermalls full width below */
  .sponsors__logo--sm-prime      { order: 1; width: 136px; height: auto; }
  .sponsors__logo--sm-cares      { order: 2; width: 177px; height: auto; }
  .sponsors__logo--sm-supermalls { order: 3; width: 360px; max-width: 100%; height: auto; }
  .sponsors__logo--villarcity    { height: 90px; }

  /* Mobile logo sizes (~80% of desktop) */
  .sponsors__logo--asus        { height: 46px; }
  .sponsors__logo--home-credit { height: 48px; }
  .sponsors__logo--pldt        { height: 51px; }
  .sponsors__logo--shopee      { height: 48px; }
  .sponsors__logo--jollibee    { height: 90px; }
  .sponsors__logo--honor       { height: 90px; }
  .sponsors__logo--kojie-san   { height: 20px; }
  .sponsors__logo--bonchon     { height: 56px; }
  .sponsors__logo--eatpizza    { height: 36px; }

  /* Sizzle Reel */
  .sizzle {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 50px 20px;
    border-radius: 10px;
  }

  .sizzle__intro,
  .sizzle__body {
    display: contents;
  }

  .sizzle__title            { order: 2; margin-top: 0; }
  .sizzle__text             { order: 3; margin-top: 30px; }
  .sizzle__video            { order: 4; margin-top: 24px; }
  .sizzle__social           { order: 5; margin-top: 30px; }

  .video {
    width: 100%;
  }

  .video__play {
    width: 46px;
    height: 46px;
  }

  .dotted-divider--thin {
    margin: 50px var(--gutter) 0;
  }

  /* Navigating an ever-changing landscape */
  .habit {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2 * var(--gutter));
    max-width: 600px;
    margin: 0 auto;
    padding: 48px 0 50px;
  }

  .habit__intro {
    display: contents;
  }

  .habit__title {
    max-width: none;
    margin-top: 0;
  }

  .habit__cards {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
  }

  /* The Latest */
  .reels {
    margin: 0;
    padding: 50px 0;
    border-radius: 0;
  }

  .reels__title {
    line-height: 56px;
  }

  .reels__subtitle {
    margin-top: 8px;
  }

  .reels__track {
    margin-top: 26px;
  }

  .reels__item {
    flex: 0 0 min(400px, 100%);
  }

  /* Statement + carousel */
  .statement {
    padding-top: 30px;
  }

  .statement__title,
  .statement__text {
    max-width: 400px;
  }

  .carousel {
    --slide-w: min(400px, calc(100vw - 30px));
    --slide-h: calc(var(--slide-w) * 0.5625);
    --side-scale: 1;
    --step: calc(var(--slide-w) + 20px);
    --step-far: calc(var(--slide-w) + 20px);
    margin-top: 30px;
  }

  .carousel__dots {
    margin-top: 20px;
  }

  /* Messages */
  .messages {
    margin-top: 50px;
    padding: 50px 0 40px;
    border-radius: 10px 10px 0 0;
  }

  .messages__list {
    width: calc(100% - 40px);
    margin-top: 30px;
  }

  .message + .message {
    margin-top: 40vh;
  }

  .message {
    padding: 0 20px 40px;
  }

  .message__banner {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 220px;
  }

  .message__author {
    position: relative;
    top: auto;
    flex-direction: column;
    gap: 24px;
    padding-top: 57px;
    text-align: center;
  }

  .message__body {
    width: auto;
    margin-top: 30px;
  }

  /* Footer */
  .footer {
    height: auto;
    padding-bottom: 204px;  /* Room for the TOP button */
  }

  .footer__bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 120px, #000 260px);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 120px, #000 260px);
  }

  .footer__bg-image {
    background-size: cover;
    background-position: center top;
  }

  .footer__bg-tint {
    top: 0;
  }

  .footer__inner {
    padding: 80px var(--gutter) 0;
  }

  .br-mobile {
    display: inline;
  }

  .br-desktop {
    display: none;
  }

  .footer__headline {
    font-size: 48px;
    line-height: 48px;
  }

  .footer__tagline {
    margin-top: 16px;
    padding-left: 0.5em;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5em;
  }

  .footer__nav {
    display: grid;
    grid-template-columns: 137px 1px 137px;
    column-gap: 30px;
    row-gap: 40px;
    height: auto;
    margin-top: 40px;
  }

  .footer__logo {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    width: 160px;
    height: auto;
  }

  .footer__links--left { grid-row: 2; grid-column: 1; }
  .footer__divider     { grid-row: 2; grid-column: 2; height: 44px; }
  .footer__divider + .footer__logo + .footer__divider { display: none; }
  .footer__links:not(.footer__links--left) { grid-row: 2; grid-column: 3; }
}

/* Very small phones (< 400px): slightly smaller display type */
@media (max-width: 399px) {
  .hero__title,
  .footer__headline {
    font-size: 42px;
    line-height: 44px;
  }

  .milestone__year--xl,
  .stat__value {
    font-size: 100px;
  }

  .acquire__year,
  .integrate__year {
    font-size: 84px;
  }

  .footer__nav {
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 20px;
  }
}

@media (max-width: 430px) {
  html {
    overflow-x: hidden;
    overflow-x: clip;   /* hidden on both html and body breaks the sticky nav */
  }

  .reels__head {
    padding-inline: 15px;
  }

  .section-title br {
    display: none;
  }

  .section-title {
    font-size: 40px;
    line-height: 48px;
  }

  .reels__title,
  .section-title--tight {
    line-height: 48px;
  }

  .message + .message {
      margin-top: 20px;
  }

}

/* Embeds load directly, so no pointer cursor */
.video.is-playing,
.reel.is-playing {
  cursor: auto;
}