/* ==========================================================================
   Ari Barook Rehabilitation — Styles
   Built on tokens.css. Mobile-first: unprefixed rules are the narrow layout,
   then min-width 480 / 768 / 1200 scale it up (design.md § Spacing & Grid).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*, *::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: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  color: var(--brand);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); }
li { margin-bottom: var(--sp-1); }

/* Focus-visible is a 2px accent ring at 2px offset, per design.md */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 200;
  background: var(--brand);
  color: var(--surface);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-2); color: 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;
}

/* --------------------------------------------------------------------------
   2. Layout utilities
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 880px; }

/* Section rhythm deliberately varies. --sp-12 is the default; modifiers below
   break it so no two stacked sections share identical vertical weight. */
.section { padding-block: var(--sp-8); }
.section--roomy  { padding-block: var(--sp-12); }
.section--tight  { padding-block: var(--sp-6); }

.section--surface { background: var(--surface); }
.section--dark    { background: var(--dark); color: var(--surface); }
.section--dark h2, .section--dark h3 { color: var(--surface); }

@media (min-width: 768px) {
  .section        { padding-block: var(--sp-12); }
  .section--roomy { padding-block: var(--sp-16); }
  .section--tight { padding-block: var(--sp-8); }
}

/* Section labels. Monospace, heavier, in Bark rather than the muted tone, with a
   short rule leading into them so they read as a deliberate marker instead of
   a faint caption floating above the heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--accent);
}
.section__head--center .eyebrow,
.cta-band .eyebrow { justify-content: center; }
.section--dark .eyebrow,
.cta-band .eyebrow { color: var(--color-fern); }
/* The hero eyebrow takes Bark, which holds up over the pale wall. */
.hero .eyebrow { color: var(--brand); }

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--text);
  max-width: 60ch;
}
.section--dark .lede { color: var(--color-fern); }

.prose { max-width: var(--measure); }
.prose p + h3 { margin-top: var(--sp-6); }

.section__head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section__head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   3. Buttons (design.md § Components)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;              /* WCAG 2.2 tap target, design.md calls 44px min */
  padding: var(--sp-2) 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: var(--surface); }
.btn--primary:hover { background: var(--color-olive); color: var(--surface); }

/* The green accent is dark enough to take white text at 4.8:1. */
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #4c6743; color: #fff; }

.btn--ghost { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--surface); }

/* Any dark ground: the ghost button flips to a light border and light label,
   otherwise Bark-on-Olive leaves it invisible. */
.section--dark .btn--ghost,
.cta-band .btn--ghost { border-color: var(--color-fern); color: var(--color-fern); }
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover { background: var(--color-fern); color: var(--dark); }

/* Inline links on a dark ground. Without this they inherit Bark, which is the
   exact colour the CTA gradient ends on, leaving the link invisible. */
.cta-band a:not(.btn),
.section--dark a:not(.btn) {
  color: var(--color-fern);
  text-decoration-color: rgba(226, 233, 221, 0.55);
}
.cta-band a:not(.btn):hover,
.section--dark a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Inline text link with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  text-decoration: none;
  color: var(--brand);
  min-height: 44px;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Header / navigation — sticky, follows you down the page
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}

/* Interior pages open on a light background, so the bar needs its surface
   immediately rather than waiting for a scroll. */
.nav--solid,
.nav--scrolled {
  background: rgba(239, 243, 234, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  width: 100%;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* The real lockup. It already contains the practice name, so no separate
   text sits beside it. */
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}
.nav__logo img {
  height: 38px;
  width: auto;
  flex: none;
}
.nav__logo:hover { opacity: 0.82; }

.nav__links { display: none; }

.nav__link {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: var(--sp-1) 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--brand); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* About 15% smaller than a standard .btn, so the header CTA reads as a
   utility control rather than competing with the page's own buttons. */
.nav__cta {
  display: none;
  min-height: 41px;
  padding: 10px 24px;
  font-size: var(--fs-small);
}

.nav__toggle {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--brand);
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__toggle:hover { background: var(--surface); }
.nav__toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after,
.nav__toggle-bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars span { top: 5px; }
.nav__toggle-bars::after { bottom: 0; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

.nav__panel {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  /* With the three Focus Areas sub-items the menu is taller than a short
     phone screen, and the body is scroll-locked while it is open, so without
     this the last items are unreachable. It scrolls within itself instead. */
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  z-index: 99;
}
.nav__panel[hidden] { display: none; }
/* Excludes .btn: this rule is more specific than .btn--accent, so without the
   guard the menu's Book Now button took Bark text on the green fill, which is
   1.7:1 and unreadable. */
.nav__panel a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--brand);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  display: flex;
  align-items: center;
}
.nav__panel a:not(.btn):last-of-type { border-bottom: 0; }
.nav__panel-sub { border-bottom: 1px solid var(--border) !important; }
.nav__panel .btn { margin-top: var(--sp-3); }

