/* =====================================================================
   DomainBoar Landing — styles.css
   Hand-written CSS3. No frameworks. No build step.
   ===================================================================== */

/* ----- Design tokens (CSS custom properties) ------------------------ */
:root {
  /* Brand palette (exact HEX from visual spec) */
  --color-boar-green: #2d5a3d;        /* Primary deep green (Boar body, "Boar" text) */
  --color-forest-green: #1e3d2a;      /* Secondary forest green (hover states) */
  --color-sage: #8fb996;              /* Accent sage ("Domain" text) */
  --color-foliage: #4a7c5c;           /* Medium foliage green */
  --color-warm-brown: #8B5E3C;        /* Warm brown (earth) */
  --color-terracotta: #c4704b;        /* Terracotta (banner subheading) */
  --color-cream: #f4f1eb;             /* Background cream */
  --color-surface: #ffffff;           /* Card / surface */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #7a7a7a;
  --color-dark-forest: #1a2e20;       /* Footer / contrast sections */
  --color-pastel-pink: #f0b8b8;       /* Snout, rainbow accent */
  --color-pastel-yellow: #f5e6a3;     /* Sunlight, rainbow accent */
  --color-pastel-sky: #a8d4e6;        /* Sky, rainbow accent */
  --color-pastel-lavender: #c8b8e8;   /* Rainbow accent */

  /* Pastel rainbow hairline */
  --rainbow-gradient: linear-gradient(90deg, #f0b8b8, #f5e6a3, #a8d4e6, #c8b8e8);

  /* Effects */
  --shadow-card: 0 2px 12px rgba(45, 90, 61, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(45, 90, 61, 0.16);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.18);
  --divider: rgba(45, 90, 61, 0.08);

  /* Radii */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-lg: 16px;
  --radius-modal: 24px;

  /* Layout */
  --nav-height: 120px;
  --section-pad: 96px;
  --container-max: 1200px;

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 0.3s ease;
}

/* ----- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ----- Accessibility helpers --------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 300;
  background: var(--color-boar-green);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--color-boar-green);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ----- Layout primitives ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: var(--section-pad) 0; }

.section-heading {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-boar-green);
  text-align: center;
  margin: 0 0 16px;
}
.section-heading-light { color: #fff; }

/* Secondary section heading — smaller than .section-heading, used for
   sub-sections like "Selected Domains" below the primary "Find Your Brand". */
.section-subheading {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  color: var(--color-boar-green);
  text-align: center;
  margin: 0 0 32px;
}
.section-subtext {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin: 0 auto 56px;
  max-width: 560px;
}
.section-subtext-light { color: rgba(255, 255, 255, 0.7); }

/* Target sections get offset for sticky nav */
#why, #domains, #contact { scroll-margin-top: 80px; }

/* ----- Rainbow hairline -------------------------------------------- */
.rainbow-line {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--rainbow-gradient);
}
.rainbow-line-modal { width: 60px; margin: 0 auto 20px; }

/* ----- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base),
              transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
}
.btn-primary {
  background: var(--color-boar-green);
  color: #fff;
}
.btn-primary:hover { background: var(--color-forest-green); transform: translateY(-2px); }

.btn-secondary {
  background: transparent;
  color: var(--color-boar-green);
  border-color: var(--color-boar-green);
}
.btn-secondary:hover { background: rgba(45, 90, 61, 0.06); transform: translateY(-2px); }

/* ===================================================================
   SECTION 1: NAVIGATION
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 235, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav {
  /* Full-width header on desktop: no max-width cap, so on wide screens the
     logo reaches the left edge and the About/X buttons reach the right edge.
     padding keeps a 24px inset on every viewport (mobile included). */
  height: var(--nav-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo (text + svg) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* Logo lockup: compact icon mark + larger text wordmark, vertically centered.
   Icon kept compact so it reads as a crisp brand mark; text sized larger for
   visibility but shorter than the icon so the mark stays the visual anchor. */
.logo-icon {
  height: 88px;
  width: auto;
  display: block;
}
.logo-text {
  height: 57px;
  width: auto;
  display: block;
}

/* Nav actions (desktop) */
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-link-about {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 4px;
  transition: color var(--transition-base);
}
.nav-link-about:hover { color: var(--color-boar-green); }

.btn-x-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-boar-green);
  color: #fff;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
}
.btn-x-nav:hover { background: var(--color-forest-green); transform: translateY(-2px); }
.icon-x { width: 18px; height: 18px; }

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger-line {
  display: block;
  width: 24px; height: 3px;
  background: var(--color-boar-green);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile dropdown panel */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  background: var(--color-cream);
  border-top: 1px solid var(--divider);
  transition: max-height 0.3s ease;
}
.mobile-menu.open { max-height: 200px; }
.mobile-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 24px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: inherit;      /* neutralize UA button override so <button> matches <a> */
  line-height: inherit;    /* identical line-box -> identical row height */
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
}

