/* ==========================================================================
   APA COMPONENTS
   Every reusable block on the site. Depends on tokens.css + base.css.
   Component classes never reference raw palette steps, only semantic tokens.
   Live reference: /styleguide.html
   ========================================================================== */

/* ==========================================================================
   1. SIGNATURE MOTIFS
   The brand's one idea, drawn three ways:
   - .pigment-rule    seven measured drops resolving into one skin tone
   - .pigment-swatches the same recipe as countable squares
   - .water           Ella paints water; a single continuous line, again
   ========================================================================== */

.pigment-rule {
  width: 100%;
  height: 2px;
  border: 0;
  margin: 0;
  border-radius: 2px;
  background: var(--grad-recipe-chart);
}
.pigment-rule--short { width: min(11rem, 40%); }
.pigment-rule--center { margin-inline: auto; }
.pigment-rule--thin { height: 1px; }

.pigment-swatches {
  display: flex;
  gap: 3px;
  align-items: center;
}
.pigment-swatches i {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 1px;
}
.pigment-swatches i:nth-child(1) { background: var(--pigment-1-olive); }
.pigment-swatches i:nth-child(2) { background: var(--pigment-2-yellow); }
.pigment-swatches i:nth-child(3) { background: var(--pigment-3-red); }
.pigment-swatches i:nth-child(4) { background: var(--pigment-4-vein); }
.pigment-swatches i:nth-child(5) { background: var(--pigment-5-gold); }
.pigment-swatches i:nth-child(6) { background: var(--pigment-6-pink); }
.pigment-swatches i:nth-child(7) {
  background: var(--pigment-7-blend);
  width: 1.6rem;
  margin-left: 3px;
}

/* Water texture. A decorative layer, never content. Add .has-water to any
   positioned block; it paints hand-drawn ocean lines at very low contrast. */
.has-water { position: relative; isolation: isolate; }
.has-water > * { position: relative; z-index: 1; }
.has-water::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: min(56%, 26rem);
  z-index: 0;
  background: url("/assets/img/water-lines.svg") no-repeat center bottom;
  background-size: 122% 100%;
  opacity: var(--water-opacity, 0.07);
  pointer-events: none;
}
.section--ink .has-water::before,
.has-water--invert::before {
  filter: invert(1);
  opacity: var(--water-opacity, 0.10);
}

/* Sand wash: the warm light that sits behind the hero and the CTA band. */
.has-wash { position: relative; isolation: isolate; }
.has-wash > * { position: relative; z-index: 1; }
.has-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wash-sand);
  pointer-events: none;
}

/* ==========================================================================
   2. BUTTONS
   .btn--primary is always "Text Ella". One primary per view, please.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85rem 1.5rem;
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: var(--lift); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn__icon { flex: none; width: 1.05em; height: 1.05em; }

.btn--primary {
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover {
  background: var(--color-bg-sunk);
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--accent:hover { background: var(--color-accent-quiet); border-color: var(--color-accent-quiet); }

/* For use inside .section--ink */
.btn--invert {
  background: var(--color-text-invert);
  border-color: var(--color-text-invert);
  color: var(--color-brand-deep);
}
.btn--invert:hover { background: #fff; border-color: #fff; color: var(--color-brand-deep); }

.btn--outline-invert {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-text-invert) 42%, transparent);
  color: var(--color-text-invert);
}
.btn--outline-invert:hover {
  background: color-mix(in srgb, var(--color-text-invert) 10%, transparent);
  border-color: var(--color-text-invert);
  color: var(--color-text-invert);
}

