/* ============================================================
   SIGNAL — BASE
   Reset · typography · press-motion primitives · buttons ·
   folios/rules · masthead · footer · mobile bar · utilities
   Every selector here is shared chrome. Section styles live in
   shared-sections.css (booking/location/faq) and per-page files.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .nowrap { white-space: normal; } /* long token pairs must wrap on phones */
}
[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- type voices ---------- */
h1, h2, h3, .serif {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0;
  overflow-wrap: anywhere; /* unreplaced tokens must never blow a column; real words are unaffected */
}
h1 { letter-spacing: -0.01em; }
/* patient voice: spoken words stay human */
.voice {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.mono-xs {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dek {
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 34em;
}

::selection { background: var(--accent-wash-2); color: var(--ink); }

/* ---------- layout ---------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.section { padding-block: var(--sp-section); }
/* A lone one-line quote is much lighter than most sections; the standard
   section padding reads as a big empty gap around it. Halve it here. */
.section--proof { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }

/* ---------- section index strips (telemetry wayfinding) ----------
   Every major section opens with: a drawn tick strip, then
   [NN] TITLE (left)  +  counter NN / NN (right)                */
.folio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
  margin-bottom: var(--sp-head);
  position: relative;
}
.folio::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 7px;
  color: var(--rule-strong);
  background: var(--tick-strip);
  transform-origin: left center;
}
.folio__label { color: var(--ink); display: inline-flex; align-items: center; gap: 0.9em; }
.folio__label .sect {
  color: var(--accent-on);
  background: var(--accent);
  padding: 0.35em 0.5em 0.28em;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.folio__mark { color: var(--ink-faint); }
.on-espresso .folio::before { color: var(--rule-dark); }
.on-espresso .folio__label { color: var(--paper-on-espresso); }
.on-espresso .folio__mark { color: var(--paper-on-espresso-dim); }

/* section head block under a folio */
.head { max-width: 52rem; }
.head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--sp-gap) clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.head .dek { margin-top: 1.1rem; }
.head--split .dek { margin-top: 0; padding-bottom: 0.4rem; }
/* In the stacked layout a dek's own margin-top carries the gap down to
   whatever follows; a heading with no dek has nothing to do that, so give
   it one. The split layout sits the dek beside the heading instead of under
   it, so it never gets that free travel either way -- give it its own gap
   unconditionally. */
.head:not(.head--split):not(:has(.dek)) { margin-bottom: var(--sp-head); }
.head--split { margin-bottom: var(--sp-head); }
@media (max-width: 860px) {
  .head--split { grid-template-columns: 1fr; align-items: start; }
  .head--split .dek { padding-bottom: 0; }
}

/* ---------- press-motion primitives ----------
   [data-press]            crop-rise entrance (masked)
   [data-press="rule"]     hairline draws (scaleX)
   [data-press="frame"]    image frame reveal (clip + settle)
   data-press-delay="n"    stagger step (n × 70ms)               */
[data-press] {
  --press-delay: 0ms;
  clip-path: inset(0 0 100% 0);
  transform: translateY(1.1em);
  transition:
    clip-path var(--dur-rise) var(--ease-press) var(--press-delay),
    transform var(--dur-rise) var(--ease-press) var(--press-delay);
}
[data-press].is-in {
  clip-path: inset(-0.2em 0 -0.2em 0);
  transform: translateY(0);
}

[data-press="rule"] {
  clip-path: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rule) var(--ease-press) var(--press-delay);
}
[data-press="rule"].is-in { transform: scaleX(1); }

[data-press="frame"] {
  clip-path: inset(100% 0 0 0);
  transform: none;
  transition: clip-path 900ms var(--ease-press) var(--press-delay);
}
[data-press="frame"].is-in { clip-path: inset(0 0 0 0); }
[data-press="frame"] img {
  transform: scale(1.045);
  transition: transform 1200ms var(--ease-press) var(--press-delay);
}
[data-press="frame"].is-in img { transform: scale(1); }

