/* BEACON 2027 — home page styles
   Modular split of the home5 template. Originally prototyped in
   "Beacon Revised.html". Re-prefixed with h5- so it can sit alongside
   the rest of the site's CSS without selector collisions.

   Token layer (CSS variables) at the top — change a token to retheme
   everywhere it's used. Section-level styles below, grouped by feature.
*/

/* ────────────────────────────────────────────────────────────
   BEACON 2027 — revised home
   Notes inline call out what changed vs. the original home5.css
   ──────────────────────────────────────────────────────────── */

:root {
    /* palette — unchanged */
    --h5-bg:        #090e1a;
    --h5-bg-2:      #0c1320;          /* new — used to separate dark sections from page bg */
    --h5-bg-3:      #0e1828;          /* third tier — keeps adjacent sections distinct */
    --h5-surface:   #121b2c;          /* lifted from #0f1826 so cards read as cards */
    --h5-surface-2: #182338;          /* hover/active surface */
    --h5-border:    rgba(255,255,255,0.08);
    --h5-border-2:  rgba(255,255,255,0.14);
    --h5-yellow:    #FFBA53;
    --h5-orange:    #FF6842;
    --h5-blue:      #249BD7;
    --h5-white:     #EDE9E4;
    --h5-dim:       #6b7d99;           /* slightly lifted from #5e6e88 for readability */
    --h5-mid:       #9aadc6;           /* lifted from #8a9bb5 */

    --h5-glow-y:    0 0 14px rgba(255,186,83,0.65), 0 0 40px rgba(255,186,83,0.18);
    --h5-glow-b:    0 0 14px rgba(36,155,215,0.65), 0 0 40px rgba(36,155,215,0.18);
    --h5-glow-o:    0 0 14px rgba(255,104,66,0.65), 0 0 40px rgba(255,104,66,0.18);

    /* typography — CHANGED:
       body now Manrope, mono reserved for labels/specs/eyebrows */
    --h5-font-body:    'Manrope', system-ui, sans-serif;
    --h5-font-display: 'Kanit', 'Manrope', sans-serif;
    --h5-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Scoped to .h5-wrap so the rest of the host site keeps its body styles.
   The single html/body rule below just paints the page bg to match. */
html, body { background: var(--h5-bg); }

.h5-wrap {
    color: var(--h5-white);
    font-family: var(--h5-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.h5-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 4rem);
}

/* dot grid — same as original */
.h5-dot-bg {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(36,155,215,0.13) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
}

/* ───────── Buttons ───────── */
.h5-btn {
    font-family: var(--h5-font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    padding: 0.95rem 2.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
    line-height: 1;
}

.h5-btn-primary {
    background: var(--h5-yellow);
    color: var(--h5-bg);
    box-shadow: var(--h5-glow-y);
}
.h5-btn-primary:hover {
    background: #ffc96b;
    box-shadow: 0 0 28px rgba(255,186,83,0.85), 0 0 60px rgba(255,186,83,0.3);
    transform: translateY(-2px);
}

.h5-btn-ghost {
    background: transparent;
    color: var(--h5-mid);
    border: 1px solid var(--h5-border-2);
}
.h5-btn-ghost:hover { border-color: rgba(255,186,83,0.4); color: var(--h5-yellow); }

.h5-btn-outline {
    background: transparent;
    color: var(--h5-yellow);
    border: 1px solid rgba(255,186,83,0.5);
}
.h5-btn-outline:hover {
    background: rgba(255,186,83,0.08);
    box-shadow: var(--h5-glow-y);
    transform: translateY(-2px);
}

.h5-btn-sm { padding: 0.65rem 1.25rem; font-size: 0.7rem; }

/* ─────────────────────────────────────────────────────────────
   NAV — NEW
   sticky, condenses on scroll, anchor links + compact CTA
   ───────────────────────────────────────────────────────────── */
.h5-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: rgba(9,14,26,0.72);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, padding 0.25s ease;
}
.h5-nav.h5-is-stuck { border-color: var(--h5-border); }

.h5-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 68px;
}

.h5-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--h5-white);
    font-family: var(--h5-font-display);
    font-weight: 900;
    letter-spacing: 0.08em;
    font-size: 1.05rem;
}
.h5-nav-brand img {
    display: block;
    height: 32px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255,186,83,0.2));
}

.h5-nav-links {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}
.h5-nav-links a {
    position: relative;
    font-family: var(--h5-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h5-mid);
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.h5-nav-links a:hover { color: var(--h5-yellow); border-color: rgba(255,186,83,0.4); }
.h5-nav-links a.h5-is-active {
    color: var(--h5-yellow);
}
.h5-nav-links a.h5-is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--h5-yellow);
    box-shadow: 0 0 8px rgba(255,186,83,0.7);
}

.h5-nav-cta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.h5-nav-countdown {
    font-family: var(--h5-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--h5-dim);
    padding-right: 0.75rem;
    border-right: 1px solid var(--h5-border);
}
.h5-nav-countdown b { color: var(--h5-yellow); font-weight: 600; }

@media (max-width: 960px) {
    .h5-nav-links { display: none; }
    .h5-nav-countdown { display: none; }
}

/* ── mobile hamburger button ── */
.h5-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--h5-border);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.h5-nav-burger span {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--h5-mid);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}
.h5-nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.h5-nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.h5-nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 960px) { .h5-nav-burger { display: flex; } }

/* ── mobile nav panel ── */
.h5-nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(9,14,26,0.97);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--h5-border);
    z-index: 49;
}
.h5-nav-panel.is-open { display: block; }
.h5-nav-panel a {
    display: block;
    font-family: var(--h5-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h5-mid);
    text-decoration: none;
    padding: 1rem clamp(1.25rem, 4vw, 4rem);
    border-bottom: 1px solid var(--h5-border);
    transition: color 0.2s, background 0.2s;
}
.h5-nav-panel a:last-child { border-bottom: none; }
.h5-nav-panel a:hover,
.h5-nav-panel a:active { color: var(--h5-yellow); background: rgba(255,186,83,0.05); }

/* ─────────────────────────────────────────────────────────────
   HERO — REBALANCED
   The original puts the BEACON wordmark huge + lonely on the left
   and leaves the right half empty. This version uses an asymmetric
   2-column grid: the title/year/tagline/meta on the left, and the
   countdown + early-bird urgency block on the right, both sharing
   the vertical center of the viewport so the page has weight
   distributed across the fold.
   ───────────────────────────────────────────────────────────── */