.btn--sm { min-height: 2.4rem; padding: 0.5rem 1rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 3.4rem; padding: 1rem 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

/* Quiet text link with a moving arrow. Used on cards and inline. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-accent);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 1.15em;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.link-arrow:hover { color: var(--color-accent-quiet); }
.link-arrow:hover::after { width: 1.9em; }
.link-arrow--invert { color: var(--color-accent-on-dark); }

/* ==========================================================================
   3. HEADER + NAVIGATION
   No framework. The panel is plain markup; site.js only toggles a class and
   the aria state. Without JS the nav renders as a normal inline list.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: saturate(140%) blur(14px); }
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* Brand lockup: the mark and the wordmark are masked SVGs painted with
   currentColor, so the same two files serve the light and dark contexts. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--color-text); }
.brand__mark,
.brand__word {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.brand__mark {
  width: 2.45rem; height: 2.32rem;
  -webkit-mask-image: url("/assets/img/logo-mark.svg");
          mask-image: url("/assets/img/logo-mark.svg");
}
.brand__word {
  width: 11.2rem; height: 1.76rem;
  -webkit-mask-image: url("/assets/img/logo-wordmark.svg");
          mask-image: url("/assets/img/logo-wordmark.svg");
}
@media (max-width: 26rem) { .brand__word { width: 8.6rem; height: 1.36rem; } }

.brand--stacked { flex-direction: column; align-items: flex-start; gap: 1rem; }
.brand--stacked .brand__mark { width: 4.6rem; height: 4.35rem; }
.brand--stacked .brand__word { width: 13.5rem; height: 2.13rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.9rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.7rem);
  margin: 0; padding: 0; list-style: none;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--color-text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--color-accent); }

.nav__cta { margin-left: 0.35rem; }
/* The header CTA never shrinks and its label never wraps. Without this the
   flex row squeezes the button between the desktop breakpoint and roughly
   72rem, and "Text Ella" breaks onto two lines, which pushes the header to
   two rows. Inherited from the pre-merge build; fixed 2026-08-27. */
.nav__cta .btn { flex: none; white-space: nowrap; }
.nav__list { flex: 0 1 auto; min-width: 0; }

/* Hamburger */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  margin-right: -0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text);
}
.nav-toggle__bars { display: block; width: 1.2rem; height: 0.7rem; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: calc(100% - 1.5px); }
[aria-expanded="true"] .nav-toggle__bars::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after  { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Header breakpoint. The desktop row needs about 1100px to hold the brand,
   seven links and the CTA without squeezing anything, so the mobile panel
   stays until 69rem. site.js matches this number: change both together. */
@media (max-width: 68.9375rem) {
  .js .nav-toggle { display: inline-flex; }
  /* The header owns a backdrop-filter, which makes it the containing block
     for fixed children, so the panel is positioned against the header
     instead. The header is sticky, so this behaves exactly like fixed. */
  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100svh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    display: block;
    padding: var(--space-l) var(--gutter) var(--space-2xl);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base) step-end;
  }
  .js .nav[data-open="true"] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility 0s;
  }
  .js .nav__list { display: block; }
  .js .nav__list li + li { border-top: 1px solid var(--color-border); }
  .js .nav__link {
    display: block;
    padding: 0.95rem 0;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--fs-lg);
    font-weight: var(--weight-regular);
  }
  .js .nav__link::after { display: none; }
  .js .nav__cta { display: block; margin: var(--space-l) 0 0; }
  .js .nav__cta .btn { width: 100%; }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-surface-ink);
  color: var(--color-text-invert);
  padding-block: var(--space-2xl) var(--space-l);
}
.site-footer a:not(.btn) { color: var(--color-text-invert); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--color-accent-on-dark); text-decoration: underline; text-underline-offset: 0.22em; }
.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
@media (max-width: 48rem) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } }
.footer-brand { text-align: center; }
.footer-brand .brand--stacked { align-items: center; }
.cta-band .brand, .cta-band .brand:hover { color: var(--color-text-invert); }
.cta-band .footer-nap { color: var(--color-text-invert-muted); max-width: none; }
.cta-band .footer-nap strong, .cta-band .footer-nap a { color: var(--color-text-invert); text-decoration: none; }
.site-footer h2, .site-footer h3 { color: var(--color-text-invert); }
.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
  margin-bottom: var(--space-s);
}
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li + li { margin-top: 0.6rem; }
.footer-nav a { font-size: var(--fs-sm); }

.footer-nap {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-invert-muted);
}
.footer-nap strong { color: var(--color-text-invert); font-weight: var(--weight-semibold); }
.footer-nap a { color: var(--color-text-invert); }

.site-footer__bottom {
  margin-top: var(--space-m);
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-xs);
  color: var(--color-text-invert-muted);
}
.social-list { display: flex; gap: var(--space-s); list-style: none; margin: 0; padding: 0; }
.social-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid color-mix(in srgb, var(--color-text-invert) 24%, transparent);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.social-list a:hover { background: color-mix(in srgb, var(--color-text-invert) 12%, transparent); border-color: var(--color-text-invert); }
.social-list svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
  padding-block: clamp(3rem, 2rem + 7vw, 7rem) clamp(3.5rem, 2rem + 8vw, 8rem);
  background: var(--color-bg);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.hero__title { margin-bottom: var(--space-m); }
.hero__title-main { display: block; }
.hero__title-sub {
  display: block;
  margin-top: 0.42em;
  font-size: var(--fs-xl);
  font-weight: var(--weight-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--color-text-muted);
  max-width: 22ch;
}
.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}
.hero__sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 34ch;
}
.hero__actions { margin-top: var(--space-l); }
.hero__note {
  margin-top: var(--space-m);
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}
.hero__media { position: relative; }

/* ==========================================================================
   6. MEDIA + PLACEHOLDERS
   Every image on this site is a <picture> with AVIF -> WebP -> JPEG.
   Until consented client photos arrive, wrap placeholders in .is-placeholder
   so nobody can mistake them for Ella's work.
   ========================================================================== */