/* panel-rise: shared entrance for swapped panels (tabs, form steps) */
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* folio rule participates when its section enters */
.folio[data-press-rule]::before {
  transform: scaleX(0);
  transition: transform var(--dur-rule) var(--ease-press);
}
.folio[data-press-rule].is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  [data-press], [data-press="rule"], [data-press="frame"] {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  [data-press="frame"] img { transform: none !important; transition: none !important; }
  .folio[data-press-rule]::before { transform: none !important; transition: none !important; }
}
html.no-js [data-press],
html.no-js [data-press="frame"] { clip-path: none; transform: none; }
html.no-js [data-press="frame"] img { transform: none; }
html.no-js .folio[data-press-rule]::before { transform: none; }

/* ---------- buttons: rectangular, ink-sweep ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.7em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-ui) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn .arr { transition: transform var(--dur-ui) var(--ease-out); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: var(--accent); }
.btn--ink:hover, .btn--ink:focus-visible { color: var(--accent-on); }

.btn--accent { background: var(--accent); color: var(--accent-on); }
.btn--accent::before { background: var(--ink); }

.btn--line { border: var(--frame-ink); color: var(--ink); background: transparent; }
.btn--line::before { background: var(--ink); }
.btn--line:hover, .btn--line:focus-visible { color: var(--paper); }

.on-espresso .btn--line { border-color: var(--paper-on-espresso); color: var(--paper-on-espresso); }
.on-espresso .btn--line::before { background: var(--paper-on-espresso); }
.on-espresso .btn--line:hover, .on-espresso .btn--line:focus-visible { color: var(--espresso); }

/* text link with drawn underline */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.tlink:hover, .tlink:focus-visible { color: var(--accent-deep); background-size: 38% 1px; }
.tlink .arr { transition: transform var(--dur-ui) var(--ease-out); }
.tlink:hover .arr { transform: translateX(4px); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- figures: framed photos with captions ---------- */
.figure { position: relative; }
.figure__frame {
  border: var(--frame-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
}
.figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}
.figure figcaption {
  display: flex;
  gap: 0.75em;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.figure figcaption .fig-no { color: var(--accent-deep); white-space: nowrap; }

/* ---------- ledger rows (ruled data tables) ---------- */
.ledger { border-top: var(--frame-strong); }
.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: var(--sp-row) 0;
  border-bottom: var(--frame);
}

/* ============================================================
   MASTHEAD (nav)
   ============================================================ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-masthead);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-press), background var(--dur-ui);
}
.masthead.is-scrolled {
  border-bottom-color: var(--rule);
  background: hsl(240 6% 96% / 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  height: var(--nav-h);
}
/* over a dark hero the masthead runs transparent in paper ink */
.masthead.on-dark:not(.is-solid) {
  background: transparent;
  border-bottom-color: hsl(240 6% 100% / 0.12);
}
.masthead.on-dark:not(.is-solid) .masthead__brand,
.masthead.on-dark:not(.is-solid) .masthead__phone,
.masthead.on-dark:not(.is-solid) .masthead__link { color: var(--paper-on-espresso); }
.masthead.on-dark:not(.is-solid) .masthead__link:hover,
.masthead.on-dark:not(.is-solid) .masthead__link.is-active,
.masthead.on-dark:not(.is-solid) .masthead__link[aria-current="page"] { color: #fff; }
.masthead.on-dark:not(.is-solid) .masthead__burger span { background: var(--paper-on-espresso); }
.masthead.on-dark:not(.is-solid) .btn--ink { background: var(--accent); color: var(--accent-on); }
.masthead__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: clamp(1rem, 1.8vw, 1.9rem);
}
.masthead__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.35em 0;
  white-space: nowrap;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0% 2px;
  transition: color var(--dur-ui), background-size var(--dur-ui) var(--ease-out);
}
.masthead__link:hover, .masthead__link:focus-visible,
.masthead__link.is-active,
.masthead__link[aria-current="page"] { color: var(--ink); background-size: 100% 2px; }
.masthead__phone {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.masthead__phone .call-lbl {
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.6em;
}
.masthead__phone:hover { color: var(--accent-deep); }
.masthead .btn { padding: 0.7em 1.3em; white-space: nowrap; flex: none; }

/* dropdowns — the group stretches to the full masthead height so the
   panel hangs from the masthead rule with no hover gap */
.masthead__group {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.masthead__drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--card);
  border: var(--frame-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-print);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.masthead__group:hover .masthead__drop,
.masthead__group:focus-within .masthead__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.masthead__drop a {
  display: block;
  padding: 0.5em 1.1em;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink-soft);
}
.masthead__drop a:hover { color: var(--ink); background: var(--accent-wash); }
.masthead__drop .drop-all { border-top: var(--frame); margin-top: 0.4rem; padding-top: 0.75em; font-weight: 600; color: var(--ink); }