/* ===================================================================
   SECTION 2: HERO
   =================================================================== */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  overflow: hidden;
  /* Cream fallback matches the page/nav/section backgrounds so the letterbox
     space around the 21:9 video (and the preload="none" loading state) reads
     as a natural seam, not a colored bar. */
  background: var(--color-cream);
}

/* Background video layer — fills the hero behind the content. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  z-index: 0;
  pointer-events: none;
}

/* Cream tint over the video. Softens the motion so dark-green hero text
   stays readable. Opacity is the tuning knob: 0.65 = more video presence,
   0.85 = calmer text. Default 0.78 keeps the effective bg near cream. */
.hero-video-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(244, 241, 235, 0.78);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Decorative leaves (z-index 1: read above the video tint) */
.hero-leaf {
  position: absolute;
  width: 120px; height: 120px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}
.hero-leaf-1 { top: 14%; left: 6%; transform: rotate(-25deg); }
.hero-leaf-2 { top: 22%; right: 8%; transform: rotate(35deg); opacity: 0.06; }
.hero-leaf-3 { bottom: 16%; left: 10%; transform: rotate(140deg); opacity: 0.07; }
.hero-leaf-4 { bottom: 22%; right: 7%; transform: rotate(-160deg); opacity: 0.06; }

/* Mascot (rainbow circle) */
.mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.mascot-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px;
  box-shadow: var(--shadow-card);
  /* Pastel rainbow border via double-ring technique */
  background-clip: padding-box;
  border: 3px solid transparent;
  background-image:
    linear-gradient(var(--color-surface), var(--color-surface)),
    var(--rainbow-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: mascot-float 4s ease-in-out infinite;
}
.boar-svg { width: 86%; height: 86%; }

/* Avatar image inside the rainbow-circle mascot frame.
   Fills the circle's interior (inside the 8px padding + 3px rainbow ring),
   stays circular via border-radius: inherit, and uses object-fit: cover so
   the portrait source fills the disc without distortion. The rainbow
   outline on .mascot-circle is untouched. */
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Modal avatar (desktop): enlarged for better visibility. Mobile keeps the
   original 64px via the media query below. */
.mascot-circle-monogram { width: 128px; height: 128px; }
.mascot-modal { margin: 0 auto 16px; }

@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Hero text */
.hero-title {
  font-size: clamp(2.25rem, 1.2rem + 5vw, 3rem);
  font-weight: 800;
  color: var(--color-boar-green);
  margin: 8px 0 12px;
  letter-spacing: -1px;
}
.hero-tagline {
  font-size: 1.125rem;
  font-weight: 600;
  color: #b04a2e;
  margin: 0 0 8px;
}
.hero-subtagline {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0 0 40px;
}
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===================================================================
   SECTION 3: VALUE PROPS
   =================================================================== */
.section-why { background: var(--color-cream); }
.card-grid { display: grid; gap: 32px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.value-card { text-align: center; }
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.value-icon {
  display: inline-flex;
  width: 56px; height: 56px;
  margin-bottom: 18px;
}
.value-icon svg { width: 100%; height: 100%; }
.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-boar-green);
  margin: 0 0 10px;
}
.card-text {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 0.975rem;
}

/* ===================================================================
   SECTION 4: FEATURED DOMAINS
   =================================================================== */
