/* ====================================================================
   2026-09-12 REWORK
   Previewed at /testpage/ as css/testpage.css, merged into home.css when it
   went live, then split out again here (css/rework.css) the same day so the
   reviews page could share it. The .tp-* prefix is kept so the classes stay
   searchable; "tp" was "testpage". A rhythm of deep-dark and warm-ivory
   sections replaces the gray-800 / gray-900 zebra, which was too close in
   value to read as alternation. Anything novel is plain CSS: the Tailwind
   artifact is not extended. Loaded by index.njk and reviews.njk.
   ==================================================================== */

#main-content {
    --tp-dark: #0E0F12;
    --tp-dark-2: #15161B;
    --tp-ivory: #F5F0E8;
    --tp-ivory-2: #EDE6DB;
    --tp-ink: #15161A;
    --tp-body: #454852;
    --tp-muted: #6B6E78;
    --tp-line: rgba(21, 22, 26, 0.12);
    --tp-line-dark: rgba(255, 255, 255, 0.10);
    --tp-red: #E60000;
    --tp-red-hot: #FF5A3C;
    --tp-gold: #E3A93C;
    --tp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --tp-shadow: 0 1px 2px rgba(21, 22, 26, 0.06), 0 12px 32px -18px rgba(21, 22, 26, 0.35);
    --tp-shadow-lift: 0 2px 4px rgba(21, 22, 26, 0.08), 0 24px 44px -20px rgba(21, 22, 26, 0.45);
}

/* ====================================================================
   SECTION GROUNDS
   ==================================================================== */
#main-content .tp-dark { background: var(--tp-dark); color: #D6D7DC; }
#main-content .tp-light { background: var(--tp-ivory); color: var(--tp-body); }

/* The marquee sits between the video and the first light section; give it the
   same deep ground as the dark sections so it reads as the video's edge. */
#main-content .v8-marq { background: var(--tp-dark); border-color: var(--tp-line-dark); }

/* Copied markup carries Tailwind text utilities pitched for a dark ground.
   Re-colour them inside light sections rather than rewriting every element. */
#main-content .tp-light .text-white { color: var(--tp-ink); }
#main-content .tp-light .text-gray-300,
#main-content .tp-light .text-gray-400 { color: var(--tp-body); }
#main-content .tp-light .gradient-warm-text { color: var(--tp-red); }
#main-content .tp-light .service-card-toggle { color: #B80000; }
#main-content .tp-light .service-card-toggle:hover { color: var(--tp-red); }

/* ====================================================================
   SECTION HEADINGS
   Sentence case, weight 600, tight tracking, one accent word in red.
   ==================================================================== */
#main-content .tp-h2 {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0 0 0.75rem;
}
#main-content .tp-dark .tp-h2 { color: #fff; }
#main-content .tp-light .tp-h2 { color: var(--tp-ink); }
#main-content .tp-h2 .tp-acc { color: var(--tp-red-hot); }
#main-content .tp-light .tp-h2 .tp-acc { color: var(--tp-red); }

#main-content .tp-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
}
#main-content .tp-dark .tp-kicker { color: rgba(255, 255, 255, 0.55); }
#main-content .tp-light .tp-kicker { color: var(--tp-muted); }

#main-content .tp-sub {
    max-width: 46rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.6;
    margin: 0 auto;
    text-wrap: pretty;
}
#main-content .tp-dark .tp-sub { color: rgba(255, 255, 255, 0.72); }
#main-content .tp-light .tp-sub { color: var(--tp-body); }

#main-content .tp-center { text-align: center; }
#main-content .tp-center .tp-h2 { margin-inline: auto; }

/* ====================================================================
   BUTTONS
   One primary (red) and one quiet secondary per ground. The hero keeps its
   own .hero-btn pair from home.css untouched.
   ==================================================================== */
#main-content .tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 56px;
    padding: 0 2.2rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s var(--tp-ease),
                color 0.25s var(--tp-ease),
                border-color 0.25s var(--tp-ease),
                box-shadow 0.25s var(--tp-ease),
                transform 0.25s var(--tp-ease);
}
#main-content .tp-btn .tp-arw { display: inline-block; transition: transform 0.3s var(--tp-ease); }
#main-content .tp-btn:hover .tp-arw { transform: translateX(5px); }

