/* ==========================================================================
   Reco Heart theme
   1. Tokens
   2. Reset and base
   3. Typography
   4. Layout primitives
   5. Buttons and links
   6. Header and navigation
   7. Footer
   8. Home sections
   9. Recovery hub and guides
   10. Answer blocks and callouts
   11. Size finder
   12. FAQ and accordions
   13. Forms
   14. Motion
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */

:root {
  /*
   * Brand palette, as issued by Reco Heart (Colour References, August 2026).
   * These six are the official values and are never altered:
   *
   *   Gold #b48747   Lighter Gold #e8d799   Darker Gold #72562b
   *   Sand #7d643a   Grey #706f6f           Black #000000
   *
   * Everything below is built from them. Which gold goes where is decided by
   * contrast, not taste: brand Gold is 3.02:1 on the cream page, so it carries
   * borders, icons, buttons and large display type but never body text.
   * Darker Gold is 6.38:1 on cream and is the gold for text on light. Lighter
   * Gold is 12.51:1 on black and is the gold for the dark bands, where it
   * would be invisible on cream. This is why the site never uses one gold.
   */
  --brand-gold:        #b48747;
  --brand-gold-light:  #e8d799;
  --brand-gold-dark:   #72562b;
  --brand-sand:        #7d643a;
  --brand-grey:        #706f6f;
  --brand-black:       #000000;
  --brand-gold-gradient: linear-gradient(135deg, #b48747 0%, #72562b 100%);

  /* Accent roles. */
  --gold:        var(--brand-gold);
  --gold-deep:   var(--brand-gold-dark);
  --gold-light:  var(--brand-gold-light);
  --gold-wash:   #f8f2e4;

  /*
   * Text ladder. Black for headings, a derived dark grey for body, brand Grey
   * for small meta text. All three clear AA on cream, including the meta size
   * the old palette quietly failed.
   */
  --ink:         var(--brand-black);
  --ink-soft:    #4f4e4e;
  /* Brand Grey lands at 4.41:1 on the surface tone, just under AA for the
     small sizes this is used at, so meta text runs a shade darker. */
  --ink-faint:   #6b6a6a;
  /* Bands read as warm deep brown, not black: Nicole's old site banned pure
     black and she raised it twice on the 12 August call. Text stays black. */
  --dark:        #1d1712;

  /* Surfaces, warmed towards Sand so the creams belong to the palette. */
  --bg:          #fbf9f5;
  --surface:     #f4f0e8;
  --card:        #fff;
  --line:        #e5dfd3;
  --line-strong: #cdc2ae;

  /*
   * On black. The dark bands are brand Black now, so their text and hairlines
   * get named tokens rather than a scatter of one-off values: warm creams that
   * sit with the gold, and a hairline that reads as a seam rather than a box.
   */
  --on-dark:        #f2ece0;
  --on-dark-strong: #fbf8f1;
  --on-dark-soft:   #c6c0b4;
  --line-dark:      #2a2724;

  /* Semantic. Distinct from the accent so status never reads as decoration. */
  /* Semantic tints drawn from the palette itself: the green and blue boxes
     were not on the colour scheme and Nicole queried them on the call. Good
     news sits on gold, notes sit on sand. The warm terracotta warning stays,
     because a contraindication must not look like decoration. */
  --ok:          var(--brand-gold-dark);
  --ok-wash:     #f6efdd;
  --note:        var(--brand-sand);
  --note-wash:   #f2ede3;
  --warn:        oklch(52% 0.110 45);
  --warn-wash:   oklch(95% 0.040 45);

  /* Type */
  --font-display: "Marcellus", "Iowan Old Style", Georgia, serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --step--1: 1rem;
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.65vw, 1.80rem);
  --step-3:  clamp(1.75rem, 1.52rem + 1.15vw, 2.45rem);
  --step-4:  clamp(2.10rem, 1.70rem + 2.00vw, 3.20rem);
  --step-5:  clamp(2.40rem, 1.75rem + 3.25vw, 4.10rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --section: clamp(3.25rem, 7vw, 6rem);

  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px -2px oklch(50% 0.04 85 / 0.18);
  --shadow-md: 0 18px 40px -18px oklch(50% 0.06 85 / 0.45);

  --wrap: 1180px;
  --wrap-narrow: 760px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic z-scale. Never use bare numbers. */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer-backdrop: 300;
  --z-drawer: 310;
  --z-toast: 400;
  --z-skip: 500;
}

/* 2. Reset and base ----------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Visible focus everywhere. Keyboard users are not an afterthought. */
:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-skip);
  background: var(--dark); color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* 3. Typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* Sub-headings inside body copy read better in the body face. */
h5, h6 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-1); line-height: 1.3; }

p, li { text-wrap: pretty; }

.lede { font-size: var(--step-1); color: var(--ink-soft); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: var(--sp-3); }
.prose li::marker { color: var(--gold-deep); }
.prose a { font-weight: 600; }
.prose strong { font-weight: 700; }
.prose blockquote {
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; background: var(--surface); }
.table-scroll { overflow-x: auto; }

/* 4. Layout primitives -------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark-strong); }
.section--dark a { color: var(--gold-light); }

.stack { display: flex; flex-direction: column; }
.stack-4 { gap: var(--sp-4); }
.stack-5 { gap: var(--sp-5); }
.stack-6 { gap: var(--sp-6); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}

.section-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 60ch; }
.section-head .lede { max-width: 54ch; }

/* 5. Buttons and links -------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--step-0); line-height: 1.2;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: var(--gold-light); color: var(--dark); }
.btn--ink { background: var(--dark); color: #fff; }
.btn--ink:hover { background: var(--gold-deep); color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 2.3rem; font-size: var(--step-1); }

.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; }
.link-arrow::after { content: "\2192"; transition: transform 0.25s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 6. Header and navigation ---------------------------------------------- */

.announce {
  background: var(--dark);
  color: var(--gold-light);
  text-align: center;
  font-size: var(--step--1);
  padding: 0.6rem 1rem;
}
.announce strong { color: var(--on-dark-strong); }
.announce a { color: var(--gold-light); }

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  /* Plain white at Nicole's request (12 August call): the tinted bar read
     as pale pink on her screen. */
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); padding-block: 0.85rem; }
.site-brand { flex: 0 0 auto; display: flex; align-items: center; }
.site-brand a { display: inline-flex; align-items: center; text-decoration: none; }
/* .custom-logo is the class WordPress puts on the Site Identity logo. */
.site-brand img,
.site-brand .custom-logo { height: 46px; width: auto; max-width: min(300px, 52vw); object-fit: contain; }
.site-brand .site-title { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: 0.02em; text-decoration: none; color: var(--ink); }
@media (max-width: 480px) {
  .site-brand img, .site-brand .custom-logo { height: 38px; }
}

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.75rem); }
.primary-nav a {
  text-decoration: none; font-weight: 600; font-size: 1rem;
  color: var(--ink-soft); white-space: nowrap;
  padding-block: 0.4rem;
  transition: color 0.2s;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a { color: var(--gold-deep); }

/* Sub-menus use fixed-safe absolute positioning inside a non-clipping parent. */
.primary-nav li { position: relative; }
.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0;
  z-index: var(--z-dropdown);
  min-width: 240px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  display: none;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }
.primary-nav .sub-menu a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: 6px; }
.primary-nav .sub-menu a:hover { background: var(--gold-wash); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.basket-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-decoration: none; font-weight: 700; font-size: 1rem;
  border: 1.5px solid var(--gold-deep); color: var(--gold-deep);
  padding: 0.45rem 1.15rem; border-radius: var(--radius-pill);
  transition: background-color 0.2s, color 0.2s;
}
.basket-link:hover { background: var(--gold-deep); color: var(--bg); }
.basket-link__count {
  background: var(--gold-deep); color: #fff;
  min-width: 1.4em; height: 1.4em; padding-inline: 0.35em;
  border-radius: var(--radius-pill);
  font-size: 1rem; display: grid; place-items: center;
}
.basket-link:hover .basket-link__count { background: var(--bg); color: var(--gold-deep); }

