/*
Theme Name: Goody Bag
Theme URI: https://example.com/goody-bag/
Author: Sascha for Ray
Description: Custom theme for The Goody Bag.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: goody-bag
*/

:root {
    /* Colors — extracted from Figma analysis */
    --gb-bg:            #FFFEFA;
    --gb-bg-dark:       #022835;
    --gb-bg-darker:     #000203;
    --gb-text:          #000203;
    --gb-text-muted:    #4a5b62;
    --gb-on-dark:       #FFFFFF;
    --gb-on-dark-mute:  rgba(255, 255, 255, 0.72);
    --gb-red:           #FF4532;
    --gb-red-strong:    #E0331F;
    --gb-yellow:        #F7F396;
    --gb-blue:          #A6DEFF;
    --gb-blue-mid:      #719ED6;
    --gb-orange:        #F99565;
    --gb-pink:          #EC238D;
    --gb-salmon:        #FDC3B1;
    --gb-border:        rgba(0, 0, 0, 0.08);

    /* Typography */
    --gb-font-display:  'League Spartan', system-ui, sans-serif;
    --gb-font-body:     'Jost', system-ui, sans-serif; /* Futura PT substitute */
    --gb-font-mono:     'DM Sans', system-ui, sans-serif;

    /* Layout */
    --gb-container:     1280px;
    --gb-pad-x:         32px;
    /* Desktop rhythm brought down to the tablet step (client feedback
       2026-07-29: the hero eats the fold, Featured competitions needed a
       scroll). Mobile 48 / tablet + desktop 80. */
    --gb-section-py:    80px;
    --gb-radius:        12px;
    --gb-radius-lg:     24px;

    /* Fixed-header system — single source of truth for header clearance.
       --gb-header-h = the nav bar height. --gb-admin-h = the WP admin bar
       (0 for anonymous visitors, set when logged in). Every first section
       clears the header with calc(--gb-admin-h + --gb-header-h + breathing),
       so the same code works on every page and in both states. */
    --gb-header-h:      72px;
    --gb-admin-h:       0px;
}

/* Logged-in editors get the WP admin bar; feed its height into the system. */
body.admin-bar { --gb-admin-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --gb-admin-h: 46px; } }

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; line-height: 1.15; scroll-behavior: smooth; scroll-padding-top: calc(var(--gb-admin-h) + var(--gb-header-h) + 8px); }

body {
    margin: 0;
    font-family: var(--gb-font-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--gb-text);
    background: var(--gb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--gb-font-display);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 0.5em;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

/* Layout primitives */
.gb-container {
    width: 100%;
    max-width: var(--gb-container);
    margin: 0 auto;
    padding-left: var(--gb-pad-x);
    padding-right: var(--gb-pad-x);
}

.gb-section { padding-top: var(--gb-section-py); padding-bottom: var(--gb-section-py); }

/* Buttons */
.gb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
    text-decoration: none;
}
.gb-btn--primary { background: var(--gb-red); color: var(--gb-on-dark); }
.gb-btn--primary:hover { background: var(--gb-red-strong); }
.gb-btn--ghost-light {
    background: transparent;
    color: var(--gb-on-dark);
    border-color: var(--gb-on-dark);
}
.gb-btn--ghost-light:hover { background: var(--gb-on-dark); color: var(--gb-text); }
.gb-btn--ghost-dark {
    background: transparent;
    color: var(--gb-text);
    border-color: var(--gb-text);
}
.gb-btn--ghost-dark:hover { background: var(--gb-text); color: var(--gb-on-dark); }
.gb-btn--sentence {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--gb-font-body);
    font-weight: 600;
}
.gb-btn--sm { padding: 10px 20px; font-size: 12px; }

/* ============================================================
   Site header — sticky. On the home page it's transparent over the
   hero image; elsewhere it's a dark band. Once scrolled past 80px,
   the .is-scrolled class makes it a solid translucent panel with
   a subtle blur (works on home and subpages).
   ============================================================ */
.site-header {
    position: fixed;
    top: var(--gb-admin-h);
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0, 2, 3, 0.92);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    color: var(--gb-on-dark);
    padding: 14px 0;
    transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
    padding: 10px 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
/* Single source of truth for header clearance. WordPress already shifts the
   page down by the admin-bar height (html margin-top) when logged in, so the
   body only needs to reserve the header's own height here. The admin bar is
   reflected solely in .site-header's `top`. Home is the one deliberate
   exception — its hero sits behind the transparent header. */
body { padding-top: var(--gb-header-h); }
body.home { padding-top: 0; }
/* Per-page background behind the bar matches each page's first section. */
body.page-template-page-competitions,
body.page-template-page-offers { background: var(--gb-bg-darker); }
body.single-gbag_competition,
body.single-gbag_offer,
body.error404 { background: var(--gb-bg-dark); }
body.page-template-page-about { background: #DBEEFD; }
.site-header__inner {
    /* 3 equal-edge columns so the brand is centred on the bar's true midpoint,
       independent of the (wider) nav and (narrower) actions widths. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: var(--gb-container);
    margin: 0 auto;
    padding-left: var(--gb-pad-x);
    padding-right: var(--gb-pad-x);
}
.site-header__nav     { justify-self: start; }
.site-header__actions { justify-self: end; }
.site-header__brand {
    display: flex;
    align-items: center;
    justify-self: center;
    color: var(--gb-on-dark);
}
.site-header__logo {
    display: block;
    height: 44px;
    width: auto;
    transition: height 0.25s ease;
}
.site-header.is-scrolled .site-header__logo { height: 36px; }
.site-header__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    align-items: center;
}
.site-header__nav a,
.site-header__nav .site-header__more {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gb-on-dark);
    cursor: pointer;
}
.site-header__nav .site-header__more::after {
    content: '▾';
    margin-left: 4px;
    font-size: 11px;
}
.site-header__actions { display: flex; gap: 12px; align-items: center; }

/* Hamburger toggle (hidden on desktop; shown <=900px via responsive block) */
.site-header__menu-toggle {
    display: none;
    /* 44px is the minimum comfortable touch target (WCAG 2.5.5 / Apple HIG).
       The bars stay 22px - only the hit area grows. */
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.site-header__menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gb-on-dark);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header.is-menu-open .site-header__menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.is-menu-open .site-header__menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .site-header__menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Hero — full-bleed image with text overlay (left side).
   The site header on .home overlays this with z-index 10.
   ============================================================ */
.hero {
    position: relative;
    color: var(--gb-on-dark);
    background: var(--gb-bg-darker);
    overflow: hidden;
    min-height: 720px;
    /* Home is the overlay exception (body padding-top is 0), so the hero
       clears the header itself, then adds breathing room. */
    padding: calc(var(--gb-header-h) + 96px) 0 96px;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 2, 3, 0.88) 0%,
        rgba(0, 2, 3, 0.65) 35%,
        rgba(0, 2, 3, 0.20) 70%,
        rgba(0, 2, 3, 0.00) 90%);
    z-index: 1;
}
.hero__content { position: relative; z-index: 2; }
.hero__text { max-width: 560px; }
.hero__title {
    font-size: clamp(48px, 5.6vw, 84px);
    line-height: 0.95;
    margin: 0;
    color: var(--gb-on-dark);
    letter-spacing: -0.02em;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--gb-red); }