.section-domains { background: var(--color-cream); }
.card-grid-domains {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.domain-card { position: relative; display: flex; flex-direction: column; }
.domain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* ---- Featured + status badges -----------------------------------------
   Featured ring uses the primary brand token (var(--color-boar-green) =
   #2d5a3d). Status badges sit above the domain name; the "Available"
   default needs no badge. */
.domain-card--featured {
  border-color: var(--color-boar-green);
  box-shadow: 0 0 0 2px var(--color-boar-green);
}
.domain-badge {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-btn);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.domain-badge--sold {
  background: #c0392b;
  color: #ffffff;
}
.domain-badge--nego {
  background: #d97706;
  color: #ffffff;
}

/* ---- Domain card redirect link (top-right external link) --------------
   BEM element of .domain-card. Absolutely positioned in the top-right
   corner; operates independently of the bottom .btn-inquire hover.
   Requires .domain-card { position: relative } (set above). */
.domain-card__link {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;                   /* stay clickable above card text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;                 /* large, mobile-friendly tap target */
  color: var(--color-sage);     /* subtle soft green default */
  background: transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: color var(--transition-base), background var(--transition-base);
}
.domain-card__link:hover,
.domain-card__link:focus-visible {
  color: var(--color-boar-green);        /* exact deep green used site-wide */
  background: rgba(143, 185, 150, 0.15); /* faint sage tint = affordance */
}
.domain-card__icon {
  width: 20px;
  height: 20px;
  display: block;
}
.domain-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-boar-green);
  margin: 0 0 10px;
}
.pill {
  align-self: flex-start;
  display: inline-block;
  background: rgba(143, 185, 150, 0.15);
  color: var(--color-boar-green);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.domain-card .card-text { flex-grow: 1; margin-bottom: 20px; }
.btn-inquire {
  align-self: flex-start;
  background: transparent;
  color: var(--color-boar-green);
  border: 2px solid var(--color-boar-green);
  padding: 10px 22px;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-inquire:hover { background: var(--color-boar-green); color: #fff; }
/* Sold domains: Inquire is inert (no hover fill, no pointer). */
.btn-inquire:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.domains-footnote {
  text-align: center;
  margin: 48px 0 0;
  color: var(--color-text-secondary);
}
.inline-link {
  color: var(--color-boar-green);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-base);
}
.inline-link:hover { border-color: var(--color-boar-green); }

/* ===================================================================
   SECTION 5: CONTACT
   =================================================================== */
.section-contact { background: var(--color-boar-green); }
.contact-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-elevated);
}
.contact-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.contact-method + .contact-method { margin-top: 24px; }

/* X / Twitter row — mirrors #email-method: a bare flex row (no box) whose
   left cluster (icon + handle) shares the email row's alignment line and
   whose right side is closed by the .btn-ghost action, paralleling the
   email row's "Reveal Email" button. */
.contact-method-x-text {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-grow: 1;                 /* push the ghost button to the right edge */
  color: var(--color-boar-green);
  text-decoration: none;
  font-weight: 700;
  transition: opacity var(--transition-base);
}
.contact-method-x-text:hover { text-decoration: underline; }
.contact-method-x-handle { font-size: 1rem; }
.contact-icon {
  display: inline-flex;
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: var(--color-boar-green);
}
.contact-icon svg { width: 100%; height: 100%; }
/* X logo sized near the email envelope icon; deep green on the white card. */
.contact-icon-x { color: var(--color-boar-green); width: 22px; height: 22px; }

/* Ghost action button: no background, no border — deep green text + ↗ arrow.
   Height/padding mirror .btn-email-toggle so the two right-side actions form
   a perfectly mirrored pair; "Reveal Email" stays the primary (filled) CTA. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;            /* matches .btn-email-toggle */
  font-size: 0.9rem;             /* matches .btn-email-toggle */
  font-weight: 700;
  color: var(--color-boar-green);
  background: transparent;
  border: none;
  border-radius: var(--radius-btn);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.btn-ghost:hover { opacity: 0.7; text-decoration: underline; }
.btn-ghost__icon {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-base);
}
.btn-ghost:hover .btn-ghost__icon { transform: translate(1px, -1px); }
.contact-method-body {
  flex-grow: 1;
  position: relative;
  min-height: 24px;
}

/* Email show/hide */
.email-display {
  font-weight: 700;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.email-masked { color: var(--color-text-muted); }
.email-revealed {
  position: absolute;
  inset: 0;
  color: var(--color-boar-green);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
/* When revealed */
#email-method.is-revealed .email-masked {
  opacity: 0;
  transform: translateY(-6px);
}
#email-method.is-revealed .email-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-email-toggle {
  background: transparent;
  color: var(--color-boar-green);
  border: 2px solid var(--color-boar-green);
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.btn-email-toggle:hover { background: rgba(45, 90, 61, 0.06); }
#email-method.is-revealed .btn-email-toggle {
  background: var(--color-boar-green);
  color: #fff;
}

