/**
 * Marketing homepage — Figma "Charlies - Homepage" (node 176:214).
 * Rendered by [charlies_home] (class-charlies-home.php).
 *
 * The comp is drawn at 1728px wide. Fixed pixel values from the design are
 * expressed as clamp()s against that width so the layout scales smoothly
 * between phone and large desktop rather than snapping at breakpoints.
 *
 * Design tokens lifted from the file:
 *   red        #ff0006     buttons, prices accent
 *   price red  #fe0000
 *   dark       #151011     hero tint
 *   tile tint  #120c0d
 *   product    #320a10     product names
 *   body       #000 @ 60%  paragraph copy
 */

/* ── Full-bleed stage ─────────────────────────────────────────────────────
   The theme wraps page content in a padded container; break out with the
   100vw / negative-margin trick so sections span edge to edge. */
.cfc-home {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-color: #fff;
    overflow-x: clip; /* nothing here may cause horizontal scroll */
}

/* Arial everywhere, overriding the theme's fonts (matches the other pages). */
.cfc-home,
.cfc-home * {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    box-sizing: border-box;
}

.cfc-home img,
.cfc-home video {
    max-width: 100%;
}

/* betheme underlines links on hover (be.css: `a:hover{text-decoration:underline}`)
   and paints that underline in the link colour — which is why hovering a tile
   drew a red line under its white title. Nothing on this page wants an
   underline, so clear it in every state. Two classes beats the theme's
   `a:hover`, so no !important is needed. */
.cfc-home a,
.cfc-home a:link,
.cfc-home a:visited,
.cfc-home a:hover,
.cfc-home a:focus,
.cfc-home a:active {
    text-decoration: none;
}

/* The theme puts markers and indents on every <ul>/<li>; our lists are
   layout grids, so strip them at the source rather than per-component. */
.cfc-home ul,
.cfc-home li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfc-home li::before,
.cfc-home li::marker {
    content: none;
}

/* ── Buttons (218 × 75 in the comp, square corners) ───────────────────── */
.cfc-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(180px, 14vw, 218px);
    /* 44px floor keeps the tap target usable on phones. */
    min-height: clamp(52px, 4.4vw, 75px);
    padding: 0 clamp(20px, 2vw, 28px);
    border: 0;
    border-radius: 0;
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.cfc-home-btn:hover,
.cfc-home-btn:focus-visible {
    transform: translateY(-2px);
    text-decoration: none;
}