.hero__divider {
    display: block;
    width: 64px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    margin: 20px 0 24px;
}
.hero__subtitle {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(22px, 2.2vw, 32px);
    color: var(--gb-on-dark);
    margin: 0 0 20px;
    line-height: 1.05;
    letter-spacing: -0.005em;
}
.hero__copy {
    font-size: 15px;
    color: var(--gb-on-dark-mute);
    margin: 0 0 28px;
    max-width: 440px;
    line-height: 1.55;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Brands strip — auto-scrolling marquee carousel
   ============================================================ */
.brands {
    background: var(--gb-bg);
    padding: 48px 0;
    text-align: center;
    border-bottom: 1px solid var(--gb-border);
    overflow: hidden;
}
.brands__label {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--gb-text-muted);
    margin-bottom: 32px;
}

.brands__marquee {
    --gb-marquee-gap: 56px;
    --gb-marquee-speed: 32s;
    display: flex;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--gb-marquee-gap);
    padding-right: var(--gb-marquee-gap); /* spacing between repeats */
    animation: gb-marquee var(--gb-marquee-speed) linear infinite;
    will-change: transform;
}
.brands__marquee:hover .brands__track { animation-play-state: paused; }
.brands__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 64px;
    flex-shrink: 0;
}
.brands__img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}
.brands__img:hover {
    transform: scale(1.05);
}

@keyframes gb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--gb-marquee-gap))); }
}

@media (prefers-reduced-motion: reduce) {
    .brands__track { animation: none; }
}

/* ============================================================
   Yellow subscribe band
   ============================================================ */
.subscribe {
    background: var(--gb-yellow);
    padding: 72px 0;
    text-align: center;
}
.subscribe__title {
    font-size: clamp(28px, 3.2vw, 44px);
    margin: 0 0 16px;
    color: var(--gb-text);
    line-height: 1.05;
    position: relative;
    padding-bottom: 24px;
}
.subscribe__title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.subscribe__line { display: block; }
.subscribe__legal-top {
    font-size: 14px;
    color: var(--gb-text-muted);
    max-width: 520px;
    margin: 0 auto 24px;
}
/* Sign-up form layout.
   Row 1: email + submit form a single "pill" (white email field + red
   submit button, sharing their outer rounded corners). Form wrapper
   itself has no background — the email cell carries the white, the
   submit cell carries the red.
   Row 2: opt-in checkbox sits BELOW the pill on the parent background
   (yellow modal, teal subscribe band, etc) so it reads as "tick this
   then submit", not "this is part of the input field". */
.subscribe__form {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "email submit";
    gap: 12px 0; /* row gap between the email pill and each opt-in row */
    max-width: 520px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
}
.subscribe__input {
    grid-area: email;
    background: var(--gb-bg);
    border: 0;
    padding: 16px 20px;
    font: inherit;
    color: var(--gb-text);
    outline: none;
    min-width: 0;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--gb-border);
    border-right: 0;
}
.subscribe__form .gb-btn {
    grid-area: submit;
    padding: 0 24px;
    border-radius: 0 12px 12px 0;
    align-self: stretch;
    line-height: 1;
}
.subscribe__optin {
    grid-column: 1 / -1;       /* each opt-in row spans full width + stacks (two checkboxes) */
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;           /* match the lede above the field (.subscribe__legal-top) */
    color: var(--gb-text-muted);
    opacity: 1;
    padding: 0 6px;
    text-align: left;
    line-height: 1.4;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.subscribe__optin-input,
.subscribe__consent-input { margin-top: 2px; flex-shrink: 0; accent-color: var(--gb-red); }
.subscribe__optin-copy { flex: 1; }
.subscribe__optin-copy a { text-decoration: underline; }
.subscribe__legal {
    font-size: 12px;
    color: inherit;
    opacity: 0.7;
    margin-top: 16px;
}
/* A status message, not a second form field — so it hugs its text as a
   compact centred pill rather than a full-width box.
   The [hidden] rule is load-bearing: `display: flex` below would otherwise
   override the hidden attribute's UA-stylesheet display:none, making the
   pill show before the form is ever submitted. */
.subscribe__success[hidden] { display: none; }
.subscribe__success {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 12px;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(2, 40, 53, 0.10);
    color: var(--gb-text);
    font-family: var(--gb-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}
/* Green check badge — the universal "done" cue, drawn inline so there's no
   extra request and it tints cleanly on any band background. */
.subscribe__success::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        #1faf6b
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
}
.join-band__form .subscribe__optin { padding: 4px 8px; }

/* ============================================================
   Signup modal — reuses .subscribe__* form styles inside <dialog>.
   ============================================================ */
.gb-modal {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 560px;
    width: calc(100vw - 32px);
    color: var(--gb-text);
}
.gb-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}
.gb-modal__panel {
    position: relative;
    background: var(--gb-yellow);
    border-radius: var(--gb-radius-lg);
    padding: 56px 40px 36px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.gb-modal .subscribe__title { font-size: clamp(26px, 3.2vw, 36px); }
.gb-modal .subscribe__line  { line-height: 1.02; }
.gb-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--gb-text);
    transition: background 0.15s, transform 0.15s;
}
.gb-modal__close:hover { background: rgba(0, 0, 0, 0.14); transform: scale(1.05); }

