/* ============================================================
   NORWICH NEURO PHYSIO & PILATES — SHARED STYLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --ink:         #1a1f2e;
  --cream:       #f8f5f0;
  --sage:        #5a7a5c;
  --sage-light:  #e8f0e8;
  --teal:        #2d6a6a;
  --teal-mid:    #3d8a8a;
  --teal-light:  #e0eeee;
  --warm:        #c8a86b;
  --warm-light:  #faf3e8;
  --white:       #ffffff;
  --border:      rgba(26,31,46,0.10);
  --border-dark: rgba(255,255,255,0.10);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans', sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
}

/* ---- SKIP LINK ---- */
.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  background:var(--teal);
  color:white;
  padding:12px 24px;
  border-radius:0 0 4px 4px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  z-index:200;
  transition:top .2s;
}
.skip-link:focus {
  top:0;
}

/* ---- NAV ---- */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 64px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(248,245,240,0.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
nav.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.08); }

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: 56px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
.nav-links a {
  text-decoration:none; color:var(--ink);
  font-size:13px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
  opacity:.65; transition:opacity .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active { opacity:1; color:var(--teal); }

.nav-cta {
  background:var(--teal) !important; color:white !important;
  opacity:1 !important; padding:10px 22px; border-radius:2px;
  transition:background .2s !important;
}
.nav-cta:hover { background:var(--teal-mid) !important; }

/* ---- MOBILE HAMBURGER ---- */
.nav-hamburger {
  display:none;
  background:none; border:none;
  cursor:pointer; padding:8px;
  z-index:110;
  flex-direction:column;
  justify-content:center;
}
.nav-hamburger span {
  display:block; width:24px; height:2px;
  background:var(--ink); margin:5px 0;
  transition:transform .3s, opacity .3s;
}

/* ---- MOBILE MENU OVERLAY ---- */
.mobile-menu {
  display:none;
  position:fixed; inset:0;
  background:var(--ink);
  z-index:105;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mobile-menu.open {
  display:flex;
}
.mobile-menu a {
  text-decoration:none;
  color:rgba(255,255,255,.85);
  font-size:18px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:16px 32px;
  transition:color .2s;
}
.mobile-menu a:hover,
.mobile-menu a.active { color:var(--warm); }
.mobile-menu .mobile-cta {
  margin-top:16px;
  background:var(--teal);
  border-radius:2px;
  padding:16px 40px;
  color:white;
}
.mobile-menu .mobile-cta:hover { background:var(--teal-mid); }

.mobile-close {
  position:absolute; top:20px; right:24px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.7);
  font-size:28px;
  padding:8px;
  line-height:1;
  transition:color .2s;
}
.mobile-close:hover { color:white; }

/* ---- PAGE HEADER (inner pages) ---- */
.page-header {
  padding: 140px 64px 80px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 50%, rgba(45,106,106,.35) 0%, transparent 60%),
              radial-gradient(ellipse at 10% 80%, rgba(200,168,107,.12) 0%, transparent 50%);
}
.page-header-inner { position:relative; z-index:2; max-width:760px; }

.page-header .eyebrow {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm); font-weight:500; margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
}
.page-header .eyebrow::before {
  content:''; display:block; width:30px; height:1px; background:var(--warm);
}
.page-header h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(38px,5vw,64px); font-weight:300; line-height:1.1;
  color:white; margin-bottom:20px;
}
.page-header h1 em { font-style:italic; color:var(--warm); }
.page-header p {
  font-size:17px; font-weight:300; line-height:1.75;
  color:rgba(255,255,255,.6); max-width:560px;
}

/* ---- SHARED TYPOGRAPHY UTILITIES ---- */
.eyebrow {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm); font-weight:500; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before {
  content:''; display:block; width:30px; height:1px; background:var(--warm);
}

.section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,3.5vw,50px); font-weight:300; line-height:1.15;
  color:var(--ink); max-width:640px;
}
.section-title em { font-style:italic; color:var(--teal); }
.section-title.light { color:white; }
.section-title.light em { color:var(--warm); }

.lead {
  margin-top:18px; font-size:17px; font-weight:300;
  color:rgba(26,31,46,.65); max-width:560px; line-height:1.75;
}
.lead.light { color:rgba(255,255,255,.55); }

/* ---- BUTTONS ---- */
.btn-primary {
  display:inline-block;
  background:var(--teal); color:white;
  padding:16px 36px; border-radius:2px; border:none;
  font-family:'DM Sans',sans-serif;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn-primary:hover { background:var(--teal-mid); transform:translateY(-1px); }

.btn-outline {
  display:inline-block;
  border:1.5px solid var(--teal); color:var(--teal);
  padding:15px 36px; border-radius:2px;
  font-family:'DM Sans',sans-serif;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  transition:all .2s;
}
.btn-outline:hover { background:var(--teal); color:white; }

.btn-outline-light {
  display:inline-block;
  border:1.5px solid rgba(255,255,255,.4); color:white;
  padding:15px 36px; border-radius:2px;
  font-family:'DM Sans',sans-serif;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  transition:all .2s;
}
.btn-outline-light:hover { background:rgba(255,255,255,.1); border-color:white; }

/* ---- CARDS ---- */
.card {
  background:white; border-radius:4px;
  transition:transform .3s, box-shadow .3s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.09); }

/* ---- FOOTER ---- */
footer {
  background:var(--ink);
  padding:56px 64px 40px;
}
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:40px; border-bottom:1px solid var(--border-dark);
  flex-wrap:wrap; gap:40px;
}
.footer-brand {
  font-family:'Cormorant Garamond',serif;
  font-size:24px; font-weight:400; color:white;
}
.footer-brand span { color:var(--warm); }
.footer-tagline {
  margin-top:8px; font-size:13px;
  color:rgba(255,255,255,.4); font-weight:300;
}
.footer-nav { display:flex; gap:32px; flex-wrap:wrap; align-items:center; }
.footer-nav a {
  color:rgba(255,255,255,.5); text-decoration:none;
  font-size:13px; letter-spacing:.06em;
  transition:color .2s;
}
.footer-nav a:hover { color:white; }
.footer-bottom {
  margin-top:32px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.3); }
.footer-bottom a { color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s; }
.footer-bottom a:hover { color:rgba(255,255,255,.7); }
.footer-reg { display:flex; gap:12px; flex-wrap:wrap; }
.reg-badge {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warm); opacity:.8;
  border:1px solid rgba(200,168,107,.3);
  padding:5px 12px; border-radius:2px;
}

/* ---- ANIMATIONS ---- */
.fade-up {
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity:1; transform:none; }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .fade-up { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) {
  nav { padding:16px 32px; }
  .page-header { padding:120px 40px 64px; }
  footer { padding:48px 40px 32px; }
}
@media (max-width:640px) {
  nav { padding:14px 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .page-header { padding:100px 24px 56px; }
  footer { padding:40px 24px 28px; }
  .footer-top { flex-direction:column; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}