/* ==========================================================
   NUMII NUTRITION — SITE STYLES
   Brand colours only. See CLAUDE.md before changing colours.
   ========================================================== */

/* ---------- Fonts (stored in the project, no Google connection) ----------
   DM Sans = headings (bold) and body text (regular).
   Playfair Display bold italic = the *emphasised words* in headings. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-italic.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Brand settings ---------- */
:root {
  /* The five brand colours — the only colours on the site */
  --espresso: #44322b;
  --plum: #954962;
  --medium-pink: #dfb8bb;
  --light-pink: #f8dce6;
  --cream: #fefcf5;

  /* Transparent Espresso, for shadows and the gradient behind text on photos */
  --espresso-shadow: rgba(68, 50, 43, 0.14);
  --photo-gradient: linear-gradient(
    to top,
    rgba(68, 50, 43, 0.82) 0%,
    rgba(68, 50, 43, 0.45) 40%,
    rgba(68, 50, 43, 0) 75%
  );

  --font-heading: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --radius: 14px;
  --radius-pill: 999px;
  --header-height: 60px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Solid version of the menu-bar wash, used while a dropdown is open */
  --menu-open-bg: linear-gradient(90deg, #fae6eb 0%, #fcf1ec 45%, #fefcf5 100%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 1rem; /* body text: 16px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll {
  overflow: hidden;
}

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

a {
  color: var(--plum);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}

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

main:focus {
  outline: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 1.2vw + 1.55rem, 2.5rem); /* H1: 32–40px */
}
h2 {
  font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem); /* H2: 24–32px */
}
h3 {
  font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.5rem); /* H3: 18–24px */
  line-height: 1.25;
}
h4 {
  font-size: 1.125rem;
  line-height: 1.3;
}

/* Words in *italics* inside a heading switch to the Plum italic serif */
h1 em,
h2 em,
h3 em {
  font-family: var(--font-accent);
  font-size: 1.04em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--plum);
}

/* The short supporting line beneath a heading */
.lede {
  font-size: 1.125rem; /* supporting line: 18px */
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1.1em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Book a Discovery Call — solid Plum, the most prominent button */
.btn-primary {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* Book an Appointment — outlined, quieter */
/* Book an Appointment — Light Pink fill; turns Cream with an Espresso
   outline when you point at it */
.btn-outline {
  background: var(--light-pink);
  border-color: var(--light-pink);
  color: var(--espresso);
}
.btn-outline:hover {
  background: var(--cream);
  border-color: var(--espresso);
  color: var(--espresso);
}

/* ==========================================================
   MENU BAR (HEADER)
   ========================================================== */

/* Thin Espresso strip above the menu bar (scrolls away; not sticky) */
.top-strip {
  background: var(--espresso);
  color: var(--cream);
  font-size: 0.875rem;
  line-height: 1.3;
}
.top-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 30px;
  padding-block: 0.25rem;
}
.top-strip p {
  margin: 0;
}
.top-strip ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--light-pink);
  text-decoration: none;
}
.top-strip a:hover {
  color: var(--cream);
  text-decoration: underline;
}
.top-strip :focus-visible {
  outline-color: var(--light-pink);
}
.top-strip .icon {
  width: 16px;
  height: 16px;
}
/* Phones: hide the tagline, show phone number and email side by side */
@media (max-width: 679px) {
  .top-strip-inner {
    justify-content: center;
  }
  .top-strip p {
    display: none;
  }
  .top-strip ul {
    gap: 1rem;
  }
}
@media (max-width: 380px) {
  .top-strip .icon {
    display: none;
  }
}

/* The menu bar itself — solid "Sunrise" wash (light pink fading to cream).
   The same colours are used when a dropdown opens, so the two always match. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--menu-open-bg);
  border-bottom: 1px solid var(--medium-pink);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-height);
}

.logo {
  flex-shrink: 0;
  border-radius: 6px;
}
.logo img {
  width: auto;
  height: 42px;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.header-actions .btn {
  min-height: 36px;
  padding: 0.4rem 1.05rem;
  font-size: 0.9375rem; /* 15px — owner asked for slightly smaller button text */
  white-space: nowrap;
}

/* Menu links (shared by desktop and phone) */
.nav-list,
.dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  color: var(--espresso);
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover,
.nav-link[aria-current="page"],
.is-current-section > .nav-link,
.is-current-section > .dropdown-head > .nav-link {
  color: var(--plum);
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--plum);
  cursor: pointer;
  border-radius: 6px;
}
.dropdown-toggle .icon-chevron {
  transition: transform 0.2s var(--ease-out);
}
.dropdown-toggle[aria-expanded="true"] .icon-chevron {
  transform: rotate(180deg);
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--espresso);
  text-decoration: none;
}
.dropdown-link .icon-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s var(--ease-out);
}

