/* ==========================================================================
   KILLA X PABLO — page composition (header, hero, sections, footer)
   Depends on tokens from redesign.css.
   ========================================================================== */

/* ── Skip link ──────────────────────────────────────────────────────────── */
.kxp-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--kxp-black); color: var(--kxp-white);
    padding: 12px 20px; font-size: var(--kxp-step--1);
}
.kxp-skip:focus { left: 0; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* The header carries its white plate from the first paint — it used to fade in
   only once scrolled, which the client read as the nav "missing" over the hero. */
.kxp-hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    background: rgba(255,255,255,0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    transition: background 0.5s var(--kxp-ease), border-color 0.5s var(--kxp-ease);
    border-bottom: 1px solid transparent;
}
/* Centred, two-row layout (blvck-style): wordmark on top, nav centred below.
   The burger is absolutely positioned so it doesn't offset the centred wordmark. */
.kxp-hdr__inner {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.85rem; padding-block: 1rem;
    position: relative;
}
/* The plate is always there now, so scrolling only draws the hairline that
   separates the header from the content running under it. */
.kxp-hdr.is-stuck { border-bottom-color: var(--kxp-grey-100); }

.kxp-wordmark {
    font-family: var(--kxp-font-display);
    font-weight: 800;
    font-size: var(--kxp-step-1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* The × glyph draws well below cap height, so at 1em it reads as a small dot
   between two uppercase words. 1.426 is Archivo's cap-height ÷ ×-ink-height,
   measured off the rendered font — it makes the × exactly as tall as the caps.
   Recompute it if the display face ever changes. */
.kxp-wordmark__x {
    color: var(--kxp-accent);
    font-size: 1.426em;
    line-height: 1;
    vertical-align: -0.019em;
}

.kxp-nav ul { display: flex; justify-content: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
.kxp-nav a {
    position: relative;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-block: 4px;
}
/* Underline grows from the left — the only nav flourish. */
.kxp-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--kxp-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s var(--kxp-ease);
}
.kxp-nav a:hover::after { transform: scaleX(1); }
.kxp-nav__soon {
    margin-left: 0.4em; padding: 2px 6px;
    font-size: 9px; letter-spacing: 0.1em;
    background: var(--kxp-grey-100); color: var(--kxp-grey-500);
    vertical-align: middle;
}

.kxp-burger {
    display: none;
    position: absolute; right: var(--kxp-gutter); top: 50%;
    width: 44px; height: 44px;   /* a finger-sized target, not just the bars */
    transform: translateY(-50%);
}
/* Both bars sit on the button's centre and are pushed apart from there, so the
   open state rotates them around one point and the X actually closes.

   The old rule selected the second bar with :last-child — but the last child
   is the "Menu" screen-reader span, so only the first bar ever rotated and the
   icon opened into a lopsided cross. Count children explicitly instead. */
.kxp-burger__bar {
    position: absolute;
    left: 50%; top: 50%;
    width: 22px; height: 2px;
    margin: 0;
    background: var(--kxp-black);
    transition: transform 0.35s var(--kxp-ease);
}
.kxp-burger__bar:nth-child(1) { transform: translate(-50%, -50%) translateY(-4px); }
.kxp-burger__bar:nth-child(2) { transform: translate(-50%, -50%) translateY(4px); }
.kxp-burger[aria-expanded="true"] .kxp-burger__bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.kxp-burger[aria-expanded="true"] .kxp-burger__bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.kxp-mnav { background: var(--kxp-white); border-bottom: 1px solid var(--kxp-grey-100); }
.kxp-mnav ul { list-style: none; margin: 0; padding: 1rem var(--kxp-gutter) 1.5rem; }
.kxp-mnav a {
    display: block; padding: 0.85rem 0;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--kxp-grey-100);
}

@media (max-width: 900px) {
    /* Mobile: back to a single row — wordmark left, burger right. */
    .kxp-hdr__inner { flex-direction: row; justify-content: flex-start; padding-block: 1.15rem; }
    .kxp-nav    { display: none; }
    .kxp-burger { display: block; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.kxp-hero {
    position: relative;
    /* Taller than the photo era, because the source changed shape. The old
       still was a ~2.5:1 panorama that a tall box would have zoomed into; the
       video is 16:9, so a shallow box is what crops it. Still capped below the
       viewport — a full-height hero pushes the whole page under the fold. */
    min-height: min(94svh, 1000px);
    display: flex; align-items: flex-end;
    padding-top: clamp(5rem, 8vh, 7rem);
    padding-bottom: clamp(3rem, 7vh, 5.5rem);
    overflow: hidden;
    /* The ground under the video: what shows before the first frame paints,
       and the whole hero for anyone the video is withheld from. */
    background: var(--kxp-black);
}
/* The photo starts *below* the header rather than running under it. Nudging
   object-position can't solve this: the shot is a 2.5:1 panorama, so on any
   normal viewport `cover` scales it to the hero's height and there is zero
   vertical overflow left to shift — the framing is fixed and Arman's head lands
   behind the nav. Starting the media below the header is the only reliable fix,
   and since the header is white the strip above reads as part of it.
   The fallbacks are the header's measured heights at each of its two layouts,
   so this is correct with JavaScript disabled; redesign.js publishes
   --kxp-hdr-h to refine it after the webfont swaps in. Re-measure both if the
   header's structure changes again. */
.kxp-hero__media {
    position: absolute;
    inset: var(--kxp-hdr-h, 113px) 0 0 0;
    z-index: 0;
}
@media (max-width: 900px) {
    /* Single-row header. */
    .kxp-hero__media { inset: var(--kxp-hdr-h, 76px) 0 0 0; }
}

/* Legibility scrim, now dark. The white wash it replaced was built for a bright
   photo; the video is cinematic and runs from a dark bedroom to a lit cage, so
   a light scrim held the headline in some frames and lost it in others. Dark
   with white type reads at every point in the loop. */
.kxp-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.42) 38%, rgba(10,10,10,0.05) 70%),
        linear-gradient(to right, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 45%, rgba(10,10,10,0) 70%);
}
.kxp-hero__inner { position: relative; z-index: 2; width: 100%; }
/* Hero headline: dialled back from the full display size — the client found it
   too dominant and wanted it closer to takeultra.com's restraint. */
.kxp-hero__title {
    font-size: clamp(2.1rem, 1.1rem + 4.2vw, 3.8rem);
    line-height: 1.02;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.kxp-hero__title { color: var(--kxp-white); }
/* Red on near-black is the one place the brand accent needs lifting — the
   base --kxp-accent is tuned for white grounds and goes muddy here. */
.kxp-hero__title--accent { color: #ff3b30; }
.kxp-hero__scroll {
    position: absolute; z-index: 2; left: 50%; bottom: 28px;
    width: 1px; height: 46px; overflow: hidden;
    transform: translateX(-50%);
}
.kxp-hero__scroll-line {
    display: block; width: 100%; height: 100%;
    background: var(--kxp-white);
    animation: kxp-scroll-cue 2.4s var(--kxp-ease-io) infinite;
}
@keyframes kxp-scroll-cue {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* ── Hero video ──────────────────────────────────────────────────────────────
   Sits on top of the still, in the same box, and fades in only once it is
   actually playing — so a slow start shows the photo rather than black, and a
   failure leaves the photo in place for good. The still keeps its drift; the
   video has motion of its own and does not need any added. */
.kxp-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Centred, unlike the still. The photo is a 2.5:1 panorama with no headroom
       above Arman, so it is anchored to the top; the video is 16:9 in a box
       nearer 3:1, which keeps only about 58% of its height — anchoring that to
       the top crops to the eyes alone. */
    object-position: center center;
    opacity: 0;
    transition: opacity 900ms var(--kxp-ease-io);
    pointer-events: none;
}
.kxp-hero__video.is-playing { opacity: 1; }


/* Reduced motion means reduced motion: an 11 MB autoplaying loop is exactly
   what this setting exists to stop. The photo already carries the hero. */
/* Reduced motion means reduced motion: an 11 MB autoplaying loop is exactly
   what this setting exists to stop. These visitors get the dark ground. */
@media (prefers-reduced-motion: reduce) {
    .kxp-hero__video { display: none; }
}

/* ── Section alignment ───────────────────────────────────────────────────────
   The page read as all-left-aligned; the client wanted an alternating left /
   centre / right rhythm (feedback #58). These utilities shift a section's text
   block without disturbing its grids. Only applied at ≥760px — on mobile
   everything stays left for readability. */
@media (min-width: 760px) {
    .kxp-align-center { text-align: center; }
    .kxp-align-center .kxp-eyebrow,
    .kxp-align-center .kxp-lead,
    .kxp-align-center .kxp-body,
    .kxp-align-center .kxp-philosophy__body,
    .kxp-align-center .kxp-philosophy__close { margin-inline: auto; }
    /* The fights list stays left-aligned (its dashes + hover slide read from the
       left) even inside a centred section — only the block is centred. */
    .kxp-align-center .kxp-fights { text-align: left; }
    /* Same rule for the benefits ticks: the block centres, the rows don't. */
    .kxp-align-center .kxp-benefits__list { text-align: left; }

    .kxp-align-right { text-align: right; }
    .kxp-align-right .kxp-eyebrow,
    .kxp-align-right .kxp-lead,
    .kxp-align-right .kxp-body { margin-left: auto; margin-right: 0; }
}

/* ── Philosophy ─────────────────────────────────────────────────────────── */
.kxp-philosophy__lead { margin-block: 1.2rem 3rem; }
/* Wider than the default text measure — the client felt it sat too narrow/left. */
.kxp-philosophy__body { max-width: 860px; }
.kxp-fights {
    list-style: none; margin: 2.5rem 0 0; padding: 0;
    border-top: 1px solid var(--kxp-grey-100);
}
/* Each "sometimes" is its own beat — a rule per line, no numbering:
   these are alternatives, not a sequence. */
.kxp-fights li {
    padding: 1.15rem 0 1.15rem 1.5rem;
    border-bottom: 1px solid var(--kxp-grey-100);
    color: var(--kxp-grey-700);
    position: relative;
    transition: color 0.4s var(--kxp-ease), padding-left 0.4s var(--kxp-ease);
}
.kxp-fights li::before {
    content: ""; position: absolute; left: 0; top: 1.75rem;
    width: 6px; height: 1px; background: var(--kxp-grey-300);
    transition: width 0.4s var(--kxp-ease), background 0.4s var(--kxp-ease);
}
.kxp-fights li:hover { color: var(--kxp-black); padding-left: 1.9rem; }
.kxp-fights li:hover::before { width: 14px; background: var(--kxp-accent); }
.kxp-philosophy__close {
    margin-top: 2.5rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.3;
}

/* ── Lifestyle ──────────────────────────────────────────────────────────── */
.kxp-lifestyle__grid {
    display: grid; gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: 1fr;
    align-items: center;
}
.kxp-lifestyle__copy > * + * { margin-top: 1.4rem; }
.kxp-lifestyle__media {
    aspect-ratio: 4 / 5; overflow: hidden;
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.kxp-lifestyle__media img { width: 100%; height: 100%; object-fit: cover; }
/* The real product renders arrived as transparent PNGs, so the can can finally
   sit straight on the dark section. The white plate and the multiply blend that
   used to be here existed only to hide the old JPEG's white rectangle — both are
   now unnecessary, and dropping them lets the pack read against the dark. */
.kxp-lifestyle__media--can {
    position: relative;
    /* The section's own black, painted on the box rather than left transparent:
       the video's lighten blend below needs something inside this box to blend
       against, because the reveal animation can make the box an isolated
       group whose backdrop would otherwise be transparent. Same colour as the
       section, so the still looks exactly as it did. */
    background: var(--kxp-black);
    /* The film's own shape (1422×1080). A square box letterboxed it top and
       bottom, which is what read as badly fitted. */
    aspect-ratio: 1422 / 1080;
    clip-path: none;
}
.kxp-lifestyle__media--can img {
    object-fit: contain;
    padding: clamp(0.5rem, 2vw, 1.5rem);
    transition: opacity 300ms var(--kxp-ease-io);
}

/* The can film. Its background could not be checked on the server (no ffmpeg),
   and a pure-black film would show as a slightly darker rectangle on the
   #0a0a0a section. `lighten` keeps the lighter of the two per channel, so a
   black ground disappears into the section while the white can is untouched —
   and if the film already matches, it changes nothing. */
.kxp-lifestyle__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: lighten;
    opacity: 0;
    transition: opacity 700ms var(--kxp-ease-io);
    pointer-events: none;
}
.kxp-lifestyle__video.is-playing { opacity: 1; }
.kxp-lifestyle__media--can:has(.kxp-lifestyle__video.is-playing) img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .kxp-lifestyle__video { display: none; }
}
@media (min-width: 900px) {
    /* The film is the point of this section, so the media column takes the
       width back from the copy (#129). */
    .kxp-lifestyle__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ── Products ───────────────────────────────────────────────────────────── */
.kxp-products__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.kxp-products__head .kxp-h2 { margin-top: 1.2rem; }
.kxp-line + .kxp-line { margin-top: clamp(4rem, 8vw, 7rem); }
.kxp-line__head {
    display: flex; align-items: baseline; gap: 1rem;
    padding-bottom: 1.2rem; margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--kxp-grey-100);
}
.kxp-line__note { font-size: var(--kxp-step--1); color: var(--kxp-grey-500); letter-spacing: 0.06em; text-transform: uppercase; }

.kxp-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Six flavours per line, so the desktop track is 6 — at 5 the last card was
   stranded alone on a second row.

   minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its content,
   so one long unbreakable string inside a card pushes every track wider than
   its share and the sixth card leaves the screen (#122). */
@media (min-width: 700px)  { .kxp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kxp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kxp-card__link {
    display: flex; flex-direction: column; height: 100%;
    background: var(--kxp-grey-50);
    /* Same chamfer as the CTA — the octagon cue, used sparingly. */
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
    transition: background 0.5s var(--kxp-ease), transform 0.5s var(--kxp-ease);
    position: relative;
}
.kxp-card__link:hover { background: var(--kxp-grey-100); transform: translateY(-4px); }
.kxp-card__media { aspect-ratio: 1; display: grid; place-items: center; padding: 1.25rem; }
.kxp-card__media img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.6s var(--kxp-ease);
}
.kxp-card__link:hover .kxp-card__media img { transform: scale(1.06); }
.kxp-card__body { padding: 0 1.1rem 1.25rem; margin-top: auto; }
.kxp-card__flavour {
    font-family: var(--kxp-font-display);
    font-weight: 700; font-size: var(--kxp-step-0);
    line-height: 1.2; letter-spacing: -0.01em;
}
.kxp-card__meta  { margin-top: 0.3rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }
.kxp-card__price { margin-top: 0.6rem; font-family: var(--kxp-font-display); font-weight: 700; }
/* Catalogue mode empties the price, and an empty line still holds space. */
.kxp-card__price:empty { display: none; }
.kxp-card__price del { color: var(--kxp-grey-300); font-weight: 400; margin-right: 0.35em; }
.kxp-card__cue {
    position: absolute; right: 1.1rem; top: 1.1rem;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kxp-accent);
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.4s var(--kxp-ease), transform 0.4s var(--kxp-ease);
}
.kxp-card__link:hover .kxp-card__cue { opacity: 1; transform: none; }

/* ── Benefits ───────────────────────────────────────────────────────────── */
.kxp-benefits__title { margin-block: 1.2rem 3rem; }
.kxp-benefits__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--kxp-grey-300);
}
@media (min-width: 760px) { .kxp-benefits__list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); } }
.kxp-benefits__list li {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--kxp-grey-300);
    font-size: var(--kxp-step-0);
}
.kxp-benefits__tick { color: var(--kxp-accent); font-size: 0.85em; }
.kxp-benefits__cta { margin-top: 3rem; }

