/* ==========================================================================
   UNICUS MARKETING — GLOBAL STYLESHEET
   File: /assets/css/global.css
   Version: 2.0
   ==========================================================================

   AI / DEVELOPER REFERENCE — APPROVED PERMANENT STANDARD

   PURPOSE
   This file contains only the sitewide CSS foundation and shared components
   used across the Unicus Marketing website. A change made here must be
   intended to affect multiple webpages.

   APPROVED CSS ARCHITECTURE
   1. Load this file first on every webpage.
   2. Load one page-specific stylesheet after this file.
   3. Store every page stylesheet directly in /assets/css/.
   4. Do not place page-specific sections, layouts, imagery, or overrides here.
   5. Do not place CSS inside PHP files.
   6. Do not use inline CSS except for a legitimate dynamic value.
   7. Scope every page-specific selector beneath the page body class.
   8. sections.css, style_dev.css, and template.css are retired after migration.

   APPROVED FONT SYSTEM
   Display / headlines: "Bebas Neue", sans-serif
   Body / interface:    "Inter", Arial, sans-serif
   Bebas Neue and Inter must be loaded by the document before this stylesheet
   is rendered. Do not introduce Oswald or another display font.

   APPROVED BRAND FOUNDATION
   Primary copper: #e48240
   Primary background: near-black
   Primary text: white
   Visual direction: dark, cinematic, precise, restrained

   NAMING AND MAINTENANCE RULES
   - Use the variables defined in :root instead of repeating brand values.
   - Preserve existing shared header and footer class names.
   - Use component-specific class names; do not introduce vague global classes.
   - Do not add an unscoped global .hero, .copy, .lead, .gold, or .wrap rule.
   - Do not modify approved design or content during structural migration.
   - Keep sections clearly labeled and keep responsive rules with global scope.

   CONTENTS
   01. Design Tokens
   02. Reset and Document Foundation
   03. Global Typography and Media
   04. Accessibility
   05. Layout Utilities
   06. Shared Hero Typography
   07. Shared Editorial Utilities
   08. Shared Buttons
   09. Shared Form Controls
   10. Header and Navigation
   11. Mega Menu
   12. Mobile Navigation
   13. Footer
   14. Shared Motion
   15. Responsive — Tablet
   16. Responsive — Mobile
   17. Reduced Motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Primary Copper */
  --primary: #d7793b;
  --primary-light: #eda06d;
  --primary-dark: #bd6228;
  --primary-rgb: 215, 121, 59;

  /* Light neutrals */
  --white: #ffffff;
  --soft-white: #f3f0e9;
  --light-gray: #cacaca;
  --medium-gray: #969089;
  --muted-gray: #77736e;

  /* Dark neutrals */
  --dark-gray: #242424;
  --charcoal: #111111;
  --panel: #151515;
  --black-light: #0a0a0a;
  --black: #060606;

  /* RGB values */
  --white-rgb: 255, 255, 255;
  --black-rgb: 6, 6, 6;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-primary: rgba(var(--primary-rgb), 0.44);

  /* Typography */
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", Arial, sans-serif;

  --font-size-body: 16px;
  --line-height-body: 1.65;
  --hero-heading-size: clamp(62px, 7.2vw, 116px);
  --hero-heading-line: 0.87;
  --hero-heading-spacing: -0.04em;
  --hero-copy-size: clamp(15px, 1.1vw, 19px);
  --hero-copy-line: 1.65;
  --hero-eyebrow-size: 15px;
  --hero-eyebrow-spacing: 0.2em;
  --section-heading-size: clamp(3.375rem, 5.6vw, 7rem);
  --section-heading-line: 0.88;
  --section-copy-size: 1.125rem;
  --section-copy-line: 1.72;

  /* Layout */
  --site-max: 1400px;
  --site-wide-max: 1540px;
  --site-gutter: 40px;
  --site-gutter-tablet: 28px;
  --site-gutter-mobile: 20px;
  --header-height: 84px;
  --header-height-mobile: 72px;

  /* Backward-compatible layout aliases */
  --page-max: var(--site-max);
  --wide-max: var(--site-wide-max);
  --full-width: calc(100vw - (var(--site-gutter) * 2));
  --full-width-tablet: calc(100vw - (var(--site-gutter-tablet) * 2));
  --full-width-mobile: calc(100vw - (var(--site-gutter-mobile) * 2));

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 180ms ease;
  --transition-standard: 280ms ease;
  --transition-reveal: 700ms var(--ease-standard);

  /* Layering */
  --z-header: 1000;
  --z-menu: 1010;
  --z-modal: 2000;

  /*
   * TEMPORARY MIGRATION ALIASES
   * Remove each alias only after every page using it has been converted.
   */
  --color-copper: var(--primary);
  --color-copper-light: var(--primary-light);
  --color-copper-dark: var(--primary-dark);
  --color-copper-rgb: var(--primary-rgb);
  --color-bg: var(--black-light);
  --color-bg-dark: #080808;
  --color-bg-deep: var(--black);
  --color-bg-card: var(--charcoal);
  --color-bg-elevated: var(--panel);
  --color-text: var(--white);
  --color-text-strong: rgba(var(--white-rgb), 0.92);
  --color-text-body: rgba(var(--white-rgb), 0.72);
  --color-text-muted: rgba(var(--white-rgb), 0.58);
  --color-text-dim: rgba(var(--white-rgb), 0.42);
  --gold: var(--primary);
  --gold-light: var(--primary-light);
  --bg: var(--black-light);
  --bg-dark: #080808;
  --bg-darker: var(--black);
  --bg-mid: #0d0d0d;
  --bg-card: var(--charcoal);
  --text: var(--white);
  --text-soft: rgba(var(--white-rgb), 0.72);
  --text-muted: rgba(var(--white-rgb), 0.58);
  --text-dim: rgba(var(--white-rgb), 0.42);
  --text-faint: rgba(var(--white-rgb), 0.30);
  --display-font: var(--font-display);
}


