/* =============================================================
   TURF 24×7 — site components
   -------------------------------------------------------------
   Everything specific to Turf 24×7 that the base theme does not
   ship: hero, sport tiles, venue cards, steps, stats, accordion,
   app-store buttons, forms, CTA bands.

   Loads last, so it may override the theme freely.
   ============================================================= */

/* ---------- Accessibility ---------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--primary);
    color: var(--black);
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Header tweaks ----------------------------------- */
#logo img,
#logo-mobie img {
    width: auto;
    height: 80px;
    max-width: none;
    object-fit: contain;
}

.header-inner .logo {
    margin-top: 10px;
    margin-bottom: 10px;
}

.footer .logo-footer img {
    width: auto;
    height: 86px;
    margin-bottom: 18px;
}

.header-top .address address {
    margin: 0;
}

/* ---------- Page title -------------------------------------- */
.page-title {
    background: linear-gradient(180deg, var(--dark-deep) 0%, var(--black) 100%);
}

.tf-page-sub {
    color: var(--secondary-one);
    max-width: 62ch;
    margin: 14px auto 0;
    font-size: 17px;
    line-height: 1.6;
}

.title-box.title-light .title-section,
.title-box.title-light p {
    color: var(--white);
}

/* The theme uses a grey eyebrow on light sections and a lime one on
   dark (.title-box-v2). Lime text on white only reaches 1.4:1, so keep
   that split: grey on light, lime on dark. */
.tf-section.is-dark .title-box .sub-title,
.tf-app .title-box .sub-title,
.title-box.title-light .sub-title {
    color: var(--primary);
}

/* ---------- Hero slider (theme Swiper) ---------------------- */
/* The theme's overlay sits at 0.4 opacity, which leaves the slide's
   body copy at about 3.8:1 over a bright photo. Deepen it on the text
   side only; the picture stays clear on the right where the card sits. */
.tf-slider-widget .image-slider .overlay {
    opacity: 1;
    background:
        linear-gradient(90deg,
            rgba(var(--shade-rgb), .88) 0%,
            rgba(var(--shade-rgb), .72) 34%,
            rgba(var(--shade-rgb), .30) 66%,
            rgba(var(--shade-rgb), .10) 100%),
        linear-gradient(180deg,
            rgba(var(--shade-rgb), .40) 0%,
            rgba(var(--shade-rgb), 0) 28%);
}

/* Keep the slide's eyebrow in the brand lime */
.tf-slider .flat-sub-slider {
    color: var(--primary);
}

/* ---------- Hero (static, used by inner pages) --------------- */
.tf-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--dark-deep);
}

.tf-hero-media {
    position: absolute;
    inset: 0;
}

.tf-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.tf-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--scrim-rgb), .92) 0%, rgba(var(--scrim-rgb), .62) 48%, rgba(var(--scrim-rgb), .25) 100%),
        linear-gradient(180deg, rgba(var(--scrim-rgb), .55) 0%, rgba(var(--scrim-rgb), .2) 40%, rgba(var(--scrim-rgb), .8) 100%);
}

.tf-hero-inner {
    position: relative;
    z-index: 2;
    padding: 130px 0 110px;
    max-width: 680px;
}

.tf-hero .tf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary);
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 18px;
}

.tf-hero .tf-eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
}

.tf-hero h1 {
    color: var(--white);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.04;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tf-hero h1 em {
    font-style: normal;
    color: var(--primary);
}

/* Block spans rather than <br> — the theme hides <br> at mobile widths */
.tf-hero h1 span {
    display: block;
}

.tf-hero p {
    color: #D4DCE8;
    font-size: 18px;
    line-height: 1.65;
    max-width: 48ch;
    margin-bottom: 34px;
}

.tf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.tf-hero-stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    padding: 26px 0 0;
    margin-top: 38px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    max-width: 680px;
}

.tf-hero-stats div span {
    display: block;
    font-family: "Oswald", sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.tf-hero-stats div small {
    color: #A9B6C7;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- Buttons ----------------------------------------- */
.flat-button.btn-ghost {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, .45);
}

.flat-button.btn-ghost:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* ---------- Generic section spacing ------------------------- */
.tf-section {
    padding: 96px 0;
}

.tf-section.is-tight {
    padding: 72px 0;
}

.tf-section.is-light {
    background: var(--surface);
}

.tf-section.is-dark {
    background: var(--black);
}

.tf-section.is-dark .title-section,
.tf-section.is-dark h3,
.tf-section.is-dark h4,
.tf-section.is-dark h5 {
    color: var(--white);
}

.tf-section.is-dark p {
    color: var(--secondary-one);
}

/* ---------- Sport tiles ------------------------------------- */
.tf-sports {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 20px;
}

.tf-sport {
    position: relative;
    display: block;
    padding: 30px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    text-align: center;
    transition: .3s ease;
}

.tf-section.is-dark .tf-sport {
    background: var(--grey);
    border-color: var(--line2);
}

.tf-sport:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 18px 40px rgba(var(--shade-rgb), .12);
}

/* Lime as a fill with a dark glyph, not a lime glyph on white —
   lime strokes on a pale chip are not legible. */
.tf-sport .tf-sport-ico {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--black);
}

.tf-sport-ico svg {
    width: 32px;
    height: 32px;
}

.tf-sport h3 {
    font-size: 20px;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.tf-section.is-dark .tf-sport h3 {
    color: var(--white);
}

.tf-sport span {
    display: block;
    font-size: 14px;
    color: var(--secondary);
}

.tf-section.is-dark .tf-sport span {
    color: var(--secondary-one);
}

.tf-sport.is-soon {
    opacity: .72;
}

.tf-sport .tf-chip {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ---------- Chips / badges ---------------------------------- */
.tf-chip {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--primary);
    color: var(--black);
}

.tf-chip.is-muted {
    background: var(--line);
    color: var(--secondary);
}

.tf-chip.is-dark {
    background: var(--black);
    color: var(--white);
}

/* ---------- Venue / turf cards ------------------------------ */
.tf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}

