/* self-hosted from Google Fonts (SIL Open Font License): Staatliches, Mulish, Kaushan Script */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/kiosk/fonts/kaushan-script-400.woff2?v=4ab1e23d) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/kiosk/fonts/mulish-500-700.woff2?v=ce75879f) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/kiosk/fonts/staatliches-400.woff2?v=60778d75) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Font Awesome (from the template), subset to the icons in use by tools/subset-icons.py */
@font-face {
  font-family: 'Fa solid 900';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/kiosk/fonts/fa-solid-sub.woff2?v=4925cad7) format('woff2');
}
@font-face {
  font-family: 'Fa Brands 400 (6.4.2)';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/kiosk/fonts/fa-brands-sub.woff2?v=ce3eb56c) format('woff2');
}

/* The Kiosk at the Club: brand layer over the Tasty Webflow template (loaded after the template CSS).
   Only colours, the accent font, the logo and a few content-driven details change here. The template's layout
   (sizes, spacing, grids, type scale) is left alone.
   Palette from the logo: black, logo green #84fc04, white. Template mapping:
     cream page  --background #fffae6  ->  near-black
     dark green  --text       #30533f  ->  off-white (text)  /  --k-surface (where it was a card/footer fill)
     red accent  --primary    #e94431  ->  logo green (text on it -> ink)
     beige       --primary-light       ->  dark fill for pills/buttons */