/* ==========================================================================
   02. RESET AND DOCUMENT FOUNDATION
   ========================================================================== */

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--black-light);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   03. GLOBAL TYPOGRAPHY AND MEDIA
   ========================================================================== */

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

h4,
h5,
h6 {
  font-family: var(--font-body);
}

p {
  color: rgba(var(--white-rgb), 0.72);
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: 0.875em;
}

::selection {
  background: var(--primary);
  color: #080808;
}


/* ==========================================================================
   04. ACCESSIBILITY
   ========================================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-modal) + 1);
  padding: 12px 18px;
  transform: translateY(-160%);
  background: var(--primary);
  color: #080808;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==========================================================================
   05. LAYOUT UTILITIES
   ========================================================================== */

.section-inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.section-inner-wide {
  width: 100%;
  max-width: var(--site-wide-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.cinema-inner {
  position: relative;
  z-index: 3;
  width: min(var(--site-wide-max), var(--full-width));
  margin-inline: auto;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ==========================================================================
   06. SHARED PAGE HERO
   Home page hero is the locked visual standard.
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

.page-hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to right,
      rgba(8, 8, 8, .75),
      rgba(8, 8, 8, .55),
      rgba(8, 8, 8, .30));
  content: "";
}

.page-hero::after {
  position: absolute;
  right: -2%;
  bottom: -10%;
  z-index: -1;
  color: rgba(var(--white-rgb), .022);
  content: var(--hero-background-word, "");
  font: 700 clamp(210px, 26vw, 410px) / .8 var(--font-display);
  letter-spacing: -.05em;
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 10;
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 128px 40px 80px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--hero-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--hero-eyebrow-spacing);
  line-height: 1;
  text-transform: uppercase;
}

.hero-eyebrow::before {
  width: 48px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--primary);
  content: "";
}

.hero-title {
  max-width: 980px;
  margin: 0 0 32px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(42px, 5.2vw, 120px);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: .99;
  text-transform: uppercase;
}

.hero-title span,
.hero-title .primary {
  display: inline;
  color: var(--primary);
}

.hero-supporting-copy {
  max-width: 700px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 300;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .page-hero-inner {
    padding: 110px 24px 64px;
  }

  .page-hero::after {
    right: -4%;
    bottom: -2%;
    font-size: clamp(130px, 42vw, 230px);
  }

  .hero-title {
    font-size: clamp(42px, 13vw, 76px);
  }
}


/* ==========================================================================
   07. SHARED EDITORIAL UTILITIES
   ========================================================================== */

.cinema-section {
  position: relative;
  overflow: hidden;
  background: #070707;
  color: var(--white);
}