.tf-filter {
    padding: 10px 22px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    transition: .25s ease;
}

.tf-filter:hover {
    border-color: var(--primary);
}

.tf-filter.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--black);
}

.tf-venues {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 26px;
}

/* Three across on wide screens — used where the set is a multiple of 3 */
@media (min-width: 1200px) {
    .tf-venues.is-3up {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tf-venue {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: .3s ease;
}

.tf-venue:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(var(--shade-rgb), .14);
    border-color: var(--primary);
}

.tf-venue-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--dark-mid);
}

.tf-venue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease, ease);
}

.tf-venue:hover .tf-venue-media img {
    transform: scale(1.06);
}

.tf-venue-media .tf-chip {
    position: absolute;
    top: 14px;
    left: 14px;
}

.tf-venue-price {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(var(--shade-rgb), .9);
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    padding: 6px 13px;
}

.tf-venue-price small {
    font-size: 12px;
    opacity: .75;
}

.tf-venue-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.tf-venue-body h3 {
    font-size: 21px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.25;
}

.tf-venue-body h3 a {
    color: inherit;
}

.tf-venue-body h3 a:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.tf-venue-loc {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--secondary);
}

.tf-venue-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--secondary);
}

.tf-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--black);
}

.tf-rating i,
.tf-rating span.star {
    color: var(--star);
}

.tf-venue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tf-tag {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--secondary);
}

.tf-venue-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.tf-venue-foot a {
    font-family: "Oswald", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tf-venue-foot a:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Placeholder artwork used until real venue photos are dropped in */
.tf-ph {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Feature grid ------------------------------------ */
.tf-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 26px;
}

.tf-feature {
    padding: 34px 30px;
    background: var(--white);
    border: 1px solid var(--line);
    transition: .3s ease;
}

.tf-section.is-dark .tf-feature {
    background: var(--grey);
    border-color: var(--line2);
}

.tf-feature:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.tf-feature-ico {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: var(--black);
    margin-bottom: 20px;
}

.tf-feature-ico svg {
    width: 28px;
    height: 28px;
}

.tf-feature h3 {
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.tf-feature p {
    margin: 0;
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- Steps ------------------------------------------- */
.tf-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 26px;
    counter-reset: step;
}

.tf-step {
    position: relative;
    padding: 36px 28px 30px;
    background: var(--white);
    border: 1px solid var(--line);
}

.tf-section.is-dark .tf-step {
    background: var(--grey);
    border-color: var(--line2);
}

.tf-step-no {
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
    color: var(--black);
    display: block;
    margin-bottom: 14px;
}

/* Lime reads only on dark panels */
.tf-section.is-dark .tf-step-no {
    color: var(--primary);
}

.tf-step h3 {
    font-size: 19px;
    text-transform: uppercase;
    margin: 0 0 9px;
}

.tf-step p {
    margin: 0;
    font-size: 15px;
    color: var(--secondary);
    line-height: 1.65;
}

/* ---------- Stats ------------------------------------------- */
.tf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 20px;
    text-align: center;
}

.tf-stat span.num {
    font-family: "Oswald", sans-serif;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    display: block;
}

.tf-stat small {
    display: block;
    margin-top: 10px;
    color: var(--secondary-one);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 14px;
}

.tf-note {
    text-align: center;
    font-size: 13px;
    color: var(--secondary-one);
    margin-top: 26px;
    font-style: italic;
}

/* Lead paragraph under a section heading */
.tf-lead {
    text-align: center;
    max-width: 62ch;
    margin: -14px auto 40px;
    color: var(--secondary);
    font-size: 17px;
    line-height: 1.6;
}

.tf-section.is-dark .tf-lead {
    color: var(--secondary-one);
}

.tf-center {
    text-align: center;
    margin-top: 44px;
}

/* ---------- Split (image + copy) ---------------------------- */
.tf-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.tf-split.is-reverse .tf-split-media {
    order: 2;
}

.tf-split-media img,
.tf-split-media svg {
    width: 100%;
    height: auto;
    display: block;
}

.tf-split h2 {
    text-transform: uppercase;
    margin-bottom: 18px;
}

.tf-split p {
    margin-bottom: 16px;
    line-height: 1.7;
    color: var(--secondary);
}

.tf-section.is-dark .tf-split p,
.tf-app .tf-split p {
    color: var(--secondary-one);
}

.tf-split .flat-button {
    margin-top: 12px;
}

.tf-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 30px;
}

.tf-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 13px;
    color: var(--secondary);
    line-height: 1.6;
}

.tf-section.is-dark .tf-list li {
    color: var(--secondary-one);
}

.tf-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
}

/* ---------- App / store buttons ----------------------------- */
.tf-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 26px;
}

/* Stand-in button, used until the official store badges are added to
   images/brand/. Deliberately carries no Google or Apple mark, but is
   finished enough to ship: solid fill, pill radius, real contrast. */
.tf-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    color: var(--black);
    min-width: 188px;
    transition: transform .22s ease, box-shadow .22s ease;
    box-shadow: 0 6px 16px rgba(var(--shade-rgb), .20);
}

.tf-store-btn:hover,
.tf-store-btn:focus,
.tf-store-btn:active {
    color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--shade-rgb), .28);
}

/* The theme turns every link lime on :hover and :focus. On a white
   store button that is unreadable, and it sticks after a tap because
   focus stays on the element. Hold the label colour explicitly. */
.tf-store-btn,
.tf-store-btn:hover,
.tf-store-btn:focus,
.tf-store-btn:active,
.tf-store-btn:hover .tf-store-txt small,
.tf-store-btn:hover .tf-store-txt strong,
.tf-store-btn:focus .tf-store-txt small,
.tf-store-btn:focus .tf-store-txt strong,
.tf-store-btn:active .tf-store-txt small,
.tf-store-btn:active .tf-store-txt strong {
    color: var(--black);
}