/* The "Menu" button — shown on phones and tablets only */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--espresso);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--espresso);
  font: 600 1rem/1 var(--font-body);
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] {
  background: var(--espresso);
  color: var(--cream);
}
.menu-toggle-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}
.menu-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--ease-out), opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Phones and tablets (narrower than 1180px) ---------- */
@media (max-width: 1179px) {
  .main-nav {
    order: 3;
  }
  .header-actions {
    order: 2;
    margin-left: auto;
  }

  /* The fold-out menu panel — like the desktop dropdowns, the menu bar
     grows downward in the same pink-to-cream wash, with no dividing line */
  .site-header.menu-open {
    border-bottom-color: transparent;
  }
  .nav-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - var(--header-total, 100px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem var(--gutter) 1.25rem;
    background: var(--menu-open-bg);
    border-bottom: 1px solid var(--medium-pink);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 22px 30px -14px rgba(68, 50, 43, 0.18);
  }
  .js .nav-list {
    display: none;
  }
  .js .site-header.menu-open .nav-list {
    display: block;
  }

  .nav-item {
    border-bottom: 1px solid rgba(223, 184, 187, 0.6);
  }
  .nav-item:last-child {
    border-bottom: 0;
  }
  .nav-link {
    display: block;
    flex: 1;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .dropdown-head {
    display: flex;
    align-items: center;
  }
  /* Small plum arrow (no circle) that flips when the section opens */
  .dropdown-toggle {
    width: 44px;
    height: 44px;
    margin-right: -0.6rem;
    color: var(--plum);
  }
  .dropdown-toggle .icon-chevron {
    width: 18px;
    height: 18px;
  }

  /* The options — plain text with small arrows, like the desktop version */
  .dropdown {
    margin: -0.25rem 0 0.6rem;
    padding: 0;
  }
  .js .has-dropdown:not(.is-open) .dropdown {
    display: none;
  }
  .dropdown-link {
    padding: 0.6rem 0.8rem;
    margin-inline: -0.8rem;
    border-radius: 10px;
    font-size: 1rem;
  }
  .dropdown-link .icon-arrow {
    opacity: 0.45;
    transform: none;
  }
  .dropdown-link:hover,
  .dropdown-link:active,
  .dropdown-link:focus-visible,
  .dropdown-link[aria-current="page"] {
    background: rgba(254, 252, 245, 0.95);
    color: var(--plum);
  }
  .dropdown-link[aria-current="page"] {
    font-weight: 600;
  }
}

/* Small phones: the two booking buttons move to their own row */
@media (max-width: 679px) {
  :root {
    --header-height: 60px;
  }
  .header-inner {
    flex-wrap: wrap;
    gap: 0 0.75rem;
    min-height: 0;
    padding-block: 0.4rem 0.5rem;
  }
  .logo img {
    height: 36px;
  }
  .menu-toggle {
    min-height: 36px;
    padding-block: 0.25rem;
  }
  .main-nav {
    order: 2;
    margin-left: auto;
  }
  .header-actions {
    order: 3;
    width: 100%;
    margin: 0.4rem 0 0;
    gap: 0.5rem;
  }
  .header-actions .btn {
    flex: 1 1 0;
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9375rem;
  }
}

/* ---------- Desktop (1180px and wider) ---------- */
@media (min-width: 1180px) {
  .menu-toggle {
    display: none;
  }
  /* The menu stretches to the full height of the bar, so an open
     dropdown's "tab" can reach right down to the list below it */
  .main-nav {
    margin-inline: auto;
    align-self: stretch;
    display: flex;
  }
  .nav-list {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
  }
  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
  }
  .nav-link {
    padding: 0.5rem 0.65rem;
    font-size: 0.9375rem; /* 15px — owner asked for slightly smaller menu text */
  }
  /* Plum underline under the section you're in */
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--plum);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.2s var(--ease-out);
  }
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after,
  .is-current-section > .nav-link::after,
  .is-current-section > .dropdown-head > .nav-link::after {
    transform: scaleX(1);
  }
  .dropdown-head {
    position: relative;
    display: flex;
    align-items: center;
  }
  .dropdown-head .nav-link {
    padding-right: 0.1rem;
  }
  .dropdown-head .nav-link::after {
    right: 0.1rem;
  }
  .dropdown-toggle {
    width: 28px;
    height: 36px;
    background: transparent;
  }
  .dropdown-toggle:hover {
    color: var(--espresso);
  }

  /* ---- Dropdown design: "Menu bar expands" ----
     When a dropdown opens, the menu bar itself grows downward to show the
     options, in the same pink-to-cream wash with no dividing line, so the bar
     and the list read as one piece. Options run down the left column, then
     down the right column. */
  .nav-item {
    position: static; /* the panel spans the whole menu bar, not just the item */
  }
  .has-dropdown.is-open .nav-link::after {
    transform: scaleX(1);
  }
  /* While a dropdown is open, the bar turns solid so it matches the panel below */
  .site-header.dropdown-open {
    background: var(--menu-open-bg);
    border-bottom-color: transparent;
  }
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Options line up with the start of the menu links */
    padding: 0.75rem max(2rem, calc(100% - var(--nav-left, 300px) - 540px)) 1.5rem
      calc(var(--nav-left, 300px) - 0.8rem);
    columns: 2;
    column-gap: 1.5rem;
    background: var(--menu-open-bg);
    border-bottom: 1px solid var(--medium-pink);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 22px 30px -14px rgba(68, 50, 43, 0.18);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s var(--ease-out), visibility 0s linear 0.15s;
  }
  .dropdown li {
    break-inside: avoid;
  }
  /* Health Conditions: four down the left, four down the right */
  .dropdown li:nth-child(5) {
    break-before: column;
  }
  .has-dropdown.is-open .dropdown,
  html:not(.js) .has-dropdown:hover .dropdown,
  html:not(.js) .has-dropdown:focus-within .dropdown {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .dropdown-link {
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.9375rem;
  }
  .dropdown-link .icon-arrow {
    opacity: 0.45;
    transform: none;
  }
  .dropdown-link:hover,
  .dropdown-link:focus-visible {
    background: rgba(254, 252, 245, 0.95);
    color: var(--plum);
  }
  .dropdown-link:hover .icon-arrow,
  .dropdown-link:focus-visible .icon-arrow {
    opacity: 1;
  }
  .dropdown-link[aria-current="page"] {
    background: rgba(254, 252, 245, 0.95);
    color: var(--plum);
    font-weight: 600;
  }
}

/* ==========================================================
   PAGE SECTIONS
   ========================================================== */
.section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.section--pink {
  background: var(--light-pink);
}
.section--espresso {
  background: var(--espresso);
  color: var(--cream);
}
.section--espresso h2,
.section--espresso h3 {
  color: var(--cream);
}
.section--espresso h2 em,
.section--espresso h3 em {
  color: var(--medium-pink);
}

.page-hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Inner pages: heading and text share one column, so lines end at the same width */
.page-hero--inner .container,
.prose {
  max-width: 900px;
}
.prose {
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.prose > .container {
  padding-inline: 0;
}
.prose h2 {
  margin-top: 1.6em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose li::marker {
  color: var(--plum);
}

/* A photo with wording on top of it — dark gradient keeps text readable */
.photo-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--cream);
}
.photo-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-gradient);
  pointer-events: none;
}
.photo-overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.photo-overlay-text h2,
.photo-overlay-text h3 {
  color: var(--cream);
}

/* Landing pages: a list of link cards to the pages beneath */
.link-cards {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0 !important;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.link-cards li {
  margin: 0 !important;
}
.link-cards a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.25rem;
  background: var(--light-pink);
  border-radius: var(--radius);
  color: var(--espresso);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.link-cards a:hover {
  background: var(--plum);
  color: var(--cream);
}
.link-cards .icon-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Links between a Health Condition page and its Resources page */
.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--medium-pink);
}
.text-link {
  font-weight: 600;
}

/* Notice box (e.g. placeholder pages) */
.notice {
  padding: 1.25rem 1.5rem;
  background: var(--light-pink);
  border-left: 4px solid var(--plum);
  border-radius: 8px;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  background: var(--espresso);
  color: var(--cream);
  font-size: 0.9375rem;
  padding-top: clamp(2.25rem, 4vw, 3rem);
}
.site-footer a {
  color: var(--light-pink);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cream);
  text-decoration: underline;
}
.site-footer :focus-visible {
  outline-color: var(--light-pink);
}