.h5-hero {
    position: relative;
    z-index: 1;
    padding: 4rem 0 5rem;
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* corner brackets — kept but anchored to the hero-inner box,
   not floating awkwardly in the bottom-right of the page */
.h5-hero::before,
.h5-hero::after {
    content: '';
    position: absolute;
    width: 90px; height: 90px;
    pointer-events: none;
    z-index: 0;
}
.h5-hero::before {
    top: 2rem; left: max(1rem, 4vw);
    border-top: 1px solid rgba(36,155,215,0.45);
    border-left: 1px solid rgba(36,155,215,0.45);
}
.h5-hero::after {
    bottom: 2rem; right: max(1rem, 4vw);
    border-bottom: 1px solid rgba(255,186,83,0.45);
    border-right: 1px solid rgba(255,186,83,0.45);
}

.h5-hero-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
}

@media (max-width: 1024px) {
    .h5-hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* event label above title */
.h5-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--h5-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--h5-yellow);
    margin-bottom: 1.5rem;
}
.h5-hero-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--h5-yellow);
    box-shadow: var(--h5-glow-y);
}

/* hero wordmark — uses the brand PNG (BEACON + lighthouse + glow underline baked in).
   The PNG has ~25% transparent margin on top (lighthouse waves) and ~10% on bottom
   (underline glow). These knobs let nearby text tuck into that empty space so the
   hero composition feels tight rather than padded. Tweak these values to taste. */
.h5-hero-left {
    --h5-eyebrow-overlap: 7.75rem;   /* how far the wordmark pulls UP over the eyebrow */
    --h5-year-overlap:    5.25rem;   /* how far the year pulls UP under the wordmark   */
    --h5-tagline-overlap: 0rem;      /* extra pull on tagline + meta block             */
    --h5-wordmark-width:  109%;      /* size of the BEACON neon — % of left column     */
    --h5-eyebrow-x:       -3.5rem;   /* horizontal nudge for the LAN-festival eyebrow  */
    --h5-wordmark-x:      -4.25rem;  /* horizontal nudge for the BEACON neon           */
    --h5-year-x:          -2.25rem;  /* horizontal nudge for the year                  */
}

.h5-hero-eyebrow {
    position: relative;
    z-index: 2; /* sits over the PNG's transparent top */
    margin-bottom: 0;
    transform: translateX(var(--h5-eyebrow-x, 0));
}

.h5-hero-mark {
    display: block;
    margin: 0;
    line-height: 0;
    position: relative;
    z-index: 1;
}
.h5-hero-wordmark-img {
    display: block;
    width: var(--h5-wordmark-width, 100%);
    max-width: none;
    height: auto;
    margin-top: calc(var(--h5-eyebrow-overlap) * -1);
    margin-bottom: calc(var(--h5-year-overlap) * -1);
    transform: translateX(var(--h5-wordmark-x, 0));
    filter: drop-shadow(0 0 24px rgba(255,186,83,0.22)) drop-shadow(0 0 60px rgba(36,155,215,0.12));
    animation: hero-glow 9s ease-in-out infinite;
}
@keyframes hero-glow {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(255,186,83,0.28)) drop-shadow(0 0 60px rgba(36,155,215,0.15)); }
    33%      { filter: drop-shadow(0 0 24px rgba(36,155,215,0.32)) drop-shadow(0 0 60px rgba(255,186,83,0.15)); }
    66%      { filter: drop-shadow(0 0 24px rgba(255,104,66,0.30)) drop-shadow(0 0 60px rgba(36,155,215,0.15)); }
}

.h5-hero-year {
    display: block;
    font-family: var(--h5-font-display);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.8rem);
    color: var(--h5-dim);
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0 0 1.25rem;
    position: relative;
    z-index: 2;
    transform: translateX(var(--h5-year-x, 0));
}
.h5-hero-tagline,
.h5-hero-meta {
    position: relative;
    z-index: 2;
    transform: translateX(var(--h5-year-x, 0));
}
.h5-hero-tagline { margin-top: calc(var(--h5-tagline-overlap) * -1); }

.h5-hero-tagline {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--h5-mid);
    line-height: 1.55;
    margin: 0 0 1.5rem;
    max-width: 520px;
}
.h5-hero-tagline strong { color: var(--h5-white); font-weight: 600; }

.h5-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    font-family: var(--h5-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h5-mid);
}
.h5-hero-meta-sep { color: var(--h5-yellow); }
.h5-hero-meta strong { color: var(--h5-white); font-weight: 700; }

/* ── Right column: urgency + countdown + CTA — one block ── */
.h5-hero-urgency {
    background: linear-gradient(165deg,
        rgba(36,155,215,0.05) 0%,
        rgba(255,186,83,0.04) 50%,
        rgba(255,104,66,0.05) 100%);
    border: 1px solid var(--h5-border-2);
    border-radius: 10px;
    padding: 1.75rem 1.75rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.h5-hero-urgency::before {
    /* glowing top edge */
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h5-yellow), transparent);
    box-shadow: 0 0 12px rgba(255,186,83,0.6);
}

.h5-urgency-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--h5-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--h5-yellow);
    margin-bottom: 1rem;
}
.h5-urgency-tag .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--h5-yellow);
    box-shadow: var(--h5-glow-y);
    animation: urg-pulse 2s ease-in-out infinite;
}
@keyframes urg-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.4; }
}

