/* ==========================================================================
   Achieving Your Best Skin — theme stylesheet

   Order of business:
     1. Tokens      — colour, type, space, motion. The single source of truth.
     2. Base        — reset, elements, layout primitives.
     3. Components  — header, hero, cards, forms, footer.
     4. WordPress   — the bridge between core block markup and the design above.

   Nothing in sections 1–3 knows it is running inside WordPress. Section 4 is
   the only place block class names appear, so the design stays portable.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Palette brief: white, soft warm gray, restrained accent from the logo. */

  --bg:            #FFFFFF;   /* default section background                 */
  --bg-warm:       #F6F4F1;   /* alternating band — soft warm gray          */
  --bg-warm-deep:  #EFEBE6;   /* rare third tone, footer / quiet blocks     */

  --accent:        #E0533A;   /* logo terracotta — DECORATIVE ONLY          */
  --accent-deep:   #A8402B;   /* accent for TEXT — 6.1:1 on white           */
  --accent-wash:   #FBF4F1;   /* barely-there warm band                     */
  --cream:         #ECDEC0;   /* the lily in the logo                       */

  --ink:           #1B1B19;   /* headings                                   */
  --ink-body:      #3D3B37;   /* body copy                                  */
  --ink-muted:     #6A6862;   /* captions, meta, secondary                  */
  --ink-faint:     #9C9890;   /* dividers-in-text, disabled                 */

  --rule:          #E4E0DA;   /* hairline borders                           */
  --rule-strong:   #CFC9C1;

  /* Accessibility note: --accent (#E0533A) is 3.9:1 on white — enough for
     rules, marks and other non-text graphics, but NOT for type. Use
     --accent-deep (#A8402B, 6.1:1) for any accent-coloured text or link. */

  /* ---- Typography ------------------------------------------------------- */

  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-display: clamp(2.875rem, 6.2vw, 5.25rem);
  --t-h1:      clamp(2.25rem, 4.4vw, 3.75rem);
  --t-h2:      clamp(1.875rem, 3.1vw, 2.75rem);
  --t-h3:      clamp(1.3125rem, 1.7vw, 1.625rem);
  --t-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  --lh-tight:  1.08;
  --lh-head:   1.18;
  --lh-body:   1.75;

  --ls-display: -0.02em;
  --ls-head:    -0.01em;
  --ls-label:    0.14em;   /* small-caps eyebrow labels */

  /* ---- Space ------------------------------------------------------------ */

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  --section-y:       clamp(2.25rem, 4vw, 3.5rem);
  --section-y-tight: clamp(1.5rem, 2.5vw, 2.25rem);

  /* ---- Layout ----------------------------------------------------------- */

  --measure:       68ch;      /* max line length for readable prose         */
  --gutter:        clamp(1.25rem, 6vw, 7rem);
  --container-narrow: 760px;

  /* ---- Form ------------------------------------------------------------- */

  --radius-sm: 2px;
  --radius:    4px;

  --shadow-soft: 0 1px 2px rgba(27, 27, 25, 0.04),
                 0 8px 24px rgba(27, 27, 25, 0.05);

  /* ---- Motion ----------------------------------------------------------- */

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  620ms;

  /* ---- Imagery ----------------------------------------------------------
     Fixed aspect ratios so real photography drops into the same slots with
     zero layout change. */

  --ar-hero:      16 / 7;
  --ar-portrait:  4 / 5;
  --ar-landscape: 3 / 2;
  --ar-square:    1 / 1;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* `clip`, not `hidden`. `overflow: hidden` turns the element into a scroll
     container, which silently breaks `position: sticky` on the header and can
     clip the mobile menu panel — the classic cause of "the menu does not open
     on my phone". `clip` stops sideways overflow without either side effect. */
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Headings ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 400;          /* Cormorant is elegant at regular weight */
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); line-height: var(--lh-head);  letter-spacing: var(--ls-head); }
h3 { font-size: var(--t-h3); line-height: 1.3;             letter-spacing: 0; }
h4 { font-size: var(--t-body); line-height: 1.4; }

p {
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
}
p:last-child { margin-bottom: 0; }

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--accent-deep);
  text-decoration: none;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Lists -------------------------------------------------------------- */

ul, ol { margin: 0 0 var(--s-5); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

/* ---- Media -------------------------------------------------------------- */

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

figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
}
th, td { border: 1px solid var(--rule); padding: var(--s-3) var(--s-4); text-align: left; }
th { background: var(--bg-warm); font-weight: 500; }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
code { background: var(--bg-warm); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
pre { background: var(--bg-warm); padding: var(--s-5); border-radius: var(--radius); overflow-x: auto; }

/* ---- Layout primitives -------------------------------------------------- */

/* Edge to edge. Sections run the full width of the viewport, held off the
   edges by the gutter only. Line length stays readable because `p` is capped
   at --measure, not because the container is narrow. */
.container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: none; }

/* Long-form prose and centred calls to action need a bounded column */
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

.section--tight { padding-block: var(--section-y-tight); }

