/* ==========================================================================
   Synthesis Health & Wellness
   One stylesheet. No build step. See GUIDELINES.md before editing.
   ========================================================================== */


/* ---------------------------------------------------------------- fonts --
   Self-hosted, deliberately. Loading these from Google would send every
   visitor's IP address and referring page to a third party, which is not a
   trade this particular site should be making. It also removes a network
   dependency the practice does not control.

   Both are variable fonts, so one file covers every weight we use.
   font-display: swap keeps text readable while they load.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- brand --
   The palette is the logo's own palette, sampled from the mark:
     #344f59  slate   - the SYNTHESIS wordmark and the blue puzzle half
     #566f54  moss    - the green puzzle half and "Health & Wellness"
     #607a5b  leaf    - the tree's foliage
     #b4baae  sage    - the quiet neutral that sits between them
     #fdf7f1 .. #faf4ee  cream - the paper the mark is printed on

   Those four creams are within ~1% of each other, so they cannot carry
   elevation on their own. Depth comes from lifting cards toward white and
   from tinting the alternating section bands by HUE rather than by value:
   one band cool (toward sage), the next warm. Every colour below is either
   one of those six or a tint/shade of one, mixed on a fixed ramp.

   Every text and UI pairing in this file is contrast-checked; the numbers
   are in the comments and none of them is below its WCAG 2.1 AA floor.
   ------------------------------------------------------------------------ */
:root {
  --slate:      #344f59;
  --slate-deep: #273b43;
  --slate-ink:  #22333a;
  --moss:       #566f54;
  --leaf:       #607a5b;
  --sage:       #b4baae;

  --cream-1:    #fdf7f1;
  --cream-2:    #fcf6ef;
  --cream-3:    #fbf5ef;
  --cream-4:    #faf4ee;

  --measure:    68ch;
  --radius:     14px;
  --radius-lg:  22px;

  --font-head:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pad:        clamp(1.25rem, 5vw, 2.5rem);
  --gutter:     16px;
}

/* ===========================================================================
   Themes
   ---------------------------------------------------------------------------
   Light is the default for everyone. The site deliberately does NOT follow
   prefers-color-scheme: a visitor whose device is set to dark still gets the
   cream palette, because that palette is the practice's brand and is what the
   practice wants people to meet first. Dark is reached only by pressing the
   toggle, and that choice is then remembered in localStorage.

   Worth knowing if this is ever revisited: opioid withdrawal dilates the
   pupils and causes real light sensitivity, and many people reach a site like
   this late at night. For some visitors dark is an accessibility need rather
   than a taste, which is why the theme is kept complete and the toggle stays
   in the header on every page rather than being buried or dropped.

   Two rules, deliberately:
     - no pure black background, no pure white text: together they cause
       halation, which makes serif text shimmer
     - the same brand colours, shaded, so it reads as the same practice
       rather than a generic dark theme
     - every text pairing clears WCAG AA

   Cascade order below matters and is load-bearing:
     1. :root                         light, for everyone, always
     2. :root[data-theme="dark"]      dark, only when the visitor asks

   There is no :root[data-theme="light"] rule: :root is already light, so an
   explicit choice of light simply removes the dark attribute and lands here.
   ========================================================================= */

