/*
Theme Name: Squats Que
Theme URI: https://squatsque.com
Author: Squats Que
Author URI: https://squatsque.com
Description: AI-search-optimised WordPress theme for Squats Que — box cricket, football turf, pickleball and indoor badminton grounds in Dilshad Garden, East Delhi. Ships a full AEO/GEO layer (llms.txt, answer boxes, JSON-LD graph, AI-crawler rules), a WhatsApp enquiry funnel, and a single source of truth for every business fact.
Version: 3.2.1
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: squats-que
Tags: sports, local-business, seo, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks

Squats Que is distributed under the terms of the GNU GPL v2 or later.

--------------------------------------------------------------------------------
NOTE ON FONTS
Fonts are NOT loaded with @import here. The design source used
`@import url('https://fonts.googleapis.com/...')` on line 6, which forces the
browser to fetch and parse this entire stylesheet before it even discovers the
font request — two serialised round-trips on the critical path. They are now
enqueued as a real stylesheet with preconnects in inc/enqueue.php.
--------------------------------------------------------------------------------

TABLE OF CONTENTS
  1.  Design tokens
  2.  Light mode
  3.  Reset & base
  4.  Typography
  5.  Layout & sections
  6.  Utilities
  7.  Buttons
  8.  Announcement bar
  9.  Site header & navigation
  10. Mobile drawer
  11. Hero
  12. Answer box (AEO)
  13. Sports grid
  14. Comparison table (AEO)
  15. Slot & enquiry builder
  16. Features / amenities
  17. Gallery & lightbox
  18. Reviews
  19. Location & map
  20. FAQ accordion
  21. Contact & forms
  22. CTA band
  23. Breadcrumbs
  24. Blog, archive & single
  25. Prose / legal pages
  26. Footer
  27. Floating actions
  28. Status toast
  29. 404 & search
  30. Keyframes
  31. Reduced motion
  32. Breakpoints
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-main: #0a0c0e;
  --bg-secondary: #12161a;
  --bg-card: rgba(22, 27, 34, 0.85);
  --bg-card-hover: rgba(30, 38, 48, 0.95);
  --bg-glass: rgba(18, 22, 26, 0.75);
  --bg-surface: #181f26;
  --bg-footer: #07080a;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(0, 255, 65, 0.35);
  --border-footer: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #9aa7b5;
  --text-muted: #627282;

  /* Accents */
  --accent-primary: #00ff41;
  --accent-primary-hover: #00e038;
  --accent-primary-glow: rgba(0, 255, 65, 0.35);
  --accent-secondary: #ffb703;
  --accent-secondary-glow: rgba(255, 183, 3, 0.35);
  --accent-tertiary: #00c2ff;
  --accent-danger: #ff3366;

  /*
   * Derived accent values. These existed in the design source only as
   * hardcoded rgba() literals scattered across six rules, which is exactly
   * why light mode was half-broken — they never inverted. Tokenised here.
   */
  --on-accent: #0a0c0e;                        /* text sitting on --accent-primary */
  --accent-soft: rgba(0, 255, 65, 0.12);       /* .badge background */
  --accent-soft-strong: rgba(0, 255, 65, 0.15);/* .toast-icon background */
  --accent-wash: rgba(0, 255, 65, 0.05);       /* .btn-outline hover */
  --overlay-scrim: rgba(10, 12, 14, 0.95);     /* .gallery-card-overlay */
  --glow-a: rgba(0, 255, 65, 0.04);            /* body ambient radial, top-left */
  --glow-b: rgba(0, 194, 255, 0.04);           /* body ambient radial, bottom-right */

  /* Gradients */
  --gradient-turf: linear-gradient(135deg, #00ff41 0%, #00d084 50%, #00b4d8 100%);
  --gradient-gold: linear-gradient(135deg, #ffb703 0%, #fb8500 100%);
  --gradient-dark: linear-gradient(180deg, rgba(10, 12, 14, 0) 0%, rgba(10, 12, 14, 0.95) 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.15), transparent 70%);

  /* Type */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-neon: 0 0 25px rgba(0, 255, 65, 0.45);

  /* Metrics */
  --container-width: 1240px;
  --announce-h: 45px;
  --header-h: 80px;
  --chrome-h: 125px;                            /* announce + header */
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /*
   * Z-index scale. The design source had no scale at all, which is how
   * .site-header and .floating-actions both ended up at 100 — the header
   * could paint over the floating CTAs depending on source order.
   */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-backdrop: 200;
  --z-drawer: 210;
  --z-floating: 300;
  --z-toast: 400;
  --z-lightbox: 500;
  --z-skip-link: 600;
}

/* ==========================================================================
   2. LIGHT MODE
   Complete override set. The design source missed --accent-danger and
   --gradient-gold, and six components hardcoded dark-tuned rgba() outside the
   token system, so light mode rendered dark-on-dark in places.
   ========================================================================== */