.nav-toggle {
  display: none;
  background: transparent; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; cursor: pointer; color: var(--ink);
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: currentColor; }
.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .primary-nav {
    order: 4; width: 100%; margin-left: 0;
    display: none; padding-block: var(--sp-4);
    border-top: 1px solid var(--line);
  }
  /*
   * The open menu is taller than a phone screen, and it lives inside a sticky
   * header, so without its own scrollbar the last items (Reco Bra Story,
   * Contact) sat below the fold and could never be reached. Found by Nicole
   * on her phone, reproduced at 375px.
   */
  .primary-nav.is-open {
    display: block;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li > a { display: block; padding: 0.75rem 0; font-size: var(--step-1); border-bottom: 1px solid var(--line); }
  .primary-nav .sub-menu {
    position: static; display: flex; box-shadow: none; border: 0;
    padding: var(--sp-2) 0 var(--sp-3) var(--sp-4); min-width: 0;
  }
  .site-header__inner { flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
}

/* 7. Footer ------------------------------------------------------------- */

.site-footer { background: var(--dark); color: var(--on-dark); padding-block: var(--sp-7) var(--sp-5); font-size: 1.05rem; }
.site-footer a { color: var(--gold-light); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: var(--sp-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
.footer-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-brand img { height: 42px; width: auto; margin-bottom: var(--sp-4); }
.footer-wordmark { font-family: var(--font-display); font-size: var(--step-1); color: #fff; margin-bottom: var(--sp-4); }
.footer-legal {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between;
  font-size: 1rem; color: var(--on-dark-soft);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* 8. Home sections ------------------------------------------------------ */

.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  /* Lighter on top than below: the first screen should already be content. */
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2.5rem, 6vw, 5rem);
}
/*
 * One display step below the global h1. The headline is twelve words, and at
 * full display size it ran five lines deep and pushed the photograph below
 * the fold on an ordinary laptop. This keeps the drama and puts the product
 * back on the first screen. text-wrap: balance evens the line endings where
 * the browser supports it and costs nothing where it does not.
 */
.hero h1 { font-size: var(--step-4); text-wrap: balance; max-width: 30ch; }
.hero h1 em { font-style: normal; color: var(--gold-deep); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__assurance {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6);
}
.hero__assurance div { font-size: 1rem; color: var(--ink-soft); max-width: 13rem; line-height: 1.45; }
.hero__assurance strong { display: block; color: var(--ink); font-size: 1rem; }
.hero__photo { position: relative; }
.hero__photo img {
  width: 100%; aspect-ratio: 4/4.6; object-fit: cover; object-position: 62% 30%;
  border-radius: 200px 200px var(--radius) var(--radius);
}
.hero__badge {
  position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
  background: var(--dark); color: var(--on-dark-strong);
  font-size: 1rem; white-space: nowrap;
  padding: 0.6rem 1.3rem; border-radius: var(--radius-pill);
}
.hero__badge strong { color: var(--gold-light); font-weight: 600; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { order: -1; max-width: 480px; width: 100%; margin-inline: auto; }
  .hero__photo img { aspect-ratio: 4/3.4; border-radius: var(--radius); }
}
@media (max-width: 520px) {
  /* The badge is longer than a phone is wide; let it wrap rather than clip. */
  .hero__badge {
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 2rem);
    line-height: 1.4;
    border-radius: var(--radius);
  }
}

/*
  Surgery pathways, 2x2.

  Two across rather than four gives each tile room for a real sentence instead
  of a label, which matters because these are the pages people actually need.

  The copy sits over the photograph behind a scrim rather than underneath it.
  That is a deliberate choice given the source imagery: the available stock is a
  mixed set of clinical photographs shot on different backgrounds, and laying
  type over a consistent dark gradient unifies them far better than four
  mismatched pictures sitting in a row of white cards.
*/
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--sp-7);
}
@media (max-width: 680px) {
  .pathway-grid { grid-template-columns: 1fr; }
}

.pathway {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  min-height: 340px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pathway:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.pathway__frame { position: absolute; inset: 0; z-index: -2; }
.pathway img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.pathway:hover img { transform: scale(1.05); }

/* The scrim: dark enough for AA contrast on white type at every image. */
.pathway::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.78) 38%,
    rgba(0,0,0,0.34) 68%,
    rgba(0,0,0,0.18) 100%
  );
}

.pathway__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  justify-content: flex-end;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  min-height: 340px;
}
.pathway__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  color: #fff;
}
.pathway__text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 40ch;
}
.pathway .link-arrow {
  margin-top: var(--sp-2);
  color: var(--gold-light);
  font-size: 1rem;
}

/* Feature diagram */
.features__stage {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem); margin-top: var(--sp-7);
}
.features__product { width: min(380px, 80vw); border-radius: var(--radius); overflow: hidden; }
.features__col { display: flex; flex-direction: column; gap: var(--sp-6); }
.features__col--left { text-align: right; align-items: flex-end; }
.feature h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; }
.feature h3::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 0.6rem; margin-top: -3px; }
.features__col--left .feature h3::before { margin-right: 0; margin-left: 0.6rem; float: right; margin-top: 11px; }
.feature p { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-1); max-width: 24rem; line-height: 1.55; }
@media (max-width: 900px) {
  .features__stage { grid-template-columns: 1fr; }
  .features__product { order: -1; margin-inline: auto; }
  .features__col--left { text-align: left; align-items: flex-start; }
  .features__col--left .feature h3::before { float: none; margin-left: 0; margin-right: 0.6rem; margin-top: -3px; }
  .features__col { gap: var(--sp-5); }
}

.cert-row {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  text-align: center; font-size: 1rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.02em;
}

/* Founder */
.founder-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.founder-photo img { border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; object-position: 50% 40%; }
/* The credit sits under the photo, quiet but legible. It is a licence term. */
.founder-photo figcaption { margin-top: var(--sp-2); }
.founder-grid h2 { max-width: 22ch; }
.founder-grid p { color: var(--ink-soft); margin-top: var(--sp-4); max-width: 54ch; }
@media (max-width: 800px) { .founder-grid { grid-template-columns: 1fr; } }

/* Testimonials */
/*
  Quotes default to ink-on-light and re-colour inside dark bands. The component
  was born inside .section--dark and hard-coded cream text, which was invisible
  the first time a quote was placed on a light page: the trade page endorsement
  and the shop page attribution both shipped as cream on cream.
*/
.quote-lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.42; max-width: 62rem; color: var(--ink); }
.quote-lead .mark { color: var(--gold-deep); font-size: 1.4em; line-height: 0; }
.quote-attr { margin-top: var(--sp-4); font-size: 1rem; color: var(--gold-deep); font-weight: 600; }
.quote-attr span { display: block; color: var(--ink-soft); font-weight: 400; font-size: 1rem; }

.section--dark .quote-lead { color: var(--on-dark); }
.section--dark .quote-lead .mark,
.section--dark .quote-attr { color: var(--gold-light); }
.section--dark .quote-attr span { color: var(--on-dark-soft); }
.quote-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
}
.quote-grid blockquote p { font-size: 1rem; line-height: 1.62; color: var(--on-dark); }
.quote-grid footer { margin-top: var(--sp-4); font-size: 1rem; color: var(--gold-light); font-weight: 600; }
.quote-grid footer span { display: block; color: var(--on-dark-soft); font-weight: 400; font-size: 1rem; }
.clinics-row { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-dark); font-size: 1rem; color: var(--on-dark-soft); }
.clinics-row strong { color: var(--gold-light); font-weight: 600; white-space: nowrap; }

/* Trade strip */
.trade-strip { background: var(--surface); padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.trade-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.trade-strip p { color: var(--ink-soft); max-width: 46rem; }
.trade-strip strong { color: var(--ink); }

/* 9. Recovery hub and guides -------------------------------------------- */

/* The journey rail: the site's primary orientation device. */
.journey {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-6);
  counter-reset: stage;
}
.journey__stage {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.journey__stage:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.journey__when { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); }
.journey__stage h3 { font-size: var(--step-1); }
.journey__stage p { font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }

.guide-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.guide-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.guide-card h3 { font-size: var(--step-1); }
.guide-card p { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }
.guide-card__meta { margin-top: auto; padding-top: var(--sp-3); font-size: 1rem; color: var(--ink-faint); }

