/* ==========================================================================
   SIGNATURE ACCESS, the premium access layer.

   Three surfaces, one visual language: THE SITE'S OWN:

     1. `.home-page .sig-section`, the homepage chapter (welcome.html)
     2. `.xp-page  .sigx-strip`, the strip on /experiences
     3. `.sigx-page`, the editorial session page
                                      (signature_experience.html)

   Design system: identical to the rest of Hangout Buddy. Manrope for every
   glyph, the base.html palette (--ink, --blue, --gold, --orange, --canvas,
   --line, --shadow), white cards with hairline borders, and the site's
   blue→orange primary action. Gold appears only as the thin "signature"
   hairline and small premium accents. Dark bands use the same deep navy
   family the Premier chapter already ships, never a new colour world.

   Image policy: photographs are served through srcset at (at least) 1.5×
   their largest rendered size and are NEVER scaled up by CSS, no zoom
   effects on the pictures themselves. Hover feedback lifts the card and
   deepens the shadow instead, so the photography stays pixel-sharp.

   Motion: transform/opacity entrance reveals, one slow hero settle (the
   2560px asset carries the headroom), lift-on-hover, all disabled under
   prefers-reduced-motion.

   Lives in static/ because static/ is volume-mounted in docker-compose,
   a styling change reaches production without rebuilding the image.
   ========================================================================== */

.home-page .sig-section,
.xp-page .sigx-strip,
.sigx-page {
    --sig-gold:      #c89a32;             /* base.html --gold               */
    --sig-gold-soft: #d9b56a;
    --sig-gold-deep: #8a6b1e;             /* gold that passes on white      */
    --sig-navy:      #0d1330;             /* Premier's navy family          */
    --sig-navy-2:    #131a3e;
    --sig-navy-3:    #1b2350;
    --sig-ivory:     #f3efe4;
    --sig-navy-muted:#97a3c6;
    --sig-line-gold: rgba(200, 154, 50, 0.45);
    --sig-line-nav:  rgba(151, 173, 233, 0.22);
    --sig-grad-cta:  linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
    --sig-grad-gold: linear-gradient(120deg, #c89a32 0%, #d9b56a 100%);
}

/* ==========================================================================
   1. HOMEPAGE CHAPTER.home-page .sig-section
   A light chapter in the page's own paper, distinguished by editorial
   spacing, real photography and the gold hairline, not by a new colour.
   ========================================================================== */

.home-page .sig-section {
    position: relative;
    padding: var(--h-section-sm, clamp(26px, 3vw, 44px)) var(--h-gutter, clamp(18px, 4vw, 48px));
    background: #fffaf4; /* same paper as the ribbon above */
}

.home-page .sig-shell {
    position: relative;
    margin: 0 auto;
    max-width: 1180px;
}

/* --- chapter head ------------------------------------------------------- */

.home-page .sig-head {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.home-page .sig-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--surface-warm);
    border: 1px solid rgba(200, 154, 50, 0.35);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sig-gold-deep);
}

.home-page .sig-kicker::before {
    content: '\f3a5';  /* fa-gem */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--sig-gold);
}

.home-page .sig-title {
    margin: 16px 0 0;
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.home-page .sig-title em {
    font-style: normal;
    background: var(--sig-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-page .sig-lead {
    margin: 14px auto 0;
    max-width: 56ch;
    font-size: clamp(0.97rem, 1.3vw, 1.05rem);
    line-height: 1.65;
    color: var(--muted);
}

/* --- the session card --------------------------------------------------- */

.home-page .sig-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    margin-top: clamp(26px, 3.2vw, 40px);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.home-page .sig-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(30, 79, 145, 0.18);
}

/* The signature: one gold hairline along the top of the card. */
.home-page .sig-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(90deg, transparent 2%,
        var(--sig-line-gold) 28%, var(--sig-gold-soft) 50%,
        var(--sig-line-gold) 72%, transparent 98%);
}

.home-page .sig-card-media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: #10131c;
}