/* ── Instagram (placeholder feed) ───────────────────────────────────────── */
.kxp-ig__title { margin-block: 1.2rem 3rem; }
.kxp-ig__title a { transition: color 0.3s var(--kxp-ease); }
.kxp-ig__title a:hover { color: var(--kxp-accent); }
.kxp-ig__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(0.5rem, 1.2vw, 1rem);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .kxp-ig__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .kxp-ig__grid { grid-template-columns: repeat(6, 1fr); } }
.kxp-ig__tile a {
    display: block; position: relative;
    aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--kxp-grey-50);
    /* Half the shots are products cut out on white, which on a white section
       have no edge at all — the hairline is what keeps the grid reading as six
       tiles instead of three floating photos. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
}
.kxp-ig__tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s var(--kxp-ease);
}
.kxp-ig__tile a:hover img { transform: scale(1.06); }
/* The veil carries the only red on the grid — it appears on hover so the tiles
   read as photography first and as links second. */
.kxp-ig__veil {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(225, 6, 0, 0.82);
    color: var(--kxp-white);
    opacity: 0;
    transition: opacity 0.4s var(--kxp-ease);
}
.kxp-ig__tile a:hover .kxp-ig__veil,
.kxp-ig__tile a:focus-visible .kxp-ig__veil { opacity: 1; }
.kxp-ig__veil svg { width: 26px; height: 26px; }