/* ---- 1. Light. The default, and the only state reached automatically. ---- */
:root {
  --bg:              #faf4ee;
  --bg-blur:         rgba(250, 244, 238, .92);
  --surface:         #fefbf7;
  --surface-2:       #edeae2;  /* cool band, at its AA ceiling: moss accent on it = 4.60 */
  --surface-3:       #efe7df;  /* warm band, same ceiling: moss accent = 4.52 */
  --chip:            #d7ebd5;  /* the logo green, light enough to sit under ink */
  --border:          #deddd5;
  --border-strong:   #7a8a88;  /* ghost-button edge, >=3:1 on every surface */
  --hairline:        #e7e5dd;

  --text:            #22333a;
  --text-soft:       #314b55;
  --text-faint:      #506870;
  --heading:         #273b43;
  --link:            #344f59;
  --link-hover:      #566f54;
  --accent-soft:     #566f54;  /* text-bearing: must clear AA, not just decorate */

  --btn-bg:          #344f59;
  --btn-bg-hover:    #273b43;
  --btn-fg:          #ffffff;

  --band-bg:         #344f59;
  --band-text:       #ced2ca;
  --band-heading:    #ffffff;
  --band-muted:      #bfc4ba;
  --band-accent:     #b3bfb0;  /* accent ON the band: --accent-soft is a light-surface colour */
  --band-btn-bg:     #ffffff;
  --band-btn-fg:     #273b43;
  --footer-bg:       #273b43;
  --footer-rule:     rgba(191, 196, 186, .18);
  --footer-dim:      rgba(206, 210, 202, .92);
  --footer-dimmer:   rgba(206, 210, 202, .78);

  --hero-from:       #eae7e0;
  --hero-to:         #faf4ee;
  --meadow-1:        #dcdcd3;
  --meadow-2:        #98a493;
  --meadow-3:        #7a8c76;
  --meadow-4:        #566f54;
  --meadow-fade:     #faf4ee;

  --focus:           #344f59;
  --shadow-sm:       0 1px 2px rgba(34, 51, 58, .05), 0 4px 14px rgba(34, 51, 58, .05);
  --shadow-md:       0 2px 6px rgba(34, 51, 58, .07), 0 18px 40px rgba(34, 51, 58, .08);
  --card-lift:       none;
}

/* ---- 2. Dark, only ever by explicit choice. ---- */
:root[data-theme="dark"] {
  --bg:              #121b1e;
  --bg-blur:         rgba(18, 27, 30, .92);
  --surface:         #19262b;
  --surface-2:       #152024;
  --surface-3:       #1c2b30;
  --chip:            #233033;  /* every text token clears AA on this; faint = 4.68 */
  --border:          #24373e;
  --border-strong:   #71848b;  /* ghost-button edge, >=3:1 on every surface */
  --hairline:        #1f2f35;

  --text:            #dde0db;
  --text-soft:       #bdc2b8;
  --text-faint:      #94998f;
  --heading:         #eceeeb;
  --link:            #a8b6a5;
  --link-hover:      #c3ccc1;
  --accent-soft:     #96a793;  /* text-bearing: must clear AA, not just decorate */

  --btn-bg:          #a8b6a5;
  --btn-bg-hover:    #bfcabd;
  --btn-fg:          #10181b;

  --band-bg:         #162125;
  --band-text:       #c3c8be;
  --band-heading:    #eceeeb;
  --band-muted:      #b4baae;
  --band-accent:     #96a793;  /* accent ON the band: --accent-soft is a light-surface colour */
  --band-btn-bg:     #a8b6a5;
  --band-btn-fg:     #10181b;
  --footer-bg:       #0e1517;
  --footer-rule:     rgba(180, 186, 174, .18);
  --footer-dim:      rgba(195, 200, 190, .92);
  --footer-dimmer:   rgba(195, 200, 190, .78);

  --hero-from:       #172428;
  --hero-to:         #121b1e;
  --meadow-1:        #162125;
  --meadow-2:        #1c2b30;
  --meadow-3:        #273226;
  --meadow-4:        #354534;
  --meadow-fade:     #121b1e;

  --focus:           #a8b6a5;
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
  --shadow-md:       0 2px 6px rgba(0, 0, 0, .40), 0 18px 40px rgba(0, 0, 0, .38);
  --card-lift:       linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 60%);
}

/* ------------------------------------------------------- theme toggle ---- */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.theme-toggle:hover { color: var(--link); border-color: var(--border-strong); background: var(--surface-2); }
.theme-toggle svg { grid-area: 1 / 1; }

/* Moon while light is showing (tap it for dark), sun while dark is showing.
   Mirrors the two-rule cascade above. */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ------------------------------------------------- meadow, theme-aware --- */
.blades--1 { fill: var(--meadow-1); }
.blades--2 { fill: var(--meadow-2); }
.blades--3 { fill: var(--meadow-3); }
.blades--4 { fill: var(--meadow-4); }
.soil-stop { stop-color: var(--meadow-fade); }

/* On a dark page the cards need a faint lift to read as raised surfaces.
   --card-lift is `none` in the light theme. */
.card, .loc, .phonecard, .step, .pillars li, .reslist a { background-image: var(--card-lift); }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 600; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

