/* ============================================================
   STOUR HOME PHYSIO: REPLICA STYLESHEET
   Fonts: Cormorant Garamond (headings), Raleway (body/nav)
   Palette:
     Navy dark:    #1a2a3a   (nav bg, overlays, dark sections)
     Navy mid:     #2c3e55   (footer bg)
     Gold accent:  #c9a96e   (buttons, borders, highlights)
     Cream/off-wh: #f8f5f0   (light section bg)
     White:        #ffffff
     Body text:    #333333
     Muted text:   #666666
   ============================================================ */

/* ---- SKIP TO CONTENT ---- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: #1a2a3a;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid #c9a96e;
  outline-offset: 2px;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  background: #ffffff;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Every <img> is wrapped in a <picture> to offer WebP ahead of the JPEG.
   display:contents removes the wrapper's own box from layout entirely, so the
   img continues to lay out exactly as if it were still a direct child of its
   original parent — this matters for the absolutely positioned .hero-bg /
   .page-hero-bg images and for the floated .about-image. */
picture {
  display: contents;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- SITE HEADER (brand bar) ---- */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e8e0d5;
  padding: 16px 0;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
}

.header-logo-col {
  display: flex;
  align-items: center;
}

.header-logo {
  width: 200px;
  height: auto;
  display: block;
  filter: brightness(0);
  opacity: 0.75;
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  line-height: 1;
  letter-spacing: 0.02em;
}

.header-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #888888;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 7px;
}

.header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.header-contact-line {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: #555555;
}

.header-contact-line a {
  color: #555555;
  transition: color 0.2s ease;
}

.header-contact-line a:hover {
  color: #c9a96e;
}

/* ---- NAVIGATION ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e0d5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #333333;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #c9a96e;
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #c9a96e;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.btn-book {
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 24px;
  background-color: #c9a96e;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #c9a96e;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-book:hover {
  background-color: #b8945a;
  border-color: #b8945a;
}

/* ---- HERO SECTION ---- */
.hero {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 44px 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 40, 0.42);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  color: #ffffff;
}

.hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  text-wrap: balance;
}

/* Supporting line under the headline: quieter than the H1 so the hero reads as
   one idea plus a note, not two headlines. */
.hero-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 auto 26px;
}

/* Two stacked hero facts: prices, then availability. Same treatment, so
   they read as one block; only the spacing below each differs. */
.hero-tagline,
.hero-availability {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8d9c0;
}

.hero-tagline {
  margin-bottom: 10px;
}

.hero-availability {
  margin-bottom: 34px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Quiet reassurance under the hero buttons for visitors who aren't ready to
   book cold — the buttons themselves stay clean. */
.hero-reassure {
  margin-top: 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.hero-reassure a {
  color: #e8d9c0;
  white-space: nowrap;
  border-bottom: 1px solid rgba(232, 217, 192, 0.5);
  transition: border-color 0.2s ease;
}

.hero-reassure a:hover {
  border-bottom-color: #e8d9c0;
}

/* ---- BUTTON STYLES ---- */
.btn-primary {
  display: inline-block;
  padding: 13px 32px;
  background-color: #c9a96e;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid #c9a96e;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary:hover {
  background-color: #b8945a;
  border-color: #b8945a;
}

.btn-secondary {
  display: inline-block;
  padding: 13px 32px;
  background-color: transparent;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,0.7);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: #ffffff;
}

.btn-secondary-light {
  display: inline-block;
  padding: 13px 32px;
  background-color: transparent;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,0.7);
  transition: background-color 0.2s ease;
}

.btn-secondary-light:hover {
  background-color: rgba(255,255,255,0.15);
}

.btn-outline {
  display: inline-block;
  padding: 11px 28px;
  background-color: transparent;
  color: #1a2a3a;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #1a2a3a;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background-color: #1a2a3a;
  color: #ffffff;
}