.h5-urgency-headline {
    font-family: var(--h5-font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.15;
    color: var(--h5-white);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.h5-urgency-headline em {
    font-style: normal;
    color: var(--h5-yellow);
    text-shadow: 0 0 18px rgba(255,186,83,0.4);
}

.h5-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 1.5rem;
    border-top: 1px solid var(--h5-border);
    border-bottom: 1px solid var(--h5-border);
    padding: 1rem 0;
}
.h5-count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px dashed var(--h5-border);
    padding: 0 0.25rem;
}
.h5-count-item:last-child { border-right: none; }
.h5-count-num {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1;
    color: var(--h5-white);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.h5-count-label {
    font-family: var(--h5-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--h5-dim);
    text-transform: uppercase;
    margin-top: 0.45rem;
}

.h5-urgency-foot {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.h5-urgency-foot .ends {
    font-family: var(--h5-font-mono);
    font-size: 0.78rem;
    color: var(--h5-mid);
    letter-spacing: 0.04em;
}
.h5-urgency-foot .ends b { color: var(--h5-yellow); font-weight: 600; }

.h5-urgency-ctas {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.h5-urgency-ctas .h5-btn-primary { flex: 1 1 auto; justify-content: center; }

/* ─────────────────────────────────────────────────────────────
   STATS BAR — PUNCHIER
   Original was nearly invisible. This version uses a darker
   inset surface, larger numbers, a subtle hover lift, and
   small color-coded ticks so it reads as part of the brand.
   ───────────────────────────────────────────────────────────── */
.h5-stats {
    position: relative;
    z-index: 1;
    background: var(--h5-bg-2);
    border-top: 1px solid var(--h5-border);
    border-bottom: 1px solid var(--h5-border);
}
.h5-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.h5-stat {
    padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem);
    border-right: 1px solid var(--h5-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}
.h5-stat:last-child { border-right: none; }
.h5-stat::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 38px;
    transition: width 0.35s ease;
}
.h5-stat:nth-child(1)::before { background: var(--h5-yellow);  box-shadow: var(--h5-glow-y); }
.h5-stat:nth-child(2)::before { background: var(--h5-blue);    box-shadow: var(--h5-glow-b); }
.h5-stat:nth-child(3)::before { background: var(--h5-orange);  box-shadow: var(--h5-glow-o); }
.h5-stat:nth-child(4)::before { background: var(--h5-yellow);  box-shadow: var(--h5-glow-y); }
.h5-stat:hover::before { width: 100%; }

.h5-stat-num {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 3.8vw, 3.4rem);
    color: var(--h5-white);
    line-height: 1;
    letter-spacing: -0.02em;
}
.h5-stat-label {
    font-family: var(--h5-font-mono);
    font-size: 0.72rem;
    color: var(--h5-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   SECTION SHELL
   ───────────────────────────────────────────────────────────── */
.h5-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    z-index: 1;
}

/* Section corner brackets — echo the hero motif at section level.
   Anchored to the section's outer top/bottom edges so they sit in the
   section padding with breathing room, NOT crowded against the content.
   Each section's accent color comes from --h5-section-accent. */
.h5-section[data-bracket] {
    /* default accent; overridden per data-bracket variant below */
    --h5-section-accent: rgba(255,186,83,0.45);
}
.h5-section[data-bracket="y"] { --h5-section-accent: rgba(255,186,83,0.45); }
.h5-section[data-bracket="b"] { --h5-section-accent: rgba(36,155,215,0.45);  }
.h5-section[data-bracket="o"] { --h5-section-accent: rgba(255,104,66,0.45);  }

.h5-section[data-bracket]::before,
.h5-section[data-bracket]::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}
.h5-section[data-bracket]::before {
    top: clamp(1.25rem, 3vw, 2.5rem);
    left: clamp(1.25rem, 4vw, 4rem);
    border-top: 1px solid var(--h5-section-accent);
    border-left: 1px solid var(--h5-section-accent);
}
.h5-section[data-bracket]::after {
    bottom: clamp(1.25rem, 3vw, 2.5rem);
    right: clamp(1.25rem, 4vw, 4rem);
    border-bottom: 1px solid var(--h5-section-accent);
    border-right: 1px solid var(--h5-section-accent);
}

@media (max-width: 1024px) {
    .h5-section[data-bracket]::before,
    .h5-section[data-bracket]::after { display: none; }
}
.h5-section-dark {
    background: var(--h5-bg-2);
    border-top: 1px solid var(--h5-border);
    border-bottom: 1px solid var(--h5-border);
}
/* Third bg tier — used where the strict bg / bg-2 alternation would
   otherwise put two same-colored sections next to each other. */
.h5-section-mid {
    background: var(--h5-bg-3);
    border-top: 1px solid var(--h5-border);
    border-bottom: 1px solid var(--h5-border);
}

/* Eyebrow — mono label with optional section number prefix.
   Markup pattern:  <span class="eyebrow"><b>01</b> Om Beacon</span> */
.h5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--h5-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--h5-yellow);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.h5-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--h5-yellow);
}
.h5-eyebrow b {
    /* section number — sits to the left of the label, glow underline */
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--h5-white);
    padding: 0 0.4rem;
    border-right: 1px solid rgba(255,186,83,0.5);
    box-shadow: inset 0 -1px 0 rgba(255,186,83,0.5);
    margin-right: -0.2rem;
}
.h5-eyebrow.c-blue   { color: var(--h5-blue); }
.h5-eyebrow.c-blue::before { background: var(--h5-blue); }
.h5-eyebrow.c-blue b { border-right-color: rgba(36,155,215,0.5); box-shadow: inset 0 -1px 0 rgba(36,155,215,0.5); }
.h5-eyebrow.c-orange { color: var(--h5-orange); }
.h5-eyebrow.c-orange::before { background: var(--h5-orange); }
.h5-eyebrow.c-orange b { border-right-color: rgba(255,104,66,0.5); box-shadow: inset 0 -1px 0 rgba(255,104,66,0.5); }

/* ─────────────────────────────────────────────────────────────
   MARQUEE STRIP — connective tissue between sections
   A slow horizontal ticker. Festival energy + visual breath
   between content blocks.
   ───────────────────────────────────────────────────────────── */
.h5-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid var(--h5-border);
    border-bottom: 1px solid var(--h5-border);
    background: var(--h5-bg);
    padding: 0.95rem 0;
    /* fade out edges so it dissolves into the page */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h5-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    animation: marquee-scroll 48s linear infinite;
    will-change: transform;
}
.h5-marquee:hover .h5-marquee-track { animation-play-state: paused; }
.h5-marquee-item {
    font-family: var(--h5-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--h5-mid);
}
.h5-marquee-item.accent-y { color: var(--h5-yellow); }
.h5-marquee-item.accent-b { color: var(--h5-blue); }
.h5-marquee-item.accent-o { color: var(--h5-orange); }
.h5-marquee-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--h5-yellow);
    box-shadow: var(--h5-glow-y);
    flex-shrink: 0;
}
.h5-marquee-dot.b { background: var(--h5-blue);   box-shadow: var(--h5-glow-b); }
.h5-marquee-dot.o { background: var(--h5-orange); box-shadow: var(--h5-glow-o); }
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .h5-marquee-track { animation: none; }
}