.tf-store-dark .tf-store-btn,
.tf-store-dark .tf-store-btn:hover,
.tf-store-dark .tf-store-btn:focus,
.tf-store-dark .tf-store-btn:active,
.tf-store-dark .tf-store-btn:hover .tf-store-txt small,
.tf-store-dark .tf-store-btn:hover .tf-store-txt strong,
.tf-store-dark .tf-store-btn:focus .tf-store-txt small,
.tf-store-dark .tf-store-btn:focus .tf-store-txt strong {
    color: #fff;
}

/* Keyboard users still need to see where they are. */
.tf-store-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.tf-store-dark .tf-store-btn {
    background: var(--black);
    color: #fff;
}

.tf-store-dark .tf-store-btn:hover {
    background: var(--black);
    color: #fff;
}

/* An official badge brings its own artwork, so strip the stand-in
   styling back off when one is present. */
.tf-store-btn.is-badge,
.tf-store-dark .tf-store-btn.is-badge {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 0;
}

.tf-store-ico {
    display: grid;
    place-items: center;
    flex: none;
}

.tf-store-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.tf-store-txt small {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
}

.tf-store-txt strong {
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Store links that are not live yet: dim the button and explain once,
   underneath the row, rather than stamping a badge over the label. */
.tf-store-btn.is-soon {
    opacity: 1;
}



.tf-store-note {
    display: none;
    margin: -14px 0 24px;
    font-size: 13px;
    color: var(--secondary-one);
    font-style: italic;
}

.tf-store-note.is-shown {
    display: block;
}

.tf-store-dark + .tf-store-note,
.tf-store-dark ~ .tf-store-note {
    color: var(--secondary);
}

.tf-footer-applead {
    color: var(--secondary-one);
    font-size: 15px;
    margin-bottom: 16px;
}

/* Footer "need help" phone block — theme leaves the number unstyled */
.footer .text-phone .address p {
    color: var(--secondary-one);
    font-size: 14px;
    margin: 0 0 2px;
}

.footer .text-phone .address span,
.footer .text-phone .address span a {
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    letter-spacing: .02em;
}

.footer .text-phone .address span a:hover {
    color: var(--primary);
}

.tf-footer-addr {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--secondary-one);
    font-size: 15px;
}

/* Keep the bottom row clear of the fixed back-to-top button */
@media (min-width: 768px) {
    .footer-bottom .link-footer-bottom {
        padding-right: 60px;
    }
}

/* ---------- Theme layout fixes ------------------------------ */

/* The theme ships .go-top at right:-35px, so two-thirds of the button
   hangs off the right edge at every width. Bring it back on screen. */
.go-top {
    right: 20px;
}

@media (max-width: 767px) {
    .go-top {
        right: 14px;
        bottom: 14px;
    }
}

/* The last top-level menu item sits near the right edge, so its
   220px-wide drop-down ran past the viewport and created horizontal
   scroll from about 992px up. The theme sets `left: 0` on the panel,
   which beats a plain `right: 0` when the width is fixed — hence the
   !important pair here. Anchors the panel to the item's right edge. */
@media (min-width: 992px) {

    #mainnav .menu>li:last-child .submenu,
    #mainnav .menu>li:nth-last-child(2) .submenu,
    #mainnav-mobi .menu>li:last-child .submenu,
    #mainnav-mobi .menu>li:nth-last-child(2) .submenu {
        left: auto !important;
        right: 0 !important;
    }
}

/* ---------- App showcase ------------------------------------ */
.tf-app {
    background: linear-gradient(135deg, var(--black) 0%, var(--dark-mid) 100%);
    color: var(--white);
}

.tf-app h2 {
    color: var(--white);
    text-transform: uppercase;
}

.tf-app p {
    color: #C6D2E2;
}

.tf-phone {
    max-width: 320px;
    margin: 0 auto;
    display: block;
}

/* ---------- Testimonials ------------------------------------ */
.tf-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 26px;
}

.tf-quote {
    padding: 32px 28px;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tf-quote .stars {
    color: var(--star);
    letter-spacing: 2px;
}

.tf-quote p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--black);
}

.tf-quote-who {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.tf-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--black);
    display: grid;
    place-items: center;
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    flex: none;
}

.tf-quote-who strong {
    display: block;
    font-size: 15px;
}

.tf-quote-who small {
    color: var(--secondary);
    font-size: 13px;
}

/* ---------- Accordion (FAQ) --------------------------------- */
.tf-accordion {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}

.tf-acc {
    border-bottom: 1px solid var(--line);
}

.tf-acc-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 4px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--black);
}

.tf-acc-q:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.tf-acc-q::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
    transition: transform .3s ease;
}

.tf-acc.is-open .tf-acc-q::after {
    transform: rotate(45deg);
}

.tf-acc-a {
    display: none;
    padding: 0 4px 24px;
    color: var(--secondary);
    line-height: 1.7;
    max-width: 78ch;
}

.tf-acc.is-open .tf-acc-a {
    display: block;
}

/* ---------- Forms ------------------------------------------- */
.tf-form {
    display: grid;
    gap: 18px;
}

.tf-form .tf-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.tf-field label {
    display: block;
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 7px;
    color: var(--black);
}

.tf-field input,
.tf-field select,
.tf-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--black);
    font-size: 15px;
    font-family: "Jost", sans-serif;
}

.tf-field textarea {
    min-height: 140px;
    resize: vertical;
}

.tf-field input:focus,
.tf-field select:focus,
.tf-field textarea:focus {
    border-color: var(--primary);
}

.tf-form-note {
    font-size: 13px;
    color: var(--secondary);
    font-style: italic;
}

.tf-form-ok {
    display: none;
    padding: 14px 18px;
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    color: var(--black);
    font-size: 15px;
}

.tf-form-ok.is-shown {
    display: block;
}

/* ---------- Contact blocks ---------------------------------- */
.tf-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 22px;
    margin-bottom: 56px;
}

.tf-contact-card {
    padding: 28px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    text-align: center;
}

.tf-contact-card .tf-feature-ico {
    margin: 0 auto 16px;
    border-radius: 50%;
}