/* ── The Science (Enixytil™) ────────────────────────────────────────────── */
.kxp-science__head { max-width: var(--kxp-max-text); }
.kxp-science__head .kxp-h2 { margin-block: 1.2rem 1.5rem; }
.kxp-science__accent { color: var(--kxp-accent); }

/* Head text left, the Dual Source animation right. Below 1080px the film
   stacks under the text, ahead of the four numbered points. */
.kxp-science__top {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 1080px) {
    .kxp-science__top--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.kxp-science__media {
    position: relative;
    aspect-ratio: 1174 / 604;
    /* Same reasoning as the can film: lighten needs a backdrop inside the
       reveal group, and this is the section's own black. */
    background: var(--kxp-black);
}
.kxp-science__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: lighten;
    opacity: 0;
    transition: opacity 700ms var(--kxp-ease-io);
    pointer-events: none;
}
.kxp-science__video.is-playing { opacity: 1; }
/* No still exists for this one, so reduced-motion visitors get the head as it
   was — text only — rather than an empty black box. */
@media (prefers-reduced-motion: reduce) {
    .kxp-science__media { display: none; }
}

.kxp-science__grid {
    list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
    display: grid; gap: 0;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255,255,255,0.14);
}
@media (min-width: 700px)  { .kxp-science__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .kxp-science__grid { grid-template-columns: repeat(4, 1fr); } }

