/* ==========================================================================
   /sia-promo – Singapore Airlines "Leap into 2027" S$50 off campaign page.
   Page-specific styles only; layout leans on Bootstrap utilities in main.css.
   Figma: #917_SQ - Campaign (node 62:2, 1920 wide, desktop only).
   Sizes are the artboard values as vw (px / 19.2) clamped between a phone
   floor and the artboard value, so the page matches the design 1:1 at 1920
   and scales down with the viewport; the smaller breakpoints below are ours.
   Five bands: KV hero, blue "promotion" band, white "two chances to book"
   card, blue "how it works" band with four step cards, T&Cs on a white →
   light-blue fade (the artboard's page gradient).
   ========================================================================== */
:root {
  --sia-navy: #0b1b3f;        /* card headings */
  --sia-ink: #011c48;         /* step card copy */
  --sia-blue: #1450d8;        /* badges, fly-out dates, button labels */
  --sia-brand: #001489;       /* T&C heading, hero button label */
  --sia-muted: #5a6782;       /* labels, sub copy */
  --sia-body: #3a4763;        /* destinations sub copy */
  --sia-gold: #ffd66b;        /* "PROMOTION" / "OFF" */
  --sia-box: #f4f7fd;         /* period cards, destination tiles */
  --sia-box-line: #dce4f4;
  --sia-page-end: #c7e4ff;    /* bottom of the artboard's page gradient */
  --sia-btn-grad: linear-gradient(180deg, #fcde84 0%, #f4c44e 100%);
  /* Figma uses Inter, which the site does not ship; Roboto from main.css is
     the closest face already loaded on every page */
  --sia-font: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.sia-body {
  background: var(--sia-page-end);               /* the footer sits on the end of the T&C fade */
  color: var(--sia-navy);
  font-family: var(--sia-font);
}
.sia-body main {
  overflow-x: hidden;
}
.sia-body h1,
.sia-body h2,
.sia-body h3 {
  font-family: var(--sia-font);
}

/* buttons ----------------------------------------------------------------- */
/* yellow gradient pills (Rectangle 272 / "Button – Book now") */
.sia-btn {
  display: inline-block;
  background: var(--sia-btn-grad);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: filter .2s ease, transform .2s ease;
}
.sia-btn:hover,
.sia-btn:focus {
  text-decoration: none;
  filter: brightness(.96);
  transform: translateY(-1px);
}
/* hero: 536x73 pill, 30px navy label */
.sia-btn--hero {
  color: var(--sia-brand);
  font-size: clamp(.95rem, 1.5625vw, 1.875rem);
  padding: .6em 1.05em;
}
.sia-btn--hero:hover,
.sia-btn--hero:focus {
  color: var(--sia-brand);
}
/* "Use Code | DCSFLY50": 446x76.5 pill, 32px blue label */
.sia-btn--code {
  color: var(--sia-blue);
  font-size: clamp(1.05rem, 1.667vw, 2rem);
  padding: .585em 1.56em;
}
.sia-btn--code:hover,
.sia-btn--code:focus {
  color: var(--sia-blue);
}

/* --------------------------------- hero ---------------------------------- */
/* hero-bg.jpg is the artboard's KV group (node 62:636, 1920x866 at 2x):
   Marina Bay skyline with the two cards centre-right. The band keeps the KV
   ratio so `cover` never crops; Rectangle 9600 (a full-width navy wash that
   fades out towards the cards) is hero-overlay.svg laid over it. The copy
   starts on the header logo's left edge (same container-xxl / p-0 px-lg-3
   wrapper), as the artboard's logo and copy share one left edge (x 252). */
.sia-hero {
  position: relative;
  background: #001b4d url("../images/sia-promo/hero-bg.jpg") center top / cover no-repeat;
  aspect-ratio: 1920 / 866;
  color: #fff;
  padding: clamp(2.5rem, 5.3vw, 6.4rem) 1rem;    /* symmetric: the copy block is centred in the band */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sia-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/sia-promo/hero-overlay.svg") left top / 100% 100% no-repeat;
  pointer-events: none;
}
.sia-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.sia-hero__title {
  font-weight: 700;
  font-size: clamp(2rem, 3.125vw, 3.75rem);     /* 60px */
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.sia-hero__lead {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5625vw, 1.875rem); /* 30px */
  line-height: 1.2;
  color: #fff;
  margin: 0 0 clamp(.25rem, .52vw, .625rem);    /* 10px to the S$100 graphic */
  padding-left: .2em;                           /* "Enjoy up to" starts 6px right of the title */
}
.sia-hero__lead--after {
  margin: clamp(.2rem, .42vw, .5rem) 0 0;       /* 8px under the graphic */
}
/* Path 9947 "S$100 Off": 457x86 artwork in a 487x116 box (15px shadow bleed) */
.sia-hero__amount {
  display: block;
  width: clamp(190px, 25.36vw, 487px);
  height: auto;
  margin-left: -.78vw;
}
/* the T&C line centres under the button: the wrapper shrinks to the button */
.sia-hero__cta {
  width: fit-content;
  max-width: 100%;
  text-align: center;
  margin-top: clamp(1.25rem, 2.9vw, 3.5rem);    /* ~56px above the button (artboard 104, tightened) */
}
.sia-hero__tnc {
  margin: clamp(.6rem, 1.56vw, 1.875rem) 0 0;   /* ~30px under the button (artboard 63, tightened) */
  font-size: clamp(.8rem, 1.04vw, 1.25rem);     /* 20px */
  color: #fff;
}
/* Phones: hero-bg-mobile.jpg is the square mobile KV (node 84:172, 1080x1080,
   the cards fill the lower half edge to edge), so it is laid full-width at
   the bottom of the band rather than cropped with `cover`. The band is the
   copy plus 48vw of clear space, which keeps the cards out from under the
   copy; a navy fill covers whatever is left above the picture and fades
   into its sky over the last 90px, and a light wash keeps the copy legible
   where it overlaps the sky. */
@media (max-width: 767.98px) {
  .sia-hero {
    aspect-ratio: auto;
    min-height: 0;
    display: block;                              /* copy sits at the top, the cards below it */
    background:
      linear-gradient(180deg, #001b4d 0%, #001b4d calc(100% - 90px), rgba(0, 27, 77, 0) 100%) top / 100% max(0px, calc(100% - 100vw + 90px)) no-repeat,
      #001b4d url("../images/sia-promo/hero-bg-mobile.jpg") center bottom / 100% auto no-repeat;
    padding: 2.5rem 1rem 48vw;
  }
  .sia-hero::before {
    background: linear-gradient(180deg, rgba(0, 27, 77, .5) 0%, rgba(0, 27, 77, .35) 45%, rgba(0, 27, 77, 0) 65%);
  }
  .sia-hero__title {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
  }
  .sia-hero__lead {
    font-size: clamp(1.1rem, 4.8vw, 1.4rem);
  }
  .sia-hero__amount {
    width: clamp(220px, 70vw, 330px);
    margin-left: -2.2vw;
  }
  .sia-hero__cta {
    margin-top: 2rem;
  }
  .sia-hero .sia-btn--hero {
    font-size: clamp(.95rem, 4.3vw, 1.25rem);
    white-space: normal;
  }
  .sia-hero__tnc {
    margin-top: .75rem;
  }
}

/* ------------------------------ promotion -------------------------------- */
/* node 62:229: 1920x408 band, everything centred */
.sia-promo {
  background: linear-gradient(168deg, #0a2a82 14.286%, #1450d8 85.714%);
  color: #fff;
  text-align: center;
  padding: clamp(2rem, 2.34vw, 2.8rem) 1rem clamp(2rem, 2.08vw, 2.5rem);   /* 45 / 40 */
}
.sia-promo__eyebrow {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.125vw, 3.75rem);   /* 60px */
  line-height: 1.2;
  letter-spacing: .04em;                         /* 2.5px */
  text-transform: uppercase;
  color: var(--sia-gold);
  margin: 0 0 clamp(.5rem, .65vw, .8rem);        /* 12.5px */
}
.sia-promo__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.5rem, .91vw, 1.1rem);              /* 17.5px */
  margin: 0 0 clamp(.75rem, .91vw, 1.1rem);      /* 17.5px */
}
.sia-promo__value {
  font-weight: 700;
  font-size: clamp(2.6rem, 4.43vw, 5.3rem);      /* 85px */
  line-height: 1;
}
.sia-promo__off {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.82vw, 2.2rem);      /* 35px */
  line-height: 1.2;
  color: var(--sia-gold);
}
.sia-promo__text {
  font-size: clamp(1rem, 1.17vw, 1.4rem);        /* 22.5px */
  line-height: 1.5;
  color: #dce6ff;
  max-width: 548px;
  margin: 0 auto clamp(1rem, 1.17vw, 1.4rem);    /* 22.5px */
}
.sia-promo__pill {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1.25px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-size: clamp(.95rem, 1.17vw, 1.4rem);      /* 22.5px */
  line-height: 1.2;
  padding: .39em .78em;                          /* 8.75 / 17.5 */
  margin: 0;
}