/* Article header with medical review provenance: the E-E-A-T signal. */
.guide-header { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-5); }
.guide-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4); font-size: 1rem; color: var(--ink-faint);
}
.guide-meta strong { color: var(--ink-soft); font-weight: 600; }

.reviewer {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--gold-wash); border-radius: var(--radius);
  padding: var(--sp-5); margin-top: var(--sp-6);
}
.reviewer img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.reviewer p { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }
.reviewer strong { display: block; color: var(--ink); font-size: 1rem; }

/* On-page contents. Helps readers and gives crawlers a section map. */
.toc { background: var(--surface); border-radius: var(--radius); padding: var(--sp-5); }
.toc h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
.toc ol { margin-top: var(--sp-3); padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-2); }
.toc a { font-size: 1rem; text-decoration: none; font-weight: 600; }
.toc a:hover { text-decoration: underline; }

.guide-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-7); align-items: start; }
.guide-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 980px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-aside { position: static; }
}

/* 10. Answer blocks and callouts ---------------------------------------- */

/*
  The answer block is the load-bearing SEO/AI device: a short, self-contained,
  literal answer to the page's question, placed before any preamble. Answer
  engines lift this; readers in distress get the answer without scrolling.
*/
.answer {
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.answer__label {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold-deep);
}
.answer__body { margin-top: var(--sp-3); font-size: var(--step-1); line-height: 1.55; }
.answer__body > * + * { margin-top: var(--sp-3); }

.callout {
  border-radius: var(--radius); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.callout h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); }
.callout p { font-size: 1rem; }
/*
 * All three callouts live on the brand palette now, at the client's request:
 * no blue, no green. They stay distinguishable by structure rather than by
 * leaving the palette. A plain note sits on white with a quiet grey spine, a
 * reassurance sits on the gold wash with a gold spine, and a caution gets the
 * deepest wash, the darkest gold spine, and a heading in Darker Gold, so it
 * still reads as the one to slow down for. All text combinations clear AA.
 */
.callout--note { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand-grey); color: var(--ink-soft); }
.callout--care { background: #f0e5d0; border-left: 3px solid var(--brand-gold-dark); color: #453416; }
.callout--care h3 { color: var(--brand-gold-dark); }
.callout--good { background: var(--gold-wash); border-left: 3px solid var(--brand-gold); color: var(--ink-soft); }
.callout a { color: inherit; font-weight: 700; }

/* Clinical safety note. Legally and ethically important on every guide. */
.medical-note {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 1rem; color: var(--ink-faint); line-height: 1.6;
}

.sources { margin-top: var(--sp-6); }
.sources h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.sources ol { margin-top: var(--sp-3); padding-left: 1.2em; font-size: 1rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--sp-2); }

/* Inline product prompt inside guides. Sells without hijacking the answer. */
.inline-product {
  display: flex; gap: var(--sp-5); align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: var(--sp-5);
}
.inline-product img { width: 110px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.inline-product h3 { font-size: var(--step-1); }
.inline-product p { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-1); }
.inline-product .btn { margin-top: var(--sp-3); }
@media (max-width: 560px) { .inline-product { flex-direction: column; align-items: flex-start; } }

/* 11. Size finder -------------------------------------------------------- */

.finder { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
/*
 * The sizing chart is a genuine 15-column table, wider than any phone. It
 * scrolls inside its own box; without this it stretched the whole page to
 * 593px and dragged every section sideways on mobile.
 */
.size-chart { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/*
 * The grid items are a classless wrapper and the aside, and a grid item's
 * default min-width of auto means it refuses to shrink below the table's
 * intrinsic 573px, which re-widened the column no matter what the figure
 * did. min-width: 0 on the items lets the scroll container actually contain.
 */
.finder-layout > * { min-width: 0; }
.size-chart .size-table { min-width: 540px; }
.finder__steps { display: flex; flex-direction: column; gap: var(--sp-6); }
.finder__step { display: flex; flex-direction: column; gap: var(--sp-3); }
.finder__step > h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-1); }
.finder__step p { font-size: 1rem; color: var(--ink-soft); }

.unit-toggle { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px; gap: 3px; }
.unit-toggle button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink-soft);
  padding: 0.35rem 1.1rem; border-radius: var(--radius-pill);
  transition: background-color 0.2s, color 0.2s;
}
.unit-toggle button[aria-pressed="true"] { background: var(--dark); color: #fff; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 22rem; }
.field label { font-weight: 700; font-size: 1rem; }
.field .hint { font-size: 1rem; color: var(--ink-soft); }
.field input[type="number"], .field select, .field input[type="text"], .field input[type="email"] {
  font: inherit; padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  width: 100%;
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--gold-deep); }