.tf-contact-card h3 {
    font-size: 17px;
    text-transform: uppercase;
    margin: 0 0 7px;
}

.tf-contact-card a,
.tf-contact-card p {
    color: var(--secondary);
    font-size: 15px;
    margin: 0;
    word-break: break-word;
}

.tf-contact-card a:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ---------- CTA band ---------------------------------------- */
.tf-cta-band {
    background: var(--primary);
    padding: 54px 0;
}

.tf-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.tf-cta-inner h2 {
    margin: 0 0 6px;
    text-transform: uppercase;
    color: var(--black);
    font-size: clamp(26px, 3.4vw, 38px);
}

.tf-cta-inner p {
    margin: 0;
    color: rgba(var(--shade-rgb), .8);
    font-size: 17px;
}

.tf-cta-band .flat-button {
    background: var(--black);
    color: var(--white);
}

.tf-cta-band .flat-button:hover {
    background: var(--white);
    color: var(--black);
}

/* ---------- Long-form / legal ------------------------------- */
.tf-prose {
    max-width: 820px;
    margin: 0 auto;
}

.tf-prose h2 {
    font-size: 25px;
    text-transform: uppercase;
    margin: 42px 0 14px;
}

.tf-prose h2:first-child {
    margin-top: 0;
}

.tf-prose p,
.tf-prose li {
    color: var(--secondary);
    line-height: 1.75;
    font-size: 16px;
}

.tf-prose ul {
    padding-left: 20px;
    margin-bottom: 18px;
}

.tf-prose li {
    margin-bottom: 8px;
}

.tf-prose .tf-updated {
    font-size: 14px;
    color: var(--secondary-one);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 36px;
}

/* ---------- Blog -------------------------------------------- */
.tf-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 30px;
}

.tf-post {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    transition: .3s ease;
}

.tf-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(var(--shade-rgb), .14);
    border-color: var(--primary);
}

.tf-post-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dark-mid);
}

.tf-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-post-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}

.tf-post-meta {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--secondary);
    font-family: "Oswald", sans-serif;
}

.tf-post-body h3 {
    font-size: 21px;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.tf-post-body h3 a {
    color: inherit;
}

.tf-post-body h3 a:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.tf-post-body p {
    margin: 0;
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.65;
}

.tf-post-body .tf-more {
    margin-top: auto;
    padding-top: 14px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 15px;
}

/* ---------- 404 --------------------------------------------- */
.tf-404 {
    text-align: center;
    padding: 120px 0;
}

/* Dark numerals with a lime rule under them — lime at this size still
   only reaches 1.4:1 on white, so it carries the accent, not the text. */
.tf-404 .code {
    font-family: "Oswald", sans-serif;
    font-size: clamp(90px, 18vw, 190px);
    line-height: 1;
    color: var(--black);
    font-weight: 600;
}

.tf-404 .code::after {
    content: "";
    display: block;
    width: 110px;
    height: 6px;
    background: var(--primary);
    margin: 6px auto 0;
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 991px) {

    .tf-split {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .tf-split.is-reverse .tf-split-media {
        order: 0;
    }

    .tf-section {
        padding: 70px 0;
    }

    .tf-hero-inner {
        padding: 110px 0 80px;
    }
}

@media (max-width: 767px) {

    #logo img,
    #logo-mobie img {
        height: 50px;
    }

    .tf-hero {
        min-height: auto;
    }

    .tf-hero-stats {
        gap: 26px;
    }

    .tf-hero-stats div span {
        font-size: 26px;
    }

    .tf-form .tf-row2 {
        grid-template-columns: 1fr;
    }

    .tf-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .tf-store-btn {
        min-width: 0;
        flex: 1 1 160px;
    }

    .tf-section {
        padding: 56px 0;
    }
}

/* ---------- Touch targets ----------------------------------- */
/* Scoped to touch devices, so the desktop layout is unchanged.
   Inline text links sit at 16–26px tall, under the ~44px that is
   comfortable with a thumb; this gives them room without redesigning
   anything. */
@media (hover: none) and (pointer: coarse) {

    .tf-venue-foot a,
    .tf-contact-card a,
    .footer .link-footer-bottom a,
    .footer .menu-footer a,
    .content-event ul li a,
    .tf-more {
        display: inline-block;
        padding-block: 9px;
    }

    .tf-venue-body h3 a,
    .tf-post-body h3 a,
    .content-event .title-event a {
        display: inline-block;
        padding-block: 4px;
    }

    .tf-acc-q {
        padding-block: 26px;
    }

    .tf-filter {
        padding: 13px 22px;
    }

    .header-top .social-icon a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    /* Supplementary labels read a little small at 11px on a phone */
    .tf-chip,
    .tf-store-txt small {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   APP SCREENSHOTS
   ============================================================= */

/* ---------- Phone frames (customer app) --------------------- */
.tf-phones {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 26px;
    flex-wrap: wrap;
}

.tf-phone-frame {
    margin: 0;
    flex: 0 1 236px;
    max-width: 236px;
}

/* The second phone sits slightly lower so the pair reads as a set
   rather than two separate images. */
@media (min-width: 768px) {
    .tf-phones .tf-phone-frame:first-child {
        transform: translateY(-18px);
    }
}

.tf-phone-frame .tf-phone-shot,
.tf-phone-frame picture,
.tf-phone-frame .tf-phone-shot img,
.tf-phone-frame picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- handset shell -----------------------------------------
   A real phone, not a rectangle with a dark border: an aluminium rim,
   a black bezel inside it, a rounded screen and side buttons. Built in
   CSS so any screenshot aspect ratio still reads as a handset.         */
.tf-device {
    position: relative;
    border-radius: 30px;
    padding: 5px;
    background: linear-gradient(150deg, #5a5d63 0%, #24262a 26%, #16181b 56%, #3c3f45 100%);
    box-shadow:
        0 1px 2px rgba(255, 255, 255, .22) inset,
        0 26px 50px -12px rgba(var(--shade-rgb), .45),
        0 6px 14px rgba(var(--shade-rgb), .22);
}

.tf-device picture {
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    display: block;
    border: 4px solid #07070a;
    background: #07070a;
}

/* power button, right edge */
.tf-device::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 24%;
    width: 2px;
    height: 10%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, #4b4e54, #2a2c30);
}

/* volume rocker, left edge */
.tf-device::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 17%;
    width: 2px;
    height: 15%;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(180deg, #4b4e54, #2a2c30);
}

@media (max-width: 575px) {
    .tf-device { border-radius: 24px; padding: 4px; }
    .tf-device picture { border-radius: 20px; border-width: 3px; }
}

.tf-phone-frame figcaption {
    margin-top: 14px;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondary);
}

.tf-app .tf-phone-frame figcaption,
.tf-section.is-dark .tf-phone-frame figcaption {
    color: var(--secondary-one);
}

/* Single phone (How It Works) */
.tf-split-media > .tf-phone-frame {
    max-width: 268px;
    margin: 0 auto;
}

/* ---------- Browser frame (Partner App) --------------------- */
.tf-browser {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 18px 44px rgba(var(--shade-rgb), .16);
}

.tf-section.is-dark .tf-browser {
    border-color: var(--line2);
}

.tf-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #ececec;
    border-bottom: 1px solid var(--line);
}

.tf-browser-bar > span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c9c9c9;
    flex: none;
}

