/* ==========================================================================
   Option D: Serene
   Signature's layout (design-a.css) with a softer mood: slate navy drawn from
   UPMC's navy, warm off-white sections, a light serif display face (Fraunces)
   for the big headlines, finer lines and more air. Cyan stays as the accent.
   ========================================================================== */

:root {
  --navy: #2b4472;
  --navy-deep: #1a2d4c;
  --ink: #142440;
  --texture: url("../images/texture-d.jpg");
  --soft: #faf8f4;
  --text: #4a5566;
  --muted: #6e7887;
  --line: #e6e2da;
  --head-weight: 300;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --shade: rgba(16, 28, 50, .5);
}

body { background: #fffefb; }
h1, h2,
.section-header h2,
.feature-panel h2,
.quote-band p,
.tile-title,
.doctor-name {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0;
}
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5rem); line-height: 1.05; }
.section-header h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); color: #3a4f75; }
.tile-title { font-size: 1.5rem; }
.doctor-name { font-size: 1.5rem; }
.quote-band p { font-style: italic; font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.quote-band p::before { font-style: normal; }

.section-white { background: #fffefb; }
.rule { width: 70px; height: 1px; background: var(--cyan); }
.btn { border-width: 1px; letter-spacing: .18em; }
.nav-links a { font-weight: 600; letter-spacing: .18em; font-size: .74rem; }
.site-header-overlay .header-top { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Tiles: lighter wash so the artwork reads through, warm shadow. */
.tile { background: #23395e; }
.tile-media { background: #23395e; }
.tile-media img { opacity: .26; }
.tile::after { background: linear-gradient(180deg, rgba(26,45,76,0), rgba(20,36,64,.5)); }

.value-icon { border-width: 1px; }
.feature-list-icon { background: #eef6f7; }
.feature-card, .treatment-card, .service-detail, .location-card, .post-card, .contact-info-card { border-color: var(--line); }
.contact-info-card { background: var(--soft); }
.footer { background: #121f36; }

/* Right-hand visual: an arched window cross-fading through four service
   illustrations (template-parts/hero-showcase.php). Each slide is visible for
   a quarter of the 20s cycle, staggered by --i. */
.showcase-arch { max-width: 420px; padding: 18px; }
.arch {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 6px 6px; background: #f3f6f7;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.arch-ring { position: absolute; inset: 0; border: 1px solid rgba(205,248,255,.35); border-radius: 999px 999px 10px 10px; pointer-events: none; }
.arch-slide { position: absolute; inset: 0; margin: 0; opacity: 0; display: flex; flex-direction: column; animation: arch-fade 20s ease-in-out infinite; animation-delay: calc(var(--i) * 5s); }
.arch-slide:first-child { opacity: 1; }
.arch-slide img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: 50% 60%; animation: arch-drift 20s ease-in-out infinite; animation-delay: calc(var(--i) * 5s); }
.arch-slide figcaption {
  flex-shrink: 0; padding: 1.2rem 1.25rem 1.35rem; text-align: center;
  background: var(--navy-deep); border-top: 3px solid var(--cyan);
  color: var(--white); font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.2;
}
@keyframes arch-fade { 0% { opacity: 0; } 5%, 25% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes arch-drift { 0% { transform: scale(1.08); } 30%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .arch-slide, .arch-slide img { animation: none; }
  .arch-slide:not(:first-child) { opacity: 0; }
}
@media (max-width: 900px) { .showcase-arch { max-width: 300px; } }
@media (max-width: 640px) { .showcase-arch { max-width: 240px; } .arch-slide figcaption { font-size: 1.1rem; padding: .9rem 1rem 1rem; } }

.hero-stat-icon { border-width: 1px; }
.hero-stat-number { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0; }