/* --------------------------- two chances to book ------------------------- */
/* node 62:228 "Email Card": 1057 wide, 50px side padding, on the white page */
.sia-card {
  background: #fff;
  padding: 0 1rem;
}
.sia-card__inner {
  max-width: 1057px;
  margin: 0 auto;
  padding: clamp(1.5rem, 2.08vw, 2.5rem) clamp(0px, 2.6vw, 50px) 0;   /* 40 top */
  text-align: center;
}
.sia-card__title {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.125vw, 3.75rem);   /* 60px */
  line-height: 1.2;
  color: var(--sia-navy);
  margin: 0;
}
.sia-card__sub {
  font-size: clamp(.9rem, .91vw, 1.1rem);        /* 17.5px */
  line-height: 1.5;
  color: var(--sia-muted);
  margin: 0;
}
.sia-card__sub strong {
  color: var(--sia-navy);
}

/* period cards: two 317.5px boxes, 15px apart */
.sia-periods {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: clamp(1rem, 1.04vw, 1.25rem) 0 clamp(.5rem, .52vw, .625rem);   /* 20 / 10 */
}
.sia-period {
  flex: 0 1 317.5px;
  min-width: 0;
  background: var(--sia-box);
  border: 1.25px solid var(--sia-box-line);
  border-radius: 15px;
  padding: clamp(1rem, 1.3vw, 25px);
  text-align: left;
}
.sia-period__badge {
  display: inline-block;
  background: var(--sia-blue);
  border-radius: 7.5px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5625vw, 1.875rem); /* 30px */
  line-height: 1.2;
  letter-spacing: .04em;                         /* 1.25px */
  text-transform: uppercase;
  padding: .17em .375em;                         /* 5 / 11.25 */
  margin-bottom: clamp(.75rem, 1.04vw, 1.25rem); /* 15px spacer + 5px gap */
}
.sia-period__label {
  font-size: clamp(.8rem, .78vw, .9375rem);      /* 15px */
  line-height: 1.2;
  letter-spacing: .067em;                        /* 1px */
  text-transform: uppercase;
  color: var(--sia-muted);
  margin: 0 0 5px;
}
.sia-period__book {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.17vw, 1.4rem);      /* 22.5px */
  line-height: 1.2;
  color: var(--sia-navy);
  margin: 0;
}
.sia-period__divider {
  border: 0;
  border-top: 1.25px dashed #c7d3ec;
  opacity: 1;
  margin: calc(12.5px + 5px) 0;                  /* 12.5px divider padding + the 5px gap */
}
.sia-period__fly {
  font-weight: 700;
  font-size: clamp(1rem, .98vw, 1.17rem);        /* 18.75px */
  line-height: 1.2;
  color: var(--sia-blue);
  margin: 0;
}
@media (max-width: 575.98px) {
  .sia-periods {
    flex-direction: column;
    align-items: stretch;
  }
  .sia-period {
    flex-basis: auto;
  }
}

