/* The Luxury palette, from Shumaila's brief of 1st September 2026. Her six colours
   are used exactly as specified. Two extra values were derived, because her palette
   names no colour for small text and both of the obvious candidates fail WCAG AA:
   Soft Taupe #B8A99A is 2.07:1 on Porcelain Cream and Elegant Gold #B5965A is
   2.54:1. Gold sits almost exactly mid-luminance, so it fails against light AND
   dark text; that is why her "gold button, cream text" pairing could not ship as
   written. The button keeps her exact gold and takes her own Deep Charcoal as its
   text instead, which is 5.46:1.
     --muted        Soft Taupe deepened to clear 4.5:1 on cream AND on the beige band
     --accent-deep  Elegant Gold deepened to 6.37:1 for links and labels
   --warm is DELIBERATELY still terracotta and not gold. It carries the emergency
   red-flag panels, which must not read as the same everyday accent as a button. */
:root {
  --background: #f7f3ed;   /* her Porcelain Cream */
  --surface: #ffffff;      /* cards, kept white to lift off the cream */
  --surface-alt: #ded3c5;  /* her Warm Beige, alternating section bands */
  --dark: #252525;         /* her Deep Charcoal, for dark sections */
  --ink: #353535;          /* her Dark Charcoal, body text */
  --muted: #5f584e;        /* Soft Taupe deepened. Must clear 4.5:1 on cream AND on
                              the darker Warm Beige band, where an eyebrow label sits:
                              6.35:1 on cream, 4.76:1 on beige, 7.02:1 on white. */
  --accent: #b5965a;       /* her Elegant Muted Gold, exactly as specified */
  --accent-deep: #6e5520;  /* gold deepened for text: 6.37:1 on cream */
  --warm: #c07a54;         /* emergency red flags only. NOT part of the gold scheme */
  --line: #e3dacb;         /* hairline, derived from her Warm Beige */
  --error: #8c3f37;
  --shadow: 0 22px 60px rgba(53, 53, 53, 0.10);
  --radius: 18px;
  --container: 1100px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--background);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

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

button,
input,
textarea {
  font: inherit;
}

a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(79, 107, 91, 0.45);
  transition: color 160ms ease, text-decoration-color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 4px;
}

::selection {
  background: var(--accent-deep);
  color: var(--surface);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.8rem, 7vw, 5.7rem);
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2.05rem, 4vw, 3.35rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
}

p,
ul,
ol,
blockquote {
  margin-top: 0;
}

p {
  margin-bottom: 1.25rem;
}

ul,
ol {
  padding-left: 1.35rem;
}

li + li {
  margin-top: 0.55rem;
}

.container {
  width: min(calc(100% - 3rem), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin-bottom: 1.1rem;
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.lead {
  max-width: 720px;
  color: #4a443c;
  font-size: clamp(1.2rem, 2vw, 1.42rem);
  line-height: 1.65;
}

.section-heading {
  max-width: 720px;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-heading p {
  max-width: 650px;
  margin: 1rem 0 0;
  color: var(--muted);
}

.draft-note {
  color: var(--muted);
  font-size: 0.9em;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--warm);
  text-underline-offset: 0.3em;
}

.draft-note::before {
  content: "Draft";
  display: inline-block;
  margin: 0 0.45em 0.15em 0;
  padding: 0.12em 0.46em;
  border: 1px solid rgba(192, 122, 84, 0.42);
  border-radius: 999px;
  color: #7b4a32;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

.draft-block {
  display: block;
  max-width: 840px;
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid rgba(192, 122, 84, 0.5);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.6);
}

.draft-block::before {
  margin-bottom: 0.35rem;
}

/* Header */

.site-header {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(227, 218, 203, 0.88);
  background: rgba(247, 243, 237, 0.96);
}

.header-inner {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 265px;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.wordmark-subline {
  margin-top: 0.34rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.35vw, 1.25rem);
}

.site-nav a {
  position: relative;
  padding: 0.7rem 0;
  color: var(--ink);
  font-size: 0.79rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.42rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 160ms ease, transform 160ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--dark);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-toggle-lines {
  position: relative;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
  position: absolute;
  left: 0;
  content: "";
}

.nav-toggle-lines::before {
  top: -7px;
}

.nav-toggle-lines::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Buttons and links */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--dark);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--background);
  transform: translateY(-1px);
}

