/* Separate blue inner-page comparison; source styles and layout are unchanged. */

:root {
  --brand-navy: #003366;
  --brand-sky: #6699ff;
  --action: #2e6eb5;
  --action-hover: #1d5894;
  --ink: #274760;
  --ink-strong: #003366;
  --ink-soft: #526e85;
  --paper: #ffffff;
  --surface: #f4f8ff;
  --surface-deep: #e8f0ff;
  --line: #cddef4;
  --line-art: #4a7ca8;
}


/* Colour declarations from page.css. */
:root {
  --primary: #2e6eb5;
  --primary-dark: #003366;
  --primary-deep: #003366;
  --primary-light: #e8f0ff;
  --accent: #2e6eb5;
  --accent-dark: #1d5894;
  --accent-light: #e8f0ff;
  --leaf: #4a7ca8;
  --leaf-light: #f4f8ff;
  --cream: #f4f8ff;
  --text: #274760;
  --text-secondary: #526e85;
  --text-muted: #526e85;
  --border: #cddef4;
  --surface: #f4f8ff;
  --surface-warm: #f4f8ff;
  --shadow-1: 0 2px 12px rgba(0, 51, 102, .08);
  --shadow-2: 0 14px 34px rgba(0, 51, 102, .11);
  --shadow-3: 0 24px 60px rgba(0, 51, 102, .16);
}

.header {
  border-bottom: 1px solid rgba(0, 51, 102, 0.1);
}

.btn-primary {
  box-shadow: 0 8px 20px rgba(0, 51, 102, 0.22);
}

.btn-accent {
  box-shadow: 0 8px 20px rgba(0, 51, 102, 0.25);
}

.footer {
  background: #003366;
}

@media (max-width: 640px) {
  .mobile-actions {
    box-shadow: 0 -6px 18px rgba(0, 51, 102, 0.12);
  }
}

.confirm-box {
  border: 1px dashed #cddef4;
  background: #e8f0ff;
}

.form-control:disabled {
  background: #e8f0ff;
}

/* Colour declarations from pink-pages.css. */
:root {
  --primary: #2e6eb5;
  --primary-dark: #003366;
  --primary-deep: #003366;
  --primary-light: #e8f0ff;
  --accent: #2e6eb5;
  --accent-dark: #2e6eb5;
  --accent-light: #e8f0ff;
  --leaf: #4a7ca8;
  --leaf-light: #f4f8ff;
  --cream: #f4f8ff;
  --text: #274760;
  --text-secondary: #526e85;
  --text-muted: #526e85;
  --border: #cddef4;
  --bg: #ffffff;
  --surface: #f4f8ff;
  --surface-warm: #f4f8ff;
}

.header {
  border-bottom-color: rgba(0, 51, 102, .15);
}

.btn-primary {
  box-shadow: 0 8px 20px rgba(0, 51, 102, .18);
}

.btn-accent {
  box-shadow: 0 8px 20px rgba(0, 51, 102, .18);
}

.cta-banner {
  background: linear-gradient(125deg, #2e6eb5, #003366);
}

.footer {
  background: #e8f0ff;
}

.draft-notice {
  background: #f4f8ff;
  color: #003366;
}

/* Colour declarations from group-footer.css. */
.footer-group-directory h2 {
  color: var(--ink-soft, var(--text-secondary, #526e85));
}

.footer-group-list a {
  color: var(--ink-soft, var(--text-secondary, #526e85));
}

.footer-group-list a:hover,
.footer-group-list a:focus-visible {
  color: var(--rose-dark, var(--accent-dark, #2e6eb5));
}

/* Colour declarations from first-visit.css. */
.first-visit-section {
  background: #f4f8ff;
}

/* Colour declarations from site-polish.css. */
:root {
  --clinic-accent: var(--rose-dark, var(--accent-dark, #2e6eb5));
  --clinic-ink: var(--ink-strong, var(--primary-deep, #003366));
  --clinic-muted: var(--ink-soft, var(--text-secondary, #526e85));
  --clinic-pale: var(--rose-pale, var(--primary-light, #e8f0ff));
  --clinic-line: var(--line, var(--border, #cddef4));
}

.page-hero {
  background: #f4f8ff;
}

@media (max-width: 1300px) {
  .header .nav {
    box-shadow: 0 18px 42px rgba(0, 51, 102, .14);
  }
}

@media (max-width: 700px) {
  .mobile-actions {
    box-shadow: 0 -6px 18px rgba(0, 51, 102, .12);
  }

  .mobile-actions a:last-child {
    background: var(--rose, var(--accent, #2e6eb5));
  }
}

.utility-bar {
  background: var(--utility-bar-bg, #2e6eb5);
}

.header .header-booking {
  box-shadow: 0 10px 25px rgba(0, 51, 102, .17);
}

.footer {
  background: #e8f0ff;
}

.footer-schedule {
  box-shadow: 0 10px 28px rgba(0, 51, 102, .06);
}

.fact-card-icon {
  border: 2px solid #6699ff;
  background: #f4f8ff;
}

.cta-buttons .btn-accent:hover {
  background: #f4f8ff;
}

.footer {
  background: linear-gradient(135deg, #2e6eb5, #003366);
}

.footer .footer-booking {
  color: #003366;
}

.footer .footer-nav a::before {
  background: #e8f0ff;
}

.service-paw {
  color: #6699ff;
}

.service-card:is(:hover, :focus-visible) {
  background: linear-gradient(145deg, #2e6eb5, #1d5894);
}

/* Match the same colour roles used on the blue home page. */
:root {
  --primary: var(--action);
  --primary-dark: var(--brand-navy);
  --primary-deep: var(--brand-navy);
  --primary-light: var(--surface-deep);
  --accent: var(--action);
  --accent-dark: var(--action);
  --accent-light: var(--surface-deep);
  --rose: var(--action);
  --rose-dark: var(--action);
  --rose-deep: var(--brand-navy);
  --rose-pale: var(--surface-deep);
  --leaf: var(--line-art);
  --leaf-light: var(--surface);
  --cream: var(--surface);
  --text: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-soft);
  --border: var(--line);
  --bg: var(--paper);
  --surface-warm: var(--surface);
  --utility-bar-bg: var(--action);
}
.btn-primary:hover,
.btn-accent:hover,
.button-primary:hover,
.header .header-booking:hover,
.header .nav-mobile-actions .button-primary:hover { background-color: var(--action-hover); }