:root {
  --site-header-height: 64px;
  --site-nav-line-height: 1.4;
}

.site-header,
.site-header *,
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* min-height, not height: at a large text size the wordmark wraps and the
     bar grows to hold it. site-shell.js publishes the real height as
     --site-header-offset for the things positioned against it. */
  min-height: var(--site-header-height);
  background: rgba(245,240,232, 0.97);
  /* Inset shadow, not border-bottom: a border adds to the height the nav sets,
     so a bar that grows with its content would be 65px, not 64px. */
  box-shadow: inset 0 -1px 0 #d4ccbf;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "DM Sans", Arial, sans-serif;
  /* Pages set their own body line-height (1.7-1.8, or normal). Without this the
     header inherits it and the dropdown's line box height differs per page. */
  line-height: var(--site-nav-line-height);
}

.site-nav {
  position: static;
  width: 100%;
  max-width: 1240px;
  /* height: auto overrides the old page-level `nav { height: 64px }` rules
     still in reiki.html and coaching.html (like position, background and
     border here); without it the bar can't grow with a wrapped wordmark. */
  height: auto;
  min-height: var(--site-header-height);
  margin: 0 auto;
  padding: 0 40px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.site-brand {
  /* May shrink so the wordmark wraps rather than pushing the Menu button off
     the screen; at normal text sizes it always fits and never shrinks. */
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4d5440;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}

/* Emblem only - the wordmark is the adjacent text, so the mark is not
   repeated here. Asset is 86x80 (2x) displayed at 43x40; the width and
   height attributes on the <img> reserve the space so the header does not
   reflow while it loads. */
.site-brand-mark {
  display: block;
  flex-shrink: 0;
  width: 43px;
  height: 40px;
}

/* Scoped to the text wrapper, not .site-brand, so it styles only the
   italic "You" and never the wrapper or the emblem. */
.site-brand-text span {
  color: #5a534c;
  font-style: italic;
  font-weight: 300;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 23px;
}

.site-links a {
  color: #5e5953;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
}

.site-links a:hover,
.site-links a[aria-current="page"] {
  color: #4d5440;
}

.site-links .site-call {
  background: #4d5440;
  color: #fff;
  padding: 11px 20px;
}

.site-links .site-call:hover {
  background: #5e684c;
  color: #fff;
}

/* Dropdown */
.site-dropdown {
  position: relative;
  /* Full header height, so the trigger centres on the same band as the sibling
     anchors and `top: 100%` on the panel resolves to the header's bottom edge. */
  display: flex;
  align-items: center;
  height: var(--site-header-height);
}

.site-dropdown-toggle {
  /* Flex so the caret is a sized box rather than a glyph in the text run. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #5e5953;
  cursor: pointer;
  font: 400 11px/var(--site-nav-line-height) "DM Sans", Arial, sans-serif;
  letter-spacing: 0.12em;
  padding: 0;
  text-transform: uppercase;
  transition: color 0.2s;
}

.site-dropdown-toggle:hover {
  color: #4d5440;
}

/* Border triangle, not a ▾ glyph: DM Sans has no such glyph, so the character
   fell back to a system font whose metrics inflated the button's line box. */
.site-dropdown-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  /* Optical centring against the uppercase x-height. */
  margin-top: 1px;
}

.site-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #f5f0e8;
  border: 1px solid #d4ccbf;
  min-width: 160px;
  padding: 8px 0;
  z-index: 1001;
}

.site-dropdown-menu.is-open {
  display: block;
}

.site-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  white-space: nowrap;
}

.site-dropdown-menu a:hover {
  background: #ede8df;
}

.site-menu-toggle {
  display: none;
  flex-shrink: 0;
  border: 1px solid #c4bbaa;
  background: transparent;
  color: #4d5440;
  font: 500 11px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.18em;
  padding: 12px 14px;
  text-transform: uppercase;
}