.footer-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
/* Phones and tablets: lists run side by side instead of in one long column */
@media (max-width: 1023px) {
  .footer-logo img {
    height: 44px;
  }
  .footer-conditions ul {
    columns: 2;
    column-gap: 1.25rem;
  }
  /* Start the right-hand column at the fifth condition (4 left, 4 right) */
  .footer-conditions li:nth-child(5) {
    break-before: column;
  }
  .footer-conditions li {
    break-inside: avoid;
  }
  .footer-grid {
    gap: 1.25rem;
  }
  .footer-col li {
    margin-bottom: 0.15rem;
    line-height: 1.45;
  }
  .footer-brand p {
    margin-bottom: 0.3rem;
  }
  .footer-bottom {
    margin-top: 1.25rem;
    gap: 0.25rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.3fr 0.7fr 1.5fr 1fr;
    gap: 2rem;
  }
  /* The eight conditions sit in two short columns instead of one long one */
  /* The eight conditions: four down the left, four down the right */
  .footer-conditions ul {
    columns: 2;
    column-gap: 1.5rem;
  }
  /* Start the right-hand column at the fifth condition (4 left, 4 right) */
  .footer-conditions li:nth-child(5) {
    break-before: column;
  }
  .footer-conditions li {
    break-inside: avoid;
  }
}

.footer-logo {
  display: inline-block;
  margin-bottom: 0.75rem;
}
.footer-logo img {
  width: auto;
  height: 52px;
}
.footer-brand p {
  margin-bottom: 0.6rem;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--plum);
  display: block;
  width: fit-content; /* line only as wide as the heading text */
}
/* "Health Conditions" line runs across both columns of conditions */
.footer-conditions .footer-heading {
  width: auto;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 0.3rem;
}
.footer-col li a {
  display: inline-block;
  padding-block: 0.1rem;
}

.social-links {
  display: flex;
  gap: 0.6rem;
  margin: 1.5rem 0 0 !important;
}
.footer-col .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--medium-pink);
  border-radius: 50%;
}
.social-links a:hover {
  background: var(--light-pink);
  color: var(--espresso);
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.75rem;
  padding-block: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--medium-pink);
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid rgba(223, 184, 187, 0.35);
}
.footer-bottom p {
  margin: 0;
}

/* ==========================================================
   SCROLL ANIMATION — gentle fade-and-rise
   Only runs when JavaScript works AND the visitor hasn't
   asked their device to reduce motion.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal],
  .js .prose > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  }
  .js [data-reveal].is-visible,
  .js .prose > .is-visible,
  .js.reveal-all [data-reveal],
  .js.reveal-all .prose > * {
    opacity: 1;
    transform: none;
  }
}

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

/* Very small phones: keep both booking buttons comfortably inside their pills */
@media (max-width: 420px) {
  .header-actions .btn {
    font-size: 0.875rem; /* never below 14px */
    padding-inline: 0.35rem;
  }
}
/* The smallest phones (under 360px): button wording may wrap onto two short lines */
@media (max-width: 359px) {
  .header-actions .btn {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }
}

/* ==========================================================
   HOME PAGE
   ========================================================== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
.btn .icon-arrow {
  width: 18px;
  height: 18px;
}
/* Cream button, used on top of photos */
.btn-cream {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}
.btn-cream:hover {
  background: var(--light-pink);
  border-color: var(--light-pink);
  color: var(--espresso);
}
/* Credentials line (always shows the registration number) */
.credential {
  font-size: 0.875rem;
  color: var(--plum);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.section--sunrise {
  background: var(--menu-open-bg);
}
.section > .container > .lede {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---------- 1. Top section ---------- */
.home-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.home-hero-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .home-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.home-hero h1 {
  margin-bottom: 0.4em;
}
.home-hero-photo {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  max-height: 560px;
}
@media (max-width: 959px) {
  .home-hero-photo {
    aspect-ratio: 4 / 3;
  }
}
.home-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center; /* keeps the couple centred in the tall frame */
}
.fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.fact-list li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--medium-pink);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  background: rgba(248, 220, 230, 0.4);
}
.fact-list a {
  color: var(--espresso);
  text-decoration: none;
  font-weight: 600;
}
.fact-list a:hover {
  color: var(--plum);
}

/* ---------- 2. Start here: expanding photo cards ---------- */
.xcard {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--espresso);
  color: var(--cream);
}
.xcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xcard::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Deeper Espresso fade than other photos, so the card words stand out (owner's request) */
  background: linear-gradient(
    to top,
    rgba(68, 50, 43, 0.96) 0%,
    rgba(68, 50, 43, 0.85) 25%,
    rgba(68, 50, 43, 0.45) 50%,
    rgba(68, 50, 43, 0) 72%
  );
  pointer-events: none;
}
.xcard-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.xcard-num {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--light-pink);
  margin-bottom: 0.25rem;
}
.xcard h3 {
  color: var(--cream);
  margin: 0 0 0.5rem;
}
.xcard-more p {
  margin: 0 0 1rem;
}
.xcard-more .btn {
  min-height: 40px;
  padding: 0.45rem 1.1rem;
}

/* Phones and touchscreen tablets: swipe carousel */
.xcards-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.xcards-track::-webkit-scrollbar {
  display: none;
}
.xcard {
  flex: 0 0 86%;
  height: 440px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .xcard {
    flex-basis: calc(46% - 0.5rem); /* about two cards plus the edge of the next */
  }
}
.xcards-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
.round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--espresso);
  border-radius: 50%;
  background: var(--cream);
  color: var(--espresso);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
@media (hover: hover) {
  .round-btn:hover:not(:disabled) {
    background: var(--espresso);
    color: var(--cream);
  }
}
.round-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.xcards-prev .icon-arrow {
  transform: rotate(180deg);
}

/* Desktop with a mouse: a row of four cards; the one you point at expands.
   Smoothness: the card width glides, the title never re-wraps (fixed width),
   and the description grows open gradually while fading in. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .xcards-track {
    overflow: visible;
    scroll-snap-type: none;
    height: 460px;
  }
  .xcard {
    flex: 1 1 0;
    height: auto;
    min-width: 0;
    transition: flex-grow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: flex-grow;
  }
  .xcards-track:hover .xcard:hover,
  .xcard:focus-within {
    flex-grow: 2.6;
  }
  .xcard img {
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .xcard:hover img,
  .xcard:focus-within img {
    transform: scale(1.04);
  }
  .xcard h3 {
    width: 190px; /* keeps the title from re-wrapping while the card widens */
  }
  .xcard-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .xcard-more-inner {
    overflow: hidden;
    min-height: 0;
    width: 380px; /* fixed width so the words don't reflow as the card grows */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .xcard:hover .xcard-more,
  .xcard:focus-within .xcard-more {
    grid-template-rows: 1fr;
  }
  .xcard:hover .xcard-more-inner,
  .xcard:focus-within .xcard-more-inner {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
  }
  .xcards-nav {
    display: none;
  }
}