.cinema-section::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 38%,
      rgba(var(--primary-rgb), 0.16),
      transparent 34%),
    radial-gradient(circle at 82% 64%,
      rgba(255, 255, 255, 0.04),
      transparent 28%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.025),
      transparent 22%,
      transparent 74%,
      rgba(255, 255, 255, 0.018));
  content: "";
  pointer-events: none;
}

.cinema-section::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
  background-size: 180px 100%, 100% 140px;
  content: "";
  opacity: 0.22;
  pointer-events: none;
}

.cinema-eyebrow,
.section-eyebrow,
.engine-v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cinema-eyebrow::before,
.engine-v2-kicker::before {
  width: 54px;
  height: 1px;
  background: rgba(var(--primary-rgb), 0.75);
  content: "";
  flex: 0 0 auto;
}

.section-eyebrow.center {
  justify-content: center;
}

.eyebrow-line-short {
  width: 32px;
  height: 1px;
  background: var(--primary);
}

.section-headline,
.cinema-headline {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--section-heading-size);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: var(--section-heading-line);
}

.section-headline .gold,
.cinema-headline .gold {
  color: var(--primary);
}

.section-headline .dim,
.section-headline .faint,
.cinema-headline .muted {
  color: rgba(255, 255, 255, 0.30);
}

.cinema-copy {
  max-width: 920px;
  margin-top: 24px;
  color: rgba(var(--white-rgb), 0.72);
  font-size: 1.1875rem;
  line-height: 1.78;
}

.cinema-rule {
  height: 1px;
  margin-top: 34px;
  background: linear-gradient(to right,
      rgba(var(--primary-rgb), 0),
      rgba(var(--primary-rgb), 0.46),
      rgba(var(--primary-rgb), 0));
}

.text-link-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: gap var(--transition-standard), color var(--transition-standard);
}

.text-link-gold:hover {
  gap: 20px;
  color: var(--primary-light);
}


/* ==========================================================================
   08. SHARED BUTTONS
   ========================================================================== */

.btn-primary,
.btn-outline,
.btn-primary-lg,
.btn-outline-lg,
.btn-text,
.header-cta,
.mobile-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard),
    transform var(--transition-standard);
}

.btn-primary,
.btn-primary-lg,
.header-cta,
.mobile-header-cta {
  border-color: var(--primary);
  background: var(--primary);
  color: #080808;
}

.btn-primary {
  padding: 16px 28px;
}

.btn-primary-lg {
  padding: 20px 40px;
}

.header-cta,
.mobile-header-cta {
  padding: 13px 22px;
  font-size: 0.75rem;
}

.btn-primary:hover,
.btn-primary-lg:hover,
.header-cta:hover,
.mobile-header-cta:hover {
  border-color: var(--primary-light);
  background: var(--primary-light);
  color: #080808;
  transform: translateY(-1px);
}

.btn-outline,
.btn-outline-lg {
  border-color: rgba(255, 255, 255, 0.24);
  background: transparent;
  color: var(--white);
}

.btn-outline {
  padding: 16px 28px;
}

.btn-outline-lg {
  padding: 20px 40px;
}

.btn-outline:hover,
.btn-outline-lg:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-text {
  padding: 10px 0;
  border-color: transparent;
  background: transparent;
  color: var(--primary);
}

.btn-text::after {
  content: "\2192";
  transition: transform var(--transition-standard);
}

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

.btn-text:hover::after {
  transform: translateX(6px);
}

.btn-primary:disabled,
.btn-outline:disabled,
.btn-primary-lg:disabled,
.btn-outline-lg:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}


/* ==========================================================================
   09. SHARED FORM CONTROLS
   ========================================================================== */

label {
  display: inline-block;
  color: rgba(var(--white-rgb), 0.92);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

input,
select {
  min-height: 52px;
  padding: 0 16px;
}

select option,
select optgroup {
  color: #000000;
  background-color: #ffffff;
}

textarea {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: rgba(var(--white-rgb), 0.42);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
  outline: none;
}


/* ==========================================================================
   10. HEADER AND NAVIGATION
   ========================================================================== */

#nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 8, 8, 0.54);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease;
}

#nav.scrolled,
#nav.menu-open {
  border-bottom-color: rgba(255, 255, 255, 0.10);
  background: rgba(8, 8, 8, 0.88);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding-inline: 34px;
  gap: 28px;
}

.nav-logo,
.nav-cta {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 180px;
}

