/* ============================================================
   MULTI-PORT PACKAGE PAGES — hub + regional
   Scoped under .packages-page. One sheet for all five pages.

   Ported from docs/multiport/packages-hub.html, translated to the
   conventions already established by destination-page.css / partners.css:
     - Urbanist display headings, Work Sans body (NOT the mockup's
       Fraunces + Inter — those fonts are not loaded on this site)
     - site tokens (--blue-*, --light-*, --dark-*, --acent-50) instead of
       the mockup's private navy/ocean/cream hex values
     - gold accent reserved for navy grounds
     - white / gray section rhythm decided by POSITION, not by a class

   The mockup's generic class names (.container, .section, .hero, .btn,
   .review, .promise) are all deliberately renamed with a pkg- prefix:
   unprefixed names of that shape collide with site-wide CSS.
   ============================================================ */

.packages-page {
  /* Same gold as Partners / Groups / the destination page; navy grounds only. */
  --pkg-gold: #C8A14B;
  --pkg-gold-soft: #E4C878;
  /* Same dim gold wash Groups uses behind its tiled inclusion icons
     (--gp-gold-dim in groups.css) — kept byte-identical so the two
     navy "what's included" panels read as the same component. */
  --pkg-gold-dim: rgba(200, 161, 75, 0.18);
  /* Solid light blue-gray for secondary text on navy (no opacity washes). */
  --pkg-navy-muted: #C9D1E6;
  --pkg-coral: var(--acent-50);
  --pkg-coral-hover: #cf5643;
  --pkg-radius: 12px;
  --pkg-radius-lg: 20px;
}

/* Shared eyebrow — identical treatment to .dp-eyebrow / .pp-eyebrow.
   display:block because the global .h3/.h4 classes are inline-block and an
   inline-block eyebrow would sit on the heading's line. */
.packages-page .pkg-eyebrow {
  font-family: "Work Sans";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-70);
  margin-bottom: 10px;
  display: block;
}
.packages-page .pkg-eyebrow--gold { color: var(--pkg-gold); }

/* ============================================================
   SECTION SHELLS — the white/gray rhythm is POSITIONAL, exactly like
   .destination-page (destination-page.css): one rule per parity, counted over
   the sibling <section> elements of .packages-page. Nothing in the markup ever
   names a background color.

   This is the only version that survives these pages' content model. Almost
   every section is conditional — Compare is authored per region, Seasonality,
   Cruise lines, Guarantees, Why-book, Reviews and the Expansion callout each
   render only when that region has authored them — and six of them arrive as
   shared partials that cannot know what rendered before them. Assigning the
   color by hand (a --gray class, a Razor toggle, or a fixed "reassurance band"
   group as this file did until now) means the page has to be re-checked every
   time a region is authored differently; counting positions cannot get out of
   step, because a section that does not render does not take a turn.

   Sections that carry their own background — the navy hero, the navy
   inclusions band and the navy final CTA — are marked .pkg-solid and sit
   OUTSIDE the rhythm: they keep their own paint and merely separate the bands
   around them. They still occupy a position, which is intentional and
   harmless: a navy block between two same-colored bands reads as a divider,
   not as a repeat.

   Both colors are declared, not just the gray one, because the FAQ partial is
   shared (faq-section.css hardcodes a gray shell at single-class specificity)
   and has to take whichever color its position calls for like every other
   band, instead of being pinned by its own stylesheet.
   ============================================================ */
.packages-page .pkg-section { padding: clamp(48px, 7vw, 80px) 0; }

.packages-page > section:not(.pkg-solid):nth-of-type(odd) { background-color: var(--light-00); }
.packages-page > section:not(.pkg-solid):nth-of-type(even) { background-color: var(--light-10); }

.packages-page .pkg-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}
.packages-page .pkg-section-head { max-width: 760px; margin-bottom: 32px; }
/* Headings carry the global .h3 class (inline-block); force block so they
   always start on their own line under the eyebrow. */