/* ---------- 3. Meet Katie ---------- */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 0.8fr 1.2fr;
  }
}
.split-photo {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 460px;
}
.split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 4. Specialties ---------- */
.specialties {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .specialties {
    grid-template-columns: 1.25fr 1fr; /* kidney disease a little larger */
  }
}
.specialty {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 20px;
  background: var(--cream);
  color: var(--espresso);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.specialty:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--espresso-shadow);
}
.specialty h3 {
  margin: 0.25rem 0 0.25rem;
}
.specialty p {
  margin: 0 0 1rem;
}
.specialty-tag {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--light-pink);
  color: var(--plum);
  font-size: 0.875rem;
  font-weight: 600;
}
.specialty-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--plum);
}
.specialty-link .icon-arrow {
  width: 18px;
  height: 18px;
}
/* Kidney disease — main focus — in Plum so it stands out most */
.specialty--main {
  background: var(--plum);
  color: var(--cream);
}
.specialty--main h3,
.specialty--main .specialty-link {
  color: var(--cream);
}
.specialty--main .specialty-tag {
  background: var(--cream);
  color: var(--plum);
}

/* ---------- 5. Health conditions list ---------- */
.cond-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--medium-pink);
}
.cond-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--medium-pink);
  color: var(--espresso);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cond-link .icon-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.2s var(--ease-out);
}
/* Highlight: text turns Plum and the underline thickens */
.cond-link:hover,
.cond-link:focus-visible,
.cond-link.is-tapped {
  color: var(--plum);
  border-bottom-color: var(--plum);
  box-shadow: 0 1px 0 var(--plum);
}
.cond-photo {
  display: none;
}
.cond-note {
  margin-top: 1.25rem;
}
/* Desktop with a mouse: list on the left, photo on the right */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .cond {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
  }
  .cond-link.is-active {
    color: var(--plum);
    border-bottom-color: var(--plum);
    box-shadow: 0 1px 0 var(--plum);
  }
  .cond-link.is-active .icon-arrow {
    transform: translateX(4px);
  }
  .cond-photo {
    display: block;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 420px;
  }
  .cond-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .cond-photo img.is-active {
    opacity: 1;
  }
}

/* ---------- 6. How Numii works ---------- */
.points {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
@media (min-width: 760px) {
  .points {
    grid-template-columns: 1fr 1fr;
  }
}
.points li {
  padding: 1.5rem;
  background: var(--cream);
  border-radius: 18px;
}
.points h3 {
  font-size: 1.125rem;
  margin-bottom: 0.4rem;
}
.points p {
  margin: 0;
}
.steps-title {
  margin-bottom: 1rem;
}
.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
  font-weight: 700;
}
.steps h4 {
  margin: 0.4rem 0 0.3rem;
  font-size: 1.125rem;
}
.steps p {
  margin: 0;
}
#what-to-expect {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
#what-to-expect .steps {
  margin-bottom: 0;
}

/* ---------- 7. Packages ---------- */
.packages {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .packages {
    grid-template-columns: repeat(3, 1fr);
  }
}
.package {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--light-pink);
  border-radius: 20px;
}
.package h3 {
  margin-bottom: 0.25rem;
}
.package-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.package-price span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--espresso);
}
.package ul {
  margin: 0 0 1.25rem;
  padding-left: 1.2em;
}
.package li {
  margin-bottom: 0.3rem;
}
.package li::marker {
  color: var(--plum);
}
.package-links {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.free-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--medium-pink);
  border-radius: 18px;
}
.free-call p {
  margin: 0;
  flex: 1 1 380px;
}

/* ---------- 8. Closing invitation ---------- */
.closing {
  text-align: center;
}
.closing .lede {
  margin-inline: auto;
}
.closing .btn-row {
  justify-content: center;
  margin-bottom: 0;
}

/* ---------- Home revisions ---------- */
/* Top section: three facts + credentials, each with a small plum symbol */
.hero-facts {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem; /* 14px — the site's minimum */
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(68, 50, 43, 0.85);
  line-height: 1.4;
}
.hero-facts .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--plum);
}

/* The Numii approach: four short, scannable points with symbols */
.points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--light-pink);
}
.point-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
}
.points h3 {
  margin: 0.15rem 0 0.25rem;
}
.points + .btn-row,
#how-it-works .points {
  margin-bottom: 0;
}

/* Packages: value compared with booking separately */
.package-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}
.package-save {
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: var(--cream);
  font-weight: 700;
}
.package-sub {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum);
}
.package ul.package-extras {
  list-style: none;
  padding-left: 0;
}
.package-extras li {
  position: relative;
  padding-left: 1.5em;
}
.package-extras li::before {
  content: "+";
  position: absolute;
  left: 0.2em;
  font-weight: 700;
  color: var(--plum);
}
.after-note {
  margin: 1rem 0 0;
}

/* Credentials as a pill-style label */
.credential-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--medium-pink);
  border-radius: var(--radius-pill);
  background: var(--light-pink);
  color: var(--plum);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}
.credential-pill .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* "The Numii approach" block on the About Us page */
.home-hero .hero-facts {
  margin: 0 0 1.5rem;
}

/* "Book This Package" button at the bottom of each package card */
.package-book {
  margin-top: auto;
  align-self: flex-start;
}
.package ul.package-extras {
  margin-bottom: 1.5rem;
}

/* Espresso sections (Home: "Start here") — cream text, light pink accents */
.section--espresso .eyebrow,
.section--espresso h2 em,
.section--espresso h3 em {
  color: var(--light-pink);
}
.section--espresso p,
.section--espresso .lede {
  color: var(--cream);
}
.section--espresso .round-btn {
  border-color: var(--cream);
}

/* Home: "Health conditions" — the closing section's pink-to-cream wash,
   mirrored (pink on the right, cream on the left) so the two differ */