body.light-mode {
  --bg-main: #f4f6f8;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-surface: #eaedf1;
  --bg-footer: #0f172a;

  --border-color: rgba(0, 0, 0, 0.08);
  --border-highlight: rgba(0, 170, 45, 0.45);
  --border-footer: rgba(255, 255, 255, 0.1);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --accent-primary: #00aa30;
  --accent-primary-hover: #008f28;
  --accent-primary-glow: rgba(0, 170, 48, 0.25);
  --accent-secondary: #d97706;
  --accent-secondary-glow: rgba(217, 119, 6, 0.25);
  --accent-tertiary: #0284c7;
  --accent-danger: #dc2626;

  --on-accent: #ffffff;
  --accent-soft: rgba(0, 170, 48, 0.1);
  --accent-soft-strong: rgba(0, 170, 48, 0.14);
  --accent-wash: rgba(0, 170, 48, 0.06);
  --overlay-scrim: rgba(15, 23, 42, 0.88);
  --glow-a: rgba(0, 170, 48, 0.05);
  --glow-b: rgba(2, 132, 199, 0.05);

  --gradient-turf: linear-gradient(135deg, #00aa30 0%, #00916b 50%, #0284c7 100%);
  --gradient-gold: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
  --gradient-dark: linear-gradient(180deg, rgba(244, 246, 248, 0) 0%, rgba(15, 23, 42, 0.7) 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 170, 48, 0.1), transparent 70%);

  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-neon: 0 0 22px rgba(0, 170, 48, 0.28);
}

/* The footer stays dark in light mode, so its inner text must not invert. */
body.light-mode .site-footer,
body.light-mode .site-footer a {
  color: #e2e8f0;
}

body.light-mode .site-footer .footer-heading {
  color: #ffffff;
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must clear the sticky header, not hide behind it. */
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background-color: var(--bg-main);
  background-image:
    radial-gradient(circle at 15% 12%, var(--glow-a), transparent 45%),
    radial-gradient(circle at 85% 88%, var(--glow-b), transparent 45%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scroll lock for the mobile drawer and the lightbox. A class rather than
   `body.style.overflow` from JS: an inline style cannot be overridden by the print
   stylesheet, and two features fighting over the same inline property is how you
   get a page that stays frozen after one of them closes. */
body.no-scroll {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Icons from sq_the_icon().
   The reset above turns `height: auto` on, which discards the SVG's own height
   attribute — harmless while every icon is square, but it means an icon inside a
   flex row (.btn, .contact-method, .check-list li) is a shrinkable flex item and
   gets squeezed to nothing when the label is long. These two lines are the whole
   fix; the size still comes from the width attribute PHP writes. */
.sq-icon {
  flex-shrink: 0;
  height: auto;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-primary-hover);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  padding-left: 1.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 2.5rem 0;
}

/* Visible focus for keyboard users only — never a permanent outline on click. */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-primary);
  color: var(--on-accent);
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: var(--z-skip-link);
  padding: 0.75rem 1.25rem;
  background: var(--accent-primary);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
  color: var(--on-accent);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
}

h4 {
  font-size: 1.15rem;
  font-weight: 700;
}

h5,
h6 {
  font-size: 1rem;
  font-weight: 700;
}

p {
  margin: 0 0 1.15rem;
  color: var(--text-secondary);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  color: var(--text-primary);
  font-weight: 700;
}

blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-card);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.05rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-surface);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.display-text {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1;
  font-weight: 400;
}

