/*
Theme Name:   Paragonia Health
Theme URI:    https://www.paragoniahealth.co.nz/
Author:       Paragonia Health
Description:  Custom theme for Paragonia Physiotherapy — a patient-centred physiotherapy clinic. Converted from the studio's static HTML/CSS/JS design.
Version:      1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain:  paragonia
*/

/* ===================================================================
   PHYSEO — Physiotherapy & Wellness
   Design tokens
   =================================================================== */
:root{
  --dark:      #1F3D3F;
  --dark-2:    #1C1C1C;
  --teal:      #33A9B1;
  --teal-soft: #F1F0F0;
  --sage:      #DEE8DE;
  --cream:     #DEE8DE;
  --ink:       #1C1C1C;
  --muted:     #4D4D4D;
  --white:     #FFFFFF;
  --line:      rgba(31,61,63,0.12);

  --serif: "Marcellus", "Georgia", serif;
  --sans:  "Lato", "Helvetica Neue", Arial, sans-serif;

  --curve: 48px 8px 48px 8px;
  --curve-sm: 28px 6px 28px 6px;
  --container: 1180px;

  /* Hero typographic scale */
  --fs-hero-eyebrow: 17px;
  --fs-hero-h1: clamp(38px,4.6vw,60px);
  --fs-hero-body: 17px;
  --fs-hero-btn: 15px;

  /* Shared motion system — one easing curve + one interaction speed everywhere */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
  --dur-motion: .45s;
  --dur-hero: .9s;
  --lift-card: -6px;
  --lift-btn: -3px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--dark);
  margin:0 0 .5em;
  line-height:1.15;
}
p{margin:0 0 1em;color:var(--muted);}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
section{position:relative;}
.eyebrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--teal);
  font-size:17px;
  display:inline-block;
  margin-bottom:14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:15px;
  font-weight:500;
  border-radius:var(--curve-sm);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth), background var(--dur-motion) var(--ease-smooth), color var(--dur-motion) var(--ease-smooth), border-color var(--dur-motion) var(--ease-smooth);
}
.btn:hover{transform:translateY(var(--lift-btn));box-shadow:0 10px 22px rgba(15,30,30,.16);}
.btn:active{transform:translateY(0);}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--dur-motion) var(--ease-smooth);}
.btn:hover svg{transform:translateX(4px);}
.btn-short{display:none;}
.btn-solid{background:var(--teal);color:var(--white);}
.btn-solid:hover{background:var(--dark);}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline-light:hover{background:#fff;color:var(--dark);border-color:#fff;}
.btn-outline-dark{border-color:var(--dark);color:var(--dark);}
.btn-outline-dark:hover{background:var(--dark);color:#fff;}

/* ---------- Header ---------- */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
#site-header.scrolled{
  background:rgba(250,248,243,.96);
  padding:12px 0;
  box-shadow:0 2px 18px rgba(31,61,63,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.logo{flex:none;}
.logo img{height:64px;width:auto;transition:height .3s ease;}
#site-header.scrolled .logo img{height:52px;}
.logo .logo-dark{display:none;}
#site-header.scrolled .logo-light{display:none;}
#site-header.scrolled .logo-dark{display:block;}
nav.main-nav{flex:none;}
nav.main-nav ul{display:flex;gap:26px;}
nav.main-nav a{
  font-size:15px;font-weight:400;color:rgba(255,255,255,.92);
  position:relative;padding:4px 0;white-space:nowrap;
}
#site-header.scrolled nav.main-nav a{color:var(--dark);}
nav.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:currentColor;transition:width .25s ease;
}
nav.main-nav a:hover::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:16px;flex:none;}
.header-phone{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;white-space:nowrap;}
#site-header.scrolled .header-phone{color:var(--dark);}
.header-phone svg{width:18px;height:18px;flex:none;}
.header-phone strong{font-family:var(--serif);font-size:16px;font-weight:400;display:block;white-space:nowrap;}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:12px;margin:-12px;
}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .25s ease, opacity .25s ease, background .25s ease;}
#site-header.scrolled .nav-toggle span{background:var(--dark);}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
#hero{
  min-height:100vh;
  min-height:100lvh;
  background:var(--dark);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:140px 0 100px;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;
  background:var(--dark);
}
/* The source video is a 1:1 montage; a few of its intro/outro clips are 4:3
   footage padded with black letterbox bars top/bottom to fit that square
   canvas. On a wider-than-square screen `cover` crops top/bottom (removing
   those bars), but on a narrower-than-square screen it crops the sides
   instead, leaving the bars fully visible. Scaling the video up slightly
   whenever the viewport is square or portrait pushes those bars out of
   frame for the whole loop, at the cost of an imperceptible extra crop on
   the segments that were already full-bleed. */
