/* =========================================================================
   sf-extensions.css  —  design tokens, utilities & components layered on
   top of stay-fit.css. All values use tokens and clamp() for fluid scaling.
   Loaded AFTER stay-fit.css on every page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Spacing scale (fluid). Use for padding, margin, gap. */
  --sf-space-3xs: 0.25rem;                           /* 4px */
  --sf-space-2xs: 0.375rem;                          /* 6px */
  --sf-space-xs:  clamp(0.5rem,   0.6vw + 0.375rem, 0.75rem);
  --sf-space-s:   clamp(0.75rem,  0.8vw + 0.5rem,   1rem);
  --sf-space-m:   clamp(1rem,     1vw + 0.75rem,    1.5rem);
  --sf-space-l:   clamp(1.5rem,   2vw + 1rem,       2.5rem);
  --sf-space-xl:  clamp(2rem,     3vw + 1.25rem,    3.5rem);
  --sf-space-2xl: clamp(3rem,     5vw + 1.5rem,     5rem);
  --sf-space-3xl: clamp(4rem,     7vw + 2rem,       7rem);

  /* Block rhythm (section padding). */
  --sf-section-py:    clamp(3rem, 6vw, 5rem);
  --sf-section-py-lg: clamp(4.5rem, 9vw, 7rem);

  /* Content widths. */
  --sf-prose:      65ch;
  --sf-narrow:     min(820px, 100%);
  --sf-medium:     min(1040px, 100%);
  --sf-section-header-narrow: min(820px, 100%);

  /* Fluid typography. */
  --sf-fs-eyebrow:  clamp(0.72rem, 0.15vw + 0.68rem, 0.78rem);
  --sf-fs-xs:       clamp(0.78rem, 0.2vw + 0.72rem, 0.85rem);
  --sf-fs-sm:       clamp(0.88rem, 0.3vw + 0.82rem, 0.95rem);
  --sf-fs-base:     1rem;
  --sf-fs-md:       clamp(1rem, 0.4vw + 0.92rem, 1.125rem);
  --sf-fs-lg:       clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --sf-fs-xl:       clamp(1.25rem, 0.9vw + 1rem, 1.5rem);
  --sf-fs-h3:       clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  --sf-fs-h2:       clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --sf-fs-h1:       clamp(2rem,   3vw + 1.25rem, 3.75rem);
  --sf-fs-display:  clamp(2.5rem, 5vw + 1rem, 5.5rem);

  /* Line heights. */
  --sf-lh-tight: 1.1;
  --sf-lh-snug:  1.3;
  --sf-lh-base:  1.55;
  --sf-lh-loose: 1.75;

  /* Letter spacing. */
  --sf-tracking-tight:  -0.02em;
  --sf-tracking-normal: 0;
  --sf-tracking-wide:   0.08em;
  --sf-tracking-wider:  0.12em;

  /* Typography weights. */
  --sf-fw-regular:  400;
  --sf-fw-medium:   500;
  --sf-fw-semibold: 600;
  --sf-fw-bold:     700;
  --sf-fw-extra:    800;
  --sf-fw-black:    900;

  /* Semantic accents beyond primary. */
  --sf-success: #58d68d;
  --sf-warn:    #ffb347;
  --sf-danger:  #ff6b6b;

  /* Component tokens. */
  --sf-card-padding:        clamp(1.25rem, 2vw + 0.75rem, 2rem);
  --sf-card-padding-lg:     clamp(1.75rem, 3vw + 0.75rem, 2.5rem);
  --sf-control-padding-y:   0.9rem;
  --sf-control-padding-x:   1rem;

  /* Animation. */
  --sf-dur-quick: 180ms;
  --sf-dur-base:  300ms;
  --sf-dur-slow:  400ms;
  --sf-ease:      cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows. */
  --sf-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --sf-shadow-md: 0 6px 20px rgba(0,0,0,0.25);
  --sf-shadow-lg: 0 18px 40px rgba(0,0,0,0.35);
  --sf-shadow-primary: 0 10px 30px var(--sf-primary-trans-30);
}

/* -------------------------------------------------------------------------
   2. Utilities
   ------------------------------------------------------------------------- */