.packages-page .pkg-section-head h2 {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-90);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  margin-bottom: 12px;
}
.packages-page .pkg-lede {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.65;
  margin: 0 0 12px;
  max-width: 62ch;
}
.packages-page .pkg-lede:last-child { margin-bottom: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.packages-page .pkg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Work Sans";
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.packages-page .pkg-btn--primary {
  background: var(--pkg-coral);
  color: var(--light-00);
}
.packages-page .pkg-btn--primary:hover {
  background: var(--pkg-coral-hover);
  color: var(--light-00);
}

/* ============================================================
   HERO — compact navy panel (same scrim family as Partners / destination)
   ============================================================ */
.packages-page .pkg-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
}
.packages-page .pkg-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 62%;
  opacity: 1;
}
/* Same scrim as the homepage hero's .hh-shade — identical stops/colors/
   direction, so the hub hero reads as the same treatment as Home rather
   than a home-grown variant. */
.packages-page .pkg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(15, 30, 70, 0.75) 0%, rgba(15, 30, 70, 0.4) 60%, rgba(15, 30, 70, 0.15) 100%);
}
.packages-page .pkg-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 48px) 5% clamp(40px, 6vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.packages-page .pkg-hero-inner { max-width: 860px; }
/* Same font stack/weight/size/letter-spacing as the homepage hero's
   .hh-slide-content h1 + .white-text, so the two heroes read as one
   typographic system. */
.packages-page .pkg-hero h1 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.2em;
  letter-spacing: 0.02em;
  color: var(--light-00);
  margin: 0;
}
/* Same font stack/weight/size/letter-spacing as the homepage hero's
   subtitle (p.h4.white-text.hh-h1). */
.packages-page .pkg-hero-sub {
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--light-00);
  line-height: 1.2em;
  margin: 16px 0 0;
  max-width: 68ch;
}

/* Hero breadcrumb — extracted to the shared, page-agnostic
   /content/new/css/hero-breadcrumb.css (.hero-breadcrumb, via
   Views/V2/Shared/_HeroBreadcrumb.cshtml). This page's --pkg-navy-muted
   value is what that shared stylesheet's color now hardcodes. */

/* Trust chips */
.packages-page .pkg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.packages-page .pkg-chip {
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 500;
  color: var(--light-00);
  padding: 7px 15px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  /* Same fix as the homepage hero's .hero-trust: over a bright, busy
     photo (sky, water) the label washes out at rest. Blurring what's
     behind the pill keeps it legible regardless of what's under it. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(15, 30, 70, 0.35);
}
.packages-page button.pkg-chip { cursor: pointer; }
.packages-page button.pkg-chip:hover {
  border-color: var(--pkg-gold-soft);
  color: var(--pkg-gold-soft);
}

/* Search widget — spacing only.
   The card itself is the HOMEPAGE hero finder, verbatim: the markup inside
   uses .hh-card-find > #excursions.hh-card-find-tab-content.hs-border-mod and
   home.css is linked by Hub.cshtml / Region.cshtml, so the white pill, the
   divider-separated selects and the inline Search button are pixel-identical
   to the homepage rather than a second implementation of the same control.
   Nothing about the card is redefined here — anything added below would be a
   fork of home.css and would silently drift from it. */
.packages-page .pkg-hero-finder {
  margin-top: 32px;
}

/* ============================================================
   REGION TILES — 2x2 on desktop. Never 4-across: the meta line
   ("3 packages · 3 ports each · from $249 per person") wraps badly
   at a quarter of the container.

   Same reveal mechanic as the destination page's port cards
   (.dp-port-card in destination-page.css): the name sits over a shallow
   veil at rest, the meta line is folded away and unfolds — with a rule
   above it — on hover/focus, and the background photo gets a slight
   zoom. Aspect ratio stays 16/9 (this grid is 2-up and wide, not the
   dense auto-fill grid the port cards live in), so the footprint here
   is unchanged from before — only the interaction is ported over.
   ============================================================ */
.packages-page .pkg-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .packages-page .pkg-tiles { grid-template-columns: 1fr; }
}
.packages-page .pkg-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  border-radius: var(--pkg-radius-lg);
  overflow: hidden;
  background: var(--blue-90);
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease;
}
.packages-page .pkg-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(41, 51, 88, 0.16);
}
.packages-page .pkg-tile-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--blue-90);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.packages-page .pkg-tile:hover .pkg-tile-media { transform: scale(1.055); }
/* The veil: shallow at rest, full height once the meta line is out —
   same proportion as .dp-port-card::after. */