@media (max-aspect-ratio: 1/1){
  .hero-bg-photo{transform:scale(1.35);transform-origin:center;}
}
.hero-bg-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(20,40,41,.92) 0%, rgba(20,40,41,.82) 32%, rgba(20,40,41,.55) 58%, rgba(20,40,41,.35) 100%),
    linear-gradient(0deg, rgba(15,30,30,.55), transparent 40%);
}
.hero-content{position:relative;z-index:2;width:100%;}
.hero-slides{position:relative;min-height:300px;transition:min-height .3s ease;}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-hero) var(--ease-smooth), visibility var(--dur-hero);
}
.hero-slide.active{opacity:1;visibility:visible;position:relative;}
.hero-slide .eyebrow{color:var(--teal);font-size:var(--fs-hero-eyebrow);}
.hero-slide h1{
  color:#fff;font-size:var(--fs-hero-h1);max-width:640px;
}
.hero-slide h1 em{font-style:italic;color:var(--teal);}
.hero-slide p{color:rgba(255,255,255,.82);max-width:480px;font-size:var(--fs-hero-body);}
.hero-cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.hero-cta .btn{font-size:var(--fs-hero-btn);}

/* Typewriter cursor */
.typewriter-cursor{
  display:inline-block;width:2px;height:.85em;background:currentColor;
  margin-left:3px;vertical-align:-.08em;
  animation:caretBlink .85s step-end infinite;
}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* Primary "Book An Appointment" CTA — periodic pulse, wherever it appears */
@keyframes ctaPulse{
  0%,88%,100%{box-shadow:0 0 0 0 rgba(51,169,177,.45);}
  94%{box-shadow:0 0 0 14px rgba(51,169,177,0);}
}
.btn-book-pulse{animation:ctaPulse 5s ease-out infinite;}

/* ---------- Intro strip ---------- */
#intro{padding:100px 0;background:var(--cream);}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start;}
.intro-grid h2{font-size:clamp(30px,3.4vw,42px);max-width:480px;}
.intro-copy p{font-size:16px;max-width:480px;}
.intro-stats{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap;}
.intro-stats .stat-num{font-family:var(--serif);font-size:40px;color:var(--dark);display:block;}
.intro-stats .stat-num .count-val{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums;}
.intro-stats .stat-num span{color:var(--teal);}
.intro-stats .stat-label{font-size:13.5px;color:var(--muted);max-width:120px;}

/* ---------- Focus / body-map section ---------- */
#focus{padding:100px 0;background:var(--dark);color:#fff;overflow:hidden;}
#focus h2{color:#fff;}
#focus .eyebrow{color:var(--teal);}
.focus-head{max-width:560px;margin-bottom:60px;}
.focus-head p{color:rgba(255,255,255,.72);}

.hotspot-wrap{
  position:relative;width:100%;max-width:1100px;margin:0 auto;
  aspect-ratio:1100/620;
  display:block;
}
.hotspot-lines{position:absolute;inset:0;width:100%;height:100%;}
.hotspot-figure{
  position:absolute;left:38.5%;top:8%;width:23%;
}
.hotspot-figure svg{width:100%;height:auto;display:block;}
.hotspot-dot{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--teal);border:3px solid var(--dark);
  box-shadow:0 0 0 4px rgba(51,169,177,.35);
  transform:translate(-50%,-50%);z-index:2;
}
.hotspot-dot::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(51,169,177,.6);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.7);opacity:1;}100%{transform:scale(1.7);opacity:0;}}