/* Text utilities */
.sf-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wider);
  font-size: var(--sf-fs-eyebrow);
  font-weight: var(--sf-fw-bold);
  color: var(--sf-text-muted);
  margin: 0 0 var(--sf-space-s);
}
.sf-eyebrow--primary { color: var(--sf-primary); }

.sf-text-gradient {
  background: linear-gradient(135deg, var(--sf-primary), #ff6b6b);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sf-text-gradient--soft {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sf-text-em {
  color: var(--sf-text-primary);
  font-style: italic;
  font-weight: var(--sf-fw-semibold);
}

/* Layout helpers */
.sf-stack > * + * { margin-top: var(--sf-stack-gap, var(--sf-space-m)); }
.sf-stack--s  { --sf-stack-gap: var(--sf-space-s); }
.sf-stack--l  { --sf-stack-gap: var(--sf-space-l); }
.sf-stack--xl { --sf-stack-gap: var(--sf-space-xl); }

.sf-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-cluster-gap, var(--sf-space-m));
  align-items: center;
}
.sf-cluster--center { justify-content: center; }

.sf-narrow       { max-width: var(--sf-narrow);  margin-inline: auto; }
.sf-medium       { max-width: var(--sf-medium);  margin-inline: auto; }

/* Section header — centered narrow variant */
.sf-section-header--narrow {
  max-width: var(--sf-section-header-narrow);
  margin-inline: auto;
}

/* Constrained hero content (when used without the accompanying image column) */
.sf-hero__content--narrow { max-width: 720px; }

/* Single-column hero: center the content block when there is no image column */
.sf-hero--centered {
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
}
.sf-hero--centered .sf-hero__content {
  align-items: center;
  max-width: 820px;
}
.sf-hero--centered .sf-hero__badge { align-self: center; }
.sf-hero--centered .sf-hero__actions,
.sf-hero--centered .sf-hero__social-proof { justify-content: center; }

/* Utility spacing helpers using spacing-scale tokens */
.sf-mt-m  { margin-top: var(--sf-space-m); }
.sf-mt-l  { margin-top: var(--sf-space-l); }
.sf-mt-xl { margin-top: var(--sf-space-xl); }

/* Centered small note sitting under a pricing/qualifier row */
.sf-fine-print {
  text-align: center;
  color: var(--sf-text-muted);
  font-size: var(--sf-fs-xs);
  max-width: 40rem;
  margin: var(--sf-space-l) auto 0;
  line-height: var(--sf-lh-base);
}

/* Lead paragraph (hero subtitle style outside of hero) */
.sf-lead {
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-lg);
  line-height: var(--sf-lh-loose);
  max-width: var(--sf-prose);
}

.sf-muted { color: var(--sf-text-muted); }
.sf-note  {
  color: var(--sf-text-muted);
  font-size: var(--sf-fs-sm);
  max-width: var(--sf-prose);
  margin-inline: auto;
}

/* Paragraph of supporting copy inside an sf-cta block */
.sf-cta__copy {
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-md);
  line-height: var(--sf-lh-loose);
  max-width: 35rem;
  margin: var(--sf-space-s) auto 0;
}

/* CTA actions row */
.sf-cta-actions {
  display: flex;
  gap: var(--sf-space-m);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sf-space-l);
}