/* Reduced space above — for a section that follows a full-bleed photograph */
.section--flush-top { padding-top: var(--section-y-tight); }

/* Reduced space below — for a section followed by a bounded strip */
.section--flush-bottom { padding-bottom: var(--section-y-tight); }

/* The single serif line that sits directly under a page banner */
.section--statement { padding-block: var(--s-4); }

/* Alternating bands — the white / soft-warm-gray rhythm from the brief */
.section--warm   { background: var(--bg-warm); }
.section--accent { background: var(--accent-wash); }

/* ---- Typographic helpers ------------------------------------------------ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--s-4);
  display: block;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--ink-body);
  max-width: var(--measure);
}

/* Headings that must hold on a single line. Falls back to wrapping only on
   screens too narrow to fit, where wrapping beats horizontal overflow. */
.h2--nowrap { white-space: nowrap; }
@media (max-width: 560px) {
  .h2--nowrap { white-space: normal; }
}

/* Sally writes in short standalone lines. This preserves that rhythm
   instead of collapsing her cadence into dense paragraphs. */
.cadence p {
  font-size: var(--t-lead);
  line-height: 1.6;
  margin-bottom: var(--s-5);
  max-width: var(--measure);
}

.muted { color: var(--ink-muted); }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); }

.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }

.text-left { text-align: left; }

/* Thin accent rule used as a quiet section divider */
.rule-accent {
  width: 44px;
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: 0 0 var(--s-5);
}
.center .rule-accent { margin-inline: auto; }

.visually-hidden,
.screen-reader-text {
  position: absolute;
  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;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  z-index: 100;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* The registered/trademark symbol should sit quietly, not shout */
.mark-symbol {
  font-size: 0.42em;
  vertical-align: super;
  letter-spacing: 0;
  font-family: var(--font-sans);
  color: var(--ink-muted);
}


/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* ---- Site header -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

/* The logged-in admin bar is itself fixed, so the sticky header has to start
   below it or the two overlap on scroll. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 96px;   /* the logo is stacked over three lines and needs height */
}