/* ============================================================
   Featured cards
   ============================================================ */
.featured { padding: var(--gb-section-py) 0; background: var(--gb-bg); }
.featured__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.featured__title {
    font-size: clamp(24px, 2.4vw, 34px);
    max-width: 880px;
    line-height: 1.1;
    margin: 0;
}
.featured__cta { flex-shrink: 0; }

/* Featured strips render as scroll-snap carousels driven by .cards-pager.
   Desktop: cards visible per page set by --gb-cards-per-page (default 3).
   Scrollbar hidden; snap-points keep cards aligned. JS in site.js handles
   the pager arrow + dot navigation and auto-hides the pager when content
   fits without scrolling. */
.cards-grid,
.comp-grid {
    --gb-cards-per-page: 4;
    --gb-cards-gap: 24px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--gb-cards-per-page) - 1) * var(--gb-cards-gap)) / var(--gb-cards-per-page));
    gap: var(--gb-cards-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    /* Under-filled rows sit centred under the (centred) heading and CTA
       instead of hanging left with dead space on the right - three cards in a
       four-card row read as broken (client, 2026-08-02). "safe" reverts to
       start alignment as soon as the cards overflow, so the first card is
       never scrolled out of reach. */
    justify-content: safe center;
}
.cards-grid::-webkit-scrollbar,
.comp-grid::-webkit-scrollbar { display: none; }
.cards-grid > .card,
.comp-grid > .card { scroll-snap-align: start; min-width: 0; }

/* /competitions Featured shows 4 cards per page on desktop. */
.comp-grid { --gb-cards-per-page: 4; }