/* -------------------------------------------------------------------------
   3. Step grid overrides for 3-phase flows
   (stay-fit.css ships a 4-col grid at lg+)
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sf-steps--3 .sf-steps__grid { grid-template-columns: repeat(3, 1fr); }
  .sf-steps--3 .sf-steps__line { left: 16.666%; right: 16.666%; }
}

/* Feature-grid with exactly 3 cards — uses flex widths that match stay-fit */
.sf-feature-grid--3 .sf-feature-box { width: 100%; }
@media (min-width: 768px) {
  .sf-feature-grid--3 .sf-feature-box { width: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
  .sf-feature-grid--3 .sf-feature-box { width: calc(33.333% - 1rem); }
}

/* -------------------------------------------------------------------------
   4. Accordion open/close animation
   (stay-fit.css renders details instantly — we transition height via JS)
   ------------------------------------------------------------------------- */
.sf-accordion__body {
  overflow: hidden;
  will-change: height;
}
.sf-accordion.is-animating .sf-accordion__body {
  transition: height var(--sf-dur-base) var(--sf-ease);
}

/* -------------------------------------------------------------------------
   5. Slider (horizontal scroll-snap gallery)
   Reuses app.js wireGallery4(): data-gallery4, data-gallery-track,
   data-gallery-card, data-gallery-prev|next, data-gallery-dot
   ------------------------------------------------------------------------- */
.sf-slider {
  position: relative;
  --sf-slider-gap:       var(--sf-space-m);
  --sf-slider-slide-min: clamp(260px, 80vw, 340px);
  --sf-slider-fade:      clamp(2rem, 6vw, 5rem);
}
.sf-slider--wide  { --sf-slider-slide-min: clamp(280px, 85vw, 420px); }
.sf-slider--tall  { --sf-slider-slide-min: clamp(280px, 82vw, 360px); }

.sf-slider__viewport {
  position: relative;
}

/* Side fade masks to hint at overflow */
.sf-slider__viewport::before,
.sf-slider__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sf-slider-fade);
  pointer-events: none;
  z-index: 2;
}
.sf-slider__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--sf-slider-fade-color, var(--sf-bg-dark)) 0%, transparent 100%);
}
.sf-slider__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--sf-slider-fade-color, var(--sf-bg-dark)) 0%, transparent 100%);
}
.sf-bg-surface .sf-slider { --sf-slider-fade-color: var(--sf-bg-surface); }

.sf-slider__track {
  display: flex;
  gap: var(--sf-slider-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: var(--sf-space-xs);
  padding-inline: 0;
  -webkit-overflow-scrolling: touch;
}
.sf-slider__track::-webkit-scrollbar { display: none; }

.sf-slider__slide {
  flex: 0 0 var(--sf-slider-slide-min);
  max-width: var(--sf-slider-slide-min);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .sf-slider          { --sf-slider-slide-min: clamp(300px, 42vw, 420px); }
  .sf-slider--wide    { --sf-slider-slide-min: clamp(340px, 45vw, 480px); }
}
@media (min-width: 1024px) {
  .sf-slider          { --sf-slider-slide-min: clamp(320px, 32vw, 400px); }
  .sf-slider--wide    { --sf-slider-slide-min: clamp(360px, 34vw, 460px); }
}

/* Controls */
.sf-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-m);
  margin-top: var(--sf-space-l);
}
.sf-slider__nav { display: flex; gap: var(--sf-space-s); }

.sf-slider__arrow {
  --size: 2.75rem;
  width: var(--size);
  height: var(--size);
  border-radius: var(--sf-radius-full);
  border: 1px solid var(--sf-border-warm);
  background: var(--sf-bg-surface);
  color: var(--sf-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--sf-dur-base) var(--sf-ease),
              background   var(--sf-dur-base) var(--sf-ease),
              opacity      var(--sf-dur-base) var(--sf-ease),
              transform    var(--sf-dur-base) var(--sf-ease);
}
.sf-slider__arrow:hover:not(:disabled) {
  border-color: var(--sf-primary);
  background: var(--sf-bg-elevated);
  transform: translateY(-1px);
}
.sf-slider__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sf-slider__arrow .material-symbols-outlined { font-size: 1.25rem; color: var(--sf-primary); }