.tf-browser-bar > span:first-child {
    background: #ff5f57;
}

.tf-browser-bar > span:nth-child(2) {
    background: #febc2e;
}

.tf-browser-bar > span:nth-child(3) {
    background: #28c840;
}

.tf-browser-url {
    flex: 1;
    margin-left: 10px;
    padding: 3px 12px;
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    color: #777;
    font-family: "Jost", sans-serif;
}

.tf-shot-img,
.tf-browser picture {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Tabbed screenshot set --------------------------- */
.tf-shots {
    max-width: 980px;
    margin: 0 auto;
}

.tf-shot-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.tf-shot-tab {
    padding: 11px 24px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    transition: .25s ease;
}

.tf-shot-tab:hover {
    border-color: var(--primary);
}

.tf-shot-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--black);
}

.tf-shot-panel {
    display: none;
    margin: 0;
}

.tf-shot-panel.is-active {
    display: block;
    animation: tfFadeUp .35s var(--ease, ease) both;
}

.tf-shot-panel figcaption {
    margin-top: 18px;
    text-align: center;
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.6;
}

.tf-section.is-dark .tf-shot-panel figcaption {
    color: var(--secondary-one);
}

/* Sports index: "Learn more" link sits at the foot of the card */
.tf-feature-more {
    margin-top: 14px;
}

.tf-feature-more .tf-more {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 15px;
    color: var(--black);
}

.tf-feature-more .tf-more:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* =============================================================
   PAGE TRANSITIONS

   Three layers, so every browser gets something:
     1. Cross-document view transitions where supported (Chrome,
        Edge, and Safari 18+). Note these only run over http(s) —
        opening the files locally with file:// will not show them.
     2. Everywhere else, turf.js fades the page out on a link click
        and the new page fades in.
     3. A solid page background underneath both, so the moment
        between documents is never a white flash on a dark section.

   All of it is switched off under prefers-reduced-motion.
   ============================================================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: tfOut .20s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: tfIn .34s cubic-bezier(.16, 1, .3, 1) both;
}

/* Stops the inter-document flash from being white on dark pages */
html {
    background: var(--white);
}

/* Entry animation — the fallback path, and harmless alongside (1) */
#content {
    animation: tfIn .34s cubic-bezier(.16, 1, .3, 1) both;
}

/* Exit — turf.js adds .is-leaving to <html> on an internal link click */
html.is-leaving #content {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
    animation: none;
}

html.is-leaving .header,
html.is-leaving .header-top,
html.is-leaving .footer {
    transition: opacity .16s ease;
    opacity: .55;
}

