/* ============================================================
   Megan D. Colletta, LCSW — site styles
   Design tokens mirror the live Squarespace palette and type:
     accent  hsl(17.24, 50.29%, 66.08%)  → #d99c7a
     dark    hsl(180,    5.88%, 20%)     → #303636
     accent2 hsl(173,   10.43%, 32%)     → #495a59
     cream   hsl(47,    15%,    88%)     → #e6e3da
     Fonts: Alice (serif headings) + Work Sans (body)
   ============================================================ */

:root {
  --color-accent:        #d99c7a;
  --color-accent-hover:  #c4866a;
  --color-accent-soft:   #f3e3d6;
  --color-dark:          #303636;
  --color-dark-soft:     #495a59;
  --color-muted:         #6b7676;
  --color-cream:         #e6e3da;
  --color-cream-light:   #f6f3ec;
  --color-white:         #ffffff;
  --color-border:        #e4e0d6;

  --font-serif: 'Alice', Georgia, 'Times New Roman', serif;
  --font-sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --site-max: 1200px;
  --reading-max: 680px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

/* -- typography ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-dark);
  margin: 0 0 0.6em;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; letter-spacing: 0; }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-sans); color: var(--color-dark-soft); }

p { margin: 0 0 1.1em; }
.lede { font-size: 1.18rem; line-height: 1.7; color: var(--color-dark-soft); max-width: 36em; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1.2em;
  font-weight: 500;
}
.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-dark-soft);
}

a {
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a:hover { color: var(--color-accent); }

ul, ol { padding-left: 1.2em; margin: 0 0 1.2em; }
li { margin-bottom: 0.4em; }

blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-dark);
  text-align: center;
}
blockquote cite {
  display: block;
  margin-top: 1.2em;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-family: var(--font-sans);
}

/* -- layout primitives --------------------------------------- */
.container { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow    { max-width: 760px; margin-left: auto; margin-right: auto; }
.center    { text-align: center; }
/* A list inside a centred block is centred as a whole, with its items
   left-aligned, so each bullet stays beside its own text. */
.center ul, .center ol { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
/* "List style: badges" on a narrow-text section: bullet items become badges. */
.list-badges ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.center.list-badges ul { width: auto; justify-content: center; }
.list-badges li { margin: 0; padding: 0.45em 1.1em; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-dark); font-size: 0.95rem; line-height: 1.35; }

section { padding: var(--section-y) 0; }
.section-cream { background: var(--color-cream-light); }
/* When two cream sections sit back-to-back, drop the gap so they read
   as one continuous band instead of two separately-padded blocks. */
.section-cream + .section-cream { padding-top: 0; }

/* Dark closing-CTA band sits at the foot of every page — keep it
   visually weighty but considerably slimmer than the default section
   padding to avoid feeling like a footer-sized block. */
.section-dark  { background: var(--color-dark); color: var(--color-cream); padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.section-dark h2 { margin-bottom: 0.4em; font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
.section-dark .eyebrow { margin-bottom: 0.7em; }
.section-dark p { margin-bottom: 1rem; }
.section-dark .btn { margin-bottom: 0; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-cream-light); }
.section-dark a { color: var(--color-cream-light); border-color: var(--color-accent); }
.section-dark a:hover { color: var(--color-accent); }

/* -- nav ------------------------------------------------------- */
.site-header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  gap: 1.5rem;
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--color-dark);
  border: none;
  white-space: nowrap;
}
.brand:hover { color: var(--color-accent); }
.brand .brand-sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-top: 2px;
}
.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.5rem;
  align-items: center;
}
.nav-links li { margin: 0; }
/* The booking button is excluded: otherwise this rule outranks .nav-cta and
   its 2px bottom padding clips the button. */
.nav-links a:not(.nav-cta) {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-dark);
  border: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-dark); }

.nav-cta {
  background: var(--color-accent);
  color: var(--color-white) !important;
  padding: 0.7em 1.2em;
  border: none !important;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 0.2s ease;
  display: inline-block;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--color-accent-hover); color: var(--color-white) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--color-dark);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* -- buttons -------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
  padding: 0.9em 1.7em;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-white); }
.btn-outline {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark-soft);
}
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }

