/* ==========================================================================
   Sozo Wellness Co
   Single stylesheet. No build step, no preprocessor.

   Palette is sampled from the existing brand: the cream and taupe of the
   Instagram graphics, the sage of her service cards, and a deep forest green
   that gives the clinical side of the practice some weight. The brief is
   "warm, clinical-credible and current", so this deliberately avoids the
   soft floral wellness-spa register.

   Read MOBILE_GUIDELINES.md before touching the breakpoints. This file is
   mobile-first: base styles are the phone layout, media queries add width.
   ========================================================================== */

:root {
  /* Brand */
  --forest: #2c4033;
  --forest-deep: #1d2b23;
  --sage: #7d9382;
  --sage-light: #dfe6e0;
  --gold: #b08d4f;
  --gold-light: #e8dcc6;
  --cream: #faf7f2;
  --cream-deep: #f2ece1;
  --ink: #222b25;
  --ink-soft: #55605a;
  --line: #e2ddd3;
  --white: #ffffff;

  /* Sculpt Social accent. Used ONLY on /sculpt-social/, as an accent, never a
     wholesale palette switch. See docs/decisions.md ADR-008. */
  --blush: #f5e6e4;
  --brick: #a8483e;

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Spacing and shape */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(34, 43, 37, .05), 0 8px 24px rgba(34, 43, 37, .06);
  --shadow-lift: 0 2px 6px rgba(34, 43, 37, .08), 0 16px 40px rgba(34, 43, 37, .1);
  --wrap: 1140px;
  --wrap-narrow: 760px;

  /* Used to make the credential strip land exactly on the fold. */
  --header-h: 64px;
  --credentials-h: 52px;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

/* An <img> with width/height attributes as a grid or flex child forces the
   track to its intrinsic width and blows out the column. This is the fix, and
   it is the overflow bug that cost real time on the previous build. */
.photo, .photo img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

a { color: var(--forest); text-underline-offset: .18em; }
a:hover { color: var(--gold); }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--forest-deep);
  margin: 0 0 .5em;
  text-wrap: balance;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.9rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 4.4vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }

p, li, .lead, summary, dd {
  text-wrap: pretty;
}

p { margin: 0 0 1.1em; }

.lead {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
  margin: 0 0 .5rem;
  letter-spacing: .01em;
}

.section-intro { max-width: 62ch; }

strong { font-weight: 650; color: var(--forest-deep); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.15rem;
}

.wrap-narrow { max-width: var(--wrap-narrow); }

section { padding-block: clamp(2.75rem, 7vw, 5rem); }

.section-cream { background: var(--cream-deep); }
.section-white { background: var(--white); }
.section-forest {
  background: var(--forest);
  color: var(--sage-light);
}
.section-forest h2,
.section-forest h3 { color: var(--white); }
.section-forest a { color: var(--gold-light); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: var(--white);
  padding: .75rem 1.15rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding-block: .55rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  /* Tap target. The text itself is short, so the link needs padding to reach
     44px rather than relying on the glyph height. */
  padding-block: .55rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest-deep);
  text-decoration: none;
  white-space: nowrap;
}
.brand span {
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--gold);
}

.site-nav { margin-right: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--forest); border-bottom-color: var(--gold); }
.site-nav a[aria-current="page"] {
  color: var(--forest);
  border-bottom-color: var(--gold);
}

.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--forest-deep);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--forest-deep);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
    transform .16s ease;
  min-height: 46px;
}

.btn-primary {
  background: var(--forest);
  color: var(--white);
  border-color: var(--forest);
}
.btn-primary:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--forest);
  border-color: var(--sage);
}
.btn-secondary:hover {
  background: var(--sage-light);
  color: var(--forest-deep);
  border-color: var(--forest);
}