.nav-cta {
  justify-content: flex-end;
}

.nav-logo-img {
  width: auto;
  max-width: 260px;
  height: 44px;
  object-fit: contain;
}

.nav-links {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  margin: 0;
  padding: 0;
  gap: 36px;
  list-style: none;
  transform: translateX(-50%);
}

.nav-item {
  display: flex;
  align-items: center;
  height: var(--header-height);
}

.nav-link,
.nav-links>li>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition-standard);
}

.nav-link:hover,
.nav-links>li>a:hover,
.nav-item:hover>.nav-link {
  color: var(--white);
}

.nav-link.active:hover,
.nav-links>li>a.active:hover,
.nav-item:hover>.nav-link.active,
.nav-link[aria-current="page"]:hover,
.nav-links>li>a[aria-current="page"]:hover {
  color: var(--primary);
}

.nav-link.active,
.nav-links>li>a.active,
.nav-link[aria-current="page"],
.nav-links>li>a[aria-current="page"] {
  color: var(--primary);
}

.nav-caret {
  opacity: 0.72;
  transition: opacity var(--transition-standard), transform var(--transition-standard);
  color: var(--primary);
}

.nav-link:hover .nav-caret,
.nav-item:hover .nav-caret {
  opacity: 1;
}

.nav-item:hover .nav-caret {
  transform: rotate(180deg);
}

.nav-hamburger {
  position: relative;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}


/* ==========================================================================
   11. MEGA MENU
   ========================================================================== */

.has-mega {
  position: static;
}

.mega-menu {
  position: absolute;
  top: var(--header-height);
  left: 0;
  z-index: var(--z-menu);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    opacity 250ms ease,
    visibility 250ms ease,
    transform 250ms ease;
}

.mega-menu::before {
  content: "";
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(2px) saturate(0.72);
  backdrop-filter: blur(2px) saturate(0.72);
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.mega-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  width: min(1180px, calc(100vw - 80px));
  margin-inline: auto;
  padding: 34px 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(var(--primary-rgb), 0.58);
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--primary-rgb), 0.055), transparent 34%),
    rgba(7, 7, 7, 0.985);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.86),
    0 8px 28px rgba(0, 0, 0, 0.58),
    inset 0 1px rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  gap: 38px;
}

.mega-inner-small {
  grid-template-columns: minmax(220px, 0.72fr) minmax(430px, 1.28fr);
  width: min(930px, calc(100vw - 80px));
  padding: 36px 40px;
  gap: 40px;
}

.mega-column {
  padding-right: 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mega-feature {
  min-width: 0;
}

.mega-growth-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1px 4px 2px 0;
}

.mega-feature h3 {
  max-width: 420px;
  margin: 0 0 19px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.2vw, 2.125rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0.96;
}

.mega-feature-copy {
  max-width: 510px;
  margin: 0;
  color: rgba(var(--white-rgb), 0.66);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.65;
}

.mega-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px 22px;
  margin-top: 26px;
}

.mega-feature-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--primary) !important;
  font-family: var(--font-body);
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-decoration: none;
  text-transform: uppercase !important;
  white-space: nowrap;
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard),
    transform var(--transition-standard);
}

.mega-feature-link-primary {
  padding: 13px 16px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #080808 !important;
}

.mega-feature-link-primary:hover,
.mega-feature-link-primary:focus-visible {
  border-color: var(--primary-light);
  background: var(--primary-light);
  color: #080808 !important;
  transform: translateY(-1px);
}

.mega-feature-link-secondary {
  padding: 12px 0;
  color: rgba(var(--white-rgb), 0.68) !important;
}

.mega-feature-link-secondary:hover,
.mega-feature-link-secondary:focus-visible {
  color: var(--primary-light) !important;
  transform: translateX(3px);
}

.mega-column h4 {
  margin-bottom: 18px;
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mega-column a {
  display: block;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
  transition: color 220ms ease, transform 220ms ease;
}

.mega-column a:hover,
.mega-column a:focus-visible,
.mega-column a[aria-current="page"] {
  color: var(--primary);
  transform: translateX(4px);
}


/* ==========================================================================
   12. MOBILE NAVIGATION
   ========================================================================== */

#mobile-menu {
  display: none;
  flex-direction: column;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 8, 8, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  gap: 20px;
}

#mobile-menu.open {
  display: flex;
}