.cup-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cup-grid input { position: absolute; opacity: 0; pointer-events: none; }
.cup-grid label {
  display: grid; place-items: center; min-width: 3.4rem;
  padding: 0.6rem 0.8rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  font-weight: 700; font-size: 1rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.cup-grid label:hover { border-color: var(--gold); }
.cup-grid input:checked + label { background: var(--dark); border-color: var(--dark); color: #fff; }
.cup-grid input:focus-visible + label { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

.finder__result {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.result-size {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
}
.result-size__value { font-family: var(--font-display); font-size: var(--step-4); color: var(--gold-deep); line-height: 1; }
.result-size__label { font-size: 1rem; color: var(--ink-soft); }
.result-note { margin-top: var(--sp-4); }

/* Real HTML size table replacing the old JPEG. Machine readable, screen-reader
   readable, and sortable by eye. */
.size-table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.size-table th, .size-table td { padding: 0.4rem 0.3rem; text-align: center; border: 1px solid var(--line); }
.size-table thead th { background: var(--surface); font-weight: 700; white-space: nowrap; }
.size-table tbody th { background: var(--surface); font-weight: 700; }
.size-table td[data-size] { font-weight: 700; color: var(--ink); }
.size-table td[data-size="S"]   { background: var(--on-dark-strong); }
.size-table td[data-size="M"]   { background: #f0e3c2; }
.size-table td[data-size="L"]   { background: #e8d799; color: #3a2c15; }
.size-table td[data-size="XL"]  { background: #d8c091; }
.size-table td[data-size="2XL"] { background: #b48747; color: #000; }
.size-table td[data-size="3XL"] { background: #7d643a; color: #fff; }
.size-table td[data-size="3XL"] { background: #72562b; color: #fff; }
.size-table td.is-empty { background: transparent; }
.size-table td.is-match { outline: 3px solid var(--gold-deep); outline-offset: -3px; }

/* 12. FAQ and accordions ------------------------------------------------ */

.faq-list { max-width: 48rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-1);
  font-weight: 700; font-size: var(--step-0);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.5rem;
  color: var(--gold-deep); transition: transform 0.3s var(--ease-out); flex: 0 0 auto;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > div { padding: 0 var(--sp-1) var(--sp-5); }
.faq-list details p + p { margin-top: var(--sp-3); }
.faq-list details p { color: var(--ink-soft); max-width: 65ch; }

/* 13. Forms ------------------------------------------------------------- */

.wpcf7 form { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 34rem; }
.wpcf7 label { display: flex; flex-direction: column; gap: var(--sp-2); font-weight: 700; font-size: 1rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
  font: inherit; font-weight: 400;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); width: 100%;
}
.wpcf7 textarea { min-height: 9rem; resize: vertical; }
.wpcf7 input[type="submit"] {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--gold); color: var(--dark);
  border: 0; padding: 0.85rem 1.9rem; border-radius: var(--radius-pill);
  align-self: flex-start;
}
.wpcf7 input[type="submit"]:hover { background: var(--gold-light); }
.wpcf7-not-valid-tip { color: oklch(45% 0.15 25); font-weight: 600; font-size: 1rem; }
.wpcf7-response-output { border-radius: var(--radius-sm); padding: var(--sp-4) !important; margin: 0 !important; }

/* Breadcrumbs */
.breadcrumbs { font-size: 1rem; color: var(--ink-faint); padding-block: var(--sp-4); }
.breadcrumbs a { text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--ink-soft); }

/* Pagination */
.pagination { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-7); }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem;
  padding-inline: 0.6rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 700; font-size: 1rem;
}
.pagination .page-numbers.current { background: var(--dark); border-color: var(--dark); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--gold); }

/* 13a. Bespoke pages ------------------------------------------------------ */

/* Testimonials: institution strip under the hero. */
.institution-strip {
  list-style: none;
  padding: var(--sp-5) 0 0;
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-deep);
}
.institution-strip li { white-space: nowrap; }

.quote-lead-grid { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-7); }

.clinician-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
}
.clinician-card p { font-size: 1rem; line-height: 1.62; color: var(--on-dark); }
.clinician-card footer { margin-top: var(--sp-4); font-size: 1rem; color: var(--gold-light); font-weight: 600; }
.clinician-card footer span { display: block; color: var(--on-dark-soft); font-weight: 400; font-size: 1rem; margin-top: 2px; }

/* Patient wall: masonry-like columns so quotes of different lengths pack
   naturally, like cards pinned to a board rather than a rigid grid. */
.patient-grid { columns: 3 300px; column-gap: var(--sp-5); margin-top: var(--sp-6); }
.patient-card {
  break-inside: avoid;
  margin-bottom: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.patient-card p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.patient-card p::before { content: "\201C"; font-family: var(--font-display); font-size: 1.6em; color: var(--gold); line-height: 0; margin-right: 2px; }
.patient-card footer { margin-top: var(--sp-3); font-size: 1rem; font-weight: 700; color: var(--gold-deep); }
.patient-card__source { display: block; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

/* Home patient strip footer: the live Google score (when configured) and the
   route to the full testimonials page share one line, wrapping when narrow. */
.pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.pv-score { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.pv-score .star { color: var(--gold); font-size: 1.1em; }

/* Instructions-for-use pages: the language row under the box PDFs. Pills
   rather than prose links, because "find your language" is a scanning task. */
.ifu-translate { margin-top: var(--sp-7); max-width: 62ch; }
.ifu-translate h3 { font-size: 1.05rem; }
.ifu-translate p { color: var(--ink-soft); margin-top: var(--sp-2); font-size: 1rem; }
.ifu-translate__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); align-items: center; }
.ifu-translate__form select {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  min-width: 12rem;
}
.ifu-translate__form select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.testimonial-cta { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.testimonial-cta p { color: var(--ink-soft); margin-top: var(--sp-3); max-width: 46ch; }
@media (max-width: 800px) { .testimonial-cta { grid-template-columns: 1fr; } }

/* Story page: alternating narrative rows. */
.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.story-row:nth-child(even) .story-row__media { order: 2; }
.story-row__media img { border-radius: var(--radius); width: 100%; object-fit: cover; box-shadow: var(--shadow-md); }
.story-row h2 { max-width: 24ch; }
.story-row .prose { margin-top: var(--sp-4); }
@media (max-width: 820px) {
  .story-row { grid-template-columns: 1fr; }
  .story-row:nth-child(even) .story-row__media { order: 0; }
}

/* Milestone strip on the story page: a genuine sequence, so numbers are honest. */
.milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.milestone { border-top: 2px solid var(--gold); padding-top: var(--sp-4); }
.milestone__when { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold-deep); }
.milestone p { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.5; }

/* Design & features: icon grid from the site's own gold feature icons. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  text-align: center;
}
.spec { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.spec img { width: 64px; height: 64px; object-fit: contain; }
.spec span { font-size: 1rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }

/* Pathway opening: a quiet, dark moment before any information. She is
   frightened; the page acknowledges that before it explains anything. */
.path-opening { background: var(--dark); padding-block: clamp(3.5rem, 8vw, 7rem); }
.path-opening p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--on-dark);
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.path-opening p em { font-style: normal; color: var(--gold-light); }
@media (prefers-reduced-motion: no-preference) {
  .path-opening p { animation: rh-rise 1.1s var(--ease-out) both; }
}

/* Recovery timeline: what happens to me, roughly, and when. */
.timeline { position: relative; margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); max-width: 44rem; }
.timeline::before { content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--line-strong); }
.tl-item { position: relative; padding-left: 2.6rem; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 0.35rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg);
}
.tl-item__when { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); }
.tl-item h3 { font-size: var(--step-1); margin-top: 0.2rem; }
.tl-item p { color: var(--ink-soft); font-size: 1rem; margin-top: var(--sp-2); max-width: 56ch; }

/* Support organisations: help that is not ours to sell. */
.support-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.support-strip a {
  display: block; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-4);
  transition: border-color 0.2s, transform 0.25s var(--ease-out);
}
.support-strip a:hover { border-color: var(--gold); transform: translateY(-2px); }
.support-strip strong { display: block; color: var(--ink); }
.support-strip span { font-size: 1rem; color: var(--ink-soft); }

/* Pathway pages: hero with product, pill contents, benefit grid. */
.pathway-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pathway-hero__media img { border-radius: 200px 200px var(--radius) var(--radius); width: 100%; aspect-ratio: 4/4.2; object-fit: cover; background: #fff; }
@media (max-width: 860px) { .pathway-hero { grid-template-columns: 1fr; } .pathway-hero__media { max-width: 420px; } .pathway-hero__media img { aspect-ratio: 4/3.4; border-radius: var(--radius); } }

.toc-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.toc-pills a {
  text-decoration: none; font-size: 1rem; font-weight: 700; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.4rem 1rem; transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.toc-pills a:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); }

.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.benefit {
  position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; color: var(--ink-soft); line-height: 1.55;
}
.benefit::before {
  content: "\2713"; position: absolute; left: 1.05rem; top: 1rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--gold); color: var(--dark); font-weight: 700;
  display: grid; place-items: center; font-size: 1rem;
}

/* Stat tiles: evidence as design, replacing the stocky science imagery. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.stat { border-top: 2px solid var(--gold); padding-top: var(--sp-4); }
.stat__value { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.section--dark .stat__value { color: var(--gold-light); }
.stat p { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.5; }
.section--dark .stat p { color: var(--on-dark); font-size: 1rem; }

/* Numbered steps: an honest sequence (measuring, donning). */
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); counter-reset: step; }
.steps li { position: relative; padding-left: 3.6rem; counter-increment: step; max-width: 60ch; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--dark); color: var(--gold-light);
  font-family: var(--font-display); font-size: 1.15rem;
  display: grid; place-items: center;
}
.steps strong { display: block; margin-bottom: 0.2rem; }
.steps li p { color: var(--ink-soft); font-size: 1rem; }

/* Contact page */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-facts { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-facts .callout h3 { font-size: var(--step-0); }
.contact-form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); }

/* Journey stage archives */
.stage-hero { max-width: 60ch; }
.stage-nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.stage-nav a { text-decoration: none; font-weight: 700; }
.stage-nav span { display: block; font-size: 1rem; font-weight: 400; color: var(--ink-faint); }

/* 13b. Imagery ----------------------------------------------------------- */

/*
  Photography here is a mixed set: clinical stock, gold studio portraits, old
  banners. What makes it cohere is consistent framing, generous space and
  restraint, not filters. These are photographs of women recovering from cancer
  surgery; heavy processing would be both obvious and tasteless.
*/

.prose img,
.recovered-figure img {
  border-radius: var(--radius);
  background: var(--card);
}

.recovered-figure {
  margin-block: var(--sp-6);
}
.recovered-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  margin-block: var(--sp-6);
}
.recovered-gallery .recovered-figure { margin-block: 0; }
.recovered-gallery img { aspect-ratio: 4/3.4; object-fit: cover; }
.recovered-gallery img[src*="icon"], .recovered-gallery img[src*="logo"] { aspect-ratio: auto; object-fit: contain; }
.recovered-figure img {
  width: 100%;
  box-shadow: var(--shadow-sm);
}

/* Small logo and badge images should not be stretched to full width. */
.recovered-figure img[src*="icon"],
.recovered-figure img[src*="logo"],
.recovered-figure img[src*="cert"],
.recovered-figure img[src*="ukca"] {
  width: auto;
  max-width: min(260px, 100%);
  margin-inline: auto;
  box-shadow: none;
  background: transparent;
}