.hotspot-card{
  position:absolute;width:30.9%;
  background:var(--dark-2);border-radius:var(--curve-sm);
  padding:18px;display:flex;gap:16px;align-items:flex-start;
  box-shadow:0 16px 34px rgba(0,0,0,.28);
  transition:background var(--dur-motion) var(--ease-smooth), transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
}
.hotspot-card:hover{
  background:var(--teal);
  box-shadow:0 20px 40px rgba(51,169,177,.35);
  transform:translateY(var(--lift-card));
}
.hotspot-card:hover h4{color:var(--dark);}
.hotspot-card:hover p{color:rgba(31,61,63,.82);}
.hotspot-card:hover a{color:var(--dark);border-color:rgba(31,61,63,.5);}
.hotspot-photo{
  flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;
}
.hotspot-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:photoBreathe 7s ease-in-out infinite;
  transition:transform .5s ease;
}
.hotspot-card:hover .hotspot-photo img{animation-play-state:paused;transform:scale(1.14);}
.hotspot-card:nth-child(8) .hotspot-photo img{animation-delay:1s;}
.hotspot-card:nth-child(9) .hotspot-photo img{animation-delay:2s;}
.hotspot-card:nth-child(10) .hotspot-photo img{animation-delay:3s;}
.hotspot-card h4{color:#fff;margin:0 0 6px;font-size:17px;font-family:var(--sans);font-weight:700;}
.hotspot-card p{color:rgba(255,255,255,.68);margin:0 0 8px;font-size:13.5px;}
.hotspot-card a{color:var(--teal);font-size:13px;border-bottom:1px solid rgba(51,169,177,.5);}

.focus-list-mobile{display:none;}
.focus-skeleton-mobile{display:none;}
.focus-item-mobile{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.focus-item-mobile:first-child{border-top:1px solid rgba(255,255,255,.14);}
.focus-item-mobile img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;}
.focus-item-mobile h4{color:#fff;margin:0 0 6px;font-size:16px;}
.focus-item-mobile p{color:rgba(255,255,255,.68);margin:0;font-size:13.5px;}

/* ---------- Services ---------- */
#services{padding:110px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  margin-bottom:56px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(30px,3.4vw,42px);max-width:520px;margin:0;}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.service-card{
  padding:0 0 32px;
  border-radius:var(--curve);
  transition:transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
  overflow:hidden;
}
.service-card:hover{transform:translateY(var(--lift-card));box-shadow:0 20px 40px rgba(15,30,30,.18);}
.service-card.dark{background:var(--dark);color:#fff;}
.service-card.dark h3{color:#fff;}
.service-card.dark p{color:rgba(255,255,255,.72);}
.service-card.light{background:var(--teal-soft);}
.service-photo{width:100%;height:170px;overflow:hidden;position:relative;}
.service-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:photoBreathe 7s ease-in-out infinite;
  transition:transform .5s ease;
}
.service-card:hover .service-photo img{animation-play-state:paused;transform:scale(1.14);}
@keyframes photoBreathe{
  0%{transform:scale(1);}
  50%{transform:scale(1.09);}
  100%{transform:scale(1);}
}
.services-grid .service-card:nth-child(2) .service-photo img{animation-delay:1.2s;}
.services-grid .service-card:nth-child(3) .service-photo img{animation-delay:2.4s;}
.services-grid .service-card:nth-child(4) .service-photo img{animation-delay:.6s;}
.services-grid .service-card:nth-child(5) .service-photo img{animation-delay:1.8s;}
.services-grid .service-card:nth-child(6) .service-photo img{animation-delay:3s;}
.service-card .icon{
  width:40px;height:40px;margin:-24px 32px 18px;position:relative;
  background:var(--white);border-radius:12px;padding:8px;
  color:var(--teal);box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.service-card.dark .icon{color:var(--teal);}
.service-card h3{font-size:21px;margin-bottom:10px;padding:0 32px;}
.service-card p{font-size:14.5px;margin-bottom:0;padding:0 32px;}

/* ---------- Approach ---------- */
#approach{padding:110px 0;background:var(--dark);}
#approach h2{color:#fff;}
.approach-grid > div > p{color:rgba(255,255,255,.72);}
.approach-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center;}
.approach-visual{
  border-radius:var(--curve);
  overflow:hidden;background:var(--dark);
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
}
.approach-visual:hover{transform:translateY(var(--lift-card));box-shadow:0 20px 40px rgba(0,0,0,.3);}
.approach-visual svg{width:70%;height:70%;}
.approach-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-motion) var(--ease-smooth);}
.approach-visual:hover .approach-photo{transform:scale(1.06);}
.approach-badge{
  position:absolute;right:-24px;top:32px;background:#fff;
  padding:18px 22px;border-radius:var(--curve-sm);
  box-shadow:0 16px 30px rgba(15,30,30,.18);
  text-align:center;
}
.approach-badge .num{font-family:var(--serif);font-size:30px;color:var(--dark);display:block;}
.approach-badge .lbl{font-size:12px;color:var(--muted);}
.approach-list{margin-top:30px;display:flex;flex-direction:column;gap:20px;}
.approach-item{display:flex;gap:16px;align-items:flex-start;}
.approach-item .check{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.approach-item .check svg{width:13px;height:13px;}
.approach-item h4{margin:0 0 4px;font-size:17px;color:#fff;font-family:var(--sans);font-weight:500;}
.approach-item p{margin:0;font-size:14.5px;}
.assure-title{
  display:block;font-family:var(--serif);font-style:italic;color:var(--teal);
  font-size:17px;margin-bottom:6px;
}

.affiliations{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
  margin-top:64px;padding-top:48px;border-top:1px solid rgba(255,255,255,.15);
}
.affiliation-card{
  display:flex;align-items:center;gap:14px;
  background:#151515;padding:18px 26px;border-radius:var(--curve-sm);
  box-shadow:0 10px 24px rgba(15,30,30,.14);
  transition:background var(--dur-motion) var(--ease-smooth), transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
}
.affiliation-card:hover{background:var(--teal);transform:translateY(var(--lift-card));box-shadow:0 18px 34px rgba(51,169,177,.3);}
.affiliation-icon{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;
}
.affiliation-icon svg{width:20px;height:20px;}
.affiliation-card span:last-child{font-weight:700;color:#fff;font-size:14.5px;}

/* ---------- Team ---------- */
#team{padding:0 0 110px;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.team-card{text-align:center;transition:transform var(--dur-motion) var(--ease-smooth);}
.team-card:hover{transform:translateY(var(--lift-card));}
.team-photo{
  border-radius:var(--curve);overflow:hidden;aspect-ratio:1/1;margin-bottom:22px;
  background:var(--dark);
}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-motion) var(--ease-smooth);}
.team-card:hover .team-photo img{transform:scale(1.06);}
.team-card h4{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--dark);margin:0 0 4px;}
.team-card .team-role{display:block;font-size:14px;font-weight:600;color:var(--teal);margin-bottom:4px;}
.team-card .team-spec{display:block;font-size:13.5px;color:var(--muted);}