h1 { font-family: var(--font-head); font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -.01em; }
h3 { font-family: var(--font-head); font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.0625rem; font-weight: 650; letter-spacing: .01em; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

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

/* ------------------------------------------------------------ utilities -- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* A narrow reading column that still starts on the same left edge as the
   page headings, rather than re-centring on the viewport. The container keeps
   the full wrap width; the measure is applied to its children. */
.wrap--narrow { max-width: 1120px; }
.wrap--narrow > * { max-width: 812px; }
.wrap.wrap--narrow.prose { max-width: 1120px; }
.wrap.wrap--narrow.prose > * { max-width: var(--measure); }

.prose { max-width: var(--measure); }
.prose > *:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-soft);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: .9rem;
}

.section { padding-block: clamp(3.25rem, 8vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--sand { background: var(--surface-3); }
.section--wash { background: var(--surface-2); }
.section--paper { background: var(--surface); }

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

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -110%);
  background: var(--btn-bg); color: var(--btn-fg);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  z-index: 200; font-weight: 600; text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ------------------------------------------------------------ utilities --
   These exist so no element needs a style="" attribute, which lets the
   Content-Security-Policy forbid inline styles outright.
   ------------------------------------------------------------------------ */
.u-flush     { margin: 0; }
.u-flat      { padding: 0; }
.u-mt        { margin-top: 2rem; }
.u-mt-sm     { margin-top: 1.1rem; }
.u-mt-lg     { margin-top: 2.25rem; }
.u-mb        { margin-bottom: 2rem; }
.u-mb-lg     { margin-bottom: 2.25rem; }
.u-center    { text-align: center; }
.u-wide      { max-width: none; }
.u-lede-tight { max-width: 52ch; margin-bottom: 2rem; }
.note-small  { font-size: .95rem; color: var(--text-faint); }

/* Ghost button sitting on the dark call-to-action band. Two classes, because
   .btn--ghost is defined later in this file and would otherwise win the
   cascade and paint the label dark green on a dark green band. */
.btn.btn--on-band { color: var(--band-text); border-color: var(--band-muted); }
.btn.btn--on-band:hover { background: rgba(255, 255, 255, .08); color: var(--band-heading); }

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

.masthead > .wrap { max-width: 1280px; }

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-blur);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.masthead__inner {
  display: flex; align-items: center;
  gap: 1rem; min-height: 72px; min-width: 0;
}

.masthead__actions {
  display: flex; align-items: center; gap: .55rem;
  margin-left: auto; flex: none;
}
.call-short { display: none; }

.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--text);
  padding-block: .35rem; min-width: 0; flex: none;
}
.brand__mark {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  /* The mark is printed on cream. On the dark theme that reads as a badge,
     which is intended: it keeps the tree legible instead of letting the
     transparent version sit on a dark field at low contrast. */
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand__name {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.01em;
}
/* Only the masthead needs the name on one line; in the footer it must wrap. */
.masthead .brand__name { white-space: nowrap; }
.brand__tag {
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; white-space: nowrap;
  /* Clear of the descender on the "y" in Synthesis directly above. */
  margin-top: .22rem;
}

.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--border);
  border-radius: 999px; padding: .5rem .95rem;
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--text); cursor: pointer; min-height: 44px;
}
.nav-toggle__bars { position: relative; width: 16px; height: 10px; flex: none; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 4.25px; }
.nav-toggle__bars span:nth-child(3) { top: 8.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  display: inline-block;
  padding: .5rem .62rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 550;
  color: var(--text-soft); text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--link); }
.nav a[aria-current="page"] { color: var(--link); background: var(--surface-2); font-weight: 650; }

/* --------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }

.btn--ghost { background: transparent; color: var(--link); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); color: var(--heading); }

.btn--small { min-height: 42px; padding: .5rem 1.05rem; font-size: .92rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 62%); }
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(8.5rem, 19vw, 13rem);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__content { max-width: 40rem; }

/* The logo enlarged in the open space to the right of the hero copy. It is
   decorative here -- the masthead already carries the mark and the practice
   name -- so it is alt="" and must never take space from the copy. Below
   900px the hero text wants the full measure, so it is dropped entirely
   rather than shrunk into an awkward third column. */
.hero__mark {
  flex: none;
  display: block;
  width: clamp(200px, 23vw, 300px);
  margin-top: clamp(.5rem, 2vw, 1.75rem);
}
.hero__mark img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .hero__mark { display: none; }
}
.hero h1 { color: var(--heading); margin-bottom: .55rem; }
.hero__sub { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--text-soft); max-width: 34rem; }
.hero .btn-row { margin-top: 1.9rem; }
.hero__note { margin-top: 1.4rem; font-size: .92rem; color: var(--text-faint); }