/* destinations: node 62:247 */
.sia-dest {
  padding: clamp(1.5rem, 1.5625vw, 1.875rem) 0 clamp(.5rem, .52vw, .625rem);   /* 30 / 10 */
}
.sia-dest__title {
  font-weight: 700;
  font-size: clamp(1.3rem, 1.5625vw, 1.875rem); /* 30px */
  line-height: 1.2;
  color: var(--sia-navy);
  margin: 0 0 7.5px;
}
.sia-dest__text {
  font-size: clamp(1rem, 1.25vw, 1.5rem);        /* 24px */
  line-height: 1.55;
  color: var(--sia-body);
  max-width: 829px;
  margin: 0 auto clamp(.75rem, .91vw, 1.1rem);   /* 7.5 gap + 10 spacer */
}
.sia-dest__text strong {
  font-weight: 700;
  color: var(--sia-body);
}
.sia-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 7.5px;
  margin: 0;
  padding: 0;
}
.sia-chip {
  background: #fdf0f0;
  border: 1.25px solid #f2d2d2;
  border-radius: 999px;
  color: #8a2a2a;
  font-size: clamp(.875rem, .85vw, 1.02rem);     /* 16.25px */
  line-height: 1.2;
  padding: .385em .92em;                         /* 6.25 / 15 */
}