.cards-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
}
.cards-pager__dots { display: flex; gap: 8px; align-items: center; }
.cards-pager__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s ease, width 0.18s ease;
}
.cards-pager__dot--active { background: var(--gb-red); width: 28px; border-radius: 4px; cursor: default; }
.cards-pager__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.16);
    display: grid;
    place-items: center;
    color: var(--gb-text);
    font-size: 18px;
    background: var(--gb-bg);
    cursor: pointer;
}
.cards-pager__arrow:hover { border-color: var(--gb-text); }
.card {
    background: var(--gb-bg);
    border-radius: var(--gb-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.18s var(--gb-ease, ease), box-shadow 0.18s var(--gb-ease, ease);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
}
/* Whole-card click target. Sits above the media + footer so clicking
   anywhere on the card navigates to the entry. Chevron and other
   interactive bits inside the card can opt back in with z-index:2. */
.card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}
.card__link:focus-visible {
    outline: 2px solid var(--gb-red, #FF4532);
    outline-offset: 2px;
}
.card__media {
    position: relative;
    aspect-ratio: 5 / 4;          /* keeps a minimum height for unstretched cards */
    background: #f3f3f3;
    overflow: hidden;
    flex: 1 0 auto;               /* grows to absorb any extra card height */
    min-height: 0;
}
.card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--gb-yellow);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gb-text);
}
.card__footer {
    background: var(--gb-red);
    color: var(--gb-on-dark);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Push the footer to the bottom of any stretched card so the red bar
       always reaches the bottom edge, regardless of footer content height. */
    margin-top: auto;
}
.card__label {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
.card__title {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.1;
    margin: 4px 0 0;
}
/* Brand + date pills sit inside the red footer, so colours are light to read
   against the red. The brand is white + bold, the date is translucent white. */
.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
    font-family: var(--gb-font-body);
    font-size: 11px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.card__meta-brand {
    font-weight: 700;
    color: #FFFFFF;
}
.card__meta-date {
    color: rgba(255, 255, 255, 0.78);
}
.featured__footer {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Compact chevron used on /competitions featured cards (Figma spec).
   Front-page cards intentionally don't use this — whole card is clickable. */
.card__chev {
    width: 26px;
    height: 26px;
    background: var(--gb-bg);
    color: var(--gb-red);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================
   Previous winners
   ============================================================ */
.winners {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    padding: var(--gb-section-py) 0;
}
.winners__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.winners__title {
    font-size: clamp(36px, 4vw, 56px);
    margin-bottom: 16px;
}
.winners__copy {
    color: var(--gb-on-dark-mute);
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 460px;
}
.winners__media {
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
    aspect-ratio: 5 / 4;
}
.winners__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
    background: var(--gb-bg);
    border-top: 1px solid var(--gb-border);
    padding: 48px 0 32px;
    text-align: center;
}
.site-footer__brand {
    display: inline-block;
    margin-bottom: 24px;
}
.site-footer__brand-img {
    display: block;
    height: 40px; /* SVG viewBox is trimmed to the artwork, so this is the real wordmark height */
    width: auto;
    margin: 0 auto;
}
.site-footer__nav ul {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
    flex-wrap: wrap;
}
.site-footer__nav a {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.site-footer__divider {
    height: 2px;
    background: var(--gb-red);
    max-width: var(--gb-container);
    margin: 0 auto 16px;
    /* match the content width (inset by the container gutter) so the line's
       ends align with the copyright + legal links and the nav above */
    padding: 0 var(--gb-pad-x);
    background-clip: content-box;
    border-radius: 1px;
}
.site-footer__legal {
    font-size: 12px;
    color: var(--gb-text-muted);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--gb-container);
    margin: 0 auto;
    padding-left: var(--gb-pad-x);
    padding-right: var(--gb-pad-x);
}
.site-footer__legal-links { display: inline-flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.site-footer__legal a,
.site-footer__cookie-btn {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-footer__cookie-btn {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; cursor: pointer;
}
.site-footer__legal a:hover,
.site-footer__cookie-btn:hover { color: var(--gb-text); }
/* Visible keyboard focus for all footer interactive elements. */
.site-footer__nav a:focus-visible,
.site-footer__legal a:focus-visible,
.site-footer__cookie-btn:focus-visible,
.site-footer__brand:focus-visible {
    outline: 2px solid var(--gb-red);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   Generic content page (page.php) — Terms / Privacy / Cookies / any plain page.
   Was full-bleed (no container) which left legal copy touching the screen
   edges on mobile. --gb-pad-x handles the mobile gutter automatically.
   ============================================================ */
.site-main {
    max-width: var(--gb-container);
    margin: 0 auto;
    padding: 48px var(--gb-pad-x) 80px;
}
.site-main > article > h1 {
    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.1;
    margin: 0 0 24px;
}
.entry-content { max-width: 75ch; }
.entry-content h2 { font-size: clamp(20px, 4vw, 26px); margin: 1.6em 0 0.4em; }
.entry-content h3 { font-size: clamp(17px, 3.5vw, 20px); margin: 1.4em 0 0.3em; }
.entry-content p,
.entry-content li { font-size: 16px; line-height: 1.6; margin: 0 0 1em; }
.entry-content ul { padding-left: 1.2em; }

/* ============================================================
   Subpage hero band (Competitions / Social)
   ============================================================ */
.page-hero {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    /* body already reserves the header height, so this is breathing room
       only (CP2/OP1) - shared by Competitions + Offers. Tightened again on
       desktop 2026-07-29 (client: hero takes too much vertical space). */
    padding: 40px 0 32px;
    position: relative;
    text-align: left;
}
.page-hero--center { text-align: center; }
.page-hero__title {
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.05;
    margin: 0 auto;
    max-width: 1000px;
    color: var(--gb-on-dark);
    letter-spacing: -0.01em;
}
.page-hero__accent { color: var(--gb-red); }
.page-hero__divider {
    display: block;
    width: 56px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    margin: 24px auto;
}
.page-hero--center .page-hero__divider { margin-left: auto; margin-right: auto; }
.page-hero:not(.page-hero--center) .page-hero__divider { margin-left: 0; }
.page-hero__sub {
    font-size: 16px;
    color: var(--gb-on-dark-mute);
    margin: 0 auto;
    max-width: 700px;
    line-height: 1.55;
}
.page-hero--center .page-hero__sub { text-align: center; }
.page-hero__ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.page-hero__stat {
    margin: 24px 0 0;
    font-family: var(--gb-font-display);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gb-on-dark-mute);
}
.page-hero__stat strong {
    color: var(--gb-red);
    font-weight: 800;
    font-size: 18px;
    margin-right: 6px;
}

/* ============================================================
   Section head (shared by sub pages)
   ============================================================ */
.section-head {
    margin: 0 0 48px;
    text-align: left;
}
.section-head--center { text-align: center; }
.section-head__title {
    font-size: clamp(28px, 3vw, 44px);
    margin: 0 0 16px;
    line-height: 1.05;
}
.section-head__rule {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    margin: 0 0 16px;
}
.section-head--center .section-head__rule { margin-left: auto; margin-right: auto; }
.section-head__sub {
    font-size: 15px;
    color: var(--gb-text-muted);
    max-width: 640px;
    margin: 0;
}
.section-head--center .section-head__sub { margin-left: auto; margin-right: auto; }
.section-head__sub--disclosure {
    font-size: 12px;
    font-style: italic;
    opacity: 0.7;
    max-width: 720px;
}

/* "Featured X — See all →" layout: title on the left, rule below it,
   CTA pushed to the right on the same row. */
.section-head--with-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 24px;
    row-gap: 8px;
}
.section-head--with-cta .section-head__title { grid-column: 1; margin: 0; }
.section-head--with-cta .section-head__rule {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}
.section-head--with-cta .section-head__cta {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gb-text);
    border-bottom: 2px solid var(--gb-red);
    padding-bottom: 4px;
    line-height: 1;
}
.section-head--with-cta .section-head__cta:hover { color: var(--gb-red); }

/* ============================================================
   Competitions list / grid
   ============================================================ */
.comp-list { padding: var(--gb-section-py) 0; background: var(--gb-bg); }
/* NOTE: .comp-grid's layout lives with the carousel block (grid-auto-flow
   column + --gb-cards-per-page). A fixed 4-column template here used to
   override it and crushed mobile down to four tiny cards in a row. */

/* Winner cards — 3-col grid (original) and tight 4-in-row variant. */
.winners-grid-section { padding: var(--gb-section-py) 0; background: var(--gb-bg); }
.winners-grid-section--tight {
    padding: 72px 0;
    background: #F8FAFC; /* soft slate so the section breaks up the white-on-white rhythm */
}
/* /competitions winners — light blue bg (Figma). Dark testimonial cards below. */
.winners-grid-section--blue {
    background: var(--gb-blue);
    padding: 72px 0; /* opts out of --gb-section-py; kept proportional to it */
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
}
.testimonial-card {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    border-radius: var(--gb-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.testimonial-card__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.testimonial-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.testimonial-card__body {
    padding: 18px 22px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.testimonial-card__quote {
    font-family: var(--gb-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--gb-on-dark-mute);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.testimonial-card__name {
    font-family: var(--gb-font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--gb-on-dark);
    margin: 0;
}
.testimonials-cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.winners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Winners strip — 4-up testimonial cards. Photo on top (1:1, cropped to
   show the face), quote below in italic, then a bold name with brand
   and competition attribution. Same .card-style chrome as the rest of
   the site so it feels consistent.  */
.winners-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.winner-tile {
    background: var(--gb-bg);
    border-radius: var(--gb-radius);
    overflow: hidden;
    border: 1px solid var(--gb-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.winner-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.08);
}
.winner-tile__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #E5E7EB;
    overflow: hidden;
    position: relative;
}
.winner-tile__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.winner-tile__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.winner-tile__quote {
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gb-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.winner-tile__name {
    font-family: var(--gb-font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--gb-text);
    margin: 0;
}
.winner-tile__attribution {
    font-size: 11px;
    color: var(--gb-text-muted);
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Browse-all empty state (e.g. when featured covers everything). */
.browse-all__empty {
    text-align: center;
    color: var(--gb-text-muted);
    font-size: 15px;
    padding: 32px 0;
}

/* Inline subscribe band — sits between sections on /offers. */
.subscribe-band {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}
.subscribe-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(255, 69, 50, 0.18), transparent 55%);
    pointer-events: none;
}
.subscribe-band__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: center;
}
.subscribe-band__title {
    font-family: var(--gb-font-display);
    font-weight: 800;
    font-size: clamp(28px, 3vw, 40px);
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 12px;
}
.subscribe-band__sub {
    font-size: 16px;
    color: var(--gb-on-dark-mute);
    margin: 0;
    max-width: 40ch;
}
/* Subscribe-band uses the standard .subscribe__form pattern.
   On its dark teal background, the opt-in text needs to be light. */
.subscribe-band .subscribe__optin { color: var(--gb-text-muted); opacity: 1; }
.subscribe-band .subscribe__optin-input,
.subscribe-band .subscribe__consent-input { accent-color: var(--gb-red); }
/* Success message uses the standard white-pill .subscribe__success for every
   form (the old translucent override rendered white-on-light-blue text on the
   --light variant). */
@media (max-width: 900px) {
    .subscribe-band__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
    .winners-strip { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .comp-wide-grid { grid-template-columns: 1fr; }
    .section-head--with-cta { grid-template-columns: 1fr; }
    .section-head--with-cta .section-head__cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}
@media (max-width: 600px) {
    .winners-strip { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .comp-wide-card { grid-template-columns: 1fr; }
    .comp-wide-card__media { aspect-ratio: 16/9; }
}
.winner-card {
    background: var(--gb-bg);
    border-radius: var(--gb-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
}
.winner-card__media { aspect-ratio: 5/4; }
.winner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.winner-card__body { padding: 20px 22px 24px; }
.winner-card__quote {
    font-size: 14px;
    color: var(--gb-text);
    margin: 0 0 12px;
    line-height: 1.5;
}
.winner-card__name {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--gb-text);
    margin: 0;
}
.winner-card__attribution {
    font-family: var(--gb-font-body);
    font-size: 11px;
    color: var(--gb-text-muted);
    margin: 4px 0 0;
    line-height: 1.3;
}

/* Browse-all grid (8 cards, 4 cols x 2) */
.browse-all { padding: var(--gb-section-py) 0; background: var(--gb-bg); }
.browse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* /competitions Browse all — 2-col grid of wide horizontal cards.
   Image on the left, red panel on the right with brand label,
   title, description, and a pill "VIEW MORE" CTA (Figma spec). */
.comp-wide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.comp-wide-card {
    background: var(--gb-bg);
    border-radius: var(--gb-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 180px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.comp-wide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.10);
}
.comp-wide-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}
.comp-wide-card__link:focus-visible {
    outline: 2px solid var(--gb-red);
    outline-offset: 2px;
}
.comp-wide-card__media {
    background: #f3f3f3;
    overflow: hidden;
    position: relative;
}
.comp-wide-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.comp-wide-card__body {
    background: var(--gb-red);
    color: var(--gb-on-dark);
    padding: 22px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.comp-wide-card__brand {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    opacity: 0.85;
}
.comp-wide-card__title {
    font-family: var(--gb-font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.05;
    margin: 0;
}
.comp-wide-card__desc {
    font-family: var(--gb-font-body);
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.comp-wide-card__cta {
    align-self: flex-start;
    margin-top: 6px;
    background: var(--gb-bg);
    color: var(--gb-text);
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 9px 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.comp-wide-card__cta > span { color: var(--gb-red); font-size: 14px; line-height: 1; }
.card--compact .card__footer { padding: 12px 16px; }
.card--compact .card__title { font-size: 16px; }
.gb-pagination { margin: 32px auto 0; display: flex; justify-content: center; }
.gb-pagination ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.gb-pagination li a,
.gb-pagination li span {
    display: inline-block;
    min-width: 36px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--gb-text);
    background: var(--gb-bg);
    text-decoration: none;
}
.gb-pagination li a:hover { border-color: var(--gb-red); color: var(--gb-red); }
.gb-pagination li span.current { background: var(--gb-red); color: #fff; border-color: var(--gb-red); }
.gb-pagination li span.dots { border-color: transparent; }
.card__cta {
    background: var(--gb-bg);
    color: var(--gb-red);
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 6px;
}

/* ============================================================
   Social — Instagram mosaic
   ============================================================ */
.ig-section {
    background: var(--gb-yellow);
    padding: var(--gb-section-py) 0;
}
.ig-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 16px;
    margin-top: 32px;
}
.ig-tile {
    border-radius: var(--gb-radius);
    overflow: hidden;
    background: #fff;
    position: relative;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-tile--feature {
    grid-column: span 2;
    grid-row: span 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: #fff;
}
.ig-tile__inner {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.ig-tile__brand {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: lowercase;
    font-size: 14px;
    color: var(--gb-blue-mid);
}
.ig-tile__title {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}
.ig-tile__sub {
    font-size: 13px;
    color: var(--gb-text-muted);
    line-height: 1.5;
    margin: 0;
}
.ig-tile--feature img { height: 100%; }

/* ============================================================
   CTA split (white with image right)
   ============================================================ */
.cta-split {
    padding: var(--gb-section-py) 0;
    background: var(--gb-bg);
}
.cta-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.cta-split__title {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    margin: 0 0 24px;
}
.cta-split__copy {
    font-size: 15px;
    color: var(--gb-text-muted);
    line-height: 1.65;
    margin: 0 0 20px;
}
.cta-split__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.cta-split__list li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--gb-text);
}
.cta-split__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gb-red);
    font-weight: 700;
}
.cta-split__pitch {
    color: var(--gb-red);
    font-weight: 600;
    font-family: var(--gb-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
}
.cta-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gb-radius-lg);
}

/* ============================================================
   About: Welcome band (light blue)
   ============================================================ */
.welcome {
    background: #DBEEFD;
    /* body reserves the header height; this is breathing room only (AB1). */
    padding: 80px 0 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.welcome::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(255, 69, 50, 0.10), transparent 55%);
    pointer-events: none;
}
.welcome .gb-container { position: relative; }
.welcome__eyebrow {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--gb-red);
    margin: 0 0 14px;
}
.welcome__title {
    font-family: var(--gb-font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--gb-text);
}
.welcome__accent { color: var(--gb-red); }
.welcome__divider {
    display: block;
    width: 56px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    margin: 24px auto 20px;
}
.welcome__sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--gb-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* About: Best deals (white with text+list left, image right) */
.best-deals { padding: 96px 0; background: var(--gb-bg); }
.best-deals__eyebrow {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--gb-red);
    margin: 0 0 12px;
}
.best-deals__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.best-deals__title {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.05;
    margin: 0 0 16px;
}
.best-deals__lede {
    font-size: 15px;
    color: var(--gb-text-muted);
    margin: 0 0 24px;
    line-height: 1.6;
}
.best-deals__media img {
    width: 100%;
    border-radius: var(--gb-radius-lg);
    aspect-ratio: 5/4;
    object-fit: cover;
}
.check-list { list-style: none; margin: 0 0 24px; padding: 0; }
.check-list li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--gb-text);
}
.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gb-red);
    font-weight: 700;
}