/* the swaying meadow at the base of the hero */
/* The artwork is a 1440x230 strip -- 6.3:1 -- and a phone viewport is nowhere
   near that wide. Letting it stretch to fit squashed every blade horizontally
   by 2.4x against its vertical scale, so at 390px a blade rendered about 2px
   wide and 55px tall: green lines, not grass.

   The fix is to give the svg its own natural width for the height it is being
   drawn at, and let the container crop it. width = height x 1440/230 makes the
   horizontal and vertical scales equal, so blades keep their proportions; the
   max() keeps the strip full-bleed on wide screens where 100% is the larger
   number. A narrow screen therefore shows the middle of the meadow at correct
   proportions rather than the whole meadow crushed.

   Kept in CSS rather than preserveAspectRatio="xMidYMax slice" on the svg
   because the blades reach 89% of the way up the viewBox, so `slice` starts
   cutting their tips once the viewport passes about 2400px. This does not. */
.meadow {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(150px, 16vw, 245px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  z-index: 1; pointer-events: none;
}
.meadow svg {
  flex: none;
  height: 100%;
  /* The viewBox already gives this svg an intrinsic 1440:230 ratio, so an auto
     width at a fixed height is exactly its natural width -- no arithmetic, and
     nothing to keep in sync if the height clamp changes. aspect-ratio is
     restated only so the intent survives someone adding width/height attrs.
     min-width keeps the strip full-bleed once the viewport is wider than that
     natural width; below it, .meadow crops and we see the middle of the field. */
  /* 939px is this strip's natural width at the 150px height floor
     (150 x 1440/230). Below a ~937px viewport the height clamp is pinned at
     that floor, so 939px is exactly the width that makes the horizontal and
     vertical scales equal and keeps blades in proportion; .meadow crops the
     overflow and we see the middle of the field. At wider viewports the clamp
     tracks 16vw, whose natural width is ~100vw, so 100% takes over and the
     strip stays full-bleed. One number, and it is the only one that matters.

     Do not switch this to `width: auto` + aspect-ratio: in a flex row the
     item's width is resolved before `align-items: stretch` gives it a height,
     so auto has no height to derive a width from and collapses to 100%. */
  width: max(100%, 939px);
  /* The global `img, svg { max-width: 100% }` reset would clamp the strip back
     to the container width and undo the line above. This is the one svg on the
     site that is deliberately wider than its box. */
  max-width: none;
  display: block;
}

.blade {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 11s ease-in-out infinite;
  --amp: 1.1deg;
}

/* Five phase groups so the meadow never pulses in unison, with the amplitude
   varied as well as the period -- real grass of differing heights does not
   lean by the same amount. */
.blade--a { animation-duration:  9.5s; animation-delay: -1.2s; --amp: 1.7deg; }
.blade--b { animation-duration: 13s;   animation-delay: -4.1s; --amp: 2.6deg; }
.blade--c { animation-duration: 10.4s; animation-delay: -2.6s; --amp: 1.2deg; }
.blade--d { animation-duration: 15s;   animation-delay: -6.8s; --amp: 3.1deg; }
.blade--e { animation-duration: 12.2s; animation-delay: -3.4s; --amp: 2.1deg; }

/* The nearer layers catch more wind than the ones behind them. */
.blades--3 .blade { animation-duration: 8.6s; }
.blades--4 .blade { animation-duration: 7.4s; }

/* A blade bends along its length rather than pivoting rigidly, so the tip
   travels further than the middle. skewX in the same direction as the
   rotation fakes that curve cheaply, and both are GPU-composited. */
@keyframes sway {
  0%, 100% { transform: rotate(calc(var(--amp) * -1)) skewX(calc(var(--amp) * -0.6)); }
  50%      { transform: rotate(var(--amp))             skewX(calc(var(--amp) * 0.6)); }
}

/* --------------------------------------------------------------- pagetop - */
.pagetop {
  position: relative;
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 100%);
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--border);
}
.pagetop h1 { color: var(--heading); max-width: 22ch; }
.pagetop .lede { max-width: 54ch; margin-bottom: 0; }