.h5-section-heading {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    line-height: 1;
    color: var(--h5-white);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.h5-section-sub {
    font-size: 1rem;
    color: var(--h5-mid);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 0 3.5rem;
}

/* ─────────────────────────────────────────────────────────────
   INTRO + PILLS
   ───────────────────────────────────────────────────────────── */
.h5-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.h5-intro-heading {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1;
    color: var(--h5-white);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}
.h5-intro-lead {
    font-size: 1.05rem;
    color: var(--h5-mid);
    line-height: 1.7;
    margin: 0 0 1.5rem;
    max-width: 520px;
}
.h5-intro-body {
    font-size: 0.95rem;
    color: var(--h5-mid);
    line-height: 1.85;
    max-width: 520px;
}
.h5-intro-body strong { color: var(--h5-white); font-weight: 600; }

.h5-pills {
    background: var(--h5-surface);
    border: 1px solid var(--h5-border);
    border-radius: 10px;
    overflow: hidden;
}
/* ─────────────────────────────────────────────────────────────
   PHOTO TREATMENT SYSTEM
   Shared across all photo containers — pills photo, vem-card photo,
   bento tile, ticket photo. Each photo container is a positioned box
   with an absolutely-positioned <img> inside; ::after layers a dark
   gradient overlay for readability + brand cohesion; the container
   itself carries a colored box-shadow as a glow border. Hover bumps
   scale + saturation.
   ───────────────────────────────────────────────────────────── */
.h5-pills-photo > img,
.h5-vem-img > img,
.h5-bento-bg > img,
.h5-ticket-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.05);
    transition: transform 0.6s ease, filter 0.4s ease;
    display: block;
}
.h5-vem-card:hover .h5-vem-img > img,
.h5-bento-item:hover .h5-bento-bg > img {
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.05);
}

/* glow borders — color-keyed to the surrounding section accent */
.h5-pills-photo {
    box-shadow: 0 0 0 1px rgba(255,186,83,0.18), 0 0 28px rgba(255,186,83,0.10);
}
.h5-vem-card.y .h5-vem-img {
    box-shadow: 0 0 0 1px rgba(255,186,83,0.20), 0 0 32px rgba(255,186,83,0.14);
}
.h5-vem-card.b .h5-vem-img {
    box-shadow: 0 0 0 1px rgba(36,155,215,0.20),  0 0 32px rgba(36,155,215,0.14);
}
.h5-vem-card.o .h5-vem-img {
    box-shadow: 0 0 0 1px rgba(255,104,66,0.20),  0 0 32px rgba(255,104,66,0.14);
}
.h5-vem-card:hover .h5-vem-img { transition: box-shadow 0.35s ease; }
.h5-vem-card.y:hover .h5-vem-img { box-shadow: 0 0 0 1px rgba(255,186,83,0.4), 0 0 50px rgba(255,186,83,0.25); }
.h5-vem-card.b:hover .h5-vem-img { box-shadow: 0 0 0 1px rgba(36,155,215,0.4),  0 0 50px rgba(36,155,215,0.25);  }
.h5-vem-card.o:hover .h5-vem-img { box-shadow: 0 0 0 1px rgba(255,104,66,0.4),  0 0 50px rgba(255,104,66,0.25);  }