:root {
  --background: #0b0b0b;
  --text: #f4f6f0;
  --primary: #84fc04;
  --primary-light: #1a2119;
  --white-50: #ffffff80;
  --k-surface: #182018;
  --k-surface-2: #1f2a1f;
  --k-line: rgba(244, 246, 240, .16);
  --k-ink: #0b0b0b;
  --k-muted: #c9cfc3;
}
html { background-color: var(--background); color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--primary); color: var(--k-ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* the template removes focus rings from the nav buttons and tab pills (.w-*:focus{outline:0}); keyboard users need them */
.w-nav-button:focus-visible, .w-tab-link:focus-visible, .w-nav-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* on the lime boxes (follow box, club band) a lime ring would be invisible: ink instead */
.newsletter-wrapper :focus-visible, .k-club-band :focus-visible { outline-color: var(--k-ink); }
.k-skip { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: var(--k-ink); font-weight: 700; text-decoration: none; }
.k-skip:focus { top: 12px; }
[id] { scroll-margin-top: 110px; }
.k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-green { color: var(--primary); }
p { color: var(--k-muted); }

/* accent font: the logo's brush "Club" (Kaushan Script) replaces the template's Fraunces italic */
.text-span, .section-subtitle, .text-span-3 { font-family: 'Kaushan Script', 'Brush Script MT', cursive; font-style: normal; font-weight: 400; }
.section-subtitle, .text-span { color: var(--primary); }

/* where the template used its dark green as a FILL, use the dark surface; light text on it stays light */
.footer, .product-collection-item, .blog-collection-item, .accordion-item, .contacts-form-wrapper, .customer-review-card,
.product-collection-2-item, .product-3-collection-item, .grid-title, .block-header { background-color: var(--k-surface); }
.footer-link, .footer-rights, .footer-copyright, .footer-copyright-link, .footer-social-icon, .collection-title-white,
.bottom-collection-text, .home-2-price-wrapper, .customer-review-text, .accordion-title, .accordion-icon,
.contacts-form-title, .faq-link, .product-collection-item .text-white { color: var(--text); }
.footer-bottom-wrapper { border-top-color: var(--k-line); }
.footer-brand-wrapper { border-right-color: var(--k-line); border-bottom-color: var(--k-line); }
.collection-title-white:hover, .footer-link:hover, .footer-social-icon:hover, .footer-copyright-link:hover { color: var(--primary); }
/* note: template lists paint their text with background-clip:text (ul background = text colour), so never set a
   ul background to transparent */

/* hand-drawn outline button (View menu): the hover fill is the logo green, its text turns ink (IX2 patched) */
.button-bg { background-color: var(--primary); }
.primary-button { background-color: transparent; }

/* text sitting on a green fill */
.newsletter-wrapper .text-span, .newsletter-wrapper .text-white, .section.red-bg { color: var(--k-ink); }

/* nav: logo badge in the centre slot, socials as icon links */
.navbar-absolute { border-bottom-color: rgba(132, 252, 4, .55); transition: transform .3s ease; }
/* hidden while scrolling down (static/site.js): far enough up to take the hanging logo badge and its shadow along */
.navbar-absolute.k-nav-hidden { transform: translateY(calc(-100% - 80px)); }
@media (prefers-reduced-motion: reduce) { .navbar-absolute { transition: none; } }
/* phone/tablet menu (mobile pass, 2026-10-14): a full-width sheet on phones, a 360px drawer over a dimmed page on
   tablets. The page behind stays put, the bar's own logo and button step aside, and a short landscape screen can
   scroll the menu itself. */
@media screen and (max-width: 991px) {
  html.k-drawer-open, html.k-drawer-open body { overflow: hidden; }
  html.k-drawer-open body::after { content: ''; position: fixed; inset: 0; z-index: 999; background: rgba(11, 11, 11, .72); }
  html.k-drawer-open a.logo-tablet { visibility: hidden; }
  html.k-drawer-open .menu-button { opacity: 0; pointer-events: none; }
  .nav-menu, .nav-menu-shadow-overlay { width: 360px; max-width: 100%; }
  .w-nav-overlay [data-nav-menu-open] { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .nav-link { min-height: 48px; align-items: center; padding: 8px 0; }
  .nav-menu .nav-link[aria-current="page"] { color: var(--text); }
  .close-menu-button, .close-menu-button.w--open { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin-right: 6px; padding: 0; }
}
@media screen and (max-width: 767px) { .nav-menu, .nav-menu-shadow-overlay { width: 100%; } }
.k-logo { display: block; height: auto; }
.k-logo-desk { width: 120px; margin: 6px 0 -50px; position: relative; z-index: 2; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); }
.k-logo-tab { width: 64px; margin: 4px 0 -14px; position: relative; z-index: 2; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.brand-tablet .k-logo-tab { margin: 0; filter: none; }
.k-nav-social { font-family: "Fa Brands 400 (6.4.2)", sans-serif; font-size: 17px; line-height: 1; }
.nav-link:hover, .nav-link:focus-visible { color: var(--text); }
.footer-logo.k-logo-foot { width: 180px; height: auto; }

/* hero: the client's three-line tagline; sized so its widest line ("Great vibes") fills the template's title box
   the way "Delivered" did (same three-line rhythm, same breakpoints) */
.home-banner-title .k-line { display: block; white-space: nowrap; }
/* the nowrap lines would otherwise shrink the flex container below the template's width (desktop layout only) */
@media screen and (min-width: 992px) { .home-banner-section > .base-container { width: 100%; } }
/* the title slides in from the side (template IX2): clip it so phones never see a wider page */
.home-banner-section { overflow-x: clip; }
.home-banner-title { font-size: 88px; }
@media screen and (min-width: 1280px) { .home-banner-title { font-size: 124px; } }
@media screen and (min-width: 1920px) { .home-banner-title { font-size: 167px; } }
@media screen and (max-width: 991px) { .home-banner-title { font-size: 56px; } }
@media screen and (max-width: 767px) { .home-banner-title { font-size: 34px; } }

/* menu cards: the name is a heading now (was a link to a product page); keep the template's look */
h3.shop-item-link { margin: 0; font-family: Mulish, sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.k-item-desc { margin-bottom: 0; color: var(--k-muted); font-size: 16px; line-height: 1.5; }
.k-card-line { margin: 18px 0 22px; color: var(--k-muted); }
/* prices (client's priced menu, 2026-10-12): lime, in the template's price row; boxes show single / sharing */
.k-price { margin-top: 12px; color: var(--primary); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.k-price-label { color: var(--k-muted); font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.shop-collection-item .k-item-desc { margin-top: 10px; }
.k-card-price { margin: -10px 0 18px; color: var(--primary); font-weight: 700; font-size: 20px; }
/* top picks: price and button line up across the cards */
@media screen and (min-width: 480px) { #picks .product-card-wrapper, #picks .product-bottom-info { flex: 1 1 auto; } #picks .product-bottom-info { justify-content: flex-start; } #picks .k-card-price { margin-top: auto; } }
.k-list-panel .rich-product-text ul.k-price-list { list-style: none; padding-left: 0; width: 100%; max-width: 460px; }
.k-list-panel .rich-product-text ul.k-price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 9px 0; border-bottom: 1px dashed var(--k-line); }
/* the template's global ul paints text through background-clip, so the fill colour has to be set too */
/* menu categories: a menu board drawn like the printed menu and the site's outline button (2026-10-14).
   Plain plates with a solid off-white rule and the display font; the open section is solid lime. No numbers, arrows or glow. */
.k-tabs-hint { margin: 24px 0 12px; text-align: center; font-family: 'Kaushan Script', 'Brush Script MT', cursive; font-size: 24px; line-height: 1.2; color: var(--primary); }
.shop-tabs-menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 0 0 56px; padding: 0; }
.shop-tabs-menu .sessions-tab-link { display: flex; align-items: center; justify-content: center; min-height: 74px; margin: 0; padding: 10px 14px;
  background: var(--background); border: 2px solid var(--text); border-radius: 4px; color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
  font-family: 'Staatliches', sans-serif; font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
/* hover only where there is a pointer (no stuck highlight after a tap); quieter than the open plate */
@media (hover: hover) { .shop-tabs-menu .sessions-tab-link:hover { border-color: var(--primary); color: var(--primary); } }
.shop-tabs-menu .sessions-tab-link.w--current { background: var(--primary); border-color: var(--primary); color: var(--k-ink); }
.shop-tabs-menu .sessions-tab-link.w--current:focus-visible { outline-color: var(--text); }
.k-tab-name { display: block; text-wrap: balance; }
@media screen and (max-width: 991px) {
  .shop-tabs-menu { gap: 8px; }
  .shop-tabs-menu .sessions-tab-link { min-height: 64px; padding: 8px 10px; font-size: 21px; }
}
/* phones: the whole board at once, two plates a row (the photos still start within the first screen) */
@media screen and (max-width: 767px) {
  .k-tabs-hint { margin: 14px 0 8px; font-size: 21px; }
  .shop-tabs-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 30px; }
  .shop-tabs-menu .sessions-tab-link { min-height: 48px; padding: 6px 10px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .shop-tabs-menu .sessions-tab-link { transition: none; } }

/* phones and tablets (mobile pass, 2026-10-14): once the board has scrolled away, the sections stay at the top as a
   strip of small plates (static/site.js: html.k-strip-on), under the header while it shows (60px), at the very top
   while it is hidden (html.k-nav-off) */
.k-sec-strip { display: none; }
@media screen and (max-width: 991px) {
  .k-sec-strip { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 998; visibility: hidden; transform: translateY(-110%);
    background: var(--background); border-bottom: 1px solid rgba(132, 252, 4, .55); transition: transform .3s ease, visibility 0s linear .3s; }
  html.k-strip-on .k-sec-strip { visibility: visible; transform: translateY(60px); transition: transform .3s ease; }
  html.k-strip-on.k-nav-off .k-sec-strip { transform: translateY(0); }
  html.k-strip-on .k-logo-tab { width: 52px; margin-bottom: 0; }
  .k-sec-strip-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .k-sec-strip-row::-webkit-scrollbar { display: none; }
  .k-sec-strip a { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--text); border-radius: 4px;
    background: var(--background); color: var(--text); font-family: 'Staatliches', sans-serif; font-size: 19px; line-height: 1; letter-spacing: .02em;
    text-decoration: none; text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .k-sec-strip a[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--k-ink); }
}
@media (prefers-reduced-motion: reduce) { .k-sec-strip, html.k-strip-on .k-sec-strip { transition: none; } }
/* the end of a section: on to the next one */
.k-next-wrap { display: flex; justify-content: center; margin-top: 48px; }
.k-next-sec { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 22px; text-align: center; text-wrap: balance; border: 2px solid var(--text); border-radius: 4px;
  color: var(--text); font-family: 'Staatliches', sans-serif; font-size: 22px; line-height: 1; letter-spacing: .02em; text-decoration: none; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, color .15s ease; }
.k-next-arrow { font-family: 'Fa solid 900', sans-serif; font-weight: 900; font-size: 15px; color: var(--primary); }
@media (hover: hover) { .k-next-sec:hover { border-color: var(--primary); color: var(--primary); } }
@media screen and (max-width: 767px) { .k-next-wrap { margin-top: 32px; } .k-next-sec { width: 100%; justify-content: center; } }
/* phones (and phones on their side): a dish is a row (name, description, price) with its photo as a thumbnail, about a
   third of a card's height */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (max-height: 500px) {
  .shop-collection-list { grid-template-columns: 1fr; grid-row-gap: 0; }
  .shop-collection-item .main-shop-list-item { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 16px; align-items: start;
    padding: 18px 0; border-bottom: 1px dashed var(--k-line); }
  .shop-collection-item:first-child .main-shop-list-item { padding-top: 4px; }
  .shop-collection-item .shop-links-wrapper { grid-column: 2; grid-row: 1; }
  .shop-collection-item .shop-info-wrapper { grid-column: 1; grid-row: 1; }
  .shop-collection-item .shop-list-image { height: auto; aspect-ratio: 1; }
  h3.shop-item-link { font-size: 17px; line-height: 22px; letter-spacing: .04em; }
  .shop-collection-item .k-item-desc { margin-top: 6px; font-size: 14px; line-height: 1.45; }
  .shop-collection-item .k-price { margin-top: 8px; font-size: 18px; }
  .shop-collection-item .shop-price-wrapper { justify-content: flex-start; }
  .shop-collection-item .card-menu-bottom { margin-top: 0; }
}
/* list sections (rolls, sides, wraps, sauces) below 992px: the photo, after the list as in the template, is a wide
   band rather than a tall picture, and never more than half a landscape screen */
@media screen and (max-width: 991px) {
  .k-list-panel .k-panel-image { aspect-ratio: 16 / 9; max-height: 340px; max-height: min(340px, 50svh); }
}

/* drinks tab (2026-10-14): a grid of price lists */
/* sections flow down balanced columns (no empty gaps under the short lists) */
.k-drinks-grid { column-count: 3; column-gap: 56px; }
.k-drinks-sec { break-inside: avoid; margin-bottom: 44px; }
.k-drinks-title { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--primary); font-size: 30px; line-height: 1.1; }
.k-drinks ul.k-price-list { list-style: none; margin: 0; padding: 0; }
.k-drinks ul.k-price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--k-line); }
.k-li-size, .k-li-ask { color: var(--k-muted); -webkit-text-fill-color: var(--k-muted); font-size: .85em; white-space: nowrap; }
.k-li-ask { flex: none; font-style: italic; }
.k-drinks-extra { border: 1px solid var(--primary); border-radius: 18px; padding: 22px 24px; }
.k-drinks-extra p { margin: 0 0 6px; color: var(--text); }
.k-drinks-extra ul.k-price-list li { border-bottom: 0; }
@media screen and (max-width: 991px) { .k-drinks-grid { column-count: 2; column-gap: 32px; } .k-drinks-sec { margin-bottom: 36px; } }
@media screen and (max-width: 767px) { .k-drinks-grid { column-count: 1; } .k-drinks-title { font-size: 26px; } }
.k-li-price { flex: none; color: var(--primary); -webkit-text-fill-color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.k-list-panel .rich-product-text { align-self: stretch; }
.k-card-button { display: inline-block; text-decoration: none; white-space: nowrap; }
.k-pane-note { margin: 40px 0 0; text-align: center; color: var(--k-muted); }
/* add-ons under a section's cards (burger extras): a plain price list in columns, ruled like the menu board above */
.k-extras { max-width: 1000px; margin: 64px auto 0; }
.k-extras-title { margin: 0; text-align: center; font-size: 44px; line-height: 1.1; }
.k-extras-line { margin: 6px 0 24px; text-align: center; color: var(--text); }
.k-extras ul.k-extras-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; row-gap: 0; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.k-extras ul.k-extras-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; padding: 13px 0; border-bottom: 1px dashed var(--k-line); }
@media screen and (max-width: 991px) { .k-extras ul.k-extras-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media screen and (max-width: 767px) { .k-extras { margin-top: 44px; } .k-extras-title { font-size: 34px; } }
@media screen and (max-width: 479px) { .k-extras ul.k-extras-list { grid-template-columns: minmax(0, 1fr); } }

/* list sections (sauces, breakfast rolls): template product-details block */
.k-panel-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.k-list-panel .rich-product-text ul { margin: 0 0 20px; padding-left: 20px; }
.k-list-panel .rich-product-text li { margin-bottom: 8px; color: var(--text); }
.k-list-panel .rich-product-text .k-as-h6 { margin-top: 20px; margin-bottom: 14px; }
.k-list-foot { color: var(--k-muted); }
/* breakfast rolls: the additional items, one price for all, names in two columns under the rolls */
.k-list-panel .rich-product-text .k-add-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 460px; margin-top: 40px; }
.k-add-price { flex: none; font-family: 'Mulish', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--primary); -webkit-text-fill-color: var(--primary); font-variant-numeric: tabular-nums; }
.k-list-panel .rich-product-text ul.k-add-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
/* the template's product page keeps price/cart above this block; with only an intro above, close the gap */
.k-list-panel .shop-details-block { margin-top: 24px; }