/* ---------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.card > *:last-child { margin-bottom: 0; }
.card h3 { color: var(--heading); }

.card--link { text-decoration: none; color: inherit; display: block; transition: transform .18s ease, box-shadow .18s ease; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.card--link .card__more { color: var(--link); font-weight: 600; font-size: .95rem; }

.card__icon {
  width: 46px; height: 46px;
  padding: 11px;
  border-radius: 13px;
  background: var(--chip);
  color: var(--moss);
  margin-bottom: 1.05rem;
}
:root[data-theme="dark"] .card__icon { color: var(--accent-soft); }

/* ------------------------------------------------------------- step list - */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.15rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 0;
}
.step__num {
  counter-increment: step;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: 50%;
  background: var(--chip); color: var(--heading);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.12rem; margin-bottom: .25rem; }
.step p { margin: 0; color: var(--text-soft); }

.pillars {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.pillars li {
  margin: 0; text-align: center;
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600; color: var(--heading);
  letter-spacing: .01em;
}

/* ----------------------------------------------------------- sign lists -- */
.signs { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.signs__col h3 { color: var(--heading); }
.signs ul { list-style: none; padding: 0; }
.signs li {
  position: relative; padding-left: 1.6rem; margin-bottom: .55rem;
  color: var(--text-soft);
}
.signs li::before {
  content: ""; position: absolute; left: .3rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft);
}

.phonecard {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.6rem) clamp(1.35rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.phonecard__text { flex: 1 1 15rem; min-width: 0; }
.phonecard__text p { margin: 0; color: var(--text-soft); font-size: .97rem; }
.phonecard__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600; color: var(--heading);
  text-decoration: none; line-height: 1.2; margin-bottom: .15rem;
}
.phonecard__num:hover { color: var(--link-hover); }

/* -------------------------------------------------------------- callout -- */
.callout {
  background: var(--chip);
  border-left: 4px solid var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.5rem;
  margin-block: 1.75rem;
}
.callout > *:last-child { margin-bottom: 0; }
/* --link-hover is moss, and the chip is a moss tint, so the default hover
   drops to 4.41 here. --heading clears it in both themes (9.33 / 11.67). */
.callout a:hover { color: var(--heading); }
.callout h3 { font-size: 1.1rem; color: var(--heading); }

/* Deliberately the same size and weight as an <h2>: on the landing page this
   sentence opens its section exactly as the Welcome heading opens that one, so
   the two should carry equal weight. Kept as a blockquote because it is a
   definition being quoted, not a heading. */
.pullquote {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--heading);
  border: 0; margin: 2.25rem 0; padding: 0;
}

/* ----------------------------------------------------------------- team -- */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--border);
}
.bio:first-of-type { border-top: 0; padding-top: 0; }
.bio__aside { position: sticky; top: 96px; }
.bio__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px dashed var(--accent-soft);
  display: grid; place-items: center;
  text-align: center; padding: 1rem;
  color: var(--text-faint); font-size: .84rem;
  margin-bottom: .9rem;
}
.bio__name {
  color: var(--heading); margin-bottom: .2rem;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.25;
}
.bio__role { color: var(--accent-soft); font-weight: 650; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 0; }
.bio__facts { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .95rem; }
.bio__facts li { color: var(--text-soft); margin-bottom: .4rem; padding-left: 1.1rem; position: relative; }
.bio__facts li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); }

/* ------------------------------------------------------------ locations -- */
.loc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.loc h3 { color: var(--heading); margin-bottom: .1rem; }
.loc__area { color: var(--accent-soft); font-weight: 650; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.loc address { font-style: normal; color: var(--text-soft); margin-bottom: 1.75rem; }
.loc__hint { font-size: .92rem; color: var(--text-faint); }

.hours { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; }
.hours caption {
  text-align: left; font-weight: 650; font-size: .86rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); padding-bottom: .75rem;
}
.hours th, .hours td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--hairline); font-weight: 500; }
.hours th { color: var(--text-soft); font-weight: 600; width: 7.5rem; }
.hours td { color: var(--text); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ faq -- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: none; border: 0;
  padding: 1.3rem 0;
  font: inherit;
  font-family: var(--font-head);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--heading);
  text-align: left; cursor: pointer;
}
.faq__q:hover { color: var(--link-hover); }
.faq__chev { flex: none; margin-top: .3em; transition: transform .22s ease; color: var(--accent-soft); }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 0 1.4rem; max-width: var(--measure); }
.faq__a > *:last-child { margin-bottom: 0; }
.faq__a[hidden] { display: none; }