.btn-gold {
  background: var(--gold);
  color: var(--forest-deep);
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-lg { font-size: 1.05rem; padding: .95rem 1.7rem; min-height: 52px; }
/* 44px is the floor for anything finger-operated, so btn-sm sits exactly on it
   rather than below. The header CTA uses this size on every page. */
.btn-sm { font-size: .9rem; padding: .6rem 1rem; min-height: 44px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}

/* Reusable label swap: full label on desktop, short on phones. Two spans per
   button, never a second element. */
.btn-label-mini { display: none; }

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

.hero {
  background: linear-gradient(170deg, var(--cream-deep) 0%, var(--cream) 62%);
  padding-block: clamp(2rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

/* Where a credential strip follows the hero, stretch the hero so the strip
   lands on the fold rather than just below it. Scoped with :has() so hero
   sections WITHOUT a strip keep their natural height.

   Desktop only, deliberately. On a phone the hero is a stacked column of
   eyebrow, h1, lead, two buttons and a portrait, which is already taller than
   a 844px viewport. Forcing the strip into view there would mean shrinking the
   photo to a squat band that crops her badly. The credential strip sits
   immediately below the fold on mobile instead, which is a scroll of about
   half a thumb. */
@media (min-width: 861px) {
  .hero:has(+ .credentials) {
    display: flex;
    align-items: center;
    min-height: calc(100dvh - var(--header-h) - var(--credentials-h));
  }
  .hero:has(+ .credentials) > .wrap { width: 100%; }
}

.hero-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

.hero h1 { margin-bottom: .45em; }

.hero .lead { max-width: 54ch; }

.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--sage-light);
}
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Credential strip under the hero */
.credentials {
  background: var(--forest);
  color: var(--sage-light);
  padding-block: 1.1rem;
}
.credentials ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  font-size: .93rem;
  letter-spacing: .02em;
  text-align: center;
}
.credentials li { display: flex; align-items: center; gap: .45rem; }
.credentials li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.15rem; }
/* minmax(0, 1fr), never a bare 1fr.

   A bare `1fr` is `minmax(auto, 1fr)`, and `auto` resolves to min-content. So a
   single wide child, a long unbreakable label or a button row, drags the whole
   track wider than the viewport and the page overflows sideways. Explicitly
   flooring the track at 0 lets it shrink and lets the content wrap instead. */
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }

.card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .btn { align-self: flex-start; margin-top: auto; }

a.card {
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.card-media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--sage-light);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Head-and-shoulders portraits. A 3:2 landscape window over a portrait source
   crops through the face, which is what was happening to the team photos.
   Portrait ratio plus object-position near the top keeps the head in frame
   whatever the source aspect happens to be. */
.card-media-portrait { aspect-ratio: 4 / 5; }
.card-media-portrait img { object-position: 50% 18%; }

/* Differentiator cards, no photo, gold rule */
.point {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.point h3 { font-size: 1.15rem; }
.point p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Price cards. These are load-bearing on this site.
   -------------------------------------------------------------------------- */

.price-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.price-card.featured {
  border: 2px solid var(--forest);
  box-shadow: var(--shadow-lift);
}

.price-flag {
  display: inline-block;
  align-self: flex-start;
  background: var(--gold-light);
  color: var(--forest-deep);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}

.price-card h3 { margin-bottom: .3em; }

/* The price and its label must never separate. */
.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .9rem;
}
.price-amount {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1;
  white-space: nowrap;
}
.price-unit { font-size: .95rem; color: var(--ink-soft); white-space: nowrap; }
.price-note { font-size: .9rem; color: var(--ink-soft); margin: -.5rem 0 .9rem; }

.price-card ul {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  font-size: .97rem;
}
.price-card li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  line-height: 1.5;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.price-card .btn-row {
  margin-top: auto;
  padding-top: .35rem;
}
/* Two buttons sharing one line, equal width.

   IMPORTANT, and this is the bug in MOBILE_GUIDELINES that bit us: nowrap on
   the row PLUS nowrap on the labels makes the pair's min-content width the sum
   of both full labels. Inside a single-column grid that widens the whole track
   past the viewport, and the page overflows.

   So the one-line treatment is applied only from 561px up, where the card is
   wide enough to hold it honestly. On phones the buttons stack full width,
   which is a bigger tap target anyway. */