@keyframes tfIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tfOut {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* Kept for the tabbed screenshot panels */
@keyframes tfFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    @view-transition {
        navigation: none;
    }

    #content,
    .tf-shot-panel.is-active {
        animation: none;
    }

    html.is-leaving #content,
    html.is-leaving .header,
    html.is-leaving .header-top,
    html.is-leaving .footer {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 767px) {

    .tf-phones {
        gap: 16px;
    }

    .tf-phone-frame {
        flex: 0 1 44%;
        max-width: 44%;
    }

    .tf-phone-frame .tf-device {
        border-radius: 22px;
        padding: 4px;
    }

    .tf-phone-frame .tf-device picture {
        border-width: 3px;
        border-radius: 18px;
    }

    .tf-browser-url {
        display: none;
    }

    .tf-shot-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* =============================================================
   HERO ON SMALL SCREENS

   The theme stacks the slide at 1.25–1.5 viewport heights on a
   phone: 200px of padding, a ~500px venue card, and the card
   placed above the copy (flex-direction: column-reverse in
   responsive.css). On a 360px-wide Android that pushed the
   headline and the main CTA below the fold entirely.

   Headline first, tighter padding, and a more compact card.
   ============================================================= */
@media (max-width: 767px) {

    /* Copy first, venue card underneath it */
    .tf-slider .slide-item {
        flex-direction: column;
        padding-top: 84px !important;
        /* leaves room for the pagination dots below the card */
        padding-bottom: 62px !important;
        gap: 24px;
    }

    /* Theme sits the dots 42px up, which lands them on the card's last
       line once the card moves underneath the copy. */
    .tf-slider-widget .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 16px !important;
    }

    .tf-slider .silde-content {
        margin-bottom: 0;
    }

    /* Compact venue card: shorter thumbnail, tighter spacing */
    .tf-slider .box-events-slide {
        margin-bottom: 0;
        padding: 16px;
        max-width: 420px;
    }

    .tf-slider img.new-event {
        height: 132px;
        object-fit: cover;
        margin-bottom: 14px;
    }

    .tf-slider .content-event h2.title-event {
        font-size: 21px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .tf-slider .content-event ul li:not(:last-child) {
        margin-bottom: 7px;
    }

    .tf-slider .content-event ul li a {
        font-size: 13px;
    }

    /* Keep the headline from eating the saved space */
    .tf-slider .flat-title-slider {
        font-size: clamp(30px, 8.4vw, 40px);
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .tf-slider .flat-description-slider {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 20px;
    }

    .tf-slider .flat-sub-slider {
        margin-bottom: 10px;
    }
}

/* Very small phones — trim a little further */
@media (max-width: 400px) {

    .tf-slider .slide-item {
        padding-top: 76px !important;
        padding-bottom: 38px !important;
        gap: 20px;
    }

    .tf-slider img.new-event {
        height: 112px;
    }
}

/* =============================================================
   MOBILE HEADER FIXES
   ============================================================= */

/* --- 1. Button label vanishing mid-transition ----------------
   The theme sets `transition: all .3s` on .flat-button and inverts
   it on hover: light background to dark, dark text to light. Because
   both animate at once they cross about 160ms in, contrast drops to
   1.72, and the label disappears exactly as you move to click it.

   An inverting hover cannot be cross-faded without passing through
   that low-contrast moment, so the colour swap is made instant while
   a shadow and lift still animate — the button keeps the theme's look
   and still feels responsive, with no unreadable frame. */
.flat-button,
.btn-contact,
.tf-cta-band .flat-button,
.flat-button.btn-ghost {
    transition: box-shadow .25s ease, transform .25s ease !important;
}

.flat-button:hover,
.btn-contact:hover {
    box-shadow: 0 8px 20px rgba(var(--shade-rgb), .22);
    transform: translateY(-1px);
}

/* --- 2. Close affordances for the mobile drawer -------------- */
.mobile-nav-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    line-height: 1;
    font-size: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    color: var(--white);
    cursor: pointer;
    z-index: 5;
}

.mobile-nav-close:hover {
    background: var(--primary);
    color: var(--black);
}

/* --- 3. Book Turf inside the drawer -------------------------- */
.mobile-nav-cta {
    display: none;
    padding: 24px 20px 32px;
}

.mobile-nav-cta .flat-button {
    display: block;
    text-align: center;
}

@media (max-width: 991px) {

    .mobile-nav-close,
    .mobile-nav-cta {
        display: block;
    }

    /* Book Turf lives in the drawer on mobile — squeezed next to the
       hamburger it crowded the logo. The theme already hides
       .header-right here, so this just leaves that alone. */
}

@media (max-width: 400px) {

    #logo img,
    #logo-mobie img {
        height: 44px;
    }
}

/* main.js already toggles .hidden on the hamburger when the drawer
   opens; the theme had the rule commented out, so both the burger and
   the close button showed at once. Safe to enable now that the drawer
   has an X, a tap-outside overlay and Escape — turf.js clears .hidden
   on every close path, so the burger can never be stranded. */
@media (max-width: 991px) {
    .btn-menu.hidden {
        display: none !important;
    }
}

/* =============================================================
   TESTIMONIALS CAROUSEL
   ============================================================= */
.tf-quotes-carousel {
    padding-bottom: 8px;
}

.tf-quotes-carousel .swiper-slide {
    height: auto;
    display: flex;
}

.tf-quotes-carousel .tf-quote {
    width: 100%;
}

/* Without JS the slides stay in a readable row rather than stacking
   into an unusable column. */
.tf-quotes-carousel:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 26px;
}

.tf-quotes-carousel:not(.swiper-initialized) .tf-quotes-nav {
    display: none;
}

.tf-quotes-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
}

.tf-q-prev,
.tf-q-next {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: background-color .25s ease, border-color .25s ease;
}

.tf-q-prev:hover,
.tf-q-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.tf-q-prev::before,
.tf-q-next::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--black);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
}

.tf-q-next::before {
    transform: scaleX(-1);
}

.tf-q-prev.swiper-button-disabled,
.tf-q-next.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.tf-quotes-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
}

.tf-quotes-dots .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 999px;
    background: var(--line);
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.tf-quotes-dots .swiper-pagination-bullet-active {
    width: 28px;
    background: var(--primary);
}

.tf-section.is-dark .tf-q-prev,
.tf-section.is-dark .tf-q-next {
    background: var(--grey);
    border-color: var(--line2);
}

.tf-section.is-dark .tf-q-prev::before,
.tf-section.is-dark .tf-q-next::before {
    background: var(--white);
}

/* =============================================================
   PHOTO PAGE HERO
   Used where a page has to sell something; the flat dark band in
   .page-title stays for legal pages and the 404.
   ============================================================= */
.tf-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    overflow: hidden;
    background: var(--dark-deep);
}

.tf-page-hero-media {
    position: absolute;
    inset: 0;
}

.tf-page-hero-media picture,
.tf-page-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tf-page-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(var(--scrim-rgb), .90) 0%,
            rgba(var(--scrim-rgb), .74) 40%,
            rgba(var(--scrim-rgb), .34) 72%,
            rgba(var(--scrim-rgb), .14) 100%),
        linear-gradient(180deg,
            rgba(var(--scrim-rgb), .50) 0%,
            rgba(var(--scrim-rgb), 0) 34%);
}

.tf-page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 132px 0 64px;
}

.tf-page-hero-eyebrow {
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
}

.tf-page-hero h1 {
    color: var(--white);
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
    text-transform: none;
    margin-bottom: 18px;
}

.tf-page-hero p {
    color: #D6DEE8;
    font-size: 17px;
    line-height: 1.65;
    max-width: 54ch;
    margin-bottom: 0;
}

.tf-page-hero-cta {
    margin-top: 28px;
}

.tf-page-hero .breadcrumbs {
    margin-top: 30px;
}

.tf-page-hero .breadcrumbs ul {
    justify-content: flex-start;
    padding-left: 0;
}