.packages-page .pkg-tile::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 40%;
  z-index: 2;
  background: linear-gradient(180deg, #00000000, #170f2db8);
  transition: height 0.32s ease, background 0.32s ease;
}
.packages-page .pkg-tile:hover::after,
.packages-page .pkg-tile:focus-visible::after {
  height: 100%;
  background: linear-gradient(180deg, rgba(23, 15, 45, 0.15) 0%, rgba(23, 15, 45, 0.72) 45%, rgba(23, 15, 45, 0.96) 100%);
}
.packages-page .pkg-tile-body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 24px 28px 26px;
}
.packages-page .pkg-tile-name {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--light-00);
  line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Rule + meta share one collapsing container, so the name never shifts
   at rest and the whole block animates with a single transition — same
   technique as .dp-port-card-reveal. */
.packages-page .pkg-tile-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.26s ease 0.04s, margin-top 0.32s ease;
}
.packages-page .pkg-tile:hover .pkg-tile-reveal,
.packages-page .pkg-tile:focus-visible .pkg-tile-reveal {
  max-height: 120px;
  opacity: 1;
  margin-top: 12px;
}
.packages-page .pkg-tile-rule {
  height: 1px;
  width: 34px;
  background: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.packages-page .pkg-tile-blurb {
  font-family: "Work Sans";
  font-size: 14.5px;
  color: var(--pkg-navy-muted);
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
/* Touch: there is no hover, so the meta stays out permanently, same
   fallback as .dp-port-card under (hover: none). */
@media (hover: none) {
  .packages-page .pkg-tile::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(23, 15, 45, 0) 0%, rgba(23, 15, 45, 0.42) 48%, rgba(23, 15, 45, 0.8) 100%);
  }
  .packages-page .pkg-tile-reveal {
    max-height: 120px;
    opacity: 1;
    margin-top: 12px;
  }
}

/* ============================================================
   INCLUSIONS — navy tiled mosaic, five across.
   Same visual treatment as the "What's included" panel on the Groups
   page (.gp-inc-* in groups.css): a navy band whose items are laid out
   on a 2px grid over a translucent white backing, clipped by a 14px
   radius so the row reads as ONE tiled panel instead of five loose
   cards. Classes stay pkg-* (this sheet's convention); only the values
   are shared with Groups, so the two panels look like one component.
   Padding is a touch tighter than Groups' (24px/18px vs 28px/22px):
   five columns inside .pkg-inner's 1200px are narrower than Groups'
   four.
   ============================================================ */
/* Fixed navy ground — opted out of the white/gray alternation above,
   exactly like .pkg-trust-footer. */
/* Same gradient as .pkg-hero / .pkg-trust-footer, byte-identical — the three
   navy sections on this page read as one recurring surface, not three
   different navy tints that happen to be close. */
.packages-page .pkg-inclusions-band { background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%); }
/* Light-on-navy header: same mechanism .pkg-trust-footer uses — a
   descendant override of the shared .pkg-eyebrow / .pkg-section-head h2
   / .pkg-lede rules, no new modifier class in the markup. */
.packages-page .pkg-inclusions-band .pkg-eyebrow { color: var(--pkg-gold); }
.packages-page .pkg-inclusions-band .pkg-section-head h2 { color: var(--light-00); }
.packages-page .pkg-inclusions-band .pkg-lede { color: var(--pkg-navy-muted); }

.packages-page .pkg-inc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
/* 5 -> 3 -> 2. Never 4: five items across four columns orphans one. */
@media (max-width: 1000px) {
  .packages-page .pkg-inc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .packages-page .pkg-inc-grid { grid-template-columns: repeat(2, 1fr); }
}
.packages-page .pkg-inc-item {
  padding: 24px 18px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.2s;
}
.packages-page .pkg-inc-item:hover { background: rgba(255, 255, 255, 0.07); }
/* 44x44 rounded square, dim-gold ground, gold glyph. The glyph itself
   comes from the per-item Icon class on this same span (see
   _Inclusions.cshtml) — this rule only styles the container, so a
   font glyph inherits `color` and an svg/img child is sized below. */
