/* =========================================================================
   Guildford Eye Clinic — Landing Page Stylesheet
   Design intent: warm, editorial, premium. Cream-on-navy with teal interactive
   and gold accents. Editorial serif (Fraunces) for the hero headline only.
   ========================================================================= */


/* ---------- 1. Design tokens ---------- */

:root {
  /* Brand palette (from clinic_profile.json -> brand.colors) */
  --color-cream:        #F5F1E8;   /* page background */
  --color-cream-warm:   #EFE9D9;   /* alternating sections */
  --color-cream-deep:   #E8DFCB;   /* card raised surfaces */
  --color-teal:         #1A5970;   /* primary interactive */
  --color-teal-deep:    #134A5E;   /* button hover */
  --color-teal-darker:  #0E3D4E;   /* highest contrast text on cream */
  --color-navy:         #003C48;   /* body text */
  --color-gold:         #D4A877;   /* accent only */
  --color-gold-soft:    #E8D2AF;   /* subtle gold backgrounds */
  --color-gold-deep:    #B8895A;   /* gold hover */
  --color-line:         #D8CFB9;   /* divider lines */
  --color-line-soft:    #E8DFCB;   /* card borders */
  --color-text-muted:   #6C6857;   /* secondary copy */
  --color-white:        #FFFFFF;

  /* Typography */
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', 'Baskerville', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-tight: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --sp-10: 8rem;     /* 128 */
  --sp-11: 10rem;    /* 160 */

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(4rem, 10vw, 10rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* Animation */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 560ms;

  /* Shadows: subtle, warm, layered. Never harsh black drop-shadows on cream. */
  --shadow-sm: 0 1px 2px rgba(0, 60, 72, 0.04), 0 2px 4px rgba(0, 60, 72, 0.04);
  --shadow-md: 0 6px 16px -8px rgba(0, 60, 72, 0.10), 0 12px 32px -12px rgba(0, 60, 72, 0.08);
  --shadow-lg: 0 12px 28px -12px rgba(0, 60, 72, 0.18), 0 24px 56px -20px rgba(0, 60, 72, 0.16);
}


/* ---------- 2. Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset scroll-to-anchor for sticky nav */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-navy);
  background: var(--color-cream);
  font-feature-settings: 'cv11', 'ss01', 'ss03';   /* nicer Inter alts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
blockquote { margin: 0; }

::selection { background: var(--color-gold-soft); color: var(--color-teal-darker); }


/* ---------- 3. Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  position: relative;
}

.section-cream { background: var(--color-cream-warm); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-title {
  font-family: var(--font-tight);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-4) 0;
}

.section-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 var(--sp-5) 0;
}

.eyebrow-light { color: var(--color-gold-soft); }


/* ---------- 4. Buttons ---------- */

.btn {
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
  will-change: transform;
  white-space: nowrap;
}

.btn-sm { --btn-pad-y: 0.6rem; --btn-pad-x: 1.1rem; font-size: 0.875rem; }
.btn-lg { --btn-pad-y: 1.1rem; --btn-pad-x: 2rem; font-size: 1rem; }

.btn-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn-arrow { transform: translateX(3px); }

