/* Separate colour comparison. The original home-page styles stay 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;
}


:root { --utility-bar-bg: var(--action); }

/* Colour declarations from home.css; all dimensions are inherited. */
:root {
  --ink: #274760;
  --ink-strong: #003366;
  --ink-soft: #526e85;
  --rose: #2e6eb5;
  --rose-dark: #2e6eb5;
  --rose-deep: #003366;
  --rose-soft: #6699ff;
  --rose-pale: #e8f0ff;
  --blush: #f4f8ff;
  --blush-deep: #e8f0ff;
  --paper: #ffffff;
  --line: #cddef4;
  --shadow: 0 24px 64px rgba(0, 51, 102, .13);
}

.utility-bar {
  background: #2e6eb5;
}

.header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(0, 51, 102, .12);
}

.header-phone span {
  color: #526e85;
}

.button:focus-visible,
.text-link:focus-visible,
.nav a:focus-visible,
.header-phone:focus-visible {
  outline: 3px solid #6699ff;
}

.button-primary {
  box-shadow: 0 12px 28px rgba(0, 51, 102, .25);
}

.button-primary:hover {
  box-shadow: 0 15px 32px rgba(0, 51, 102, .28);
}

.button-white {
  box-shadow: 0 12px 30px rgba(0, 51, 102, .16);
}

.hero {
  background: radial-gradient(circle at 9% 19%, rgba(0, 51, 102, .16) 0 5px, transparent 6px),
    radial-gradient(circle at 96% 72%, rgba(0, 51, 102, .14) 0 5px, transparent 6px),
    radial-gradient(ellipse 65% 27% at 61% 110%, rgba(0, 51, 102, .32), transparent 76%),
    linear-gradient(122deg, #f4f8ff 0%, #ffffff 40%, #e8f0ff 100%);
}

.eyebrow,
.section-label {
  color: #2e6eb5;
}

.hero h1 em,
.about-copy h2 em,
.access-copy h2 em {
  color: #2e6eb5;
}

.hero-image-wrap {
  background: #cddef4;
  border: 1px solid rgba(0, 51, 102, .16);
}

.hero-image-hint {
  background: rgba(0, 51, 102, .77);
}

.hero-floor-card {
  border: 1px solid rgba(0, 51, 102, .16);
  box-shadow: 0 16px 42px rgba(0, 51, 102, .14);
}

.hero-floor-card[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--rose-dark), 0 16px 42px rgba(0, 51, 102, .14);
}

.hero-floor-card b {
  background: #e8f0ff;
}

.visit-card {
  box-shadow: 0 20px 58px rgba(0, 51, 102, .1);
}

.visit-intro {
  background: linear-gradient(145deg, #2e6eb5, #2e6eb5);
}

.hours-heading span {
  color: #526e85;
}

.schedule-table th, .schedule-table td {
  border-bottom: 1px solid #cddef4;
}

.schedule-table thead th {
  color: #526e85;
}

.notice-section {
  border-block: 1px solid #cddef4;
}

.notice-arrow {
  box-shadow: 0 10px 24px rgba(0, 51, 102, .2);
}

.about-section::after {
  background: rgba(0, 51, 102, .13);
  border: 1px solid rgba(0, 51, 102, .15);
}

.about-image-main {
  border: 1px solid rgba(0, 51, 102, .15);
}

.about-number {
  box-shadow: 0 14px 36px rgba(0, 51, 102, .2);
}

.service-card {
  border: 1px solid #cddef4;
}

.service-card::after {
  background: #e8f0ff;
}

.service-card:hover {
  box-shadow: 0 22px 50px rgba(0, 51, 102, .12);
}

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

.service-card-accent:hover {
  background: linear-gradient(145deg, #1d5894, #1d5894);
}

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

.facility-section {
  background: #003366;
}

.section-label-light {
  color: #6699ff;
}

.gallery-item::after {
  background: linear-gradient(180deg, transparent 55%, rgba(0, 51, 102, .76));
}

.gallery-item > span small {
  color: #6699ff;
}

.gallery-item-link {
  background: #e8f0ff;
}

.gallery-count {
  color: rgba(0, 51, 102, .48);
}

.access-section {
  background: #f4f8ff;
}

.access-map::before {
  border: 1px solid #6699ff;
}

.final-cta {
  background: #f4f8ff;
}

.final-cta-inner {
  background: linear-gradient(135deg, #2e6eb5, #003366);
  border: 1px solid #003366;
}

.footer {
  background: #e8f0ff;
}

.footer-bottom {
  color: #526e85;
  border-top: 1px solid #cddef4;
}

/* Colour declarations from group-footer.css; all dimensions are inherited. */
.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 site-polish.css; all dimensions are inherited. */
: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);
}

/* Colour declarations from hero-layered.css; all dimensions are inherited. */
.hero.hero-layered {
  background: #f4f8ff;
}

.hero-layered h1 {
  color: #003366;
}

.hero-layered h1 > em {
  color: #2e6eb5;
}

.hero-layered .hero-facts li {
  color: #2e6eb5;
}

.hero-layered .hero-fact-icon {
  color: #2e6eb5;
  background: #e8f0ff;
}

.hero-layered .hero-floor-card {
  border: 1px solid #cddef4;
  box-shadow: 0 14px 34px rgba(0, 51, 102, .10);
}

.hero-layered .hero-floor-card > span {
  color: #003366;
}

.hero-layered .hero-floor-card b {
  background: #e8f0ff;
}

.hero-layered .hero-floor-card[aria-pressed="true"] {
  border-color: #2e6eb5;
  box-shadow: 0 0 0 2px #2e6eb5, 0 14px 34px rgba(0, 51, 102, .10);
}

.hero-layered-photo-trigger:focus-visible {
  outline: 3px solid #2e6eb5;
}

@media (max-width: 767px) {
  .hero-layered .hero-floor-card b {
    background: #f4f8ff;
  }
}

/* Only the pastel artwork is recoloured; the clinic photograph remains underneath. */
.hero-layered-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201727%20911%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22%3E%3Crect%20x%3D%22-30%22%20y%3D%22-30%22%20width%3D%22575%22%20height%3D%22971%22%2F%3E%3Cpath%20d%3D%22M0%20756%20C230%20870%20420%20710%20670%20766%20C880%20815%20930%20854%201145%20831%20C1390%20835%201520%20847%201727%20803%20L1757%20941%20L-30%20941%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201727%20911%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22%3E%3Crect%20x%3D%22-30%22%20y%3D%22-30%22%20width%3D%22575%22%20height%3D%22971%22%2F%3E%3Cpath%20d%3D%22M0%20756%20C230%20870%20420%20710%20670%20766%20C880%20815%20930%20854%201145%20831%20C1390%20835%201520%20847%201727%20803%20L1757%20941%20L-30%20941%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.button-primary:hover,
.header .header-booking:hover,
.header .nav-mobile-actions .button-primary:hover { background-color: var(--action-hover); }
.button-primary:focus-visible { outline-color: var(--brand-sky); }
.service-card-accent .service-icon { border-color: rgba(255, 255, 255, .9); }