/* ---- ABOUT INTRO SECTION (Homepage) ---- */
.about-intro {
  padding: 90px 0;
  background-color: #f8f5f0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-intro .two-col {
  grid-template-columns: 400px 1fr;
  align-items: start;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

.about-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.about-text h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #c9a96e;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.about-text p {
  font-size: 16px;
  color: #555555;
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-text .btn-outline {
  margin-top: 12px;
}

/* ---- SERVICES STRIP ---- */
.services-strip {
  padding: 60px 0;
  background-color: #ffffff;
  text-align: center;
}

.services-strip h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 48px;
  letter-spacing: 0.01em;
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.service-card {
  display: block;
  background: #f8f5f0;
  padding: 36px 28px;
  border-top: 3px solid #c9a96e;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(26, 42, 58, 0.10);
}

.service-card:hover h3 {
  color: #b8945a;
}

/* ---- AREAS COVERED (home page) ---- */
/* Cream, sitting between the two dark sections (.features, .cta-strip) to
   break up the rhythm. Villages are grouped by direction rather than listed
   flat, which reads as coverage rather than a keyword run. */
.areas-covered {
  padding: 80px 0;
  background-color: #f8f5f0;
  text-align: center;
}

/* On /about this section sits between the navy callout and the cream
   credentials, so it takes a white ground to keep the alternation reading
   navy -> white -> cream rather than clashing with either neighbour. */
.areas-covered.areas-covered-alt {
  background-color: #ffffff;
}

.areas-covered h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.areas-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  color: #555555;
  line-height: 1.85;
}

.areas-ask {
  margin-top: 48px;
  color: #555555;
}

.areas-ask a {
  color: #b8945a;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.areas-ask a:hover {
  border-bottom-color: #c9a96e;
}

.service-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 12px;
}

.service-card p {
  font-size: 15px;
  color: #666666;
  line-height: 1.75;
}

.service-card-more {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b8945a;
}

.service-card:hover .service-card-more {
  color: #1a2a3a;
}

/* ---- FEATURES / WHY CHOOSE US ---- */
.features {
  padding: 70px 0;
  background-color: #1a2a3a;
  color: #ffffff;
}

.features h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-bottom: 56px;
  letter-spacing: 0.01em;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}

.feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature-body {
  flex: 1;
  min-width: 0;
}

.feature-body a {
  color: #e8d9c0;
  border-bottom: 1px solid rgba(232, 217, 192, 0.5);
  transition: border-color 0.2s ease;
}

.feature-body a:hover { border-bottom-color: #e8d9c0; }

.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #c9a96e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

.feature-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: #e8d9c0;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.75;
}

/* ---- BLOG PREVIEW ---- */

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  position: relative;
  height: 280px;
  background-color: #1a2a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 40, 0.65);
  z-index: 1;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 32px;
}

.page-hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.page-hero-content p {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d9c0;
}

/* ---- ABOUT MAIN (About page) ---- */
.about-main {
  padding: 90px 0;
  background: #ffffff;
}

.about-main-cols {
  grid-template-columns: 1fr 480px;
  gap: 64px;
}

.about-main-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 8px;
}

.about-main-text h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 28px;
}

.about-main-text p {
  font-size: 16px;
  color: #555555;
  line-height: 1.85;
  margin-bottom: 18px;
}

.about-main-image img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  object-position: top center;
}

/* ---- CREDENTIALS (About page) ---- */
.credentials {
  padding: 80px 0;
  background: #f8f5f0;
}

/* Matches the home page's "Why Choose..." heading, but dark rather than white
   because the credentials section sits on cream, not navy. */
.credentials h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 56px;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}

.credential-item {
  border-left: 3px solid #c9a96e;
  padding-left: 24px;
}

.credential-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 10px;
}

.credential-item p {
  font-size: 15px;
  color: #666666;
  line-height: 1.75;
}

.credential-item a {
  color: #b8945a;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.credential-item a:hover { border-bottom-color: #c9a96e; }

/* ---- CTA STRIP ---- */
/* ---- HOME-VISIT CALLOUT (About + Services) ---- */
/* A quiet statement, not a call to action: deeper navy than the CTA strips
   (#1a2a3a vs #2c3e55), a single gold rule, and no buttons, so it reads as an
   important note rather than another "Book Visit" band. */
.callout-visit {
  padding: 72px 0;
  background-color: #1a2a3a;
  text-align: center;
}

.callout-visit-inner {
  max-width: 720px;
  margin: 0 auto;
}

.callout-visit-inner::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #c9a96e;
  margin: 0 auto 26px;
}