.section--sunrise-reverse {
  background: linear-gradient(270deg, #fae6eb 0%, #fcf1ec 45%, #fefcf5 100%);
}

/* Packages: each card has its own colour (set by p.tone on the Home page) */
.package--plum,
.package--espresso {
  color: var(--cream);
}
.package--plum { background: var(--plum); }
.package--espresso { background: var(--espresso); }
.package--plum h3, .package--espresso h3,
.package--plum .package-price, .package--espresso .package-price,
.package--plum .package-price span, .package--espresso .package-price span {
  color: var(--cream);
}
.package--plum .package-sub, .package--espresso .package-sub,
.package--plum li::marker, .package--espresso li::marker,
.package--plum .package-extras li::before, .package--espresso .package-extras li::before {
  color: var(--light-pink);
}
.package--plum .package-save, .package--espresso .package-save,
.package--plum .package-book, .package--espresso .package-book {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--plum);
}
.package--plum .package-book:hover, .package--espresso .package-book:hover {
  background: var(--light-pink);
  border-color: var(--light-pink);
  color: var(--espresso);
}
.package--medium-pink { background: var(--medium-pink); }
/* Plum is too faint on Medium Pink, so labels and price use Espresso there */
.package--medium-pink .package-price,
.package--medium-pink .package-sub,
.package--medium-pink li::marker,
.package--medium-pink .package-extras li::before {
  color: var(--espresso);
}
.package--light-pink { background: var(--light-pink); }
.package--cream {
  background: var(--cream);
  border: 1.5px solid var(--medium-pink);
}

/* Price and "Save" tag on one line */
.package-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1rem;
}
.package-price .package-save {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-left: 0.25rem;
}
.package--plum .package-price .package-save,
.package--espresso .package-price .package-save {
  color: var(--plum);
}
.package--medium-pink .package-price .package-save,
.package--light-pink .package-price .package-save,
.package--cream .package-price .package-save {
  color: var(--cream);
}

/* Kidney Diet Clarity card: Soft Blush background (owner-approved extra shade) with Plum accents */
.package--blush { background: #fae6ec; }
.package--blush .package-price .package-save { color: var(--cream); }

/* Eating Well Through Cancer card (Medium Pink): Espresso accents instead of Plum */
.package--medium-pink .package-save,
.package--medium-pink .package-book {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}
.package--medium-pink .package-book:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}

/* ==========================================================
   ABOUT (landing) PAGE
   ========================================================== */
.page-intro {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.page-intro h1 {
  margin-bottom: 0.4em;
}
.page-intro .lede {
  margin-bottom: 0;
}

/* Navigation cards: each whole card is a link */
.nav-cards {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 860px) {
  .nav-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
.nav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-radius: 20px;
  color: var(--espresso);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}
.nav-card:hover,
.nav-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--plum);
  box-shadow: 0 16px 34px var(--espresso-shadow);
}
.nav-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
}
.nav-card-num {
  position: absolute;
  top: clamp(1.5rem, 2.5vw, 2rem);
  right: clamp(1.5rem, 2.5vw, 2rem);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--medium-pink);
}
.nav-card h3 {
  margin: 0 0 0.4rem;
}
.nav-card p {
  margin: 0 0 1.25rem;
}
.nav-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--plum);
}
.nav-card-link .icon-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease-out);
}
.nav-card:hover .nav-card-link .icon-arrow {
  transform: translateX(4px);
}

/* One continuous fade down the page (cream at the top to soft blush at the bottom).
   Used on the About landing page; reusable on other short pages. */
.page-fade {
  background: linear-gradient(180deg, #fefcf5 0%, #fefcf5 22%, #fcf0f2 60%, #fae6ec 100%);
}
.page-fade > section {
  background: transparent;
}
.page-fade .page-fade-cards {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* Nav cards: icon and title side by side on one line */
.nav-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
  padding-right: 2rem; /* room for the number */
}
.nav-card-head .nav-card-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-bottom: 0;
}
.nav-card-head h3 {
  margin: 0;
}
.nav-card p {
  margin-bottom: 1rem;
}

/* Nav cards (About page, owner's choice #9): thick colour band across the top,
   and the link is a pill button in the same colour. */
.nav-card {
  border-top: 10px solid var(--band);
}
.nav-card:hover,
.nav-card:focus-visible {
  border-top-color: var(--band);
}
.nav-card--pink { --band: var(--medium-pink); --pill-text: var(--espresso); }
.nav-card--plum { --band: var(--plum); --pill-text: var(--cream); }
.nav-card--espresso { --band: var(--espresso); --pill-text: var(--cream); }
.nav-card .nav-card-link {
  align-self: flex-start;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--band);
  color: var(--pill-text);
  font-size: 1rem;
}
.nav-card .nav-card-head .nav-card-icon {
  background: var(--band);
  color: var(--pill-text);
}

/* ==========================================================
   ABOUT US PAGE
   ========================================================== */
.au-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.au-hero-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.au-hero .au-hero-text > .lede {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .au-hero-grid {
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-areas: "text photo" "meet photo";
    row-gap: 0;
  }
  .au-hero-text { grid-area: text; align-self: end; }
  .au-hero-photo { grid-area: photo; }
  .au-meet { grid-area: meet; align-self: start; }
}
.au-hero .lede {
  margin-bottom: 0;
}
.au-hero-photo {
  position: relative;
  margin: 0 0 2.5rem;
  max-width: 420px;
}
.au-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
}
/* Credentials card overlapping the bottom of Katie's photo */
.au-cred {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1rem 1.25rem;
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-left: 6px solid var(--plum);
  border-radius: 16px;
  box-shadow: 0 12px 28px var(--espresso-shadow);
  font-size: 0.875rem;
  line-height: 1.45;
}
.au-cred strong {
  font-size: 1.125rem;
  color: var(--espresso);
}
.au-cred span:last-child {
  color: var(--plum);
  font-weight: 600;
}