/* Primary: teal fill, cream text */
.btn-primary {
  background: var(--color-teal);
  color: var(--color-cream);
  border-color: var(--color-teal);
}
.btn-primary:hover {
  background: var(--color-teal-deep);
  border-color: var(--color-teal-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(212, 168, 119, 0.18);
}
.btn-primary:active { transform: translateY(0); }

/* Outline: teal stroke, transparent fill */
.btn-outline {
  background: transparent;
  color: var(--color-teal-darker);
  border-color: var(--color-teal);
}
.btn-outline:hover {
  background: var(--color-teal);
  color: var(--color-cream);
  transform: translateY(-1px);
}

/* Gold: for use on dark teal backgrounds (bottom CTA) */
.btn-gold {
  background: var(--color-gold);
  color: var(--color-teal-darker);
  border-color: var(--color-gold);
}
.btn-gold:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: var(--color-cream);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-block { width: 100%; }


/* ---------- 5. Sticky nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 232, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.nav.is-scrolled {
  border-bottom-color: var(--color-line);
  background: rgba(245, 241, 232, 0.92);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  min-height: 72px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav-brand img {
  height: 120px;
  width: auto;
  transition: opacity var(--t-fast) var(--ease-out);
}

.nav-brand:hover img { opacity: 0.78; }

/* Language switcher (top-left, beside the logo) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  background: var(--color-cream-warm);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.lang-switch .lang-switch-btn,
.lang-switch .lang-switch-sep {
  white-space: nowrap;
}

.lang-switch:hover {
  border-color: var(--color-teal);
  background: var(--color-cream);
}

.lang-switch-btn {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--t-fast) var(--ease-out);
}

.lang-switch-btn:hover {
  color: var(--color-teal-darker);
}

.lang-switch-btn.is-active {
  color: var(--color-navy);
}

.lang-switch-sep {
  color: var(--color-line);
  font-weight: 400;
}

@media (max-width: 540px) {
  .lang-switch {
    padding: 4px 9px;
    font-size: 0.76rem;
  }
}

.nav-links {
  display: flex;
  gap: var(--sp-7);
  align-items: center;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: 0.005em;
  position: relative;
  padding: var(--sp-2) 0;
  transition: color var(--t-fast) var(--ease-out);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1.5px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease-out);
}

.nav-links a:hover { color: var(--color-teal-darker); }
.nav-links a:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .nav-links { display: none; }
}


/* ---------- 6. Hero ---------- */

.hero {
  padding-top: clamp(3rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-5) 0;
  font-optical-sizing: auto;
}

.hero-headline em {
  font-style: italic;
  color: var(--color-gold-deep);
  font-feature-settings: 'ss01';
}

.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 0 var(--sp-7) 0;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

.hero-secondary {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.hero-secondary:hover {
  color: var(--color-teal-darker);
  border-bottom-color: var(--color-gold);
}

.hero-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
}

.hero-trustline li { display: flex; align-items: center; gap: var(--sp-2); }
.hero-trustline li span {
  color: var(--color-gold);
  font-weight: 700;
}

/* Hero image */
.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}

/* Cycle container: holds 4 stacked images that crossfade through. */
.hero-image-cycle {
  position: absolute;
  inset: 0;
}

.hero-image-cycle .cycle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 20s total cycle, 4 images = 5s slot each. The keyframes give a 1s fade-in,
     a 4s visible hold, and a 1s fade-out within each image's 6s active window
     out of the 20s total. Delays of 0, 5, 10, 15 stagger them so each image's
     fade-out (5-6s of its own cycle) overlaps the next image's fade-in
     (0-1s of its own cycle) = a true 1-second crossfade. */
  animation: heroFade 20s infinite ease-in-out;
  will-change: opacity;
}

.hero-image-cycle .cycle-img:nth-child(1) { animation-delay: 0s; }
.hero-image-cycle .cycle-img:nth-child(2) { animation-delay: 5s; }
.hero-image-cycle .cycle-img:nth-child(3) { animation-delay: 10s; }
.hero-image-cycle .cycle-img:nth-child(4) { animation-delay: 15s; }

@keyframes heroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }    /* fade-in done at 1s (5% of 20s) */
  25%  { opacity: 1; }    /* visible through 5s */
  30%  { opacity: 0; }    /* fade-out done at 6s (overlapping next image's fade-in) */
  100% { opacity: 0; }
}

/* Subtle Ken Burns zoom on hover, applied to whichever image is currently visible */
.hero-image:hover .cycle-img { transform: scale(1.04); }
.hero-image-cycle .cycle-img {
  transform: scale(1);
  transition: transform 4s var(--ease-out);
}

.hero-image-badge {
  position: absolute;
  z-index: 2;                      /* stay above cycling images */
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  background: rgba(245, 241, 232, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-md);
  max-width: 250px;
  box-shadow: var(--shadow-md);
}

.badge-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-2) 0;
  font-weight: 500;
}

.badge-num span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: var(--sp-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { aspect-ratio: 4/3; max-height: 500px; }
}


/* ---------- 7. Card grid (differentiators) ---------- */

.card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-cream);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212,168,119,0.0), rgba(212,168,119,0.06));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold-soft);
  box-shadow: var(--shadow-md);
}

.card:hover::before { opacity: 1; }

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-gold-soft);
  color: var(--color-teal-darker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  transition: background-color var(--t-base) var(--ease-out);
}

.card-icon svg { width: 26px; height: 26px; }

.card:hover .card-icon { background: var(--color-gold); }

.card-title {
  font-family: var(--font-tight);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-3) 0;
}

.card-body {
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}


/* ---------- 8. Doctors ---------- */

.doctor-grid {
  display: grid;
  /* auto-fit with a tighter min so 4 doctors at desktop stay on one row
     (4 cols of ~250px each), 3 doctors render as 3 wider cols, 6 doctors
     wrap cleanly to 4+2 or 3+3 depending on viewport. Falls back to 2-up
     on tablet and 1-up on mobile via the minmax floor. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 600px) {
  .doctor-grid { max-width: 540px; margin: 0 auto; }
}

.doctor-card {
  background: var(--color-cream-warm);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  border: 1px solid transparent;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.doctor-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-gold-soft);
}

.doctor-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-darker) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--color-cream);
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;          /* clip the photo to the circle */
  box-shadow: var(--shadow-sm);
}