.home-page .sig-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* asset is 1600w for a ~620px slot, never upscaled */
}

.home-page .sig-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(10, 16, 30, 0.25);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

.home-page .sig-card-badge i { color: var(--sig-gold); }

.home-page .sig-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding: clamp(26px, 3vw, 42px);
}

.home-page .sig-card-place {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.home-page .sig-card-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.home-page .sig-card-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 48ch;
}

.home-page .sig-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 2px 0 0;
    list-style: none;
}

.home-page .sig-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue);
}

.home-page .sig-card-meta i {
    font-size: 0.74rem;
    color: var(--sig-gold);
}

/* The one line that keeps it honest, always visible, never shouted. */
.home-page .sig-card-note {
    margin: 2px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--muted);
}

.home-page .sig-card-note i {
    margin-right: 7px;
    color: var(--sig-gold);
}

.home-page .sig-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.home-page .sig-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--sig-grad-cta);
    color: #fff;
    font-weight: 800;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-page .sig-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(30, 79, 145, 0.3);
}

.home-page .sig-btn i { transition: transform 0.35s ease; }
.home-page .sig-btn:hover i { transform: translateX(4px); }

.home-page .sig-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.home-page .sig-link:hover {
    color: var(--blue-deep);
    border-color: var(--sig-gold);
}

/* --- the promise row ---------------------------------------------------- */

.home-page .sig-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
    margin-top: clamp(20px, 2.6vw, 30px);
}

.home-page .sig-point {
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-page .sig-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(30, 79, 145, 0.12);
}

.home-page .sig-point strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
}

.home-page .sig-point strong i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface-warm);
    color: var(--sig-gold-deep);
    font-size: 0.8rem;
}

.home-page .sig-point span {
    display: block;
    margin-top: 8px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--muted);
}

/* --- entrance motion (signature.js adds .sig-in) ------------------------ */

.home-page .sig-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.home-page .sig-reveal.sig-in {
    opacity: 1;
    transform: none;
}

.home-page .sig-reveal:nth-child(2) { transition-delay: 0.1s; }
.home-page .sig-reveal:nth-child(3) { transition-delay: 0.2s; }

/* --- homepage responsive ------------------------------------------------ */

@media (max-width: 900px) {
    .home-page .sig-card { grid-template-columns: 1fr; }
    .home-page .sig-card-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .home-page .sig-card-media img { position: static; height: 100%; }
    .home-page .sig-points { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .home-page .sig-head { text-align: left; }
    .home-page .sig-lead { margin-left: 0; }
    .home-page .sig-card-actions .sig-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   2. /EXPERIENCES STRIP.xp-page .sigx-strip
   A white premium card above the catalogue grid, in the explore page's own
   idiom (warm kicker pill, soft-blue tags, blue→orange action).
   ========================================================================== */

.xp-page .sigx-strip {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    margin: 26px 0 34px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.xp-page .sigx-strip:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(30, 79, 145, 0.16);
}

.xp-page .sigx-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(90deg, transparent 2%,
        var(--sig-line-gold) 30%, var(--sig-gold-soft) 50%,
        var(--sig-line-gold) 70%, transparent 98%);
}

.xp-page .sigx-strip-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: clamp(24px, 3.2vw, 42px);
}

.xp-page .sigx-strip-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface-warm);
    border: 1px solid rgba(200, 154, 50, 0.35);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sig-gold-deep);
}

.xp-page .sigx-strip-kicker::before {
    content: '\f3a5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.66rem;
    color: var(--sig-gold);
}

.xp-page .sigx-strip-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.xp-page .sigx-strip-text {
    margin: 0;
    max-width: 54ch;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--muted);
}

.xp-page .sigx-strip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.xp-page .sigx-tag {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--blue);
    white-space: nowrap;
}

.xp-page .sigx-strip-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.xp-page .sigx-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--sig-grad-cta);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.xp-page .sigx-strip-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(30, 79, 145, 0.3);
}