.packages-page .pkg-inc-icon {
  width: 44px;
  height: 44px;
  background: var(--pkg-gold-dim);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--pkg-gold);
  flex-shrink: 0;
}
.packages-page .pkg-inc-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--pkg-gold);
  fill: none;
}
.packages-page .pkg-inc-icon img { width: 22px; height: 22px; }
.packages-page .pkg-inc-title {
  font-family: "Work Sans";
  font-size: 15px;
  font-weight: 600;
  color: var(--light-00);
  margin-bottom: 6px;
}
.packages-page .pkg-inc-body {
  font-family: "Work Sans";
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin: 0;
}
.packages-page .pkg-inclusions-note {
  font-family: "Work Sans";
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--pkg-navy-muted);
  font-style: italic;
}

/* ============================================================
   PACKAGE CARDS + FILTER CHIPS
   The cards are all in the server-rendered HTML; the chips only
   show/hide them, so the catalog stays crawlable.
   ============================================================ */
.packages-page .pkg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.packages-page .pkg-filter {
  font-family: "Work Sans";
  padding: 8px 16px;
  background: var(--light-00);
  border: 1px solid var(--light-20);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-90);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.packages-page .pkg-filter.is-active {
  background: var(--blue-90);
  color: var(--light-00);
  border-color: var(--blue-90);
}
.packages-page .pkg-filter:hover:not(.is-active) { border-color: var(--blue-70); }

.packages-page .pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
/* Exactly two packages: force 2-up instead of a 3-column grid with a
   lopsided gap where the third card would be. Higher specificity than the
   two breakpoints below on purpose — under 1000px they already agree. */