.text-gradient {
  background: var(--gradient-turf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-accent {
  color: var(--accent-primary);
}

.text-muted {
  color: var(--text-muted);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ==========================================================================
   5. LAYOUT & SECTIONS
   ========================================================================== */

/* The <main> wrapper opened in header.php. The min-height stops the footer
   riding up into the middle of the viewport on a deliberately thin page — the
   404, or an archive with one result. */
.site-main {
  min-height: 55vh;
}

/* flow-root so the first section's margin is contained rather than collapsing
   out through the article and separating it from the header. */
.page-article {
  display: flow-root;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 820px;
}

.section {
  padding: 5.5rem 0;
  position: relative;
}

.section-tight {
  padding: 3.5rem 0;
}

.section-alt {
  background: var(--bg-secondary);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.section-header.align-left {
  text-align: left;
  margin-left: 0;
}

.section-title {
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0;
}

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.split-wide-left {
  grid-template-columns: 1.4fr 1fr;
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--accent-soft);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-full);
  color: var(--accent-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

.badge-gold {
  background: var(--accent-secondary-glow);
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
}

.badge-neutral {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 0 var(--accent-primary-glow);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.divider {
  height: 1px;
  background: var(--border-color);
  margin: 3rem 0;
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.stack > * + * {
  margin-top: 1rem;
}

.center {
  text-align: center;
}

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--border-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
}

/* Checkmark lists — used heavily on sport pages for highlight bullets. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border-highlight);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff41' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

body.light-mode .check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aa30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.85rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--on-accent);
  box-shadow: 0 6px 20px var(--accent-primary-glow);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-neon);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-highlight);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-primary);
  border-color: var(--border-highlight);
}

.btn-outline:hover {
  background: var(--accent-wash);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 0.6rem 1rem;
}

.btn-ghost:hover {
  color: var(--text-primary);
}

.btn-whatsapp {
  background: #25d366;
  color: #05270f;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover {
  background: #1fbe5a;
  color: #05270f;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}

.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Centred variant. A class rather than an inline style so that print and
   light-mode overrides can still reach it. */
.btn-group-center {
  justify-content: center;
}

/* ==========================================================================
   8. ANNOUNCEMENT BAR
   Honest urgency only. The original hardcoded "3 slots remaining for today",
   which was invented inventory — removed entirely.
   ========================================================================== */

.announcement-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.announcement-content {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.announcement-bar strong {
  color: var(--accent-primary);
  font-weight: 700;
}

.announcement-bar a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-highlight);
  text-underline-offset: 3px;
}

.announcement-bar a:hover {
  color: var(--accent-primary);
}

.announcement-clock {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ==========================================================================
   9. SITE HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background: var(--bg-main);
}

.header-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-branding a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.custom-logo {
  height: 42px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  line-height: 1;
}

.brand-wordmark span {
  color: var(--accent-primary);
}

.brand-tagline {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.primary-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  position: relative;
}

.nav-link,
.nav-menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.nav-link:hover,
.nav-menu a:hover,
.nav-link.active,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
  color: var(--accent-primary);
  background: var(--accent-wash);
}

/* Dropdowns */
.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: var(--z-raised);
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu a {
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  white-space: normal;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.theme-toggle,
.mobile-toggle {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: var(--transition);
}

.theme-toggle:hover,
.mobile-toggle:hover {
  color: var(--accent-primary);
  border-color: var(--border-highlight);
  background: var(--accent-wash);
}

.theme-toggle svg,
.mobile-toggle svg {
  width: 20px;
  height: 20px;
}

/* One button, two glyphs. The class name says which mode the glyph SWITCHES YOU
   TO — so the sun (.theme-icon-light) is the one on show while dark mode is
   active. Doing the swap in CSS off `body.light-mode` means app.js only ever
   touches that one class and there is no second source of truth for icon state. */
.theme-icon-dark {
  display: none;
}

.theme-icon-light {
  display: inline-flex;
}

body.light-mode .theme-icon-dark {
  display: inline-flex;
}

body.light-mode .theme-icon-light {
  display: none;
}

.mobile-toggle {
  display: none;
}

.header-cta {
  display: inline-flex;
}

/* ==========================================================================
   10. MOBILE DRAWER
   ========================================================================== */

.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--z-backdrop);
}

.mobile-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 82%;
  max-width: 380px;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: var(--z-drawer);
}

.mobile-nav-drawer.open {
  right: 0;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.mobile-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.mobile-close:hover {
  color: var(--accent-danger);
}

.mobile-close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-link,
.mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-nav-link:hover,
.mobile-nav-list a:hover,
.mobile-nav-list .current-menu-item > a {
  background: var(--accent-wash);
  color: var(--accent-primary);
}

.mobile-nav-list .sub-menu {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0 0;
}

.mobile-nav-list .sub-menu a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mobile-drawer-footer {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
  display: grid;
  gap: 0.75rem;
}

.mobile-drawer-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   11. HERO
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: calc(100vh - var(--chrome-h));
  display: flex;
  align-items: center;
  padding: 4.5rem 0 6rem;
  overflow: hidden;
}

.hero-section.hero-compact {
  min-height: auto;
  padding: 4rem 0 4.5rem;
}

.hero-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.38) contrast(1.1);
  transform: scale(1.03);
  animation: zoomSlow 20s infinite alternate ease-in-out;
}

body.light-mode .hero-bg-media img {
  filter: brightness(0.55) contrast(1.05);
}

.hero-bg-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-dark);
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  max-width: 780px;
}

.hero-content.hero-centered {
  margin: 0 auto;
  text-align: center;
}

.hero-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin-bottom: 1.25rem;
  color: #ffffff;
}

body.light-mode .hero-title {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(15, 23, 42, 0.45);
}