.xp-page .sigx-strip-meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.xp-page .sigx-strip-meta i { color: var(--sig-gold); }

.xp-page .sigx-strip-note {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.xp-page .sigx-strip-note i {
    margin-right: 6px;
    color: var(--sig-gold);
}

.xp-page .sigx-strip-media {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background: #10131c;
}

.xp-page .sigx-strip-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 1600w asset in a ~620px slot, never upscaled */
}

@media (max-width: 820px) {
    .xp-page .sigx-strip { grid-template-columns: 1fr; }
    .xp-page .sigx-strip-media {
        order: -1;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .xp-page .sigx-strip-media img { position: static; height: 100%; }
    .xp-page .sigx-strip-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   3. THE SESSION PAGE.sigx-page (signature_experience.html)
   ========================================================================== */

.sigx-page {
    background: var(--canvas);
    color: var(--ink);
}

.sigx-page .sigx-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 40px);
}

/* --- hero ---------------------------------------------------------------- */

.sigx-hero {
    position: relative;
    min-height: clamp(480px, 72vh, 680px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0a0f1c;
    color: #fff;
}

.sigx-hero-media {
    position: absolute;
    inset: 0;
}

.sigx-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 2560w asset, full retina headroom for the settle */
    /* Softly blurred on purpose: the hero is an ambient backdrop so the
       headline stays effortlessly readable. The crisp photography lives in
       the journey stills and the gallery below. The slight permanent scale
       hides the blur's soft edges. */
    filter: blur(10px) brightness(0.92);
    transform: scale(1.06);
    animation: sigx-settle 16s ease-out forwards;
}

@keyframes sigx-settle {
    from { transform: scale(1.12); }
    to   { transform: scale(1.06); }
}

/* Neutral ink veil, no colour cast over the stones. */
.sigx-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(6deg, rgba(8, 12, 24, 0.9) 0%, rgba(8, 12, 24, 0.5) 42%, rgba(8, 12, 24, 0.22) 100%);
}

.sigx-hero-body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(120px, 18vh, 180px) clamp(18px, 4vw, 40px) clamp(38px, 5vh, 64px);
}

.sigx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.sigx-kicker i { color: var(--sig-gold-soft); }

.sigx-hero h1 {
    margin: 18px 0 0;
    max-width: 17ch;
    font-size: clamp(2rem, 5vw, 3.3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
}

.sigx-hero-prop {
    margin: 16px 0 0;
    max-width: 56ch;
    font-size: clamp(1rem, 1.5vw, 1.13rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.sigx-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
}

.sigx-hero-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sigx-hero-meta i {
    color: var(--sig-gold-soft);
    font-size: 0.8rem;
}

.sigx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.sigx-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--sig-grad-cta);
    color: #fff;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sigx-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(30, 79, 145, 0.45);
}

.sigx-cta i { transition: transform 0.35s ease; }
.sigx-cta:hover i { transform: translateX(4px); }

.sigx-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.sigx-cta-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sigx-hero-promise {
    margin: 14px 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
}

.sigx-hero-promise i {
    margin-right: 6px;
    color: var(--sig-gold-soft);
}

/* --- facts band ---------------------------------------------------------- */

.sigx-facts {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.sigx-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--line);
}

.sigx-fact {
    padding: 20px 22px;
    background: var(--surface);
}

.sigx-fact dt {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.sigx-fact dd {
    margin: 7px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.sigx-fact dd small {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
}

/* --- shared section chrome ---------------------------------------------- */

.sigx-section {
    padding: clamp(48px, 7vw, 88px) 0;
}

.sigx-section + .sigx-section {
    padding-top: 0;
}

.sigx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sig-gold-deep);
}

.sigx-eyebrow::before {
    content: '';
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--sig-grad-gold);
}