/* hamburger */
.masthead__burger {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 10px;
}
.masthead__burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-press), opacity var(--dur-ui);
}
.masthead__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.masthead__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.masthead__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile overlay: the graphite console index */
.mobnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--espresso);
  color: var(--paper-on-espresso);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-press), visibility 0s linear 280ms;
}
.mobnav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobnav__list { list-style: none; padding: 0; border-top: 1px solid var(--rule-dark); }
.mobnav__list > li { border-bottom: 1px solid var(--rule-dark); }
.mobnav__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--paper-on-espresso);
}
.mobnav__link .mono-xs { color: var(--accent-lift); }
.mobnav__sub { list-style: none; padding: 0 0 0.9rem; }
.mobnav__sub a {
  display: block;
  padding: 0.42em 0;
  font-size: 1rem;
  color: var(--paper-on-espresso-dim);
  text-decoration: none;
}
.mobnav__cta { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.mobnav__cta .btn { justify-content: center; }
.mobnav .btn--line { border-color: var(--paper-on-espresso); color: var(--paper-on-espresso); }
.mobnav .btn--line::before { background: var(--paper-on-espresso); }
.mobnav .btn--line:hover, .mobnav .btn--line:focus-visible { color: var(--espresso); }
@media (max-width: 1023px) {
  .masthead__links, .masthead__phone { display: none; }
  .masthead__burger { display: flex; }
}
/* while the overlay is open the masthead must read light-on-dark */
body.nav-open .masthead { background: transparent; border-bottom-color: var(--rule-dark); }
body.nav-open .masthead .masthead__brand { color: var(--paper-on-espresso); }
body.nav-open .masthead .masthead__burger span { background: var(--paper-on-espresso); }
@media (max-width: 600px) {
  .masthead .btn { display: none; } /* mobile bar + overlay carry the ask */
}
body.nav-open { overflow: hidden; }

/* ============================================================
   COLOPHON (footer)
   ============================================================ */
.colophon {
  background: var(--espresso);
  color: var(--paper-on-espresso);
  padding: var(--sp-section) 0 2rem;
}
.colophon a { text-decoration: none; }
.colophon__close {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}
.colophon__close-line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 500;
  color: var(--paper-on-espresso);
}
.colophon__masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule-dark);
}
.colophon__brand {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 9vw, 4.75rem);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  line-height: 1.05;
}
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 3rem 0;
}
.colophon__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper-on-espresso-dim);
  margin-bottom: 1rem;
}
.colophon__col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.colophon__col a {
  color: var(--paper-on-espresso);
  font-size: 0.9375rem;
  background: linear-gradient(var(--paper-on-espresso-dim), var(--paper-on-espresso-dim)) no-repeat left bottom / 0% 1px;
  transition: background-size var(--dur-ui) var(--ease-press), color var(--dur-ui);
  padding-bottom: 2px;
}
.colophon__col a:hover { color: #fff; background-size: 100% 1px; }
.colophon__contact { display: grid; gap: 0.7rem; font-size: 0.9375rem; color: var(--paper-on-espresso-dim); }
.colophon__socials { margin-top: 1.2rem; }
.colophon__socials a { color: var(--paper-on-espresso); }
.colophon__socials a:hover { color: #fff; }
.colophon__hours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid var(--rule-dark);
  padding: 1.2rem 0;
  color: var(--paper-on-espresso);
  letter-spacing: 0.12em;
}
.colophon__hours span:not(:first-child)::before {
  content: "\00b7";
  margin-right: 0.6em;
  color: var(--rule-dark);
}
.colophon__contact strong { color: var(--paper-on-espresso); font-weight: 500; }
.colophon__fine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.08em;
  color: var(--paper-on-espresso-dim);
}
.colophon__fine a { color: inherit; }
.colophon__fine a:hover { color: var(--paper-on-espresso); }
@media (max-width: 860px) {
  .colophon__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .colophon__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE BAR — Call | Book
   ============================================================ */
.mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border-top: var(--frame-strong);
  transform: translateY(0);
  transition: transform 300ms var(--ease-press);
}
.mobilebar.is-hidden { transform: translateY(100%); }
.mobilebar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1rem 0.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.mobilebar__call { color: var(--ink); border-right: var(--frame); font-family: var(--font-mono); font-size: var(--fs-mono); }
.mobilebar__book { background: var(--accent); color: var(--accent-on); }
@media (max-width: 820px) {
  .mobilebar { display: grid; }
  body { padding-bottom: 56px; }
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6em 1em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--dur-ui);
}
.skip:focus { top: 8px; }