.hero-title .text-gradient {
  display: inline-block;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: #cbd5e1;
  max-width: 620px;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-centered .hero-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero-centered .hero-actions {
  justify-content: center;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.hero-centered .hero-stats {
  justify-content: center;
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 2.35rem;
  line-height: 1;
  color: var(--accent-primary);
  display: block;
}

.hero-stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 600;
  font-family: var(--font-heading);
}

/* Floating quick-facts card, gradient-bordered via mask-composite. */
.hero-quick-card {
  position: relative;
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
}

.hero-centered .hero-quick-card {
  margin-left: auto;
  margin-right: auto;
}

.hero-quick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-turf);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-quick-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-quick-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #e2e8f0;
  font-weight: 500;
}

.hero-quick-list svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

/* Interior page header, used on every non-home page. */
.page-hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: var(--gradient-glow);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 820px;
}

.page-hero h1 {
  margin-bottom: 0.85rem;
}

.page-hero .lead {
  margin-bottom: 0;
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   12. ANSWER BOX  (AEO)
   The 40-60 word direct answer that AI engines lift verbatim. Marked up as a
   real <section> with a heading so extractors can bind question to answer.
   ========================================================================== */

.answer-box {
  position: relative;
  margin: 0 0 3rem;
  padding: 1.75rem 1.85rem 1.75rem 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.answer-box-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.75rem;
}

.answer-box-label svg {
  width: 14px;
  height: 14px;
}

.answer-box-question {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
  line-height: 1.35;
}

.answer-box-text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
}

.answer-box-text strong {
  color: var(--text-primary);
}

/* Compact key-facts strip. Highly extractable label/value pairs. */
.key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 2.5rem 0;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.key-fact {
  background: var(--bg-card);
  padding: 1.15rem 1.25rem;
}

.key-fact-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-heading);
  margin-bottom: 0.35rem;
}

.key-fact-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

/* ==========================================================================
   13. SPORTS GRID
   ========================================================================== */

.sports-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.filter-btn {
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-highlight);
}

.filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-primary-glow);
}

.sports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.75rem;
}

/*
 * app.js sets `display: 'flex'` when un-filtering a card, so the base display
 * MUST be flex — a `display: block` base would be silently overwritten and the
 * internal layout would break on every filter interaction.
 */
.sport-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.sport-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.sport-card-image-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
}

.sport-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sport-card:hover .sport-card-image-wrap img {
  transform: scale(1.07);
}

.sport-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: var(--z-base);
}

.sport-card-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.85rem;
}

.sport-card-title {
  font-size: 1.35rem;
  margin: 0;
}

.sport-card-title a {
  color: var(--text-primary);
}

.sport-card-title a:hover {
  color: var(--accent-primary);
}

.sport-card-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
  flex: 1 1 auto;
}

.sport-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sport-card-specs li {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-heading);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.sport-card-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.sport-card-footer .btn {
  flex: 1 1 auto;
}

/* Sport-page photo, in the right column of the .split. `.single-thumb` was close
   but carries a blog-post max-width and bottom margin that fight the grid. */
.sport-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.sport-media img {
  width: 100%;
  aspect-ratio: 19 / 12;
  object-fit: cover;
}

.sport-media figcaption {
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   14. COMPARISON TABLE  (AEO)
   Tables parse cleanly for AI extraction, so per-sport facts that vary are
   presented as a real <table> rather than as prose.
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.compare-table caption {
  padding: 1.1rem 1.25rem;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.compare-table th,
.compare-table td {
  padding: 0.9rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.compare-table thead th {
  background: var(--bg-surface);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.compare-table tbody th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.compare-table tbody td {
  color: var(--text-secondary);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th {
  background: var(--accent-wash);
}

/* ==========================================================================
   15. SLOT & ENQUIRY BUILDER
   Formerly a price calculator. No rates, no totals — it composes a prefilled
   WhatsApp message instead, because rates are quoted in conversation.
   ========================================================================== */

.calculator-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  padding: 5.5rem 0;
}

.calculator-section::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: var(--gradient-glow);
  pointer-events: none;
}

.calculator-wrap {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: start;
}

.calculator-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.calculator-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.field {
  margin-bottom: 1.5rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.sport-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sport-pill {
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
}

.sport-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-highlight);
}

.sport-pill.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-primary-glow);
}

.form-control,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='time'],
input[type='number'],
input[type='search'],
select,
textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-md);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: var(--transition);
  appearance: none;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7b5' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

/* `input` is in this list because no template applies .form-control — the fields
   above are styled by element selector, so without it every text, tel, date and
   search placeholder falls back to the browser's default grey, which is close to
   unreadable against --bg-main in dark mode. */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* Duration range slider */
.range-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

input[type='range'] {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  padding: 0;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 3px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--accent-primary), 0 2px 10px var(--accent-primary-glow);
  cursor: pointer;
}

input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 3px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--accent-primary), 0 2px 10px var(--accent-primary-glow);
  cursor: pointer;
}