/* ---------- Location ---------- */
#location{padding:110px 0;background:var(--dark);}
#location h2{color:#fff;}
#location .section-head p{color:rgba(255,255,255,.72);}
.location-cards{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.location-card{
  background:var(--white);border-radius:var(--curve);overflow:hidden;
  box-shadow:0 14px 30px rgba(15,30,30,.1);
  transition:transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
}
.location-card:hover{transform:translateY(var(--lift-card));box-shadow:0 20px 40px rgba(15,30,30,.16);}
.location-card-info{padding:34px 34px 30px;}
.location-card-info h3{font-size:22px;margin:0 0 8px;}
.location-address{color:var(--dark);font-weight:700;font-size:14.5px;margin:0 0 22px;}
.location-details{margin:0 0 26px;display:flex;flex-direction:column;gap:22px;}
.location-details li{display:flex;gap:16px;align-items:flex-start;}
.loc-icon{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;
}
.loc-icon svg{width:19px;height:19px;}
.location-details h4{margin:0 0 4px;font-size:15px;color:var(--dark);font-family:var(--sans);font-weight:700;}
.location-details p{margin:0;font-size:14px;}
.location-map{aspect-ratio:16/10;background:var(--dark);}
.location-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15);}

/* ---------- Career ---------- */
#career{padding:110px 0;}
.career-head{display:block;text-align:center;max-width:640px;margin:0 auto 56px;}
.career-head .eyebrow{display:block;}
.career-head h2{max-width:none;}
.career-head p{margin-top:14px;}
.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.career-card{
  text-align:center;padding:38px 26px;border-radius:var(--curve);
  background:var(--dark);box-shadow:0 10px 26px rgba(15,30,30,.14);
  transition:transform var(--dur-motion) var(--ease-smooth), box-shadow var(--dur-motion) var(--ease-smooth);
}
.career-card:hover{transform:translateY(var(--lift-card));box-shadow:0 18px 36px rgba(15,30,30,.2);}
.career-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 18px;
  background:rgba(255,255,255,.12);color:var(--teal);display:flex;align-items:center;justify-content:center;
}
.career-icon svg{width:24px;height:24px;}
.career-card h4{font-size:17px;margin:0 0 8px;color:#fff;}
.career-card p{margin:0;font-size:14.5px;color:rgba(255,255,255,.72);}
.career-card:nth-child(2){background:var(--white);box-shadow:0 10px 26px rgba(15,30,30,.08);}
.career-card:nth-child(2) .career-icon{background:var(--teal-soft);color:var(--teal);}
.career-card:nth-child(2) h4{color:var(--dark);}
.career-card:nth-child(2) p{color:var(--muted);}
.career-apply{
  margin-top:56px;background:var(--dark);border-radius:var(--curve);
  padding:56px 40px;text-align:center;
}
.career-apply h3{color:#fff;font-size:clamp(24px,2.6vw,30px);margin:0 0 14px;}
.career-apply p{color:rgba(255,255,255,.72);max-width:540px;margin:0 auto 30px;font-size:15px;}
.career-apply .career-email{gap:10px;}
.career-apply .career-email svg{width:17px;height:17px;}

/* ---------- CTA banner ---------- */
#cta-band{
  margin:0 32px 0;
  border-radius:var(--curve);
  background:var(--dark);
  padding:70px 60px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
#cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%, rgba(51,169,177,.25), transparent 50%);
}
#cta-band h2{color:#fff;margin:0;max-width:480px;font-size:clamp(26px,3vw,36px);position:relative;}
#cta-band .cta-actions{position:relative;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:rgba(255,255,255,.75);padding:80px 0 0;margin-top:90px;position:relative;overflow:hidden;}
.footer-grid{padding-top:0;}
.footer-grid-4{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand img{
  height:82px;margin-bottom:22px;
  filter:drop-shadow(0 6px 16px rgba(51,169,177,.4)) brightness(1.08) contrast(1.05);
}
.footer-brand p{color:rgba(255,255,255,.6);font-size:14px;max-width:280px;}
.footer-col h5{color:#fff;font-family:var(--sans);font-weight:500;font-size:15px;margin-bottom:20px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{font-size:14.5px;color:rgba(255,255,255,.68);}
.footer-col ul li a:hover{color:var(--teal);}
.footer-contact li{display:flex;gap:12px;font-size:14px;margin-bottom:18px;align-items:center;}
.contact-icon{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.contact-icon svg{width:15px;height:15px;color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;padding:26px 0;font-size:13px;color:rgba(255,255,255,.5);
  flex-wrap:wrap;gap:10px;
}

/* ---------- Responsive ---------- */

/* ----- Tablets (iPad portrait, big phones landscape) ----- */
@media (max-width:1080px){
  .header-phone{display:none;}
  .nav-toggle{display:block;}

  /* Mobile/tablet dropdown menu — a single `body.nav-open` class is the only
     source of truth for open/closed, so it can never get out of sync with
     stray inline styles or a desynced JS flag. */
  nav.main-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:#1F3D3F;
    padding:10px 32px 20px;
    max-height:calc(100svh - 84px);overflow-y:auto;
    z-index:2;
  }
  body.nav-open nav.main-nav{display:block;}
  body.nav-open{overflow:hidden;}
  body.nav-open::after{
    content:"";position:fixed;inset:0;
    background:rgba(15,30,30,.45);z-index:90;
  }
  .intro-grid, .approach-grid{grid-template-columns:1fr;gap:48px;}
  .location-cards{grid-template-columns:1fr;gap:28px;}
  .career-grid{grid-template-columns:repeat(2,1fr);}
  .hotspot-wrap{display:none;}
  .focus-list-mobile{display:block;}
  .focus-skeleton-mobile{
    display:block;max-width:170px;margin:0 auto 36px;
  }
  .focus-skeleton-mobile svg{width:100%;height:auto;display:block;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .footer-grid-4{grid-template-columns:1fr 1fr;}

  .logo img{height:52px;}
  #site-header.scrolled .logo img{height:44px;}

  #intro,#focus,#services,#approach,#location,#career{padding:70px 0;}
  #team{padding:0 0 70px;}
  footer{padding-top:60px;margin-top:60px;}

  /* mobile dropdown menu styling — the dropdown itself is always a solid
     dark panel, so its link text must always stay light, regardless of
     whether the header bar behind it has gone into its light "scrolled"
     state or the page uses the permanently-light header (booking.html).
     Without this, scrolling before opening the menu made the titles render
     dark-on-dark and disappear. */
  .main-nav ul{flex-direction:column;gap:0;}
  .main-nav ul li{width:100%;}
  .main-nav ul li a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.1);}
  body.light-header nav.main-nav a,
  #site-header.scrolled nav.main-nav a{color:rgba(255,255,255,.92);}
}

/* ----- Small tablets / large phones ----- */
@media (max-width:768px){
  #hero{padding:110px 0 60px;}
  .hero-slide h1{font-size:clamp(30px,6.4vw,42px);}
  .hero-slide p{font-size:15.5px;}
  .hero-cta{margin-top:26px;}
  .footer-brand img{height:64px;}
}

/* ----- Phones ----- */
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .header-inner{gap:10px;}
  .btn{padding:12px 20px;font-size:14px;}
  .services-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto;}
  .career-grid{grid-template-columns:1fr;}
  .footer-grid-4{grid-template-columns:1fr;}
  #cta-band{padding:44px 26px;margin:0 20px;}
  #cta-band h2{font-size:26px;}
  .approach-badge{right:0;}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .intro-stats{gap:26px;}
  .footer-bottom{flex-direction:column;text-align:center;gap:6px;}
  .affiliations{gap:14px;margin-top:44px;padding-top:36px;}
  .affiliation-card{flex:1 1 100%;justify-content:center;}
  .career-apply{padding:40px 24px;}
  .career-email{white-space:normal;text-align:center;}
}