.contact-footnote {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 28px 0 0;
}

/* ===================================================================
   SECTION 6: FOOTER
   =================================================================== */
.site-footer {
  background: var(--color-dark-forest);
  padding: 32px 24px;
}
.footer-row {
  /* Full-width footer (no max-width cap) — matches the announcement bar (.nav)
     pattern: the parent .site-footer provides padding: 32px 24px, so the
     copyright reaches the true left viewport edge on ultra-wide screens.
     Three tracks (1fr auto 1fr) keep the logo centered at the true viewport
     midpoint even though the third child (footer-x icon) was removed — the
     empty 1fr track balances the first. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
}
.footer-copy {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin: 0;
  justify-self: start;
}
.footer-logo {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
  justify-self: center;
}
.footer-x {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-base), opacity var(--transition-base);
  display: inline-flex;
  justify-self: end;
  align-self: center;
}
.footer-x svg { width: 22px; height: 22px; }
.footer-x:hover { color: #fff; opacity: 1; }
.footer-legal {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  margin: 18px 0 0;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer-legal a:hover { color: #fff; }

/* ===================================================================
   ABOUT MODAL
   =================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 0;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-panel {
  position: relative;
  width: 90vw;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  padding: 40px 32px 32px;
  box-shadow: var(--shadow-elevated);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-bounce);
}
.modal-overlay.open .modal-panel { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background 0.2s ease;
}
.modal-close:hover { background: rgba(0, 0, 0, 0.1); }
.modal-close svg { width: 18px; height: 18px; }

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-boar-green);
  margin: 0 0 4px;
}
.modal-text {
  color: var(--color-text-secondary);
  line-height: 1.7;
  text-align: left;
  margin: 0;
}

/* Body scroll lock helper (applied via JS) */
body.modal-open { overflow: hidden; }

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .card-grid-domains { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .nav-actions { display: none; }
  .hamburger { display: inline-flex; }

  /* BUG 1 FIX — logo lockup scaled for mobile so it never overlaps the
     hamburger. Icon/text heights reduced (width:auto scales with them to
     keep aspect ratio); gap + nav padding tightened. Desktop (>=769px)
     is untouched. See also the extra small-phone squeeze at <=390px. */
  .nav { padding: 0 20px; gap: 14px; }
  .logo { gap: 8px; }
  .logo-icon { height: 64px; }
  .logo-text { height: 42px; }

  .hero-leaf { width: 80px; height: 80px; }
  .mascot-circle { width: 140px; height: 140px; }
  /* Mobile: About-modal avatar sized to ~71% of the 140px mobile hero,
     matching the desktop modal-to-hero ratio so both views feel consistent. */
  .mascot-circle-monogram { width: 100px; height: 100px; }

  .card-grid-3 { grid-template-columns: 1fr; }
  .card-grid-domains { grid-template-columns: 1fr; }

  /* Contact card — absolute symmetry between the Email and X rows.
     Both adopt an identical 3-level vertical stack:
       Level 1: icon (left-aligned)
       Level 2: text handle (left-aligned)
       Level 3: full-width rectangular action button
     Applies to the whole mobile/compact range (≤768px). Desktop is untouched. */
  #email-method {
    flex-direction: column;
    align-items: flex-start;     /* left-align icon + handle */
    gap: 12px;
  }
  .contact-method-body { text-align: left; min-height: auto; width: 100%; }
  /* Desktop's position:absolute; inset:0 now applies on mobile too — the
     revealed email overlays the masked one in place (same left edge),
     instead of sitting as an inline sibling that the masked span pushes
     rightward. width:100% gives the absolute overlay enough room. */
  .btn-email-toggle { width: 100%; }

  /* X ROW — mirror the email row's 3-level stack. The inner .contact-method-x-text
     link becomes a column: icon on top, handle below (both left-aligned).
     pointer-events: none neutralizes the link on mobile so the handle is static
     (no overlapping tap target); the .btn-ghost below is the sole clickable. */
  .contact-method-x {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .contact-method-x-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none;          /* handle + icon are display-only on mobile */
    text-decoration: none;         /* suppress the desktop underline affordance */
  }
  /* X icon matches the email envelope icon (28px) for true parity. */
  .contact-icon-x { width: 28px; height: 28px; }
  .contact-method-x-handle { font-size: 1rem; }

  /* VISIT PROFILE — full-width rectangular ghost button mirroring "Reveal Email":
     same padding, border-radius, dark-green border, centered text. Restored as
     clickable (re-enables the link that the parent neutralized). */
  .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 10px 18px;            /* matches .btn-email-toggle */
    border: 2px solid var(--color-boar-green);
    opacity: 1;                    /* cancel the desktop hover dim baseline */
    pointer-events: auto;          /* clickable: this is the X row's action */
  }
  .btn-ghost:hover { opacity: 1; text-decoration: none; } /* no text-link affordance */

  /* Footer stacks and centers everything on mobile */
  .footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: stretch;
    text-align: center;
    gap: 12px;
  }
  .footer-copy,
  .footer-logo,
  .footer-x { justify-self: center; }
}