/* The mark itself — must be prominent on every page (trademark requirement). */
.wordmark {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.wordmark img {
  height: 64px;
  width: auto;
  transition: opacity var(--dur-fast) var(--ease);
}
.wordmark:hover { text-decoration: none; }
.wordmark:hover img { opacity: 0.75; }

@media (max-width: 600px) {
  .site-header__inner { min-height: 80px; }
  .wordmark img { height: 52px; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: 0; }

.site-nav a {
  font-size: var(--t-small);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The mark as a nav item — carries slightly more weight than its siblings */
.nav-list .has-sub > a { color: var(--ink); }

/* "Book a Consultation" sits in the order the client specified rather than
   being pulled out as a right-aligned button. It is emphasised by weight
   alone: colouring it terracotta at rest would leave the accent meaning two
   different things, since that colour marks the page you are on. */
.nav-book > a { font-weight: 500; }

/* The accent is reserved for two states, and only these two: the page you are
   on, and the link under the cursor. Declared last so it wins over the two
   rules above whatever their specificity. */
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"],
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-parent > a,
.site-nav .current_page_item > a,
.site-nav .current_page_ancestor > a {
  color: var(--accent-deep);
  text-decoration: none;
}

/* ---- Dropdown ---------------------------------------------------------- */

.has-sub { position: relative; }

.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  opacity: 0.55;
}

.sub-nav {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 264px;
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.has-sub:hover > .sub-nav,
.has-sub:focus-within > .sub-nav,
.has-sub.is-open > .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-nav a {
  display: block;
  padding: var(--s-3) var(--s-5);
  color: var(--ink-body);
  white-space: normal;
}
.sub-nav a:hover,
.sub-nav a:focus-visible { background: var(--bg-warm); color: var(--accent-deep); }

/* Marks a destination only paying clients can reach. Signage, not security —
   the restriction itself is enforced server-side. */
.nav-members {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.5em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: 0.1em;
}
.sub-nav a:hover .nav-members { border-color: var(--ink-faint); }

/* ---- Menu button --------------------------------------------------------
   Three lines that fold into a cross. Drawn in CSS rather than shipped as an
   icon font or an SVG sprite: it is three rectangles, and it inherits the
   ink colour without any extra request. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  /* A 44px target: anything smaller is a miss on a phone. */
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after  { top: 8px; }

/* Open: the middle bar goes, the outer two cross where it was */
.nav-toggle.is-open .nav-toggle__bars { background: transparent; }
.nav-toggle.is-open .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
  /* The header wraps so the panel can take a line of its own beneath the
     logo when there is no script to overlay it. */
  .site-header__inner { flex-wrap: wrap; }

  .nav-toggle { display: flex; }

  .site-nav {
    padding-block: var(--s-4) var(--s-5);
    flex: 1 0 100%;
  }

  /*
   * The collapsed state is behind `.js`. Without it the button is never
   * shown and the navigation is simply part of the header — so a blocked or
   * failed script leaves the site navigable rather than trapping the visitor
   * on whatever page they landed on.
   */
  .js .nav-toggle { display: flex; }
  html:not(.js) .nav-toggle { display: none; }

  .js .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 60;
    flex: none;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 28px rgba(27, 27, 25, 0.10);
    padding: var(--s-5) var(--gutter) var(--s-6);
    /* dvh follows the phone's shrinking toolbar; vh is the fallback for
       browsers that do not know it and would otherwise get nothing. */
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .js .site-nav.is-open { display: block; }

  .nav-list { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .site-nav a { font-size: var(--t-lead); color: var(--ink); }
  /* Comfortable rows to tap, rather than bare text baselines */
  .nav-list > li > a { display: block; padding-block: var(--s-2); }

  /* On small screens the sub-pages are simply shown, indented — no toggle */
  .has-sub > a::after { display: none; }
  .sub-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: var(--s-3) 0 0;
    margin-left: var(--s-5);
    border-left: 1px solid var(--rule);
  }
  .sub-nav a {
    padding: var(--s-2) 0 var(--s-2) var(--s-5);
    font-size: var(--t-body);
    color: var(--ink-muted);
  }
  .sub-nav a:hover { background: transparent; }
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 1.0625rem var(--s-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Reserved for "Book a Consultation" — the one action the whole site is for.
   Uses --accent-deep rather than the logo's --accent: white on #E0533A is
   only 3.9:1 and fails for button text, where #A8402B gives 6.1:1. */
.btn--accent { background: var(--accent-deep); color: #fff; }
.btn--accent:hover { background: #8F3523; color: #fff; }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #34322E; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(27,27,25,0.02); color: var(--ink); }

.btn--light {
  background: #fff;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--light:hover { color: var(--ink); }

/* Quiet text link with arrow — used to move between sections */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
}
.link-arrow::after {
  content: "\2192";
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.center .btn-row { justify-content: center; }

/* ---- Media slots -------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
  margin: 0;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media picture { display: block; width: 100%; height: 100%; }

.media--hero      { aspect-ratio: var(--ar-hero); }
.media--portrait  { aspect-ratio: var(--ar-portrait); }
.media--landscape { aspect-ratio: var(--ar-landscape); }
.media--square    { aspect-ratio: var(--ar-square); }

@media (max-width: 700px) {
  /* A 16:7 band is too letterboxed on a phone — go taller, same slot */
  .media--hero { aspect-ratio: 4 / 5; }
}

/* ---- Hero --------------------------------------------------------------- */

.hero { position: relative; }
.hero__media { position: relative; }

/* Slightly taller than the source photograph's own 2.33:1, so `cover` has
   width to trim. Anchoring left keeps the empty window side of the frame and
   crops from the right instead — which carries the subject right of centre
   and opens the left of the picture for the text. */
.hero__media .media { aspect-ratio: 2 / 1; }
.hero__media .media img { object-position: left center; }

/* Interior pages use a shallower banner than the home page. A plain ratio
   means the framing is identical at every viewport size: the 3:1 band is
   centred between eyes and lips, so neither can clip. */
.hero--page .hero__media .media { aspect-ratio: 3 / 1; }

@media (max-width: 700px) {
  /* The <picture> element serves a real 4:5 crop at this width, so the
     framing is baked into the file and no object-position fix is needed. */
  .hero__media .media { aspect-ratio: 4 / 5; }
  .hero--page .hero__media .media { aspect-ratio: 4 / 5; height: auto; }
}

/* ---- Overlay hero, phones and tablets -----------------------------------
   The text sits on the photograph here too, but anchored to the bottom and
   lifted by a white wash rising from it — the subject's face is near the
   middle of both crops at these widths, so a side scrim of the kind used on
   a wide screen would put type straight across it.

   Stacked in one grid cell rather than positioned absolutely: if the words
   ever need more room than the picture has, the hero grows and the picture
   grows with it. Nothing can overflow or be cut off. */

@media (max-width: 1199px) {
  .hero {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a grid track will not shrink below its items'
       min-content width, and on a 360px phone that pushes the heading off
       the right edge rather than wrapping it. */
    grid-template-columns: minmax(0, 1fr);
  }
  .hero > .hero__media,
  .hero > .hero__body {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .hero > .hero__media { align-self: stretch; }

  /* Both dimensions stated. With only one of them set, `aspect-ratio` sizes
     the other — and a picture that grows sideways to keep its ratio is what
     puts a horizontal scrollbar on a phone. */
  .hero__media .media { width: 100%; height: 100%; }

  /* The wash has to be opaque for the whole height the words occupy, not
     just at the very bottom — the subject fills these crops, so anywhere the
     type lands is over her. It fades out well before her eyes. */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.95) 42%,
      rgba(255, 255, 255, 0.72) 60%,
      rgba(255, 255, 255, 0.22) 76%,
      rgba(255, 255, 255, 0) 88%);
  }

  .hero > .hero__body {
    position: relative;
    z-index: 2;
    align-self: end;
    padding-block: var(--s-8) clamp(1.75rem, 5vw, 3rem);
    text-align: center;
  }

  /* `text-align` does nothing to a flex row, so the buttons have to be
     centred in their own right — otherwise they sit left under centred type. */
  .hero > .hero__body .btn-row,
  .hero > .hero__body .wp-block-buttons.btn-row { justify-content: center; }

  /* Over a photograph the tagline needs more contrast than the muted grey
     it carries when it sits on plain white below one. */
  .hero__body .hero__tagline { color: var(--ink-body); }

  /* A page banner is a shallow band with a short heading; the same treatment
     applies, with less air above it. */
  .hero--page > .hero__body { padding-block: var(--s-7) clamp(1.5rem, 4vw, 2.5rem); }
}

/* Between the phone crop and the wide overlay, the wide photograph is served
   into a shallow 2:1 band that leaves no room for type. A taller slot gives
   the words somewhere to sit, and the framing is nudged right so the subject
   is not cropped out of it. */
@media (min-width: 701px) and (max-width: 1199px) {
  .hero__media .media { aspect-ratio: 4 / 3; }
  .hero__media .media img { object-position: 58% center; }
  .hero--page .hero__media .media { aspect-ratio: 5 / 2; }
}

@media (max-width: 700px) {
  /* The minimum belongs on the hero, not on the picture inside it: a
     `min-height` sitting next to an `aspect-ratio` makes the box grow
     sideways to keep the ratio. On the grid container it simply sets the row
     height, and the picture stretches to fill it and crops.

     In rem rather than viewport units — the words need a fixed amount of
     room, and `vh` on a phone changes as the browser's toolbar slides away. */
  .hero { min-height: 33rem; }

  /* The title is set to fill a phone screen when it stands alone. Over a
     photograph it has to leave the picture visible as well. */
  .hero__body .hero__title { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  .hero__body .hero__tagline { font-size: var(--t-body); }
  .hero__body .btn-row { margin-top: var(--s-5); }
  .hero__body .btn { padding: 0.875rem var(--s-5); }
}

.hero__body {
  /* Tight to the photograph above, with the usual air kept below */
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.hero__title {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s-2);
}

/* The tagline is set to hold on a single line. It only wraps on screens too
   narrow to fit it, where wrapping is better than overflow. */
.hero__tagline {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--ink-muted);
  max-width: none;
  margin: 0 auto;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero__tagline { white-space: normal; max-width: 30ch; }
}

/* ---- Overlay hero -------------------------------------------------------
   From 1200px up, the wordmark, tagline and buttons sit on the photograph
   rather than beneath it. The scrim is a WHITE wash, not a dark one — it
   reads as the window light already in the picture and keeps the page airy.

   1200, not 1024: the white wash only covers the left half of the frame, and
   on a landscape tablet the subject sits far enough left that the tagline
   crosses her face. Below this width the text returns to sitting under the
   photograph, where it is unambiguously readable. */

@media (min-width: 1200px) {
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.42) 22%,
      rgba(255, 255, 255, 0.16) 38%,
      rgba(255, 255, 255, 0) 50%);
  }

  .hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-block: 0;
    max-width: none;
    padding-inline: var(--gutter);
  }

  .hero__body .hero__title {
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    max-width: 480px;
    text-wrap: balance;
  }

  .hero__body .hero__tagline {
    font-size: 1.25rem;
    margin-inline: 0;
    max-width: none;
    /* Over an image the tagline needs the extra contrast to stay readable. */
    color: var(--ink-body);
  }

  .hero__body .btn-row { justify-content: flex-start; }

  /* Banner buttons run tighter than in-page ones so the pair stays inside
     the clear area beside the subject. */
  .hero__body .btn {
    font-size: var(--t-micro);
    padding: 0.8125rem var(--s-5);
  }

  .hero__body .btn--ghost {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(27, 27, 25, 0.22);
  }
  .hero__body .btn--ghost:hover { background: rgba(255, 255, 255, 0.92); }
}