/* PILLS PHOTO ───────── */
.h5-pills-photo {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #0a1020;
}
.h5-pills-photo::after {
    /* dark gradient — keeps the photo cohesive with the deep-navy page */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9,14,26,0.05) 0%, rgba(9,14,26,0.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.h5-pill {
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--h5-border);
    transition: background 0.2s;
}
.h5-pill:hover { background: rgba(255,255,255,0.03); }
.h5-pill-bar {
    width: 3px; height: 36px;
    border-radius: 2px;
    /* CHANGED — always visible, not opacity:0 */
}
.h5-pill-bar.y { background: var(--h5-yellow); box-shadow: var(--h5-glow-y); }
.h5-pill-bar.b { background: var(--h5-blue);   box-shadow: var(--h5-glow-b); }
.h5-pill-bar.o { background: var(--h5-orange); box-shadow: var(--h5-glow-o); }
.h5-pill-name {
    font-family: var(--h5-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--h5-white);
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: 0.2rem;
}
.h5-pill-desc {
    font-size: 0.82rem;
    color: var(--h5-dim);
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .h5-intro-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ─────────────────────────────────────────────────────────────
   FÖR VEM — color accent visible at rest
   ───────────────────────────────────────────────────────────── */
.h5-vem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.h5-vem-card {
    background: var(--h5-surface);
    border: 1px solid var(--h5-border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.h5-vem-card:hover { transform: translateY(-4px); border-color: var(--h5-border-2); }

/* CHANGED — accent bar now visible at rest, gets brighter on hover */
.h5-vem-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0.85;
    transition: opacity 0.3s, height 0.3s;
}
.h5-vem-card.y::before { background: var(--h5-yellow); box-shadow: var(--h5-glow-y); }
.h5-vem-card.b::before { background: var(--h5-blue);   box-shadow: var(--h5-glow-b); }
.h5-vem-card.o::before { background: var(--h5-orange); box-shadow: var(--h5-glow-o); }
.h5-vem-card:hover::before { opacity: 1; height: 4px; }

.h5-vem-img {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #0a1020;
}
.h5-vem-img::after {
    /* dark gradient overlay — readability + brand cohesion */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9,14,26,0.08) 0%, rgba(9,14,26,0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

.h5-vem-body {
    padding: 1.75rem 1.75rem 2rem;
}
.h5-vem-tag {
    display: inline-block;
    font-family: var(--h5-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.h5-vem-card.y .h5-vem-tag { color: var(--h5-yellow); }
.h5-vem-card.b .h5-vem-tag { color: var(--h5-blue); }
.h5-vem-card.o .h5-vem-tag { color: var(--h5-orange); }

.h5-vem-name {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--h5-white);
    line-height: 1.15;
    margin-bottom: 1.1rem;
    letter-spacing: -0.01em;
}
.h5-vem-text { font-size: 0.92rem; color: var(--h5-mid); line-height: 1.7; }
.h5-vem-text p { margin: 0 0 0.7rem; }
.h5-vem-text p:last-child { margin-bottom: 0; }
.h5-vem-text a {
    color: var(--h5-yellow);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,186,83,0.4);
    transition: border-color 0.2s, color 0.2s;
}
.h5-vem-text a:hover { color: var(--h5-orange); border-color: var(--h5-orange); }

@media (max-width: 900px) {
    .h5-vem-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   BENTO — kept (the best section in the original)
   ───────────────────────────────────────────────────────────── */
.h5-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.h5-bento-item {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: var(--h5-surface);
    border: 1px solid var(--h5-border);
    cursor: default;
    transition: transform 0.3s ease, border-color 0.3s;
    min-height: 200px;
}
.h5-bento-item:hover { border-color: rgba(255,186,83,0.3); transform: translateY(-3px); }

.h5-bento-item.span-8  { grid-column: span 8; min-height: 340px; }
.h5-bento-item.span-4  { grid-column: span 4; min-height: 340px; }
.h5-bento-item.span-3  { grid-column: span 3; min-height: 240px; }

.h5-bento-bg {
    position: absolute; inset: 0;
    overflow: hidden;
    transition: transform 0.5s ease;
    background: #0a1020;
}
.h5-bento-item:hover .h5-bento-bg { transform: scale(1.04); }
.h5-bento-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(9,14,26,0.96) 0%, rgba(9,14,26,0.35) 55%, transparent 100%);
}
.h5-bento-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.75rem 1.75rem;
    z-index: 1;
}
.h5-bento-eyebrow {
    display: inline-block;
    font-family: var(--h5-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--h5-yellow);
    margin-bottom: 0.55rem;
}
.h5-bento-title {
    font-family: var(--h5-font-display);
    font-weight: 900;
    color: var(--h5-white);
    line-height: 1.1;
    margin-bottom: 0.45rem;
    letter-spacing: -0.01em;
    font-size: 1.2rem;
}
.h5-bento-item.span-8 .h5-bento-title { font-size: 1.9rem; }
.h5-bento-desc {
    font-size: 0.82rem;
    color: rgba(237,233,228,0.7);
    line-height: 1.55;
    max-width: 460px;
}
.h5-bento-item.span-3 .h5-bento-desc, .h5-bento-item.span-4 .h5-bento-desc { font-size: 0.75rem; }

/* image-less bento tile */
.h5-bento-item.no-img { background: linear-gradient(140deg, #110e1a 0%, #1e1535 100%); }
.h5-bento-item.no-img::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(135deg, transparent 0 26px, rgba(255,255,255,0.03) 26px 27px);
}

/* striped placeholders — retained for the image-less tile only */
.h5-bento-bg.placeholder {
    background:
        linear-gradient(135deg, rgba(36,155,215,0.18) 0%, rgba(255,104,66,0.14) 60%, rgba(255,186,83,0.18) 100%),
        repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,0.02) 24px 25px),
        #1a2540;
}

@media (max-width: 1024px) {
    .h5-bento { grid-template-columns: 1fr 1fr; }
    .h5-bento-item.span-8 { grid-column: span 2; }
    .h5-bento-item.span-4 { grid-column: span 1; }
    .h5-bento-item.span-3 { grid-column: span 1; }
}
@media (max-width: 640px) {
    .h5-bento { grid-template-columns: 1fr; }
    .h5-bento-item.span-8, .h5-bento-item.span-4, .h5-bento-item.span-3 { grid-column: span 1; min-height: 200px; }
}

/* ─────────────────────────────────────────────────────────────
   LAN TICKET (kept, lightly polished)
   ───────────────────────────────────────────────────────────── */
.h5-ticket-grid {
    display: grid;
    grid-template-columns: minmax(420px, 540px) 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}