/* -- hero ----------------------------------------------------- */
.hero {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--color-cream-light) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(48, 54, 54, 0.3);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-h1 { margin-bottom: 0.4em; }
.hero-cta { margin-top: 1.6rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero-meta {
  margin-top: 2rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.hero-meta strong { color: var(--color-dark); font-weight: 500; }

/* -- centred section header --------------------------------- */
.section-head { text-align: center; max-width: 740px; margin: 0 auto 3rem; }
.section-head h2 { margin-bottom: 0.4em; }
.section-head p { color: var(--color-dark-soft); font-size: 1.05rem; }

/* -- 3-column / 2-column grids ------------------------------ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.8rem);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.grid-2.align-start { align-items: start; }

.card {
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.8rem);
  background: var(--color-white);
  border-top: 2px solid var(--color-accent);
}
.section-cream .card { background: var(--color-white); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* -- "How it works" — numbered steps ----------------------- */
/* Number sits ABOVE the card content (inside the same padding as the
   heading), so "01" is left-aligned with the text below it. */
.steps { counter-reset: step; }
.steps .card { border-top: none; background: transparent; padding-left: 0; padding-right: 0; }
.steps .card::before {
  display: block;
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.6rem;
}

/* -- callout band -------------------------------------------- */
.callout {
  background: var(--color-cream);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  border-left: 4px solid var(--color-accent);
}
.callout h2 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* -- about-short — image + text ----------------------------- */
.about-short .portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -20px rgba(48, 54, 54, 0.25);
}
.about-short .portrait img { width: 100%; height: 100%; object-fit: cover; }

/* -- pull quote ---------------------------------------------- */
.pullquote {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  text-align: center;
}
.pullquote::before {
  content: "“";
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.4;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

/* -- featured-in strip ----------------------------------------- */
.featured-strip {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-cream-light);
}
.featured-strip .label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 1.4rem;
}
.featured-strip ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  font-size: 0.88rem;
  color: var(--color-dark-soft);
  text-align: center;
}
.featured-strip li {
  margin: 0;
  flex: 0 1 auto;
  max-width: 240px;
}
.featured-strip li strong { display: block; font-weight: 500; color: var(--color-dark); font-family: var(--font-serif); font-size: 0.95rem; }

/* -- table (Practicalities) --------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
}
.table th, .table td {
  text-align: left;
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.table th { font-family: var(--font-sans); font-weight: 500; color: var(--color-dark-soft); width: 30%; font-size: 0.92rem; }

/* -- FAQ accordion ------------------------------------------- */
details.faq {
  border-bottom: 1px solid var(--color-border);
  padding: 1.2rem 0;
}
details.faq[open] { padding-bottom: 1.6rem; }
details.faq summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
  color: var(--color-dark);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--color-accent);
  line-height: 1;
  transition: transform 0.2s ease;
}
details.faq[open] summary::after { content: "−"; }
details.faq .answer { padding-top: 1rem; color: var(--color-dark-soft); }
details.faq .answer p:last-child { margin-bottom: 0; }

/* -- newsletter ------------------------------------------------ */
.newsletter {
  background: var(--color-cream);
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.newsletter h2 { margin-top: 0; }
.newsletter form {
  margin: 1.5rem auto 0;
  max-width: 480px;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.newsletter input[type="email"],
.newsletter input[type="text"] {
  flex: 1 1 200px;
  padding: 0.9em 1em;
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}
.newsletter input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.newsletter .consent { font-size: 0.78rem; color: var(--color-muted); margin-top: 1rem; max-width: 480px; margin-left: auto; margin-right: auto; }

/* -- testimonials -------------------------------------------- */
.testimonials .testimonial {
  margin: 0;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: var(--color-white);
  border-left: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.section-cream .testimonials .testimonial {
  background: var(--color-cream-light);
}
.testimonial__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-dark);
  position: relative;
  padding-left: 1.4rem;
}
.testimonial__quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.4rem;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-accent);
}
.testimonial__attribution {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-family: var(--font-sans);
  display: block;
  margin-top: auto;
}

/* -- image bands (full-bleed landscape separators) ----------- */
.image-band {
  width: 100%;
  aspect-ratio: 21 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream-light);
  background-repeat: no-repeat;
  border-block: 1px solid var(--color-border);
}
.image-band--tall  { aspect-ratio: 16 / 9; }
.image-band--short { aspect-ratio: 32 / 9; }