/* find us: contact strip icons from FA Brands where needed, map in a softer frame */
.k-brand-icon { font-family: "Fa Brands 400 (6.4.2)", sans-serif; }
#find-us .contact-link { line-height: 1.5; }
.k-map { position: relative; padding-bottom: 42% !important; border-radius: 20px; overflow: hidden; border: 1px solid var(--k-line); }
/* the template tints the whole figure (hue-rotate 313deg); only the map gets it, so the cover keeps the brand colours */
.rich-contact-text figure.k-map { filter: none; }
.k-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6) contrast(.9) hue-rotate(313deg); }
/* the map before it loads: the club's name over the pitch lines, "Show the map" and "Open in Google Maps" */
.k-map-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px;
  text-align: center; color: var(--text); background: var(--k-surface) url(/assets/kiosk/img/pitch-box.svg) no-repeat center 30% / 140% auto; }
.k-map-pin { font-family: 'Fa solid 900', sans-serif; font-weight: 900; font-size: 34px; line-height: 1; color: var(--primary); }
.k-map-place { margin: 0; max-width: 30ch; color: var(--text); font-size: 16px; line-height: 1.4; text-wrap: balance; }
.k-map-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
/* Webflow's rich text hides a figure's divs (transparent, 0 size: they are embed wrappers); these are content */
.k-map .k-map-cover, .k-map .k-map-actions { color: var(--text); font-size: 16px; }
.w-richtext figure.k-map > .k-map-cover { display: flex; padding: 20px; }
.k-map-place { margin: 0 auto; }
/* before the map loads the cover sets the height (same shape as the map), so larger text makes it taller, not clipped */
.w-richtext figure.k-map.k-map-idle { height: auto; padding-bottom: 0 !important; }
.w-richtext figure.k-map.k-map-idle > .k-map-cover { position: relative; inset: auto; aspect-ratio: 100 / 42; }
@media screen and (max-width: 991px) { .w-richtext figure.k-map.k-map-idle > .k-map-cover { aspect-ratio: 100 / 60; } }
@media screen and (max-width: 479px) { .w-richtext figure.k-map.k-map-idle > .k-map-cover { aspect-ratio: 100 / 85; } }
.k-map-show, .k-map-open { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 2px solid var(--text); border-radius: 4px;
  background: transparent; color: var(--text); font-family: 'Mulish', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-decoration: none;
  text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-map-show { background: var(--primary); border-color: var(--primary); color: var(--k-ink); }
.k-map-show[hidden] { display: none; }
@media (hover: hover) { .k-map-open:hover { border-color: var(--primary); color: var(--primary); } }
/* the follow box's photo is an <img> now (lazy), not the template's background */
.newsletter-image.k-follow-photo { position: relative; overflow: hidden; background-image: none; }
.k-follow-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* hero: the client's logo in place of the template's photo, as big as the photo was (client request 2026-10-09).
   From 992px the wrapper is the template's absolute left column (it runs up under the fixed nav, hence the top
   margin); below that it is in the flow above the title. */