.range-value {
  min-width: 74px;
  text-align: center;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  border: 1px solid var(--border-highlight);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Checkbox */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox-field input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--accent-primary);
  appearance: auto;
}

.checkbox-field span {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Summary panel */
.summary-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.85rem;
}

.summary-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.94rem;
}

.summary-key {
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 600;
}

.summary-value {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}

.summary-note {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--bg-main);
  border: 1px dashed var(--border-color);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.summary-note strong {
  color: var(--accent-primary);
}

/* ==========================================================================
   16. FEATURES / AMENITIES
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  padding: 1.85rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-title {
  font-size: 1.12rem;
  margin: 0;
}

.feature-text {
  color: var(--text-secondary);
  font-size: 0.94rem;
  margin: 0;
}

/* Numbered "how it works" steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  counter-increment: step;
  position: relative;
  padding: 1.85rem 1.65rem 1.65rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.step::before {
  content: counter(step);
  position: absolute;
  top: -18px;
  left: 1.65rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
  box-shadow: 0 4px 14px var(--accent-primary-glow);
}

.step-title {
  font-size: 1.08rem;
  margin: 0.85rem 0 0.5rem;
}

.step p {
  font-size: 0.93rem;
  margin: 0;
}

/* ==========================================================================
   17. GALLERY & LIGHTBOX
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.gallery-card {
  position: relative;
  height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.gallery-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(180deg, transparent 40%, var(--overlay-scrim) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-card-overlay,
.gallery-card:focus-within .gallery-card-overlay {
  opacity: 1;
}

.gallery-card-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.gallery-card-meta {
  font-size: 0.82rem;
  color: #cbd5e1;
  margin: 0.25rem 0 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/*
 * `#lightbox-image` intentionally ships with NO src attribute. The design
 * source used src="" which makes browsers resolve the empty string to the
 * current page URL and fire a wasted request for the whole HTML document.
 */
.lightbox img:not([src]) {
  display: none;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transition: var(--transition);
}

.lightbox-close:hover {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: #ffffff;
}

.lightbox-close svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   18. REVIEWS
   Real Google reviews only. When none have been added, templates render an
   invitation to read the live Google profile — never invented testimonials.
   ========================================================================== */

.reviews-block {
  display: grid;
  gap: 2.25rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.review-card {
  padding: 1.85rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
}

.review-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  transform: translateY(-4px);
}

.review-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--accent-secondary);
}

.review-stars svg {
  width: 17px;
  height: 17px;
}

.review-text {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  flex: 1 1 auto;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient-turf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--on-accent);
  flex-shrink: 0;
}

.review-author-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.96rem;
  line-height: 1.3;
}

.review-author-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.reviews-empty {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
}

.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.rating-score {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-secondary);
}

/* ==========================================================================
   19. LOCATION & MAP
   ========================================================================== */

.location-wrap {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2.5rem;
  align-items: stretch;
}

.location-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nap-block {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.nap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.nap-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.nap-item-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.nap-item-value {
  color: var(--text-primary);
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 500;
}

.nap-item-value a {
  color: var(--text-primary);
}

.nap-item-value a:hover {
  color: var(--accent-primary);
}

.map-embed {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25) contrast(1.05);
}

body.light-mode .map-embed iframe {
  filter: none;
}

.areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.areas-list li {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  font-size: 0.87rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.areas-list li.is-home {
  background: var(--accent-soft);
  border-color: var(--border-highlight);
  color: var(--accent-primary);
  font-weight: 700;
}

/* ==========================================================================
   20. FAQ ACCORDION
   The design source capped answers at max-height: 250px, which silently
   truncated long answers. FAQ answers are the single most-cited unit for AI
   engines, so clipping them is an AEO bug, not just a visual one. Replaced
   with a grid-rows animation that has no height ceiling at all.
   ========================================================================== */

.faq-container {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
}

.faq-item {
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.faq-item.active {
  border-color: var(--border-highlight);
  background: var(--bg-card-hover);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--accent-primary);
}

.faq-item.active .faq-question {
  color: var(--accent-primary);
}

.faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.faq-icon::before {
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 14px;
}

.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* 0fr -> 1fr animates to the answer's natural height, whatever that is. */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  min-height: 0;
}