.h5-ticket {
    background: var(--h5-surface);
    border: 1px solid rgba(255,186,83,0.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255,186,83,0.08);
}
.h5-ticket-perf {
    height: 8px;
    background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,186,83,0.35) 5px 10px);
}
.h5-ticket-body { padding: 2rem 2.25rem; }
.h5-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--h5-border);
}
.h5-ticket-event {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--h5-yellow);
    text-shadow: 0 0 20px rgba(255,186,83,0.35);
    line-height: 1;
}
.h5-ticket-sub {
    font-family: var(--h5-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--h5-dim);
    text-transform: uppercase;
    display: block;
    margin-top: 0.5rem;
}
.h5-ticket-when {
    text-align: right;
    font-family: var(--h5-font-mono);
    font-size: 0.78rem;
    color: var(--h5-mid);
    line-height: 1.7;
    letter-spacing: 0.04em;
}
.h5-ticket-specs { display: flex; flex-direction: column; }
.h5-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px dashed var(--h5-border);
    font-size: 0.85rem;
}
.h5-spec-row:last-child { border-bottom: none; }
.h5-spec-key { color: var(--h5-dim); font-family: var(--h5-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; }
.h5-spec-val { color: var(--h5-white); font-weight: 600; }

.h5-ticket-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--h5-border);
}
.h5-barcode { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.h5-barcode-bar { background: var(--h5-mid); border-radius: 1px; width: 2px; }
.h5-barcode-bar:nth-child(3n)   { height: 100%; }
.h5-barcode-bar:nth-child(3n+1) { height: 60%; }
.h5-barcode-bar:nth-child(3n+2) { height: 80%; }
.h5-barcode-bar:nth-child(5n)   { width: 3px; background: rgba(255,186,83,0.5); }
.h5-barcode-bar:nth-child(7n)   { height: 100%; background: var(--h5-yellow); width: 2px; }
.h5-ticket-badge {
    font-family: var(--h5-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--h5-yellow);
    border: 1px solid rgba(255,186,83,0.45);
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.h5-ticket-copy h3 {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    color: var(--h5-white);
    line-height: 1.05;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}
.h5-ticket-copy h3 em { color: var(--h5-yellow); font-style: normal; }
.h5-ticket-copy p {
    font-size: 0.95rem;
    color: var(--h5-mid);
    line-height: 1.75;
    margin: 0 0 2rem;
    max-width: 460px;
}
.h5-ticket-photo {
    height: 220px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    background: #0a1020;
    box-shadow: 0 0 0 1px rgba(255,186,83,0.22), 0 0 36px rgba(255,186,83,0.16);
}
.h5-ticket-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9,14,26,0.05) 0%, rgba(9,14,26,0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.h5-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 1100px) {
    .h5-ticket-grid { grid-template-columns: 1fr; }
    .h5-ticket { max-width: 540px; }
}

/* ─────────────────────────────────────────────────────────────
   INFO / FAQ CARDS — real surfaces
   ───────────────────────────────────────────────────────────── */
.h5-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.h5-info-card {
    background: var(--h5-surface);
    border: 1px solid var(--h5-border);
    border-radius: 10px;
    padding: 1.75rem 1.9rem;
    transition: border-color 0.2s, transform 0.25s ease;
    position: relative;
}
.h5-info-card:hover { border-color: rgba(255,186,83,0.3); transform: translateY(-2px); }
.h5-info-card h3 {
    font-family: var(--h5-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--h5-yellow);
    line-height: 1.3;
    margin: 0 0 0.85rem;
    letter-spacing: 0.01em;
}
.h5-info-card h4 {
    font-family: var(--h5-font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--h5-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 1rem 0 0.4rem;
}
.h5-info-card p, .h5-info-card .h5-info-line {
    font-size: 0.9rem;
    color: var(--h5-mid);
    line-height: 1.7;
    margin: 0 0 0.45rem;
    display: block;
}
.h5-info-card p:last-child, .h5-info-card .h5-info-line:last-child { margin-bottom: 0; }
.h5-info-card a {
    color: var(--h5-yellow);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,186,83,0.4);
}
.h5-info-card a:hover { color: var(--h5-orange); border-color: var(--h5-orange); }

@media (max-width: 768px) { .h5-info-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   BUY callout
   ───────────────────────────────────────────────────────────── */
.h5-buy {
    padding: clamp(5rem, 10vw, 9rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.h5-buy-ghost {
    position: absolute;
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: 26vw;
    color: rgba(255,186,83,0.025);
    white-space: nowrap;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.03em;
    line-height: 1;
}
.h5-buy-inner { position: relative; z-index: 1; }
.h5-buy-title {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    color: var(--h5-white);
    line-height: 1;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
.h5-buy-sub {
    font-size: 1rem;
    color: var(--h5-mid);
    line-height: 1.7;
    margin: 0 auto 2.5rem;
    max-width: 480px;
}
.h5-buy-ctas {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   LOCATION
   ───────────────────────────────────────────────────────────── */
.h5-location {
    border-top: 1px solid var(--h5-border);
    padding: 3.5rem 0;
    position: relative;
    z-index: 1;
}
.h5-location-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.h5-location h2 {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: 1.7rem;
    color: var(--h5-white);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.h5-location p {
    font-size: 0.92rem;
    color: var(--h5-mid);
    line-height: 1.7;
    margin: 0;
    max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — EXPANDED
   ───────────────────────────────────────────────────────────── */
.h5-footer {
    border-top: 1px solid var(--h5-border);
    background: var(--h5-bg-2);
    padding: 4rem 0 2.25rem;
    position: relative;
    z-index: 1;
}
.h5-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.h5-footer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.h5-footer-brand img {
    display: block;
    height: 34px;
    width: auto;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(255,186,83,0.15));
}
.h5-footer-blurb {
    font-size: 0.88rem;
    color: var(--h5-dim);
    line-height: 1.7;
    max-width: 320px;
    margin: 0 0 1rem;
}
.h5-footer-socials {
    display: flex;
    gap: 0.5rem;
}
.h5-footer-social {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: 1px solid var(--h5-border);
    border-radius: 6px;
    color: var(--h5-mid);
    text-decoration: none;
    font-family: var(--h5-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.h5-footer-social:hover { color: var(--h5-yellow); border-color: rgba(255,186,83,0.4); background: rgba(255,186,83,0.05); }
.h5-footer-col h5 {
    font-family: var(--h5-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--h5-yellow);
    text-transform: uppercase;
    margin: 0 0 1rem;
    font-weight: 600;
}
.h5-footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.h5-footer-col a {
    color: var(--h5-mid);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
}
.h5-footer-col a:hover { color: var(--h5-yellow); }

.h5-footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--h5-border);
    font-family: var(--h5-font-mono);
    font-size: 0.72rem;
    color: var(--h5-dim);
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .h5-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
    .h5-footer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .h5-footer-brand { width: 100%; justify-content: center; }
    .h5-footer-blurb { margin-left: auto; margin-right: auto; }
    .h5-footer-socials { justify-content: center; }
    .h5-footer-col ul { align-items: center; }
}

/* ─────────────────────────────────────────────────────────────
   Responsive bits
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .h5-stats-grid { grid-template-columns: 1fr 1fr; }
    .h5-stat { border-bottom: 1px solid var(--h5-border); }
    .h5-stat:nth-child(odd) { border-right: 1px solid var(--h5-border); }
    .h5-stat:nth-child(2)   { border-right: none; }
    .h5-stat:nth-child(3), .h5-stat:nth-child(4) { border-bottom: none; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE PASS — explicit handling below 1024px
   ───────────────────────────────────────────────────────────── */

/* Tablet & smaller: the hero stacks. Reset the desktop tweaks
   so the image and text block fit the new (full-width) column
   without overflowing or carrying a sideways nudge meant for
   the 2-column composition. */
@media (max-width: 1024px) {
    .h5-hero-left {
        --h5-wordmark-width: 100%;
        --h5-wordmark-x: 0rem;
        --h5-eyebrow-x: 0rem;
        --h5-year-x: 0rem;
        --h5-eyebrow-overlap: 3.5rem;
        --h5-year-overlap: 2.5rem;
    }
    .h5-hero { min-height: 0; padding: 3rem 0 4rem; }
    .h5-hero-grid { align-items: stretch; }
    .h5-hero-urgency { padding: 1.5rem 1.5rem 1.25rem; }
}

/* Phone: the corner brackets get out of the way (they clip the
   wordmark), section padding tightens, type drops a notch, and
   the buttons go full-width so thumbs can hit them. */
@media (max-width: 768px) {
    .h5-hero::before, .h5-hero::after { display: none; }
    .h5-hero-left {
        --h5-eyebrow-overlap: 1.5rem;
        --h5-year-overlap: 1rem;
        --h5-wordmark-width: 86%;
    }
    .h5-hero-eyebrow { font-size: 0.66rem; letter-spacing: 0.22em; }
    .h5-hero-eyebrow::before { width: 22px; }
    .h5-hero-meta { font-size: 0.7rem; letter-spacing: 0.14em; gap: 0.5rem 0.75rem; }
    .h5-hero-meta-sep { display: none; }
    .h5-urgency-headline { font-size: 1.2rem; }
    .h5-count-num { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .h5-count-label { font-size: 0.55rem; }
    .h5-urgency-ctas { flex-direction: column; }
    .h5-urgency-ctas .h5-btn { width: 100%; justify-content: center; }

    .h5-nav-inner { height: 60px; }
    .h5-nav-brand img { height: 26px; }
    .h5-nav-brand span { display: none; } /* logomark alone keeps the bar tidy */

    .h5-section-heading,
    .h5-intro-heading { font-size: clamp(2rem, 8vw, 2.8rem); }
    .h5-section-sub { margin-bottom: 2.5rem; }
    .h5-container { padding-left: 1.25rem; padding-right: 1.25rem; }

    .h5-stats-grid { grid-template-columns: 1fr 1fr; }
    .h5-stat { padding: 1.5rem 1.25rem; }
    .h5-stat-num { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .h5-stat-label { font-size: 0.65rem; }

    .h5-pills-photo { height: 160px; }
    .h5-pills-photo::after { font-size: 0.55rem; bottom: 0.5rem; left: 0.75rem; }
    .h5-pill { padding: 1rem 1.25rem; }

    .h5-vem-img { height: 160px; }
    .h5-vem-name { font-size: 1.25rem; }
    .h5-vem-body { padding: 1.5rem 1.5rem 1.75rem; }

    .h5-bento-item.span-8 .h5-bento-title { font-size: 1.4rem; }
    .h5-bento-content { padding: 1.25rem 1.4rem 1.4rem; }
    .h5-bento-item.span-3 .h5-bento-desc, .h5-bento-item.span-4 .h5-bento-desc { display: none; }

    .h5-ticket { max-width: 100%; }
    .h5-ticket-body { padding: 1.5rem 1.5rem; }
    .h5-ticket-event { font-size: 1.3rem; }
    .h5-ticket-when { font-size: 0.72rem; }
    .h5-spec-row { font-size: 0.78rem; padding: 0.55rem 0; }
    .h5-spec-key { font-size: 0.72rem; }
    .h5-ticket-copy p { font-size: 0.88rem; }
    .h5-ctas { flex-direction: column; }
    .h5-ctas .h5-btn { width: 100%; justify-content: center; }

    .h5-info-card { padding: 1.4rem 1.5rem; }
    .h5-info-card h3 { font-size: 1rem; }
    .h5-info-card p, .h5-info-card .h5-info-line { font-size: 0.85rem; }

    .h5-location-inner { gap: 1.25rem; }
    .h5-location h2 { font-size: 1.4rem; }

    .h5-buy-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .h5-buy-ctas { flex-direction: column; align-items: stretch; }
    .h5-buy-ctas .h5-btn { width: 100%; max-width: 360px; margin: 0 auto; justify-content: center; }

    .h5-footer { padding-top: 3rem; }
    .h5-footer-bottom { font-size: 0.66rem; }

    }

/* Extra-narrow phones (≤380px) — the stats lose a column,
   the bento headline shrinks again, and the urgency block
   loses some chrome to keep the countdown numbers legible. */
@media (max-width: 380px) {
    .h5-stats-grid { grid-template-columns: 1fr; }
    .h5-stat { border-right: none !important; }
    .h5-stat:not(:last-child) { border-bottom: 1px solid var(--h5-border); }

    .h5-hero-urgency { padding: 1.25rem 1.1rem 1rem; }
    .h5-countdown { padding: 0.75rem 0; }
    .h5-count-num { font-size: 1.65rem; }
    .h5-count-item { padding: 0 0.15rem; }

    .h5-ticket-body { padding: 1.25rem 1rem; }
    .h5-ticket-header { flex-direction: column; gap: 0.75rem; }
    .h5-ticket-when { text-align: left; }
}

/* ─────────────────────────────────────────────────────────────
   PARTNERS / SPONSORS
   Tier 1: title sponsor — span-8 feature card with logo + quote
   Tier 2: gold partners — span-4 cards with logo + 1-line tagline
   Tier 3: silver partners — span-3 cards with logo only
   Tier 4: community partners — grid strip above the footer
   ───────────────────────────────────────────────────────────── */
.h5-partners-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.h5-partner-card {
    position: relative;
    background: var(--h5-surface);
    border: 1px solid var(--h5-border);
    border-radius: 10px;
    padding: 1.75rem 1.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
}
.h5-partner-card:hover {
    transform: translateY(-3px);
    border-color: var(--h5-border-2);
}

.h5-partner-card.tier-title  { grid-column: span 8; min-height: 280px; }
.h5-partner-card.tier-gold   { grid-column: span 4; min-height: 280px; }
.h5-partner-card.tier-silver { grid-column: span 3; min-height: 170px; }
.h5-partner-card.tier-bronze { grid-column: span 3; min-height: 140px; }

/* tier accents — title sponsor wears a subtle yellow halo */
.h5-partner-card.tier-title {
    border-color: rgba(255,186,83,0.25);
    box-shadow: 0 0 0 1px rgba(255,186,83,0.1) inset, 0 0 30px rgba(255,186,83,0.05);
}
.h5-partner-card.tier-title:hover {
    border-color: rgba(255,186,83,0.45);
    box-shadow: 0 0 0 1px rgba(255,186,83,0.2) inset, 0 0 50px rgba(255,186,83,0.12);
}

.h5-partner-tier-label {
    font-family: var(--h5-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: var(--h5-dim);
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.h5-partner-card.tier-title .h5-partner-tier-label { color: var(--h5-yellow); }
.h5-partner-tier-label::before {
    content: '';
    width: 16px; height: 1px;
    background: currentColor;
}

/* Logo block — wordmark + simple geometric mark; subtle at rest, loud on hover.
   Tints flow through a single --h5-tint CSS var so each shape can compose freely
   without specificity fights between background-color and border-color. */
.h5-partner-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease;
    --h5-tint: var(--h5-white);
}
.h5-partner-logo[data-tint="y"] { --h5-tint: var(--h5-yellow); }
.h5-partner-logo[data-tint="b"] { --h5-tint: var(--h5-blue);   }
.h5-partner-logo[data-tint="o"] { --h5-tint: var(--h5-orange); }
.h5-partner-card:hover .h5-partner-logo,
.h5-community-logo:hover .h5-partner-logo { filter: grayscale(0); opacity: 1; }

.h5-logo-mark {
    display: inline-block;
    width: 22px; height: 22px;
    background: var(--h5-tint);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}
.h5-logo-mark.circle   { border-radius: 50%; }
.h5-logo-mark.diamond  { border-radius: 3px; transform: rotate(45deg); width: 18px; height: 18px; }
.h5-logo-mark.bar      { height: 5px; width: 30px; border-radius: 2px; }
.h5-logo-mark.ring     {
    background: transparent;
    border: 3px solid var(--h5-tint);
    border-radius: 50%;
}
.h5-logo-mark.split    {
    background: linear-gradient(90deg, var(--h5-tint) 50%, transparent 50%);
    border: 1px solid var(--h5-tint);
    border-radius: 4px;
}
.h5-logo-mark.stack    {
    background:
        linear-gradient(0deg,
            var(--h5-tint) 0,  var(--h5-tint) 30%,
            transparent 30%, transparent 40%,
            var(--h5-tint) 40%, var(--h5-tint) 65%,
            transparent 65%, transparent 75%,
            var(--h5-tint) 75%, var(--h5-tint) 100%);
}
.h5-logo-mark.dot-row {
    background: transparent;
    width: 28px; height: 6px;
    background-image:
        radial-gradient(circle at 14% 50%, var(--h5-tint) 2.5px, transparent 3px),
        radial-gradient(circle at 50% 50%, var(--h5-tint) 2.5px, transparent 3px),
        radial-gradient(circle at 86% 50%, var(--h5-tint) 2.5px, transparent 3px);
}
.h5-logo-mark.tri {
    background: transparent;
    width: 0; height: 0;
    border-style: solid;
    border-color: transparent;
    border-left-width: 11px;
    border-right-width: 11px;
    border-bottom-width: 19px;
    border-top-width: 0;
    border-bottom-color: var(--h5-tint);
    border-radius: 0;
}

.h5-partner-name {
    font-family: var(--h5-font-display);
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--h5-white);
    text-transform: uppercase;
}
.h5-partner-card.tier-title .h5-partner-name { font-size: 1.9rem; letter-spacing: 0.02em; }
.h5-partner-card.tier-gold .h5-partner-name  { font-size: 1.3rem; }

.h5-partner-blurb {
    font-size: 0.92rem;
    color: var(--h5-mid);
    line-height: 1.65;
    margin: 1.25rem 0 0;
    max-width: 460px;
}
.h5-partner-card.tier-gold .h5-partner-blurb { font-size: 0.82rem; }

/* Tile that sends to the full partner list */
.h5-partner-card.tier-more {
    grid-column: span 3;
    min-height: 170px;
    background:
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.025) 18px 19px),
        var(--h5-surface);
    border-style: dashed;
}
.h5-partner-card.tier-more .h5-partner-name {
    font-size: 0.95rem;
    color: var(--h5-mid);
    letter-spacing: 0.02em;
}
.h5-partner-card.tier-more:hover .h5-partner-name { color: var(--h5-yellow); }

@media (max-width: 1024px) {
    .h5-partner-card.tier-title  { grid-column: span 12; min-height: 240px; }
    .h5-partner-card.tier-gold   { grid-column: span 6; min-height: 200px; }
    .h5-partner-card.tier-silver { grid-column: span 6; }
    .h5-partner-card.tier-bronze { grid-column: span 6; }
    .h5-partner-card.tier-more   { grid-column: span 12; min-height: 120px; }
}
@media (max-width: 600px) {
    .h5-partner-card.tier-gold,
    .h5-partner-card.tier-silver,
    .h5-partner-card.tier-bronze { grid-column: span 12; }
}

/* ─────────────────────────────────────────────────────────────
   COMMUNITY PARTNERS — long-tail logo strip above the footer.
   Static grid, grayscale at rest, full color on hover. Visually
   distinct from the colorful content marquee so it reads as
   "supporting cast" rather than headline content.
   ───────────────────────────────────────────────────────────── */
.h5-community {
    border-top: 1px solid var(--h5-border);
    background: var(--h5-bg-3);
    padding: 2.5rem 0 3rem;
    position: relative;
    z-index: 1;
}
.h5-community-head {
    font-family: var(--h5-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--h5-dim);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.h5-community-head::before {
    content: '';
    width: 22px; height: 1px;
    background: var(--h5-dim);
}
.h5-community-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--h5-border);
    border: 1px solid var(--h5-border);
    border-radius: 8px;
    overflow: hidden;
}
.h5-community-logo {
    background: var(--h5-bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.4rem 1rem;
    text-decoration: none;
    transition: background 0.25s ease;
}
.h5-community-logo .h5-partner-logo {
    /* slightly smaller */
    gap: 0.5rem;
}
.h5-community-logo .h5-logo-mark { width: 16px; height: 16px; }
.h5-community-logo .h5-logo-mark.bar { height: 4px; width: 22px; }
.h5-community-logo .h5-logo-mark.tri {
    border-left-width: 8px; border-right-width: 8px; border-bottom-width: 14px;
}
.h5-community-logo .h5-partner-name { font-size: 0.78rem; letter-spacing: 0.06em; }
.h5-community-logo:hover { background: var(--h5-surface); }
.h5-community-logo:hover .h5-partner-logo { filter: grayscale(0); opacity: 1; }

@media (max-width: 768px) {
    .h5-community-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
    .h5-community-grid { grid-template-columns: repeat(2, 1fr); }
}

/* "Med stöd av" line in hero meta — small, in-line acknowledgement */
.h5-support-line {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--h5-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h5-dim);
}
.h5-support-line strong { color: var(--h5-mid); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   END partners
   ───────────────────────────────────────────────────────────── */