/* The Numii approach: three cards */
.au-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 860px) {
  .au-points {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
.au-points li {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-radius: 20px;
}
.au-points h3 {
  margin: 1rem 0 0.4rem;
}
.au-points p {
  margin: 0;
}
.au-point-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
}

/* Education & experience: heading, intro paragraph, then "Education"
   (plain text credentials split by a thin line) and "Clinical experience"
   (three cards) */
.au-sublabel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso);
}
.au-sublabel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--medium-pink);
}
.au-sublabel--gap {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.au-creds {
  display: grid;
}
.au-cred-item p {
  margin: 0;
}
.au-cred-item .au-cred-title {
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.au-cred-item .au-cred-school {
  margin-top: 0.35rem;
  color: var(--plum);
  font-weight: 600;
}
/* Phones: stacked, with a thin line between */
.au-cred-item + .au-cred-item {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--medium-pink);
}
/* Wider screens: side by side, with a thin vertical line between */
@media (min-width: 760px) {
  .au-creds {
    grid-template-columns: 1fr 1fr;
  }
  .au-cred-item + .au-cred-item {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    border-left: 1px solid var(--medium-pink);
  }
  .au-cred-item:first-child {
    padding-right: clamp(1.5rem, 4vw, 3rem);
  }
}
.au-breadth {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 860px) {
  .au-breadth {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
.au-breadth li {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-top: 10px solid var(--band);
  border-radius: 20px;
  box-shadow: 0 10px 26px var(--espresso-shadow);
}
.au-breadth--pink { --band: var(--medium-pink); --band-text: var(--espresso); }
.au-breadth--plum { --band: var(--plum); --band-text: var(--cream); }
.au-breadth--espresso { --band: var(--espresso); --band-text: var(--cream); }
.au-breadth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--band);
  color: var(--band-text);
}
.au-breadth h3 {
  margin: 1rem 0 0.35rem;
}
.au-breadth-tags {
  margin: 0 0 0.75rem;
  color: var(--plum);
  font-weight: 600;
  line-height: 1.45;
}
.au-breadth p:last-child {
  margin-bottom: 0;
}
/* Meet Katie sits inside the top section, under the headline */
.au-meet {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--medium-pink);
}
.au-meet h2 {
  margin-bottom: 0.6rem;
}
.au-meet p:last-child {
  margin-bottom: 0;
}

/* Backgrounds (owner's choice): soft wash at the top, Espresso approach,
   cream education, wash at the end */
.au-hero,
.au-closing {
  background: var(--menu-open-bg);
}
.au-approach {
  background: var(--espresso);
}
.au-approach h2,
.au-approach > .container > .lede {
  color: var(--cream);
}
.au-approach .eyebrow,
.au-approach h2 em {
  color: var(--light-pink);
}

/* ==========================================================
   SERVICES PAGE
   ========================================================== */
.sv-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--menu-open-bg);
}

/* Appointment price cards (owner's design A) */
.sv-hero > .container > .lede {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.sv-prices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .sv-prices { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sv-prices { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.sv-price {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 1.75rem);
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-top: 10px solid var(--band);
  border-radius: 20px;
}
.sv-price--pink { --band: var(--medium-pink); --band-text: var(--espresso); }
.sv-price--plum { --band: var(--plum); --band-text: var(--cream); }
.sv-price--espresso { --band: var(--espresso); --band-text: var(--cream); }
/* Follow-Up: owner-approved extra shade halfway between Plum and Espresso */
.sv-price--mulberry { --band: #6c3e46; --band-text: var(--cream); }
.sv-price h3 {
  margin: 0 0 0.6rem;
}
.sv-price-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.sv-price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--plum);
}
.sv-price-cad {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--espresso);
}
/* Appointment length in a small pill (like the "Save $60" tag) */
.sv-price-length {
  align-self: center;
  margin-left: 0.35rem;
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--band);
  color: var(--band-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}
.sv-price p {
  margin: 0;
}
/* "Book Here" button: a pill in the card's band colour, lined up along the bottom */
.sv-price-book {
  margin-top: auto;
  align-self: flex-start;
  background: var(--band);
  border-color: var(--band);
  color: var(--band-text);
}
.sv-price .sv-price-desc {
  margin-bottom: 1.25rem;
}
.sv-price-book:hover,
.sv-price-book:focus-visible {
  background: var(--cream);
  border-color: var(--band);
  color: var(--espresso);
}
.sv-price .sv-price-meta {
  margin-bottom: 1rem;
}

/* Packages sit on cream (as on Home) */

/* Assessment steps on Espresso */
.sv-assess {
  background: var(--espresso);
}
.sv-assess h2,
.sv-assess > .container > .lede,
.sv-steps h3,
.sv-steps p {
  color: var(--cream);
}
.sv-assess .eyebrow,
.sv-assess h2 em {
  color: var(--light-pink);
}
.sv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .sv-steps { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sv-steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
}
.sv-steps li {
  padding-top: 1rem;
  border-top: 1px solid var(--plum);
}
.sv-step-num {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--medium-pink);
}
.sv-steps h3 {
  margin: 0.4rem 0 0.35rem;
}
.sv-steps p {
  margin: 0;
}

/* Appointment policy + "Still have questions?" boxes, side by side */
.sv-boxes {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .sv-boxes { grid-template-columns: 1fr 1fr; }
}
.sv-policy {
  padding-top: 0;
}
.sv-callout {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--light-pink);
  border-left: 6px solid var(--plum);
  border-radius: 20px;
}
.sv-callout h2 {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
}
.sv-callout p {
  margin: 0;
}

.sv-callout .btn-row {
  margin: 1.25rem 0 0;
}
/* The light-pink button would vanish on the light-pink box, so it turns Cream here */
.sv-callout .btn-outline {
  background: var(--cream);
  border-color: var(--medium-pink);
}

/* ==========================================================
   FAQ PAGE
   ========================================================== */
.faq-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  background: var(--menu-open-bg);
}
.faq-hero .lede {
  margin-bottom: 1.5rem;
}
/* Topic tiles (owner's design 12): jump to each group; colour bands match the Services cards */
.faq-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .faq-nav { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.faq-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-top: 10px solid var(--band);
  border-radius: 20px;
  color: var(--espresso);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.faq-tile--1 { --band: var(--medium-pink); }
.faq-tile--2 { --band: var(--plum); }
.faq-tile--3 { --band: #6c3e46; }
.faq-tile--4 { --band: var(--espresso); }
.faq-tile:hover,
.faq-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px var(--espresso-shadow);
}
.faq-tile-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.faq-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--plum);
}
.faq-tile-link .icon-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease-out);
}
.faq-tile:hover .faq-tile-link .icon-arrow {
  transform: translateX(3px);
}
.faq-group + .faq-group {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.faq-group {
  scroll-margin-top: 90px;
}
.faq-group-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}
.faq-list {
  border-top: 1px solid var(--medium-pink);
}
.faq-item {
  border-bottom: 1px solid var(--medium-pink);
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-num {
  flex-shrink: 0;
  width: 2.25rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--plum);
}
.faq-q {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
}
.faq-item summary:hover .faq-q {
  color: var(--plum);
}
/* Plus that turns into a minus when open */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--plum);
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--plum);
  transition: transform 0.25s var(--ease-out);
}
.faq-toggle::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-toggle {
  background: var(--plum);
}
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background: var(--cream);
}
.faq-item[open] .faq-toggle::after {
  transform: rotate(0deg);
}
.faq-a {
  padding: 0 3rem 1.25rem 3.25rem;
}
.faq-a p {
  margin: 0 0 0.75rem;
}
.faq-a p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .faq-a {
    padding: 0 0 1.25rem;
  }
}
.faq-end {
  padding-top: 0;
}