/* Recovered page banner: the art direction the old builder pages were given. */
.page-banner {
  margin-top: var(--sp-6);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.page-banner img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
@media (max-width: 700px) {
  .page-banner img { aspect-ratio: 3 / 2; }
}

.recovered-callout { margin-block: var(--sp-6); }
.recovered-cta { margin-block: var(--sp-5); }

/* An image that links somewhere should feel liftable. */
a > .recovered-figure img,
a > img {
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
a:hover > .recovered-figure img,
a:hover > img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* 14. Motion ------------------------------------------------------------ */

@keyframes rh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/*
  Reveals enhance an already-visible default: without JS, or on a headless
  render, content still ships visible. Only .js opts into the hidden state, and
  the class is only ever applied by script that has already confirmed it can
  take it away again.
*/
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/*
  Photographs carry most of the meaning on this site, so they get their own
  entrance: a slower settle from very slightly oversized, which reads as the
  image arriving rather than a box fading in. Kept subtle, because the subject
  matter does not want to be showy.
*/
.js .reveal-media { opacity: 0; }
.js .reveal-media img {
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out);
  will-change: transform;
}
.js .reveal-media { transition: opacity 0.8s var(--ease-out); }
.js .reveal-media.is-in { opacity: 1; }
.js .reveal-media.is-in img { transform: none; }

/* The page banner settles on load rather than on scroll; it is already in view. */
@media (prefers-reduced-motion: no-preference) {
  .page-banner img { animation: rh-settle 1.2s var(--ease-out) both; }
}
@keyframes rh-settle {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}

/* A quiet gold rule that draws itself under each prose section heading. */
@media (prefers-reduced-motion: no-preference) {
  .prose h2 { position: relative; }
  .prose h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: -0.35em;
    height: 2px; width: 0;
    background: var(--gold);
    transition: width 0.9s var(--ease-out) 0.15s;
  }
  .prose h2.is-in::after { width: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero h1 { animation: rh-rise 0.9s var(--ease-out) both; }
  .hero .lede { animation: rh-rise 0.9s var(--ease-out) 0.12s both; }
  .hero__cta { animation: rh-rise 0.9s var(--ease-out) 0.22s both; }
  .hero__assurance { animation: rh-rise 0.9s var(--ease-out) 0.32s both; }
}

/* Print: guides get printed and taken to hospital appointments. */
@media print {
  .site-header, .site-footer, .announce, .trade-strip, .guide-aside, .inline-product { display: none; }
  body { background: #fff; font-size: 11pt; }
  .guide-layout { grid-template-columns: 1fr; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .answer { border: 2px solid #000; }
}

/* Certification marks -------------------------------------------------- */
.trust-marks { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.trust-marks ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.trust-marks img { height: 54px; width: auto; object-fit: contain; }
.trust-marks img[src*="ukca"] { height: 62px; }
.trust-marks p {
  margin-top: var(--sp-5); text-align: center;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint);
}
.section--dark .trust-marks { border-top-color: var(--line-dark); }
.section--dark .trust-marks p { color: var(--on-dark-soft); }
@media (max-width: 560px) { .trust-marks img { height: 42px; } }

/* Photo strips ---------------------------------------------------------- */
.stage-photo { margin-top: var(--sp-6); }
.stage-photo img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius);
}
@media (max-width: 700px) { .stage-photo img { aspect-ratio: 3 / 2; } }

/* ==========================================================================
   Page-specific composition
   Imagery placed where it earns its place in the argument, not appended.
   ========================================================================== */

/* Full-bleed editorial band: one photograph carrying a single idea. */
.band {
  position: relative;
  min-height: clamp(360px, 52vw, 560px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.band > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.60) 42%,
    rgba(0,0,0,0.15) 100%
  );
}
.band__copy {
  padding-block: clamp(2rem, 5vw, 3.5rem); color: #fff; max-width: 46ch;
  /* Copy on the dark bands sits centred, at Adam's request: the emotional
     beats read as held moments rather than paragraphs that wandered in. */
  margin-inline: auto; text-align: center;
}
.band__copy h2 { color: #fff; }
.band__copy p { color: var(--on-dark); margin-top: var(--sp-3); }
.band--tall { min-height: clamp(420px, 60vw, 660px); }

/* Feature row: a claim proven by the photograph beside it. */
.proof { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.proof + .proof { margin-top: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 820px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof:nth-of-type(even) .proof__media { order: 2; }
}
.proof__media img {
  width: 100%;
  aspect-ratio: 4 / 3.6;
  object-fit: cover;
  /* Faces sit in the upper third of these sources; a centred crop beheads them. */
  object-position: 50% 26%;
  border-radius: var(--radius);
  background: var(--card);
}
.proof__media--contain img { object-fit: contain; padding: var(--sp-4); }
.proof__label {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep);
}
.proof h3 { font-size: var(--step-2); margin-top: var(--sp-2); }
.proof p { color: var(--ink-soft); margin-top: var(--sp-3); max-width: 46ch; }
.section--dark .proof p { color: var(--on-dark-soft); }

/* Quote carried by a face rather than floating in space. */
.voice-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .voice-split { grid-template-columns: 0.8fr 1.2fr; } }
.voice-split__portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  max-width: 340px;
}
.voice-split__portrait figcaption {
  margin-top: var(--sp-3);
  max-width: 340px;
  font-size: 1rem; line-height: 1.5;
  color: var(--on-dark-soft);
}

/*
 * Credential panel.
 *
 * Named clinicians are never shown beside a stock or customer photograph: a
 * reader assumes the face belongs to the quote, and inventing one would be a
 * lie about a real person. Their standing is set typographically instead.
 */
.credential {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold);
}
.credential span {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--on-dark);
}
.credential span + span { color: var(--on-dark-soft); font-size: var(--step-0); font-family: var(--font-body); }
.voice-split blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.42;
  color: var(--on-dark);
}

/* Sticky-media column: copy scrolls, the picture holds. */
.sticky-pair { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .sticky-pair { grid-template-columns: 1fr 0.85fr; }
  .sticky-pair__media { position: sticky; top: 96px; }
}
.sticky-pair__media img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover;
  border-radius: var(--radius);
}
.sticky-pair__media figcaption {
  margin-top: var(--sp-3); font-size: 1rem; color: var(--ink-soft);
}

/* Product detail trio: the three things that justify the price. */
.detail-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.detail { text-align: center; }
.detail img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); background: var(--card);
}
.detail h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); margin-top: var(--sp-4); }
.detail p { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.5; }

/* Product viewer: tabbed, so the bra can be examined properly before buying. */
.viewer { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: var(--sp-6); }
@media (min-width: 860px) { .viewer { grid-template-columns: 1.15fr 0.85fr; } }
.viewer__stage {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.viewer__stage img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  padding: clamp(1rem, 3vw, 2rem);
}
.viewer__panel[hidden] { display: none; }
/* One row at every width. Wrapping left a lone thumbnail stranded on a second
   line at 375px, so the row scrolls instead. */
.viewer__thumbs {
  display: flex; gap: var(--sp-3); flex-wrap: nowrap;
  margin-top: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.viewer__thumb { scroll-snap-align: start; }
.viewer__thumb {
  flex: 0 0 auto;
  width: 76px; height: 76px; padding: 4px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer;
  transition: border-color 0.2s;
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: contain; }
.viewer__thumb:hover { border-color: var(--gold); }
.viewer__thumb[aria-selected="true"] { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.viewer__notes { display: flex; flex-direction: column; gap: var(--sp-5); }
.viewer__note {
  border-left: 3px solid var(--line);
  padding-left: var(--sp-4);
  transition: border-color 0.25s var(--ease-out), opacity 0.25s;
}
.viewer__note h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); }
.viewer__note p { color: var(--ink-soft); font-size: 1rem; margin-top: var(--sp-2); }
/* With JS on, the note matching the visible view is picked out. Without it,
   every note stands equal beside its own stacked photograph. */
.js .viewer__note { opacity: 0.85; }
.js .viewer__note.is-current { opacity: 1; border-left-color: var(--gold); }
/* The bar, not the fade, is what marks the current note. Dimming the others
   far enough to look broken costs more than the emphasis is worth. */