.price-card .btn-row .btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 561px) {
  .price-card .btn-row { flex-wrap: nowrap; }
  .price-card .btn-row .btn {
    flex: 1 1 0;
    padding-inline: .7rem;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .price-card .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Split sections
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.split .photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--sage-light);
}
.split .photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote blockquote p:last-child { margin-bottom: 0; }
.quote cite {
  margin-top: auto;
  font-style: normal;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.section-forest .quote {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  border-left-color: var(--gold);
}
.section-forest .quote blockquote { color: var(--sage-light); }
.section-forest .quote cite { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 68ch; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: .3rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--forest-deep);
  padding: .9rem 2rem .9rem 0;
  position: relative;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 1.1rem; }
.faq details > div p:last-child { margin-bottom: 0; }

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

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3.5vw, 2.1rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
  color: var(--forest-deep);
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: .87rem;
  color: var(--ink-soft);
  margin-top: .15rem;
}

/* 16px minimum prevents iOS zoom-on-focus. Do not reduce. */
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  min-height: 46px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sage);
  background: var(--white);
}

.required-mark { color: var(--brick); }

/* Honeypot. Hidden from people and from screen readers. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  background: var(--gold-light);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .92rem;
  margin-bottom: 1.35rem;
  color: var(--forest-deep);
}
.form-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.callout {
  background: var(--sage-light);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.callout h3 { margin-bottom: .4em; }
.callout p:last-child { margin-bottom: 0; }

.callout-gold { background: var(--gold-light); }

/* --------------------------------------------------------------------------
   Recipe and workout meta
   -------------------------------------------------------------------------- */

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.meta-row li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .8rem;
  display: flex;
  align-items: center;
}
/* When a meta chip is a link it is a control, not prose, so it gets the full
   44px target. Padding goes on the li so the pill grows with it. */
.meta-row li:has(a) { padding-block: 0; }
.meta-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
}

.macros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .7rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.macros li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .5rem;
  text-align: center;
}
.macros b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--forest-deep);
  line-height: 1.1;
}
.macros span { font-size: .8rem; color: var(--ink-soft); }

.recipe-steps { padding-left: 1.35rem; }
.recipe-steps li { margin-bottom: .55rem; padding-left: .2rem; }

/* --------------------------------------------------------------------------
   Recipe and workout article layout
   -------------------------------------------------------------------------- */

/* "Jump to recipe" is standard on food sites for a real reason: people who
   have made it before want the list, not the story. It is a usability fix
   first. It also keeps them on the page instead of bouncing back to search. */
.jump-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--sage);
  border-radius: 999px;
  background: var(--white);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--forest);
}
.jump-link:hover { background: var(--sage-light); color: var(--forest-deep); }
.jump-link::after {
  content: "";
  width: .42rem; height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Ingredients. A plain .stack list put 1.1rem between every line, which made a
   twelve-item list enormous and hard to scan. This is a proper checklist. */
.ingredients {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  columns: 1;
}
.ingredients li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .38rem;
  line-height: 1.5;
  break-inside: avoid;
}
.ingredients li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: .5rem; height: .5rem;
  border: 2px solid var(--gold);
  border-radius: 3px;
}
/* A sub-heading inside the ingredient list, for recipes with a crust and a
   filling. Spans both columns so the grouping stays readable. */
.ingredients li.ingredient-group {
  padding-left: 0;
  margin: 1.1rem 0 .55rem;
  font-weight: 700;
  color: var(--forest-deep);
  column-span: all;
}
.ingredients li.ingredient-group:first-child { margin-top: 0; }
.ingredients li.ingredient-group::before { display: none; }

.recipe-body h2 { margin-top: 2.25rem; }
.recipe-body h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Filterable workout and recipe index
   -------------------------------------------------------------------------- */