.faq-answer-inner {
  padding: 0 1.5rem 1.4rem;
  color: var(--text-secondary);
  font-size: 0.97rem;
  line-height: 1.75;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

/*
 * Fallback for engines without interpolate-size on grid-template-rows.
 * No max-height cap here either — worst case the reveal is instant, but the
 * answer is never truncated.
 */
@supports not (grid-template-rows: 0fr) {
  .faq-answer-wrap {
    display: block;
    height: 0;
    overflow: hidden;
    transition: none;
  }

  .faq-item.active .faq-answer-wrap {
    height: auto;
  }
}

/* ==========================================================================
   21. CONTACT & FORMS
   ========================================================================== */

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-form {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.contact-form-note {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
  line-height: 1.6;
}

.contact-methods {
  display: grid;
  gap: 1rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.contact-method:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  transform: translateX(4px);
}

.contact-method-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-method-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.contact-method:hover .contact-method-value {
  color: var(--accent-primary);
}

/* The label+value pair. `min-width: 0` is load-bearing: without it a long email
   address makes this flex item refuse to shrink and the card overflows its card. */
.contact-method-text {
  min-width: 0;
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.6rem;
}

.search-form .search-field {
  flex: 1 1 auto;
}

/* ==========================================================================
   22. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.cta-band::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: var(--gradient-glow);
  pointer-events: none;
}

.cta-band-inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cta-band-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.cta-band p {
  font-size: 1.08rem;
  margin-bottom: 2rem;
}

.cta-band .btn-group {
  justify-content: center;
}

.cta-band-meta {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ==========================================================================
   23. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  padding: 1rem 0;
  font-size: 0.86rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: var(--text-muted);
  opacity: 0.5;
}

.breadcrumbs a {
  color: var(--text-secondary);
}

.breadcrumbs a:hover {
  color: var(--accent-primary);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text-primary);
  font-weight: 600;
}

/* ==========================================================================
   24. BLOG, ARCHIVE & SINGLE
   ========================================================================== */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: var(--transition);
}

.post-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.post-card-thumb {
  height: 190px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-surface);
}

.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover .post-card-thumb img {
  transform: scale(1.06);
}

.post-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.post-card-title {
  font-size: 1.18rem;
  margin: 0;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--text-primary);
}

.post-card-title a:hover {
  color: var(--accent-primary);
}

.post-card-excerpt {
  font-size: 0.93rem;
  color: var(--text-secondary);
  margin: 0;
  flex: 1 1 auto;
}

.post-card-more {
  margin: 0;
}

.post-card-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.post-card-more a svg {
  transition: var(--transition);
}