@media (min-width: 900px) {
  .nav__links { display: flex; align-items: center; align-self: stretch; gap: var(--sp-4); }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__logo img { height: 46px; }
}

/* --------------------------------------------------------------------------
   5. Hero
   The green wall is a pale sage, so the photo keeps its true color and the
   gradient runs light: transparent at the top, Fern at the base, so the
   image dissolves into the page instead of sitting in a hard-edged box. Text
   is Ink on the light half, well clear of AA.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: var(--nav-h);
  padding-bottom: var(--sp-8);
  /* A full first screen: header and the headline, nothing else in view. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  /* Static, at Ari's request. The photo and its gradient stay; the pan and
     the ripple filter are gone. */
  transform: scale(1.04);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(226, 233, 221, 0.00) 0%,
      rgba(226, 233, 221, 0.14) 38%,
      rgba(226, 233, 221, 0.68) 74%,
      var(--color-fern) 100%
    );
}

.hero__content {
  max-width: 460px;
  margin-inline: auto;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display);
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}

.hero__sub {
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}

/* Letter-by-letter fade-in. main.js wraps each character in a .ltr span,
   grouped into .wd word spans so the line still breaks normally. */
.hero__title .wd,
.hero__sub .wd { display: inline-block; }

.js .hero__title .ltr,
.js .hero__sub.is-lettered .ltr { opacity: 0; }
.js .hero.is-loaded .hero__title .ltr,
.js .hero.is-loaded .hero__sub.is-lettered .ltr {
  opacity: 1;
  transition: opacity 620ms var(--ease);
}

@media (min-width: 768px) {
  .hero { padding-bottom: var(--sp-12); }
  .hero__content { max-width: 680px; }
}

/* Compact hero for interior pages. No photo, no dark gradient: the full-bleed
   image treatment stays exclusive to Home. */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: var(--sp-6);
  background: linear-gradient(180deg, var(--surface), var(--bg));
}
.page-hero .lede { margin-top: var(--sp-3); }

@media (min-width: 768px) {
  .page-hero { padding-top: calc(var(--nav-h) + var(--sp-12)); padding-bottom: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   8. Pillars — the "why work with me" icon grid
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  gap: var(--sp-6);
}

.pillar__icon {
  width: 44px; height: 44px;
  margin-bottom: var(--sp-2);
  color: var(--brand);
}
.pillar__icon svg { width: 100%; height: 100%; display: block; }

.pillar h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}
.pillar p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; }

/* Centred variant. With the section heading gone these four tiles carry the
   block on their own, so they sit centred rather than left-locked to a grid. */
.pillars--center { text-align: center; }
.pillars--center .pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pillars--center .pillar__icon { margin-inline: auto; }
.pillars--center .pillar p { max-width: 34ch; margin-inline: auto; }

