/* ---------- LGEI Headline webfont (assets/fonts/*.ttf) ---------- */
  @font-face {
    font-family: "LGEIHeadline";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/LGEIHeadlineTTF-Thin.ttf") format("truetype");
  }
  @font-face {
    font-family: "LGEIHeadline";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/LGEIHeadlineTTF-Light.ttf") format("truetype");
  }
  @font-face {
    font-family: "LGEIHeadline";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/LGEIHeadlineTTF-Regular.ttf") format("truetype");
  }
  @font-face {
    font-family: "LGEIHeadline";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/LGEIHeadlineTTF-Semibold.ttf") format("truetype");
  }
  @font-face {
    font-family: "LGEIHeadline";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/LGEIHeadlineTTF-Bold.ttf") format("truetype");
  }

  /* ---------- DM Sans (variable, Google Fonts / OFL) ---------- */
  @font-face {
    font-family: "DM Sans";
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/DMSans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "DM Sans";
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/DMSans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
      U+A720-A7FF;
  }

  :root {
    --bg: #000000;
    --white: #ffffff;
    --chip-border: rgba(217, 217, 217, 0.5);
    --pill: #2c2c2c;
    --card: #373737;
    --btn: #5d5d5d;
    --grad-a: #cc81b3;
    --grad-b: #623692;
    --font: "LGEIHeadline", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic",
      system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--font);
    line-height: 1.4;
    overflow-x: hidden;
  }

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

  /* ---------- Hero ---------- */
  .hero {
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    /* box matches the video ratio (1264 x 720) so it shows fully with
       minimal cropping; cover still keeps aspect ratio without distortion. */
    aspect-ratio: 1264 / 720;
    overflow: hidden;
    position: relative;
  }
  .hero video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* keep aspect ratio; crop L/R, never top/bottom */
    object-position: center;
    pointer-events: none;
    /* fade the bottom edge into the black background (no hard seam) */
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }
  .hero-title {
    /* same dimensions as the video: sit exactly on top at 100% */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* match the video's bottom fade so the overlay has no hard edge either */
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    /* opacity + transition are driven by JS (fade in 3s / fade out 1s) */
    opacity: 1;
    transition: opacity 1s ease;
    pointer-events: none;
  }

  /* ---------- Layout ---------- */
  .page {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vw, 55px);
  }

  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  section.headline { margin-top: -80px; position: relative; z-index: 2; }
  /* ---------- Headline ---------- */
  .headline h1 {
    /* font-size: clamp(44px, 9.4vw, 120px); */
    font-size: clamp(40px, 6.4vw, 80px);
    font-weight: 700;
    text-align: center;
    line-height: 1.05;
  }
  .headline .sub {
    /* font-size: clamp(24px, 3.9vw, 50px); */
    font-size: clamp(18px, 2.9vw, 35px);
    font-weight: 400;
    text-align: center;
    margin-top: clamp(6px, 1.4vw, 18px);
  }
  .headline .sub + .sub {
    margin-top: 2px;
  }

  /* ---------- Day agenda ---------- */
  .days {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
  }
  .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    max-width: 280px;
  }
  .day-label {
    background: var(--pill);
    border-radius: 10px;
    /* font-size: clamp(20px, 2vw, 24px); */
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 600;
    padding: 12px 20px;
    min-width: 120px;
    text-align: center;
  }
  .day-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
    gap: 14px;
    width: 100%;
  }
  .chip {
    border: 1px solid var(--chip-border);
    border-radius: 10px;
    /* font-size: clamp(17px, 1.8vw, 23px); */
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 400;
    padding: 12px 18px;
    text-align: center;
    white-space: nowrap;
  }

  /* ---------- Timeline ---------- */
  .card-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    width: 100%;
  }
  .card-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 900px;
  }
  .timeline {
    background: #010101;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 34px 20px 30px;
    width: 100%;
  }
  .milestones {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 75px;
  }
  .milestones::before {
    content: "";
    position: absolute;
    top: 10px;
    /* center of 1st column → center of last column
       (with 75px gaps, each column is (100% - 150px)/3 wide,
        so each dot center sits 100%/6 - 25px from its edge) */
    left: calc(100% / 6 - 25px);
    right: calc(100% / 6 - 25px);
    height: 2px;
    background-image: repeating-linear-gradient(
      to right,
      var(--white) 0,
      var(--white) 2px,
      transparent 2px,
      transparent 6px
    );
    z-index: 0;
  }
  .plane {
    position: absolute;
    top: 0;
    left: 15%;
    width: 39px;
    height: 41px;
    object-fit: contain;
    z-index: 2;
  }
  .milestone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    max-width: none;
  }
  .milestone .dot {
    width: 22px;
    height: 22px;
    /* top-left corner squared, others rounded */
    border-radius: 0 50% 50% 50%;
    background: #000;
    border: 2px solid var(--white);
  }
  .milestone .ms-title {
    font-size: clamp(17px, 1.9vw, 24px);
    font-weight: 600;
    margin-top: 24px;
    white-space: nowrap;
  }
  .milestone .ms-date {
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 300;
    margin-top: 6px;
  }
  /* all three milestones share equal thirds and center alignment */

  /* ---------- Info (gradient) box ---------- */
  .info {
    background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
    border: 1px solid rgba(249, 249, 249, 0.23);
    /* the gradient's dark right end (#623692) makes the 23% white border read
       as a bright line on the right; dim only the right edge so it matches the
       other three (which sit over the lighter part of the gradient) */
    border-right-color: rgba(0, 0, 0, 0.75);
    border-radius: 20px;
    padding: 17px 50px 17px 75px;
    display: flex;
    gap: 25px;
    align-items: center;
    width: 100%;
  }
  .info .info-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
  }
  .info p {
    font-weight: 300;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.375;
  }
  .info p + p {
    margin-top: 4px;
  }
  .info strong {
    font-weight: 600;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn);
    color: var(--white);
    border: none;
    border-radius: 5px;
    padding: 11px 20px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
  }
  .btn img {
    width: 18px;
    height: 18px;
  }

  /* add-to-calendar dropdown list & modal: match the trigger button width.
     --atcb-w is set to the button's rendered width on click (see bottom script).
     ::part() with !important overrides the library's inline width styles. */
  [atcb-button-id]::part(atcb-list-wrapper) {
    width: var(--atcb-w, auto) !important;
    min-width: 0 !important;
    max-width: var(--atcb-w, none) !important;
  }
  [atcb-button-id]::part(atcb-list) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 210px !important;
  }
  [atcb-button-id]::part(atcb-modal-box),
  [id$="-modal-host"]::part(atcb-modal-box) {
    width: var(--atcb-w, 32em) !important;
    min-width: 0 !important;
    max-width: var(--atcb-w, 32em) !important;
  }

  /* ---------- Hotel card ---------- */
  .hotel {
    background: var(--card);
    border-radius: 20px;
    padding: 46px 33px 56px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .hotel h2 {
    font-size: clamp(21px, 2.1vw, 24px);
    font-weight: 700;
    text-align: center;
    padding: 9px 0;
  }
  .hotel .desc {
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 16px);
    text-align: center;
    line-height: 1.5;
    margin-top: 14px;
  }
  .hotel-media {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
    padding: 6px 27px 0px;
  }
  .hotel-media img {
    width: 100%;
    height: auto;
    border-radius: 2px;
  }
  .hotel .address {
    font-size: clamp(14px, 1.4vw, 16px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hotel .address img {
    width: 24px;
    height: 24px;
  }

  /* ---------- Footer ---------- */
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 68px 20px;
  }
  .footer img {
    width: 99px;
    height: 44px;
  }

  /* ---------- Mobile ---------- */
  /* tablet: hero 1.5x taller, ratio kept, slight L/R crop */
  @media (min-width: 768px) and (max-width: 1024px) {
    .hero {
      aspect-ratio: 1264 / 1080;
    }
  }

  @media (max-width: 767px) {
    .page {
      padding: 0 24px;
      gap: 30px;
    }

    /* mobile: smaller overlap so headline doesn't collide with taller hero */
    section.headline { margin-top: -50px; }

    .card-stack {
      gap: 20px;
    }

    /* mobile: hero 2x taller, ratio kept, more L/R crop */
    .hero {
      aspect-ratio: 1264 / 1440;
    }

    /* days: stacked rows, label left */
    .days {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
    }
    .day {
      flex-direction: row;
      align-items: flex-start;
      gap: 16px;
      max-width: none;
    }
    .day-label {
      flex: 0 0 auto;
      min-width: 92px;
      align-self: flex-start;
    }
    .day-chips {
      align-items: flex-start;
      padding-left: 0;
      gap: 10px;
    }
    .chip {
      font-size: 14px;
      padding: 11px 14px;
    }

    /* timeline: vertical */
    .timeline {
      padding: 30px 24px;
    }
    .milestones {
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
    }
    .milestones::before {
      top: 12px;
      bottom: 12px;
      left: 10px;
      right: auto;
      height: auto;
      width: 2px;
      background-image: repeating-linear-gradient(
        to bottom,
        var(--white) 0,
        var(--white) 2px,
        transparent 2px,
        transparent 6px
      );
    }
    .plane {
      display: none;
    }
    .milestone,
    .milestone:first-child,
    .milestone:last-child {
      flex-direction: row;
      align-items: center;
      text-align: left;
      max-width: none;
      gap: 18px;
    }
    .milestone .ms-title {
      margin-top: 0;
    }
    .milestone .ms-text {
      display: flex;
      flex-direction: column;
    }
    .milestone .ms-date {
      margin-top: 2px;
    }

    .info {
      padding: 20px 22px;
      gap: 14px;
    }
    .info .info-icon {
      display: none;
    }

    .hotel {
      padding: 40px 10px;
    }
    .hotel-media {
      gap: 10px;
          padding: 6px 10px 0px;
    }
    /* address: icon floats left, text wraps beneath it (full width) */
    .hotel .address {
      display: block;
      text-align: left;
    }
    .hotel .address img {
      float: left;
      margin-right: 8px;
    }
  }

  /* very small phones */
  @media (max-width: 360px) {
    .chip {
      white-space: normal;
    }
  }