.btn:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.btn-secondary {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-deep);
}

.btn-secondary:hover {
  border-color: var(--accent-deep);
  background: rgba(181, 150, 90, 0.14);
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

.text-link span {
  transition: transform 160ms ease;
}

.text-link:hover span {
  transform: translateX(0.2rem);
}

/* Home */

.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
}

.home-hero::before {
  position: absolute;
  top: -15rem;
  right: -10rem;
  width: 38rem;
  height: 38rem;
  border: 1px solid rgba(181, 150, 90, 0.30);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hero-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr);
  gap: clamp(3rem, 8vw, 7.5rem);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy .lead {
  max-width: 650px;
  margin-top: 1.5rem;
}

.hero-image-wrap {
  position: relative;
  width: 100%;
  max-width: 430px;
  justify-self: end;
}

.hero-image-wrap::before {
  position: absolute;
  top: 1.4rem;
  right: -1.4rem;
  bottom: -1.4rem;
  left: 1.4rem;
  border: 1px solid rgba(181, 150, 90, 0.5);
  border-radius: 180px 180px 18px 18px;
  content: "";
}

.hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 2.72;
  border-radius: 180px 180px 18px 18px;
  box-shadow: var(--shadow);
  object-fit: cover;
  object-position: center 22%;
}

.philosophy-strip {
  padding: clamp(3rem, 7vw, 5.4rem) 0;
  background: var(--dark);
  color: var(--surface);
}

.philosophy-strip blockquote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.philosophy-strip blockquote p {
  margin-bottom: 1.3rem;
  color: var(--surface);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
  text-wrap: balance;
}