/* About: Why choose (dark teal with image left, text right) */
.why-choose {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.why-choose::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 30%, rgba(255, 69, 50, 0.14), transparent 55%);
    pointer-events: none;
}
.why-choose .gb-container { position: relative; }
.why-choose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.why-choose__media img {
    width: 100%;
    border-radius: var(--gb-radius-lg);
    aspect-ratio: 5/4;
    object-fit: cover;
}
.why-choose__eyebrow {
    font-family: var(--gb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--gb-red);
    margin: 0 0 12px;
}
.why-choose__title {
    font-size: clamp(36px, 4vw, 56px);
    margin: 0 0 24px;
    line-height: 1.05;
}
.why-choose__copy {
    color: var(--gb-on-dark-mute);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 520px;
}

/* Deals-row (3-card section, white) */
.deals-row { padding: var(--gb-section-py) 0; background: var(--gb-bg); }

/* Join-band (teal CTA with image right) */
.join-band {
    background: #5CB3A4;
    padding: 80px 0;
}
.join-band__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.join-band__title {
    font-size: clamp(26px, 3vw, 40px);
    margin: 0 0 16px;
    color: var(--gb-on-dark);
    line-height: 1.05;
}
.join-band__title span { display: block; }
.join-band__divider {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--gb-red);
    border-radius: 2px;
    margin: 0 0 20px;
}
.join-band__sub {
    color: var(--gb-on-dark);
    opacity: 0.9;
    font-size: 14px;
    margin: 0 0 20px;
    max-width: 460px;
}
.join-band__form {
    display: flex;
    gap: 8px;
    background: var(--gb-bg);
    border-radius: 8px;
    padding: 6px;
    max-width: 480px;
    border: 1px solid var(--gb-border);
}
.join-band__form .subscribe__input { flex: 1; padding: 10px 12px; }
.join-band__media img {
    width: 100%;
    border-radius: var(--gb-radius-lg);
    aspect-ratio: 5/4;
    object-fit: cover;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    /* Tablet: same 80px as desktop since 2026-07-29 - kept as its own step so
       desktop can move again without dragging tablet with it. */
    :root { --gb-section-py: 80px; }

    .hero__grid,
    .winners__grid,
    .cta-split__grid,
    .best-deals__grid,
    .why-choose__grid,
    .join-band__grid { grid-template-columns: 1fr; }
    .winners-grid,
    .browse-grid,
    .ig-mosaic { grid-template-columns: repeat(2, 1fr); }
    /* Carousels: 2 cards per page on tablet. */
    .cards-grid,
    .comp-grid { --gb-cards-per-page: 2; }
    .ig-tile--feature { grid-column: span 2; grid-template-columns: 1fr; }

    /* Mobile nav: hide the inline nav, show the hamburger toggle. The nav
       slides down underneath the header when .is-menu-open is set. The
       desktop 3-column grid reverts to flex here (nav is taken out of flow,
       so the grid tracks no longer apply). */
    .site-header__inner { display: flex; justify-content: space-between; }
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        position: absolute;
        left: 0; right: 0;
        /* The panel is an absolutely positioned child of a flex container, and
           left:0 + right:0 does NOT stretch it there - it shrink-wraps to the
           widest link, so the menu opened as a ~139px column with the page
           showing beside it. width resolves against the header, which is full
           width. */
        width: 100%;
        top: 100%;
        background: var(--gb-bg-dark);
        /* No vertical padding: the rows carry their own dividers, so 20px top
           and bottom just left a stray line above the first item and dead space
           under the last. */
        padding: 0;
        /* On /competitions and /offers the hero behind is the same dark colour,
           so a shadow alone leaves the panel with no visible edge - the links
           read as floating on the page. The hairline defines it either way. */
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        /* visibility, not just opacity: a transparent panel still takes keyboard
           focus and is still read out by screen readers, so the closed menu's
           links were reachable by tabbing. Delayed so the fade still plays. */
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    .site-header.is-menu-open .site-header__nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
    /* Hold the page still while the menu is over it. Both elements: the scroll
       container is <html> here, so body alone does nothing (measured). */
    html.gbag-menu-open,
    body.gbag-menu-open { overflow: hidden; }
    .site-header__nav ul {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    /* Dividers between rows only - not above the first, which would read as a
       second header rule, and not below the last, which the panel edge covers. */
    .site-header__nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .site-header__nav a {
        display: block;
        padding: 16px var(--gb-pad-x);
    }

    .hero { min-height: 600px; padding: 132px 0 72px; }
    .featured__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .featured__cta { align-self: stretch; }
}

@media (max-width: 600px) {
    :root {
        --gb-pad-x: 20px;
        /* Mobile: tighter vertical rhythm (client feedback 2026-07-03). */
        --gb-section-py: 48px;
    }

    .winners-grid,
    .browse-grid,
    .ig-mosaic { grid-template-columns: 1fr; }
    /* Carousels: 1 card per page on mobile, with a peek of the next card. */
    .cards-grid,
    .comp-grid {
        --gb-cards-per-page: 1;
        --gb-cards-gap: 16px;
        grid-auto-columns: 86%;
    }

    /* Header */
    .site-header__inner { gap: 12px; }
    .site-header__logo { height: 36px; }
    .site-header.is-scrolled .site-header__logo { height: 30px; }

    /* Hero */
    .hero { min-height: 540px; padding: calc(var(--gb-header-h) + 40px) 0 56px; }
    .hero__title { font-size: clamp(40px, 11vw, 52px); }
    .hero__subtitle { font-size: 18px; }
    .hero__copy { font-size: 14px; max-width: 100%; }
    .hero__ctas { gap: 10px; }
    .hero__ctas .gb-btn { flex: 1 1 auto; }

    /* Subscribe band + modal — stack the email + button at mobile widths.
       Pill becomes two stacked rounded buttons. Opt-in stays below.  */
    .subscribe { padding: 48px 0; }
    .subscribe__title { font-size: 28px; padding-bottom: 18px; }
    .subscribe__form {
        grid-template-columns: 1fr;
        grid-template-areas:
            "email"
            "submit";
        gap: 10px;
    }
    .subscribe__input {
        border-radius: 12px;
        border-right: 1px solid var(--gb-border);
        padding: 14px 18px;
    }
    .subscribe__form .gb-btn {
        border-radius: 12px;
        padding: 14px 22px;
        width: 100%;
    }
    /* Mobile: larger, easily-tappable opt-in checkboxes + clearer label. */
    .subscribe__optin-input,
    .subscribe__consent-input { width: 22px; height: 22px; margin-top: 1px; }
    .subscribe__optin { padding: 6px; gap: 12px; font-size: 14px; opacity: 1; }
    .join-band__form { flex-direction: column; padding: 8px; }
    .join-band__form .gb-btn { padding: 12px 22px; width: 100%; }
    .gb-modal__panel { padding: 48px 22px 28px; }
    .gb-modal .subscribe__title { font-size: 26px; }

    /* Featured cards */
    .featured { padding: 44px 0; }
    .featured__title { font-size: 22px; }

    /* Trim oversized section padding that opted out of --gb-section-py (mobile) */
    .winners-grid-section--blue { padding: 44px 0; }

    /* Winners on mobile: a swipeable row instead of six stacked full-width
       cards (which pushed Browse All a very long scroll away). */
    .testimonials-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .testimonials-grid::-webkit-scrollbar { display: none; }
    .testimonials-grid > .testimonial-card { scroll-snap-align: start; }
    .error-404 { padding: 88px 0 72px; min-height: auto; }
    .error-404__ctas { flex-direction: column; }
    .error-404__ctas .gb-btn { width: 100%; }

    /* Footer */
    .site-footer__legal { flex-direction: column; gap: 8px; text-align: center; }
    .site-footer__legal-links { justify-content: center; gap: 8px 16px; }
    .site-footer__legal a,
    .site-footer__cookie-btn { padding: 6px 4px; font-size: 13px; }
}

/* ===========================================================================
   Story 003 + 005 + 008 — single landings, footer social
   =========================================================================== */

/* ============================================================
   Single competition / offer landing pages.
   Shared layout: dark teal hero (brand colour), then a two-column
   body (rich copy on the left, sticky "ticket" exit card on the
   right). Designed to feel like a campaign page, not a blog post.
   ============================================================ */
.comp-single,
.offer-single {
    background: var(--gb-bg);
}

/* --- Hero --- */
.comp-single__hero,
.offer-single__hero {
    padding: 80px 0 72px;
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    position: relative;
    overflow: hidden;
}
.comp-single__hero::before,
.offer-single__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(255, 69, 50, 0.16), transparent 50%);
    pointer-events: none;
}
.comp-single__hero-grid,
.offer-single__hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
}
.comp-single__hero-text,
.offer-single__hero-text { display: flex; flex-direction: column; gap: 16px; }