@media (max-width: 760px) {
  .image-band        { aspect-ratio: 16 / 10; }
  .image-band--tall  { aspect-ratio: 4 / 3; }
  .image-band--short { aspect-ratio: 21 / 9; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 920px) {
  /* Subtle parallax-like steadiness on desktop only — keeps the band
     visually anchored as the eye moves. Disabled on mobile (jank) and
     when users prefer reduced motion. */
  .image-band {
    background-attachment: fixed;
  }
}

/* -- booking widget (Cliniko-backed, site-themed) ------------ */
.booking-widget {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-cream-light);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 360px;
  scroll-margin-top: 6rem; /* clears the sticky header when the confirmation scrolls into view */
}
.booking-widget__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 4rem 0;
  color: var(--color-dark-soft);
  font-size: 0.95rem;
}
.booking-widget__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-accent-soft);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .booking-widget__spinner { animation: none; border-top-color: var(--color-accent-soft); }
}

.booking-widget__fallback,
.booking-widget__empty {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-dark-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.booking-widget__fallback strong,
.booking-widget__empty strong { display: block; margin-bottom: 0.4rem; color: var(--color-dark); font-family: var(--font-serif); font-size: 1.15rem; }
.booking-widget__fallback span + span { display: block; margin-top: 0.6rem; }

/* picker layout — date strip on top, times below */
.booking-widget__shell {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.booking-widget__col-heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

/* horizontal scrollable date pills */
.booking-widget__date-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0 0.8rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* fade edges so it's obvious the strip scrolls */
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.booking-widget__date-strip::-webkit-scrollbar { height: 6px; }
.booking-widget__date-strip::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* DATE PILLS — card-style with peach top-border to differentiate from time pills */
.booking-widget__date {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem 0.55rem;
  font: inherit;
  cursor: pointer;
  background: var(--color-cream-light);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.booking-widget__date:hover {
  background: var(--color-white);
  border-bottom-color: var(--color-accent);
  border-left-color: var(--color-accent);
  border-right-color: var(--color-accent);
}
.booking-widget__date.is-selected {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  border-top-color: var(--color-accent);
}
.booking-widget__date-dow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.booking-widget__date-day {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-dark);
}
.booking-widget__date-mon {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--color-dark-soft);
}
.booking-widget__date-count {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.1rem;
}

/* TIME PILLS — plainer rectangular buttons, white bg, smaller serif font  */
.booking-widget__times ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 0.4rem;
}
.booking-widget__time {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.65em 0.4em;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.booking-widget__time:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}
.booking-widget__time:focus-visible,
.booking-widget__date:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* mobile tightening */
@media (max-width: 640px) {
  .booking-widget__date {
    min-width: 52px;
    padding: 0.4rem 0.55rem 0.45rem;
    border-top-width: 2px;
  }
  .booking-widget__date-day { font-size: 1.1rem; }
  .booking-widget__date-dow,
  .booking-widget__date-mon { font-size: 0.62rem; }
  .booking-widget__date-count { font-size: 0.55rem; }
  .booking-widget__times ul {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.35rem;
  }
  .booking-widget__time {
    padding: 0.55em 0.3em;
    font-size: 0.88rem;
  }
}