/* Interior page hero — no full-bleed photograph. Centred by default: the
   rule, the introduction and the buttons all have to be centred explicitly,
   since none of them inherits it from `text-align`. */
.page-hero {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.page-hero .rule-accent,
.page-hero .wp-block-separator.rule-accent { margin-inline: auto; }
.page-hero .lead,
.page-hero p { margin-inline: auto; }
.page-hero .btn-row { justify-content: center; }

.page-hero--left { text-align: left; }
.page-hero--left .rule-accent,
.page-hero--left .wp-block-separator.rule-accent { margin-inline: 0; }
.page-hero--left .lead,
.page-hero--left p { margin-inline: 0; }
.page-hero--left .btn-row { justify-content: flex-start; }

/* ---- Coming soon --------------------------------------------------------
   A page that is not ready yet. Generous vertical space so it reads as a
   deliberate holding screen rather than a page that failed to load. */

.coming-soon {
  padding-block: clamp(5rem, 12vw, 9rem);
}

/* The headline of the page it is standing in for, so it is set on the display
   scale rather than the ordinary heading one. */
.coming-soon__title {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* The page's own name, above it */
.coming-soon .eyebrow {
  margin-bottom: var(--s-5);
}
.coming-soon .lead {
  max-width: 46ch;
  margin-inline: auto;
}
.coming-soon .btn-row {
  justify-content: center;
  margin-top: var(--s-7);
}

/* Shown only to someone who can edit the page */
.coming-soon__note {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  max-width: 52ch;
  margin-inline: auto;
}

/* ---- Triad strip -------------------------------------------------------- */

.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-6);
}