#main-content .tp-btn-primary {
    background: var(--tp-red);
    color: #fff;
    box-shadow: 0 14px 36px -14px rgba(230, 0, 0, 0.8);
}
#main-content .tp-btn-primary:hover {
    background: #F41010;
    transform: translateY(-2px);
    box-shadow: 0 20px 48px -14px rgba(230, 0, 0, 0.9);
}
#main-content .tp-btn-primary:active { transform: translateY(0); }

#main-content .tp-light .tp-btn-secondary {
    border: 1.5px solid rgba(21, 22, 26, 0.28);
    color: var(--tp-ink);
    background: transparent;
}
#main-content .tp-light .tp-btn-secondary:hover { border-color: var(--tp-ink); background: rgba(21, 22, 26, 0.04); }
#main-content .tp-dark .tp-btn-secondary {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    background: transparent;
}
#main-content .tp-dark .tp-btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

#main-content .tp-btn:focus-visible {
    outline: 3px solid rgba(255, 107, 53, 0.75);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #main-content .tp-btn, #main-content .tp-btn:hover, #main-content .tp-arw { transform: none; transition: none; }
}

/* ====================================================================
   HERO TRUST LINE
   Under the buttons, styled as the eyebrow's sibling: small, tracked,
   mist-coloured, shadowed for the video. Bound to the CTA group.
   ==================================================================== */
.video-header .tp-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.9rem;
    /* Proof is a different kind of thing from the ask, so it gets the "separate"
       interval rather than the "supporting" one it launched with. Steve: "more
       space underneath the buttons" (2026-09-12). */
    margin-top: var(--v8-s5);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.85);
}
@media (min-width: 768px) { .video-header .tp-trust { font-size: 0.76rem; } }
.video-header .tp-trust-stars { display: inline-flex; gap: 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.video-header .tp-trust-stars svg { width: 0.85rem; height: 0.85rem; fill: var(--tp-gold); }
.video-header .tp-trust-sep { color: rgba(255, 255, 255, 0.35); }
@media (max-width: 480px) {
    /* Three facts do not fit one phone line at this tracking. Stack the stars
       and count on the first row, the two other facts on the second. */
    .video-header .tp-trust { max-width: 22rem; margin-inline: auto; }
}

/* ====================================================================
   HOW IT WORKS (light)
   ==================================================================== */
#main-content .tp-steps {
    display: grid;
    gap: 2rem;
    margin: 2.75rem 0 2.5rem;
}
@media (min-width: 768px) {
    #main-content .tp-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
#main-content .tp-step { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--tp-line); }
#main-content .tp-step-n {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--tp-red);
    margin: 0 0 0.75rem;
    font-variant-numeric: tabular-nums;
}
#main-content .tp-step h3 {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tp-ink);
    margin: 0 0 0.4rem;
}
#main-content .tp-step p { margin: 0; color: var(--tp-body); line-height: 1.55; text-wrap: pretty; }
#main-content .tp-step strong { color: var(--tp-ink); font-weight: 600; }

/* ====================================================================
   BIO (dark, editorial)
   Portrait left, copy right; the float layout of the original is gone.
   ==================================================================== */
#main-content .tp-bio {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 900px) {
    #main-content .tp-bio { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 5.5rem); }
}
#main-content .tp-bio-media { position: relative; }
#main-content .tp-bio-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
#main-content .tp-bio-badge {
    position: absolute;
    right: -0.75rem;
    bottom: -1rem;
    background: var(--tp-dark-2);
    border: 1px solid var(--tp-line-dark);
    border-radius: 0.6rem;
    padding: 0.9rem 1.2rem;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}
@media (min-width: 900px) { #main-content .tp-bio-badge { right: -1.5rem; bottom: 1.5rem; } }
#main-content .tp-bio-badge b {
    display: block;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
}
#main-content .tp-bio-badge b span { color: var(--tp-red-hot); }
#main-content .tp-bio-badge small { display: block; margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