.filter-bar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}
.filter-group + .filter-group { margin-top: 1rem; }
.filter-group > span {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-family: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--sage); }
.chip[aria-pressed="true"] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}
.filter-status {
  margin: 0 0 1.25rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.filter-reset {
  background: none;
  border: none;
  padding: 0 0 0 .5rem;
  font: inherit;
  color: var(--forest);
  text-decoration: underline;
  cursor: pointer;
}
.card[hidden] { display: none !important; }
.no-matches {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}

/* Tag pills on a card, non-interactive. */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.tags li {
  font-size: .8rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tags li.tag-equipment { background: var(--sage-light); color: var(--forest-deep); border-color: transparent; }
.tags li.tag-focus { background: var(--gold-light); color: var(--forest-deep); border-color: transparent; }

/* Workout table */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
}
th {
  background: var(--cream-deep);
  font-weight: 650;
  color: var(--forest-deep);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }

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

.site-footer {
  background: var(--forest-deep);
  color: var(--sage-light);
  padding-block: 2.75rem 2rem;
  font-size: .95rem;
}
.site-footer a { color: var(--sage-light); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
/* Footer nav links are standalone controls, not prose, so they get a real tap
   target rather than the 18px the text alone would give. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .1rem;
}
.site-footer h4 {
  color: var(--white);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.footer-grid { display: grid; gap: 1.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .1rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-light);
  margin: 0 0 .6rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .13);
  margin-top: 2rem;
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  font-size: .87rem;
  color: rgba(223, 230, 224, .75);
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Sculpt Social accent. Scoped, so it never leaks into the practice pages.
   -------------------------------------------------------------------------- */

.sculpt .hero { background: linear-gradient(170deg, var(--blush) 0%, var(--cream) 66%); }
.sculpt .eyebrow { color: var(--brick); }
.sculpt .point { border-top-color: var(--brick); }
.sculpt .price-card li::before { border-color: var(--brick); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.center { text-align: center; }
.center .section-intro,
.center .lead { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }
.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;
}

/* ==========================================================================
   BREAKPOINTS. Mobile-first, so these add width rather than take it away.
   Map is in MOBILE_GUIDELINES.md.
   ========================================================================== */

/* Phone: short button labels, header CTA becomes a compact pill. */
@media (max-width: 560px) {
  .btn-label-full { display: none; }

  /* Pull the hero tighter so the photo starts before the fold rather than
     entirely below it. See MOBILE_GUIDELINES.md. */
  .hero { padding-block: 1.5rem 1.75rem; }
  .hero-grid { gap: 1.4rem; }
  .hero .lead { font-size: 1.05rem; line-height: 1.5; }
  .hero-photo img { aspect-ratio: 3 / 4; }
  .btn-label-mini { display: inline; }

  .btn-row .btn-lg {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: .9rem;
  }

  /* A single CTA on a conversion page goes full width. */
  .btn-row.btn-row-single .btn { flex: 1 1 100%; }

  .header-cta .btn { padding-inline: 1rem; font-size: .95rem; }
}

@media (min-width: 561px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Content grids and price cards go multi-column. */
@media (min-width: 700px) {
  .ingredients { columns: 2; column-gap: 2rem; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hero and split sections go two-column. */
@media (min-width: 861px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Nav collapses to a hamburger below this. */
@media (max-width: 1140px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 64px 0 auto;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    padding: .5rem 1.15rem 1.25rem;
    margin-right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
  .site-nav[hidden] { display: none; }

  /* Scoped under .site-nav so specificity beats the desktop `.site-nav ul`. */
  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: none; }
  .site-nav a {
    display: block;
    padding: .85rem .25rem;
    font-size: 1.05rem;
    border-bottom: none;
  }
  .site-nav a[aria-current="page"] { border-bottom: none; color: var(--forest); }
}

@media (min-width: 1141px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* Two-column stacks put images back to back. Force images last when stacked. */
@media (max-width: 860px) {
  .split > .photo { order: 2; }
  .hero-grid > .hero-photo { order: 2; }
}

@media print {
  .site-header, .site-footer, .btn-row { display: none; }
}