/* booking form */
.booking-widget__form-area {
  margin-top: 1.5rem;
}
.booking-widget__form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  gap: 0.9rem;
}
.booking-widget__confirm {
  margin: 0 0 0.4rem;
  padding: 0.9em 1em;
  background: var(--color-cream);
  border-left: 3px solid var(--color-accent);
  font-size: 0.95rem;
}
.booking-widget__confirm strong { font-family: var(--font-serif); font-size: 1.1rem; }
.booking-widget__form label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-dark-soft);
}
.booking-widget__form input,
.booking-widget__form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75em 1em;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.booking-widget__form textarea { min-height: 80px; resize: vertical; }
.booking-widget__form input:focus,
.booking-widget__form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.booking-widget__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 480px) {
  .booking-widget__field-row { grid-template-columns: 1fr; }
}
.booking-widget__consent {
  font-size: 0.82rem;
  color: var(--color-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.booking-widget__consent input { width: auto; margin: 0.2rem 0 0; }
.booking-widget__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.4rem;
}
.booking-widget__form-error {
  margin: 0;
  padding: 0.7em 1em;
  background: #fbe9e2;
  color: #6a2a1a;
  border-left: 3px solid #c4866a;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* success */
.booking-widget__success {
  text-align: center;
  padding: 2rem 1rem;
}
.booking-widget__success h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin: 0.4rem 0 1rem;
}
.booking-widget__success h3:focus { outline: none; } /* focused by script only; not interactive */
.booking-widget__success p { max-width: 36em; margin: 0 auto; }

/* -- contact form --------------------------------------------- */
.form-grid { display: grid; gap: 1rem; max-width: 560px; }
.form-grid label { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--color-dark-soft); display: block; }
.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85em 1em;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-dark);
}
.form-grid textarea { min-height: 160px; resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.form-grid .consent { font-size: 0.82rem; color: var(--color-muted); }
.form-grid .consent input { width: auto; margin-right: 0.5rem; }

/* -- footer ---------------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: #cfd2d2;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  font-size: 0.92rem;
}
.site-footer h4 {
  color: var(--color-cream-light);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer a {
  color: #cfd2d2;
  border: none;
  border-bottom: 1px solid transparent;
}
.site-footer a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 3rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.55rem; line-height: 1.5; }
.footer-meta {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.8rem;
  font-size: 0.78rem;
  color: #8a9090;
  line-height: 1.7;
}
.footer-meta strong { color: var(--color-cream-light); font-weight: 500; }
.crisis { margin-top: 1.2rem; font-size: 0.78rem; color: #8a9090; }

/* -- blog: post cards (blog-cards section) -------------------- */
.post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-white);
  box-shadow: 0 24px 48px -32px rgba(48, 54, 54, 0.35);
}
.post-card__image { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.post-card:hover .post-card__image img { transform: scale(1.03); }
.post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2.2rem) clamp(1.3rem, 2.5vw, 2rem);
  border-top: 2px solid var(--color-accent);
}
.post-card__body p { color: var(--color-dark-soft); }
.post-card__title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 0.5em; }
.post-card__title a { border-bottom: none; padding-bottom: 0; }
/* The title's link covers the whole card, so the photo and summary click through too. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a { color: var(--color-dark-soft); }
.post-card__body .post-card__more {
  margin: auto 0 0;
  padding-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.post-card__more::after { content: " \2192"; color: var(--color-accent); }
.post-meta { margin: 0 0 0.8em; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--color-muted); }

/* -- blog: a post's own page --------------------------------- */
.post-header {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--color-cream-light) 0%, #ffffff 100%);
}
.post-header h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.5em; }
.post-header .eyebrow a { color: inherit; border-bottom: none; padding-bottom: 0; }
.post-header .eyebrow a:hover { color: var(--color-accent-hover); }
.post-content { padding-bottom: var(--section-y); }
.post-figure {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(48, 54, 54, 0.3);
}
.post-figure img { width: 100%; height: 100%; object-fit: cover; }
.post-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 2em; }
.post-body h3 { margin-top: 1.6em; }
/* Quotations in a post are worked examples, often several sentences long:
   set them as indented text, not as the site's large centred pull-quote. */
.post-body blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: left;
  color: var(--color-dark-soft);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.post-nav__all::before { content: "\2190  "; color: var(--color-accent); }
/* The "Next:" link keeps to one line: a title too long for the screen ends
   in "…" and the arrow stays visible. Below 480px both links are a little
   smaller, so the titles up to their colon fit in full from 360px up. */
.post-nav__next { display: flex; min-width: 0; max-width: 100%; margin-left: auto; }
.post-nav__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.post-nav__next::after { content: " \2192"; flex: none; white-space: pre; color: var(--color-accent); }
@media (max-width: 480px) {
  .post-nav { font-size: 0.95rem; }
}

/* -- accessibility -------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* -- skip link ----------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--color-accent);
  color: white;
  padding: 0.7em 1em;
  z-index: 999;
  width: auto;
  height: auto;
  border: none;
  border-radius: var(--radius);
}

/* -- responsive ---------------------------------------------- */
@media (max-width: 920px) {
  .hero .container { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-figure { max-width: 460px; margin: 0 auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Below 1140px the menu, brand and booking button no longer fit on one
   line (measured with the Blog link added), so the menu folds into the
   button that opens it as a list. */
@media (max-width: 1139px) {
  /* The <nav>, not the list inside it, leaves the header row: otherwise it
     keeps an empty slot at the right edge and the button sits mid-header. */
  .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  .nav-links {
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.2rem;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 20px -10px rgba(48,54,54,0.12);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-top: 1px solid var(--color-border); }
  .nav-links a {
    display: block;
    padding: 1rem var(--gutter);
    border-bottom: none;
  }
  .nav-links .nav-cta { margin: 1rem var(--gutter) 0; text-align: center; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
  .table th { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}