/* ===================================================================
   SOUND TOGGLE (fixed, reachable while scrolling)
   =================================================================== */
.sound-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 150;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-cream);
  color: var(--color-boar-green);
  border: 2px solid rgba(45, 90, 61, 0.15);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base), color var(--transition-base);
}
.sound-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.sound-icon {
  width: 22px;
  height: 22px;
}
/* Show only the icon matching the current state; JS toggles .is-on on the button. */
.sound-icon-on { display: none; }
.sound-toggle.is-on .sound-icon-muted { display: none; }
.sound-toggle.is-on .sound-icon-on { display: block; }

/* ===================================================================
   COOKIE CONSENT BANNER (bottom-left, non-modal, z-9999)
   Deliberately bottom-LEFT to avoid colliding with the bottom-right
   .sound-toggle (z-150). Non-modal: background stays interactive.
   Focus ring + keyboard access inherited from the global :focus-visible.
   =================================================================== */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 440px;
  width: calc(100vw - 40px);
  background: var(--color-surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  padding: 20px;
  /* Slide-in animation; [hidden] attribute hides it otherwise. */
  transform: translateY(24px);
  opacity: 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
  pointer-events: none;
}
.cookie-banner:not([hidden]) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner__text {
  margin: 0 0 14px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cookie-banner__text a {
  color: var(--color-boar-green);
  font-weight: 700;
  text-decoration: none;
}
.cookie-banner__text a:hover { text-decoration: underline; }
.cookie-banner__actions {
  display: flex;
  gap: 10px;
}
.cookie-banner__btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.cookie-banner__btn--accept {
  background: var(--color-boar-green);
  color: #fff;
  border: 2px solid var(--color-boar-green);
}
.cookie-banner__btn--accept:hover {
  background: var(--color-forest-green);
  transform: translateY(-2px);
}
.cookie-banner__btn--reject {
  background: transparent;
  color: var(--color-boar-green);
  border: 2px solid var(--color-boar-green);
}
.cookie-banner__btn--reject:hover {
  background: rgba(45, 90, 61, 0.06);
  transform: translateY(-2px);
}

/* Mobile: lift the banner above the sound-toggle so they never overlap. */
@media (max-width: 480px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 76px;          /* clears the 44px sound-toggle + 20px offset */
    width: auto;
    max-width: none;
  }
}

/* Reduced motion */
/* BUG 1 FIX (cont.) — extra squeeze for small phones (iPhone SE, 320–390px).
   Logo math at 320px: 44 + 6 + 120 = 170px lockup + 12 gap + 40 hamburger
   + 28 padding = 250px, comfortably within a 320px viewport. Legible + on-brand. */
@media (max-width: 390px) {
  .nav { padding: 0 14px; gap: 12px; }
  .logo { gap: 6px; }
  .logo-icon { height: 46px; }
  .logo-text { height: 30px; }
}

/* HERO CONTENT — shift upward ONLY on real touch devices (phones/tablets).
   Desktop users narrowing below 768px fail the pointer:coarse check and keep
   the base centered layout (align-items: center), so the content stays
   perfectly centered at every desktop window width. */
@media (max-width: 768px) and (orientation: portrait) and (pointer: coarse) {
  .hero {
    align-items: flex-start;
    padding-top: clamp(24px, 6vh, 48px);
  }
  .hero-inner {
    margin-top: -4vh;
  }
}