.sigx-h2 {
    margin: 14px 0 0;
    font-size: clamp(1.5rem, 2.8vw, 2.15rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.sigx-sub {
    margin: 12px 0 0;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- the journey --------------------------------------------------------- */

.sigx-journey {
    display: grid;
    gap: 0;
    margin-top: clamp(28px, 3.6vw, 44px);
}

.sigx-step {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 6px clamp(16px, 2.4vw, 30px);
    padding: clamp(20px, 2.6vw, 30px) 0 clamp(22px, 2.8vw, 32px);
    border-top: 1px solid var(--line);
}

.sigx-step-num {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: var(--sig-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sigx-step h3 {
    margin: 4px 0 0;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.sigx-step p {
    grid-column: 2;
    margin: 8px 0 0;
    max-width: 64ch;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--muted);
}

/* Editorial image pair inside the journey section. */
.sigx-journey-media {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(12px, 1.8vw, 20px);
    margin: clamp(26px, 3.4vw, 40px) 0 0;
}

.sigx-journey-media figure {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: #10131c;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sigx-journey-media figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(30, 79, 145, 0.18);
}

.sigx-journey-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;   /* 1200w asset in a ~620px slot, never upscaled */
}

.sigx-journey-media figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 16px 12px;
    background: linear-gradient(0deg, rgba(8, 12, 24, 0.72), transparent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

/* --- host, the site's own deep navy, same family as Premier ------------- */

.sigx-host {
    background:
        radial-gradient(120% 70% at 50% -12%, rgba(63, 90, 175, 0.3), transparent 55%),
        linear-gradient(178deg, var(--sig-navy) 0%, var(--sig-navy-2) 48%, var(--sig-navy-3) 100%);
    color: var(--sig-ivory);
    border-top: 1px solid var(--sig-line-gold);
}

.sigx-host .sigx-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding-top: clamp(48px, 7vw, 88px);
    padding-bottom: clamp(48px, 7vw, 88px);
}

.sigx-host-figure {
    margin: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(5, 8, 20, 0.45);
}

.sigx-host-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;   /* 1200w+1920w srcset for a ~430px slot */
}

.sigx-host-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(243, 239, 228, 0.16);
    border-radius: 16px;
    pointer-events: none;
}

.sigx-host .sigx-eyebrow { color: var(--sig-gold-soft); }
.sigx-host .sigx-h2 { color: #fdfcf7; }

.sigx-host-text {
    margin: 16px 0 0;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(243, 239, 228, 0.84);
}

.sigx-partner {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--sig-line-nav);
    border-left: 2px solid var(--sig-gold);
    border-radius: 12px;
    background: rgba(52, 74, 148, 0.16);
}

.sigx-partner strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fdfcf7;
}

.sigx-partner em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sig-gold-soft);
}

.sigx-partner p {
    margin: 10px 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--sig-navy-muted);
}

/* --- discover + buddy role ---------------------------------------------- */

.sigx-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3.4vw, 44px);
    margin-top: clamp(26px, 3.4vw, 40px);
}

.sigx-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.sigx-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink);
}

.sigx-list li i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--sig-gold);
}

.sigx-panel {
    padding: clamp(22px, 2.8vw, 32px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.sigx-panel h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.sigx-panel h3 i { color: var(--sig-gold); font-size: 0.95rem; }

.sigx-panel .sigx-list li i { color: var(--blue); }

.sigx-promise {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--surface-soft);
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 700;
    color: var(--blue);
}

.sigx-promise i { margin-right: 8px; }

/* --- included / not included -------------------------------------------- */

.sigx-list-x li i { color: var(--orange); }

/* --- disclosure callout -------------------------------------------------- */

.sigx-disclosure {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: clamp(26px, 3.4vw, 40px);
    padding: clamp(20px, 2.6vw, 28px);
    border: 1px solid var(--sig-line-gold);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(200, 154, 50, 0.08), rgba(30, 79, 145, 0.05));
}

.sigx-disclosure i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 1.1rem;
    color: var(--sig-gold);
}

.sigx-disclosure p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--ink);
}

.sigx-disclosure p strong { font-weight: 800; }

/* --- gallery -------------------------------------------------------------- */