.packages-page .pkg-grid.pkg-grid--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) {
  .packages-page .pkg-grid,
  .packages-page .pkg-grid.pkg-grid--pair { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
  .packages-page .pkg-grid,
  .packages-page .pkg-grid.pkg-grid--pair { grid-template-columns: 1fr; }
}

/* Exactly one package: a horizontal "featured" card spanning the full grid
   width (image left, content right on tablet+) instead of the standard
   vertical tile stretched edge-to-edge. Stacks like a normal card below
   760px — .pkg-card's own column layout is the mobile state, unchanged. */
.packages-page .pkg-card--featured { grid-column: 1 / -1; }
@media (min-width: 760px) {
  /* .pkg-card.pkg-card--featured (both classes chained), not just
     .pkg-card--featured: needs to outrank .packages-page .pkg-card's own
     flex-direction: column at equal specificity, or that later base rule
     wins the cascade and this override is silently ignored. */
  .packages-page .pkg-card.pkg-card--featured { flex-direction: row; align-items: stretch; }
  .packages-page .pkg-card--featured .pkg-card-img {
    /* Flush against the left edge (first flex child, no gap/margin) and
       stretched to the row's full height (align-items: stretch above).
       An explicit flex-basis, not width:auto + aspect-ratio: a flex item
       sized off its own stretched cross-size is under-specified enough
       that browsers routinely collapse it to 0 before the row's height is
       resolved — this is the reliable version, same as the vertical
       card's image just rotated onto the left edge. */
    flex: 0 0 42%;
    aspect-ratio: auto;
    min-height: 220px;
    background-size: cover;
    background-position: center;
  }
  .packages-page .pkg-card--featured .pkg-card-body {
    justify-content: center;
    padding: 32px 40px;
  }
  .packages-page .pkg-card--featured .pkg-card-title { font-size: 26px; }
  .packages-page .pkg-card--featured .pkg-card-desc { font-size: 15.5px; }
  .packages-page .pkg-card--featured .main-button { align-self: flex-start; width: auto; padding-left: 32px; padding-right: 32px; }
}
/* Hidden by the chip filter. A class, not an inline style, so the filter
   never has to remember what `display` the card originally had. */
.packages-page .pkg-card.is-filtered-out { display: none; }

.packages-page .pkg-card {
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: var(--pkg-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.packages-page .pkg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(41, 51, 88, 0.12);
}
.packages-page .pkg-card-img {
  aspect-ratio: 16 / 9;
  background-color: var(--light-15);
  background-size: cover;
  background-position: center;
}
.packages-page .pkg-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.packages-page .pkg-card-eyebrow {
  font-family: "Work Sans";
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-70);
  margin-bottom: 6px;
}
.packages-page .pkg-card-title {
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-90);
  margin-bottom: 8px;
  line-height: 1.25;
}
.packages-page .pkg-card-badge {
  display: inline-block;
  background: var(--pkg-gold);
  color: var(--blue-90);
  font-family: "Work Sans";
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.packages-page .pkg-card-price {
  font-family: "Urbanist", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-90);
  margin-bottom: 12px;
}
.packages-page .pkg-card-price small {
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-70);
}
.packages-page .pkg-card-desc {
  font-family: "Work Sans";
  font-size: 14.5px;
  color: var(--dark-70);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.packages-page .pkg-card-ports {
  font-family: "Work Sans";
  font-size: 13px;
  color: var(--dark-70);
  margin-bottom: 16px;
}
.packages-page .pkg-card-ports strong { color: var(--blue-90); font-weight: 600; }
.packages-page .pkg-card .pkg-btn { width: 100%; }

/* ============================================================
   REVIEWS — the Trustpilot embed (third-party trust, not crawlable)
   above native on-page quotes (crawlable, the SEO/AIO half).
   ============================================================ */
.packages-page .pkg-trustpilot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 20px 26px;
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: var(--pkg-radius);
  margin-bottom: 26px;
}
.packages-page .pkg-trustpilot-score {
  font-family: "Urbanist", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1;
}
.packages-page .pkg-trustpilot-stars {
  display: flex;
  gap: 3px;
  color: #00b67a;
}
.packages-page .pkg-trustpilot-stars svg { width: 20px; height: 20px; }
.packages-page .pkg-trustpilot-meta {
  font-family: "Work Sans";
  font-size: 14px;
  color: var(--dark-70);
}
.packages-page .pkg-trustpilot-meta strong { color: var(--blue-90); }
.packages-page .pkg-trustpilot-logo {
  margin-left: auto;
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #00b67a;
}
.packages-page .pkg-trustpilot { margin-bottom: 26px; }
.packages-page .pkg-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .packages-page .pkg-reviews { grid-template-columns: 1fr; }
}
.packages-page .pkg-review {
  padding: 26px;
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: var(--pkg-radius);
  display: flex;
  flex-direction: column;
}
.packages-page .pkg-review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  color: #00b67a;
}
.packages-page .pkg-review-stars svg { width: 16px; height: 16px; }
.packages-page .pkg-review-quote {
  font-family: "Work Sans";
  font-size: 15px;
  color: var(--blue-90);
  line-height: 1.62;
  margin: 0 0 16px;
  flex: 1;
}
.packages-page .pkg-review-meta {
  font-family: "Work Sans";
  font-size: 13.5px;
  color: var(--dark-70);
  border-top: 1px solid var(--light-15);
  padding-top: 14px;
}
.packages-page .pkg-review-meta strong {
  color: var(--blue-90);
  display: block;
  margin-bottom: 2px;
}

/* ============================================================
   GUARANTEES — the "two promises" pattern
   ============================================================ */
/* Visual treatment ported from the destination page's "Signature
   Experiences" cards (.dp-experience-card): outlined light card with a thin
   blue accent rule at the top-left and an editorial, intro-sized heading —
   so the two promises read as features rather than boxed callouts. Same
   shared globals.css tokens on both pages, so the two stay in step. */