/* ---------------------------------------------------------- testimonials - */
/* ---------------------------------------------------------- testimonials -
   Quotes vary a lot in length -- one is three lines, another is twelve -- so
   the card stretches and the attribution is pushed to the bottom with an auto
   margin. That keeps the initials on a common baseline across a row instead of
   floating wherever each quote happens to end.
   ------------------------------------------------------------------------ */
.quotes {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.quotes li { margin: 0; display: flex; }
.quotes figure {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  background-image: var(--card-lift);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 1.8rem);
  box-shadow: var(--shadow-sm);
}
/* Decorative opening mark. The quotation itself is marked up as a blockquote,
   so this carries no meaning and is not part of the text. */
.quotes figure::before {
  content: "\201C";
  font-family: var(--font-head);
  font-size: 2.75rem; line-height: .8;
  color: var(--accent-soft);
  margin-bottom: .4rem;
}
.quotes blockquote { margin: 0; padding: 0; border: 0; }
.quotes blockquote p { color: var(--text-soft); margin-bottom: 0; }
.quotes blockquote p + p { margin-top: .9rem; }
.quotes figcaption {
  margin-top: auto; padding-top: 1.15rem;
  font-weight: 650; font-size: .95rem;
  letter-spacing: .04em;
  color: var(--accent-soft);
}
.quotes figcaption::before { content: "\2014\00a0"; }