#mobile-menu a {
  color: rgba(var(--white-rgb), 0.58);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

#mobile-menu .mobile-submenu {
  display: flex;
  flex-direction: column;
  margin: -6px 0 2px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid rgba(var(--primary-rgb), 0.45);
  gap: 14px;
}

#mobile-menu .mobile-submenu a {
  display: block;
  width: fit-content;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  line-height: 1.4;
}

#mobile-menu a:hover,
#mobile-menu a:focus-visible,
#mobile-menu a[aria-current="page"] {
  color: var(--white);
}

#mobile-menu .mobile-header-cta {
  justify-content: center;
  margin-top: 8px;
  color: #080808;
  text-align: center;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

footer,
.site-footer {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: #080808;
}

.footer-inner {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 56px;
  gap: 48px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}

.footer-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--primary);
}

.footer-logo-icon-dot {
  width: 10px;
  height: 10px;
  background: var(--primary);
}

.footer-logo-text {
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-logo-text span {
  color: var(--primary);
}

.footer-desc {
  max-width: 380px;
  color: rgba(var(--white-rgb), 0.58);
  font-size: 0.875rem;
  line-height: 1.7;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

.footer-link {
  display: block;
  margin-bottom: 12px;
  color: rgba(var(--white-rgb), 0.58);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 16px;
}

.footer-copy,
.footer-legal a {
  color: rgba(var(--white-rgb), 0.42);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-legal a {
  transition: color var(--transition-fast);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: rgba(var(--white-rgb), 0.58);
}


/* ==========================================================================
   14. SHARED MOTION
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 3300ms var(--ease-standard),
    transform 1700ms var(--ease-standard);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 600ms;
}

.reveal-delay-2 {
  transition-delay: 600ms;
}

.reveal-delay-3 {
  transition-delay: 600ms;
}

.reveal-delay-4 {
  transition-delay: 600ms;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

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

  to {
    transform: translateX(calc(-50% - (var(--logo-gap) / 2)));
  }
}


/* ==========================================================================
   15. RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 1180px) {
  .nav-links {
    gap: 24px;
  }

  .nav-logo,
  .nav-cta {
    min-width: 150px;
  }

  .nav-logo-img {
    max-width: 220px;
    height: 40px;
  }
}

@media (max-width: 1024px) {

  .section-inner,
  .section-inner-wide,
  .footer-inner {
    padding-inline: var(--site-gutter-tablet);
  }

  .cinema-inner {
    width: var(--full-width-tablet);
  }

  .nav-inner {
    padding-inline: var(--site-gutter-tablet);
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
}


/* ==========================================================================
   16. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --section-heading-size: clamp(3rem, 15vw, 5.25rem);
  }

  .section-inner,
  .section-inner-wide,
  .footer-inner {
    padding-inline: var(--site-gutter-mobile);
  }

  .cinema-inner {
    width: var(--full-width-mobile);
  }

  .nav-inner {
    height: var(--header-height-mobile);
    padding-inline: var(--site-gutter-mobile);
  }

  .nav-logo-img {
    max-width: 190px;
    height: 36px;
  }

  #mobile-menu {
    max-height: calc(100dvh - var(--header-height-mobile));
    overflow-y: auto;
    padding: 22px var(--site-gutter-mobile) 28px;
  }

  .footer-top,
  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-top {
    margin-bottom: 42px;
    gap: 36px;
  }

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

@media (max-width: 480px) {

  .btn-primary,
  .btn-outline,
  .btn-primary-lg,
  .btn-outline-lg {
    width: 100%;
  }

  .cinema-eyebrow,
  .section-eyebrow,
  .engine-v2-kicker {
    letter-spacing: 0.18em;
  }

  .cinema-copy {
    font-size: 1rem;
  }

  .footer-legal {
    flex-direction: column;
    gap: 10px;
  }
}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

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

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   18. SITEWIDE SCHEDULING REQUEST MODAL
   ========================================================================== */

.scheduler-modal[hidden] {
  display: none;
}

.scheduler-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 32px;
}

.scheduler-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--transition-standard);
}

.scheduler-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  padding: 25px clamp(30px, 4vw, 58px) 25px clamp(30px, 4vw, 58px);
  border: 1px solid rgba(var(--primary-rgb), 0.38);
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--primary-rgb), 0.14), transparent 32%),
    #111111;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity var(--transition-standard),
    transform var(--transition-standard);
}