.kxp-science__item {
    padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 1.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* Vertical rules between columns on wide screens. */
@media (min-width: 1080px) {
    .kxp-science__item { border-bottom: 0; padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid rgba(255,255,255,0.14); }
    .kxp-science__item:first-child { padding-left: 0; border-left: 0; }
}
.kxp-science__num {
    display: block;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    color: var(--kxp-accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.9rem;
}
.kxp-science__title {
    font-size: var(--kxp-step-0);
    font-family: var(--kxp-font-display);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
.kxp-science__text { font-size: var(--kxp-step--1); color: var(--kxp-grey-300); line-height: 1.6; }
.kxp-science__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ── Footer ─────────────────────────────────────────────────────────────────
   Light grey, the same plate colour used by the benefits band and the product
   cards — the page stays in one register from top to bottom. */
.kxp-ftr {
    background: var(--kxp-grey-50);
    color: var(--kxp-black);
    padding-block: clamp(4rem, 9vw, 7rem) 2rem;
    border-top: 1px solid var(--kxp-grey-100);
}
.kxp-ftr__top {
    display: grid; gap: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--kxp-grey-300);
}
@media (min-width: 900px) { .kxp-ftr__top { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.kxp-ftr__statement {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-2);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em; text-transform: uppercase;
}
.kxp-ftr__statement--accent { color: var(--kxp-accent); }
.kxp-ftr__note { margin-block: 0.6rem 1.2rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }
.kxp-ftr__form { display: flex; max-width: 420px; }
.kxp-ftr__form input {
    flex: 1; padding: 0.95rem 1.1rem;
    background: var(--kxp-white); color: var(--kxp-black);
    border: 1px solid var(--kxp-grey-300); border-right: 0;
    font-family: inherit; font-size: var(--kxp-step--1);
    transition: border-color 0.3s;
}
.kxp-ftr__form input::placeholder { color: var(--kxp-grey-500); }
.kxp-ftr__form input:focus { outline: none; border-color: var(--kxp-black); }
.kxp-ftr__form button {
    padding-inline: 1.4rem; background: var(--kxp-black); color: var(--kxp-white);
    font-size: var(--kxp-step-0);
    transition: background 0.3s var(--kxp-ease);
}
.kxp-ftr__form button:hover { background: var(--kxp-accent); }

.kxp-ftr .kxp-nl-msg { color: var(--kxp-grey-700); }

.kxp-ftr__cols {
    display: grid; gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.kxp-ftr__h { font-family: var(--kxp-font-display); font-size: var(--kxp-step--1); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; }
.kxp-ftr__col ul { list-style: none; margin: 0; padding: 0; }
.kxp-ftr__col li + li { margin-top: 0.6rem; }
.kxp-ftr__col a { font-size: var(--kxp-step--1); color: var(--kxp-grey-700); transition: color 0.3s; }
.kxp-ftr__col a:hover { color: var(--kxp-accent); }

/* Social icons (feedback #53). Render only for configured accounts. */
.kxp-ftr__social {
    display: flex; gap: 0.75rem;
    padding-block: 1.75rem 0;
}
.kxp-ftr__social-link {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--kxp-grey-300);
    color: var(--kxp-grey-700);
    transition: color 0.3s var(--kxp-ease), border-color 0.3s var(--kxp-ease), background 0.3s var(--kxp-ease);
}
.kxp-ftr__social-link:hover {
    color: var(--kxp-white);
    background: var(--kxp-accent);
    border-color: var(--kxp-accent);
}

.kxp-ftr__base {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--kxp-grey-300);
    font-size: var(--kxp-step--1); color: var(--kxp-grey-500);
}
.kxp-ftr__badge { background: var(--kxp-accent); color: var(--kxp-white); font-weight: 700; padding: 2px 7px; font-size: 10px; letter-spacing: 0.1em; }

/* ── Cookie consent ─────────────────────────────────────────────────────── */
.kxp-consent {
    position: fixed; inset: auto 0 0 0; z-index: 9500;
    background: var(--kxp-white);
    border-top: 2px solid var(--kxp-black);
    box-shadow: 0 -8px 32px rgba(0,0,0,.1);
}
.kxp-consent[hidden] { display: none; }
.kxp-consent__inner {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(1.1rem, 3vw, 1.75rem) var(--kxp-gutter);
    display: grid; gap: 1rem;
}
.kxp-consent__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1); font-weight: 800;
    letter-spacing: -.01em; margin: 0 0 .35rem;
}
.kxp-consent__copy p { margin: 0; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); max-width: 70ch; }