.packages-page .pkg-promises {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 767px) {
  .packages-page .pkg-promises { grid-template-columns: 1fr; }
}
.packages-page .pkg-promise {
  position: relative;
  background-color: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 14px;
  padding: 30px 26px 28px;
}
.packages-page .pkg-promise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 36px;
  height: 3px;
  background: var(--blue-70);
  border-radius: 0 0 2px 2px;
}
.packages-page .pkg-promise-title {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(21px, 2.2vw, 25px);
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.25;
  margin: 14px 0 10px;
}
.packages-page .pkg-promise-body {
  font-family: "Work Sans";
  font-size: 15px;
  color: var(--dark-70);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   WHY BUNDLE — the savings ledger
   One ruled panel read as an itemized booking receipt: a key column, the
   claim, and a right-aligned figure per row. Same 14px radius / hairline
   border as .pkg-promise above, so the two light panels are one family.
   ============================================================ */
.packages-page .pkg-ledger {
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 14px;
  overflow: hidden;
}
.packages-page .pkg-ledger-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 148px;
  align-items: start;
  gap: 24px;
  padding: 26px 30px;
  border-top: 1px solid var(--light-15);
}
.packages-page .pkg-ledger-row:first-child { border-top: 0; }

.packages-page .pkg-ledger-key {
  font-family: "Work Sans";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-30);
  padding-top: 6px;
}
.packages-page .pkg-ledger-title {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.25;
  color: var(--blue-90);
  margin: 0 0 8px;
}
.packages-page .pkg-ledger-body {
  font-family: "Work Sans";
  font-size: 15px;
  line-height: 1.65;
  color: var(--dark-70);
  margin: 0;
  max-width: 60ch;
}
.packages-page .pkg-ledger-amount { text-align: right; }
.packages-page .pkg-ledger-figure {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  color: var(--blue-70);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.packages-page .pkg-ledger-unit {
  display: block;
  margin-top: 6px;
  font-family: "Work Sans";
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-30);
  line-height: 1.35;
}

@media (max-width: 860px) {
  .packages-page .pkg-ledger-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "key amount" "claim claim";
    row-gap: 12px;
  }
  .packages-page .pkg-ledger-key { grid-area: key; padding-top: 0; }
  .packages-page .pkg-ledger-amount { grid-area: amount; }
  .packages-page .pkg-ledger-figure { font-size: 28px; }
  .packages-page .pkg-ledger-claim { grid-area: claim; }
}
@media (max-width: 480px) {
  .packages-page .pkg-ledger-row { padding: 22px 20px; }
  .packages-page .pkg-ledger-unit { white-space: normal; }
}

/* ============================================================
   THE CROSSROADS — cross-sell directory closing both the hub and every
   regional page (Region.cshtml). A masthead row of unequal columns divided
   by hairlines, not cards. The partial can hand this 1-4 items (a regional
   page's "other regions" list can be as short as the single fixed "back to
   hub" tile), so the column template is picked per actual item count via
   .pkg-crossroads--1 through --4 rather than assuming 3 or 4 and leaving
   the rest of the row empty. Each keeps the same descending-width
   character as the original 3-column 1.15/1/0.85 masthead ratio, scaled to
   however many columns there actually are.
   ============================================================ */
.packages-page .pkg-crossroads-section .pkg-section-head { margin-bottom: 26px; }
.packages-page .pkg-crossroads-section .pkg-section-head h2 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 0; }

.packages-page .pkg-crossroads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  column-gap: 0;
}
.packages-page .pkg-crossroads--1 { grid-template-columns: 1fr; }
/* Lone item: still a left-aligned masthead column, not a banner stretched
   across the whole section — a single link is a narrow read, same measure
   discipline as .pkg-crossroads-body's own max-width: 34ch. */
.packages-page .pkg-crossroads--1 .pkg-crossroads-item { max-width: 420px; }
.packages-page .pkg-crossroads--2 { grid-template-columns: 1.15fr 1fr; }
.packages-page .pkg-crossroads--3 { grid-template-columns: 1.15fr 1fr 0.85fr; }
.packages-page .pkg-crossroads--4 { grid-template-columns: 1.1fr 1fr 1fr 0.85fr; }
.packages-page .pkg-crossroads-item {
  position: relative;
  padding: 20px clamp(20px, 2.4vw, 36px) 0;
  border-top: 2px solid var(--light-15);
  transition: border-top-color 0.2s;
}
.packages-page .pkg-crossroads-item:first-child { padding-left: 0; }
.packages-page .pkg-crossroads-item:last-child  { padding-right: 0; }
.packages-page .pkg-crossroads-item + .pkg-crossroads-item { border-left: 1px solid var(--light-15); }
.packages-page .pkg-crossroads-item:hover,
.packages-page .pkg-crossroads-item:focus-within { border-top-color: var(--blue-70); }

