:root {
        --navy: #0f1f3d;
        --navy-2: #162a52;
        --navy-3: #223a69;
        --gold: #c9a24d;
        --gold-soft: #ead8a5;
        --white: #ffffff;
        --ink: #182235;
        --muted: #5d6a82;
        --line: #d9e0ea;
        --panel: #f6f8fc;
        --panel-2: #eef2f8;
        --shadow: 0 14px 32px rgba(15, 31, 61, 0.1);
        --radius: 20px;
        --radius-sm: 14px;
        --content: 1180px;
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--ink);
        background: linear-gradient(180deg, #f4f7fc 0%, #ffffff 24%, #f9fbfe 100%);
        line-height: 1.6;
      }

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

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

      header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(15, 31, 61, 0.08);
        backdrop-filter: blur(8px);
      }

      nav {
        max-width: var(--content);
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
      }

      .brand img {
        width: 54px;
        height: 54px;
        object-fit: contain;
        border-radius: 12px;
        background: #fff;
      }

      .brand-text {
        min-width: 0;
      }

      .brand-text strong {
        display: block;
        font-size: 0.98rem;
        line-height: 1.2;
        color: var(--navy);
      }

      .brand-text span {
        display: block;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px 18px;
        font-size: 0.95rem;
        color: var(--navy);
      }

      .nav-links a {
        padding: 6px 0;
        font-weight: 700;
      }

      section {
        padding: 72px 24px;
      }

      section[id] {
        scroll-margin-top: 96px;
      }

      .section-inner {
        max-width: var(--content);
        margin: 0 auto;
      }

      .eyebrow {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(201, 162, 77, 0.12);
        color: var(--navy);
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        margin-bottom: 18px;
      }

      h1,
      h2,
      h3 {
        margin: 0 0 14px 0;
        line-height: 1.12;
        color: var(--navy);
      }

      h1 {
        font-size: clamp(2.3rem, 5vw, 4.5rem);
        max-width: 11ch;
      }

      h2 {
        font-size: clamp(1.8rem, 3vw, 3rem);
      }

      h3 {
        font-size: 1.14rem;
      }

      p {
        margin: 0 0 16px 0;
        color: var(--muted);
        font-size: 1rem;
      }

      .hero {
        position: relative;
        overflow: hidden;
        padding-top: 46px;
        background:
          radial-gradient(circle at 12% 16%, rgba(201, 162, 77, 0.22) 0%, rgba(201, 162, 77, 0) 28%),
          radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 18%),
          linear-gradient(135deg, #071329 0%, #0f1f3d 42%, #162a52 76%, #223a69 100%);
        color: var(--white);
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(7, 19, 41, 0.24) 0%, rgba(7, 19, 41, 0.06) 48%, rgba(7, 19, 41, 0.22) 100%);
        pointer-events: none;
      }

      .hero .section-inner {
        position: relative;
      }

      .hero-intro {
        max-width: var(--content);
        margin: 0 auto 38px auto;
        text-align: left;
      }

      .hero-layout {
        display: grid;
        grid-template-columns: 1.02fr 0.98fr;
        gap: 46px;
        align-items: center;
        margin-bottom: 30px;
      }

      .hero-copy {
        padding-top: 6px;
        max-width: 560px;
      }

      .hero h1,
      .hero p,
      .hero .eyebrow {
        color: var(--white);
      }

      .hero h1 {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: clamp(2.8rem, 6vw, 5.4rem);
        line-height: 1.04;
      }

      .hero .eyebrow {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 24px rgba(4, 10, 24, 0.18);
      }

      .hero p {
        max-width: 60ch;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.06rem;
      }

      .hero-intro p {
        margin-left: auto;
        margin-right: auto;
      }

      .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin: 26px 0 28px 0;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.96rem;
        text-align: center;
        min-width: 220px;
      }

      .btn-primary {
        background: linear-gradient(135deg, #e4c06b 0%, var(--gold) 100%);
        color: var(--navy);
        box-shadow: 0 14px 28px rgba(201, 162, 77, 0.26);
      }

      .btn-secondary {
        background: rgba(255, 255, 255, 0.04);
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.34);
        backdrop-filter: blur(8px);
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        max-width: 1040px;
        margin: 0 auto;
      }

      .stat {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        padding: 16px 14px;
        min-height: 110px;
        backdrop-filter: blur(8px);
      }

      .stat strong {
        display: block;
        color: #fff;
        font-size: 1rem;
        margin-bottom: 6px;
      }

      .stat span {
        display: block;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
      }

      .hero-visual::before {
        content: "";
        position: absolute;
        top: -18px;
        left: -18px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201, 162, 77, 0.34) 0%, rgba(201, 162, 77, 0) 72%);
        filter: blur(12px);
        z-index: 0;
      }

      .hero-frame {
        position: relative;
        z-index: 1;
        width: min(100%, 560px);
        overflow: hidden;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
        box-shadow: 0 28px 70px rgba(3, 10, 24, 0.38);
        padding: 10px;
      }

      .hero-frame img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 20px;
        background: #fff;
      }

      .hero-badge {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 22px;
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(7, 19, 41, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(10px);
        color: #fff;
      }

      .hero-badge strong {
        display: block;
        margin-bottom: 4px;
        font-size: 1rem;
      }

      .hero-badge span {
        display: block;
        color: rgba(255, 255, 255, 0.84);
        font-size: 0.92rem;
      }

      .panel {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        border: 1px solid rgba(15, 31, 61, 0.06);
      }

      .about-grid,
      .package-grid,
      .contact-grid {
        display: grid;
        grid-template-columns: 1.06fr 0.94fr;
        gap: 28px;
        align-items: stretch;
      }

      .about-copy,
      .package-card,
      .parents-card,
      .contact-card,
      .visual-card {
        padding: 28px;
      }

      .about-copy,
      .package-card,
      .parents-card,
      .contact-card,
      .visual-card,
      .contact-side .panel,
      .day,
      .merch-card {
        height: 100%;
      }

      .about-copy,
      .package-card,
      .parents-card,
      .contact-card,
      .visual-card,
      .contact-side .panel,
      .day,
      .merch-card,
      .merch-card .copy {
        display: flex;
        flex-direction: column;
      }

      .visual-card {
        justify-content: center;
      }

      .about-visual {
        padding: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
      }

      .about-visual img {
        width: 100%;
        height: 100%;
        max-height: 860px;
        object-fit: contain;
        object-position: center top;
        border-radius: 16px;
        background: #fff;
      }

      .visual-card img {
        width: 100%;
        border-radius: 16px;
      }

      .benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 22px;
      }

      .benefit {
        padding: 22px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
      }

      .benefit h3 {
        margin-bottom: 8px;
      }

      .benefit p {
        margin-bottom: 0;
        font-size: 0.95rem;
      }

      .package-grid {
        grid-template-columns: 1.2fr 0.8fr;
      }

      .package-card {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      }

      .price {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        margin: 16px 0 18px 0;
        flex-wrap: wrap;
      }

      .price strong {
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1;
        color: var(--navy);
      }

      .price span {
        color: var(--muted);
        font-weight: 700;
      }

      .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 18px 0 20px 0;
      }

      .pill {
        background: var(--panel-2);
        color: var(--navy);
        border: 1px solid var(--line);
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 700;
      }

      .included {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .included li {
        position: relative;
        padding-left: 18px;
        color: var(--muted);
      }

      .included li::before {
        content: '•';
        position: absolute;
        left: 0;
        top: 0;
        color: var(--gold);
        font-size: 1.15rem;
        line-height: 1.2;
      }

      .small-note {
        margin-top: 18px;
        padding: 14px 16px;
        background: rgba(201, 162, 77, 0.1);
        border: 1px solid rgba(201, 162, 77, 0.22);
        border-radius: 14px;
        color: var(--navy);
        font-weight: 700;
        font-size: 0.94rem;
      }

      .parents-card {
        background: var(--navy);
        color: #fff;
      }

      .parents-card h3,
      .parents-card p {
        color: #fff;
      }

      .parents-card p {
        color: rgba(255, 255, 255, 0.86);
      }

      .itinerary-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px;
        align-items: stretch;
      }

      .itinerary-grid .day {
        grid-column: span 3;
      }

      .itinerary-grid .day-friday {
        grid-column: 2 / span 3;
      }

      .itinerary-grid .day-saturday {
        grid-column: 5 / span 3;
      }

      .itinerary-grid .day-sunday {
        grid-column: 8 / span 3;
      }

      .day {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 22px 18px;
        box-shadow: 0 10px 22px rgba(15, 31, 61, 0.06);
      }

      .day .label {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(201, 162, 77, 0.14);
        color: var(--navy);
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 14px;
      }

      .day h3 {
        font-size: 1rem;
        min-height: 52px;
      }

      .day p {
        margin-bottom: 0;
        font-size: 0.94rem;
      }

      .merch-intro {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 28px;
        align-items: stretch;
        margin-bottom: 24px;
      }

      .highlight-strip {
        margin-top: 18px;
        padding: 16px 18px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
        color: #fff;
        font-weight: 700;
      }

      .merch-board {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
      }

      .merch-board img {
        width: 100%;
        height: 100%;
        max-height: 860px;
        object-fit: contain;
        object-position: center;
        border-radius: 20px;
        box-shadow: var(--shadow);
        background: #fff;
      }

      .merch-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: 22px;
        align-items: stretch;
      }

      .merch-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(15, 31, 61, 0.06);
      }

      .merch-card img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: #fff;
      }

      .merch-card .copy {
        padding: 16px;
        flex: 1;
      }

      .merch-card h3 {
        font-size: 1rem;
        margin-bottom: 6px;
      }

      .merch-card p {
        font-size: 0.92rem;
        margin-bottom: 0;
      }

      .contact-card {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
        color: #fff;
      }

      .contact-card h2,
      .contact-card h3,
      .contact-card p {
        color: #fff;
      }

      .contact-card p {
        color: rgba(255, 255, 255, 0.84);
      }

      .contact-brand {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
      }

      .contact-brand img {
        width: 68px;
        height: 68px;
        object-fit: contain;
        background: #fff;
        border-radius: 18px;
        padding: 8px;
      }

      .contact-list {
        display: grid;
        gap: 10px;
        margin: 18px 0 26px 0;
      }

      .contact-item {
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
        font-weight: 700;
      }

      .contact-side {
        display: grid;
        gap: 16px;
        align-items: stretch;
      }

      .contact-side .panel {
        padding: 24px;
      }

      footer {
        padding: 24px;
        color: var(--muted);
        text-align: center;
        font-size: 0.92rem;
        border-top: 1px solid rgba(15, 31, 61, 0.08);
        background: #fff;
      }

      @media (max-width: 1080px) {
        .stats,
        .itinerary-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .itinerary-grid .day,
        .itinerary-grid .day-friday,
        .itinerary-grid .day-saturday,
        .itinerary-grid .day-sunday {
          grid-column: auto;
        }
        .merch-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .hero-layout,
        .about-grid,
        .package-grid,
        .merch-intro,
        .contact-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 720px) {
        nav {
          padding: 14px 18px;
          align-items: flex-start;
          flex-direction: column;
        }
        .brand {
          width: 100%;
        }
        .nav-links {
          width: 100%;
          justify-content: flex-start;
        }
        section {
          padding: 58px 18px;
        }
        .stats,
        .benefits,
        .included,
        .itinerary-grid,
        .merch-grid {
          grid-template-columns: 1fr;
        }
        .btn {
          width: 100%;
        }
        .brand-text strong {
          font-size: 0.92rem;
        }
        .brand-text span {
          font-size: 0.82rem;
        }
      }