@media (max-width: 991px) {

    .tf-page-hero {
        min-height: 0;
    }

    .tf-page-hero-inner {
        padding: 104px 0 52px;
    }
}

@media (max-width: 767px) {

    .tf-page-hero-inner {
        padding: 88px 0 44px;
    }

    .tf-page-hero h1 {
        font-size: clamp(28px, 7.6vw, 38px);
    }

    .tf-page-hero p {
        font-size: 15px;
    }

    /* The theme hides <br> on phones, which would run the two
       sentences together. */
    .tf-page-hero h1 br {
        display: block;
        content: "";
    }
}

/* =============================================================
   MARQUEE

   A seamless scrolling band. The track holds the same group of
   items twice and translates by exactly -50%, so the moment the
   first copy leaves the viewport the second is in the identical
   position and the loop is invisible.
   ============================================================= */
.tf-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 16px 0;
    border-block: 1px solid transparent;
}

.tf-marquee--lime {
    background: var(--primary);
    color: var(--black);
}

.tf-marquee--dark {
    background: var(--black);
    color: var(--white);
    border-block-color: var(--line2);
}

.tf-marquee-track {
    display: flex;
    width: max-content;
    animation: tfMarquee var(--tf-marquee-speed, 44s) linear infinite;
}

.tf-marquee-group {
    display: flex;
    align-items: center;
    flex: none;
}

.tf-marquee-item,
.tf-marquee-sep {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 2.4vw, 26px);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
}

.tf-marquee-item {
    padding-inline: 22px;
}

.tf-marquee-sep {
    font-size: 14px;
    opacity: .55;
}

.tf-marquee--dark .tf-marquee-sep {
    color: var(--primary);
    opacity: 1;
}

/* Let people stop it to read */
.tf-marquee:hover .tf-marquee-track,
.tf-marquee:focus-within .tf-marquee-track {
    animation-play-state: paused;
}

@keyframes tfMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {

    /* Motion off, but the band still reads — it scrolls by hand
       instead of animating itself. */
    .tf-marquee-track {
        animation: none;
    }

    .tf-marquee {
        overflow-x: auto;
    }
}

@media (max-width: 767px) {

    .tf-marquee {
        padding: 12px 0;
    }

    .tf-marquee-item {
        padding-inline: 15px;
    }
}

/* =============================================================
   VENUE DETAIL — gallery and facts
   ============================================================= */
.tf-venue-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ---------- Gallery ----------------------------------------- */
.tf-gallery {
    min-width: 0;
}

.tf-gallery-main {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-mid);
    aspect-ratio: 3 / 2;
}

.tf-gallery-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: background-color .25s ease;
}

.tf-gal-nav:hover {
    background: var(--primary);
}

.tf-gal-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--black);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
}

.tf-gal-prev {
    left: 14px;
}

.tf-gal-next {
    right: 14px;
}

.tf-gal-next::before {
    transform: scaleX(-1);
}

.tf-gallery-count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--shade-rgb), .78);
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    letter-spacing: .04em;
}

.tf-gallery-thumbs {
    margin-top: 12px;
}

.tf-gallery-thumbs .swiper-slide {
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: .5;
    aspect-ratio: 3 / 2;
    transition: opacity .2s ease, outline-color .2s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.tf-gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline-color: var(--primary);
}

.tf-gallery-thumbs .swiper-slide:hover {
    opacity: .85;
}

/* ---------- Facts column ------------------------------------- */
.tf-venue-facts h2 {
    text-transform: uppercase;
    margin: 14px 0 6px;
    font-size: clamp(28px, 3.4vw, 40px);
}

.tf-venue-tagline {
    color: var(--secondary);
    font-size: 17px;
    margin-bottom: 14px;
}

.tf-venue-facts .tf-venue-meta {
    margin: 16px 0 22px;
}

.tf-venue-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    padding: 20px 0;
    border-block: 1px solid var(--line);
    margin-bottom: 24px;
}

.tf-venue-price-row small {
    display: block;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 4px;
}

.tf-venue-price-row strong {
    font-family: "Oswald", sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--black);
}

.tf-venue-price-row strong span {
    font-size: 15px;
    color: var(--secondary);
}

.tf-venue-price-row .tf-hours {
    font-size: 17px;
    line-height: 1.35;
    display: block;
    max-width: 24ch;
}

.tf-venue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tf-venue-actions .btn-ghost {
    color: var(--black);
    border-color: var(--line);
}

.tf-venue-actions .btn-ghost:hover {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

/* ---------- Amenities ---------------------------------------- */
.tf-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
}

.tf-amenity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--line);
}

.tf-amenity-ico {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: var(--black);
}

.tf-amenity-ico svg {
    width: 22px;
    height: 22px;
}