.post-card:hover .post-card-more a svg {
  transform: translateX(4px);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.post-meta > * + *::before {
  content: '·';
  margin-right: 0.75rem;
  opacity: 0.6;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
}

.widget {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.widget-title {
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.widget a {
  color: var(--text-secondary);
  font-size: 0.93rem;
}

.widget a:hover {
  color: var(--accent-primary);
}

.single-post-header {
  max-width: 820px;
  margin: 0 auto 2.5rem;
}

.single-thumb {
  max-width: 1000px;
  margin: 0 auto 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* On a post the answer box follows the header directly. Pin it to the header's
   820px measure and centre it, so the quick answer reads as part of the title
   block rather than spanning the wider article container it lives in. */
.single-post-header + .answer-box {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 3.5rem;
}

.pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
}

.pagination .page-numbers:hover {
  border-color: var(--border-highlight);
  color: var(--accent-primary);
}

.pagination .page-numbers.current {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
}

/* wp_link_pages() on a <!--nextpage-->'d page or post. WordPress emits bare
   anchors with no wrapper class of its own, so without this the links inherit
   .prose styling and read as body copy rather than navigation. */
.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.page-links a,
.page-links > span:not(:first-child) {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-decoration: none;
}

.page-links a:hover {
  border-color: var(--border-highlight);
  color: var(--accent-primary);
}

/* The current page is a <span>, not an <a>. */
.page-links > span:not(:first-child) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

.post-nav a {
  display: block;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.post-nav a:hover {
  border-color: var(--border-highlight);
}

.post-nav-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.post-nav-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

/* The "book the ground this post is about" block. A reader who arrived on an
   informational query has to be handed the bookable page — the nav alone does
   not do it, so this sits between the article and the post navigation. */
.post-related {
  max-width: 780px;
  margin: 0 auto;
}

.post-related-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.post-related-more {
  margin-top: 2.5rem;
}

.post-related-more .toc-title {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   25. PROSE / LEGAL PAGES
   ========================================================================== */

.prose {
  max-width: 780px;
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Blog posts centre their measure inside a full-width container; legal pages
   keep the default left edge so their table of contents lines up with the body. */
.prose-center {
  margin-left: auto;
  margin-right: auto;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-top: 2.75rem;
  padding-top: 0.5rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
  color: var(--text-secondary);
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose img {
  border-radius: var(--radius-md);
  margin: 2rem 0;
}

.prose table {
  margin: 2rem 0;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  text-align: left;
}

.prose th {
  background: var(--bg-surface);
  font-family: var(--font-heading);
}

.toc {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  margin-bottom: 2.5rem;
}

.toc-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}

.legal-updated {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  display: inline-block;
  margin-bottom: 2rem;
}

/* ==========================================================================
   26. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-color);
  padding: 4rem 0 0;
  color: #94a3b8;
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

/* A grid column defaults to min-content width, so one long unbroken string — an
   address, an email — widens the column and squashes its neighbours. */
.footer-col {
  min-width: 0;
}

.footer-brand .brand-wordmark {
  color: #ffffff;
}

.footer-about {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 1rem 0 1.5rem;
  max-width: 340px;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1.15rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.footer-links a {
  color: #94a3b8;
  font-size: 0.93rem;
}

.footer-links a:hover {
  color: var(--accent-primary);
  padding-left: 4px;
}

.footer-contact {
  display: grid;
  gap: 0.85rem;
  font-size: 0.93rem;
}

.footer-contact a {
  color: #cbd5e1;
}

.footer-contact a:hover {
  color: var(--accent-primary);
}

.footer-contact-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.footer-contact-row svg {
  width: 17px;
  height: 17px;
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-footer);
  color: #cbd5e1;
}

.footer-social a:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 19px;
  height: 19px;
}

.footer-bottom {
  border-top: 1px solid var(--border-footer);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: #64748b;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom-links a {
  color: #94a3b8;
}

.footer-bottom-links a:hover {
  color: var(--accent-primary);
}

.footer-serving {
  font-size: 0.82rem;
  color: #64748b;
  padding-bottom: 1.5rem;
  line-height: 1.7;
}

/* ==========================================================================
   27. FLOATING ACTIONS
   Sits above the header (z 300 vs 100). In the design source both were 100,
   so which one won depended purely on document order.
   ========================================================================== */

.floating-actions {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  position: relative;
}

.floating-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.floating-btn svg {
  width: 26px;
  height: 26px;
}

.floating-btn-whatsapp {
  background: #25d366;
  color: #ffffff;
}

.floating-btn-call {
  background: var(--accent-primary);
  color: var(--on-accent);
}

.floating-btn-top {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 46px;
  height: 46px;
  margin-left: auto;
  opacity: 0;
  visibility: hidden;
}

.floating-btn-top.visible {
  opacity: 1;
  visibility: visible;
}

.floating-btn-top svg {
  width: 20px;
  height: 20px;
}

/* Tooltip label on hover, desktop only. */
.floating-btn::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.floating-btn:hover::after {
  opacity: 1;
}

/* Mobile sticky action bar — replaces the floating stack on small screens. */
.mobile-action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-floating);
  padding: 0.6rem 0.75rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-color);
  gap: 0.6rem;
}

.mobile-action-bar .btn {
  flex: 1 1 0;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
}

/* ==========================================================================
   28. STATUS TOAST
   The design source cycled six invented booking notifications ("Kunal &
   Friends", "Wipro Corporate Team"). Fabricated activity signals breach
   Google's spam policies. This now carries only true, verifiable status.
   ========================================================================== */

.social-proof-toast {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-toast);
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.social-proof-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--accent-soft-strong);
  border: 1px solid var(--border-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.toast-icon svg {
  width: 19px;
  height: 19px;
}

.toast-content {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.toast-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.toast-text {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.toast-title,
.toast-text {
  margin: 0;
}

.toast-close {
  margin-left: auto;
  color: var(--text-muted);
  padding: 0.25rem;
  flex-shrink: 0;
}

.toast-close:hover {
  color: var(--accent-danger);
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   29. 404 & SEARCH
   ========================================================================== */

.error-404 {
  padding: 6rem 0;
  text-align: center;
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  line-height: 0.85;
  background: var(--gradient-turf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 1rem;
}

.error-suggestions {
  max-width: 620px;
  margin: 2.5rem auto 0;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  text-align: left;
}

/* A dead URL is still a visit. The 404 offers the four bookable grounds rather
   than only a search box, so the page can convert instead of just apologising. */
.error-sports {
  text-align: left;
  margin-top: 1rem;
}

.search-results-count {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.no-results {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
}

/* ==========================================================================
   30. KEYFRAMES
   ========================================================================== */

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--accent-primary-glow);
    opacity: 1;
  }
  70% {
    transform: scale(1.4);
    box-shadow: 0 0 0 12px transparent;
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes zoomSlow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/*
 * fadeSlideUp was NEVER DEFINED in the design source, yet app.js:142 assigns
 * it to every sport card on each filter click. The filter animation has
 * therefore been silently dead this whole time. Defining it here is what makes
 * the existing JS actually do something.
 */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   31. REDUCED MOTION
   The design source had no such block despite a 20-second Ken Burns zoom on
   the hero, which is exactly the kind of sustained motion that triggers
   vestibular symptoms.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .hero-bg-media img {
    animation: none;
    transform: none;
  }

  .sport-card:hover,
  .feature-card:hover,
  .review-card:hover,
  .post-card:hover,
  .gallery-card:hover,
  .btn:hover,
  .floating-btn:hover {
    transform: none;
  }

  .sport-card:hover .sport-card-image-wrap img,
  .gallery-card:hover img,
  .post-card:hover .post-card-thumb img {
    transform: none;
  }

  .pulse-dot {
    animation: none;
  }
}

/* ==========================================================================
   32. WORDPRESS CORE CLASSES
   Classes WordPress emits that no template of ours writes, so nothing above
   covers them. Two groups:

   (a) the_posts_pagination() wraps its page numbers in a .nav-links div, so the
       gap and centering on .pagination never reach them — the numbers are grid
       children of that div, not of the nav. Without this they run together with
       only collapsed HTML whitespace between them.

   (b) Alignment and caption classes from the block editor. The blog posts are
       authored content inside .prose, and an editor who centres an image or
       adds a caption should get what they asked for rather than a full-width
       image and an unstyled paragraph.
   ========================================================================== */

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

/* A floated image is the one thing in editor content that can escape its own
   column, so .prose contains its floats rather than letting one overlap the
   section below. */
.prose::after {
  content: "";
  display: table;
  clear: both;
}

.prose .alignleft,
.prose figure.alignleft {
  float: left;
  margin: 0.35rem 1.75rem 1.25rem 0;
  max-width: 50%;
}

.prose .alignright,
.prose figure.alignright {
  float: right;
  margin: 0.35rem 0 1.25rem 1.75rem;
  max-width: 50%;
}

.prose .aligncenter,
.prose figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.prose .alignwide,
.prose .alignfull {
  /* .prose is already narrow by design; widen rather than break the column. */
  width: 100%;
  max-width: 100%;
}

.prose figure {
  margin: 2rem 0;
}

.prose figure img,
.prose .wp-caption img {
  border-radius: var(--radius-md);
}

.prose figcaption,
.prose .wp-caption-text,
.prose .gallery-caption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

/* Required by WordPress even when unused: a sticky post and an author's own
   comment both need a class present in the stylesheet. */
.sticky,
.bypostauthor {
  position: relative;
}

/* ==========================================================================
   33. BREAKPOINTS
   ========================================================================== */

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
    --chrome-h: 117px;
  }

  .primary-nav,
  .header-cta {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .section {
    padding: 4rem 0;
  }

  .split,
  .location-wrap,
  .contact-wrap,
  .calculator-wrap,
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .calculator-summary {
    position: static;
  }

  .sports-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .hero-section {
    min-height: auto;
    padding: 3.5rem 0 4.5rem;
  }

  .map-embed {
    min-height: 320px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15.5px;
  }

  .container {
    padding: 0 1.15rem;
  }

  .section {
    padding: 3.25rem 0;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

  .announcement-bar {
    font-size: 0.78rem;
    gap: 0.75rem;
  }

  .hero-stats {
    gap: 1.5rem;
  }

  .hero-stat-value {
    font-size: 1.9rem;
  }

  .hero-actions .btn,
  .cta-band .btn {
    width: 100%;
  }

  .btn-group {
    width: 100%;
  }

  .sports-grid,
  .posts-grid,
  .gallery-grid,
  .features-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .sport-card-image-wrap {
    height: 210px;
  }

  .calculator-panel,
  .calculator-summary,
  .contact-form {
    padding: 1.5rem;
  }

  .answer-box {
    padding: 1.4rem 1.4rem 1.4rem 1.65rem;
  }

  .faq-question {
    font-size: 0.96rem;
    padding: 1.1rem 1.15rem;
  }

  .faq-answer-inner {
    padding: 0 1.15rem 1.2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Swap the floating stack for a full-width action bar. */
  .floating-actions {
    display: none;
  }

  .mobile-action-bar {
    display: flex;
  }

  /* Keep the toast clear of the action bar. */
  .social-proof-toast {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: 5rem;
  }

  body {
    /* Room for the fixed action bar so the footer is fully reachable. */
    padding-bottom: 4.5rem;
  }

  .lightbox {
    padding: 1rem;
  }

  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.5rem, 12vw, 3.25rem);
  }

  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .key-facts {
    grid-template-columns: 1fr 1fr;
  }

  .sport-pills,
  .sports-filter {
    gap: 0.45rem;
  }

  .sport-pill,
  .filter-btn {
    font-size: 0.83rem;
    padding: 0.55rem 1rem;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .site-header,
  .announcement-bar,
  .floating-actions,
  .mobile-action-bar,
  .social-proof-toast,
  .mobile-nav-drawer,
  .mobile-backdrop,
  .lightbox,
  .cta-band {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
    padding-bottom: 0;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .answer-box,
  .key-facts,
  .nap-block {
    border: 1px solid #999999;
  }
}