/* ----- Small phones ----- */
@media (max-width:420px){
  .hero-slide h1{font-size:clamp(26px,8vw,32px);}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  .logo img{height:38px;}
  .header-actions{gap:8px;}
  .header-actions .btn{padding:10px 14px;font-size:13px;}
  .btn-full{display:none;}
  .btn-short{display:inline;}
  #cta-band .cta-actions{flex-direction:column;align-items:stretch;}
  #cta-band .cta-actions .btn{justify-content:center;}
}

/* ---------- Light header (for inner pages like booking.html) ---------- */
body.light-header #site-header{
  background:rgba(250,248,243,.96);
  padding:12px 0;
  box-shadow:0 2px 18px rgba(31,61,63,.08);
}
body.light-header .logo img{height:52px;}
body.light-header nav.main-nav a{color:var(--dark);}
body.light-header .header-phone{color:var(--dark);}
body.light-header .logo-light{display:none;}
body.light-header .logo-dark{display:block;}
body.light-header .nav-toggle span{background:var(--dark);}

/* ---------- Booking page ---------- */
.booking-hero{padding:170px 0 110px;background:var(--cream);}
.booking-wrap{max-width:900px;margin:0 auto;text-align:center;}
.booking-wrap h1{font-size:clamp(32px,4vw,46px);margin:10px 0 18px;}
.booking-note{margin:0 0 4px;font-size:15px;}
.booking-note strong{color:var(--dark);}
.booking-embed{
  margin-top:36px;border-radius:var(--curve);overflow:hidden;
  box-shadow:0 20px 44px rgba(15,30,30,.14);background:#fff;
  height:750px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.booking-embed iframe{width:100%;height:100%;display:block;border:0;}
.price-list{margin-top:64px;text-align:left;}
.price-list h3{text-align:center;font-size:24px;margin:0 0 16px;}
.price-banner{
  display:block;text-align:center;color:#C00000;font-weight:700;font-size:14px;
  margin-bottom:22px;
}
.price-grid{margin-top:44px;text-align:left;}
.price-tile{
  position:relative;overflow:visible;padding-top:34px;
  min-height:150px;display:flex;flex-direction:column;justify-content:center;
}
.price-tile h3{padding-top:0;margin-bottom:0;}
.price-badge{
  position:absolute;top:-31px;right:20px;z-index:3;
  width:62px;height:62px;border-radius:50%;
  background:var(--teal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:800;font-size:16px;line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  animation:priceBadgePulse 5s ease-out infinite;
}
/* Keeps the badge's resting drop-shadow intact and layers a ring pulse on top,
   rather than replacing the shadow outright for the whole animation cycle. */
@keyframes priceBadgePulse{
  0%,88%,100%{box-shadow:0 8px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(51,169,177,.5);}
  94%{box-shadow:0 8px 18px rgba(0,0,0,.28), 0 0 0 12px rgba(51,169,177,0);}
}
.price-tile:nth-child(1) .price-badge{animation-delay:0s;}
.price-tile:nth-child(2) .price-badge{animation-delay:.15s;}
.price-tile:nth-child(3) .price-badge{animation-delay:.3s;}
.price-tile:nth-child(4) .price-badge{animation-delay:.45s;}
.price-tile:nth-child(5) .price-badge{animation-delay:.6s;}
.price-tile:nth-child(6) .price-badge{animation-delay:.75s;}
.price-tile:nth-child(7) .price-badge{animation-delay:.9s;}
.price-badge small{font-size:9px;font-weight:700;letter-spacing:.03em;margin-top:2px;color:rgba(255,255,255,.85);}
.price-badge.price-badge-text{font-size:13px;}
.price-badge.price-badge-text small{font-size:8px;}
.booking-contact-line{margin-top:22px;text-align:center;font-weight:600;}
.booking-contact-line a{color:var(--teal);}
@media (max-width:640px){
  .booking-hero{padding:140px 0 70px;}
  .booking-embed{height:600px;}
  .price-list{margin-top:44px;}
  .price-grid{margin-top:40px;}
  .price-tile{min-height:120px;padding:26px 20px 24px;}
  .price-tile h3{padding:0;font-size:18px;}
  .price-badge{width:52px;height:52px;top:-26px;right:16px;font-size:14px;}
  .price-badge small{font-size:8px;}
  .price-banner{font-size:13px;}
  .booking-contact-line{font-size:14px;}
}

@media (max-width:420px){
  .price-tile{padding:24px 16px 20px;}
  .price-badge{right:12px;}
}