/* popular picks: node 62:619, four 221px tiles 17.5px apart (937 wide) */
.sia-picks {
  padding-top: clamp(.5rem, .52vw, .625rem);     /* 10px */
}
.sia-picks__eyebrow {
  font-weight: 700;
  font-size: clamp(.95rem, 1.04vw, 1.25rem);     /* 20px */
  line-height: 1.2;
  letter-spacing: .05em;                         /* 1px */
  text-transform: uppercase;
  color: var(--sia-muted);
  margin: 0 0 15px;
}
.sia-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17.5px;
  max-width: 937px;
  margin: 0 auto;
  padding: 0;
}
.sia-tile {
  background: var(--sia-box);
  border: 1.75px solid var(--sia-box-line);
  border-radius: 21px;
  overflow: hidden;
  padding-bottom: 17.5px;
  text-align: left;
}
.sia-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 217.646 / 146.846;
  object-fit: cover;
  margin-bottom: 14px;
}
.sia-tile__text {
  padding: 0 17.5px;
}
.sia-tile__city {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.27vw, 1.53rem);    /* 24.5px */
  line-height: 1.2;
  color: var(--sia-navy);
  margin: 0 0 3.5px;
}
.sia-tile__country {
  font-size: clamp(.95rem, 1vw, 1.2rem);         /* 19.2px */
  line-height: 1.2;
  color: var(--sia-muted);
  margin: 0;
}
@media (max-width: 767.98px) {
  .sia-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* CTA: node 62:261 */
.sia-card__cta {
  padding: clamp(1.75rem, 1.82vw, 2.2rem) 0 clamp(2rem, 2.34vw, 2.8rem);   /* 35 / 45 */
}
.sia-card__note {
  font-size: clamp(.8rem, .78vw, .9375rem);      /* 15px */
  line-height: 1.2;
  color: #8592ad;
  margin: 17.5px 0 0;
}

/* ------------------------------ how it works ----------------------------- */
/* node 62:620: 1920x970 band; four 331x537 white cards 39px apart, each with
   a 110px gradient disc hanging over its top-left corner (20px out, 33px up).
   The artboard row is 1441 wide; here it lives inside .container-xxl (1320)
   like every other band, so the cards are a little narrower than the design. */
.sia-how {
  background: linear-gradient(-27.82deg, #0159cb 7.07%, #003ba7 84.32%);
  color: #fff;
  padding: clamp(2.5rem, 3.18vw, 3.8rem) 1rem clamp(2.5rem, 3.78vw, 4.5rem);   /* 61 / 72.5 */
}
/* .sia-how__inner / .sia-tnc__inner are the header's wrapper (container-xxl
   p-0 px-lg-3) so both bands line up with the logo; the body adds a further
   inset on lg+ so the cards and the T&C text sit clear of the header edge */
.sia-how__inner {
  text-align: center;
}
@media (min-width: 992px) {
  .sia-how__body,
  .sia-tnc__body {
    padding: 0 clamp(1.5rem, 3.5vw, 3.75rem);   /* 60px at 1920 */
  }
}
.sia-how__title {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.125vw, 3.75rem);   /* 60px */
  line-height: 1.2;
  color: #fff;
  margin: 0 0 clamp(2.75rem, 4.17vw, 5rem);      /* 80px, leaves room for the discs */
}
.sia-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.75rem, 2.03vw, 2.45rem);          /* 39px; wider floor so the discs clear the neighbour */
  margin: 0;
  padding: 0 0 0 20px;                           /* the first disc hangs 20px past its card */
}
.sia-step {
  position: relative;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
  aspect-ratio: 331 / 537;                       /* the artboard card; grows with longer copy */
  padding: 0 7.5px clamp(1.5rem, 2.6vw, 3.1rem);
  color: var(--sia-ink);
  display: grid;
  grid-template-rows: auto auto 1fr;             /* icon slot / title / text */
  justify-items: center;
}
/* Everything inside the card is sized from the card's own width (331 in the
   artboard) rather than the viewport, so the disc, the icons and the title
   line stay in the artboard's proportions however wide the card ends up. */
/* Ellipse 100: 110px disc (33% of the card) hanging 20px out and 33px up,
   radial #06A8E9 → #0555F0, 45px number */
