/* Reference-inspired dark theme, retaining Comms by Karl's content and navigation. */
.menu-toggle { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; order: 2; }
.header-contact { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 10px 16px; border: 1px solid #2463eb; border-radius: 999px; background: #2463eb; color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.header-contact:hover, .header-contact[aria-current="page"] { background: #164fce; border-color: #6996fb; }
.header .page-nav { margin-left: auto; }
@media (min-width: 761px) and (max-width: 1050px) {
  .header { flex-direction: row; flex-wrap: wrap; }
  .header-actions { margin-left: auto; order: 0; }
  .header .page-nav { flex-basis: 100%; margin-left: 0; }
}
:root {
  color-scheme: dark;
  --bg: #0b0d0e;
  --panel: #191d20;
  --ink: #f7f7f8;
  --muted: #b4bbc3;
  --lime: #8fbcff;
  --line: #30363b;
}

body { background: var(--bg); color: var(--ink); }
.header {
  width: 100%; margin: 0;
  background: #0b0d0ef5;
  border-bottom-color: #252a2e;
  box-shadow: none;
}
.brand-mark { background: #191d20; border-color: #55626e; color: #f7f7f8; border-radius: 16px; }
.brand small { color: #a6afb8; }
.page-nav a { color: #dce0e5; }
.page-nav a:hover { background: #1b2024; color: #fff; }
.page-nav a[aria-current="page"] { background: #252d34; border-color: #52606c; color: #fff; }
.page-nav .nav-cta { background: #2463eb; border-color: #2463eb; color: #fff; }
.page-nav .nav-cta:hover, .page-nav .nav-cta[aria-current="page"] { background: #164fce; border-color: #6996fb; color: #fff; }
.skip-link { background: #191d20; border-color: #8fbcff; color: #fff; }

h1, h2, h3 { color: #f7f7f8; }
.hero, .page-home .hero { background: #0b0d0e; }
.hero em { color: #b9d4ff; }
.hero .eyebrow { color: #abbdd5; }
.dash { background: #8fbcff; }
.hero-intro { color: #c6ccd3; }
.hero-note { color: #aeb7c0; }
.hero-visual, .page-home .hero-visual.commentary-photo {
  border-radius: 28px; background: #191d20;
  border: 1px solid #30363b; box-shadow: none;
}
.image-label span { color: #afcaff; }
.visual-caption { color: #b4bbc3; }
.button { border-radius: 999px; }
.lime, .hero .lime { background: #2463eb; color: #fff; }
.lime:hover, .hero .lime:hover { background: #164fce; }
.outline { background: transparent; border-color: #53606a; color: #e8edf5; }
.outline:hover { background: #252c32; }

.style-grid { gap: 24px; }
.commentary-sample { max-width: 848px; margin: 0 auto 36px; background: #191d20; border: 1px solid #30363b; border-radius: 24px; overflow: hidden; }
.sample-heading { padding: 20px 24px; }
.sample-heading h2 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.025em; }
.sample-heading p { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: #b4bbc3; }
.commentary-sample video { display: block; width: 100%; height: auto; aspect-ratio: 848 / 480; background: #000; }
.style-card { border-radius: 28px; background: #191d20; border-color: #38434c; box-shadow: none; }
.professional-card { background: linear-gradient(145deg, #153c85, #14213e); border-color: #3d60a0; border-top-color: #8bb7ff; }
.banter-card { background: linear-gradient(145deg, #58312c, #2b1e20); border-color: #85564e; border-top-color: #e99e8f; }
.coaching-card { background: linear-gradient(145deg, #492767, #241c33); border-color: #765292; border-top-color: #bc94eb; }
.professional-card:before, .banter-card:before, .coaching-card:before { opacity: .18; }
.professional-card h3, .banter-card h3, .coaching-card h3 { color: #fff; }
.style-card p, .professional-card p, .banter-card p, .coaching-card p { color: #e3e7ee; }
.style-card .card-number { color: #c4cbd7; }
/* Circular windows show the matching balls from Karl's supplied photograph. */
.style-card .card-number.pool-ball {
  width: 44px; height: 44px; border-radius: 50%;
  background-image: url('/pool-ball-reference.jpg');
  background-size: 301.5px 266px;
  background-repeat: no-repeat;
  box-shadow: 0 3px 10px #0005;
}
.pool-ball-1 { background-position: -128.25px -53.25px; }
.pool-ball-2 { background-position: -106.25px -92px; }
.pool-ball-3 { background-position: -151.5px -91.25px; }
.style-card .card-tag, .professional-card .card-tag, .banter-card .card-tag, .coaching-card .card-tag { color: #e0e6ef; }
.style-card .card-icon { color: #d6e7ff; }
.style-card > a, .professional-card > a, .banter-card > a, .coaching-card > a { color: #fff; border-top-color: #ffffff38; }
.style-card > a:hover { color: #bfd8ff; }

.voice-section { background: #191d20; border: 1px solid #30363b; }
.tour-section { padding-top: 28px; }
.tour-section .section-top { gap: 24px; margin-bottom: 20px; }
.tour-section .section-top .eyebrow { margin-bottom: 8px; }
.tour-section .section-top h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.tour-section .voice-section { margin: 32px 0 0; }
.tour-section .commentary-gallery { padding: 0; }
.tour-section .gallery-heading { margin-bottom: 16px; }
.tour-section .gallery-heading h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.tour-section .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 960px; margin: 0 auto; }
.tour-section .gallery-selfie { grid-column: auto; }
.tour-section .gallery-grid img, .tour-section .gallery-grid .gallery-selfie img { width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 14px; background: #191d20; }
.tour-section .gallery-grid figcaption { font-size: .875rem; line-height: 1.5; margin-top: 8px; }
@media (max-width: 760px) {
  .tour-section { padding-top: 20px; }
  .tour-section .section-top { margin-bottom: 18px; }
  .tour-section .section-top > p { margin-top: 10px; }
  .tour-section .gallery-heading { margin-bottom: 12px; }
  .tour-section .gallery-heading h2 { font-size: 1.25rem; }
  .tour-section .voice-section { margin-top: 28px; }
  .tour-section .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
.voice-copy > p { color: #d7dde4; }
.voice-copy .secondary { color: #b4bbc3; }
.gallery-grid img, .gallery-grid .gallery-selfie img { background: #191d20; border-radius: 22px; }
.about-details, .guide-details { background: #191d20; border-color: #30363b; border-radius: 24px; }
.about-details > summary, .guide-details > summary { color: #dce9ff; }
.steps article > span { background: #252d36; color: #b9d4ff; }
.landscape-callout { background: #172a36; border-color: #34546a; border-left-color: #8fbcff; border-radius: 24px; }
.landscape-callout p { color: #c4d2df; }
.orientation-guides figure, .camera-guide, .transfer-card { background: #191d20; border-color: #30363b; border-radius: 24px; box-shadow: none; }
.orientation-good strong { color: #88dfbd; }
.orientation-guides img.filming-tv-angle { width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: 3px solid #88dfbd; border-radius: 16px; background: #0b0d0e; }
.orientation-avoid strong { color: #ff9ca5; }
.transfer-email { color: #a9ccff; }

.enquiry-section, .page-enquire .enquiry-section { background: #0b0d0e; border-color: #30363b; }
.enquiry-copy > p:not(.eyebrow) { color: #bcc5cf; }
.contact-note a { color: #e1ebfb; }
.enquiry-panel { background: #191d20; border-color: #30363b; border-radius: 28px; box-shadow: none; }
select, textarea { background: #242a2f; border-color: #444e58; color: #f7f7f8; border-radius: 16px; }
textarea::placeholder { color: #abb4bd; }
.message-preview { border-color: #657890; }
.message-preview p { color: #dce3eb; }
.panel-note { color: #b4bbc3; }
.copy-status { color: #b9d4ff; }

.statement-strip { background: #191d20; color: #e4e9f0; }
.statement-strip .lime-text { color: #a9ccff; }
footer { background: #0b0d0e; border-color: #30363b; color: #aeb7c0; }
.footer-name { color: #f7f7f8; }

@media (max-width: 760px) {
  .header { border-bottom-color: #252a2e; }
  .page-nav a, .page-nav > a:not(.nav-cta) { border-radius: 14px; }
  .style-card { border-radius: 26px; }
  .header.menu-ready { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; min-height: 68px; }
  .header.menu-ready .brand { min-width: 0; flex-shrink: 1; }
  .header.menu-ready .brand { font-size: .8125rem; gap: 8px; }
  .header.menu-ready .brand small { font-size: .625rem; letter-spacing: .04em; }
  .header.menu-ready .brand-mark { width: 36px; height: 36px; padding: 5px; border-radius: 12px; }
  .header.menu-ready .brand-mark svg { width: 24px; height: 24px; }
  .header-actions { flex-shrink: 0; gap: 6px; margin-left: auto; }
  .header-contact { padding: 10px 12px; font-size: .8125rem; min-height: 44px; }
  .header.menu-ready .menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; color: #f7f7f8; background: #191d20; border: 1px solid #444e58; border-radius: 12px; }
  .menu-toggle svg { width: 24px; height: 24px; }
  .menu-toggle[aria-expanded="true"] { background: #252d34; border-color: #8fbcff; }
  .header.menu-ready .page-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; margin: 0; padding: 12px 20px 20px; background: #111518; border-bottom: 1px solid #30363b; box-shadow: 0 16px 24px #0006; max-height: calc(100dvh - 88px); overflow-y: auto; }
  .header.menu-ready .page-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .header.menu-ready .page-nav a { justify-content: flex-start; text-align: left; padding: 12px 16px; min-height: 48px; font-size: 1rem; }
}
@media (max-width: 360px) {
  .header.menu-ready { padding-left: 10px; padding-right: 10px; }
  .header.menu-ready .brand { font-size: .75rem; gap: 6px; }
  .header-contact { padding-left: 8px; padding-right: 8px; font-size: .75rem; }
}