.triad__item {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 96px) 1fr;
  gap: var(--s-4);
  align-items: center;
  text-align: left;
}

/* Square still lifes: skin texture, water, a droplet on the skin surface */
.triad__media {
  width: 100%;
  max-width: none;
  margin: 0;
}

.triad__text {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.25vw, 1.3125rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}

@media (max-width: 780px) {
  .triad {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-block: var(--s-5);
  }
}

/* ---- Bio card ----------------------------------------------------------- */

.bio-card {
  text-align: center;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  /* As a grid item the card is narrower than its track. `justify-self` is
     resolved before auto margins there, so the centring has to be said twice:
     once for the block case, once for the grid one. */
  justify-self: center;
}

/* A true circle: the 1:1 override matters, since border-radius on the
   inherited 4:5 box would give an ellipse rather than a circle. */
.bio-card__portrait {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--s-6);
  border-radius: 50%;
}

.bio-card__role {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--s-2);
}

.bio-card__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.bio-card__text {
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink-muted);
  margin-inline: auto;
  max-width: 40ch;
}

.bio-card .btn-row {
  justify-content: center;
  margin-top: var(--s-6);
}

/* The "More about Sally" line sits clear of the button rather than tight
   under it — the static build set this inline; here it is a rule. */
.bio-card .btn-row + p,
.bio-card .wp-block-buttons + p { margin-top: var(--s-5); }

/* ---- Split: text beside an image ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--media-first .split__media { order: -1; }

/* Both columns begin on the same line rather than being centred against
   each other — the heading and the portrait share a top edge. */
.split--top { align-items: start; }

/* The image matches the height of the text beside it. The figure has to be
   taken OUT of flow to do this: with a plain stretch the grid row is sized by
   the tallest item, which is the image itself, so the text would stretch to
   the picture instead of the reverse. */
.split--stretch { align-items: stretch; }
.split--stretch .split__media {
  position: relative;
  min-height: 280px;
}
.split--stretch .split__media > .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
@media (max-width: 860px) {
  /* Stacked, there is no text height to match — restore the natural shape */
  .split--stretch .split__media { position: static; min-height: 0; }
  .split--stretch .split__media > .media {
    position: static;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s-7); }
  .split--media-first .split__media { order: 0; }
}

/* ---- Statement ---------------------------------------------------------- */

.statement p {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin-bottom: var(--s-5);
}
.statement p:last-child { margin-bottom: 0; }

/* A single statement set across the full column width rather than held to a
   reading measure. For one or two sentences that is fine; anything longer
   should go back to --measure, where the eye can find the next line. */
.statement-wide {
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 2vw, 1.75rem);
  line-height: 1.5;
  letter-spacing: var(--ls-head);
  color: var(--ink);
  max-width: none;
  margin: 0;
}

/* A single large serif line used to open or close a section */
.statement-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.4;
  letter-spacing: var(--ls-head);
  color: var(--ink);
  max-width: 30ch;
  margin-bottom: var(--s-6);
}
.center .statement-lead { margin-inline: auto; }

/* Her constraint words, set as individual lines rather than a comma list */
.constraints {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.constraints li {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--ink);
  margin: 0;
}
.center .constraints { justify-content: center; }

/* ---- Topic cards -------------------------------------------------------- */

.card-grid {
  display: grid;
  /* min(…, 100%) rather than a bare pixel minimum: on a screen narrower than
     the minimum, a bare one makes the track wider than its container and the
     page scrolls sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s-7);
}
.card {
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.section--warm .card { background: var(--bg-warm); }

.card__number {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  color: var(--accent-deep);
  margin: 0;
}
.card__title {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.card__body {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Section with a full-bleed photographic panel -----------------------
   No scrim, no wash, no overlay. The photograph is a clean panel bleeding off
   the right edge; the text sits on plain white beside it. A hard edge between
   the two is more restrained than any gradient over the top of them. */

.section--photo {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
}
.section--photo > .container { position: relative; z-index: 2; }

.section__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  z-index: 0;
  margin: 0;
}
.section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}

@media (max-width: 980px) {
  /* No room for a side panel — the photograph becomes a full-width band above
     the text, still with nothing laid over it. */
  .section--photo { padding-top: 0; }
  .section__bg { position: static; width: 100%; }
  .section__bg img { aspect-ratio: 16 / 9; height: auto; }
  .section--photo > .container { padding-top: clamp(2rem, 5vw, 3rem); }
}

/* ---- Coaching callout band ---------------------------------------------- */

.callout { text-align: center; }

/* text-align has no effect on a flex row, so the buttons have to be centred
   explicitly — otherwise they sit left inside a centred block. */
.callout .btn-row { justify-content: center; }

/* Left-aligned variant, for when the band sits beside a photograph. The
   measure is bounded so the text never runs under the panel. */