.kxp-consent__cats { display: grid; gap: .7rem; }
.kxp-consent__cats[hidden] { display: none; }
.kxp-consent__cat {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .75rem .9rem;
    background: var(--kxp-grey-50);
    font-size: var(--kxp-step--1); cursor: pointer;
}
.kxp-consent__cat--locked { opacity: .75; cursor: default; }
.kxp-consent__cat input { margin-top: .2rem; accent-color: var(--kxp-accent); flex: 0 0 auto; }
.kxp-consent__cat strong { display: block; color: var(--kxp-black); font-family: var(--kxp-font-display); }
.kxp-consent__cat em { font-style: normal; color: var(--kxp-grey-700); }

/* All three controls share one style. A prominent Accept beside a faint Reject
   is the pattern regulators single out, so there is no visual hierarchy here. */
.kxp-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.kxp-consent__btn {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .75rem 1.35rem;
    border: 1px solid var(--kxp-black);
    background: var(--kxp-white); color: var(--kxp-black);
    cursor: pointer;
    transition: background .25s var(--kxp-ease), color .25s var(--kxp-ease);
}
.kxp-consent__btn:hover { background: var(--kxp-black); color: var(--kxp-white); }
.kxp-consent__btn:focus-visible { outline: 2px solid var(--kxp-accent); outline-offset: 2px; }
.kxp-consent__btn--save { border-color: var(--kxp-accent); color: var(--kxp-accent-dk); }
.kxp-consent__btn--save[hidden] { display: none; }
.kxp-consent__reopen {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-decoration: underline;
}
@media (min-width: 900px) {
    .kxp-consent__inner { grid-template-columns: 1fr auto; align-items: center; }
    .kxp-consent__cats { grid-column: 1 / -1; }
}