.js .viewer__note:not(.is-current) { border-left-color: var(--line-strong); }
.viewer__caption { font-size: 1rem; color: var(--ink-soft); margin-top: var(--sp-3); }

/* A quote that comes with a face. */
.voice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.voice-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.voice-card > img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 22%;
}
.voice-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.voice-card__body p { font-size: 1rem; line-height: 1.6; }
.voice-card__body p::before { content: "\201C"; }
.voice-card__body p::after { content: "\201D"; }
.voice-card footer {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Measuring steps, each shown rather than only described. */
.measure-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); counter-reset: measure; }
.measure-step { counter-increment: measure; }
.measure-step img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-sm); background: var(--card);
}
.measure-step h3 {
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  margin-top: var(--sp-4); display: flex; align-items: baseline; gap: var(--sp-3);
}
.measure-step h3::before {
  content: counter(measure);
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--gold-deep); line-height: 1;
}
.measure-step p { color: var(--ink-soft); font-size: 1rem; margin-top: var(--sp-2); }

/* Story chapters: a numbered narrative rather than stacked slabs. */
.chapter { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.chapter + .chapter { margin-top: clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 880px) {
  .chapter { grid-template-columns: 0.85fr 1.15fr; }
  .chapter--flip .chapter__media { order: 2; }
}
/* One aspect ratio across every chapter, so the column reads as a sequence
   rather than four unrelated pictures. Product cut-outs sit inside the frame
   instead of filling it. */
.chapter__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--radius);
  background: var(--card);
}
.chapter__media img.chapter__media--product {
  object-fit: contain;
  padding: var(--sp-6);
  border: 1px solid var(--line);
}
.chapter__media figcaption { margin-top: var(--sp-3); font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
.chapter__no {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--gold-deep); display: block; line-height: 1;
}
.chapter h2 { margin-top: var(--sp-3); }

/* Dark-section legibility.
   Ink tones are tuned for the cream background; reused on the dark band they
   fall to roughly 2:1 against it, which fails at any text size. */
.section--dark .detail p { color: var(--on-dark-soft); }
.section--dark .detail .milestone__when,
.section--dark .milestone__when { color: var(--gold-light); }

/* Band on narrow screens.
   The copy takes up proportionally more of the band, so it climbs past the
   gradient's mid stop and onto the lit part of the photograph. Deepen and
   raise the scrim, and give the image more room above the text. */
@media (max-width: 700px) {
  .band { min-height: clamp(440px, 108vw, 620px); }
  .band::after {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.82) 40%,
      rgba(0,0,0,0.45) 72%,
      rgba(0,0,0,0.10) 100%
    );
  }
}

/* ==========================================================================
   Articles: press coverage and product news
   Trust before traffic. Nothing here looks like a blog roll on purpose.
   ========================================================================== */

/*
  Coverage strip. A modifier on .institution-strip rather than a new component,
  because the two say the same kind of thing: named third parties have vouched
  for this. Two differences earn the modifier. These names are links down the
  page, and a masthead can be long enough to overflow a 320px screen under the
  parent's white-space: nowrap. Declared after .institution-strip so the equal
  specificity resolves here.
*/
.coverage-strip li { white-space: normal; }
.coverage-strip a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-light);
}
.coverage-strip a:hover { color: var(--ink); border-bottom-color: var(--gold-deep); }

/*
  Provenance line above every press item. Set in the label idiom the site
  already uses for attribution (.proof__label, .journey__when) so a publication
  name reads as the same class of fact as a recovery stage.

  The year uses --ink-soft, not --ink-faint. Measured against --bg, faint lands
  at 4.46:1, which is under AA at this size.
*/
.press-outlet {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep);
}
.press-outlet time { color: var(--ink-soft); letter-spacing: 0.06em; }

/*
  The lead piece. A row of names proves breadth, one piece proves substance, and
  a reader who has just scanned the names wants to know what one of them
  actually said. It is the only post on this page shown with a photograph, which
  is what makes it read as the lead rather than as a bigger tile.
*/
.press-lead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--sp-7);
}
@media (min-width: 820px) {
  .press-lead--media { grid-template-columns: 0.95fr 1.05fr; }
}

/*
  No fixed aspect ratio here, unlike every other image frame in this theme.
  Press art is whatever the publication sends: a portrait page scan, a landscape
  photograph, occasionally a square social card. Cropping to a house ratio would
  behead a portrait or slice a spread in half, and there is no safe
  object-position for a picture nobody has seen yet. The image keeps its own
  shape and the copy centres beside it.
*/
.press-lead__media img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.press-lead h3 { font-size: var(--step-3); margin-top: var(--sp-3); }
.press-lead h3 a { color: inherit; text-decoration: none; }
.press-lead h3 a:hover { color: var(--gold-deep); }
.press-lead__quote {
  margin-top: var(--sp-4);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/*
  The rest of the coverage: citations, not cards. A reader scans for who, then
  for what they said, and ruled rows carry that better than boxes. Rows also
  look composed at three items and at fifteen, where a card grid leaves a
  visible hole whenever the count is not a multiple of the column count.
*/
.press-list { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.press-item { padding-block: var(--sp-6); border-bottom: 1px solid var(--line); }
.press-item h3 { font-size: var(--step-2); margin-top: var(--sp-2); }
.press-item h3 a { color: inherit; text-decoration: none; }
.press-item h3 a:hover { color: var(--gold-deep); }

.press-standfirst { margin-top: var(--sp-3); color: var(--ink-soft); max-width: 62ch; }
.press-source { margin-top: var(--sp-4); font-size: 1rem; }

/* ==========================================================================
   Page hero
   Every landing page opens the same way. Before this, only the four recovery
   pathways had a picture at the top and the rest began with a heading on an
   empty background, which read as an unfinished document.
   ========================================================================== */

.page-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .page-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.page-hero__eyebrow {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: var(--sp-3);
}
.page-hero__copy .lede { margin-top: var(--sp-5); max-width: 54ch; }
.page-hero__copy .hero__cta { margin-top: var(--sp-6); }

/* The arch echoes the recovery pathway heroes, which set the house shape. */
.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  background: var(--card);
  border-radius: 200px 200px var(--radius) var(--radius);
}

/*
  Cut-out product shots are not portraits: an arch crops the straps off and the
  fill colour shows through the transparent corners. They sit inside a plain
  card at their own proportions instead.
*/
.page-hero__media--contain img {
  object-fit: contain;
  aspect-ratio: 4 / 3.6;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* No image: one wide, well-set column rather than a half-empty grid. */
.page-hero--plain .page-hero__inner { grid-template-columns: 1fr; }
.page-hero--plain .page-hero__copy { max-width: 60ch; }

@media (max-width: 879px) {
  .page-hero__media { max-width: 440px; }
  .page-hero__media img { aspect-ratio: 4 / 3.4; border-radius: var(--radius); }
}

/* --------------------------------------------------------------------------
   The home-page press strip.

   Namespaced .press-strip__* because .press-item, .press-list, .press-lead and
   .press-outlet already belong to the /articles/ listing above, where
   .press-item is a full-width ruled row. Reusing those names here would inherit
   a 1px bottom border and 32px of padding onto every cell of this grid.
   -------------------------------------------------------------------------- */
.press-strip {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}

/* Against the dark voices section the hairline reads as a seam rather than an
   edge, because the change of tone already draws the boundary. */
.section--dark + .press-strip { border-top-color: transparent; }

/* On a product page WooCommerce has already opened .site-main.section > .wrap,
   so the strip must not bring its own wrap, a second helping of section
   padding, or a full-bleed band that is clipped to the outer wrap's max-width.
   Bare mode is content, not a band. */
.press-strip--bare {
  background: none;
  border-block: 0;
  padding-block: 0;
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.press-strip__head { display: grid; gap: var(--sp-3); }
/* A strip, not a chapter: the heading sits a step below a section heading so it
   does not compete with the dark block above it. */
.press-strip__head h2 { font-size: var(--step-2); }
.press-strip__head p { max-width: 52ch; font-size: 1rem; color: var(--ink-soft); }

/* auto-fill, not auto-fit. With one press post, which is the launch state,
   auto-fit collapses the empty tracks and stretches a single gold rule across
   the full 1180px, which reads as a mistake. auto-fill holds the column width,
   so one item looks deliberate and four look like a row. */
.press-strip__list {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-5);
}

.press-strip__item { display: flex; }
/* The gold top rule is the milestone idiom from the story page. A reader who
   has met one recognises the other as the same kind of statement: a dated fact
   rather than a claim. */
.press-strip__item > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border-top: 2px solid var(--gold);
  padding-top: var(--sp-4);
  text-decoration: none;
  color: inherit;
}
/* The global focus ring flattens whatever it lands on to a 3px radius. These
   items are a ruled block rather than a box, so hold the ring off the text. */
.press-strip__item > a:focus-visible { outline-offset: 4px; }

/* Here the publication name is the content, so it takes the display face. On
   /articles/ and on a single article the headline is the content and
   .press-outlet sets the masthead as a small kicker instead. Same fact, two
   different jobs, so two different weights. */
.press-strip__pub {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--gold-deep);
  transition: color 0.25s var(--ease-out);
}
.press-strip__item > a:hover .press-strip__pub { color: var(--ink); }