@media (min-width: 600px) {
  .pillars { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
}
@media (min-width: 1000px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   9. Split sections — asymmetric image + copy
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
.split__media img,
.split__media .img-placeholder { border-radius: var(--radius-md); }

/* A portrait photo in a split would otherwise run far taller than the copy
   beside it, so it is capped. It also aligns to the top of the row rather than
   the centre, so it starts level with the heading instead of floating 160px
   below it against a tall text column. */
.split__media--portrait { align-self: start; }
.split__media--portrait img {
  max-height: 620px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.split__body h2 { margin-bottom: var(--sp-3); }

@media (min-width: 860px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); }
  .split--wide-media { grid-template-columns: 1.25fr 1fr; }
  /* Reversed: media moves to the right column without reordering the DOM */
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__body  { order: 1; }
}

/* A tighter list used inside split bodies instead of another card grid */
.checklist { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--sp-2);
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   9b. Bubble
   Portrait and copy on one continuous rounded surface, with no border and no
   seam between them, so the pair reads as a single shape rather than two
   boxes sitting next to each other.
   -------------------------------------------------------------------------- */

.bubble {
  display: grid;
  background: var(--surface);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.bubble__media { position: relative; min-height: 420px; }
.bubble__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored near the top: the shorter mobile box was cropping the top of her
     head at the 22% the wider desktop column could afford. */
  object-position: 50% 10%;
}

@media (min-width: 860px) {
  .bubble__media img { object-position: 50% 22%; }
}

.bubble__body { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.bubble__body h2 { margin-bottom: var(--sp-3); }
.bubble__body p { max-width: 52ch; }

@media (min-width: 860px) {
  .bubble {
    grid-template-columns: 0.8fr 1.2fr;
    border-radius: 56px;
    align-items: stretch;
  }
  .bubble__media { min-height: 100%; }
  .bubble__body { padding: var(--sp-8); align-self: center; }
}

/* --------------------------------------------------------------------------
   9c. Services
   No card, no border, no bubble. Each service is an illustration sitting on
   open background with the copy beneath it.
   -------------------------------------------------------------------------- */

.svc-grid { display: grid; gap: var(--sp-8); }

.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.svc__art {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
}
.svc__art svg { width: 100%; height: 100%; display: block; }
/* The organic shape behind the line drawing. */
.svc__blob { fill: var(--border); }
.svc__line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc:hover .svc__blob { fill: #cbd8c2; }
.svc__blob { transition: fill var(--dur-mid) var(--ease); }

.svc__title {
  font-size: clamp(1.75rem, 1.1vw + 1.4rem, 2.5rem);   /* 28 -> 40px */
  line-height: 1.2;
  margin: 0;
}
.svc p { color: var(--text-muted); max-width: 40ch; margin: 0; }
.svc__more { margin-top: var(--sp-1); }

@media (min-width: 760px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); }
  .svc__art { max-width: 260px; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card-grid { display: grid; gap: var(--sp-3); }

@media (min-width: 720px) {
  .card-grid--2 { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }

.card h3 { margin: 0; font-size: var(--fs-h4); }
.card p { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }
.card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--brand);
  letter-spacing: var(--ls-small);
}
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   11. Pricing — a real table, because these are rates, not decoration
   -------------------------------------------------------------------------- */

.pricing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.pricing table { width: 100%; border-collapse: collapse; }
.pricing caption {
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--sp-2);
}
.pricing th, .pricing td {
  text-align: left;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
}
.pricing tbody tr:last-child th,
.pricing tbody tr:last-child td { border-bottom: 0; }
.pricing th { font-weight: 600; color: var(--text); padding-right: var(--sp-2); }
.pricing td {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}

.price-note {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  background: rgba(169, 118, 43, 0.18);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}
.price-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }

.first-visit {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.first-visit strong { color: var(--brand); }

@media (min-width: 768px) {
  .pricing { padding: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   12. Image placeholders
   Styled duotone panels standing in for photos Ari hasn't shot yet. Same
   aspect box as the real photo that will replace them, so nothing reflows.
   -------------------------------------------------------------------------- */

.img-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  aspect-ratio: 4 / 3;
  padding: var(--sp-4);
  text-align: center;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      rgba(239, 243, 234, 0.045) 18px 36px
    ),
    linear-gradient(140deg, var(--color-olive), var(--brand) 70%);
  color: var(--color-fern);
  overflow: hidden;
}
.img-placeholder--portrait { aspect-ratio: 3 / 4; }
.img-placeholder--wide     { aspect-ratio: 16 / 9; }

.img-placeholder svg { width: 36px; height: 36px; opacity: 0.85; }
.img-placeholder__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0;
}
.img-placeholder__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0;
  color: var(--color-fern);
}

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }

.acc__h { margin: 0; }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  min-height: 56px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--brand);
  transition: color var(--dur-fast) var(--ease);
}
.acc__btn:hover { color: var(--accent); }

.acc__sign {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 2px;
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.acc__sign::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.acc__sign::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.acc__btn[aria-expanded="true"] .acc__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.acc__panel { padding: 0 0 var(--sp-3); max-width: var(--measure); }
.acc__panel[hidden] { display: none; }
.acc__panel p { font-size: var(--fs-body); color: var(--text); }
.acc__panel p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .acc__btn { font-size: var(--fs-h4); padding-block: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   14. Info blocks (location, hours, contact)
   -------------------------------------------------------------------------- */

.info-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .info-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
@media (min-width: 1000px) { .info-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.info h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.info p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.65;
  /* The clinic email has no natural break point and pushed the card past a
     320px viewport. */
  overflow-wrap: anywhere;
}
.info strong { color: var(--text); font-weight: 600; }

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.strip__item { display: flex; flex-direction: column; gap: 4px; }
.strip__item .eyebrow { margin: 0; }
.strip__item strong { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--brand); }

/* Map stand-in until the exact address is confirmed */
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 220px;
  padding: var(--sp-4);
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-small);
}
.map-placeholder svg { width: 28px; height: 28px; color: var(--brand); }