.comp-single__brand,
.offer-single__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gb-on-dark);
    align-self: flex-start;
    margin: 0;
}
.comp-single__brand-logo,
.offer-single__brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}

.comp-single__title,
.offer-single__title {
    font-family: var(--gb-font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
}
.comp-single__lede,
.offer-single__lede {
    font-family: var(--gb-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 60ch;
}

.comp-single__meta-row,
.offer-single__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}
.comp-single__meta-row strong,
.offer-single__meta-row strong {
    display: block;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}
.comp-single__meta-row > div,
.offer-single__meta-row > div { min-width: 0; }
.comp-single__meta-row strong + span,
.offer-single__meta-row strong + span {
    color: #fff;
    font-weight: 600;
}

.comp-single__hero-cta,
.offer-single__hero-cta { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }

.comp-single__expired,
.offer-single__expired {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.comp-single__hero-media,
.offer-single__hero-media {
    position: relative;
}
.comp-single__hero-media img,
.offer-single__hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--gb-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* --- Body --- */
.comp-single__body,
.offer-single__body { padding: 64px 0 96px; background: var(--gb-bg); }
.comp-single__body-grid,
.offer-single__body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}
.comp-single__copy,
.offer-single__copy {
    color: var(--gb-text);
    font-size: 16px;
    line-height: 1.7;
}
.comp-single__section-title,
.offer-single__section-title {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gb-red);
    display: inline-block;
}
.comp-single__copy > * + .comp-single__section-title,
.offer-single__copy > * + .offer-single__section-title { margin-top: 40px; }
.comp-single__rich p,
.offer-single__rich p,
.offer-single__tcs p { margin: 0 0 14px; }
.comp-single__copy p:last-child,
.offer-single__copy p:last-child { margin-bottom: 0; }