.scheduler-modal.open .scheduler-modal-backdrop,
.scheduler-modal.open .scheduler-dialog {
  opacity: 1;
}

.scheduler-modal.open .scheduler-dialog {
  transform: translateY(0) scale(1);
}

.scheduler-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--white);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.scheduler-close:hover,
.scheduler-close:focus-visible {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary-light);
}

.scheduler-modal-header {}

.scheduler-eyebrow {
  margin-bottom: 14px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.scheduler-modal-header h2 {
  margin: 0 0 18px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.9;
  text-transform: uppercase;
}

.scheduler-modal-header h2 span {
  color: var(--primary);
}

.scheduler-modal-header>p:last-child {
  max-width: 680px;
  color: rgba(var(--white-rgb), 0.68);
  font-size: 1rem;
  line-height: 1.7;
}

.scheduler-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.scheduler-field {
  min-width: 0;
}

.scheduler-field--full {
  grid-column: 1 / -1;
}

.scheduler-field label,
.scheduler-choice-group legend {
  margin-bottom: 9px;
}

.scheduler-field label span,
.scheduler-choice-group legend span,
.scheduler-form-actions p span {
  color: var(--primary);
}

.scheduler-field select {
  color-scheme: dark;
}

.scheduler-field textarea {
  min-height: 80px;
}

.scheduler-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.scheduler-choice-group legend {
  color: rgba(var(--white-rgb), 0.92);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.4;
  text-transform: uppercase;
}

.scheduler-choice-help {
  margin: -4px 0 10px;
  color: rgba(var(--white-rgb), 0.46);
  font-size: 0.75rem;
  line-height: 1.4;
}

.scheduler-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scheduler-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.scheduler-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.scheduler-choice span {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(var(--white-rgb), 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.scheduler-choice:hover span {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.scheduler-choice input:checked+span {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.16);
  color: var(--primary-light);
}

.scheduler-choice input:focus-visible+span {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.scheduler-choice input:disabled+span {
  cursor: not-allowed;
  opacity: 0.38;
}

.scheduler-field-error {
  min-height: 18px;
  margin-top: 7px;
  color: #ff9b8d;
  font-size: 0.75rem;
  line-height: 1.45;
}

.scheduler-form-notice {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 107, 87, 0.45);
  background: rgba(255, 107, 87, 0.08);
  color: #ffd0ca;
  font-size: 0.875rem;
  line-height: 1.55;
}

.scheduler-form-notice[hidden] {
  display: none;
}

.scheduler-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  gap: 20px;
}

.scheduler-form-actions p {
  color: rgba(var(--white-rgb), 0.42);
  font-size: 0.75rem;
  line-height: 1.5;
}

.scheduler-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.scheduler-success {
  padding: clamp(44px, 7vw, 88px) 0;
  text-align: center;
}

.scheduler-success[hidden] {
  display: none;
}

.scheduler-success-mark {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 24px;
  place-items: center;
  border: 1px solid var(--primary);
  color: var(--primary-light);
  font-size: 1.75rem;
}

.scheduler-success h3 {
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.scheduler-success p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: rgba(var(--white-rgb), 0.70);
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .scheduler-modal {
    display: block;
    padding: 0;
  }

  .scheduler-dialog {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: 86px var(--site-gutter-mobile) 42px;
    border: 0;
    transform: translateY(28px);
  }

  .scheduler-close {
    position: fixed;
    top: 16px;
    right: 16px;
  }

  .scheduler-modal-header {
    padding-right: 0;
  }

  .scheduler-modal-header h2 {
    font-size: clamp(3rem, 15vw, 4.75rem);
  }

  .scheduler-fields {
    grid-template-columns: 1fr;
  }

  .scheduler-field--full {
    grid-column: auto;
  }

  .scheduler-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .scheduler-submit {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .scheduler-choice-grid {
    grid-template-columns: 1fr;
  }
}


/* Scheduler option groups */
.scheduler-option-group legend {
  margin-bottom: 10px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.035em;
}

.scheduler-option-group+.scheduler-option-group {
  margin-top: 2px;
}

.scheduler-time-grid {
  margin-top: 10px;
}

.scheduler-availability-note {
  margin-left: 5px;
  padding: 4px 8px;
  border-left: 3px solid var(--primary);
  background: rgba(var(--primary-rgb), 0.07);
  color: rgba(var(--white-rgb), 0.68);
  font-size: 0.6rem;
  display: inline-block;
}

.grecaptcha-badge {
  visibility: hidden;
}

/* Header Book a Call — outlined CTA */
.nav-cta .header-cta {
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
}

.nav-cta .header-cta:hover,
.nav-cta .header-cta:focus-visible {
  border-color: var(--primary-light);
  background: var(--primary);
  color: #080808;
  transform: translateY(-1px);
}

/* =========================================================
   SCHEDULER — MOBILE OPTION UI
   Desktop scheduler remains unchanged.
========================================================= */

.scheduler-mobile-day,
.scheduler-mobile-option-head,
.scheduler-mobile-time-heading,
.scheduler-mobile-time-help {
  display: none;
}

@media (max-width: 760px) {

  /* OPTION CARD */
  .scheduler-option-group {
    padding: 22px 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background:
      radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), 0.09), transparent 42%),
      rgba(255, 255, 255, 0.018);
  }

  .scheduler-option-group + .scheduler-option-group {
    margin-top: 4px;
  }

  .scheduler-option-group legend {
    margin: 0;
    padding: 0 8px 0 0;
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
  }

  /* SMALL SUPPORT LINE */
  .scheduler-mobile-option-head {
    display: block;
    margin: 5px 0 20px;
  }

  .scheduler-mobile-option-head span {
    color: rgba(var(--white-rgb), 0.54);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  /* HIDE DESKTOP DAY BUTTONS */
  .scheduler-option-group .scheduler-day-grid {
    display: none;
  }

  /* DAY DROPDOWN */
  .scheduler-mobile-day {
    display: block;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .scheduler-mobile-day label {
    display: block;
    margin-bottom: 9px;
    color: rgba(var(--white-rgb), 0.92);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  .scheduler-day-select {
    width: 100%;
    min-height: 58px;
    padding: 0 46px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.025);
    color: var(--white);
    font-size: 1rem;
  }

  .scheduler-day-select:hover {
    border-color: rgba(255, 255, 255, 0.28);
  }

  .scheduler-day-select:focus {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.045);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
  }

  /* TIME HEADING */
  .scheduler-mobile-time-heading {
    display: flex;
    align-items: baseline;
    margin: 20px 0 12px;
    gap: 10px;
  }

  .scheduler-mobile-time-heading strong {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .scheduler-mobile-time-heading span {
    color: rgba(var(--white-rgb), 0.46);
    font-size: 0.72rem;
    line-height: 1.3;
  }

  /* MULTIPLE TIME SELECTION */
  .scheduler-option-group .scheduler-time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
    gap: 8px;
  }

  .scheduler-option-group .scheduler-time-choice span {
    position: relative;
    min-height: 54px;
    padding: 10px 6px;
    border-color: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(var(--white-rgb), 0.82);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .scheduler-option-group .scheduler-time-choice:hover span {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--white);
  }

  .scheduler-option-group .scheduler-time-choice input:checked + span {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.21), rgba(var(--primary-rgb), 0.08));
    color: var(--primary-light);
    box-shadow:
      inset 0 0 0 1px rgba(var(--primary-rgb), 0.16),
      0 5px 20px rgba(0, 0, 0, 0.16);
  }

  .scheduler-option-group .scheduler-time-choice input:checked + span::after {
    position: absolute;
    top: -7px;
    right: -6px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px solid var(--primary);
    border-radius: 50%;
    background: var(--soft-white);
    color: #111111;
    content: "✓";
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1;
  }

  /* TIME HELP */
  .scheduler-mobile-time-help {
    display: block;
    margin: 11px 0 0;
    color: rgba(var(--white-rgb), 0.42);
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  .scheduler-option-group {
    padding: 20px 14px 18px;
  }

  .scheduler-option-group .scheduler-time-grid {
    gap: 6px;
  }

  .scheduler-option-group .scheduler-time-choice span {
    min-height: 50px;
    padding-inline: 4px;
    font-size: 0.62rem;
  }
}

/* Small text-only scheduler clear controls */
.scheduler-option-group [data-clear-option] {
  display: inline-block;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(var(--white-rgb), 0.55);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.scheduler-option-group [data-clear-option]:hover,
.scheduler-option-group [data-clear-option]:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary);
}