#main-content .tp-pull {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.6rem, 2.9vw, 2.35rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 1.5rem;
    text-wrap: balance;
}
#main-content .tp-pull em { font-style: normal; color: var(--tp-red-hot); }
#main-content .tp-bio-copy p { color: rgba(255, 255, 255, 0.72); line-height: 1.65; margin: 0 0 1rem; text-wrap: pretty; }
#main-content .tp-bio-copy p:last-of-type { margin-bottom: 0; }
#main-content .tp-bio-name {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--tp-line-dark);
}
#main-content .tp-bio-name b { display: block; color: #fff; font-weight: 600; }
#main-content .tp-bio-name small { display: block; color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; }

/* ====================================================================
   REVIEWS (light): a featured quote, then six white cards.
   ==================================================================== */
#main-content .tp-feature {
    max-width: 52rem;
    margin: 2.5rem auto 3rem;
    text-align: center;
}
#main-content .tp-feature-q {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--tp-ink);
    margin: 0.9rem 0 1.2rem;
    text-wrap: balance;
}
#main-content .tp-feature-q::before { content: "\201C"; color: var(--tp-red); }
#main-content .tp-feature-q::after { content: "\201D"; color: var(--tp-red); }
#main-content .tp-src { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
#main-content .tp-src svg { width: 1.15rem; height: 1.15rem; flex: none; }
#main-content .tp-stars { display: inline-flex; gap: 1px; }
#main-content .tp-stars svg { width: 0.95rem; height: 0.95rem; fill: var(--tp-gold); }
#main-content .tp-who b { display: block; color: var(--tp-ink); font-weight: 600; }
#main-content .tp-who small { display: block; color: var(--tp-muted); font-size: 0.85rem; }

#main-content .tp-reviews {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 640px) { #main-content .tp-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #main-content .tp-reviews { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

#main-content .tp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--tp-shadow);
    transition: transform 0.3s var(--tp-ease), box-shadow 0.3s var(--tp-ease), border-color 0.3s var(--tp-ease);
}
@media (hover: hover) {
    #main-content .tp-card:hover { transform: translateY(-4px); box-shadow: var(--tp-shadow-lift); border-color: rgba(21, 22, 26, 0.18); }
}
#main-content .tp-card .tp-src { justify-content: flex-start; margin-bottom: 0.9rem; }
#main-content .tp-card p { color: var(--tp-body); line-height: 1.6; margin: 0 0 1.2rem; text-wrap: pretty; }
#main-content .tp-card .tp-who { margin-top: auto; }
#main-content .tp-card.review-card { cursor: default; }
@media (max-width: 768px) { #main-content .tp-card.review-card { cursor: pointer; } }

/* ====================================================================
   MID-PAGE ASK: a full-bleed image band with a single line and a button.
   ==================================================================== */
#main-content .tp-band {
    position: relative;
    isolation: isolate;
    background: var(--tp-dark) url('/images/dance-floor-poster.jpg') center / cover no-repeat;
    color: #fff;
    text-align: center;
}
#main-content .tp-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(14, 15, 18, 0.82), rgba(14, 15, 18, 0.62) 50%, rgba(14, 15, 18, 0.82));
}
#main-content .tp-band .tp-h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
#main-content .tp-band .tp-sub { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
#main-content .tp-band .tp-btn { margin-top: 2rem; }

/* ====================================================================
   PACKAGES (light): the copied service cards, re-grounded.
   ==================================================================== */
#main-content .tp-light .tp-svc {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 0.75rem;
    box-shadow: var(--tp-shadow);
    transition: transform 0.3s var(--tp-ease), box-shadow 0.3s var(--tp-ease);
}
@media (hover: hover) {
    #main-content .tp-light .tp-svc:hover { transform: translateY(-4px); box-shadow: var(--tp-shadow-lift); }
}
#main-content .tp-svc h3 { color: var(--tp-ink); font-weight: 600; letter-spacing: -0.015em; }
#main-content .tp-svc p, #main-content .tp-svc li { color: var(--tp-body); }
#main-content .tp-svc .service-card-content:not(.expanded):not(.fits-naturally)::after {
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 90%);
}
#main-content .tp-svc-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--tp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -10px rgba(21, 22, 26, 0.7);
    margin-bottom: 1rem;
}
#main-content .tp-svc-icon svg { width: 1.6rem; height: 1.6rem; color: #fff; }
#main-content .tp-pill {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(14, 15, 18, 0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* "Everything is covered": the nine-icon grid, folded into one quiet row. */
#main-content .tp-covered {
    margin-top: 3.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--tp-line);
}
#main-content .tp-covered h3 {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tp-ink);
    margin: 0 0 0.35rem;
    text-align: center;
}
#main-content .tp-covered > p { text-align: center; color: var(--tp-muted); margin: 0 0 1.5rem; }
#main-content .tp-covered ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
}
@media (min-width: 768px) { #main-content .tp-covered ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { #main-content .tp-covered ul { grid-template-columns: repeat(6, 1fr); } }
#main-content .tp-covered li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--tp-body);
    line-height: 1.4;
}
#main-content .tp-covered li::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--tp-red);
}
#main-content .tp-covered li b { display: block; color: var(--tp-ink); font-weight: 600; }