/* --- Sticky exit card --- */
.comp-single__exit-card,
.offer-single__exit-card {
    position: sticky;
    top: 96px;
    padding: 28px;
    background: var(--gb-bg);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.comp-single__exit-card h3,
.offer-single__exit-card h3 {
    font-family: var(--gb-font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}
.comp-single__exit-card p,
.offer-single__exit-card p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gb-text-muted);
}
.comp-single__exit-card .gb-btn,
.offer-single__exit-card .gb-btn {
    width: 100%;
    margin-top: 8px;
    text-align: center;
    justify-content: center;
}
.comp-single__disclosure,
.offer-single__disclosure {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--gb-border);
    font-size: 11px;
    color: var(--gb-text-muted);
    line-height: 1.55;
}

/* Key facts table inside the sticky card */
.comp-single__facts,
.offer-single__facts {
    margin: 8px 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.comp-single__facts li,
.offer-single__facts li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--gb-border);
}
.comp-single__facts li:last-child,
.offer-single__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.comp-single__facts li b,
.offer-single__facts li b {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gb-text-muted);
}
.comp-single__facts li span,
.offer-single__facts li span {
    text-align: right;
    color: var(--gb-text);
    font-weight: 600;
}

/* Voucher pill — offers only */
.offer-single__voucher {
    margin: 4px 0 16px;
    padding: 14px;
    background: linear-gradient(135deg, #FFF7E5 0%, #FFE9B3 100%);
    border: 1px dashed #B8731A;
    border-radius: 10px;
    text-align: center;
}
.offer-single__voucher-label {
    display: block;
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #92400E;
    margin-bottom: 6px;
}
.offer-single__voucher code {
    display: inline-block;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    font-size: 18px;
    color: #92400E;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    user-select: all;
}

/* Type A entry form (story 016 — native form posting to gbag/v1/comp-entry) */
.comp-single__form-section { padding: 64px 0; background: var(--gb-bg); border-top: 1px solid var(--gb-border); }

/* Two text links out of a competition page, above the footer. */
.comp-single__more { background: var(--gb-bg); border-top: 1px solid var(--gb-border); padding: 24px 0; }
.comp-single__more .gb-container { display: flex; gap: 28px; flex-wrap: wrap; }
.comp-single__more a { font-weight: 700; text-decoration: none; color: inherit; }
.comp-single__more a:hover { text-decoration: underline; }
.comp-entry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 36px;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
}
.comp-entry-form__field { display: flex; flex-direction: column; gap: 6px; }
.comp-entry-form__field--full { grid-column: 1 / -1; }
.comp-entry-form__field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-text);
}
.comp-entry-form__field input {
    background: var(--gb-bg);
    border: 1px solid var(--gb-border);
    border-radius: 12px;
    padding: 13px 16px;
    font: inherit;
    color: var(--gb-text);
    outline: none;
    min-width: 0;
}
.comp-entry-form__field input:focus { border-color: var(--gb-red); }
/* Honeypot — visually removed, still in the DOM for bots to find. */
.comp-entry-form__hp,
.gb-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
/* The two G3 opt-in checkboxes reuse .subscribe__optin (full-width rows). */
.comp-entry-form .subscribe__optin { grid-column: 1 / -1; padding: 0; }
.comp-entry-form .gb-btn {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 14px 40px;
    border-radius: 12px;
}
@media (max-width: 640px) {
    .comp-entry-form { grid-template-columns: 1fr; padding: 24px; }
}