.callout-visit h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 16px;
  text-wrap: balance;
}

.callout-visit p {
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: #d5dbe2;
  margin: 0;
}

/* ---- TESTIMONIAL (home page) ---- */
.testimonial {
  padding: 84px 0;
  background-color: #ffffff;
  text-align: center;
}

.testimonial-quote {
  max-width: 780px;
  margin: 0 auto;
}

.testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 74px;
  line-height: 0.5;
  color: #c9a96e;
  margin-bottom: 22px;
}

.testimonial-quote blockquote {
  margin: 0;
}

.testimonial-quote blockquote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px;
  font-style: italic;
  line-height: 1.5;
  color: #1a2a3a;
  margin: 0 0 26px;
}

/* Letter-spacing puts a trailing gap after the fifth star, which would
   throw the centring off by half of it. The negative right margin takes
   that gap back so the row centres on the quote above it. */
.testimonial-rating {
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.18em;
  margin: 0 0 14px;
  margin-right: -0.18em;
  color: #c9a96e;
}

.testimonial-quote figcaption {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a96e;
}

.testimonial-quote figcaption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .testimonial-quote blockquote p { font-size: 23px; }
}

.cta-strip {
  padding: 80px 0;
  background: #2c3e55;
  text-align: center;
}

.cta-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: #e8d9c0;
  margin-bottom: 36px;
  letter-spacing: 0.01em;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* ---- PRICING (Services page) ---- */
.pricing {
  padding: 60px 0;
  background: #ffffff;
  text-align: center;
}

.pricing h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 50px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto 0;
}

.pricing-card {
  border: 1px solid #e0d8ce;
  padding: 40px 36px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pricing-card-header {
  border-bottom: 1px solid #e0d8ce;
  padding-bottom: 20px;
}

.pricing-card-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 12px;
}

.price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: #c9a96e;
  line-height: 1;
  margin-bottom: 6px;
}

.duration {
  font-size: 14px;
  color: #888888;
  font-style: italic;
}

.pricing-list {
  list-style: none;
  flex: 1;
}

.pricing-list li {
  padding: 7px 0;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #f0ebe3;
  padding-left: 18px;
  position: relative;
}

.pricing-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #c9a96e;
}

/* ---- SERVICES DETAIL (Services page) ---- */
.services-detail {
  padding: 60px 0;
  background: #f8f5f0;
}

.services-group {
  margin-bottom: 64px;
}

.services-group:last-child {
  margin-bottom: 0;
}

.services-group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 24px;
}

.service-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.service-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.can-help-blocks .service-block {
  background: #ffffff;
  color: #1a2a3a;
  border-left: 3px solid #4a8c6e;
}

.can-help-blocks .service-block::before {
  content: '✓';
  color: #4a8c6e;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.cannot-help-blocks .service-block {
  background: #eceae6;
  color: #777777;
}

.cannot-help-blocks .service-block::before {
  content: '✕';
  color: #c05050;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

/* "Can help with" items that have a matching article link to it */
.can-help-blocks a.service-block {
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.can-help-blocks a.service-block::after {
  content: '\2192';
  margin-left: auto;
  padding-left: 12px;
  color: #b8945a;
  font-weight: 700;
  flex-shrink: 0;
}

.can-help-blocks a.service-block:hover {
  background: #f8f5f0;
  border-left-color: #c9a96e;
}

/* ---- CONTACT PAGE ---- */
.contact-hero {
  background-color: #2c3e55;
}

.contact-main {
  padding: 50px 0;
  background: #ffffff;
}

.contact-two-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}

.contact-info-col h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 16px;
}

.contact-info-col > p {
  font-size: 15px;
  color: #555555;
  margin-bottom: 36px;
  line-height: 1.75;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-icon {
  font-size: 22px;
  color: #c9a96e;
  margin-top: 2px;
  flex-shrink: 0;
}

.contact-detail strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a2a3a;
  margin-bottom: 4px;
}

.contact-detail a {
  font-size: 16px;
  color: #c9a96e;
  transition: color 0.2s ease;
}

.contact-detail a:hover {
  color: #b8945a;
}

.contact-practitioner {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e8e0d5;
}