.sf-slider__dots {
  display: flex;
  gap: var(--sf-space-xs);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sf-slider__dot {
  width: 0.5rem;
  height: 0.5rem;
  border: 0;
  padding: 0;
  border-radius: var(--sf-radius-full);
  background: var(--sf-border-warm);
  cursor: pointer;
  transition: background var(--sf-dur-base) var(--sf-ease),
              transform   var(--sf-dur-base) var(--sf-ease),
              width       var(--sf-dur-base) var(--sf-ease);
}
.sf-slider__dot.is-active {
  background: var(--sf-primary);
  width: 1.5rem;
}

/* -------------------------------------------------------------------------
   6. Eyebrow-kicker spacing fix inside sf-section-header
   (when <p class="sf-eyebrow"> replaces the inline-styled kicker)
   ------------------------------------------------------------------------- */
.sf-section-header .sf-eyebrow { margin-bottom: var(--sf-space-s); }

/* -------------------------------------------------------------------------
   7. About-grid (photo + copy)
   ------------------------------------------------------------------------- */
.sf-about-grid {
  display: grid;
  gap: var(--sf-space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .sf-about-grid { grid-template-columns: 1fr 1.1fr; }
}
.sf-about-grid__copy > * + * { margin-top: var(--sf-space-m); }
.sf-about-grid__title {
  font-size: var(--sf-fs-h2);
  font-weight: var(--sf-fw-black);
  letter-spacing: var(--sf-tracking-tight);
  color: var(--sf-text-primary);
  line-height: var(--sf-lh-tight);
  margin: 0;
}
.sf-about-grid__body {
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-md);
  line-height: var(--sf-lh-loose);
  margin: 0;
}

/* -------------------------------------------------------------------------
   8. Promise / statement callout
   ------------------------------------------------------------------------- */
.sf-promise {
  max-width: var(--sf-narrow);
  margin-inline: auto;
  text-align: center;
}
.sf-promise__title {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  font-weight: var(--sf-fw-black);
  letter-spacing: var(--sf-tracking-tight);
  line-height: var(--sf-lh-snug);
  color: var(--sf-text-primary);
  margin: 0;
}
.sf-promise__body {
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-md);
  line-height: var(--sf-lh-loose);
  margin-top: var(--sf-space-m);
}

/* -------------------------------------------------------------------------
   9. Qualifier cards (yes / no)
   ------------------------------------------------------------------------- */
.sf-qualifier-grid {
  display: grid;
  gap: var(--sf-space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .sf-qualifier-grid { grid-template-columns: 1fr 1fr; }
}
.sf-qualifier-card {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-card-padding-lg);
}
.sf-qualifier-card__title {
  display: flex;
  align-items: center;
  gap: var(--sf-space-s);
  font-size: var(--sf-fs-lg);
  font-weight: var(--sf-fw-bold);
  color: var(--sf-text-primary);
  margin: 0 0 var(--sf-space-m);
  padding-bottom: var(--sf-space-m);
  border-bottom: 1px solid var(--sf-border-warm);
}
.sf-qualifier-card--yes .sf-qualifier-card__title { color: var(--sf-success); }
.sf-qualifier-card--no  .sf-qualifier-card__title { color: var(--sf-danger); }

.sf-qualifier-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-s);
}
.sf-qualifier-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-s);
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-sm);
  line-height: var(--sf-lh-base);
}
.sf-qualifier-card__list li .material-symbols-outlined {
  font-size: var(--sf-fs-lg);
  flex-shrink: 0;
  margin-top: 0.1em;
}
.sf-qualifier-card--yes li .material-symbols-outlined { color: var(--sf-success); }
.sf-qualifier-card--no  li .material-symbols-outlined { color: var(--sf-danger); }

/* -------------------------------------------------------------------------
   10. Blood-report before/after card strip
   ------------------------------------------------------------------------- */
.sf-blood-section + .sf-blood-section { margin-top: var(--sf-space-xl); }
.sf-blood-section__title {
  font-size: var(--sf-fs-h3);
  font-weight: var(--sf-fw-extra);
  color: var(--sf-text-primary);
  display: flex;
  align-items: center;
  gap: var(--sf-space-s);
  margin: 0 0 var(--sf-space-m);
}
.sf-blood-section__title .material-symbols-outlined { color: var(--sf-primary); }