.tf-amenity span:last-child {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

@media (max-width: 991px) {

    .tf-venue-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- venue with only one photo ---------------------------- */
.tf-gallery.is-single .tf-gallery-main{
    border-radius:16px; overflow:hidden; background:var(--surface);
}
.tf-gallery.is-single .tf-gallery-main img{
    display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
}
.tf-gallery-note{ margin-top:12px; }

/* ---------- cancellation policy ---------------------------------- */
.tf-policy{ max-width:720px; }
.tf-policy ul{ list-style:none; margin:0 0 14px; padding:0; }
.tf-policy li{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; padding:14px 0; border-bottom:1px solid var(--line);
}
.tf-policy li:last-child{ border-bottom:0; }
.tf-policy li strong{ font-weight:600; color:var(--black); }
.tf-policy li span{
    flex:none; font-weight:700; color:var(--black);
    background:var(--primary-soft); border-radius:999px; padding:4px 12px;
}
@media (max-width:575px){
    .tf-policy li{ flex-direction:column; gap:6px; }
}

/* ---------- numbered phone row (How It Works) -------------------- */
.tf-phone-row{
    display:grid; gap:30px 26px;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    max-width:1060px; margin:0 auto;
}
.tf-phone-row .tf-phone-frame{ flex:none; max-width:none; }
.tf-phone-row .tf-phone-frame.is-step figcaption{
    font-family:inherit; text-transform:none; letter-spacing:0;
    font-size:15px; line-height:1.45; color:var(--secondary);
    display:flex; gap:10px; align-items:flex-start; text-align:left;
    justify-content:flex-start;
}
.tf-phone-row .tf-phone-frame.is-step figcaption:not(:has(b)){ padding-left:2px; }
.tf-phone-row .tf-phone-frame.is-step figcaption b{
    flex:none; width:24px; height:24px; border-radius:50%;
    background:var(--primary); color:var(--black);
    font-size:13px; font-weight:700; line-height:24px; text-align:center;
}
@media (max-width:575px){
    .tf-phone-row{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:24px 18px; }
    .tf-phone-row .tf-phone-frame.is-step figcaption{ font-size:14px; }
}

/* ---------- form result panel ------------------------------------ */
.tf-form-ok{
    display:none; margin-top:18px; padding:16px 18px;
    border-radius:12px; background:var(--primary-soft);
    border:1px solid rgba(var(--shade-rgb), .10);
}
.tf-form-ok.is-shown{ display:block; }
.tf-form-ok strong{ display:block; color:var(--black); margin-bottom:6px; }
.tf-form-ok span{ display:block; color:var(--secondary); font-size:15px; line-height:1.6; }
.tf-form-ok a{ color:var(--black); text-decoration:underline; }
.tf-section.is-dark .tf-form-ok strong,
.tf-section.is-dark .tf-form-ok a{ color:#fff; }
.tf-section.is-dark .tf-form-ok span{ color:var(--secondary-one); }

/* ---------- phone link in the top bar ---------------------------- */
.tf-top-phone{ color:inherit; display:inline-flex; align-items:center; gap:8px; }
.tf-top-phone:hover{ opacity:.75; }

/* ================================================================
   Offer banners
   One block that reflows rather than a fixed row: on a phone the
   copy, the coupon chip and the button stack, each full width.
   ================================================================ */
.tf-offer{ padding:0; }
.tf-offer .themeflat-container{ padding-top:26px; padding-bottom:26px; }

.tf-offer-inner{
    position:relative; overflow:hidden;
    display:flex; flex-wrap:wrap; align-items:center;
    gap:24px 34px; justify-content:space-between;
    padding:30px 34px; border-radius:18px;
}
.tf-offer-inner::after{            /* soft corner wash, no image needed */
    content:""; position:absolute; right:-70px; top:-90px;
    width:300px; height:300px; border-radius:50%;
    background:rgba(255,255,255,.14); pointer-events:none;
}
.tf-offer.is-player .tf-offer-inner{ background:var(--primary); color:var(--black); }
.tf-offer.is-owner .tf-offer-inner{ background:var(--black); color:#fff; }
.tf-offer.is-owner .tf-offer-inner::after{ background:rgba(195,233,45,.12); }

.tf-offer-copy{ flex:1 1 380px; min-width:0; position:relative; z-index:1; }
.tf-offer-eyebrow{
    display:inline-block; margin-bottom:10px;
    font-family:"Oswald", sans-serif; font-size:12px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; opacity:.78;
}
.tf-offer-copy h2{
    margin:0 0 8px; font-size:clamp(24px, 3.4vw, 36px);
    line-height:1.15; text-transform:uppercase; color:inherit;
}
.tf-offer-copy p{ margin:0; font-size:16px; line-height:1.6; opacity:.86; color:inherit; }

.tf-offer-act{
    flex:0 1 auto; position:relative; z-index:1;
    display:flex; flex-wrap:wrap; align-items:center; gap:14px;
}

.tf-offer-code{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:10px 20px; border-radius:12px; cursor:pointer;
    border:2px dashed currentColor; background:transparent; color:inherit;
    font-family:inherit; line-height:1.2;
    transition:transform .2s ease, opacity .2s ease;
}
.tf-offer-code span{ font-size:19px; font-weight:800; letter-spacing:.09em; }
.tf-offer-code small{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.tf-offer-code:hover{ transform:translateY(-1px); }
.tf-offer-code.is-copied span::after{ content:" \2713"; }

.tf-offer.is-player .tf-offer-cta{ background:var(--black); color:#fff; }
.tf-offer.is-owner .tf-offer-cta{ background:var(--primary); color:var(--black); }
.tf-offer-cta{ white-space:nowrap; }

.tf-offer-terms{
    flex:1 0 100%; margin:0; font-size:13px; line-height:1.5;
    opacity:.7; color:inherit;
}

@media (max-width: 860px){
    .tf-offer-inner{ padding:26px 22px; gap:20px; }
    .tf-offer-act{ width:100%; }
    .tf-offer-code,
    .tf-offer-cta{ flex:1 1 100%; }
    .tf-offer-cta{ text-align:center; justify-content:center; }
}
@media (max-width: 420px){
    .tf-offer .themeflat-container{ padding-top:18px; padding-bottom:18px; }
    .tf-offer-inner{ padding:22px 18px; border-radius:14px; }
    .tf-offer-copy p{ font-size:15px; }
}

/* ---------- official store badges -------------------------------
   Used when badge-google-play.png / badge-app-store.svg are present
   (see images/brand/BADGES-README.txt). Google's PNG carries its own
   transparent padding, so it is set taller to look level with Apple's.
   ---------------------------------------------------------------- */
.tf-store-btn.is-badge{
    padding:0; border:0; background:none; box-shadow:none;
    display:inline-flex; align-items:center;
}
.tf-store-btn.is-badge:hover{ transform:translateY(-1px); }
.tf-store-badge{ display:block; width:auto; }
/* Both badge files are trimmed edge-to-edge, so one height lines them
   up. Kept at the source files' own pixel height — pushing them larger
   only makes them soft. Apple's rule is a 40px minimum. */
.tf-store-badge{ height:46px; }

@media (max-width:575px){
    .tf-store-badge{ height:42px; }
}