.callout--left {
  text-align: left;
  max-width: 40ch;
  margin-inline: 0;
}
@media (max-width: 980px) {
  .callout--left { max-width: var(--measure); }
}
.callout--left .rule-accent { margin-inline: 0; }
.callout--left p { margin-inline: 0; }

/* The band is held to 40ch so its text never runs under the photograph, which
   means two buttons cannot sit side by side. Stacked, they should at least be
   the same size: one column sized to the wider of them, both filling it. */
.callout--left .btn-row {
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
  gap: var(--s-4);
}
.callout--left .btn-row > .btn,
.callout--left .btn-row > .wp-block-button { width: 100%; }
.callout--left .btn-row .wp-block-button__link { width: 100%; }

.callout__meta {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s-4);
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--bg-warm-deep);
  padding-block: var(--s-7) var(--s-6);
  border-top: 1px solid var(--rule);
}

/* Five columns: the brand, then one per area of the site. */
.site-footer__grid {
  display: grid;
  /* The services column is widest: "Product Recommendations" plus its Members
     marker is the longest line in the footer, and it must not break in two. */
  grid-template-columns: 1.25fr 0.8fr 1.7fr 1fr 0.95fr;
  gap: var(--s-5) var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule-strong);
}
@media (max-width: 1180px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-6); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* In the footer the pill is dropped for plain text — at this size a bordered
   pill is fussy. The marker must stay on the same line as the link it labels. */
.footer-list .nav-members {
  border: 0;
  padding: 0;
  margin-left: 0.5em;
  font-size: 0.5625rem;
  color: var(--ink-faint);
}
.footer-list li:has(.nav-members) { white-space: nowrap; }

.site-footer .wordmark { display: block; margin-bottom: var(--s-3); }
.site-footer .wordmark img { height: 60px; }

.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: var(--t-body);
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 1040px) {
  .site-footer__tagline { white-space: normal; max-width: 30ch; }
}
@media (max-width: 760px) {
  .site-footer__tagline { white-space: nowrap; max-width: none; }
}
@media (max-width: 460px) {
  .site-footer__tagline { white-space: normal; max-width: 30ch; }
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: var(--s-2); }
.footer-list a { color: var(--ink-body); font-size: var(--t-small); }
.footer-list a:hover { color: var(--ink); }

/* Plain statement in the Contact column — not a link */
.footer-note {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}

/* ---- Footer base --------------------------------------------------------
   Copyright, the registered-trademark notice, and the standing educational
   disclaimer. Each is a separate line so none of them can be skimmed past. */

.site-footer__base {
  padding-top: var(--s-5);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--ink-muted);
}
.site-footer__base p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.site-footer__base p:last-child { margin-bottom: 0; }
.site-footer__base a { color: var(--ink-muted); text-decoration: underline; }
.site-footer__base a:hover { color: var(--ink); }
.site-footer__base .sep { color: var(--ink-faint); margin-inline: 0.5em; }

/* A legal statement, not a footnote — slightly more weight than fine print */
.trademark-notice { color: var(--ink-body); }

/* Selector must be at least as specific as `.site-footer__base p` above,
   or the reading-measure cap set there wins and this stays a narrow column. */
.site-footer__base .footer-disclaimer {
  max-width: none;
  color: var(--ink-body);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-strong);
}
.footer-disclaimer a { color: var(--ink-body); }

/* ---- Members gate ------------------------------------------------------- */

.gate {
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--s-8);
}
.gate__label {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.gate h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.gate p {
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink-body);
}
.gate .btn-row { margin-top: var(--s-5); }

/* ---- Prose: legal pages and blog posts ---------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { max-width: var(--measure); }
.prose li { line-height: var(--lh-body); }

.prose blockquote,
blockquote {
  margin: var(--s-7) 0;
  padding-left: var(--s-6);
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}

/* Boxed notice — used for the disclaimer and "what this is not" blocks */
.notice {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-block: var(--s-7);
}
.notice p { font-size: var(--t-small); line-height: 1.75; }
.notice .notice__title {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s-3);
}
.section--warm .notice { background: #fff; }

/* ---- Steps -------------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  counter-reset: step;
}
.steps > li,
.steps > .step {
  counter-increment: step;
  position: relative;
  padding-left: clamp(3.25rem, 6vw, 4.5rem);
  padding-bottom: var(--s-7);
  margin: 0 0 0 1rem;
  border-left: 1px solid var(--rule);
}
.steps > li:last-child,
.steps > .step:last-child { padding-bottom: 0; border-left-color: transparent; }
.steps > li::before,
.steps > .step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--accent-deep);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  padding: 0.25rem 0.4rem;
}
.section--warm .steps > li::before,
.section--warm .steps > .step::before { background: var(--bg-warm); }
.steps h3 { margin-bottom: var(--s-3); }
.steps p { font-size: var(--t-small); color: var(--ink-muted); }

/* ---- Blog --------------------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--s-7);
}
.post-card { display: flex; flex-direction: column; gap: var(--s-4); }
.post-card .media { margin-bottom: var(--s-2); }
.post-card__meta {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.post-card__title {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--accent-deep); text-decoration: none; }
.post-card__excerpt {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* Pagination between archive pages */
.pagination {
  margin-top: var(--s-8);
  display: flex;
  justify-content: center;
}
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-small);
  color: var(--ink-body);
}
.pagination .page-numbers:hover { border-color: var(--rule-strong); text-decoration: none; }
.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Marks a section whose copy is not yet written by the client. These blocks
   contain notes to the client, not finished copy, and must never be mistaken
   for the real thing. Deleting them is a pre-launch step. */