/* ── Age gate ───────────────────────────────────────────────────────────── */
.kxp-age {
    position: fixed; inset: 0; z-index: 9900;
    display: grid; place-items: center;
    padding: var(--kxp-gutter);
    background: var(--kxp-white);
}
.kxp-age__card { max-width: 30rem; width: 100%; text-align: center; }
.kxp-age__mark {
    font-family: var(--kxp-font-display);
    font-weight: 800; font-size: var(--kxp-step-0);
    letter-spacing: .16em; text-transform: uppercase;
    margin: 0 0 clamp(2rem, 6vh, 3.5rem);
}
.kxp-age__mark span { color: var(--kxp-accent); font-size: 1.426em; line-height: 1; vertical-align: -.019em; }
.kxp-age__title {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
    text-transform: uppercase; margin: 0;
}
.kxp-age__text { margin: 1rem auto 0; max-width: 42ch; color: var(--kxp-grey-700); font-size: var(--kxp-step--1); }
.kxp-age__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2rem; }
.kxp-age__actions[hidden] { display: none; }
.kxp-age__btn {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .85rem 1.6rem;
    border: 1px solid var(--kxp-black);
    background: var(--kxp-white); color: var(--kxp-black);
    cursor: pointer;
    transition: background .25s var(--kxp-ease), color .25s var(--kxp-ease);
}
.kxp-age__btn--yes { background: var(--kxp-black); color: var(--kxp-white); }
.kxp-age__btn:hover { background: var(--kxp-accent); border-color: var(--kxp-accent); color: var(--kxp-white); }
.kxp-age__btn:focus-visible { outline: 2px solid var(--kxp-accent); outline-offset: 2px; }
.kxp-age__denied { margin-top: 2rem; color: var(--kxp-accent-dk); font-weight: 600; }
.kxp-age__denied[hidden] { display: none; }