.contact-practitioner p {
  font-size: 14px;
  color: #555555;
  line-height: 1.7;
}

.service-area {
  margin-top: 16px;
}

.service-area p {
  font-size: 13px;
  color: #888888;
  font-style: italic;
  line-height: 1.7;
}

.contact-form-col h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row.two-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555555;
}

.form-group input,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid #d8d0c6;
  background: #faf8f5;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #333333;
  outline: none;
  transition: border-color 0.2s ease;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #c9a96e;
  background: #ffffff;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #aaaaaa;
}

.contact-form .btn-primary {
  align-self: flex-start;
  cursor: pointer;
  border: none;
  font-family: 'Raleway', sans-serif;
}

/* ---- BLOG LISTING ---- */

/* ---- FOOTER ---- */
.footer {
  background-color: #1a2a3a;
  color: #ffffff;
  padding: 60px 0 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo img {
  width: 160px;
  height: auto;
  opacity: 0.85;
}

.footer-contact h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 14px;
}

.footer-contact p {
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  line-height: 1.8;
  margin-bottom: 6px;
}

.footer-contact a {
  color: rgba(255,255,255,0.92);
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: #c9a96e;
}

.footer-copy {
  padding: 20px 0;
  text-align: center;
}

.footer-copy p {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* ---- MOBILE NAV TOGGLE ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a2a3a;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .nav-links {
    gap: 18px;
  }

  .features-grid {
    gap: 32px 40px;
  }

  .about-main-cols {
    grid-template-columns: 1fr 400px;
  }
}

@media (max-width: 900px) {
  .header-inner {
    grid-template-columns: auto 1fr;
  }

  .header-contact {
    display: none;
  }

  .header-brand {
    align-items: flex-start;
    text-align: left;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #e8e0d5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 999;
    padding: 8px 0;
  }

  .nav-links.nav-open {
    display: flex;
  }

  .nav-links li a {
    display: block;
    padding: 14px 32px;
    border-bottom: 1px solid #f0ebe3;
  }

  .hero-content h1 {
    font-size: 32px;
  }

  .two-col,
  .about-main-cols,
  .contact-two-col {
    grid-template-columns: 1fr;
  }

  .service-blocks {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-cards {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .credentials-grid {
    grid-template-columns: 1fr;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
  }



  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-main-image img {
    height: auto;
  }

  .about-intro .two-col {
    display: block;
  }

  .about-intro .about-image {
    float: left;
    width: 40%;
    margin: 0 28px 16px 0;
  }

  .about-image img {
    height: auto;
  }
}

@media (max-width: 750px) {
  .about-intro .about-image {
    display: none;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 20px;
  }

  .header-inner {
    padding: 0 20px;
  }

  .site-header {
    padding: 18px 0;
  }

  .header-inner {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }

  .header-logo {
    width: 110px;
    height: auto;
  }

  .header-name {
    font-size: 22px;
  }

  .header-sub {
    display: none;
  }

  .nav-inner {
    padding: 0 20px;
  }

  /* A fixed height here (clamped up to the base min-height of 460px) cut
     the bottom off the hero on narrow phones: the headline wraps to three
     or four lines and the reassurance line fell outside the box, hidden by
     the overflow that the background image needs. A minimum instead, so
     the hero grows to whatever the content needs. */
  .hero {
    min-height: 380px;
  }

  .hero-content h1 {
    font-size: 26px;
  }

  .page-hero-content h1 {
    font-size: 38px;
  }

  .form-row.two-inputs {
    grid-template-columns: 1fr;
  }

  .service-blocks {
    grid-template-columns: 1fr;
  }
}

/* ---- ARTICLES LISTING ---- */
.articles-listing {
  padding: 60px 0;
  background: #f8f5f0;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 48px;
}

.article-card {
  background: #ffffff;
  border: 1px solid #e8e0d5;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease;
}

.article-card:hover {
  box-shadow: 0 6px 24px rgba(26, 42, 58, 0.1);
}

.article-card-image-link {
  display: block;
  overflow: hidden;
}

.article-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.article-card-image-link:hover .article-card-image {
  transform: scale(1.04);
}

.article-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card-date {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #c9a96e;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.article-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 12px;
  line-height: 1.3;
}

.article-card h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-card h2 a:hover {
  color: #c9a96e;
}

.article-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #555555;
  line-height: 1.75;
  margin-bottom: 24px;
}

.article-card .btn-outline {
  margin-top: auto;
}

/* ---- SINGLE ARTICLE PAGE ---- */
.article-hero .page-hero-content h1 {
  font-size: 42px;
}

.article-date-hero {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #c9a96e;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.article-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}

.article-back {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #c9a96e;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 48px;
  transition: color 0.2s ease;
}

.article-back:hover {
  color: #1a2a3a;
}

.article-body p {
  font-size: 16px;
  color: #333333;
  line-height: 1.85;
  margin-bottom: 24px;
}

.article-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  color: #1a2a3a;
  margin: 40px 0 16px;
}

.article-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  font-weight: 500;
  color: #1a2a3a;
  margin: 32px 0 12px;
}