.sia-step__num {
  position: absolute;
  left: max(-6%, -20px);                         /* 20 / 331 */
  top: 0;
  transform: translateY(-30%);                   /* 33 / 110 */
  width: min(33.2%, 110px);                      /* 110 / 331 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../images/sia-promo/step-circle.svg") center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.85vw, 2.25rem);     /* ~41% of the disc; cqw below where supported */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* icon slot: 331x222 in the artboard (the titles start at 222); each icon is
   placed in it by its artboard offset, as a share of the slot */
.sia-step__media {
  position: relative;
  width: 100%;
  aspect-ratio: 331 / 222;
}
.sia-step__icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: auto;
}
.sia-step__icon--1 { width: 51.2%; top: 4%; }                 /* 169.5 wide, 9 down */
.sia-step__icon--2 { width: 57.7%; top: 25.7%; aspect-ratio: 191 / 160; overflow: hidden; }   /* 191x160 crop, 57 down */
.sia-step__icon--2 img { position: absolute; left: 0; top: -25%; width: 100%; height: auto; }
.sia-step__icon--3 { width: 51.1%; top: 6.4%; }               /* 169 wide, 14 down */
.sia-step__icon--4 { width: 50.8%; top: 23.1%; margin-left: 2.6%; }   /* 168 wide, 51 down, 8 right of centre */
.sia-step__title {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.5625vw, 1.875rem); /* 30px */
  line-height: 1.18;
  color: var(--sia-ink);
  margin: 0 0 clamp(1rem, 1.46vw, 1.75rem);      /* 28px to the text */
}
.sia-step__text {
  font-size: clamp(1rem, 1.25vw, 1.5rem);        /* 24px */
  line-height: 1.2;
  color: var(--sia-ink);
  max-width: 316px;
  margin: 0;
}
.sia-step__text strong {
  font-weight: 700;
  color: var(--sia-ink);
}
.sia-step__link {
  color: #4194ff;
  text-decoration: none;
}
.sia-step__link:hover,
.sia-step__link:focus {
  color: #4194ff;
  text-decoration: underline;
}
@supports (font-size: 1cqw) {
  .sia-step { container-type: inline-size; }
  .sia-step__num { font-size: min(13.6cqw, 2.8rem); }      /* 45 / 331, capped at the artboard size */
  .sia-step__title { font-size: min(9.06cqw, 1.875rem); }  /* 30 / 331 */
  .sia-step__text { font-size: min(7.25cqw, 1.5rem); }     /* 24 / 331 */
}
.sia-how__cta {
  margin-top: clamp(2.5rem, 3.65vw, 4.4rem);     /* 70px */
}
@media (max-width: 991.98px) {
  .sia-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.25rem 2.5rem;                         /* the discs hang 33px above the row below */
    max-width: 720px;
    margin: 0 auto;
  }
  .sia-step {
    aspect-ratio: auto;                          /* the cards are wider here; let the copy set the height */
  }
}
@media (max-width: 575.98px) {
  .sia-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
  }
}

/* ---------------------------------- T&Cs --------------------------------- */
/* Group 25402 on the page gradient: white down to the artboard's 69.9%,
   then → #C7E4FF at the bottom (which the footer continues on, see .sia-body).
   The artboard text block is 1601 wide with 60/30px type; it is kept inside
   .container-xxl and the type is scaled 1440/1920 (45/22.5px at 1920). */
.sia-tnc {
  background: linear-gradient(180deg, #fff 0%, #fff 24%, var(--sia-page-end) 100%);
  padding: clamp(2.5rem, 4.2vw, 5rem) 1rem clamp(2rem, 5.4vw, 6.4rem);   /* 81 / 103 */
  color: #000;
}
.sia-tnc__inner {
  text-align: left;
}
.sia-tnc__title {
  font-weight: 700;
  font-size: clamp(1.2rem, 2.344vw, 2.8125rem);  /* 60px × .75 = 45px */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sia-brand);
  margin: 0 0 clamp(.6rem, .82vw, 1rem) clamp(0px, .66vw, 12.75px);   /* the heading sits 17px × .75 right of the list */
}
.sia-tnc__list {
  font-size: clamp(.9rem, 1.172vw, 1.406rem);    /* 30px × .75 = 22.5px */
  line-height: 1.2;
  margin: 0;
  padding-left: 1.5em;                           /* number inset (45px × .75) */
}
.sia-tnc__list > li + li {
  margin-top: 1.2em;                             /* one blank line between items */
}
.sia-tnc__list ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.5em;                           /* bullets a further 1.5em in */
}
.sia-tnc__list strong {
  font-weight: 700;
  color: #000;
}
.sia-tnc__note {
  margin: 0 0 0 -1.5em;                          /* "*Promo codes…" hangs back to the number column */
  padding-left: .25em;
}

/* --------------------------------- footer -------------------------------- */
/* the shared footer sits on the light blue right after the T&Cs */
.sia-body #footer {
  margin-top: 0 !important;
}