/* HERO CONTENT — shift upward on DESKTOP only (mouse/trackpad devices).
   HERO AS A 21:9 UNIFIED CANVAS (desktop only)
   ─────────────────────────────────────────────
   The base .hero is sized by min-height: calc(100vh - var(--nav-height)),
   which ties its HEIGHT to the viewport. The 21:9 background video scales
   with WIDTH (object-fit: cover in a width-responsive container). That
   height-vs-width mismatch is why text and video drifted apart on browser
   zoom — two different scaling axes in one composite.

   Fix: on desktop (pointer: fine + hover: hover per the codebase's
   device-capability convention — no min-width clause) the hero becomes a
   strict 21:9 canvas via aspect-ratio + container-type: inline-size. Every
   hero dimension is then expressed in cqw (container query width), so the
   video, text block, and decorative leaves scale as ONE IMAGE-LIKE UNIT on
   Ctrl+/Ctrl-/Ctrl+0. The flying bird stays under the CTA buttons at every
   zoom level.

   Trade-off: desktop hero is shorter than before (~823px at 1920px vs the
   old ~960px 100vh container) — intentional and correct for widescreen.
   Mobile base rules and @media (max-width: 768px) are byte-for-byte
   untouched; touch devices never match this query. */
@media (pointer: fine) and (hover: hover) {
  .hero {
    container-type: inline-size;     /* enables cqw units for all descendants */
    aspect-ratio: 21 / 9;            /* height = width * 9/21 (matches the video) */
    min-height: auto;                /* override base calc(100vh - var(--nav-height)) */
    padding: 0 24px;                 /* drop vertical 80px (moved to .hero-inner); keep horizontal 24px */
    align-items: flex-start;         /* content shifts top (upper sky area) */
  }
  .hero-inner {
    /* Re-tuned for the shorter 21:9 canvas. The old negative pull
       (clamp(-1rem, -1vw, 0rem) ≈ -19px) was calibrated for the 100vh
       container's 80px top padding zone. The 21:9 canvas has no vertical
       padding, so the pull is halved to ~-9.6px at 1920px — keeps the text
       block in the upper third without overshooting into the nav bar. */
    margin-top: clamp(0rem, -0.5cqw, 1rem);
    max-width: 37.5cqw;              /* was 720px (720/19.2 ≈ 37.5cqw at 1920px) */
    padding: 3cqw 0;                 /* vertical breathing room moved here from .hero */
  }
  /* Hero typography & spacing bound to cqw so the text scales synchronously
     with the 21:9 canvas (unified-canvas effect). 1cqw ≈ 1vw when the hero
     spans the viewport width, so these preserve the prior visual calibration.
     Mobile keeps the base values; these overrides are desktop-only. */
  .hero-title {
    font-size: clamp(2rem, 2.25cqw, 2.7rem);
    letter-spacing: -0.05cqw;
  }
  .hero-tagline {
    font-size: clamp(0.85rem, 1cqw, 1.2rem);
  }
  .hero-subtagline {
    font-size: clamp(0.75rem, 0.9cqw, 1.05rem);
  }
  .hero-cta {
    gap: clamp(0.6rem, 0.9cqw, 1.3rem);
  }
  /* Scoped to .hero-cta so the X-logo, contact, and inquiry buttons (which
     use plain .btn elsewhere) are NOT affected. */
  .hero-cta .btn {
    font-size: clamp(0.75rem, 0.85cqw, 1rem);
    padding: clamp(0.4rem, 0.6cqw, 0.85rem) clamp(0.9rem, 1.25cqw, 2rem);
    gap: clamp(0.3rem, 0.45cqw, 0.65rem);
  }
  /* Decorative leaves scale with the canvas. 6.4cqw ≈ 123px at 1920px —
     preserves the prior fixed 120px size while making leaves shrink/grow as
     part of the unified canvas. Percentage positions stay as-is (they
     already scale with the container). */
  .hero-leaf {
    width: 6.4cqw;
    height: 6.4cqw;
  }

  /* Domain grid density — ~10% reduction (calibrated for 100% browser zoom).
     Scoped to desktop only; mobile keeps the base sizes. Overrides only the
     domains section so the Why/Contact sections are unaffected. */
  .section-domains {
    padding: 86px 0;
  }
  .card-grid-domains {
    gap: 22px;
  }
  .domain-card {
    padding: 29px;
  }
  .domain-name {
    font-size: 1.215rem;
  }
  .domain-card .card-text {
    font-size: 0.878rem;
    line-height: 1.44;
    text-align: justify;
  }
  .domains-footnote {
    margin: 43px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mascot-circle { animation: none; }
  .modal-panel { transition: opacity 0.2s ease; transform: none; }
  /* No looping motion: hide the video + tint, restore a calm cream hero. */
  .hero-video,
  .hero-video-tint { display: none; }
  .hero { background: var(--color-cream); }
}

/* =====================================================================
   Pagination + carousel + inquiry modal + skeleton (additions only).
   All brand-aligned; appended at the end so existing rules are untouched.
   ===================================================================== */

/* ---------- Error fallback (Part 9) --------------------------------- */
.error-fallback {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px;
  background: var(--color-cream);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--color-boar-green);
}
.error-fallback p { color: var(--color-text-secondary); }
.error-fallback .inline-link {
  color: var(--color-boar-green);
  font-weight: 700;
}