/* --------------------------------------------------------------------------
   15. Closing CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(150deg, var(--color-olive), var(--brand));
  color: var(--color-fern);
  text-align: center;
}
.cta-band h2 { color: var(--surface); max-width: 20ch; margin-inline: auto; }
.cta-band .lede { color: var(--color-fern); margin-inline: auto; margin-bottom: var(--sp-4); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   14b. Ticker
   Full-bleed band that drifts right to left forever. The track holds the four
   titles twice; the animation shifts it by exactly half its width, so the
   second copy lands where the first began and the loop is seamless.
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  background: var(--dark);
  color: var(--color-fern);
  padding-block: var(--sp-3);
  border-block: 1px solid rgba(226, 233, 221, 0.14);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-drift 68s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: 0;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A small ring between titles, echoing the cupping vessels in Ari's own photo. */
.ticker__item::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
}

@keyframes ticker-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .ticker { padding-block: var(--sp-4); }
  .ticker__group { gap: var(--sp-6); padding-right: var(--sp-6); }
  .ticker__item { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   15a. Question carousel (Home)
   The four questions most likely to be typed into a search box, as a swipeable
   row, with the rest living on the FAQ page.
   -------------------------------------------------------------------------- */

.qcar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.qcar__head h2 { margin-bottom: 0; }

.qcar__track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0 calc(var(--gutter) * -1) var(--sp-4);
  padding: 0 var(--gutter) var(--sp-2);
  scrollbar-width: none;
}
.qcar__track::-webkit-scrollbar { display: none; }
.qcar__item { scroll-snap-align: start; }

.qcar__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.qcar__n {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  color: var(--accent);
}
.qcar__q {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--brand);
  margin: 0;
}
.qcar__a { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }

@media (min-width: 700px) { .qcar__track { grid-auto-columns: 46%; } }
@media (min-width: 1000px) { .qcar__track { grid-auto-columns: 30%; } }
@media (min-width: 1240px) {
  .qcar__track {
    grid-auto-columns: calc((100% - var(--sp-2) * 3) / 4);
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   15c. Locations
   One block per clinic: details on one side, its own map on the other, sides
   alternating down the page.
   -------------------------------------------------------------------------- */

.where__title { text-align: center; margin-bottom: var(--sp-8); }

.loc {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-8);
}
.loc:last-of-type { margin-bottom: 0; }

.loc__name {
  font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.5rem);
  line-height: 1.15;
  margin: 0 0 var(--sp-1);
}
.loc__sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}
.loc address {
  font-style: normal;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.loc__grid { display: grid; gap: var(--sp-3); margin: 0; }
.loc__row { display: flex; flex-direction: column; gap: 3px; }
.loc__row dt {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}
.loc__row dd { margin: 0; font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; }
.loc__row dd a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border);
}
.loc__row dd a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.loc__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  min-height: 300px;
}
.loc__map iframe { display: block; width: 100%; height: 100%; border: 0; min-height: 300px; }

@media (min-width: 560px) {
  .loc__grid { grid-template-columns: 1fr 1fr; }
  /* A long address has no natural break point, so it takes the whole row
     rather than splitting mid-word in a half-width cell. */
  .loc__row--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .loc { grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); margin-bottom: var(--sp-12); }
  .loc--reverse .loc__info { order: 2; }
  .loc--reverse .loc__map  { order: 1; }
  .loc__map { min-height: 380px; }
  .loc__map iframe { min-height: 380px; }
}

/* --------------------------------------------------------------------------
   15d. Instagram strip
   Full-bleed row of square tiles, edge to edge, no gaps.
   -------------------------------------------------------------------------- */

/* Runs straight into the footer: the tiles are the last thing on the page and
   sit flush against it, with no gap. */
.ig--flush { padding-bottom: 0; }