.packages-page .pkg-crossroads-who {
  display: block;
  font-family: "Work Sans"; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark-30); margin-bottom: 10px;
}
.packages-page .pkg-crossroads-title {
  font-family: "Urbanist", sans-serif; font-weight: 700;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.25;
  margin: 0 0 8px;
}
.packages-page .pkg-crossroads-link { color: var(--blue-90); text-decoration: none; }
.packages-page .pkg-crossroads-link::after { content: ""; position: absolute; inset: 0; }
.packages-page .pkg-crossroads-item:hover .pkg-crossroads-link,
.packages-page .pkg-crossroads-link:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--blue-70);
}
.packages-page .pkg-crossroads-body {
  font-family: "Work Sans"; font-size: 14.5px; line-height: 1.6;
  color: var(--dark-70); margin: 0; padding-bottom: 4px; max-width: 34ch;
}

@media (max-width: 880px) {
  .packages-page .pkg-crossroads { grid-template-columns: 1fr; }
  .packages-page .pkg-crossroads-item { padding: 18px 0 22px; }
  .packages-page .pkg-crossroads-item + .pkg-crossroads-item { border-left: 0; }
  .packages-page .pkg-crossroads-body { max-width: 60ch; }
}

/* ============================================================
   TRUST FOOTER — final navy CTA
   ============================================================ */
.packages-page .pkg-trust-footer {
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
  text-align: center;
}
.packages-page .pkg-trust-footer .pkg-eyebrow { color: var(--pkg-gold); }
.packages-page .pkg-trust-footer h2 {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--light-00);
  line-height: 1.2;
  margin-bottom: 14px;
}
.packages-page .pkg-trust-footer p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--pkg-navy-muted);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 28px;
}

/* ============================================================
   REGIONAL PAGE ONLY — everything below renders on
   Views/V2/Landings/Packages/Region.cshtml. The hub never emits
   these classes, but they live in the same sheet because both
   pages load one stylesheet (spec §3.3).
   ============================================================ */

/* ------------------------------------------------------------
   INTRO PROSE — the region's authoritative paragraphs. Measure
   capped near 760px: this is body copy meant to be read, not a
   lede, and a 1200px line is unreadable.
   ------------------------------------------------------------ */
.packages-page .pkg-intro { max-width: 760px; }
.packages-page .pkg-intro-title {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--blue-90);
  margin: 0 0 16px;
}
.packages-page .pkg-intro p {
  font-family: "Work Sans";
  font-size: 16.5px;
  color: var(--dark-70);
  line-height: 1.7;
  margin: 0 0 14px;
}
.packages-page .pkg-intro p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   COMPARE TABLE — tiers side by side.
   Scrolls horizontally instead of collapsing to stacked blocks:
   a comparison that can only be read one column at a time is not
   a comparison. min-width keeps three tiers legible while the
   wrapper takes the overflow.
   ------------------------------------------------------------ */
.packages-page .pkg-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.packages-page .pkg-compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: var(--pkg-radius-lg);
  overflow: hidden;
}
.packages-page .pkg-compare th,
.packages-page .pkg-compare td {
  font-family: "Work Sans";
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--light-15);
  font-size: 14.5px;
  color: var(--dark-70);
  line-height: 1.5;
}
.packages-page .pkg-compare tr:last-child th,
.packages-page .pkg-compare tr:last-child td { border-bottom: none; }