.sf-blood-grid {
  display: grid;
  gap: var(--sf-space-m);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sf-blood-card {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
}
.sf-blood-card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--sf-border-warm);
}
.sf-blood-card__img {
  background: #0b0707;
  position: relative;
}
.sf-blood-card__img img {
  width: 100%;
  height: auto;
  display: block;
}
.sf-blood-card__img-label {
  position: absolute;
  top: var(--sf-space-xs);
  left: var(--sf-space-xs);
  font-size: var(--sf-fs-eyebrow);
  font-weight: var(--sf-fw-extra);
  letter-spacing: var(--sf-tracking-wide);
  text-transform: uppercase;
  padding: var(--sf-space-3xs) var(--sf-space-xs);
  border-radius: var(--sf-radius-sm);
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.sf-blood-card__img-label--before { color: #ff8080; }
.sf-blood-card__img-label--after  { color: var(--sf-success); }

.sf-blood-card__meta {
  padding: var(--sf-space-m) var(--sf-space-m);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sf-space-s);
}
.sf-blood-card__name { font-size: var(--sf-fs-md); font-weight: var(--sf-fw-bold); color: var(--sf-text-primary); }
.sf-blood-card__sub  { font-size: var(--sf-fs-xs); color: var(--sf-text-muted); }

/* -------------------------------------------------------------------------
   11. Review screenshot grid
   ------------------------------------------------------------------------- */
.sf-review-grid {
  display: grid;
  gap: var(--sf-space-m);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sf-review-shot {
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sf-review-shot__frame {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--sf-space-xs);
}
.sf-review-shot__frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sf-radius-sm);
}
.sf-review-shot__meta {
  padding: var(--sf-space-m);
  border-top: 1px solid var(--sf-border-warm);
}
.sf-review-shot__name { font-size: var(--sf-fs-sm); font-weight: var(--sf-fw-bold); color: var(--sf-text-primary); }
.sf-review-shot__sub  { font-size: var(--sf-fs-xs); color: var(--sf-text-muted); margin-top: var(--sf-space-3xs); }

/* -------------------------------------------------------------------------
   12. Consultation form
   ------------------------------------------------------------------------- */
.sf-form {
  max-width: 760px;
  margin-inline: auto;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-card-padding-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-l);
}
.sf-form__grid {
  display: grid;
  gap: var(--sf-space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .sf-form__grid { grid-template-columns: 1fr 1fr; }
  .sf-form__field--full { grid-column: 1 / -1; }
}
.sf-form__divider {
  font-size: var(--sf-fs-eyebrow);
  font-weight: var(--sf-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wider);
  color: var(--sf-primary);
  padding-top: var(--sf-space-m);
  border-top: 1px solid var(--sf-border-warm);
}
.sf-form__divider--first { border-top: 0; padding-top: 0; }

.sf-form__field { display: flex; flex-direction: column; gap: var(--sf-space-xs); }
.sf-form__field label {
  font-size: var(--sf-fs-eyebrow);
  font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-tracking-wide);
  color: var(--sf-text-muted);
  text-transform: uppercase;
}
.sf-form__field input,
.sf-form__field select,
.sf-form__field textarea {
  width: 100%;
  background: var(--sf-bg-dark);
  border: 1px solid var(--sf-border-warm);
  color: var(--sf-text-primary);
  padding: var(--sf-control-padding-y) var(--sf-control-padding-x);
  border-radius: var(--sf-radius-md);
  font: inherit;
  font-size: var(--sf-fs-sm);
  transition: border-color var(--sf-dur-base) var(--sf-ease);
}
.sf-form__field textarea { min-height: 6.5rem; resize: vertical; }
.sf-form__field input:focus,
.sf-form__field select:focus,
.sf-form__field textarea:focus {
  outline: none;
  border-color: var(--sf-primary);
}
.sf-form__hint {
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-muted);
  margin-top: var(--sf-space-3xs);
}
.sf-form__note {
  font-size: var(--sf-fs-sm);
  color: var(--sf-text-muted);
  line-height: var(--sf-lh-loose);
  padding: var(--sf-space-m);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
}

/* -------------------------------------------------------------------------
   13. Maintenance-calories calculator form
   ------------------------------------------------------------------------- */