.press-strip__line { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* Pushed to the foot so the years line up across items of unequal length.

   --ink-soft, not the --ink-faint this label idiom normally uses. Measured on
   --surface, faint lands at 4.19:1, and at 12.5px this is not WCAG large text,
   so it needs 4.5:1. Soft is 8.38:1. */
.press-strip__year {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The way into the section sits under the items rather than beside the heading.
   On the home page the block immediately above ends with a row of institution
   names and its own link-arrow, and two calls to action four lines apart read
   as a stutter. */
.press-strip__more { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   A single article: the provenance panel.

   A press cutting's value is that somebody else said it, so who said it has to
   be a designed object rather than a line of metadata under the headline.

   We hold no publication logos and must never show a mark we were not given, so
   the panel is typographic. It reuses .press-outlet for the masthead line and
   .press-lead__quote for the quotation, so one publication reads the same way
   on the index and on the article rather than becoming two devices.
   -------------------------------------------------------------------------- */
.provenance {
  margin-top: var(--sp-6);
  padding: var(--sp-5) clamp(1.25rem, 4vw, 2rem);
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* The panel already carries the gold rule, so the quote inside drops its own
   rather than doubling it against the panel edge. */
.provenance .press-lead__quote {
  margin-top: var(--sp-4);
  padding-left: 0;
  border-left: 0;
}

/* .guide-meta's faint ink is tuned for the page background. On --surface at
   0.86rem it drops under AA, so it steps up one tone here. */
.provenance .guide-meta { color: var(--ink-soft); }

.provenance .press-source { margin-top: var(--sp-4); }

/* Paid and gifted placements are labelled in words, never by colour alone. The
   UK advertising rules require the disclosure, and a brand selling to
   frightened people cannot afford to look like it buried one. */
.provenance__flag {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Shared fixes.
   -------------------------------------------------------------------------- */

/* The site header is sticky, so a jump from the coverage strip lands the target
   item underneath it. 96px clears the bar with room to breathe. */
.press-lead,
.press-item { scroll-margin-top: 96px; }

/* Two headlines in one flex row collapse into a pair of very narrow columns on
   a phone, because a long title's minimum width is only one word. A basis wide
   enough to be worth reading forces them onto separate lines instead. */
.stage-nav__earlier,
.stage-nav__later { flex: 1 1 14rem; }

/* A lone "later" link holds the right-hand end of the row, where it would sit
   if its earlier sibling existed, rather than sliding across to the left. */
.stage-nav__later { text-align: right; }

@media (max-width: 560px) {
  /* Stacked, that right alignment reads as a mistake rather than a direction. */
  .stage-nav__later { text-align: left; }
}

/* A breast care nurse prints coverage to show a colleague. Keep the quote and
   the source, lose the panel fill and the navigation. */
@media print {
  .provenance { background: none; border-left-width: 2px; }
  .press-strip,
  .stage-nav { display: none; }
}

/* ==========================================================================
   Useful links
   Other people's organisations, grouped by what a reader is trying to do.
   Set as a reference list rather than as cards: she is scanning for the one
   that matches her situation, and boxes make eight items look like eight
   decisions.
   ========================================================================== */

.link-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: var(--sp-7);
  align-items: start;
}

.link-group h3 {
  font-size: var(--step-1);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--gold);
}
.link-group__intro {
  margin-top: var(--sp-3);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.link-list { list-style: none; padding: 0; margin-top: var(--sp-4); }
.link-list li + li { margin-top: var(--sp-5); }
.link-list a {
  font-weight: 700;
  text-decoration: none;
  /* An outbound link is a promise about somewhere else, so it is marked as
     one rather than left to look like internal navigation. */
  border-bottom: 1px solid var(--gold-light);
}
.link-list a:hover { color: var(--ink); border-bottom-color: var(--gold-deep); }
.link-list a::after {
  content: "\2197";
  margin-left: 0.3em;
  font-size: 1em;
  color: var(--ink-faint);
}
.link-list p {
  margin-top: var(--sp-2);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.link-list__note {
  font-size: 1rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* The strapline Nicole asked for, set quietly so the H1 keeps the room. */
.hero__strap {
  margin-top: var(--sp-4);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gold-deep);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__strap { animation: rh-rise 0.9s var(--ease-out) 0.08s both; }
}

/* Reco Brief teaser: a quiet dark band, one fact and one route onward. */
.brief-teaser { background: var(--dark); color: var(--on-dark); padding-block: clamp(2rem, 5vw, 3.5rem); }
.brief-teaser__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
}
.brief-teaser h2 { color: var(--on-dark-strong); font-size: var(--step-2); margin-top: var(--sp-2); }
.brief-teaser p:not(.proof__label) { color: var(--on-dark-soft); margin-top: var(--sp-3); max-width: 58ch; }
.brief-teaser .btn--ghost { border-color: var(--line-dark); color: var(--gold-light); flex: 0 0 auto; }
.brief-teaser .btn--ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* The 360 turntable on the features page. */
.bra-spin { margin: var(--sp-7) auto 0; max-width: 520px; text-align: center; }
.bra-spin__video {
  width: 100%; height: auto; display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.bra-spin figcaption { margin-top: var(--sp-3); font-size: 1rem; color: var(--ink-faint); }
/* Reduced motion: hold the poster frame rather than spinning. The still is a
   real photograph of the same garment, so nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
  .bra-spin__video { display: none; }
  .bra-spin { background-size: contain; }
  .bra-spin::before {
    content: ""; display: block; aspect-ratio: 1 / 1;
    background: var(--card) center / contain no-repeat;
    background-image: var(--bra-spin-poster);
    border: 1px solid var(--line); border-radius: var(--radius);
  }
}

/* The cut-out model sits on the black band itself, no card, no frame. */
.brief-teaser__media { flex: 0 0 auto; margin: 0; align-self: flex-end; }
.brief-teaser__media img { display: block; height: clamp(180px, 26vw, 300px); width: auto; }
@media (max-width: 640px) { .brief-teaser__media { display: none; } }
/* The Reco Brief mark carries the name here, so the heading goes to screen
   readers only and the logo does the announcing. */
.brief-teaser__logo { display: block; width: clamp(190px, 24vw, 260px); height: auto; margin-top: var(--sp-3); }

/* Reco Bra's own mark above its shop page. */
.shop-intro__logo { display: block; width: clamp(180px, 22vw, 240px); height: auto; margin-bottom: var(--sp-4); }

/* The full surgery list under the pathway tiles, set small but findable. */
.pathway-others {
  margin-top: var(--sp-6);
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 72ch;
}
.pathway-others a { font-weight: 600; white-space: nowrap; }

/* The curator credit: a face and a name, sized to the portrait we hold. */
.curator {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.curator img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%;
  flex: 0 0 auto;
}
.curator figcaption { font-size: 1rem; line-height: 1.45; }
.curator strong { display: block; }
.curator span { color: var(--ink-soft); }

/* ==========================================================================
   Google reviews
   The overall picture leads, a sample follows, and everything is checkable
   on Google in two clicks, which is what makes it worth showing.
   ========================================================================== */

.gr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.gr-score {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.gr-stars { color: var(--gold-deep); letter-spacing: 0.12em; font-size: 1.05rem; }

.gr-grid {
  display: grid;
  /* 280px floor breaks five cards as three and two, not four and an orphan. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.gr-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  margin: 0;
}
.gr-card__meta { line-height: 1; }
.gr-card__text { font-size: 1rem; line-height: 1.6; }
.gr-card footer {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 1rem; font-weight: 700;
}
.gr-card footer span { display: block; font-weight: 400; color: var(--ink-faint); font-size: 1rem; }

.gr-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-6);
  font-size: 1rem; color: var(--ink-soft);
}
.gr-foot span { max-width: 52ch; }

/* The product eyebrow above the home headline: names what is being designed
   without spending the space a logo would take. */
.hero__product {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--sp-3);
}

/* Brand-mark bands: the emotional beat carried by the mark rather than a
   customer photograph. */
.band--logo { background: var(--dark); min-height: 0; padding-block: clamp(3rem, 7vw, 5rem); }
.band--logo .band__copy--centre { text-align: center; margin-inline: auto; max-width: 62ch; }
.band--logo .band__logo { width: clamp(200px, 26vw, 300px); height: auto; margin-inline: auto; margin-bottom: var(--sp-5); }
.band--logo h2 { color: var(--on-dark-strong); }
.band--logo p { color: var(--on-dark-soft); margin-top: var(--sp-3); }

/* The heart-in-hand mark above pathway opening lines. */
.path-opening__mark { display: block; width: 64px; height: auto; margin: 0 auto var(--sp-4); opacity: 0.9; }
.path-opening .wrap { text-align: center; }

/* The tape-measure heart beside the home sizing copy. */
.size-band__media { flex: 0 0 auto; margin: 0; }
.size-band__media img { width: clamp(160px, 18vw, 230px); height: auto; }
@media (max-width: 700px) { .size-band__media { display: none; } }

/* The clinician line under the new headline: supporting, not competing. */
.hero__designed { font-size: var(--step-1); color: var(--ink-soft); margin-top: var(--sp-4); max-width: 42ch; }
@media (prefers-reduced-motion: no-preference) {
  .hero__designed { animation: rh-rise 0.9s var(--ease-out) 0.05s both; }
}

/* The Devan bi-ome mark on its page: modest, certification-sized. */
.devan-mark { display: block; width: 150px; height: auto; margin-top: var(--sp-6); }

/* As seen in Live to 100: the banner is the supplied artwork, the copy sits
   beside it on wide screens and beneath it on narrow ones. */
.seen-in__inner {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap;
}
.seen-in__banner { flex: 1 1 380px; max-width: 560px; display: block; }
.seen-in__banner img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.seen-in__copy { flex: 1 1 300px; max-width: 46ch; }
.seen-in__copy p { color: var(--ink-soft); margin-block: var(--sp-3) var(--sp-4); }

/* Nicole's signed statement on the story page. Quiet, not a pull-quote shout:
   it is her saying what she made, so it should read like a signature. */
.founder-statement {
  margin: 0 auto;
  max-width: 62ch;
  border-left: 3px solid var(--gold);
  padding-left: clamp(1rem, 3vw, 1.75rem);
}
.founder-statement p { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.founder-statement footer { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 0.15rem; }
.founder-statement footer strong { font-weight: 700; }
.founder-statement footer span { color: var(--ink-soft); font-size: 1rem; }

/* Image credits. Some photographs are licensed to Reco Heart on condition the
   copyright holder is credited, so this has to be visible, not a tooltip. */
figcaption .credit {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--ink-faint);
}

/* Zone Tech diagrams. Line art on white, so it sits on the page rather than
   in a card, with room to breathe and a caption underneath. */
.zone-tech { margin: var(--sp-6) auto 0; max-width: 60rem; }
.zone-tech img { width: 100%; height: auto; display: block; }
.zone-tech figcaption { margin-top: var(--sp-3); text-align: center; color: var(--ink-soft); font-size: 1rem; }

/* Nicole's signature above the sign-off. Sized in ems so it stays in
   proportion to the name underneath it rather than to the viewport. */
.quote-sign {
  display: block;
  width: auto;
  height: 3.4em;
  margin: var(--sp-5) 0 var(--sp-2);
}

/* The delivery answer in the basket. WooCommerce's own notice styling, with
   the heading on its own line so the times are scannable rather than a wall. */
.recoheart-delivery-note strong { display: block; margin-bottom: 0.25rem; }

/* Zone Tech colour key, as printed on the packaging. Two columns on a wide
   screen, stacked on a phone, with the swatch inline so each level reads as
   one line rather than a legend floating away from its label. */
.zone-key { margin: var(--sp-5) auto 0; max-width: 60rem; display: grid; gap: var(--sp-3) var(--sp-5); }
@media (min-width: 760px) { .zone-key { grid-template-columns: repeat(2, 1fr); } }
.zone-key dt { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.zone-key dd { margin: 0 0 0 1.65rem; color: var(--ink-soft); font-size: 1rem; }
.zone-key__dot { width: 1rem; height: 1rem; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }

/* A partner panel: a real commercial arrangement, so it reads as an offer
   rather than as another paragraph of advice. */
.partner { margin-top: var(--sp-6); max-width: 60ch; background: var(--gold-wash); border: 1px solid var(--gold); border-radius: var(--radius); padding: var(--sp-5); }
.partner h3 { font-size: var(--step-1); }
.partner p { margin-top: var(--sp-3); color: var(--ink-soft); }
.partner__mark { font-weight: 700; color: var(--gold-deep); letter-spacing: 0.02em; }
.partner__code { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.partner__code span { font-size: 1rem; color: var(--ink-soft); }
.partner__code strong { font-family: var(--font-body); font-size: var(--step-1); letter-spacing: 0.12em; background: var(--card); border: 1px dashed var(--gold-deep); border-radius: var(--radius-sm); padding: 0.35rem 0.9rem; color: var(--gold-deep); }

/* Consent banner ------------------------------------------------------- */

/*
 * Bottom-anchored rather than a full-screen interstitial: someone who has just
 * had surgery and is looking for sizing help should not have to dismiss a
 * modal before they can read anything. Both answers are the same size, because
 * making "no" harder to find is the thing the regulation exists to stop.
 */
.rh-consent {
  position: fixed; z-index: 1200;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  width: min(46rem, calc(100vw - 1.5rem));
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}
.rh-consent__text { flex: 1 1 22rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.rh-consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rh-consent .btn { white-space: nowrap; }
.btn--quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong, var(--line));
}
.btn--quiet:hover { background: #fff; }
@media (max-width: 520px) {
  .rh-consent { display: block; }
  .rh-consent__actions { margin-top: var(--sp-3); }
  .rh-consent .btn { flex: 1 1 auto; }
}

/* Contact form (Contact Form 7) ---------------------------------------- */

.contact-form-embed {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.contact-form-embed .wpcf7 p { margin: 0 0 var(--sp-4); }
.contact-form-embed label {
  display: block; font-weight: 700; margin-bottom: 0.35rem;
}
.contact-form-embed input[type="text"],
.contact-form-embed input[type="email"],
.contact-form-embed input[type="tel"],
.contact-form-embed textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.contact-form-embed textarea { min-height: 9rem; resize: vertical; }
.contact-form-embed input:focus,
.contact-form-embed textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.contact-form-embed .wpcf7-submit {
  /* Match the theme buttons without depending on the .btn class CF7 cannot add. */
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 600 1rem/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.contact-form-embed .wpcf7-submit:hover { background: var(--gold-deep); }
.contact-form-embed .wpcf7-not-valid-tip { color: #a3352b; font-size: 0.9rem; margin-top: 0.3rem; display: block; }
.contact-form-embed .wpcf7-response-output {
  margin: var(--sp-4) 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.contact-form-embed .wpcf7-spinner { margin: 0 0 0 0.6rem; }

/* Footer social links ---------------------------------------------------- */

.footer-social { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: 1rem; }