/* Two ways a page reserves the fixed header's space - they are NOT
   interchangeable, and swapping one for the other is a visual change, not a
   refactor.

   1. This spacer (<div class="site-header-offset">) pushes content BELOW the
      header. Use it where content must not sit under the header at all:
      index.html, whose announcement bar has to be visible. webinar,
      ceiling-audit and methodology use it too (they already did); there the
      page background, not the hero, shows through the header.

   2. Hero padding-top: var(--site-header-offset, var(--site-header-height))
      lets the hero extend UNDER the header by design (about, testimonials,
      wcp, reiki, coaching). The header is ~97% opaque with a backdrop blur,
      so the dark hero shows faintly through it. A spacer on these pages would
      put the page background under the header instead and change its colour.

   Both read the same variable, which site-shell.js sets to the header's
   measured height (64px unless a large text size wraps the wordmark), so
   both follow the header when it grows. Without the script, both fall back
   to --site-header-height. */
.site-header-offset {
  height: var(--site-header-offset, var(--site-header-height));
}

.site-footer {
  background: #20221a;
  color: #e5e7df;
  display: block;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: initial;
  letter-spacing: normal;
  line-height: normal;
  padding: 58px 40px 28px;
  text-align: left;
}

.site-footer-inner {
  display: grid;
  gap: 34px;
  /* Contact never shrinks below its own content - the social row is four
     fixed 44px buttons on one line, which a minmax(0, 1fr) column let the
     grid squeeze narrower than, pushing the last button past the edge. */
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) minmax(min-content, 1fr);
  max-width: 1240px;
  margin: 0 auto;
}

.site-footer-about {
  max-width: 225px;
}

/* Footer emblem. This is a light recolour of the SAME crop as the header
   mark, not a second piece of source art: the original olive measures
   2.16:1 against this near-black ground, so its circle and leaves vanish
   while only the gold survives. Recoloured, it reads at 14.35:1.
   Displayed at the header's 43x40 from a 138x128 asset (3.2x), so it stays
   crisp on a retina screen.

   The mark is centred over the wordmark TEXT, not the column. The wordmark
   is a block <p> as wide as the column, so there is no box of the text's
   own width to centre against; the lockup provides one by shrinking to
   fit its widest child (the wordmark). The wordmark and everything below
   it stay left-aligned. */
.site-footer-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.site-footer-mark {
  display: block;
  width: 43px;
  height: 40px;
  margin: 0 0 14px;
}

.site-footer-brand {
  color: #f3f2ed;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.site-footer-sub {
  color: #c8deb0;
  font-size: 11px;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

/* Keeps the title together so a narrow column breaks after the slash, not
   inside the title. inline-block rather than non-breaking spaces: it still
   wraps inside itself when the title alone is wider than the column (large
   text), where &nbsp; would force one unbreakable line out of the column. */
.site-footer-role {
  display: inline-block;
}

.site-footer-text {
  color: #d3d3cb;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  margin: 0 0 20px;
  max-width: 300px;
}

.site-footer-heading {
  color: #c8deb0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.site-footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-links li {
  font-size: 13px;
  line-height: 1.6;
}

.site-footer a,
.site-footer-links span {
  color: #e5e7df;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-footer a:hover {
  color: #c8deb0;
}

/* Contact column: one line icon per row, centred against the text. Icons are
   inline SVG rather than an icon font so the shell stays dependency-free. */
.site-footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* An email address has no spaces to wrap at, so at a large text size it
   would push the column (and on a phone, the page) wider than the screen. */
.site-footer-contact-list a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

.site-footer-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #c8deb0;
}

/* Social row: circular buttons at the foot of the Contact column. nowrap keeps
   them on one line on a phone; 44px is the comfortable minimum tap target. */
.site-footer-social {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.site-footer a.site-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(200, 222, 176, 0.09);
  color: #c8deb0;
  transition: background 0.2s, color 0.2s;
}

.site-footer a.site-footer-social-link:hover,
.site-footer a.site-footer-social-link:focus-visible {
  background: rgba(200, 222, 176, 0.2);
  color: #c8deb0;
}

.site-footer a.site-footer-social-link:focus-visible {
  outline: 2px solid #c8deb0;
  outline-offset: 2px;
}