/* If a data-initial is set (no photo), draw the initials. The img wins when present. */
.doctor-avatar[data-initial]:empty::after {
  content: attr(data-initial);
}

.doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* head + shoulders headshots usually want top alignment */
  display: block;
}

/* Per-headshot framing override. Use this modifier when the head sits low in
   the source photo (extra space above) and gets cropped to the bottom of the
   circle. Shifts the visible window downward in the source so the face lifts. */
.doctor-avatar-raise img {
  object-position: center 30%;
}

.doctor-name {
  font-family: var(--font-tight);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-2) 0;
}

.doctor-creds {
  font-size: 0.85rem;
  color: var(--color-gold-deep);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-4) 0;
}

.doctor-bio {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-4) 0;
}

.doctor-bio-personal {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-muted);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--color-line);
  margin-bottom: var(--sp-5);
}

.doctor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-teal-darker);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.doctor-link svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
.doctor-link:hover { color: var(--color-gold-deep); border-bottom-color: var(--color-gold); }
.doctor-link:hover svg { transform: translateX(3px); }


/* ---------- 8b. Captain Clear book feature ---------- */

.book-feature {
  background: var(--color-cream-warm);
}

.book-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-image { max-width: 420px; margin: 0 auto; }
}

.book-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--color-teal-darker);
  margin: 0 0 var(--sp-5) 0;
}

.book-headline em {
  font-style: italic;
  color: var(--color-gold-deep);
}

.book-blurb {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5) 0;
  max-width: 52ch;
}

.book-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

.book-secondary {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.book-secondary:hover {
  color: var(--color-teal-darker);
  border-bottom-color: var(--color-gold);
}

/* Book cover wrap: subtle backdrop + tilt that straightens on hover */
.book-cover-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: visible;
  padding: 0;
  transform: rotate(-2deg);
  transition: transform 600ms var(--ease-out);
  filter: drop-shadow(0 24px 36px rgba(0, 60, 72, 0.18))
          drop-shadow(0 8px 12px rgba(0, 60, 72, 0.12));
}

.book-cover-wrap:hover { transform: rotate(0deg) scale(1.02); }

.book-cover-wrap::before {
  content: '';
  position: absolute;
  inset: -8% -10% -8% -10%;
  background: radial-gradient(ellipse at center, var(--color-gold-soft), transparent 70%);
  opacity: 0.55;
  z-index: -1;
  filter: blur(40px);
}

.book-cover-wrap img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}


/* ---------- 9. Tier grid (who we serve) ---------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
  align-items: stretch;
}

@media (max-width: 980px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

.tier-card {
  background: var(--color-cream-warm);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.tier-card-featured {
  background: var(--color-teal-darker);
  color: var(--color-cream);
  border-color: var(--color-teal-darker);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.tier-card-featured:hover {
  transform: translateY(-12px);
}

.tier-badge {
  position: absolute;
  top: -14px;
  left: clamp(1.75rem, 2.5vw, 2.5rem);
  background: var(--color-gold);
  color: var(--color-teal-darker);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  margin: 0;
}

.tier-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 var(--sp-3) 0;
}

.tier-card-featured .tier-eyebrow { color: var(--color-gold); }

.tier-title {
  font-family: var(--font-tight);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3) 0;
  color: var(--color-teal-darker);
}

.tier-card-featured .tier-title { color: var(--color-cream); }

.tier-price {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5) 0;
  line-height: 1.45;
  font-weight: 500;
}

.tier-card-featured .tier-price { color: var(--color-gold-soft); }

.tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  flex: 1;
}

.tier-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-navy);
  padding-left: 0;
}

.tier-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%231A5970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5l4 4 8-9'/></svg>") center/contain no-repeat;
}

.tier-addon {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-right: 0.4em;
}

.tier-card-featured .tier-list li { color: var(--color-cream); }
.tier-card-featured .tier-list li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23D4A877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5l4 4 8-9'/></svg>");
}

.tier-card-featured .btn-primary {
  background: var(--color-gold);
  color: var(--color-teal-darker);
  border-color: var(--color-gold);
}
.tier-card-featured .btn-primary:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
}

.tier-footnote {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: var(--sp-7) auto 0;
  max-width: 60ch;
  font-style: italic;
}


/* ---------- 10. Instagram feature ---------- */