.sf-calc {
  max-width: 720px;
  margin-inline: auto;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-card-padding-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-l);
}
.sf-calc__grid {
  display: grid;
  gap: var(--sf-space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .sf-calc__grid { grid-template-columns: 1fr 1fr; }
  .sf-calc__field--full { grid-column: 1 / -1; }
}
.sf-calc__field { display: flex; flex-direction: column; gap: var(--sf-space-xs); }
.sf-calc__field label {
  font-size: var(--sf-fs-eyebrow);
  font-weight: var(--sf-fw-semibold);
  letter-spacing: var(--sf-tracking-wide);
  color: var(--sf-text-muted);
  text-transform: uppercase;
}
.sf-calc__field input,
.sf-calc__field select {
  width: 100%;
  background: var(--sf-bg-dark);
  border: 1px solid var(--sf-border-warm);
  color: var(--sf-text-primary);
  padding: var(--sf-control-padding-y) var(--sf-control-padding-x);
  border-radius: var(--sf-radius-md);
  font: inherit;
  font-size: var(--sf-fs-sm);
  transition: border-color var(--sf-dur-base) var(--sf-ease);
}
.sf-calc__field input:focus,
.sf-calc__field select:focus {
  outline: none;
  border-color: var(--sf-primary);
}
.sf-calc__result {
  background: var(--sf-bg-dark);
  border: 1px solid var(--sf-primary-trans-30);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-card-padding);
  text-align: center;
}
.sf-calc__value {
  display: block;
  font-size: var(--sf-fs-h2);
  font-weight: var(--sf-fw-extra);
  color: var(--sf-primary);
  letter-spacing: var(--sf-tracking-tight);
}
.sf-calc__unit {
  display: block;
  margin-top: var(--sf-space-2xs);
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-sm);
}
.sf-calc__hint {
  margin-top: var(--sf-space-m);
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-muted);
  line-height: var(--sf-lh-base);
}
.sf-calc__formula {
  margin-top: var(--sf-space-m);
  padding: var(--sf-space-m);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-muted);
  line-height: var(--sf-lh-loose);
}
.sf-calc__formula strong { color: var(--sf-text-primary); }

/* -------------------------------------------------------------------------
   14. Resource-hero stats (tokenised version of the inline-styled
   stat strip on resources.html)
   ------------------------------------------------------------------------- */
.sf-hero-stats {
  display: flex;
  gap: var(--sf-space-m);
  align-items: stretch;
  margin-top: var(--sf-space-l);
}
.sf-hero-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3xs);
  padding-inline: var(--sf-space-m);
  border-right: 1px solid var(--sf-border);
}
.sf-hero-stats__item:first-child { padding-left: 0; }
.sf-hero-stats__item:last-child  { padding-right: 0; border-right: 0; }
.sf-hero-stats__value {
  font-size: var(--sf-fs-lg);
  font-weight: var(--sf-fw-extra);
  color: var(--sf-text-primary);
}
.sf-hero-stats__label {
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-muted);
  font-weight: var(--sf-fw-medium);
}

/* -------------------------------------------------------------------------
   15. 404 page hero
   ------------------------------------------------------------------------- */
.sf-error-hero {
  min-height: 60vh;
  padding-block: var(--sf-section-py-lg);
  text-align: center;
}
.sf-error-hero__title {
  font-size: var(--sf-fs-display);
  font-weight: var(--sf-fw-black);
  letter-spacing: var(--sf-tracking-tight);
  line-height: var(--sf-lh-tight);
  margin: var(--sf-space-m) 0;
}
.sf-error-hero__copy {
  font-size: var(--sf-fs-md);
  color: var(--sf-text-secondary);
  max-width: 30rem;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   16. About-page timeline (vertical, single-column)
   ------------------------------------------------------------------------- */
.sf-timeline {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
}
.sf-timeline__item {
  position: relative;
  padding-left: 3rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.sf-timeline__item:last-child {
  padding-bottom: 0;
}
.sf-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 1.25rem;
  bottom: 0;
  width: 2px;
  background: var(--sf-border-warm);
}
.sf-timeline__dot {
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--sf-primary);
  box-shadow: 0 0 0 4px rgba(236,19,19,0.18);
  z-index: 1;
}
.sf-timeline__year {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--sf-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sf-timeline__title {
  font-size: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
  font-weight: var(--sf-fw-black);
  color: var(--sf-text-primary);
  line-height: var(--sf-lh-tight);
  letter-spacing: var(--sf-tracking-tight);
  margin: 0.375rem 0 0;
}
.sf-timeline__body {
  color: var(--sf-text-secondary);
  font-size: var(--sf-fs-md);
  line-height: var(--sf-lh-loose);
  margin: 0.75rem 0 0;
  max-width: 60ch;
}
.sf-timeline__media {
  margin-top: 1.25rem;
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-l, 1rem);
  overflow: hidden;
  max-width: 28rem;
  background: var(--sf-bg-surface);
}
.sf-timeline__media img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   17. Event grid (3-up image strip)
   ------------------------------------------------------------------------- */