.article-body ul {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
}

.article-body ul li {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: #333333;
  line-height: 1.7;
  padding: 6px 0 6px 22px;
  position: relative;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 2px;
  background: #c9a96e;
}

.article-figure {
  margin: 40px 0;
  text-align: center;
}

/* ---- LONG-FORM ARTICLE COMPONENTS ---- */
.article-lead {
  font-size: 19px;
  color: #2c3e55;
  line-height: 1.75;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

.article-figure figcaption {
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  font-style: italic;
  color: #8a8a8a;
  line-height: 1.5;
  margin-top: 10px;
}

.article-callout {
  background: #f8f5f0;
  border-left: 3px solid #c9a96e;
  padding: 20px 26px;
  margin: 34px 0;
  border-radius: 0 5px 5px 0;
}

.article-callout p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: #1a2a3a;
}

.article-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 30px 0 34px;
  padding: 26px 20px;
  background: #f8f5f0;
  border-radius: 6px;
}

.article-cycle .cyc-step {
  background: #2c3e55;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  padding: 9px 15px;
  border-radius: 20px;
  text-align: center;
}

.article-cycle .cyc-arrow {
  color: #c9a96e;
  font-size: 16px;
  font-weight: 700;
}

.article-body ul.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 0;
}

.article-help {
  background: #1a2a3a;
  border-radius: 6px;
  padding: 40px 44px;
  margin: 52px 0 40px;
  text-align: center;
}

.article-help h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 14px;
}

.article-help p {
  font-family: 'Raleway', sans-serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: #d5dbe2;
  margin: 0 auto 14px;
  max-width: 560px;
}

.article-help p:last-of-type { margin-bottom: 22px; }

@media (max-width: 560px) {
  .article-body ul.two-col { grid-template-columns: 1fr; }
  .article-help { padding: 32px 24px; }
}

/* ---- TOWN PAGE landing layout ---- */
.breadcrumb-bar { padding-top: 26px; }

.town-highlights {
  background-color: #f8f5f0;
  padding: 46px 0;
  margin-top: 26px;
}

/* When the highlights follow the dark hero, sit them flush (no white gap) */
.town-hero + .town-highlights {
  margin-top: 0;
}

/* Meet-Emma band on town pages */
.town-about {
  background: #ffffff;
  padding: 60px 0;
}

.town-about .two-col {
  grid-template-columns: 340px 1fr;
  align-items: center;
  gap: 56px;
}

.town-about .about-image img {
  border-radius: 5px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

/* Soften the photo's edges so it meets the navy hero gently */
.town-hero .about-image {
  position: relative;
}

.town-hero .about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 8px 8px #1a2a3a;
  pointer-events: none;
}

.town-hero {
  padding-top: 66px;
  background: #1a2a3a;
}

.town-about .about-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.15;
  color: #1a2a3a;
  margin-bottom: 10px;
}

.town-about .about-text p {
  font-size: 16px;
  color: #444444;
  line-height: 1.85;
  margin-bottom: 18px;
}