/* ==========================================================
   HEALTH CONDITIONS LANDING PAGE
   ========================================================== */
.hc-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
  /* The pink wash fades gently down into the cream page, so there's no line before the cards */
  background:
    linear-gradient(180deg, rgba(254, 252, 245, 0) 35%, #fefcf5 100%),
    var(--menu-open-bg);
}
.hc-hero .lede {
  margin-bottom: 0;
}
.hc-section {
  padding-top: 0;
}
/* Condition cards (owner's design: P1 + P10 combined) */
.hc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .hc-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hc-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.hc-tone--pink { --band: var(--medium-pink); --band-text: var(--espresso); }
.hc-tone--plum { --band: var(--plum); --band-text: var(--cream); }
.hc-tone--mulberry { --band: #6c3e46; --band-text: var(--cream); }
.hc-tone--espresso { --band: var(--espresso); --band-text: var(--cream); }
.hc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-radius: 20px;
  color: var(--espresso);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.25s;
}
/* Pointing at a card: a pronounced shadow only (owner's choice, effect A).
   The card itself doesn't move (a moving card made Safari redraw the photo
   at full size). Shadow = see-through Espresso. */
.hc-card:hover,
.hc-card:focus-visible {
  box-shadow: 0 22px 44px rgba(68, 50, 43, 0.26), 0 6px 14px rgba(68, 50, 43, 0.12);
}
/* Photo across the top, with the card's colour band underneath.
   The photo keeps its own fixed 4:3 shape so browsers never resize it. */
.hc-photo {
  display: block;
  overflow: hidden;
  border-bottom: 8px solid var(--band);
}
.hc-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hc-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1.25rem 1.25rem 1.4rem;
}
.hc-num {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--plum);
}
.hc-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.hc-desc {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}
/* "Learn more" pill in the card's colour */
.hc-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--band);
  color: var(--band-text);
  font-weight: 600;
}
.hc-more .icon-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease-out);
}
.hc-card:hover .hc-more .icon-arrow {
  transform: translateX(4px);
}

/* ==========================================================
   HEALTH CONDITION PAGES (one shared layout — condition.njk)
   Owner's choice: design 2 (photo banner top) + 10 (one continuous
   fade, pink panels) + 8 (timeline steps).
   ========================================================== */
/* Page background: cream all the way down (owner's option D — less pink) */
.cd-page {
  background: var(--cream);
}
/* Closing section: fades very gently from cream at its top to soft blush */
.cd-closing {
  background: linear-gradient(180deg, #fefcf5 0%, #fcf1f2 55%, #fae6ec 100%);
}

/* 2 — full-width photo at the top, words over a soft Espresso gradient */
.cd-hero {
  position: relative;
  overflow: hidden;
}
.cd-hero-photo {
  position: absolute;
  inset: 0;
}
.cd-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* keep faces in view in the wide, short strip */
}
/* Per-photo adjustments (owner's requests) */
.cd-hero--diabetes-and-prediabetes .cd-hero-photo img { object-position: center 85%; }
.cd-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(68, 50, 43, 0.88) 0%, rgba(68, 50, 43, 0.6) 55%, rgba(68, 50, 43, 0.3) 100%);
}
@media (max-width: 759px) {
  .cd-hero-photo::after { background: rgba(68, 50, 43, 0.78); }
}
.cd-hero-grid { display: block; }
.cd-hero-text {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.cd-hero-text h1,
.cd-hero-text .lede { color: var(--cream); }
.cd-hero-text .eyebrow,
.cd-hero-text h1 em { color: var(--light-pink); }
.cd-hero .btn-row { margin-bottom: 0; }
.cd-hero .btn-outline { background: var(--cream); border-color: var(--cream); }

/* How Numii can help — colour-band cards */
.cd-tone--pink { --band: var(--medium-pink); --band-text: var(--espresso); }
.cd-tone--plum { --band: var(--plum); --band-text: var(--cream); }
.cd-tone--mulberry { --band: #6c3e46; --band-text: var(--cream); }
.cd-tone--espresso { --band: var(--espresso); --band-text: var(--cream); }
.cd-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .cd-points { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cd-points { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.cd-point {
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-top: 10px solid var(--band);
  border-radius: 20px;
}
.cd-point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--band);
  color: var(--band-text);
}
.cd-point-num { display: none; }
.cd-point h3 { margin: 1rem 0 0.4rem; font-size: 1.125rem; }
.cd-point p { margin: 0; }

/* "Who this is for" (Espresso) and the package (Light Pink) sit in rounded panels */
.cd-who,
.cd-package { padding-block: clamp(0.75rem, 2vw, 1.5rem); }
.cd-who > .container,
.cd-package > .container {
  /* Narrower than the screen, so the panel keeps a side gap on phones too */
  width: calc(100% - 2 * var(--gutter));
  background: var(--light-pink);
  border-radius: 32px;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.cd-who > .container { background: var(--espresso); }
.cd-who h2,
.cd-who .lede,
.cd-who-list li { color: var(--cream); }
.cd-who .eyebrow,
.cd-who h2 em,
.cd-who-list .icon { color: var(--light-pink); }
.cd-who-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem 2rem;
}
@media (min-width: 760px) { .cd-who-list { grid-template-columns: 1fr 1fr; } }
.cd-who-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 1.0625rem;
}
.cd-who-list .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--light-pink);
}

/* 8 — "What to expect" as a timeline (across on computers, down on phones) */
.cd-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.cd-steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--medium-pink);
}
.cd-steps li {
  position: relative;
  padding-left: 76px;
}
.cd-step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.375rem;
}
.cd-steps h3 { margin: 0.75rem 0 0.35rem; }
.cd-steps p { margin: 0; }
@media (min-width: 900px) {
  .cd-steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .cd-steps::before { left: 28px; right: 0; top: 27px; bottom: auto; width: auto; height: 2px; }
  .cd-steps li { padding-left: 0; padding-top: 76px; }
  .cd-steps h3 { margin-top: 0; }
}

/* Package panel: intro beside the matching card */
.cd-package-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .cd-package-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.packages--single { grid-template-columns: 1fr !important; margin: 0; }
.cd-package .package--blush { background: var(--cream); }