.ig__heading {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.ig__heading a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: var(--border);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ig__heading a:hover { text-decoration-color: var(--accent); color: inherit; }

.ig__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.ig__tile { position: relative; overflow: hidden; }
.ig__tile a { display: block; position: relative; }
.ig__tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
/* A wash of Bark on hover, so the tile reacts without a caption. */
.ig__tile a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.ig__tile a:hover img,
.ig__tile a:focus-visible img { transform: scale(1.04); }
.ig__tile a:hover::after,
.ig__tile a:focus-visible::after { opacity: 0.22; }

/* Stand-in tile until the real post images are exported. */
.ig__ph {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(239,243,234,0.05) 18px 36px),
    linear-gradient(140deg, var(--color-olive), var(--brand) 70%);
  color: var(--color-fern);
}
.ig__ph svg { width: 26px; height: 26px; opacity: 0.85; }
.ig__ph span {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  opacity: 0.7;
}

/* Five across is too tight on a phone, and a three-column grid would leave a
   ragged empty cell. A swipeable row keeps them on one line at any count. */
@media (max-width: 700px) {
  .ig__strip {
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ig__strip::-webkit-scrollbar { display: none; }
  .ig__tile { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   15e. Shared carousel buttons
   -------------------------------------------------------------------------- */

.crsl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.crsl__controls { display: flex; gap: var(--sp-1); }

.crsl__btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.crsl__btn:hover:not(:disabled) {
  background: var(--brand);
  color: var(--surface);
  border-color: var(--brand);
}
.crsl__btn:disabled { opacity: 0.32; cursor: default; }
.crsl__btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-olive);
  color: var(--color-fern);
  padding-block: var(--sp-8) var(--sp-4);
}
.footer a { color: var(--color-fern); text-decoration: none; }
.footer a:hover { color: var(--accent); }

.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8); } }

/* The ABR monogram is squarer than the full lockup, so it sits a little
   smaller here to carry the same visual weight. */
.footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--sp-3);
}
.footer p { font-size: var(--fs-small); color: rgba(226, 233, 221, 0.78); line-height: 1.7; }

.footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: rgba(226, 233, 221, 0.6);
  margin-bottom: var(--sp-2);
}

.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 4px; }
.footer__links a { font-size: var(--fs-small); display: inline-block; padding: 6px 0; }

.footer__socials { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.footer__social { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); padding: 6px 0; }
.footer__social svg { width: 20px; height: 20px; }

.footer__bar {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(226, 233, 221, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: rgba(226, 233, 221, 0.6);
}

/* --------------------------------------------------------------------------
   17. Scroll behaviour
   Everything below the first screen appears with no animation at all, by
   request. The only motion on the site is the hero's letter-by-letter load
   and its fade-out as you scroll past it.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. In-page anchors clear the fixed header
   -------------------------------------------------------------------------- */

[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-3)); }

/* --------------------------------------------------------------------------
   19. Reduced motion (design.md § Accessibility)
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }
  .js .hero__title .ltr,
  .js .hero__sub.is-lettered .ltr { opacity: 1; }
  .hero__content { opacity: 1 !important; transform: none !important; }
  .btn:hover, a.card:hover { transform: none; }
  /* A permanently drifting band is exactly what this setting is for, and the
     hero's slow pan is the same case. */
  .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Policy callout
   -------------------------------------------------------------------------- */

.policy-callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}

.prose h2 { margin-top: var(--sp-8); }
.prose h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Common issues hub + breadcrumb
   -------------------------------------------------------------------------- */

.issues { display: grid; gap: var(--sp-6); }

.issue {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.issue h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.issue h2 a { text-decoration: none; color: var(--brand); }
.issue h2 a:hover { color: var(--accent); }
.issue p { font-size: var(--fs-small); color: var(--text-muted); }
.issue p:last-child { margin-top: var(--sp-2); }

@media (min-width: 900px) {
  .issues { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .issue { padding: var(--sp-6); }
}

.crumbs {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Nav dropdown (Focus Areas)
   -------------------------------------------------------------------------- */

.nav__item { position: relative; display: flex; align-self: stretch; align-items: center; }

.nav__link--parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__chev { width: 13px; height: 13px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev,
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 212px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast) var(--ease);
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__item.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__sublink:hover { background: var(--bg); color: var(--brand); }
.nav__sublink[aria-current="page"] { color: var(--brand); background: var(--bg); }

/* Touch devices get no hover, and the mobile panel carries these links
   instead, so the dropdown is suppressed rather than sticking open on tap. */
@media (hover: none) {
  .nav__sub { display: none; }
}

/* Sub-items inside the mobile panel */
.nav__panel-sub {
  font-size: var(--fs-small) !important;
  padding-left: var(--sp-3) !important;
  min-height: 46px !important;
  color: var(--text-muted) !important;
}