.sigx-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 18px);
    margin-top: clamp(26px, 3.4vw, 40px);
}

.sigx-gallery figure {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(30, 79, 145, 0.08);
    background: #10131c;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sigx-gallery figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(30, 79, 145, 0.16);
}

.sigx-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;   /* 700w+1200w srcset for a ~340px cell */
}

/* --- good to know / faq --------------------------------------------------- */

.sigx-faq {
    margin-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--line);
}

.sigx-faq details {
    border-bottom: 1px solid var(--line);
}

.sigx-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 2px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color 0.3s ease;
}

.sigx-faq summary:hover { color: var(--blue); }
.sigx-faq summary::-webkit-details-marker { display: none; }

.sigx-faq summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sig-gold);
    transition: transform 0.3s ease;
}

.sigx-faq details[open] summary::after { transform: rotate(45deg); }

.sigx-faq details p {
    margin: 0;
    padding: 0 2px 18px;
    max-width: 68ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- final CTA band ------------------------------------------------------- */

.sigx-final {
    background:
        radial-gradient(80% 90% at 50% 120%, rgba(63, 90, 175, 0.32), transparent 60%),
        linear-gradient(172deg, var(--sig-navy) 0%, var(--sig-navy-3) 100%);
    color: var(--sig-ivory);
    text-align: center;
    border-top: 1px solid var(--sig-line-gold);
}

.sigx-final .sigx-inner {
    padding-top: clamp(52px, 8vw, 92px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

.sigx-final .sigx-eyebrow {
    justify-content: center;
    color: var(--sig-gold-soft);
}

.sigx-final .sigx-eyebrow::before { display: none; }

.sigx-final .sigx-h2 {
    color: #fdfcf7;
    margin-left: auto;
    margin-right: auto;
    max-width: 24ch;
}

.sigx-final .sigx-sub {
    margin-left: auto;
    margin-right: auto;
    color: rgba(243, 239, 228, 0.8);
}

.sigx-final .sigx-hero-actions { justify-content: center; }

/* On navy, the premium action is the site's gold accent, like Premier's. */
.sigx-final .sigx-cta {
    background: var(--sig-grad-gold);
    color: #241a06;
}

.sigx-final .sigx-cta:hover {
    box-shadow: 0 16px 38px rgba(200, 154, 50, 0.4);
}

.sigx-final .sigx-hero-promise { color: rgba(243, 239, 228, 0.72); }

/* --- sticky mobile CTA ---------------------------------------------------- */

.sigx-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(30, 79, 145, 0.12);
    transform: translateY(110%);
    transition: transform 0.4s ease;
}

.sigx-sticky.sigx-sticky-on { transform: none; }

.sigx-sticky .sigx-cta {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
}

/* --- responsive + motion safety ------------------------------------------ */

@media (max-width: 900px) {
    .sigx-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sigx-host .sigx-inner { grid-template-columns: 1fr; }
    .sigx-host-figure { max-width: 480px; }
    .sigx-cols { grid-template-columns: 1fr; }
    .sigx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .sigx-hero { min-height: 66vh; }
    .sigx-hero-actions .sigx-cta,
    .sigx-hero-actions .sigx-cta-ghost {
        width: 100%;
        justify-content: center;
    }
    .sigx-step { grid-template-columns: 52px minmax(0, 1fr); }
    .sigx-journey-media { grid-template-columns: 1fr; }
    .sigx-journey-media img { aspect-ratio: 4 / 3; }
    .sigx-sticky { display: block; }
    /* Never let the sticky bar cover the final CTA. */
    .sigx-final { scroll-margin-bottom: 80px; }
    .sigx-final .sigx-inner { padding-bottom: calc(clamp(56px, 8vw, 96px) + 62px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .sig-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .sigx-hero-media img { animation: none; }
    .home-page .sig-card,
    .home-page .sig-point,
    .xp-page .sigx-strip,
    .sigx-journey-media figure,
    .sigx-gallery figure {
        transition: none;
    }
    .sigx-sticky { transition: none; }
}