/* ---------- Featured carousel (Part 5) ------------------------------ */
/*
 * CSS-native mobile-only visibility wrapper. Tailwind's md:hidden is defeated
 * by the load order (styles.css loads after Tailwind via <link> in <body>), so
 * the carousel wrapper uses this brand-CSS class instead.
 *
 * Visibility is driven by DEVICE CAPABILITY, not viewport width: a desktop
 * user who narrows the browser below 768px must NOT see the mobile carousel.
 * `pointer: fine` + `hover: hover` matches mouse/trackpad devices (desktops,
 * laptops) at ANY window width, so the carousel stays hidden on resize.
 * Phones/tablets are always `pointer: coarse` / `hover: none`, fail this
 * query, and keep the carousel visible regardless of screen resolution.
 */
.carousel-mobile-only { display: block; }
@media (pointer: fine) and (hover: hover) {
  .carousel-mobile-only { display: none; }
}

/* Guarantee significant separation (≥4rem / 64px) between the carousel and
   the "Selected Domains" list below it on mobile. */
@media (max-width: 768px) {
  .carousel-mobile-only { margin-bottom: 4rem; }
}

/* Featured cards that ALSO appear in the carousel above are tagged
   `.domain-card--featured-dup` by DomainCard. Hide just those duplicates on
   touch devices (where the carousel is visible); desktop keeps them visible
   because the carousel is hidden there (see .carousel-mobile-only rule).
 *
 * Uses the SAME device-capability axis as the carousel rule so the pair stays
 * in sync: touch → carousel visible AND dup cards hidden (no duplication);
 * desktop → carousel hidden AND dup cards visible (featured domains appear in
 * the list). Never both hidden (domains would vanish) and never both visible
 * (would duplicate). Width is intentionally NOT part of this query so a
 * desktop user narrowing the window keeps featured cards in the list. */
@media (pointer: coarse) and (hover: none) {
  .domain-card--featured-dup { display: none; }
}

.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  /* Uniform 16px padding: left/right keep the first/last card's border + shadow
     visible inside the overflow-x: auto container; top/bottom prevent shadow
     clipping and give the row breathing room. scroll-padding-left matches the
     left inset so scroll-snap targets don't snap flush against the edge. */
  padding: 16px;
  scroll-padding-left: 16px;
  margin: 0 0 24px;
  /* Hide scrollbars across browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}
.carousel-container::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 68vw;            /* narrower card → stronger peek of next card */
  min-width: 68vw;
  max-width: 68vw;           /* lock width so the next card reliably peeks */
}

/* Compact carousel card — premium "business card" treatment. Centered column
   layout, generous padding, rounded corners, soft luxury elevation. Closer to
   a square than a wide rectangle so each domain feels presented on a shelf. */
.carousel-card-compact {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 160px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(45, 90, 61, 0.12);
  cursor: pointer;
}

/* All carousel cards are .domain-card--featured (the carousel is fed featured
   domains only), whose green-ring box-shadow would otherwise clobber the
   compact card's luxury shadow above. Combine both: ring + soft elevation. */
.carousel-card-compact.domain-card--featured {
  box-shadow:
    0 0 0 2px var(--color-boar-green),
    0 4px 16px rgba(45, 90, 61, 0.12);
}

.carousel-card-compact .domain-name {
  font-size: 1.2rem;
  margin: 0;
  text-align: center;
}
.carousel-card-compact .pill {
  margin-bottom: 0;
  align-self: center;
}

/* Inner wrapper around domain name + category pill — stacks vertically and
   centers horizontally within the card. */