/* The town hero uses a dark ground, matching the photo heroes elsewhere */
.town-hero .about-text h1 { color: #ffffff; }
.town-hero .about-text p { color: #d5dbe2; }

.town-hero .btn-outline {
  color: #ffffff;
  border-color: #ffffff;
}

.town-hero .btn-outline:hover {
  background-color: #ffffff;
  color: #1a2a3a;
}

@media (max-width: 820px) {
  .town-about .two-col { grid-template-columns: 1fr; gap: 30px; }
  .town-about .about-image { max-width: 340px; margin: 0 auto; }
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 44px;
  max-width: 900px;
  margin: 0 auto;
  list-style: none;
}

.highlight-grid li {
  position: relative;
  padding-left: 40px;
}

.highlight-grid li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #c9a96e;
  color: #ffffff;
  font-size: 15px;
  border-radius: 4px;
}

.highlight-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 3px;
}

.highlight-detail {
  display: block;
  font-size: 14.5px;
  color: #555555;
  line-height: 1.6;
}

.town-content { padding-top: 8px; }

.town-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 12px;
}

.town-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 30px 0 6px;
}

/* Match both buttons' boxes exactly so the pair is the same height. The
   buttons sit in a paragraph with line-height 1.85, which otherwise inflates
   the outline box unevenly, so pin an explicit line-height on both. */
.town-cta .btn-primary,
.town-cta .btn-outline {
  padding: 13px 32px;
  border-width: 2px;
  line-height: 1;
  margin-top: 0;
}

@media (max-width: 600px) {
  .highlight-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- TOWN PAGE village list ---- */
.town-villages {
  margin: 22px 0;
  padding: 6px 0 6px 18px;
  border-left: 3px solid #c9a96e;
  color: #555555;
  line-height: 1.95;
}

/* ---- Area chooser: cards linking to the town pages ---- */
/* Replaces the long six-cluster village grid on the home and about pages; the
   full village lists now live on the town pages these cards link to. White
   cards read cleanly on both the cream home section and the white about one. */
.area-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 860px;
  margin: 40px auto 0;
  text-align: left;
}

.area-link {
  display: block;
  background: #ffffff;
  border: 1px solid #e8e0d5;
  border-top: 3px solid #c9a96e;
  padding: 20px 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.area-link:hover {
  box-shadow: 0 6px 20px rgba(26, 42, 58, 0.1);
  transform: translateY(-2px);
}

.area-link:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 2px;
}

.area-link-name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: #1a2a3a;
  margin-bottom: 4px;
}

.area-link-name::after {
  content: " \2192";
  color: #c9a96e;
}

.area-link-eg {
  display: block;
  font-size: 13.5px;
  color: #6b6459;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .area-links { grid-template-columns: 1fr; }
}

/* ---- FAQ page (native <details> accordion) ---- */
.faq-intro {
  color: #555555;
  line-height: 1.85;
  margin-bottom: 8px;
}

.faq-intro a {
  color: #b8945a;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.faq-intro a:hover { border-bottom-color: #c9a96e; }

.faq-answer a {
  color: #b8945a;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.faq-answer a:hover { border-bottom-color: #c9a96e; }

.faq-list { margin-top: 12px; }

.faq-item { border-bottom: 1px solid #e8e0d5; }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 44px 22px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  font-weight: 500;
  color: #1a2a3a;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 20px;
  font-size: 24px;
  color: #c9a96e;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item summary:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 2px;
}

.faq-answer { padding: 0 44px 24px 0; }

.faq-answer p {
  color: #555555;
  line-height: 1.85;
  margin-bottom: 14px;
}

.faq-answer p:last-child { margin-bottom: 0; }

/* ---- BREADCRUMB (article pages) ---- */
.breadcrumb {
  margin-bottom: 24px;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: #888888;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: "/";
  color: #c9c2b6;
}

.breadcrumb a {
  color: #6b7d8f;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.breadcrumb a:hover {
  color: #1a2a3a;
  border-bottom-color: #c9a96e;
}

.breadcrumb [aria-current="page"] {
  color: #555555;
}

.article-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-left: auto;
  margin-right: auto;
}

.article-figure figcaption {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: #888888;
  margin-top: 10px;
  line-height: 1.6;
}

.article-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #e8e0d5;
}

@media (max-width: 1024px) {
  .articles-grid { gap: 28px; }
}

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

@media (max-width: 600px) {
  .articles-grid { grid-template-columns: 1fr; }
  .article-hero .page-hero-content h1 { font-size: 32px; }
  .article-content { padding: 48px 20px 64px; }
}