.awaiting {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: repeating-linear-gradient(
    135deg, transparent, transparent 10px,
    rgba(224, 83, 58, 0.05) 10px, rgba(224, 83, 58, 0.05) 20px);
}
.awaiting__label {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s-3);
}

/* ---- Forms -------------------------------------------------------------- */

.form { max-width: 560px; margin-top: var(--s-7); }
.form__field { margin-bottom: var(--s-5); }

.form label {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.form .hint {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  font-weight: 400;
  margin-top: var(--s-1);
}

.form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.875rem var(--s-4);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.form textarea { min-height: 9rem; resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(168, 64, 43, 0.12);
}

.form .required { color: var(--accent-deep); }

/* Contact routes shown beside the form — the fallback that always works */
.contact-routes { list-style: none; padding: 0; margin: 0; }
.contact-routes li {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.contact-routes li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.contact-routes .footer-heading { margin-bottom: var(--s-2); }
.contact-routes a { font-size: var(--t-lead); font-family: var(--font-serif); }

/* ---- Breadcrumb --------------------------------------------------------- */

.breadcrumb {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin-inline: 0.5em; color: var(--ink-faint); }

/* ---- Two-up hub links — the mark's two branches ------------------------- */

.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--s-7);
}
.branch {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.branch:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.branch__body {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

/* The two card titles are the page's real navigation — they name the two
   halves of the service, so they carry more weight than a card heading
   normally would, with the accent rule used elsewhere on the site. */
.branch__body .card__title {
  font-size: clamp(1.5rem, 2.1vw, 1.9375rem);
  line-height: 1.15;
  letter-spacing: var(--ls-head);
}
.branch__body .card__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-top: var(--s-4);
}
.branch__body .link-arrow { margin-top: auto; padding-top: var(--s-4); }

/* ---- Contact routes ----------------------------------------------------- */

/* The block editor has no list item that can hold a heading, a link and a
   note, so each route is a small group. The rules mirror the list version
   above so both shapes render identically. */
.contact-routes { margin-top: var(--s-6); }
.contact-routes > .contact-route {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.contact-routes > .contact-route:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.contact-routes > .contact-route .footer-heading { margin-bottom: var(--s-2); }
.contact-routes > .contact-route a { font-size: var(--t-lead); font-family: var(--font-serif); }
.contact-routes > .contact-route .micro a { font-size: var(--t-micro); font-family: var(--font-sans); }

/* ---- Entrance motion ----------------------------------------------------
   The hidden state is behind `.js`, which is set by a one-line script in the
   head. Without JavaScript the class is never added, so the content is simply
   there rather than permanently invisible — and the same is true in the block
   editor, where the script does not run at all. */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   4. WORDPRESS BRIDGE
   Core block markup mapped onto the design above. This is the only section
   that knows about `wp-block-*` class names.
   ========================================================================== */

/* ---- Wrappers ----------------------------------------------------------- */

/* Groups carry the design's own class names. Core adds no layout of its own
   unless a layout attribute is set, so nothing here has to be undone. */
.wp-block-group { min-width: 0; }

/* Nothing on this site is ever cut off by an editor-set max width — the
   design's own `.container` / `.container--narrow` do that job. */
.entry-content > .alignfull { margin-inline: 0; max-width: none; }

/* ---- Headings, paragraphs, lists ---------------------------------------- */

.wp-block-heading { margin: 0; }
h2.wp-block-heading + .rule-accent { margin-top: var(--s-5); }

/* Core gives lists a default class; the element rules above already cover it */
ul.wp-block-list, ol.wp-block-list { max-width: var(--measure); }

/* ---- Separator as the thin accent rule ---------------------------------- */

.wp-block-separator.rule-accent {
  width: 44px;
  height: 1px;
  background-color: var(--accent);
  border: 0;
  opacity: 1;
  margin: var(--s-5) 0;
}
.center .wp-block-separator.rule-accent,
.callout .wp-block-separator.rule-accent,
.bio-card .wp-block-separator.rule-accent { margin-inline: auto; }
.callout--left .wp-block-separator.rule-accent { margin-inline: 0; }

/* ---- Images ------------------------------------------------------------- */

/* Core's figure carries a bottom margin the design does not want.
   Wrapped in :where() so it has no specificity of its own — otherwise this
   one line beats every margin the design sets on an individual slot, and
   `.bio-card__portrait`'s 32px below the circle quietly disappears. */
:where(figure.wp-block-image) { margin: 0; }
figure.wp-block-image > img { display: block; }

/* A fixed-ratio slot crops its photograph rather than being resized by it.
   Core's own `height: auto` on `img[class*=wp-image-]` has to be beaten here,
   which is why the figure's class is repeated in the selector. */
figure.wp-block-image.media > img,
figure.wp-block-image.section__bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure.wp-block-image figcaption {
  font-size: var(--t-micro);
  color: var(--ink-muted);
  margin-top: var(--s-3);
  text-align: left;
}

/* ---- Columns as the design's split -------------------------------------- */

/* `.split` is a two-column grid. Core's columns are flex; the grid
   declaration here wins because this stylesheet loads after core block CSS,
   and the flex properties left on the children are simply ignored. */
.wp-block-columns.split { display: grid; margin-bottom: 0; }
.wp-block-columns.triad { display: grid; margin-bottom: 0; }
.wp-block-columns.branch-grid { display: grid; margin-bottom: 0; }
.wp-block-columns.card-grid { display: grid; margin-bottom: 0; }
.wp-block-columns.post-grid { display: grid; margin-bottom: 0; }

/* ---- Buttons ------------------------------------------------------------
   Core puts the block's class name on the wrapper `div`, not on the `a`
   inside it, so every button variant is expressed as wrapper → link here
   rather than being applied to the link directly. */

.wp-block-buttons.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.center .wp-block-buttons.btn-row,
.callout .wp-block-buttons.btn-row { justify-content: center; }
.callout--left .wp-block-buttons.btn-row,
.hero__body .wp-block-buttons.btn-row { justify-content: flex-start; }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 1.0625rem var(--s-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.wp-block-button__link:hover { text-decoration: none; transform: translateY(-1px); }
.wp-block-button__link:active { transform: translateY(0); }

.wp-block-button.btn--accent > .wp-block-button__link { background: var(--accent-deep); color: #fff; }
.wp-block-button.btn--accent > .wp-block-button__link:hover { background: #8F3523; }

.wp-block-button.btn--primary > .wp-block-button__link { background: var(--ink); color: #fff; }
.wp-block-button.btn--primary > .wp-block-button__link:hover { background: #34322E; }

.wp-block-button.btn--ghost > .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.wp-block-button.btn--ghost > .wp-block-button__link:hover {
  border-color: var(--ink);
  background: rgba(27,27,25,0.02);
}

.wp-block-button.btn--light > .wp-block-button__link {
  background: #fff;
  color: var(--ink);
  border-color: var(--rule);
}
.wp-block-button.btn--light > .wp-block-button__link:hover { background: #fff; border-color: var(--rule-strong); }

/* ---- Quote -------------------------------------------------------------- */

.wp-block-quote {
  margin: var(--s-7) 0;
  padding-left: var(--s-6);
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}
.wp-block-quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Contact Form 7 -----------------------------------------------------
   CF7 emits its own wrappers around whatever markup the form template
   contains. The form template uses the design's own `.form` / `.form__field`
   classes, so only CF7's own furniture needs handling here. */

.wpcf7 { margin: 0; }
.wpcf7-form .form__field { margin-bottom: var(--s-5); }
.wpcf7-form p { margin: 0; }

/* CF7 wraps every control in a span, which would otherwise break the
   full-width inputs the design expects. */
.wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.875rem var(--s-4);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.wpcf7-form textarea { min-height: 9rem; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(168, 64, 43, 0.12);
}

.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 1.0625rem var(--s-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--accent-deep);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  width: auto;
}
.wpcf7-form input[type="submit"]:hover { background: #8F3523; transform: translateY(-1px); }

/* Validation and response messages, restated in the site's own palette */
.wpcf7 form .wpcf7-response-output {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-width: 1px;
  border-radius: var(--radius);
  font-size: var(--t-small);
  line-height: 1.6;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #4F7A52;
  background: #F1F6F1;
  color: #2E4A30;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  color: var(--accent-deep);
}
.wpcf7-form .wpcf7-not-valid { border-color: var(--accent); }
.wpcf7-spinner { margin-left: var(--s-4); }

/* The honeypot field must be reachable by nothing and visible to no one */
.abs-hp { position: absolute; left: -9999px; opacity: 0; }

/* ---- Comments ----------------------------------------------------------- */

.comment-list { list-style: none; padding: 0; margin: 0 0 var(--s-7); }
.comment-list li { margin-bottom: var(--s-6); }
.comment-meta { font-size: var(--t-micro); color: var(--ink-muted); margin-bottom: var(--s-2); }
.comment-respond { margin-top: var(--s-7); }
.comment-form label { display: block; font-size: var(--t-small); font-weight: 500; margin-bottom: var(--s-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.875rem var(--s-4);
  margin-bottom: var(--s-5);
}
.comment-form input[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  padding: 1.0625rem var(--s-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: #fff;
  cursor: pointer;
}

/* ---- Search ------------------------------------------------------------- */

.search-form { display: flex; gap: var(--s-3); max-width: 460px; margin-top: var(--s-6); }
.search-form input[type="search"] {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.875rem var(--s-4);
}
.search-form button {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}