.sf-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-space-m);
}
@media (min-width: 768px) {
  .sf-event-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sf-space-l);
  }
}
.sf-event-card {
  margin: 0;
  border: 1px solid var(--sf-border-warm);
  border-radius: var(--sf-radius-l, 1rem);
  overflow: hidden;
  background: var(--sf-bg-surface);
  transition: transform var(--sf-motion-medium, 220ms) ease, border-color var(--sf-motion-medium, 220ms) ease;
}
.sf-event-card:hover {
  transform: translateY(-2px);
  border-color: rgba(236,19,19,0.4);
}
.sf-event-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 768px) {
  .sf-event-card img {
    aspect-ratio: 3 / 4;
  }
}

/* -------------------------------------------------------------------------
   18. Feature grid — 2x2 variant
   ------------------------------------------------------------------------- */
.sf-feature-grid--2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-space-l);
}
@media (min-width: 768px) {
  .sf-feature-grid--2x2 {
    grid-template-columns: 1fr 1fr;
  }
}
.sf-feature-grid--2x2 .sf-feature-box { width: 100%; }

/* -------------------------------------------------------------------------
   19. Transform card — readable body + weight pills + clickable button
   ------------------------------------------------------------------------- */
button.sf-transform-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  padding: 0;
  color: inherit;
}
button.sf-transform-card:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 3px;
}
button.sf-transform-card:hover .sf-transform-card__view,
button.sf-transform-card:focus-visible .sf-transform-card__view {
  color: var(--sf-primary);
}
button.sf-transform-card:hover .sf-transform-card__view .material-symbols-outlined,
button.sf-transform-card:focus-visible .sf-transform-card__view .material-symbols-outlined {
  transform: translate(2px, -2px);
}

.sf-transform-card__weight {
  position: absolute;
  z-index: 1;
  bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: #fff;
}
.sf-transform-card__image--before .sf-transform-card__weight {
  left: 0.5rem;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.sf-transform-card__image--after .sf-transform-card__weight {
  right: 0.5rem;
  background: rgba(236,19,19,0.9);
}

.sf-transform-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.sf-transform-card__name {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.sf-transform-card__context {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sf-primary);
}

.sf-transform-card__delta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
}
.sf-transform-card__delta strong {
  color: #fff;
  font-weight: 800;
}
.sf-transform-card__delta-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.8125rem;
}
.sf-transform-card__delta .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--sf-primary);
}

.sf-transform-card__view {
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--sf-border-warm);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 220ms ease;
}
.sf-transform-card__view .material-symbols-outlined {
  font-size: 1rem;
  transition: transform 220ms ease;
}

/* -------------------------------------------------------------------------
   20. Lightbox — before/after modal
   ------------------------------------------------------------------------- */
.sf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.sf-lightbox[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
}
.sf-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
}
.sf-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(64rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--sf-bg-surface);
  border: 1px solid var(--sf-border-warm);
  border-radius: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  transform: translateY(20px);
  transition: transform 220ms ease;
}
.sf-lightbox[aria-hidden="false"] .sf-lightbox__panel {
  transform: translateY(0);
}
.sf-lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: 1px solid var(--sf-border-warm);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color 220ms ease, color 220ms ease;
}
.sf-lightbox__close:hover {
  border-color: var(--sf-primary);
  color: var(--sf-primary);
}
.sf-lightbox__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .sf-lightbox__images { grid-template-columns: 1fr 1fr; }
}
.sf-lightbox__image {
  position: relative;
  margin: 0;
  border: 1px solid var(--sf-border-warm);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--sf-bg-dark);
}
.sf-lightbox__image img {
  width: 100%;
  display: block;
  max-height: 70vh;
  object-fit: contain;
}
.sf-lightbox__image--before img {
  filter: grayscale(0.3);
}
.sf-lightbox__image figcaption {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  right: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.sf-lightbox__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  color: #fff;
}
.sf-lightbox__image--after .sf-lightbox__label {
  background: rgba(236,19,19,0.9);
}
.sf-lightbox__weight {
  font-size: 0.875rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 0.25rem;
  letter-spacing: 0.04em;
}
.sf-lightbox__weight:empty {
  display: none;
}
.sf-lightbox__meta {
  margin-top: 1.25rem;
  text-align: center;
}
.sf-lightbox__name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.sf-lightbox__context {
  margin: 0.25rem 0 0;
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.sf-lightbox__context:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sf-lightbox, .sf-lightbox__panel { transition: none; }
}