/* ---------- diagonal shear dividers ---------- */
.shear-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--shear)), 0 100%); }
.shear-t { clip-path: polygon(0 var(--shear), 100% 0, 100% 100%, 0 100%); }
.shear-tb { clip-path: polygon(0 var(--shear), 100% 0, 100% calc(100% - var(--shear)), 0 100%); }
.pull-up { margin-top: calc(-1 * var(--shear)); }

/* ---------- drawn strokes (trajectory arcs, marker swipes) ----------
   JS sets stroke-dasharray to path length; .is-in draws it. */
[data-draw] path, [data-draw] line {
  stroke-dashoffset: var(--draw-len, 1200);
  stroke-dasharray: var(--draw-len, 1200);
  transition: stroke-dashoffset 1100ms var(--ease-press) 200ms;
}
[data-draw].is-in path, [data-draw].is-in line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-draw] path, [data-draw] line { stroke-dashoffset: 0 !important; transition: none !important; }
}
html.no-js [data-draw] path, html.no-js [data-draw] line { stroke-dashoffset: 0; }

/* ---------- utilities ---------- */
.on-espresso { background: var(--espresso); color: var(--paper-on-espresso); }
.on-oat { background: var(--paper-2); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   CLIENT BRAND MARK  (Mode B addition — Alkemē Sports Rx)
   The template ships a text wordmark. This client has a real
   logo, so the nav and footer carry the image instead. Two
   variants: --ink for the light/solid masthead, --light for the
   transparent-over-graphite state and the dark footer.
   ============================================================ */
.masthead__brand {
  display: flex;
  align-items: center;
  overflow: visible;
}
.masthead__logo { display: block; height: 47px; width: auto; }
.masthead__logo--light { display: none; }
.masthead.on-dark:not(.is-solid) .masthead__logo--ink,
body.nav-open .masthead .masthead__logo--ink { display: none; }
.masthead.on-dark:not(.is-solid) .masthead__logo--light,
body.nav-open .masthead .masthead__logo--light { display: block; }
@media (max-width: 900px) { .masthead__logo { height: 42px; } }
@media (max-width: 420px) { .masthead__logo { height: 36px; } }

.colophon__brand { line-height: 0; }
.colophon__logo { display: block; height: clamp(48px, 7vw, 72px); width: auto; }

/* the accent button flips to an ink ground on hover, so its label
   cannot use --accent-on (graphite) there */
.btn--accent:hover, .btn--accent:focus-visible { color: var(--paper); }