/* Free resources card under the closing buttons (owner's option B) */
.cd-res-wrap { margin: 1.5rem 0 0; }
.cd-res-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(68, 50, 43, 0.08);
  color: var(--espresso);
  text-align: left;
  text-decoration: none;
  transition: box-shadow 0.25s;
}
.cd-res-card:hover,
.cd-res-card:focus-visible { box-shadow: 0 14px 30px rgba(68, 50, 43, 0.16); }
.cd-res-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
}
.cd-res-text strong { display: block; font-size: 1.0625rem; }
.cd-res-text span { font-size: 0.9375rem; }
.cd-res-card > .icon-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--plum);
  transition: transform 0.25s var(--ease-out);
}
.cd-res-card:hover > .icon-arrow { transform: translateX(4px); }

/* "See All Services & Pricing" in the package / assessment panels (owner's option A):
   cream pill with a Plum outline — quieter than the Plum "Book" button beside it */
.cd-svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.3rem;
  border: 1.5px solid var(--plum);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--plum);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.cd-svc-btn .icon-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease-out);
}
.cd-svc-btn:hover,
.cd-svc-btn:focus-visible {
  background: var(--plum);
  color: var(--cream);
}
.cd-svc-btn:hover .icon-arrow { transform: translateX(3px); }

/* ==========================================================
   CONTACT US PAGE
   ========================================================== */
.ct-hero {
  /* owner's design 4: the pink wash ends in a gentle downward curve */
  background: var(--menu-open-bg);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
  clip-path: ellipse(120% 100% at 50% 0%);
}
.ct-hero h1 { margin-bottom: 0.4em; }
.ct-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ct-quick a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--cream);
  border: 1.5px solid var(--medium-pink);
  color: var(--espresso);
  font-weight: 600;
  text-decoration: none;
}
.ct-quick a:hover { border-color: var(--plum); color: var(--plum); }
.ct-quick .icon { color: var(--plum); }

/* Form section: heading above, form across the page (owner's request) */
.ct-form-intro { max-width: none; }
.ct-form {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream);
  border: 1px solid var(--medium-pink);
  border-top: 10px solid var(--medium-pink);
  border-radius: 20px;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 16px 34px var(--espresso-shadow);
}
.ct-grid { display: grid; gap: 0 1.25rem; }
@media (min-width: 700px) {
  .ct-grid { grid-template-columns: 1fr 1fr; }
  .ct-wide { grid-column: 1 / -1; }
}
.ct-hidden { position: absolute; left: -9999px; }
.ct-form .ct-field { margin-bottom: 1.25rem; }
.ct-field > label,
.ct-label {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 600;
  color: var(--espresso);
}
.ct-opt { font-weight: 400; font-size: 0.875rem; }
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form select,
.ct-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--medium-pink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--espresso);
  font: inherit;
  font-size: 1rem;
}
.ct-form textarea { min-height: 100px; resize: vertical; }
.ct-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23954962' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
  border-color: var(--plum);
}
.ct-form ::placeholder { color: var(--espresso); opacity: 0.6; }

/* Availability: looks like the other dropdowns, but you can tick more than one */
.ct-multi { position: relative; }
.ct-multi-btn {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0.7rem 2.5rem 0.7rem 0.9rem;
  border: 1.5px solid var(--medium-pink);
  border-radius: 12px;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23954962' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: var(--espresso);
  cursor: pointer;
  list-style: none;
}
.ct-multi-btn::-webkit-details-marker { display: none; }
.ct-multi[open] .ct-multi-btn,
.ct-multi-btn:focus-visible { border-color: var(--plum); outline: 2px solid var(--plum); outline-offset: 1px; }
.ct-multi-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 0.4rem;
  background: var(--cream);
  border: 1.5px solid var(--medium-pink);
  border-radius: 12px;
  box-shadow: 0 16px 34px var(--espresso-shadow);
}
.ct-multi-list label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}
.ct-multi-list label:hover { background: var(--light-pink); }
.ct-checks { border: 0; padding: 0; margin-inline: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.ct-checks legend { float: left; width: 100%; margin-bottom: 0.4rem; }
.ct-checks label { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 40px; margin: 0; font-weight: 400; cursor: pointer; }
.ct-checks input,
.ct-multi-list input { width: 18px; height: 18px; margin: 0; accent-color: var(--plum); }


.ct-submit { margin-top: 0.25rem; }
.ct-note { margin: 0 0 1rem; font-size: 0.875rem; }

.ct-form-sec { background: var(--cream); }
.ct-ways { padding-top: 0; }

/* ==========================================================
   CONDITION RESOURCES PAGES (resource.njk)
   ========================================================== */
.rs-hero {
  background: linear-gradient(180deg, rgba(252, 241, 236, 0) 40%, #fefcf5 100%), var(--menu-open-bg);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}
.rs-hero h1 { margin-bottom: 0.4em; }
.rs-hero .lede { margin-bottom: 0; }
.rs-list { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* Owner's design 2: simple rows with dividers, buttons on the right */
.rs-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--medium-pink); }
.rs-row {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.25rem 0.25rem;
  border-bottom: 1px solid var(--medium-pink);
}
.rs-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--cream);
}
.rs-mid { flex: 1; min-width: 0; }
.rs-t { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.rs-s { display: block; margin-top: 0.2rem; font-size: 0.9375rem; font-weight: 600; color: var(--plum); }
.rs-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--plum);
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.rs-btn:hover { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.rs-btn--outline { background: var(--cream); color: var(--plum); }
.rs-btn--outline:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.rs-btn .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .rs-row { flex-wrap: wrap; align-items: flex-start; }
  .rs-btns { flex-basis: 100%; justify-content: flex-start; padding-left: calc(44px + 1.25rem); }
}
@media (max-width: 380px) {
  .rs-btns { padding-left: 0; }
}
.rs-empty {
  margin: 0;
  padding: 1.5rem 1.75rem;
  background: var(--light-pink);
  border-left: 4px solid var(--plum);
  border-radius: 14px;
}
.rs-disclaimer { margin: 1.5rem 0 0; font-size: 0.875rem; }

/* Owner's option B: "How Numii can help" on an Espresso panel */
.rs-help-sec { padding-top: 0; }
.rs-help {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--espresso);
  border-radius: 24px;
}
.rs-help .eyebrow { color: var(--light-pink); margin-bottom: 0.4rem; }
.rs-help-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--cream);
}
.rs-help-title em { font-family: var(--font-accent); font-style: italic; color: var(--light-pink); }
.rs-help .btn-row { margin: 0; }