/* -------------------------------------------------------------- resource - */
.reslist {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* The li stretches so every card in a row is the same height, whatever the
   length of its description. */
.reslist li { margin: 0; display: flex; }
.reslist a {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1;
  background: var(--surface);
  background-image: var(--card-lift);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  text-decoration: none; color: inherit;
  min-height: 44px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.reslist a:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.reslist strong {
  display: flex; align-items: center; gap: .45rem;
  color: var(--heading); font-weight: 650;
  font-size: 1.02rem; line-height: 1.3;
}
/* Small outward arrow, marking the link as leaving the site. */
.reslist strong::after {
  content: ""; flex: none;
  width: 13px; height: 13px;
  background: currentColor; opacity: .45;
  -webkit-mask: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
          mask: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.reslist span {
  color: var(--text-faint); font-size: .92rem; line-height: 1.45;
}

/* ------------------------------------------------------------- call band - */
.callband {
  background: var(--band-bg);
  color: var(--band-text);
  text-align: center;
}
.callband h2 { color: var(--band-heading); }
.callband p { color: var(--band-muted); max-width: 46ch; margin-inline: auto; }
.callband .btn--primary { background: var(--band-btn-bg); color: var(--band-btn-fg); }
.callband .btn--primary:hover { background: var(--band-btn-bg); color: var(--band-btn-fg); filter: brightness(1.08); }
.callband .btn-row { justify-content: center; margin-top: 1.5rem; }

/* --------------------------------------------------------------- footer -- */
.footer {
  background: var(--footer-bg);
  color: var(--band-muted);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
  font-size: .95rem;
}
.footer a { color: var(--band-muted); }
.footer a:hover { color: var(--band-heading); }
.footer__grid {
  display: grid; gap: 2rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--footer-rule);
}
.footer__grid > * { min-width: 0; }
.footer h2 {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: .9rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .5rem; }
.footer address { font-style: normal; line-height: 1.7; }
.footer__hours {
  list-style: none; padding: 1.1rem 0 0; margin: 1.1rem 0 0;
  border-top: 1px solid var(--footer-rule);
}
.footer__hours li {
  margin-bottom: .35rem; white-space: nowrap;
  display: flex; justify-content: space-between; gap: 1rem;
}
.footer__hours .day { color: var(--band-accent); }
.footer__brand { min-width: 0; }
.footer__brand .brand__name {
  color: var(--band-heading); font-size: 1.12rem; display: block;
  white-space: normal; overflow-wrap: break-word; hyphens: none;
}
.footer__mantra { color: var(--band-accent); font-style: italic; margin-top: .4rem; }
.footer__phone { margin-top: 1.1rem; margin-bottom: .35rem; }
.footer__phone a {
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 600;
  color: var(--band-heading); text-decoration: none;
}
.footer__phone a:hover { text-decoration: underline; }

.disclaimer {
  padding-top: 1.75rem;
  font-size: .86rem; line-height: 1.65;
  color: var(--footer-dim);
  max-width: 78ch;
}
.disclaimer strong { color: var(--band-heading); font-weight: 650; }
.disclaimer p { margin-bottom: .75rem; }
.colophon {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--footer-rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem; color: var(--footer-dimmer);
}

/* --------------------------------------------------------------- photos --
   Every <picture> ships webp with a jpeg fallback, and every <img> carries
   width/height so the box is reserved before the bytes arrive and nothing
   on the page jumps. The building shots are the Hoover office: people
   arriving for a first appointment have told practices like this one that
   recognising the door matters, so these are wayfinding, not decoration —
   which is why the alt text describes the canopy and the ramp.
   ------------------------------------------------------------------------ */
.shot {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}
.shot img { width: 100%; height: auto; }
.shot figcaption {
  padding: .7rem 1rem .75rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-faint);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.shot--flush { margin-bottom: 1.25rem; }

/* Full-bleed banner under a page top.

   height:auto is load-bearing, not tidying. The <img> carries width/height
   attributes so the box is reserved before the bytes land, and those map to a
   presentational `height: 1738px`. A presentational hint still beats the
   INITIAL value of height, so without this the aspect-ratio below is computed
   and then ignored, and the banner renders full height. */
.shotband { background: var(--surface-3); }
.shotband__img {
  width: 100%;
  height: auto;
  aspect-ratio: 32 / 11;
  object-fit: cover;
  /* The horizon sits high in these frames; bias the crop down onto the
     building rather than centring it on sky. */
  object-position: 50% 72%;
  border-block: 1px solid var(--border);
}
@media (max-width: 700px) {
  .shotband__img { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------ banded section --
   A section set on the brand slate, used as a second saturated anchor on the
   longer pages. The page already ends on slate (call band, then footer); the
   problem this solves is the long cream run above it, which is what read as
   too quiet. Reserved for a page's core statement -- the philosophy, the POP
   line, a page's opening thesis -- and used at most once per page so it stays
   an emphasis rather than a pattern.

   Every colour here is one the call band already uses, so there is nothing
   new in the palette: heading 8.72, body 5.69, links 4.91, eyebrow 4.57.
   ------------------------------------------------------------------------ */
.section--band { background: var(--band-bg); }
.section--band,
.section--band p,
.section--band li          { color: var(--band-text); }
.section--band h2,
.section--band h3,
.section--band .pullquote,
.section--band strong      { color: var(--band-heading); }
.section--band .eyebrow,
.section--band em          { color: var(--band-accent); }
.section--band .lede       { color: var(--band-text); }
.section--band .note-small { color: var(--band-muted); }
.section--band a           { color: var(--band-muted); }
.section--band a:hover     { color: var(--band-heading); }

/* ------------------------------------------------------------ responsive - */
@media (max-width: 1280px) {
  .nav {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem var(--gutter) 1.1rem;
  }

  /* With JS, the menu is a drop-down behind the toggle. */
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  /* Without JS there is nothing to open it with, so the menu simply sits
     under the header and stays available. */
  html:not(.js) .masthead { position: static; }
  html:not(.js) .masthead__inner { flex-wrap: wrap; }
  html:not(.js) .nav { width: 100%; margin-left: 0; padding-inline: 0; }

  .nav[hidden] { display: none; }
  .nav a { padding: .85rem .6rem; border-radius: var(--radius); font-size: 1rem; }
  .brand__tag { display: none; }
  .bio { grid-template-columns: 1fr; }
  .bio__aside { position: static; max-width: 17rem; }
}

@media (max-width: 560px) {
  .call-full { display: none; }
  .call-short { display: inline; }

  /* The masthead must never be wider than the phone it is on. */
  .brand { flex: 1 1 auto; }
  .brand__mark { width: 30px; height: 30px; }
  /* Beats `.masthead .brand__name { nowrap }` above, which is two classes. */
  .masthead .brand__name { font-size: .95rem; white-space: normal; }
  .brand__tag { display: none; }
  .masthead__inner { gap: .6rem; }
  .masthead__actions { gap: .4rem; }
  .nav-toggle { padding: .6rem .75rem; }

  /* Icon-only toggle, but keep its accessible name. */
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

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

@media print {
  .masthead, .callband, .skip-link, .meadow, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .faq__a[hidden] { display: block !important; }
}