/* Header row sits on navy, so the gold accent is allowed here. */
.packages-page .pkg-compare thead th {
  background: var(--blue-90);
  color: var(--light-00);
  border-bottom: none;
  vertical-align: bottom;
}
.packages-page .pkg-compare-corner { background: var(--blue-90); }
.packages-page .pkg-compare-tier {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--light-00);
  line-height: 1.2;
  margin-bottom: 6px;
}
.packages-page .pkg-compare-tier a { color: var(--light-00); text-decoration: none; }
.packages-page .pkg-compare-tier a:hover { color: var(--pkg-gold-soft); }
.packages-page .pkg-compare-price {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pkg-gold);
  line-height: 1.1;
}
.packages-page .pkg-compare-price small {
  display: block;
  font-family: "Work Sans";
  font-size: 12px;
  font-weight: 500;
  color: var(--pkg-navy-muted);
  margin-top: 2px;
}
.packages-page .pkg-compare-badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 8px;
  border-radius: 100px;
  background: var(--pkg-gold);
  color: var(--blue-90);
  font-family: "Work Sans";
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
/* The pill is an anchor when the package has a detail URL. It keeps the gold
   chip's own color rather than the sheet-wide link color, so the promoted tier
   reads as a button; the hover only lightens the fill to the palette's soft
   gold, since anything that moves or resizes would shift the whole column
   header and with it every cell below it. */
.packages-page a.pkg-compare-badge {
  text-decoration: none;
  color: var(--blue-90);
  transition: background-color 0.15s ease;
}
.packages-page a.pkg-compare-badge:hover,
.packages-page a.pkg-compare-badge:focus-visible {
  background: var(--pkg-gold-soft);
  color: var(--blue-90);
}

/* Row label column */
.packages-page .pkg-compare tbody th {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-90);
  background: var(--light-10);
  white-space: nowrap;
}

/* The highlighted tier — derived from the card that carries a Badge,
   so the tint always lands on the same column as the pill. */
.packages-page .pkg-compare td.is-featured { background: rgba(200, 161, 75, 0.07); }
.packages-page .pkg-compare thead th.is-featured { background: var(--blue-80); }

/* ------------------------------------------------------------
   SEASONALITY — "when to sail", plus the booking window as a
   SEPARATE callout below the grid. The two answer different
   questions and must not read as one block (strategy 5.7).
   ------------------------------------------------------------ */
.packages-page .pkg-seasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.packages-page .pkg-season {
  padding: 26px 24px;
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: var(--pkg-radius);
}
.packages-page .pkg-season-label {
  font-family: "Work Sans";
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.3;
  margin-bottom: 8px;
}
.packages-page .pkg-season-body {
  font-family: "Work Sans";
  font-size: 14.5px;
  color: var(--dark-70);
  line-height: 1.6;
  margin: 0;
}

/* Calm editorial statement, not a countdown — same soft blue panel as the
   destination page's "book early" runway. Light ground on purpose: the
   season cards above and this callout both sell reassurance, not a CTA, so
   neither gets the navy/gold conversion treatment used elsewhere on the page. */
.packages-page .pkg-book-window {
  margin-top: 28px;
  background-color: var(--blue-05);
  border-radius: var(--pkg-radius-lg);
  padding: clamp(36px, 5vw, 56px) clamp(36px, 5vw, 64px);
}
.packages-page .pkg-book-window .pkg-eyebrow { margin-bottom: 12px; }
.packages-page .pkg-book-window-title {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--blue-90);
  margin: 0;
  max-width: 40ch;
}
.packages-page .pkg-book-window-body {
  font-family: "Work Sans";
  font-size: 16.5px;
  color: var(--dark-70);
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 62ch;
}
.packages-page .pkg-book-window-body strong {
  color: var(--blue-90);
  font-weight: 700;
}

/* .pkg-lines / .pkg-line-chip moved to /content/new/css/cruise-line-tags.css
   (.cruise-line-tags / .cruise-line-tag) — now the shared, page-agnostic
   component rendered via Views/V2/Shared/_CruiseLineTags.cshtml. */

/* ------------------------------------------------------------
   EXPANSION CALLOUT — "more itineraries coming". Gold left-border
   aside, the same treatment .pkg-book-window uses, so the page has
   one visual language for "read this aside".
   ------------------------------------------------------------ */
.packages-page .pkg-expansion {
  max-width: 820px;
  padding: 28px 32px;
  background: var(--light-00);
  border-left: 4px solid var(--pkg-gold);
  border-radius: 0 var(--pkg-radius) var(--pkg-radius) 0;
}
.packages-page .pkg-expansion h2 {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--blue-90);
  line-height: 1.2;
  margin: 0 0 12px;
}
.packages-page .pkg-expansion p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.7;
  margin: 0 0 18px;
}