.carousel-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Carousel-specific external-link icon treatment. The base .domain-card__link
   is SHARED with DomainCard.tsx (not modified here), so scope via the compact
   card prefix: tuck the icon a touch closer to the corner and mute it by
   default so it doesn't compete with the centered domain name. Restore full
   opacity on hover/focus for discoverability. */
.carousel-card-compact .domain-card__link {
  top: 12px;
  right: 12px;
  opacity: 0.5;
  transition:
    opacity var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
}
.carousel-card-compact .domain-card__link:hover,
.carousel-card-compact .domain-card__link:focus-visible {
  opacity: 1;
}

/* "Today's Featured" label above the carousel */
.carousel-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-foliage);
  margin: 0 0 8px;
}

/* 3-line description clamp for carousel cards */
.description-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Coach mark — first-visit hint on the first carousel card */
.coach-mark {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-boar-green);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  pointer-events: none;
  animation: swipe-hint 2.2s ease-in-out infinite;
}
.coach-mark-icon { font-size: 0.95rem; }
.coach-mark-text { white-space: nowrap; }

@keyframes swipe-hint {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-30%, 0); }
}

/* ---------- Inquiry modal (Part 6) ---------------------------------- */
.inquiry-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.inquiry-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.inquiry-card {
  position: relative;
  width: 90vw;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 32px;
}
.inquiry-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 4px 8px;
  transition: color var(--transition-base);
}
.inquiry-close:hover { color: var(--color-boar-green); }
.inquiry-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-boar-green);
  margin: 0 0 20px;
  padding-right: 24px;
}
.inquiry-form .field { margin-bottom: 16px; }
.inquiry-form .field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-boar-green);
}
.inquiry-form .req { color: #dc2626; }
.inquiry-form .input {
  width: 100%;
  border: 1px solid var(--color-sage);
  background: #fff;
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.inquiry-form .input::placeholder { color: var(--color-text-muted); }
.inquiry-form .input:focus {
  outline: none;
  border-color: var(--color-boar-green);
  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.18);
}
.inquiry-form .field-hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.inquiry-form .field-hint.count { text-align: right; }
.inquiry-form .field-error {
  margin: 4px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
}
.inquiry-form .submit-error {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: var(--radius-btn);
  font-size: 0.85rem;
}
.inquiry-submit {
  width: 100%;
  margin-top: 4px;
  font-weight: 700;
  cursor: pointer;
}
.inquiry-submit:hover { background: var(--color-boar-green); color: #fff; }
.inquiry-success {
  text-align: center;
  padding: 16px 0;
}
.inquiry-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(143, 185, 150, 0.18);
  color: var(--color-boar-green);
  font-size: 1.5rem;
  font-weight: 800;
}
.inquiry-success-text {
  font-size: 1rem;
  color: var(--color-text-primary);
  margin: 0 0 20px;
}

/* ---------- Pagination (Part 7) ------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}
.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-sage);
  background: transparent;
  color: var(--color-boar-green);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.page-btn:hover:not(:disabled):not(.page-btn-current) {
  background: var(--color-cream);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-btn-current {
  background: var(--color-boar-green);
  color: #fff;
  border-color: var(--color-boar-green);
  cursor: default;
}
.page-nav { padding: 0 14px; }
.page-ellipsis {
  padding: 0 4px;
  color: var(--color-text-muted);
  font-weight: 700;
}

/* ---------- Skeleton (Part 8) --------------------------------------- */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.skeleton-card { pointer-events: none; }
.skeleton-bar {
  display: block;
  height: 14px;
  margin-bottom: 10px;
  background: var(--color-cream);
  border-radius: 6px;
  animation: skeleton-pulse 2s ease-in-out infinite;
}
.skeleton-bar-title { width: 55%; height: 22px; margin-bottom: 14px; }
.skeleton-bar-pill { width: 35%; height: 18px; border-radius: 999px; margin-bottom: 16px; }
.skeleton-bar-short { width: 70%; }
.skeleton-bar-btn {
  width: 110px;
  height: 38px;
  margin-top: 10px;
  border-radius: var(--radius-btn);
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; opacity: 0.6; }
  .coach-mark { animation: none; }
}

/* HERO VIDEO - Center ONLY on real touch devices (mobile phones & tablets)
   This preserves full mobile/compact layout logic while protecting
   the boar on desktop resize at any width. */
@media (max-width: 768px) and (pointer: coarse) and (hover: none) {
  .hero-video {
    object-fit: cover;
    object-position: center center;
  }
}