/* ====================================================================
   VENUES (dark): the grid is untouched; the button stops growing on hover.
   ==================================================================== */
#main-content .tp-venue-btn { transform: none !important; }

/* ====================================================================
   FAQ (light): native details/summary, no script.
   ==================================================================== */
#main-content .tp-faq {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    border-top: 1px solid var(--tp-line);
}
#main-content .tp-faq details { border-bottom: 1px solid var(--tp-line); }
#main-content .tp-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 0;
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tp-ink);
}
#main-content .tp-faq summary::-webkit-details-marker { display: none; }
#main-content .tp-faq summary::after {
    content: "+";
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--tp-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    color: var(--tp-red);
    transition: transform 0.3s var(--tp-ease);
}
#main-content .tp-faq details[open] summary::after { transform: rotate(45deg); }
#main-content .tp-faq summary:focus-visible { outline: 2px solid var(--tp-red); outline-offset: 4px; border-radius: 4px; }
#main-content .tp-faq details p { margin: 0 0 1.25rem; color: var(--tp-body); line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
#main-content .tp-faq-more { text-align: center; margin-top: 2rem; }
#main-content .tp-link {
    color: var(--tp-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(21, 22, 26, 0.3);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s var(--tp-ease);
}
#main-content .tp-link:hover { text-decoration-color: var(--tp-red); }

/* ====================================================================
   CLOSING (dark)
   ==================================================================== */
#main-content .tp-featured {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--tp-line-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
#main-content .tp-featured a, #main-content .tp-featured span { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
#main-content .tp-featured img { width: 3rem; height: 3rem; object-fit: contain; border-radius: 50%; }
#main-content .tp-featured a:hover { color: #fff; }
#main-content .tp-close .tp-h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
#main-content .tp-close .tp-btn { margin-top: 2rem; }
#main-content .tp-alt { margin-top: 1.4rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); }
#main-content .tp-alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.35); }
#main-content .tp-alt a:hover { text-decoration-color: #fff; }

/* ====================================================================
   STICKY MOBILE BAR
   Phones only. Appears once the hero has scrolled out; the hero's own button
   is on screen before that. Hidden while the checker dialog is open.
   ==================================================================== */
.tp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 15, 18, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--tp-line-dark, rgba(255, 255, 255, 0.1));
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 767px) { .tp-sticky { display: flex; } }
.tp-sticky.is-on { transform: translateY(0); }
.tp-sticky .tp-sticky-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    background: #E60000;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}
.tp-sticky .tp-sticky-wa {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
}
.tp-sticky .tp-sticky-wa svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
body:has(#wdjm:not([hidden])) .tp-sticky { display: none; }
.tp-sticky .tp-sticky-up {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1A1B20;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.tp-sticky .tp-sticky-up svg { width: 1.3rem; height: 1.3rem; }
.tp-sticky .tp-sticky-up:focus-visible { outline: 2px solid #FF6B35; outline-offset: 2px; }
@media (max-width: 767px) {
    /* The bar carries its own scroll-to-top, so the footer's floating one is
       hidden here rather than pushed up above the bar (Steve, 2026-09-12:
       "move the up arrow next to the WhatsApp button"). Desktop keeps it. */
    body.tp-page #scroll-to-top { display: none; }
    body.tp-page footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .tp-sticky { transition: none; }
}