.media { position: relative; margin: 0; }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg-sunk);
}
.media--arch img { border-radius: var(--radius-arch); }
.media--portrait img { aspect-ratio: 4 / 5; }
.media--square img   { aspect-ratio: 1 / 1; }
.media--landscape img{ aspect-ratio: 3 / 2; }
.media--wide img     { aspect-ratio: 16 / 9; }
.media--fourthree img { aspect-ratio: 4 / 3; }
.media--solo { max-width: 44rem; margin-inline: auto; }

/* Tablet: portraits stop filling more than a screen. */
@media (min-width: 40rem) and (max-width: 55.9375rem) {
  .media--portrait, .hero__media { max-width: 26rem; margin-inline: auto; }
}
.media--framed img { box-shadow: var(--shadow-md); }
.media__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-sunk);
  background-size: cover;
  background-position: center;
}
.media--framed .media__video { box-shadow: var(--shadow-md); }
.media__caption {
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

.is-placeholder { position: relative; }
.is-placeholder::after {
  content: attr(data-placeholder);
  position: absolute;
  left: var(--space-xs);
  bottom: var(--space-xs);
  z-index: 2;
  max-width: calc(100% - var(--space-m));
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--marine-900) 82%, transparent);
  color: var(--shell-100);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==========================================================================
   7. SERVICE CARD
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--shell-400); box-shadow: var(--shadow-md); transform: var(--lift); }
.card__media { overflow: hidden; }
.card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.03); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-m) var(--space-l);
  flex: 1;
}
.card__title { font-size: var(--fs-xl); margin: 0; }
@media (min-width: 40rem) {
  .card__kicker { min-height: 1.35em; }
  .card__title  { min-height: 2.56em; }
}
.card__title a { color: var(--color-text); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { color: var(--color-text); }
.card:hover .card__title { color: var(--color-accent); }
.card__text { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--space-s); }
.card__kicker {
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   8. THE PLAN (three steps)
   The connecting hairline is the logo's single continuous line, redrawn.
   ========================================================================== */

.plan { counter-reset: step; position: relative; }
.plan__steps {
  display: grid;
  gap: var(--space-xl);
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
@media (min-width: 52rem) {
  .plan__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
  /* the line that runs through all three numerals */
  .plan__steps::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, var(--color-border) 8%, var(--color-border) 92%, transparent);
  }
}
.plan__step { position: relative; counter-increment: step; }
.plan__step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem; height: 2.8rem;
  margin-bottom: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-md);
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}
.plan__step h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2xs); }
.plan__step p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.section--ink .plan__step::before,
.plan--invert .plan__step::before {
  background: var(--color-surface-ink);
  border-color: color-mix(in srgb, var(--color-text-invert) 26%, transparent);
  color: var(--color-accent-on-dark);
}
.section--ink .plan__steps::before,
.plan--invert .plan__steps::before {
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--color-text-invert) 22%, transparent) 8%,
    color-mix(in srgb, var(--color-text-invert) 22%, transparent) 92%, transparent);
}
.section--ink .plan__step p,
.plan--invert .plan__step p { color: var(--color-text-invert-muted); }

/* ==========================================================================
   9. PROOF: rating band + pull quotes
   ========================================================================== */

.proof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s) clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  text-align: center;
}
.proof-bar > * { display: inline-flex; align-items: center; gap: 0.55rem; }
@media (min-width: 52rem) {
  .proof-bar > * + * {
    padding-left: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
    border-left: 1px solid var(--color-border);
  }
}
.proof-bar .rating__meta { font-size: var(--fs-sm); }
.rating { display: inline-flex; align-items: center; gap: 0.55rem; }
.rating__stars { display: inline-flex; gap: 2px; color: var(--color-accent-quiet); }
.rating__stars svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.rating__score {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-2xl);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.rating__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.quote__mark { width: 100%; }
.quote blockquote p {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-lg);
  font-weight: var(--weight-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--color-text);
}
.quote figcaption {
  margin-top: auto;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.quote--lead blockquote p { font-size: var(--fs-2xl); }

/* A quiet inline pull-quote for long copy */
.pullquote {
  margin: var(--space-xl) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-xl);
  font-weight: var(--weight-light);
  line-height: var(--lh-snug);
}

/* ==========================================================================
   10. FAQ ACCORDION (details/summary, no JS)
   ========================================================================== */