.site-footer-social-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.site-footer-bottom {
  border-top: 1px solid rgba(197, 217, 168, 0.18);
  color: #b9bbb3;
  font-size: 11px;
  letter-spacing: 0.08em;
  max-width: 1240px;
  margin: 44px auto 0;
  padding-top: 24px;
  text-align: center;
  /* Copyright and legal links share one centred row when there is room and
     wrap onto two when there is not. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 28px;
}

.site-footer-copy,
.site-footer-legal ul {
  margin: 0;
  padding: 0;
}

/* Pages style bare `p` (index.html: p { color: var(--text) }, which is the
   footer's own background colour here; index and ceiling-audit also cap
   p at 70ch), and a class rule outranks inheritance from the bar. Take the
   bar's colour back explicitly and drop any cap. */
.site-footer .site-footer-copy {
  color: inherit;
  max-width: none;
}

/* Resets the old page-level `nav { position: fixed; height: 64px; ... }` rules
   still in reiki.html and coaching.html, which match every <nav> - the same
   reason .site-nav resets them. Without this the links pin to the top of the
   screen on those two pages. */
.site-footer-legal {
  position: static;
  z-index: auto;
  height: auto;
  padding: 0;
  display: block;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-footer-legal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.site-footer-legal li {
  display: flex;
  align-items: center;
}

/* Separator dot, drawn rather than typed so screen readers don't announce it. */
.site-footer-legal li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(197, 217, 168, 0.55);
}

/* Padding keeps each link at least 24px tall to tap; the matching negative
   margin stops that padding adding height to the bar, so the row is no taller
   than a line of text. */
.site-footer .site-footer-legal a {
  display: inline-block;
  padding: 6px 2px;
  margin: -6px 0;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.site-footer .site-footer-legal a:focus-visible {
  outline: 2px solid #c8deb0;
  outline-offset: 2px;
}

@media (max-width: 800px) {
  /* 12px less the links' -6px margin leaves ~6px of visible space. */
  .site-footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}

/* Narrow screens: plain spacing instead of dots, so a row the links wrap onto
   never starts with a stray separator. */
@media (max-width: 480px) {
  /* 12px between wrapped rows: exactly the two links' 6px tap padding, so
     tap areas meet but never overlap. */
  .site-footer-legal ul {
    gap: 12px 20px;
  }

  .site-footer-legal li + li::before {
    display: none;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    padding: 0 24px;
  }

  .site-menu-toggle {
    display: block;
  }

  .site-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 18px 24px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #f5f0e8;
    border-bottom: 1px solid #d4ccbf;
    /* The menu hangs off the fixed header, so it cannot scroll with the page.
       Cap it at the viewport below the header and let it scroll itself, or at
       high zoom the lower links sit off-screen with no way to reach them. */
    max-height: calc(100vh - var(--site-header-offset, var(--site-header-height)));
    max-height: calc(100dvh - var(--site-header-offset, var(--site-header-height)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-links.is-open {
    display: flex;
  }

  .site-links a {
    padding: 12px 0;
  }

  /* Dropdown becomes flat list in mobile menu */
  .site-dropdown {
    display: contents;
  }

  .site-dropdown-toggle {
    display: none;
  }

  .site-dropdown-menu {
    display: contents;
  }

  .site-dropdown-menu.is-open {
    display: contents;
  }

  .site-dropdown-menu a {
    padding: 12px 0;
  }

  .site-links .site-call {
    margin-top: 10px;
    padding: 13px 20px;
    text-align: center;
  }
}

@media (max-width: 1080px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 38px 46px;
  }

  .site-footer-about {
    max-width: none;
  }
}

@media (max-width: 800px) {
  .site-footer {
    padding: 48px 24px 24px;
  }
}

@media (max-width: 560px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* On a phone the contact details are the most likely thing to be reached
     for, so they follow the brand block rather than sitting last. */
  .site-footer-about {
    order: -2;
  }

  .site-footer-contact {
    order: -1;
  }
}