.ig-grid {
  list-style: none;
  margin: 0 0 var(--sp-7) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

@media (max-width: 880px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-cream-warm);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 60, 72, 0.06);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.ig-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(0, 60, 72, 0.4);
}

.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.ig-tile:hover img {
  transform: scale(1.04);
}

.ig-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 60, 72, 0.78) 0%, rgba(0, 60, 72, 0.0) 45%);
  pointer-events: none;
}

.ig-tile-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.92);
  color: var(--color-teal-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.ig-tile-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.ig-tile:hover .ig-tile-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-gold);
}

.ig-tile-label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color: #FFF;
  font-family: var(--font-tight);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 2px rgba(0, 60, 72, 0.4);
}

.ig-cta {
  text-align: center;
}

.ig-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-ig {
  width: 22px;
  height: 22px;
}

.ig-cta-handle {
  margin: var(--sp-4) 0 0 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}


/* ---------- 11. Location ---------- */

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (max-width: 880px) {
  .location-grid { grid-template-columns: 1fr; }
}

.location-blurb {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-7) 0;
  max-width: 50ch;
}

.location-meta {
  display: grid;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-7) 0;
}

.location-meta div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-line);
}
.location-meta div:last-child { border-bottom: none; padding-bottom: 0; }

.location-meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0;
}

.location-meta dd {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-navy);
  margin: 0;
}

.location-meta dd a {
  color: var(--color-teal-darker);
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--t-fast) var(--ease-out);
}
.location-meta dd a:hover { border-bottom-color: var(--color-gold); }

.location-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}

.location-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s var(--ease-out);
}

.location-image:hover img { transform: scale(1.05); }


/* ---------- 12. Bottom CTA ---------- */

.cta-section {
  background: var(--color-teal-darker);
  color: var(--color-cream);
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative glow in the corner */
.cta-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 168, 119, 0.18), transparent 70%);
  pointer-events: none;
}

.cta-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-cream);
  margin: 0 0 var(--sp-5) 0;
}

.cta-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--color-gold-soft);
  margin: 0 0 var(--sp-7) 0;
}


/* ---------- 13. Footer ---------- */

.footer {
  background: var(--color-cream-warm);
  color: var(--color-navy);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: var(--sp-6);
  border-top: 1px solid var(--color-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--sp-8);
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

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

.footer-logo {
  height: 132px;
  width: auto;
  margin-bottom: var(--sp-5);
}

.footer-tagline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 38ch;
  margin: 0;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 var(--sp-5) 0;
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer-col a {
  font-size: 0.95rem;
  color: var(--color-navy);
  transition: color var(--t-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer-col a:hover { color: var(--color-teal-darker); }

.footer-social a svg {
  width: 18px;
  height: 18px;
  color: var(--color-teal);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.footer-social a:hover svg {
  color: var(--color-gold-deep);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-line);
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

.footer-bottom p { margin: 0; }
.footer-fineprint { max-width: 50ch; text-align: right; }

@media (max-width: 720px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-fineprint { text-align: left; }
}


/* ---------- 14. Scroll-reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: 0ms;
}

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

/* Stagger sibling reveals slightly for a more graceful sweep */
.card-grid .reveal:nth-child(2).is-visible { transition-delay: 80ms; }
.card-grid .reveal:nth-child(3).is-visible { transition-delay: 160ms; }
.card-grid .reveal:nth-child(4).is-visible { transition-delay: 80ms; }
.card-grid .reveal:nth-child(5).is-visible { transition-delay: 160ms; }
.card-grid .reveal:nth-child(6).is-visible { transition-delay: 240ms; }

.tier-grid .reveal:nth-child(2).is-visible { transition-delay: 80ms; }
.tier-grid .reveal:nth-child(3).is-visible { transition-delay: 160ms; }

.ig-grid li:nth-child(2) .ig-tile { transition-delay: 60ms; }
.ig-grid li:nth-child(3) .ig-tile { transition-delay: 120ms; }
.ig-grid li:nth-child(4) .ig-tile { transition-delay: 180ms; }

.doctor-grid .reveal:nth-child(2).is-visible { transition-delay: 80ms; }
.doctor-grid .reveal:nth-child(3).is-visible { transition-delay: 160ms; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-image img, .location-image img { transition: none; }
  /* Hero cycle: lock to first image, no fade animation */
  .hero-image-cycle .cycle-img { opacity: 0; animation: none !important; }
  .hero-image-cycle .cycle-img:first-child { opacity: 1; }
}


/* ---------- 15. Focus visibility (a11y) ---------- */

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 5px; }