/* Responsive single pages */
@media (max-width: 900px) {
    .comp-single__hero,
    .offer-single__hero { padding: 56px 0 48px; }
    .comp-single__hero-grid,
    .offer-single__hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .comp-single__body-grid,
    .offer-single__body-grid { grid-template-columns: 1fr; gap: 32px; }
    .comp-single__exit-card,
    .offer-single__exit-card { position: static; }
}

/* ============================================================
   404 — branded "page not found"
   ============================================================ */
.error-404 {
    background: var(--gb-bg-dark);
    color: var(--gb-on-dark);
    padding: 120px 0 140px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.error-404::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 69, 50, 0.22), transparent 55%);
    pointer-events: none;
}
.error-404 .gb-container { position: relative; max-width: 760px; text-align: center; }
.error-404__eyebrow {
    font-family: var(--gb-font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 18px;
}
.error-404__title {
    font-family: var(--gb-font-display);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
}
.error-404__title-accent {
    display: block;
    color: var(--gb-red);
    margin-bottom: 4px;
}
.error-404__copy {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
    margin: 0 auto 36px;
}
.error-404__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
.error-404__back {
    margin: 24px 0 0;
    font-size: 14px;
}
.error-404__back a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.error-404__back a:hover { color: var(--gb-red); }

/* Footer social */
.site-footer__top {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; text-align: center;
}
.site-footer__blurb {
    max-width: 560px; margin: 0 auto; font-size: 14px; line-height: 1.6; opacity: 0.85;
}
.site-footer__social {
    display: flex; gap: 16px; justify-content: center; list-style: none; padding: 0; margin: 16px 0 0;
}
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); color: inherit;
    transition: background 0.15s ease;
}
.site-footer__social a:hover { background: rgba(255,255,255,0.18); }
.site-footer__social-icon { width: 18px; height: 18px; }
.site-footer__legal a { color: inherit; }

@media (max-width: 768px) {
    .comp-single__hero-grid, .offer-single__hero-grid,
    .comp-single__body-grid, .offer-single__body-grid {
        grid-template-columns: 1fr; gap: 24px;
    }
    .comp-single__title, .offer-single__title { font-size: 30px; }
    .comp-single__exit-card, .offer-single__exit-card { position: static; }
}

/* ============================================================
   Client change-list additions (June 2026)
   ============================================================ */

/* HP5 — subtext under the home "Featured competitions" header.
   The --solo head holds a title + sub stacked left. */
.featured__head--solo { flex-direction: column; align-items: flex-start; gap: 10px; }
.featured__sub {
    margin: 0;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gb-text-muted);
}

/* HP7 — single-line modal headline (replaces the stacked subscribe lines). */
.subscribe__title--single { line-height: 1.1; }

/* OP4 — subscribe band recoloured to the light blue used by the
   /competitions winners section, sitting between Featured and More offers. */
.subscribe-band--light { background: var(--gb-blue); color: var(--gb-text); }
.subscribe-band--light::before { display: none; }
.subscribe-band--light .subscribe-band__sub { color: var(--gb-text-muted); }
.subscribe-band--light .subscribe__optin-copy { color: var(--gb-text-muted); }