.cfc-home-btn--red,
.cfc-home-btn--red:visited { background-color: #ff0006; color: #fff; }
.cfc-home-btn--red:hover,
.cfc-home-btn--red:focus-visible { background-color: #d90005; color: #fff; }

.cfc-home-btn--white,
.cfc-home-btn--white:visited { background-color: #fff; color: #000; }
.cfc-home-btn--white:hover,
.cfc-home-btn--white:focus-visible { background-color: #f0f0f0; color: #000; }

.cfc-home-btn--black,
.cfc-home-btn--black:visited { background-color: #000; color: #fff; }
.cfc-home-btn--black:hover,
.cfc-home-btn--black:focus-visible { background-color: #262626; color: #fff; }

/* WHY SOME IMAGE SELECTORS BELOW ARE DOUBLED UP (`.cfc-home .cfc-home-…`)
   betheme ships `.content_wrapper img { height: auto }` (be.css) — a class
   plus an element, which outranks a lone class of ours and quietly defeats
   every object-fit crop on this page: the image falls back to its own ratio,
   so a frame either shows a gap (the hero background stopped 30px short on
   phones) or overflows and crops from the top edge, ignoring object-position.
   The extra class settles it. Don't "tidy" them back to one. */

/* ── Shared background media (hero + quote band) ──────────────────────────
   The still image sits underneath and the video layers on top of it, so a
   slow-loading or autoplay-blocked video leaves the image visible instead of
   a black hole. home.js adds .is-playing once the video can actually play. */
.cfc-home-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cfc-home .cfc-home-media picture,
.cfc-home .cfc-home-media__img,
.cfc-home .cfc-home-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cfc-home-media__video {
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

/* YouTube / Vimeo player. An iframe can't be object-fit: cover, so size it to
   overflow whichever axis is short and centre it — cover, done by hand.
   --hp-media-ar is the real width÷height of the source video (PHP looks it up
   from Vimeo), NOT a fixed 16:9: a vertical phone clip in a 16:9 frame gets
   pillarboxed by the player and never fills the width. --hp-media-h is the
   section height the editor set; the section spans the viewport, so its width
   is 100vw. Both axes are guaranteed at least 100%, so it always covers. */
.cfc-home-media__embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, calc(var(--hp-media-h, 820px) * var(--hp-media-ar, 1.7778)));
    height: max(100%, calc(100vw / var(--hp-media-ar, 1.7778)));
    border: 0;
    opacity: 0;
    transition: opacity .8s ease;
    /* Never swallow clicks — the buttons sit above this. */
    pointer-events: none;
}

.cfc-home-media__embed.is-playing { opacity: 1; }

/* No still image behind it, so there's nothing to wait for. */
.cfc-home-media__embed:only-child { opacity: 1; }

/* Video-only (no still image behind it) — show it immediately. */
.cfc-home-media__video:only-child { opacity: 1; }

.cfc-home-media__video.is-playing { opacity: 1; }

/* ── 1. Hero ─────────────────────────────────────────────────────────── */
.cfc-home-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hp-hero-h, 820px);
    /* Feeds the iframe cover maths above. */
    --hp-media-h: var(--hp-hero-h, 820px);
    padding: clamp(48px, 6vh, 96px) clamp(20px, 5vw, 80px);
    background-color: #151011; /* shows through before the image paints */
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Full-screen hero (desktop only — the phone rule below still wins on its own
   height). The site header is fixed and the body is padded down to clear it,
   so a true 100vh section would push its own height past the fold; subtract
   the header instead. --cfc-h-height-actual is published by the header's JS
   from the live element (it grows with the marquee / a taller logo), and the
   static desktop height is the pre-JS fallback. svh keeps mobile browsers'
   collapsing toolbars from making the section taller than the visible area. */
.cfc-home-hero--full {
    --hp-hero-h: calc(100vh - var(--cfc-h-top, 0px) - var(--cfc-h-height-actual, var(--cfc-h-height-desktop, 96px)));
}

@supports (height: 100svh) {
    .cfc-home-hero--full {
        --hp-hero-h: calc(100svh - var(--cfc-h-top, 0px) - var(--cfc-h-height-actual, var(--cfc-h-height-desktop, 96px)));
    }
}

.cfc-home-hero__tint {
    position: absolute;
    inset: 0;
    background-color: var(--hp-hero-tint, #151011);
    opacity: var(--hp-hero-alpha, .6);
    pointer-events: none;
}

.cfc-home-hero__inner {
    position: relative;
    z-index: 1;
    /* Wide enough for the headline to hold one line at full size; the sub-head
       and buttons keep their own narrower caps below. */
    max-width: 1600px;
    width: 100%;
}

.cfc-home-hero__title {
    margin: 0;
    color: #fff;
    /* Same ramp as the quote band's display line — 95px at 1728px wide. */
    font-size: var(--hp-hero-size, clamp(28px, 5.5vw, 95px));
    font-weight: 700;
    line-height: .98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    /* One line on desktop. The size tracks the viewport at the same rate as the
       section's padding, so the line keeps its margins at every width down to
       the phone breakpoint, where it's allowed to wrap again. */
    white-space: nowrap;
}

/* Headline artwork instead of type. The <h1> stays put — it keeps the heading
   in the document outline, carries the wording as alt text, and is still what
   the reveal fades in — so only its contents change. */
.cfc-home-hero__title--img {
    line-height: 0;
}

.cfc-home-hero__title--img img {
    display: block;
    height: var(--hp-hero-img-h, 50px);
    width: auto;
    max-width: 100%;
    /* Keeps the ratio when a narrow screen forces the box below the set
       height, instead of squashing the artwork. */
    object-fit: contain;
    margin: 0 auto;
}

/* The phone fallback wording — hidden until the phone breakpoint swaps it in. */
.cfc-home-hero__title-text { display: none; }

.cfc-home-hero__sub {
    margin: clamp(14px, 1.6vw, 22px) auto 0;
    max-width: 620px;
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1.5;
    opacity: .9;
}

.cfc-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(26px, 3.5vw, 55px);
}

/* ── 2. Menu highlights ──────────────────────────────────────────────── */
.cfc-home-menu {
    padding: clamp(36px, 4.5vw, 62px) clamp(16px, 1.9vw, 33px) clamp(40px, 5vw, 78px);
}

.cfc-home-menu__tabs {
    display: flex;
    justify-content: center;
    gap: clamp(28px, 3.5vw, 60px);
    margin: 0 auto clamp(28px, 3vw, 48px);
    /* The grey rule runs under the whole tab row; the active tab paints its
       own black segment over it (Line 1 / Line 2 in the comp). */
    border-bottom: 3px solid rgba(0, 0, 0, .15);
    width: max-content;
    max-width: 100%;
}

.cfc-home-menu__tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    padding: 0 4px 12px;
    /* 44px tap target on touch without inflating the desktop look. */
    min-height: 44px;
    color: #000;
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: .55;
    transition: opacity .18s ease, border-color .18s ease;
}

.cfc-home-menu__tab:hover { opacity: .85; }

.cfc-home-menu__tab.is-active {
    opacity: 1;
    border-bottom-color: #000;
}

.cfc-home-menu__panel[hidden] { display: none; }

.cfc-home-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cfc-home-card { min-width: 0; }

/* Renders as <a>, <div> or — when the card opens the product popup — <button>,
   so the button defaults (grey face, border, centred text) are cleared here
   rather than the three variants looking different from each other. */
.cfc-home-card__link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

button.cfc-home-card__link {
    cursor: pointer;
}

.cfc-home-card__media {
    display: block;
    /* 408 × 461 in the comp. */
    aspect-ratio: 408 / 461;
    overflow: hidden;
    background-color: #f2f2f2;
}

.cfc-home .cfc-home-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.cfc-home-card__link:hover .cfc-home-card__media img { transform: scale(1.04); }

.cfc-home-card__title {
    display: block;
    margin-top: clamp(10px, 1vw, 17px);
    color: #320a10;
    font-size: clamp(16px, 1.28vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.cfc-home-card__price {
    display: block;
    margin-top: clamp(4px, .5vw, 9px);
    color: #fe0000;
    font-size: clamp(16px, 1.28vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── 3. Pre-order ────────────────────────────────────────────────────── */
.cfc-home-preorder {
    padding: clamp(20px, 2vw, 30px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 90px);
    text-align: center;
}

.cfc-home-preorder__title {
    margin: 0;
    color: #000;
    font-size: clamp(28px, 2.6vw, 45px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.cfc-home-preorder__sub {
    margin: clamp(14px, 1.7vw, 29px) auto clamp(20px, 2.2vw, 34px);
    max-width: 640px;
    color: #000;
    font-size: clamp(15px, 1.28vw, 22px);
    line-height: 1.4;
}

/* ── 4. Quote band ───────────────────────────────────────────────────── */
.cfc-home-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hp-band-h, 680px);
    /* Feeds the iframe cover maths above. */
    --hp-media-h: var(--hp-band-h, 680px);
    padding: clamp(40px, 6vh, 90px) clamp(20px, 5vw, 80px);
    background-color: #151011;
    color: #fff;
    overflow: hidden;
    text-align: center;
}

.cfc-home-band__tint {
    position: absolute;
    inset: 0;
    background-color: var(--hp-band-tint, #000);
    opacity: var(--hp-band-alpha, .45);
    pointer-events: none;
}

.cfc-home-band__inner {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    width: 100%;
}

.cfc-home-band__title {
    margin: 0;
    color: #fff;
    font-size: var(--hp-band-size, clamp(28px, 5.5vw, 95px));
    font-weight: 700;
    line-height: .98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Artwork instead of type — same deal as the hero: the <h2> stays for the
   outline and the alt text, only its contents change. object-fit keeps the
   ratio when a narrow screen forces the box below the set height. */
.cfc-home-band__title--img {
    line-height: 0;
}

.cfc-home-band__title--img img {
    display: block;
    height: var(--hp-band-img-h, 50px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.cfc-home-band__title-text { display: none; }

.cfc-home-band__inner .cfc-home-btn { margin-top: clamp(24px, 3vw, 44px); }

/* ── 5. Photo tiles ──────────────────────────────────────────────────── */
.cfc-home-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
    padding: clamp(24px, 3vw, 48px);
}

.cfc-home-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 544 × 694 in the comp. */
    aspect-ratio: 544 / 694;
    overflow: hidden;
    background-color: #120c0d;
    color: #fff;
    text-decoration: none;
}

.cfc-home .cfc-home-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

a.cfc-home-tile:hover .cfc-home-tile__img { transform: scale(1.04); }

.cfc-home-tile__tint {
    position: absolute;
    inset: 0;
    background-color: var(--hp-tile-tint, #120c0d);
    opacity: var(--hp-tile-alpha, .4);
}

.cfc-home-tile__title {
    position: relative;
    z-index: 1;
    padding: 0 16px;
    color: #fff;
    font-size: clamp(22px, 2.44vw, 42px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    text-transform: uppercase;
}

/* ── 6. Feature rows ─────────────────────────────────────────────────── */
.cfc-home-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 5vw, 80px);
    max-width: 1564px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 96px) clamp(20px, 6vw, 104px);
}

/* Two EQUAL columns, so the centre line stays put when a row flips sides.
   Unequal columns (the comp's 534 / 776 split) move the divider on alternate
   rows, which makes the photos of one row hang past the photos of the next —
   they read as overlapping even though they never touch. */
.cfc-home-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(32px, 5vw, 96px);
}

/* Image on the left: swap the visual order without touching the DOM order,
   so screen readers and keyboard focus still hit the heading first. */
.cfc-home-row--img-left .cfc-home-row__text  { order: 2; }
.cfc-home-row--img-left .cfc-home-row__media { order: 1; }

.cfc-home-row__title {
    margin: 0;
    color: #000;
    font-size: clamp(22px, 1.85vw, 32px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}

.cfc-home-row__body {
    margin-top: clamp(14px, 1.5vw, 22px);
    /* Hold the comp's 534px measure even though the column is now wider. */
    max-width: 534px;
    color: #000;
    opacity: .6;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.45;
}

.cfc-home-row__body p { margin: 0 0 1em; }
.cfc-home-row__body p:last-child { margin-bottom: 0; }

.cfc-home-row__text .cfc-home-btn { margin-top: clamp(20px, 2vw, 31px); }

.cfc-home-row__media {
    /* 776 × 472 in the comp. */
    aspect-ratio: 776 / 472;
    overflow: hidden;
    background-color: #f2f2f2;
}

.cfc-home .cfc-home-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 7. Instagram ────────────────────────────────────────────────────── */
.cfc-home-insta {
    border-top: 1px solid rgba(0, 0, 0, .15);
    padding-top: clamp(36px, 4vw, 70px);
}

/* Flat 15px, not a viewport ramp: the embedded feed carries about 20px of its
   own inset above its first row, so the heading already sits further off the
   feed than the number suggests. */
.cfc-home-insta__head {
    padding: 0 clamp(20px, 5vw, 80px) 15px;
    text-align: center;
}

.cfc-home-insta__handle {
    display: inline-block;
    color: #000;
    font-size: clamp(15px, 1.28vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-transform: uppercase;
}

a.cfc-home-insta__handle:hover { color: #ff0006; }

.cfc-home-insta__title {
    margin: clamp(10px, 1.5vw, 26px) 0 0;
    color: #000;
    font-size: clamp(26px, 2.6vw, 45px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Third-party embed (Elfsight, EmbedSocial, LightWidget…) dropped in place of
   the hand-picked grid. Edge-to-edge: no padding of our own, and the widget's
   own wrapper/iframe is forced to fill the width — several of these services
   ship a centred fixed-width box by default. */
.cfc-home-insta__feed {
    width: 100%;
    overflow-x: hidden;
}

.cfc-home-insta__feed > *,
.cfc-home-insta__feed iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cfc-home-insta__feed iframe { border: 0; }

.cfc-home-insta__grid {
    display: grid;
    grid-template-columns: repeat(var(--hp-insta-cols, 5), minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cfc-home-insta__cell { min-width: 0; }

.cfc-home-insta__link {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #f2f2f2;
}

.cfc-home .cfc-home-insta__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, opacity .2s ease;
}

a.cfc-home-insta__link:hover img { transform: scale(1.05); opacity: .9; }

/* ── Entrance animations ──────────────────────────────────────────────────
   Same approach as the global footer: home.js adds .cfc-home--anim to the
   page wrapper and .cfc-r to each component, then .is-in when it scrolls into
   view. Nothing is hidden unless JS has run, so a JS failure or an old browser
   leaves every component plainly visible — the animation is pure enhancement.
   The whole block is inside prefers-reduced-motion: no-preference, so users who
   opt out never see anything move (and never see anything hidden either). */
@media (prefers-reduced-motion: no-preference) {

    /* The transition lives on the base class so it applies in BOTH directions.
       Every "from" state below is written as :not(.is-in) — once an element is
       revealed those rules simply stop matching, and it falls back to its
       natural position. Do NOT express the landed state as a competing
       `transform: none` rule: the per-component rules carry the same (or more)
       class specificity, so whichever came last in the file would win and the
       component would stay stuck at its start offset forever. */
    .cfc-home--anim .cfc-r {
        transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
                    transform .75s cubic-bezier(.22, 1, .36, 1);
        will-change: opacity, transform;
    }

    .cfc-home--anim .cfc-r:not(.is-in) {
        opacity: 0;
        transform: translateY(28px);
    }

    /* Bootstrap frame only: home.js drops this class on the next animation
       frame. Nothing may animate while the start states are being applied,
       otherwise an element that's already on screen animates out and back in
       within its own transition delay and never visibly moves. !important
       because the per-component rules below carry higher specificity. */
    .cfc-home--anim-init .cfc-r,
    .cfc-home--anim-init .cfc-r-zoom {
        transition: none !important;
    }

    /* Release the compositor hint once the element has landed. */
    .cfc-home--anim .cfc-r.is-in { will-change: auto; }

    /* Feature-row photos slide in from the edge they're anchored to, so the
       alternating layout reads as one motion rather than two. */
    .cfc-home--anim .cfc-home-row--img-right .cfc-home-row__media.cfc-r:not(.is-in) { transform: translateX(48px); }
    .cfc-home--anim .cfc-home-row--img-left  .cfc-home-row__media.cfc-r:not(.is-in) { transform: translateX(-48px); }
    .cfc-home--anim .cfc-home-row--img-right .cfc-home-row__text.cfc-r:not(.is-in)  { transform: translateX(-32px); }
    .cfc-home--anim .cfc-home-row--img-left  .cfc-home-row__text.cfc-r:not(.is-in)  { transform: translateX(32px); }

    /* Photo tiles and product cards lift with a touch of scale. */
    .cfc-home--anim .cfc-home-tile.cfc-r:not(.is-in),
    .cfc-home--anim .cfc-home-card.cfc-r:not(.is-in) {
        transform: translateY(30px) scale(.985);
    }

    /* Hero / band background: a slow settle from slightly overscaled. The
       media sits behind the tint, so this reads as depth, not movement. */
    .cfc-home--anim .cfc-home-media.cfc-r-zoom {
        transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1);
    }

    .cfc-home--anim .cfc-home-media.cfc-r-zoom:not(.is-in) {
        opacity: 0;
        transform: scale(1.07);
    }

    /* The quote band's display line gets a longer, softer travel. */
    .cfc-home--anim .cfc-home-band__title.cfc-r { transition-duration: .9s; }
    .cfc-home--anim .cfc-home-band__title.cfc-r:not(.is-in) { transform: translateY(36px); }

    /* Hero headline: a straight fade of the whole line — no per-character
       typing. Slower than the default reveal and with no travel, so the
       display type settles rather than slides. */
    .cfc-home--anim .cfc-home-hero__title.cfc-r {
        transition-duration: 1.1s;
    }

    .cfc-home--anim .cfc-home-hero__title.cfc-r:not(.is-in) {
        opacity: 0;
        transform: none;
    }
}

/* Once the rows stack there is no "side" to slide in from, so fall back to a
   plain lift. Equal specificity to the rules above, placed later, so it wins. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1080px) {
    .cfc-home--anim .cfc-home-row .cfc-home-row__media.cfc-r:not(.is-in),
    .cfc-home--anim .cfc-home-row .cfc-home-row__text.cfc-r:not(.is-in) {
        transform: translateY(28px);
    }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .cfc-home-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .cfc-home-tiles {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cfc-home-row,
    .cfc-home-row--img-left {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(20px, 4vw, 32px);
    }

    /* Stacked: photo above the copy in every row, whichever side it sat on. */
    .cfc-home-row__media,
    .cfc-home-row--img-left .cfc-home-row__media { order: 1; }
    .cfc-home-row__text,
    .cfc-home-row--img-left .cfc-home-row__text  { order: 2; }

    .cfc-home-rows { gap: clamp(40px, 6vw, 64px); }
}

/* ── Phone ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .cfc-home-hero {
        min-height: var(--hp-hero-h-m, 520px);
        --hp-media-h: var(--hp-hero-h-m, 520px);
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Too narrow to hold the headline on one line at a readable size — let it
       wrap where it needs to. */
    .cfc-home-hero__title {
        font-size: var(--hp-hero-size-m, clamp(30px, 9vw, 44px));
        white-space: normal;
    }

    /* Artwork out, wording in. A single-line lockup scaled to a phone's width
       lands around 18px tall — the type is the stronger read at this size. */
    .cfc-home-hero__title--swap img { display: none; }

    .cfc-home-hero__title--swap .cfc-home-hero__title-text {
        display: block;
        line-height: .98;
    }

    /* Side by side, splitting the row evenly — two full-width bars ate most of
       the hero. min-width:0 is what lets them shrink past the button's own
       180px floor, and nowrap keeps each label on one line. */
    .cfc-home-hero__actions { gap: 10px; flex-wrap: nowrap; }

    .cfc-home-hero__actions .cfc-home-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        padding: 0 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    .cfc-home-band {
        min-height: var(--hp-band-h-m, 380px);
        --hp-media-h: var(--hp-band-h-m, 380px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .cfc-home-band__title { font-size: var(--hp-band-size-m, clamp(24px, 8vw, 38px)); }

    .cfc-home-band__title--swap img { display: none; }

    .cfc-home-band__title--swap .cfc-home-band__title-text {
        display: block;
        line-height: 1.05;
    }

    /* Editors can opt out of the video on phones to save data. */
    .cfc-home-media__video--desktop { display: none; }

    .cfc-home-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 20px;
    }

    .cfc-home-tile { aspect-ratio: 16 / 11; }

    .cfc-home-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .cfc-home-menu__tabs { gap: 24px; }
}

/* Two cards abreast holds down to ~360px (every current phone); one card per
   screen turns the menu into a very long scroll for four products. Only the
   genuinely tiny handsets drop to a single column. */
@media (max-width: 359px) {
    .cfc-home-menu__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Respect a user's reduced-motion preference: freeze the background videos
   and drop the hover transforms. */
@media (prefers-reduced-motion: reduce) {
    .cfc-home * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .cfc-home-btn:hover,
    .cfc-home-btn:focus-visible { transform: none; }
}