.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--color-accent); }
.faq__item > summary::after {
  content: "";
  flex: none;
  width: 1rem; height: 1rem;
  margin-top: 0.4em;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
/* Open state is a minus: drop the vertical stroke only. Do not add a
   rotate here, it turns the minus back into a vertical bar. */
.faq__item[open] > summary::after { background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat; }
.faq__answer { padding: 0 0 var(--space-l); max-width: var(--measure); }
.faq__answer > * + * { margin-top: var(--space-s); }
.faq__answer p { color: var(--color-text-muted); line-height: var(--lh-relaxed); }

/* ==========================================================================
   11. CTA BAND
   ========================================================================== */

.cta-band {
  background: var(--color-surface-ink);
  color: var(--color-text-invert);
  padding-block: var(--space-3xl) var(--space-xl);
  overflow: hidden;
}
/* When the closing band sits directly on the footer they read as one dark
   field, so the footer drops its own top padding and takes a hairline. */
.cta-band + .site-footer {
  padding-top: var(--space-l);
  border-top: 1px solid color-mix(in srgb, var(--color-text-invert) 12%, transparent);
}
.cta-band h2 { color: var(--color-text-invert); max-width: 18ch; }
.cta-band p { color: var(--color-text-invert-muted); max-width: var(--measure-tight); }
.cta-band__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.cta-band--center .cta-band__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.cta-band--center h2, .cta-band--center p { max-width: none; }
.cta-band--soft {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.cta-band--soft h2 { color: var(--color-text); }
.cta-band--soft p { color: var(--color-text-muted); }

/* ==========================================================================
   12. BREADCRUMBS
   ========================================================================== */

.breadcrumbs { padding-block: var(--space-m) 0; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.22em; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

/* ==========================================================================
   13. ANSWER CAPSULE (service pages open with this)
   ========================================================================== */

.capsule {
  position: relative;
  padding: var(--space-l);
  padding-left: calc(var(--space-l) + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.capsule::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-recipe);
}
.capsule p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}
.capsule p + p { margin-top: var(--space-s); }

/* ==========================================================================
   14. SMALL PARTS
   ========================================================================== */

/* Geo line: where people drive in from */
.geo {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}
.geo strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Note / aside callout */
.note {
  padding: var(--space-m);
  border-left: 2px solid var(--color-border-strong);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}
.note--accent { border-left-color: var(--color-accent); }

/* Tag */
.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  font-size: var(--fs-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Stat */
.stat__value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-3xl);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.stat__label {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Definition-style list used for "what's included" blocks */
.deflist { display: grid; gap: var(--space-m); }
.deflist dt {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.35rem;
}
.deflist dd { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* Checklist */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.ticks li { position: relative; padding-left: 1.75rem; line-height: var(--lh-relaxed); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 0.7rem; height: 0.38rem;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}
.section--ink .ticks li::before { border-color: var(--color-accent-on-dark); }

/* Forms */
.field { display: grid; gap: 0.4rem; }
.label { font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.input, .textarea, .select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.textarea { min-height: 9rem; resize: vertical; }
.help { font-size: var(--fs-xs); color: var(--color-text-subtle); }

/* ==========================================================================
   15. JUMP LINKS  (promoted from page-scoped CSS, 2026-08-27)
   A row of pill anchors that jumps to the themed groups below. Was duplicated
   byte for byte in page <style> blocks on /faq/ and
   /guide/scar-camouflage-candidate/. Global scroll-padding-top in base.css
   already keeps the sticky header off the target, so no scroll handling here.
   min-height is 2.75rem (44px) to meet the touch-target floor.
   ========================================================================== */

.jump-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  padding-block: var(--space-s);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.jump-links__label {
  margin-right: var(--space-2xs);
  font-size: var(--fs-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--color-text-subtle);
}
.jump-links a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.jump-links a:hover {
  color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-bg-alt);
}

/* ==========================================================================
   16. POST META  (promoted from page-scoped CSS, 2026-08-27)
   Byline, date and read time under a post title. Was duplicated byte for byte
   in page <style> blocks on both blog posts.
   ========================================================================== */

.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  margin-top: var(--space-m);
  font-size: var(--fs-sm); color: var(--color-text-subtle);
}
.post-meta > * + *::before {
  content: "\00b7"; margin-right: var(--space-s); color: var(--color-border);
}

/* ==========================================================================
   Map embed + opening hours
   ========================================================================== */
.map-embed {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-sunk);
  box-shadow: var(--shadow-md);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hours { margin: var(--space-2xs) 0 0; display: grid; gap: 0.15rem; max-width: 22rem; }
.hours > div { display: flex; justify-content: space-between; gap: var(--space-m); font-size: var(--fs-md); }
.hours dt { font-weight: var(--weight-medium); }
.hours dd { margin: 0; color: var(--color-text-muted); }

/* A figure inside running prose needs air above and below. */
.prose > .media, .prose > figure { margin-block: var(--space-l); }
.stack > .media { margin-block-start: var(--space-l); }