.philosophy-strip cite {
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section {
  padding: clamp(4.2rem, 9vw, 7.5rem) 0;
}

.section-surface {
  background: var(--surface-alt);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.pillar-card {
  display: flex;
  min-height: 355px;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pillar-card:hover {
  border-color: rgba(181, 150, 90, 0.75);
  box-shadow: 0 18px 44px rgba(47, 54, 48, 0.07);
  transform: translateY(-3px);
}

.pillar-number {
  margin-bottom: auto;
  color: var(--accent-deep);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.pillar-card h3 {
  margin: 3.5rem 0 1rem;
}

.pillar-card p {
  color: var(--muted);
}

.pillar-card .text-link {
  margin-top: auto;
}

.trust-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.42);
}

.trust-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.trust-list li {
  display: flex;
  min-height: 150px;
  align-items: center;
  margin: 0;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.trust-list li:first-child {
  border-left: 1px solid var(--line);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.testimonial-card {
  margin: 0;
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.testimonial-card p {
  min-height: 100px;
  margin-bottom: 1.4rem;
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.45;
}

.testimonial-card cite {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: normal;
}

/* Full testimonials page: two columns, cards sized to their own content. */

.testimonial-grid-page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
}

.testimonial-grid-page .testimonial-card p {
  min-height: 0;
  font-size: 1.18rem;
  line-height: 1.5;
}

.draft-section-note {
  max-width: 820px;
  margin: 1.7rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.resources-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(2.2rem, 5vw, 3.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.resources-teaser h2 {
  margin-bottom: 0.65rem;
}

.resources-teaser p {
  margin: 0;
}

.closing-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(3.4rem, 7vw, 5.6rem);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--surface);
  text-align: center;
}

.closing-cta::after {
  position: absolute;
  right: -5rem;
  bottom: -10rem;
  width: 23rem;
  height: 23rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: "";
}

.closing-cta h2 {
  color: var(--surface);
}

.closing-cta p {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 1rem auto 1.7rem;
  color: #e8dfd2;
}

.closing-cta .btn {
  position: relative;
  z-index: 1;
}

/* Inner pages */

.page-hero {
  padding: clamp(3.7rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

.page-hero .lead {
  margin: 1.35rem 0 0;
}

.page-hero-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.5fr);
  gap: clamp(2.5rem, 7vw, 6rem);
}

.page-portrait {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 3 / 4;
  justify-self: end;
  border-radius: 150px 150px 16px 16px;
  box-shadow: var(--shadow);
  object-fit: cover;
  object-position: center 20%;
}

.prose-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 7rem);
}

.prose-label {
  color: var(--accent-deep);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prose {
  max-width: 750px;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose p {
  margin-bottom: 1.45rem;
}

/* Sub-heads inside a prose article. The global heading rule zeroes all margins
   and .prose only spaces paragraphs, so an h3 lands flush against the sentence
   under it. h2 is deliberately NOT touched: it has shipped since July and takes
   its top space from the preceding paragraph. Added 1st Sep 2026 with the
   patient advice page, the first prose on the site to use a third level. */
.prose h3 {
  margin: 1.9rem 0 0.55rem;
}

.prose h2 + p,
.prose h3 + p {
  margin-top: 0;
}

.prose blockquote {
  margin: 2.4rem 0;
  padding: 1.8rem 0 0.3rem 1.8rem;
  border-left: 3px solid var(--accent);
}

.prose blockquote p {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.5;
}

.content-section {
  padding: clamp(3.6rem, 8vw, 6.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.content-section:last-of-type {
  border-bottom: 0;
}

.content-section h2 {
  margin-bottom: 1.5rem;
}

.clean-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clean-list li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 1.5rem;
  border-top: 1px solid var(--line);
}

.clean-list li::before {
  position: absolute;
  top: 1.63rem;
  left: 0.1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.clean-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.offer-card {
  min-height: 190px;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.offer-card p {
  margin: 0;
}

.offer-card .draft-note {
  display: block;
}

.offer-card .draft-note::before {
  margin-bottom: 0.45rem;
}

.engagement-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
}

.engagement-list li {
  margin: 0;
  padding: 1.4rem 1.5rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.availability {
  margin-top: 2rem;
  font-weight: 500;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.article-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.article-card::before {
  width: 38px;
  height: 3px;
  margin-bottom: 3rem;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.article-card h2 {
  margin-bottom: 1.2rem;
  font-size: 1.55rem;
  line-height: 1.3;
}

.article-card p {
  margin-top: auto;
}

.simple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 0 0;
}

.simple-cta p {
  max-width: 600px;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.4;
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.65fr);
  gap: clamp(2.5rem, 8vw, 7rem);
}

.contact-form {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.form-field {
  margin-bottom: 1.35rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.form-field input {
  min-height: 50px;
  padding: 0.7rem 0.8rem;
}

.form-field textarea {
  min-height: 180px;
  padding: 0.8rem;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--accent-deep);
  outline: 3px solid var(--warm);
  outline-offset: 1px;
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.7rem;
  margin: 1rem 0 0;
  color: var(--error);
  font-size: 0.9rem;
}

.form-success {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(181, 150, 90, 0.7);
  border-radius: 10px;
  background: rgba(181, 150, 90, 0.14);
  color: var(--ink);
  font-size: 1.08rem;
}

.contact-details {
  padding-top: 0.4rem;
}

.contact-details h2 {
  margin-bottom: 1rem;
  font-size: 1.65rem;
}

.contact-details a {
  overflow-wrap: anywhere;
}

.contact-note {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-details h2 ~ h2 {
  margin-top: 2.4rem;
}

.find-me {
  max-width: 840px;
  margin: 2.4rem 0 0;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
}

.find-me h3 {
  margin: 0 0 0.6rem;
}

.find-me p {
  margin: 0.35rem 0;
}

.find-me .find-me-link {
  margin-top: 0.9rem;
}

/* 404 */

.not-found {
  display: grid;
  min-height: 56vh;
  place-items: center;
  padding: 5rem 0;
  text-align: center;
}

.not-found h1 {
  margin-bottom: 1.2rem;
}

.not-found p {
  max-width: 570px;
  margin-inline: auto;
}

.not-found .button-row {
  justify-content: center;
}

/* Footer */

.site-footer {
  margin-top: clamp(4rem, 9vw, 8rem);
  padding: clamp(3.8rem, 8vw, 6rem) 0 1.8rem;
  background: var(--dark);
  color: var(--surface);
}

.site-footer h2,
.site-footer h3 {
  color: var(--surface);
}

.site-footer a {
  color: var(--surface);
  text-decoration-color: rgba(255, 255, 255, 0.48);
}

.site-footer a:hover {
  color: var(--surface);
  text-decoration-color: var(--surface);
}

.site-footer :focus-visible {
  outline-color: var(--surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.15fr 0.9fr;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.footer-name {
  margin-bottom: 0.75rem;
  font-size: 1.9rem;
}

.footer-positioning {
  max-width: 330px;
  color: #e8dfd2;
  font-size: 0.92rem;
}

.footer-logo-note {
  max-width: 330px;
  margin-bottom: 0;
  color: #ded3c5;
  font-size: 0.76rem;
  line-height: 1.55;
}

.footer-heading {
  margin-bottom: 1rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: 1.2rem;
  row-gap: 0.65rem;
}

.footer-nav li {
  margin: 0;
}

.footer-nav a,
.footer-details {
  font-size: 0.9rem;
}

.footer-details p {
  margin-bottom: 0.55rem;
}

.footer-disclaimer {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 78ch;
  color: #ded3c5;
  font-size: 0.78rem;
  line-height: 1.7;
}

.footer-disclaimer + .footer-bottom {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: 0;
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #ded3c5;
  font-size: 0.78rem;
}

.footer-bottom p {
  margin: 0;
}

.site-footer .footer-draft {
  color: #ded3c5;
}

.site-footer .draft-note {
  color: #f2e6df;
  text-decoration-color: #efb493;
}

.site-footer .draft-note::before {
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--surface);
}

/* Responsive */

@media (max-width: 1060px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 102;
  }

  .header-cta {
    display: none;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    display: flex;
    width: min(88vw, 420px);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 6rem 2.3rem 3rem;
    background: var(--background);
    box-shadow: -20px 0 50px rgba(47, 54, 48, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateX(105%);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-nav::before {
    position: absolute;
    top: 2rem;
    left: 2.3rem;
    color: var(--muted);
    content: "Navigation";
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .site-nav a {
    padding: 0.78rem 0;
    border-bottom: 1px solid var(--line);
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
  }

  .site-nav a::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr);
    gap: 3rem;
  }

  .home-hero h1 {
    font-size: clamp(2.8rem, 7vw, 4.4rem);
  }

  .pillar-grid,
  .testimonial-grid,
  .article-grid {
    grid-template-columns: 1fr;
  }

  .pillar-card {
    min-height: 280px;
  }

  .trust-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-list li,
  .trust-list li:first-child {
    min-height: 115px;
    border: 0;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  .trust-list li:nth-child(odd) {
    border-left: 1px solid var(--line);
  }

  .trust-list li:last-child {
    grid-column: 1 / -1;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

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

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

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 1rem;
  }

  .container {
    width: min(calc(100% - 2rem), var(--container));
  }

  .header-inner {
    min-height: 90px;
    gap: 1rem;
  }

  .wordmark {
    max-width: calc(100% - 64px);
  }

  .wordmark-name {
    font-size: 1.32rem;
  }

  .wordmark-subline {
    font-size: 0.55rem;
  }

  .hero-grid,
  .page-hero-grid,
  .prose-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding-top: 3.2rem;
  }

  .hero-image-wrap {
    width: calc(100% - 1rem);
    max-width: 390px;
    justify-self: start;
    margin-top: 1rem;
  }

  .hero-image-wrap::before {
    right: -1rem;
    bottom: -1rem;
  }

  .hero-image {
    max-height: 560px;
  }

  .page-portrait {
    width: min(100%, 330px);
    justify-self: start;
  }

  .resources-teaser,
  .simple-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.4rem;
  }

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

  .footer-grid > :first-child {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 2.65rem;
  }

  .site-nav {
    width: 100%;
  }

  .wordmark-subline {
    max-width: 230px;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .trust-list {
    grid-template-columns: 1fr;
  }

  .trust-list li,
  .trust-list li:first-child,
  .trust-list li:nth-child(odd),
  .trust-list li:last-child {
    grid-column: auto;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .closing-cta {
    padding-inline: 1.35rem;
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Cookie banner and consent controls
   --------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cookie-banner-inner {
  display: flex;
  width: min(100%, 720px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.cookie-banner-text {
  flex: 1 1 22rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.cookie-banner-text a {
  color: var(--accent-deep);
}

.cookie-banner-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
}

.btn-small {
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  font-size: 1rem;
}

.btn-quiet {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

.btn-quiet:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-deep);
}

.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The "reopen the cookie choice" control is a button for correctness, but it
   should read as a link wherever it appears: in the footer row and inline in
   the privacy notice. */
button[data-cookie-settings] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-deep);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.footer-legal-nav button[data-cookie-settings] {
  color: inherit;
}

@media (max-width: 620px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner-actions .btn {
    flex: 1 1 0;
  }
}

/* Treatments accordion.

   Native <details>/<summary> rather than JS: it is keyboard accessible for free,
   it is findable by the browser's own in-page search once open, and each row
   carries an id so the home page and the holistic page can deep-link straight
   to a treatment (for example /treatments#nervous-patients). The marker is drawn
   with a rotating chevron because the default triangle differs across browsers. */

.treatment-list {
  /* Left-aligned, not centred: it has to line up with the "What I provide"
     heading above it, which sits on the container's left edge. */
  max-width: 840px;
  border-top: 1px solid var(--line);
}

.treatment {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.treatment > summary {
  position: relative;
  padding: 1.25rem 3rem 1.25rem 1.15rem;
  color: var(--accent-deep);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.treatment > summary::-webkit-details-marker {
  display: none;
}

.treatment > summary::after {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  content: "";
}

.treatment[open] > summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.treatment > summary:hover {
  background: rgba(181, 150, 90, 0.10);
}

.treatment > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.treatment-body {
  padding: 0 1.15rem 1.4rem;
}

.treatment-body p {
  max-width: 62ch;
  margin: 0 0 0.85rem;
  color: var(--ink);
  line-height: 1.7;
}

.treatment-body > :last-child {
  margin-bottom: 0;
}

/* Sub-headings inside an open row. Deliberately small: the row's own summary is
   1.1rem, so the default h3 scale (up to 1.75rem) would shout over it. Same
   uppercase label treatment as .prose-label, which is what the eye already knows. */
.treatment-body h3 {
  margin: 1.6rem 0 0.6rem;
  color: var(--accent-deep);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.treatment-body > h3:first-child {
  margin-top: 0.2rem;
}

/* A step or sub-point beneath one of those uppercase h3 labels: "Brush twice a
   day" under "How can I look after my gums?". Sentence case and bold rather
   than another serif size, because h3 here is already reduced to a 0.76rem
   label and an unstyled h4 inherits the global Fraunces scale, which renders
   LARGER than the h3 above it and inverts the hierarchy. Added 1st Sep 2026
   with the patient guides, the first content on the site to need four levels. */
.treatment-body h4 {
  margin: 1.15rem 0 0.35rem;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}

.treatment-body h3 + h4 {
  margin-top: 0.55rem;
}

.treatment-body ul {
  max-width: 62ch;
  margin: 0 0 0.95rem;
  color: var(--ink);
  line-height: 1.7;
}

.treatment-body li + li {
  margin-top: 0.3rem;
}

/* A patient question. Not a heading: these read as a short dialogue, and making
   them h4s would put a dozen extra landmarks into every row. */
.treatment-body .faq-q {
  margin-bottom: 0.3rem;
  color: var(--ink);
  font-weight: 600;
}

.treatment-body .faq-q + p {
  margin-bottom: 1.15rem;
}

/* Emergency red flags. Warm accent rather than a clinical red: the page is
   already alarming enough, and the job is to make the sentence impossible to
   skim past, not to shout. Used twice on /emergencies and nowhere else. */
.urgent-note {
  max-width: 62ch;
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--warm);
  border-radius: 0 8px 8px 0;
  background: rgba(192, 122, 84, 0.07);
  line-height: 1.7;
}

.urgent-note-centred {
  margin-right: auto;
  margin-left: auto;
}

.page-draft-note {
  max-width: 62ch;
  margin: 1.4rem auto 0;
  text-align: center;
}

.page-disclaimer {
  max-width: 62ch;
  margin: 2.2rem auto 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
  text-align: center;
}

/* Anchored rows sit under the sticky-ish header comfortably. */
.treatment[id] {
  scroll-margin-top: 1.5rem;
}

.footer-bottom .footer-updated {
  display: inline-block;
  margin-top: 0.3rem;
  opacity: 0.8;
}

.testimonial-more {
  margin: 1.6rem 0 0;
  text-align: center;
}