.banner-image-wrapper.k-hero-logo-wrap { display: flex; align-items: center; justify-content: center; }
.k-hero-logo { display: block; width: auto; height: auto; max-width: 88%; max-height: calc(100% - 150px); margin-top: 78px; }
/* short desktop windows: centre it in what is on screen, not in the taller section */
@media screen and (min-width: 992px) { .banner-image-wrapper.k-hero-logo-wrap { max-height: 100vh; } }
@media screen and (max-width: 991px) {
  .banner-image-wrapper.k-hero-logo-wrap { width: 100%; height: auto; padding: 24px 0 6px; }
  /* landscape phones: no taller than the screen below the fixed nav (60) + the padding (24) + a gap */
  .k-hero-logo { width: 420px; width: min(420px, calc(100svh - 96px)); max-width: 76vw; max-height: none; margin-top: 0; }
}

/* opening hours (client's Facebook page, 2026-10-09): hero line, Find us slot, footer */
.k-hero-hours { margin: 16px 0 0; color: var(--primary); font-size: 15px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.k-hero-hours .k-ico, .k-foot-hours-title .k-ico { font-family: 'Fa solid 900', sans-serif; font-weight: 900; margin-right: 8px; }
/* the hours lines are text, styled like the strip's links (14px, 600, capitals) */
#find-us .k-hours .contact-link { font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: .05em; text-transform: uppercase; cursor: default; }
#find-us .k-hours .contact-link:hover { color: var(--text); }
.k-hh-group { white-space: nowrap; }
/* the exception under the weekly hours ("Saturdays until 4pm on matchdays"): its own line everywhere, a step quieter */
.k-hours-note { display: block; }
.k-hero-hours .k-hours-note { margin-top: 2px; font-size: .86em; opacity: .85; }
#find-us .k-hours .k-hours-note { margin-top: 6px; color: var(--k-muted); font-size: 14px; line-height: 21px; }
.k-foot-hours .k-hours-note { color: var(--k-muted); font-size: 14px; }
.k-foot-hours { align-self: stretch; margin: 26px 0 0; color: var(--text); font-size: 15px; line-height: 1.7; text-align: left; }
.k-foot-hours > span { display: block; }
.k-foot-hours .k-foot-hours-title { color: var(--primary); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
@media screen and (min-width: 1200px) { #find-us .services-wrapper { grid-template-columns: repeat(4, 1fr); } }
@media screen and (min-width: 992px) and (max-width: 1199px) { #find-us .services-wrapper { grid-template-columns: 1fr 1fr; grid-row-gap: 30px; justify-items: start; } }
@media screen and (max-width: 991px) { .k-hero-hours { text-align: center; } .k-foot-hours { text-align: center; } }
/* phones: "Open every day:" then one line per group, no separator */
@media screen and (max-width: 479px) {
  .k-hero-hours { font-size: 14px; }
  .k-hh-lead, .k-hh-group { display: block; }
  .k-hh-sep { display: none; }
}

/* football theme (2026-10-14) ---------------------------------------------------------------------------------- */
/* tickers: footballs between the words, turning slowly */
.k-ball { display: inline-block; font-family: 'Fa solid 900', sans-serif; font-weight: 900; font-size: 28px; line-height: 32px; color: var(--primary); animation: k-spin 8s linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.small-star-wrapper { display: flex; align-items: center; justify-content: center; }
/* hero: "At the home of St Brelade FC", and the logo as the centre spot (centre circle + halfway line) */
.k-hero-kicker { margin: 0 0 6px; font-family: 'Kaushan Script', 'Brush Script MT', cursive; color: var(--primary); font-size: 30px; line-height: 1.2; text-align: right; }
.k-hero-logo { position: relative; z-index: 1; border-radius: 50%;
  box-shadow: 0 0 0 clamp(14px, 2.2vw, 30px) var(--background), 0 0 0 calc(clamp(14px, 2.2vw, 30px) + 2px) rgba(132, 252, 4, .5); }
.k-hero-logo-wrap::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid rgba(132, 252, 4, .22); }
@media screen and (max-width: 991px) {
  .k-hero-kicker { text-align: center; font-size: 24px; }
  .banner-image-wrapper.k-hero-logo-wrap { position: relative; }
  .k-hero-logo-wrap::before { top: calc(50% + 9px); bottom: auto; left: 0; right: 0; border-left: 0; border-top: 2px solid rgba(132, 252, 4, .22); }
}
/* phones (mobile pass, 2026-10-14): a smaller logo so the line, the title and "View menu" share the first screen
   (Safari's toolbars included: svh); the hours and the description follow the button. The Scroll badge goes: the
   logo covered it. */
@media screen and (max-width: 767px) {
  .banner-image-wrapper.k-hero-logo-wrap { padding: 16px 0 4px; }
  .k-hero-logo { width: min(54vw, 250px); width: min(54vw, 32svh, 250px); max-width: none; }
  .home-banner-section .star-wrapper { display: none; }
  .home-1-banner-title-wrapper { display: flex; flex-direction: column; align-items: center; }
  .home-1-banner-title-wrapper > div:first-child { display: contents; }
  .k-hero-kicker { order: 1; }
  .home-1-banner-title-wrapper h1 { order: 2; }
  .home-1-banner-title-wrapper > .top-space-50 { order: 3; margin-top: 22px; }
  .home-1-banner-title-wrapper .k-hero-hours { order: 4; margin-top: 20px; }
  .home-1-banner-title-wrapper .banner-1-description { order: 5; margin-top: 14px; }
}
/* landscape phones: the logo beside the title, so the first screen is not only the logo */
@media screen and (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
  .home-banner-section { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 24px; padding-top: 84px; }
  .banner-image-wrapper.k-hero-logo-wrap { padding: 0 0 0 max(5vw, env(safe-area-inset-left)); }
  .k-hero-logo { width: min(54svh, 240px); max-width: none; }
  .k-hero-logo-wrap::before { display: none; }
  .home-banner-section > .base-container { width: auto; max-width: none; margin: 0; padding-right: max(4vw, env(safe-area-inset-right)); }
  .home-banner-section .rotating-text-wrapper { grid-column: 1 / -1; }
  .home-banner-section .star-wrapper { display: none; }
  .home-1-banner-title-wrapper { display: flex; flex-direction: column; align-items: center; }
  .home-1-banner-title-wrapper > div:first-child { display: contents; }
  .k-hero-kicker { order: 1; font-size: 22px; }
  .home-1-banner-title-wrapper h1 { order: 2; font-size: 34px; }
  .home-1-banner-title-wrapper > .top-space-50 { order: 3; margin-top: 16px; }
  .home-1-banner-title-wrapper .k-hero-hours { order: 4; margin-top: 16px; }
  .home-1-banner-title-wrapper .banner-1-description { order: 5; margin-top: 12px; }
}
/* home hero on portrait phones: a matchday poster that fits the first screen (owner: "everything is just layered one
   below the other", 2026-10-15; chosen from three designs)
   kicker across the top / logo + three-line title side by side / (description, tall screens) / the hours box of the
   printed menu / View menu / the ticker as the bottom edge. The section is exactly one screen minus the ticker. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .home-banner-section {
    --k-g: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --k-tick: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* the spare height of tall screens is shared out between the groups (fr spacers), never left as one void */
    grid-template-rows: minmax(16px, .8fr) auto auto minmax(12px, .55fr) auto minmax(16px, .9fr) auto minmax(12px, .3fr) auto minmax(16px, .6fr);
    grid-template-areas: ". ." "kicker kicker" "logo title" ". ." "desc desc" ". ." "hours hours" ". ." "cta cta" ". .";
    column-gap: 14px;
    box-sizing: border-box;
    min-height: calc(100vh - var(--k-tick));
    min-height: calc(100svh - var(--k-tick));
    /* wider portrait screens (480-767): the poster keeps a phone's proportions, centred */
    padding: 60px max(var(--k-g), calc((100% - 480px) / 2)) 0;
  }
  .home-banner-section > .base-container,
  .home-banner-section .full-horizontal-container,
  .home-banner-section .home-1-banner-title-wrapper,
  .home-banner-section .home-1-banner-title-wrapper > div:first-child { display: contents; }
  .home-banner-section > .base-container::before, .home-banner-section > .base-container::after { display: none; }
  .home-banner-section .star-wrapper { display: none; }

  /* kicker */
  .home-banner-section .k-hero-kicker { grid-area: kicker; margin: 0 0 clamp(6px, 1.6svh, 16px); text-align: left; font-size: clamp(21px, min(6.8vw, 3.3svh), 30px); line-height: 1.15; }

  /* logo (the centre circle) beside the title */
  .home-banner-section .banner-image-wrapper.k-hero-logo-wrap { grid-area: logo; align-self: center; width: auto; height: auto; padding: 8px; }
  .home-banner-section .k-hero-logo-wrap::before { display: none; }
  .home-banner-section .k-hero-logo { width: clamp(96px, 31vw, 156px); max-width: none; margin: 0;
    box-shadow: 0 0 0 6px var(--background), 0 0 0 8px rgba(132, 252, 4, .5); }

  /* title: left-aligned, each line as wide as the column allows ("Great vibes" sets the size) */
  .home-banner-section h1.home-banner-title { grid-area: title; align-self: center; container-type: inline-size; margin: 0; max-width: none; text-align: left; font-size: 40px; }
  .home-banner-section .home-banner-title .k-line { font-size: min(calc(16vw - 15px), 54px); font-size: 23.6cqi; line-height: .92; }

  /* description: only where the screen has room for it (otherwise for screen readers only) */
  .home-banner-section .banner-1-description { grid-area: desc; margin: 0; max-width: none; text-align: left; font-size: clamp(15px, 2svh, 17px); line-height: 1.5; }

  /* opening hours: the printed menu's hours box */
  .home-banner-section .k-hero-hours { grid-area: hours; display: flex; flex-direction: column; margin: 0; border: 2px solid var(--primary); border-radius: 10px; overflow: hidden;
    color: var(--text); font-size: 15px; line-height: 1.25; letter-spacing: .04em; text-align: left; }
  .home-banner-section .k-hh-lead { display: flex; align-items: center; gap: 8px; padding: clamp(6px, 1.1svh, 10px) 14px; background: var(--primary); color: var(--k-ink);
    font-size: 13px; font-weight: 800; letter-spacing: .14em; }
  .home-banner-section .k-hh-lead .k-ico { margin: 0; font-size: 14px; }
  .home-banner-section .k-hh-colon, .home-banner-section .k-hero-hours .k-hh-sep { display: none; }
  .home-banner-section .k-hero-hours .k-hh-group { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: clamp(6px, 1.9svh, 20px) 14px; }
  .home-banner-section .k-hero-hours .k-hh-group ~ .k-hh-group { border-top: 1px solid var(--k-line); }
  .home-banner-section .k-hh-day { font-family: Staatliches, sans-serif; font-size: 21px; line-height: 1; letter-spacing: .04em; }
  .home-banner-section .k-hh-time { font-family: Mulish, sans-serif; font-weight: 700; }
  .home-banner-section .k-hero-hours .k-hours-note { margin: 0; padding: 6px 14px 7px; border-top: 1px solid var(--k-line); color: var(--primary); opacity: 1;
    font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; text-align: center; }

  /* View menu: a solid lime plate as wide as the hours box */
  .home-banner-section .home-1-banner-title-wrapper > .top-space-50 { grid-area: cta; margin: 0; }
  .home-banner-section .primary-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(52px, 7.5svh, 68px); margin: 0; padding: 0 20px;
    border: 2px solid var(--primary); border-radius: 10px; background: var(--primary); }
  .home-banner-section .primary-button .button-text { color: var(--k-ink) !important; font-family: Staatliches, sans-serif; font-size: 24px; line-height: 1; letter-spacing: .08em; }
  .home-banner-section .primary-button .button-outline, .home-banner-section .primary-button .button-outline-two,
  .home-banner-section .primary-button .button-bg-wrapper { display: none; }
  .home-banner-section .primary-button:active { background: var(--text); border-color: var(--text); }
  .home-banner-section .primary-button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

  /* the ticker: the poster's bottom edge, a fixed height so the section can leave room for it */
  .home-banner-section + .rotating-text-wrapper { box-sizing: border-box; height: 44px; min-height: 0; }
}
/* tall screens: less air at the top, the groups take the height (no second layout: the toolbars must not switch it) */
@media screen and (max-width: 767px) and (orientation: portrait) and (min-height: 760px) {
  .home-banner-section { grid-template-rows: minmax(16px, .5fr) auto auto minmax(12px, .5fr) auto minmax(16px, .5fr) auto minmax(12px, .35fr) auto minmax(16px, .5fr); }
}
/* short screens: the description goes to screen readers only (and its gap with it) */
@media screen and (max-width: 767px) and (orientation: portrait) and (max-height: 639px) {
  .home-banner-section { grid-template-rows: minmax(16px, .8fr) auto auto 0 auto minmax(16px, .9fr) auto minmax(12px, .35fr) auto minmax(16px, .6fr); }
  .home-banner-section .banner-1-description { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (hover: hover) and (max-width: 767px) and (orientation: portrait) {
  .home-banner-section .primary-button:hover { background: var(--text); border-color: var(--text); }
}
/* inner banners (menu, events): a faint penalty box, goal line at the top */
.inner-banner-section { background: url(/assets/kiosk/img/pitch-box.svg) no-repeat center top / 1200px auto; }
.inner-banner-section.k-festive { background: none; } /* the events banner has its bunting and confetti */
@media screen and (max-width: 767px) { .inner-banner-section { background-size: 760px auto; background-position: center 60px; } }
/* phones (mobile pass, 2026-10-14): less air above and below the page title so the page's content (the menu board,
   the enquiry form) starts sooner; the title scales with the screen and with a larger text setting it wraps
   instead of being cut */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (max-height: 500px) {
  .inner-banner-section { padding-top: 92px; padding-bottom: 28px; }
  .inner-banner-section h1.banner-title { font-size: clamp(40px, 14vw, 64px); overflow-wrap: anywhere; }
  .inner-banner-section .center-description { font-size: 16px; line-height: 1.5; }
}
.k-club-band .animation-image.testimonial-right { display: none; } /* the photos take that corner */
@media (prefers-reduced-motion: reduce) { .k-ball { animation: none; } }

/* the club band (the template's testimonials band, green with ink text) */
.k-club-band .center-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* two columns: the club line and crest | St Brelade FC's own photos */
.k-club-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.k-club-grid .center-title { align-items: flex-start; text-align: left; margin-bottom: 0; }
.k-club-grid .k-club-crest { margin-left: 0; }
/* top row: the team (two thirds) and the pitch-side photo, cut to the team photo's height; below, three squares */
.k-club-photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.k-cp { position: relative; grid-column: span 2; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px rgba(11, 11, 11, .22); }
.k-cp-team { grid-column: span 4; }
.k-cp .k-cp-img { display: block; width: 100%; height: auto; }
.k-cp-side .k-cp-img { height: 100%; object-fit: cover; }
@media screen and (max-width: 991px) {
  .k-club-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .k-club-grid .center-title { align-items: center; text-align: center; }
  .k-club-grid .k-club-crest { margin-left: auto; }
}
/* phones: the team full width, then the other four as a 2 x 2 of squares */
@media screen and (max-width: 479px) {
  .k-club-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .k-cp { grid-column: span 1; border-radius: 12px; }
  .k-cp-team { grid-column: 1 / -1; }
  .k-cp-side .k-cp-img { height: auto; aspect-ratio: 1; }
}
.k-club-title { max-width: 900px; margin-bottom: 0; text-wrap: balance; }
.k-club-kicker { display: block; margin-bottom: 8px; font-family: 'Kaushan Script', 'Brush Script MT', cursive; font-weight: 400;
  font-size: .62em; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.k-club-crest { display: block; width: 250px; height: auto; margin: 10px auto 0; border-radius: 22px; box-shadow: 0 14px 34px rgba(11, 11, 11, .22); }
@media screen and (max-width: 991px) { .k-club-crest { width: 220px; } }
@media screen and (max-width: 479px) { .k-club-crest { width: 190px; border-radius: 18px; } }
.k-club-line { max-width: 560px; margin: 22px 0 0; color: var(--k-ink); font-size: 18px; line-height: 1.5; }
.k-club-button { margin-top: 30px; text-decoration: none; }
.k-club-band .k-club-button:hover { background-color: transparent; border-color: var(--k-ink); color: var(--k-ink); }
@media screen and (max-width: 767px) {
  .k-club-line { font-size: 16px; }
  .k-club-band .animation-image { width: 56px; }
  .k-club-band .animation-image.testimonial-right { top: 14px; right: 12px; }
  .k-club-band .animation-image.testimonial-page { top: 14px; left: 12px; bottom: auto; }
}
@media screen and (max-width: 479px) { .k-club-band .animation-image.testimonial-right { display: none; } }

/* e-mail addresses keep their own (lower) case where the template sets links in capitals */
a[href^="mailto:"].contact-link, a[href^="mailto:"].footer-link { text-transform: none; }
.k-links-stack > a { display: block; }

/* follow box: two social buttons instead of the email form */
.k-follow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 0; }
.k-follow-button { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* template hover = accent fill + white text, which is unreadable on lime: outline style in ink instead */
.newsletter-wrapper .k-follow-button:hover { background-color: transparent; border-color: var(--k-ink); color: var(--k-ink); }
.k-btn-icon { font-family: "Fa Brands 400 (6.4.2)", sans-serif; font-size: 17px; line-height: 1; }

/* heading outline: retagged headings keep the template look of the tag they replace (h6 28px, h4 46px, h3 62px) */
.k-as-h6 { font-size: 28px; line-height: 1em; }
.k-as-h4 { margin-top: 10px; font-size: 46px; line-height: 1em; font-weight: 400; text-transform: none; }
.k-as-h3 { margin-top: 10px; font-size: 62px; line-height: 1em; font-weight: 400; }
@media screen and (max-width: 991px) { .k-as-h4 { font-size: 40px; } .k-as-h3 { font-size: 58px; } }
@media screen and (max-width: 767px) { .k-as-h3 { font-size: 46px; } }

/* 404: "Offside!" is the page's h1 now, with the template's h2 look */
.k-as-h2 { font-size: 72px; line-height: .97em; }
@media screen and (max-width: 991px) { .k-as-h2 { font-size: 64px; } }
@media screen and (max-width: 767px) { .k-as-h2 { font-size: 56px; } }

/* reduced motion: no endless ticker or spinning badges, content shown without slide-ins */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] { opacity: 1 !important; transform: none !important; }
  .rotate-text-wrapper, .star-red, .star-border, .front-star, .back-star, .animation-image, .element-left, .element-right, .newsletter-absolute-image { animation: none !important; transform: none !important; transition: none !important; }
  .product-image, .shop-list-image { transition: none !important; }
  .shop-collection-item, .line-star { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rotating-text-wrapper * { animation: none !important; }
}

/* 404 */
._404-paragraph a { font: inherit; text-transform: none; letter-spacing: 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.k-logo-404 { width: 96px; height: auto; }
._404 { -webkit-text-stroke-color: var(--primary); color: transparent; }
/* phones and short screens: the page starts under the logo (it sits at the top, 40-136px) instead of centring a
   block taller than the screen into it */
@media screen and (max-width: 767px), screen and (max-height: 700px) {
  .utility-page-wrap { height: auto; min-height: 100vh; min-height: 100svh; justify-content: flex-start; padding-top: 150px; padding-bottom: 40px; }
}
@media screen and (max-height: 500px) { ._404 { font-size: 120px; line-height: 1; } }

@media screen and (max-width: 991px) {
  .k-map { padding-bottom: 60% !important; }
  /* bigger hit areas for the template's small nav icons, same look */
  .menu-button { padding: 12px; margin: -12px; }
}
.footer-social-icon { padding: 12px; margin: -12px 18px -12px -12px; }
.footer-social-icon.last-child { margin-right: -12px; }
#find-us .contact-link { display: inline-block; padding: 8px 0; margin: -8px 0; }
#find-us .k-links-stack > .contact-link { display: block; } /* phone and e-mail: one per line at every width */
#find-us .k-links-stack > .contact-link + .contact-link { margin-top: 8px; } /* their 8px pads meet, not overlap */
@media screen and (max-width: 767px) {
  /* the client's copy runs longer than the template's: keep the decorative doodles clear of it on phones */
  .element-right.testimonials-element-right { bottom: auto; top: 6%; right: 6%; }
  .newsletter-absolute-image { top: -30px; right: 0; }
}
@media screen and (max-width: 479px) {
  .newsletter-absolute-image { display: none; }
  .section-subtitle.k-as-h4 { font-size: 34px; }
  /* template mobile footer: the menu links get their own full-width row */
  .footer-columb-wrapper > .footer-links-wrapper:first-child { flex-basis: 100%; width: 100%; align-items: center; }
  .footer-columb-wrapper > .footer-links-wrapper { align-items: center; text-align: center; } /* one alignment for all three */
  .k-map { padding-bottom: 85% !important; }
}
/* phones: every footer link is a full 44px tap (the gaps shrink to keep the columns' length) */
@media screen and (max-width: 767px) {
  .footer-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  .footer-list { grid-row-gap: 2px; }
}

/* ======================================================================= Events page */
/* festive banner: bunting strung either side of the crest, falling confetti, floating doodles */
.k-festive { overflow: hidden; }
.k-bunting { position: absolute; top: 78px; height: 64px; background: url(/assets/kiosk/img/bunting.svg) repeat-x 0 0 / 240px 64px; pointer-events: none; z-index: 1; }
.k-bunting-l { left: 0; right: calc(50% + 62px); background-position: right 0 top 0; }
.k-bunting-r { left: calc(50% + 62px); right: 0; }
.k-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.k-c { position: absolute; display: block; opacity: .85; transform: rotate(var(--r)); animation: k-fall var(--d) linear var(--w) infinite; }
.k-c-rect { width: 7px; height: 14px; border-radius: 1px; background: currentColor; }
.k-c-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.k-c-squig { width: 16px; height: 8px; border: 2px solid currentColor; border-color: currentColor transparent transparent transparent; border-radius: 50%; }
@keyframes k-fall {
  0% { transform: translate3d(0, -30px, 0) rotate(var(--r)); opacity: 0; }
  12% { opacity: .85; }
  88% { opacity: .85; }
  100% { transform: translate3d(18px, 90px, 0) rotate(calc(var(--r) + 220deg)); opacity: 0; }
}
.k-float { animation: k-float 6s ease-in-out infinite; }
.k-float-2 { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes k-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.k-festive .base-container { position: relative; z-index: 2; }
.k-banner-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.k-banner-call { margin: 0; color: var(--k-muted); }
.k-inline-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; font: inherit; text-transform: none; letter-spacing: inherit; }
.k-inline-link:hover { color: var(--text); }
.k-party-star { inset: auto 12% 12% auto; z-index: 3; }
.k-step-ico { font-family: "Fa solid 900", sans-serif; font-size: 18px; line-height: 1; }

/* enquiry form: the template's contact card, dark */
.k-enquire .location-form-wrapper { flex-direction: column; }
.k-form-intro { margin: 14px auto 0; max-width: 520px; color: var(--k-muted); }
.k-enquire .contacts-form-wrapper { border: 1px solid var(--k-line); }
.k-enquire .contacts-input-wrapper { gap: 20px; }
.k-field { display: block; flex: 1 1 0; min-width: 0; margin: 0 0 6px; font-weight: 500; }
.k-in { display: block; margin: 0; font-weight: inherit; }
/* focus after an error or the thank-you: clear the fixed nav and the hanging desktop logo badge */
.k-enquire .contacts-input, .k-enquire .contacts-textarea, .k-form-done { scroll-margin-top: 150px; }
.k-field-full { width: 100%; }
.k-enquire .contacts-input, .k-enquire .contacts-textarea { width: 100%; background-color: transparent; color: var(--text); border-bottom-color: var(--k-line); font-size: 18px; }
.k-enquire .contacts-input:focus, .k-enquire .contacts-textarea:focus { border-bottom-color: var(--primary); color: var(--text); outline: none; }
.k-enquire .contacts-input::placeholder, .k-enquire .contacts-textarea::placeholder { color: var(--k-muted); opacity: 1; }
.k-enquire [aria-invalid="true"] { border-bottom-color: #ff8a7a !important; }
/* the field you are in stays marked, also when it shows an error (red line, lime line under it) */
.k-enquire .contacts-input:focus, .k-enquire .contacts-textarea:focus { box-shadow: 0 2px 0 0 var(--primary); }
.k-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2384fc04' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center; }
.k-select option { background: var(--k-surface); color: var(--text); }
.k-select:invalid { color: var(--k-muted); }
.k-enquire input[type="date"] { color-scheme: dark; min-height: 58px; }
.k-label { display: block; margin-top: 10px; color: var(--k-muted); font-size: 14px; letter-spacing: .5px; text-transform: uppercase; }
.k-err { display: block; min-height: 0; color: #ff8a7a; font-size: 14px; margin-top: 4px; }
.k-err:empty { display: none; }
.k-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.k-form-note { margin: 18px 0 22px; color: var(--k-muted); font-size: 15px; }
.k-submit { width: 100%; border: 0; cursor: pointer; }
.k-submit[disabled] { opacity: .7; cursor: progress; }
.k-form-status { margin: 14px 0 0; color: #ff8a7a; text-align: center; }
.k-form-status:empty { display: none; }
/* the template gives the form and its children a display, which beats the UA [hidden] rule */
.k-enquire [hidden] { display: none !important; }
.k-form-done { text-align: center; padding: 20px 0 10px; }
.k-form-done p { color: var(--text); font-size: 18px; }
.k-form-alt { margin: 34px auto 0; text-align: center; color: var(--k-muted); max-width: 640px; }

@media screen and (max-width: 991px) {
  .k-bunting { top: 60px; height: 48px; background-size: 180px 48px; }
  .k-bunting-l { right: calc(50% + 40px); }
  .k-bunting-r { left: calc(50% + 40px); }
  .k-party-star { inset: auto 4% 4% auto; transform: scale(.75); }
}
@media screen and (max-width: 767px) {
  .k-enquire .contacts-input-wrapper { flex-direction: column; align-items: stretch; gap: 0; }
  .k-field { flex: 0 0 auto; width: 100%; }
  .k-party-star { display: none; }
  .k-c { opacity: .55; }
  .k-c:nth-child(n+11) { display: none; }
  /* the form starts sooner: the card's two doodles go (their own rows above and below the title) */
  .k-enquire .contacts-form-wrapper img.contact-image { display: none; }
  .k-enquire .contacts-form-wrapper .contacts-form-title { margin: 10px 0 8px; }
}
@media screen and (max-width: 767px) {
  #how-it-works .animation-image.top-right { display: none; }
}
@media screen and (max-width: 991px) {
  .k-enquire .contacts-input, .k-enquire .contacts-textarea, .k-form-done { scroll-margin-top: 90px; }
}
/* hero doodles: out to the edges below 1024px, clear of the title and the description */
@media screen and (max-width: 1023px) {
  .k-festive .element-left.testimonial-element-left { left: 3%; }
  .k-festive .element-right.testimonials-element-right { right: 3%; }
}
/* the script subtitle may wrap next to the template's arrow (home and events, 480-840px) */
.right-subtitle-wrapper .arrow-image-about { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .k-c, .k-float { animation: none !important; }
}

/* mobile pass (2026-10-14) ----------------------------------------------------------------------------------------- */
/* touch screens: the template's hover effects would stay on after a tap (photos skewed, links recoloured) */
@media (hover: none) {
  .shop-list-image:hover, .product-image:hover { transform: none; }
  .contact-link:hover, .footer-link:hover { color: var(--text); }
  .nav-link:hover { color: var(--primary); }
  .nav-menu .nav-link[aria-current="page"]:hover { color: var(--text); }
  .k-inline-link:hover { color: var(--primary); }
}
h1, h2, h3 { overflow-wrap: break-word; }
/* phone numbers never break mid-number; long e-mail addresses may break rather than push the page sideways */
a[href^="tel:"] { white-space: nowrap; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
/* readable text: the template sets 1.2em on every paragraph; headings avoid a one-word last line */
p { line-height: 1.5; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* zoomed in (200%) or very narrow: the follow box shrinks instead of overflowing */
.newsletter-text-content { min-width: 0; }
@media screen and (max-width: 479px) {
  .about-3-form-wrapper { padding: 28px 16px; }
  .newsletter-wrapper .text-span { font-size: clamp(28px, 11vw, 40px); }
}
/* if Webflow's animation runtime never starts (slow or blocked webflow.js), nothing stays faded out (static/site.js) */
html.k-noix [data-w-id] { opacity: 1 !important; transform: none !important; }
/* find us on phones: each block a row (icon left, title and details right), left-aligned like the heading above */
@media screen and (max-width: 767px) {
  #find-us .services-wrapper { justify-items: stretch; grid-row-gap: 24px; }
  #find-us .services-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  #find-us .services-item .more-features-icon { margin: 0; }
  #find-us .bottom-contact-info { align-items: flex-start; text-align: left; }
  #find-us .bottom-contact-info > h3 { margin-top: 0; }
}