/* Benefits now carry a claim and its qualifier, so the row is two lines. */
.kxp-benefits__body { display: block; }
.kxp-benefits__body strong {
    display: block;
    font-family: var(--kxp-font-display);
    font-weight: 700;
    color: var(--kxp-black);
}
.kxp-benefits__body em {
    display: block;
    font-style: normal;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
    margin-top: .15rem;
}
.kxp-benefits__list li { align-items: flex-start; }
.kxp-benefits__tick { margin-top: .3rem; }


/* Consent line under the newsletter form. The same wording is stored with each
   sign-up (inc/newsletter.php) — change both together. */
.kxp-ftr__consent { margin-top: 0.7rem; font-size: var(--kxp-step--1); line-height: 1.5; color: var(--kxp-grey-500); }
.kxp-ftr__consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kxp-ftr__consent a:hover { color: var(--kxp-accent); }


/* ── Instagram feed (Smash Balloon) ─────────────────────────────────────────
   The plugin brings its own grid, lightbox and lazy loading; these rules only
   stop it fighting the section around it. Its markup is #sb_instagram, so the
   selectors are scoped to our wrapper rather than written globally. */
.kxp-ig__feed { margin-top: clamp(2rem, 4vw, 3rem); }
.kxp-ig__feed #sb_instagram { padding-bottom: 0 !important; }
.kxp-ig__feed #sb_instagram .sbi_item { padding: 0; }
/* Square crops with the same gap as the rest of the page's grids. */
.kxp-ig__feed #sb_instagram #sbi_images { gap: clamp(0.5rem, 1.2vw, 1rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kxp-ig__feed #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kxp-ig__feed #sb_instagram .sbi_photo_wrap,
.kxp-ig__feed #sb_instagram .sbi_photo { width: 100%; }
.kxp-ig__cta { margin-top: clamp(2rem, 4vw, 2.75rem); }