/**
 * KATA Full Conversion V3 — scaffold CSS.
 * Namespace: .fc3-*  (zero overlap with .fc-* / .fc2-*)
 * Loaded conditionally on is_page_template('page-full-conversion-3.php').
 *
 * Fase B (this file): tokens, layout primitives, section bg variants, sticky
 * nav skeleton, reveal IO hook, stub typography. Real per-section styles
 * arrive in Fase C.
 */

/* ─── Page chrome ─────────────────────────────────────────────────────── */
.kata-fc3 {
  background: var(--c-dark, #292929);
  color: var(--c-white, #fff);
  font-family: var(--ff-body, "Outfit", system-ui, sans-serif);
}

/* .container — global helper used by V1 hero markup ported into FC V3.
 * V1 (full-conversion.css) defines this; main.css does not. Re-declare here
 * so the hero (and any other ported V1 components) stay within --maxw. */
.kata-fc3 .container {
  width: 100%;
  max-width: var(--maxw, 1480px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1.25rem, 3vw, 2.5rem));
}

/* Eyebrow color fix for FC V3 cream sections (Bruno 2026-05-08 follow-up).
 * Global .eyebrow defaults to var(--c-mute) which is rgba(255,255,255,.55) —
 * legible on dark, ILLEGIBLE on cream. Match the Home/Shop pattern of
 * scoping the color override per section/context. */
.fc3-section--cream .eyebrow        { color: var(--c-ink-mute, #555); }
.fc3-section--cream .eyebrow__index { color: var(--c-gold-secondary, #fbb715); }

/* ─── Sticky secondary nav ────────────────────────────────────────────── */
.fc3-stickynav {
  position: sticky;
  top: var(--nav-h, 78px);
  z-index: 99;                            /* below global nav 100 */
  background: rgba(28, 28, 28, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Sticky bar lives in DOM AFTER section 02 (#what-is-fc) per Bruno
 * 2026-05-08 — pure-CSS sticky behaviour. It scrolls into view naturally
 * with section 02 → 03 transition, then position: sticky pins it to the
 * top. No JS toggle, no flicker. */
.fc3-stickynav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 max(1rem, env(safe-area-inset-left));
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fc3-stickynav__list::-webkit-scrollbar { display: none; }
.fc3-stickynav__item {
  flex-shrink: 0;
}
.fc3-stickynav__link {
  display: inline-flex;
  align-items: center;
  padding: .85rem 1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease-out, border-color .18s ease-out;
  white-space: nowrap;
}
.fc3-stickynav__link:hover,
.fc3-stickynav__link:focus-visible {
  color: var(--c-white, #fff);
  outline: none;
}
.fc3-stickynav__link[aria-current="true"] {
  color: var(--c-gold, #fec53e);
  border-bottom-color: var(--c-gold, #fec53e);
}

@media (min-width: 700px) {
  .fc3-stickynav__list {
    justify-content: center;
    gap: .5rem;
    padding: 0 2rem;
  }
  .fc3-stickynav__link {
    padding: 1rem 1.25rem;
    font-size: .82rem;
  }
}

/* ─── Section primitives ──────────────────────────────────────────────── */
.fc3-section {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0;
  scroll-margin-top: calc(var(--nav-h, 78px) + 64px);    /* clear sticky nav on anchor jump */
}
.fc3-section--dark {
  background: var(--c-dark, #292929);
  color: var(--c-white, #fff);
}
.fc3-section--cream {
  background: var(--c-cream, #f3f1ec);
  color: var(--c-dark, #292929);
}
.fc3-section__inner {
  /* Aligned with global --maxw (1480px) used by Home + FC V1 .container */
  max-width: var(--maxw, 1480px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ─── Reveal-on-scroll (consumed by full-conversion-3.js IO) ──────────── */
.fc3-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.fc3-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stub typography (Fase B placeholders — replaced section-by-section in Fase C) ── */
.fc3-stub-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--c-gold, #fec53e);
  margin: 0 0 1rem;
}
.fc3-section--cream .fc3-stub-eyebrow {
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-stub-heading {
  font-family: var(--ff-display, "Bebas Neue", "Outfit", sans-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 1rem;
}
.fc3-stub-lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  margin: 0;
  opacity: .82;
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   §01 · Hero — Build Sequence (port of FC V1 §Hero, 2026-05-08)
   Sticky scroll-linked: 300vh desktop / 200vh mobile. Pinned inner track
   crossfades 4 stages + cycles 4 words in sync. JS state driver lives in
   full-conversion-3.js (ported from full-conversion.js).
   ═══════════════════════════════════════════════════════════════════════ */
.hero-fc {
  position: relative;
  height: 300vh;
  background: var(--c-black, #000);
}
.hero-fc__track {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.hero-fc__stack { position: absolute; inset: 0; }
.hero-fc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity .7s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
  will-change: opacity;
}
.hero-fc__img.is-active {
  opacity: 1;
  animation: heroFcKenBurns 8s ease-in-out forwards;
}
@keyframes heroFcKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

.hero-fc__overlay {
  position: absolute; inset: 0;
  /* Two-stack overlay: a base 40% darkening across the whole image so the
   * transparent global header always reads, plus a stronger bottom-up gradient
   * so the title/CTA stack reads against busy interior shots. Tuned for the
   * Bruno 2026-05-08 ask. */
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .35) 50%,
      rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .25));
  pointer-events: none;
}

.hero-fc__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-h, 78px) + 1rem);
  padding-bottom: clamp(2rem, 8vh, 6rem);
}

.hero-fc__overline {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold, #fec53e);
  font-weight: 500;
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}
.hero-fc__dot {
  width: 6px;
  height: 6px;
  background: var(--c-gold, #fec53e);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c-gold, #fec53e);
  animation: heroFcDot 1.6s ease-in-out infinite;
}
@keyframes heroFcDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.9); }
}

.hero-fc__title {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(3.8rem, 13vw, 13rem);
  line-height: .9;
  letter-spacing: .005em;
  color: var(--c-white, #fff);
  max-width: 16ch;
}
/* Laptop band (1200–1579px CSS, e.g. a 1920px screen at 125–150% scaling): the
   13vw title (~200px) is oversized on the smaller viewport — scale it down so
   the hero feels proportional. Full 1920+ desktop (≥1580) keeps the big size. */
@media (min-width: 1200px) and (max-width: 1579px) {
  .hero-fc__title { font-size: clamp(4rem, 9.7vw, 10rem); }
}
.hero-fc__line { display: block; }
.hero-fc__line--cycle {
  position: relative;
  /* Reserve vertical space equal to tallest word so layout never jumps. */
  min-height: 1.05em;
}
.hero-fc__word {
  display: block;
  color: var(--c-gold, #fec53e);
  opacity: 0;
  transform: translateY(.25em);
  transition: opacity .6s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              transform .6s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.hero-fc__word.is-active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}
.hero-fc__word:not(.is-active) {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-fc__ctas {
  margin-top: clamp(2rem, 5vh, 4rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-fc__progress {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  z-index: 2;
}
.hero-fc__tick {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, .25);
  transition: background .4s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              width .4s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.hero-fc__tick.is-active {
  background: var(--c-gold, #fec53e);
  width: 2px;
}

@media (max-width: 900px) {
  /* Shorter scroll distance on mobile (200vh vs 300vh) — same sticky
     scroll-linked experience, less thumb travel to cycle stages. */
  .hero-fc { height: 200vh; }
  .hero-fc__title { font-size: clamp(3rem, 14vw, 8rem); max-width: 100%; }
  .hero-fc__progress { right: var(--gutter, 1rem); bottom: var(--gutter, 1rem); }
  /* Disable Ken Burns on mobile — subtle scale triggers layout work
     during scroll and contributes to perceived jank. */
  .hero-fc__img.is-active { animation: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fc { height: auto; }
  .hero-fc__track { position: relative; height: 100svh; }
  .hero-fc__img.is-active { animation: none; transform: none; }
  .hero-fc__dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §04+§05 Pack 1 spread (cream)
   §06+§07 Pack 2 spread (dark)
   2-3 sections per pack share bg color → editorial spread feel.
   Same .fc3-pack base; cream/dark inherit from .fc3-section--{cream|dark}.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tight spacing between overview + details to make them feel like one block */
.fc3-pack--overview { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.fc3-pack--details  { padding-top:    clamp(1.5rem, 4vw, 2.5rem); }

.fc3-pack__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* ─── Pack header (overview) ──────────────────────────────────────────── */
.fc3-pack__header {
  max-width: 980px;
}
.fc3-pack__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
}
.fc3-pack__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: .95;
  letter-spacing: .015em;
  margin: 0 0 1rem;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
}
.fc3-pack__heading-num {
  color: var(--c-gold-secondary, #fbb715);
  font-size: .72em;
}
.fc3-section--dark .fc3-pack__heading-num {
  color: var(--c-gold, #fec53e);
}
.fc3-pack__tagline {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  opacity: .82;
  max-width: 60ch;
}

.fc3-pack__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: 0;
  border-color: rgba(0, 0, 0, .15);
}
.fc3-section--dark .fc3-pack__price {
  border-color: rgba(255, 255, 255, .18);
}
.fc3-pack__price-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}
.fc3-pack__price-value {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-section--dark .fc3-pack__price-value {
  color: var(--c-gold, #fec53e);
}
.fc3-pack__price-meta {
  font-size: .78rem;
  opacity: .7;
  flex-basis: 100%;
}
@media (min-width: 700px) {
  .fc3-pack__price-meta { flex-basis: auto; }
}

/* ─── Hero photos (overview) ──────────────────────────────────────────── */
.fc3-pack__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 700px) {
  .fc3-pack__photos {
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    /* Bruno 2026-05-09: equal heights L/R. The lead drives row height via
       its 5/4 aspect-ratio; the secondary stretches to 100% of that row
       so both photos land the exact same pixel height regardless of the
       1.4fr/1fr column split. */
    align-items: stretch;
  }
}
.fc3-pack__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  margin: 0;
  overflow: hidden;
}
.fc3-pack__photo--lead { aspect-ratio: 16 / 10; }
@media (min-width: 700px) {
  .fc3-pack__photo--lead       { aspect-ratio: 5 / 4; }
  .fc3-pack__photo--secondary  {
    aspect-ratio: auto;
    height: 100%;
  }
}
.fc3-pack__photo--placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, rgba(254, 197, 62, .14) 0%, rgba(28, 28, 28, .04) 100%);
}
.fc3-section--dark .fc3-pack__photo--placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, rgba(254, 197, 62, .12) 0%, rgba(255, 255, 255, .04) 100%);
}
.fc3-pack__photo-stub {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

/* ─── Details grid (specs + visuals) ──────────────────────────────────── */
.fc3-pack__details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .fc3-pack__details-grid {
    grid-template-columns: 1.1fr 1fr;
    /* 2026-06-09: `start` — the visuals column is now driven by fixed 4:3
       aspect ratios (lead + 2 thumbs); stretching it to match the specs
       column would distort the photos. */
    align-items: start;
  }
  /* 2026-06-09 (Bruno): centre the photo column vertically against the taller
     specs column instead of pinning it to the top. */
  .fc3-pack__visuals { align-self: center; }
}

/* Specs side: small eyebrow + display heading + categorised cards */
.fc3-pack__specs-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-section--dark .fc3-pack__specs-eyebrow {
  color: var(--c-gold, #fec53e);
}
.fc3-pack__specs-heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  line-height: 1.05;
}
.fc3-pack__spec-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}
@media (min-width: 700px) { .fc3-pack__spec-cards { grid-template-columns: repeat(2, 1fr); } }
.fc3-pack__spec-card {
  position: relative;
  padding: 1.2rem 1.1rem 1.1rem;
  background: rgba(0, 0, 0, .03);
  border: 1px solid rgba(0, 0, 0, .08);
  border-left: 3px solid var(--c-gold-secondary, #fbb715);
  transition: transform .18s ease-out, border-color .18s ease-out;
  transition-delay: var(--fc3-stagger, 0ms);
}
.fc3-section--dark .fc3-pack__spec-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  border-left-color: var(--c-gold, #fec53e);
}
.fc3-pack__spec-card:hover {
  transform: translateY(-2px);
  border-color: rgba(254, 197, 62, .55);
}
.fc3-pack__spec-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}
.fc3-pack__spec-card-icon {
  color: var(--c-gold-secondary, #fbb715);
  flex-shrink: 0;
}
.fc3-section--dark .fc3-pack__spec-card-icon {
  color: var(--c-gold, #fec53e);
}
.fc3-pack__spec-card-title {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  flex: 1;
}
.fc3-pack__spec-card-count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  background: rgba(0, 0, 0, .06);
  padding: .15rem .5rem;
  border-radius: var(--radius-pill);
}
.fc3-section--dark .fc3-pack__spec-card-count {
  background: rgba(255, 255, 255, .08);
}
.fc3-pack__spec-card-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fc3-pack__spec-card-items li {
  font-size: .9rem;
  line-height: 1.45;
  position: relative;
  padding-left: 1rem;
  opacity: .85;
}
.fc3-pack__spec-card-items li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 1px;
  background: currentColor;
  opacity: .5;
}
.fc3-pack__note {
  margin-top: 1.25rem;
  font-size: .82rem;
  font-style: italic;
  opacity: .6;
}

/* ─── Visuals grid — magazine spread (2026-05-08 pass 3, bulletproof) ─────
   Mobile: 4 stacked 16:9 photos. Desktop ≥700px: lead is a 21:9 BANNER
   spanning full width across the top + 3 equal 4:3 thumbs in a row below.
   Simple structure, no aspect-ratio on the container, no row-span trickery,
   `!important` on the desktop overrides because Bruno reported earlier
   pass-2 magazine layout was being overridden by something we couldn't
   reproduce locally. */
.fc3-pack__visuals {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
.fc3-pack__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  margin: 0;
  overflow: hidden;
}
/* 2026-06-09 (Bruno): lead photo is now a 4:3 hero with exactly 2 thumbs
   beneath it (was a 21:9 banner + 3 thumbs). */
.fc3-pack__visual--lead {
  aspect-ratio: 4 / 3;
}
@media (min-width: 700px) {
  .fc3-pack__visuals {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: .65rem !important;
  }
  .fc3-pack__visuals > .fc3-pack__visual {
    aspect-ratio: 4 / 3 !important;   /* the 2 accompanying thumbs */
    height: auto !important;
  }
  .fc3-pack__visuals > .fc3-pack__visual--lead {
    grid-column: 1 / -1 !important;
    aspect-ratio: 4 / 3 !important;   /* full-width lead */
  }
}
.fc3-pack__visual--placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .04) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, rgba(254, 197, 62, .1) 0%, rgba(28, 28, 28, .04) 100%);
}
.fc3-section--dark .fc3-pack__visual--placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, rgba(254, 197, 62, .08) 0%, rgba(255, 255, 255, .03) 100%);
}
.fc3-pack__visual-stub {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  text-align: center;
  padding: .5rem;
}

/* ─── Pack CTAs (dual: Go for it / Contact Kata Team) wrapped in strip ── */
.fc3-pack__cta-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.fc3-section--dark .fc3-pack__cta-strip {
  border-top-color: rgba(255, 255, 255, .12);
}
@media (min-width: 700px) {
  .fc3-pack__cta-strip {
    grid-template-columns: 1.4fr auto;
    gap: 2rem;
  }
}
.fc3-pack__cta-rationale {
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
  opacity: .72;
  max-width: 56ch;
}
.fc3-pack__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
}
.fc3-pack__cta-primary {
  display: inline-flex; align-items: center; gap: .55rem;
}
.fc3-pack__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: inherit;
  text-decoration: none;
  transition: background .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
.fc3-pack__cta-secondary:hover,
.fc3-pack__cta-secondary:focus-visible {
  background: var(--c-dark, #292929);
  color: var(--c-white, #fff);
  border-color: var(--c-dark, #292929);
  outline: none;
}
.fc3-section--dark .fc3-pack__cta-secondary:hover,
.fc3-section--dark .fc3-pack__cta-secondary:focus-visible {
  background: var(--c-white, #fff);
  color: var(--c-dark, #292929);
  border-color: var(--c-white, #fff);
}

/* ─── 3-feature highlight strip (Pack overview) ─────────────────────────
   Relocated from old §03 Discovery: 3 axes (trip length / power / people)
   answered for THIS pack. Sits between header and photos. */
.fc3-pack__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.fc3-section--dark .fc3-pack__highlights {
  border-top-color: rgba(255, 255, 255, .12);
  border-bottom-color: rgba(255, 255, 255, .12);
}
@media (min-width: 700px) {
  .fc3-pack__highlights {
    grid-template-columns: repeat(3, 1fr);
  }
}
.fc3-pack__highlight {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon label meta"
    "icon value value";
  align-items: center;
  column-gap: 1rem;
  row-gap: .15rem;
  padding: 1.4rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  transition-delay: var(--fc3-stagger, 0ms);
}
.fc3-section--dark .fc3-pack__highlight {
  border-bottom-color: rgba(255, 255, 255, .08);
}
.fc3-pack__highlight:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .fc3-pack__highlight {
    border-bottom: 0;
    border-right: 1px solid rgba(0, 0, 0, .08);
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon label"
      "icon value"
      "icon meta";
    column-gap: 1.1rem;
  }
  .fc3-section--dark .fc3-pack__highlight {
    border-right-color: rgba(255, 255, 255, .08);
  }
  .fc3-pack__highlight:last-child { border-right: 0; }
}
.fc3-pack__highlight-icon {
  grid-area: icon;
  color: var(--c-gold-secondary, #fbb715);
  flex-shrink: 0;
}
.fc3-section--dark .fc3-pack__highlight-icon {
  color: var(--c-gold, #fec53e);
}
.fc3-pack__highlight-label {
  grid-area: label;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
}
.fc3-pack__highlight-value {
  grid-area: value;
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.05;
}
.fc3-pack__highlight-meta {
  grid-area: meta;
  font-size: .78rem;
  line-height: 1.35;
  opacity: .65;
  text-align: right;
}
@media (min-width: 700px) {
  .fc3-pack__highlight-meta {
    text-align: left;
    font-size: .82rem;
    margin-top: .15rem;
  }
}

/* ─── Lead photo caption (Pack overview hero photo) ─────────────────── */
.fc3-pack__photo-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: .35rem .7rem;
  background: rgba(0, 0, 0, .55);
  color: var(--c-white, #fff);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════════════
   §08 · Compare Packs (cream)
   Desktop: 4-col semantic table.  Mobile: each row stacks as labelled card.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-compare__header {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.fc3-compare__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
}
.fc3-compare__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.fc3-compare__heading em {
  font-style: normal;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-compare__lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.5;
  margin: 0;
  opacity: .75;
}

.fc3-compare__table-wrap {
  border: 1px solid rgba(0, 0, 0, .12);
  background: var(--c-white, #fff);
}

.fc3-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.fc3-compare__th,
.fc3-compare__cell {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.1rem;
}
.fc3-compare__th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .04);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  color: var(--c-dark, #292929);
}
.fc3-compare__th--p1 { background: rgba(254, 197, 62, .12); }
.fc3-compare__th--p2 { background: rgba(254, 197, 62, .22); }

.fc3-compare__row + .fc3-compare__row .fc3-compare__cell {
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.fc3-compare__cell--feature {
  font-weight: 600;
  width: 22%;
}
.fc3-compare__cell--p1,
.fc3-compare__cell--p2 {
  width: 26%;
}
.fc3-compare__cell--upgrade {
  width: 26%;
  font-size: .85rem;
  opacity: .75;
  font-style: italic;
}

.fc3-compare__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: -.3em;
}
.fc3-compare__icon-wrap--yes {
  background: var(--c-gold-secondary, #fbb715);
  color: var(--c-white, #fff);
}
/* --differ: applied to Pack 1 cell when both packs have content but the
 * wording differs. Outline gold on white — visually weaker than P2's filled
 * gold to communicate "P2 is the more complete tier" at a glance. */
.fc3-compare__icon-wrap--differ {
  background: var(--c-white, #fff);
  color: var(--c-gold-secondary, #fbb715);
  box-shadow: inset 0 0 0 1.5px var(--c-gold-secondary, #fbb715);
}
.fc3-compare__icon-wrap--no {
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .55);
}
.fc3-compare__cell-text--muted {
  opacity: .5;
  font-size: .85em;
}

/* ─── Mobile: stacked rows ─────────────────────────────────────────────
   Below 760px: each <tr> becomes a card. <th scope="row"> is the card
   title; <td>s use data-label to inline their column label as a left rail.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fc3-compare__table-wrap {
    border: 0;
    background: transparent;
  }
  .fc3-compare__table,
  .fc3-compare__table thead,
  .fc3-compare__table tbody,
  .fc3-compare__table tr,
  .fc3-compare__table th,
  .fc3-compare__table td {
    display: block;
    width: 100% !important;
  }
  .fc3-compare__table thead {
    /* hidden but accessible to AT */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fc3-compare__row {
    background: var(--c-white, #fff);
    border: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: .85rem;
    padding: 0;
  }
  .fc3-compare__cell--feature {
    background: rgba(254, 197, 62, .14);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: .85rem 1rem;
  }
  .fc3-compare__row + .fc3-compare__row .fc3-compare__cell {
    border-top: 0;
  }
  .fc3-compare__cell--p1,
  .fc3-compare__cell--p2,
  .fc3-compare__cell--upgrade {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .85rem;
    align-items: start;
    padding: .75rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-style: normal;
  }
  .fc3-compare__cell--p1::before,
  .fc3-compare__cell--p2::before,
  .fc3-compare__cell--upgrade::before {
    content: attr(data-label);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
    padding-top: .15rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §13 · Book Consultation form (dark)
   Multi-step (Van / Build / You) + interest banner + success/error states.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-book__header {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.fc3-book__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
  color: var(--c-gold, #fec53e);
}
.fc3-book__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .95;
  letter-spacing: .015em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.fc3-book__heading em {
  font-style: normal;
  color: var(--c-gold, #fec53e);
}
.fc3-book__subtitle {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  margin: 0;
  opacity: .65;
}

.fc3-book__form {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.fc3-book__progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.fc3-book__progress-seg {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease-out;
}
.fc3-book__progress-seg.is-active {
  border-bottom-color: var(--c-gold, #fec53e);
}
.fc3-book__progress-seg.is-complete {
  border-bottom-color: rgba(254, 197, 62, .55);
}
.fc3-book__progress-num {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: var(--c-gold, #fec53e);
}
.fc3-book__progress-label {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .82;
}

.fc3-book__interest-banner {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  background: rgba(254, 197, 62, .14);
  border: 1px solid rgba(254, 197, 62, .35);
  margin: 0 0 1.5rem;
  font-size: .88rem;
  color: var(--c-white, #fff);
}
.fc3-book__interest-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-gold, #fec53e);
  box-shadow: 0 0 6px var(--c-gold, #fec53e);
}

.fc3-book__step {
  border: 0;
  padding: 0;
  margin: 0;
}
.fc3-book__step-legend {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--c-white, #fff);
}

.fc3-book__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) {
  .fc3-book__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}
.fc3-book__field,
.fc3-book__block {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.fc3-book__field--full {
  grid-column: 1 / -1;
}
.fc3-book__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.fc3-book__label-opt {
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
  opacity: .55;
}
.fc3-book__req {
  color: var(--c-gold, #fec53e);
  font-weight: 700;
}
.fc3-book__form input[type="text"],
.fc3-book__form input[type="email"],
.fc3-book__form input[type="tel"],
.fc3-book__form select,
.fc3-book__form textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: rgba(28, 28, 28, .8);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--c-white, #fff);
  font-family: inherit;
  font-size: .95rem;
  border-radius: 0;
  transition: border-color .18s ease-out, background .18s ease-out;
}
.fc3-book__form input:focus,
.fc3-book__form select:focus,
.fc3-book__form textarea:focus {
  outline: none;
  border-color: var(--c-gold, #fec53e);
  background: rgba(28, 28, 28, 1);
}
.fc3-book__form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fec53e' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - .85rem) center;
  padding-right: 2.25rem;
}
.fc3-book__field--invalid input,
.fc3-book__field--invalid select,
.fc3-book__field--invalid textarea {
  border-color: #ff6b6b;
}

.fc3-book__checks,
.fc3-book__radios {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .55rem;
}
.fc3-book__check,
.fc3-book__radio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.fc3-book__check:hover,
.fc3-book__radio:hover {
  border-color: rgba(254, 197, 62, .55);
}
.fc3-book__check input,
.fc3-book__radio input {
  accent-color: var(--c-gold, #fec53e);
}
.fc3-book__check:has(input:checked),
.fc3-book__radio:has(input:checked) {
  background: rgba(254, 197, 62, .14);
  border-color: var(--c-gold, #fec53e);
}

.fc3-book__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.fc3-book__actions [data-fc3-form-back] {
  margin-right: auto;
}

.fc3-book__success {
  text-align: center;
  padding: 2rem 1rem;
}
.fc3-book__success-heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .04em;
  margin: 1.25rem 0 .5rem;
  color: var(--c-gold, #fec53e);
  text-transform: uppercase;
}
.fc3-book__success-body {
  font-size: 1.05rem;
  margin: 0 0 .55rem;
}
.fc3-book__success-meta {
  font-size: .82rem;
  opacity: .65;
  margin: 0;
}
.fc3-book__check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: fc3-check-draw 0.55s ease-out 0.15s forwards;
}
@keyframes fc3-check-draw {
  to { stroke-dashoffset: 0; }
}

.fc3-book__error {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: rgba(255, 80, 80, .12);
  border: 1px solid rgba(255, 80, 80, .4);
  color: #ffb4b4;
  font-size: .9rem;
}

/* Alt contact card below form */
.fc3-book__alt {
  max-width: 760px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.fc3-book__alt-lede {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .65;
  margin: 0 0 1rem;
}
.fc3-book__alt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .fc3-book__alt-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.fc3-book__alt-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  color: inherit;
  text-decoration: none;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.fc3-book__alt-item:hover,
.fc3-book__alt-item:focus-visible {
  background: rgba(254, 197, 62, .08);
  border-color: rgba(254, 197, 62, .55);
  outline: none;
}
.fc3-book__alt-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}
.fc3-book__alt-value {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 1.4rem;
  letter-spacing: .03em;
  color: var(--c-gold, #fec53e);
}

/* ═══════════════════════════════════════════════════════════════════════
   §09 · Build my Own (dark) — custom path callout
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-buildown__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .fc3-buildown__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.fc3-buildown__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
  color: var(--c-gold, #fec53e);
}
.fc3-buildown__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: .015em;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}
.fc3-buildown__heading em {
  font-style: normal;
  color: var(--c-gold, #fec53e);
}
.fc3-buildown__lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  opacity: .82;
  max-width: 56ch;
}
.fc3-buildown__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.fc3-buildown__bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  line-height: 1.45;
  opacity: .88;
}
.fc3-buildown__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 1px;
  background: var(--c-gold, #fec53e);
}
.fc3-buildown__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.fc3-buildown__cta-primary {
  display: inline-flex; align-items: center; gap: .55rem;
}
.fc3-buildown__cta-secondary {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: .15rem;
  transition: color .18s ease-out, border-color .18s ease-out;
}
.fc3-buildown__cta-secondary:hover,
.fc3-buildown__cta-secondary:focus-visible {
  color: var(--c-gold, #fec53e);
  border-color: var(--c-gold, #fec53e);
  outline: none;
}
.fc3-buildown__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  margin: 0;
  overflow: hidden;
}
@media (min-width: 900px) {
  .fc3-buildown__photo { aspect-ratio: 4 / 5; }
}
.fc3-buildown__photo--placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, rgba(254, 197, 62, .14) 0%, rgba(255, 255, 255, .03) 100%);
}
.fc3-buildown__photo-stub {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  text-align: center;
  padding: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   §10 · Add-ons (cream) — port of FC V1 upgrades-fc__grid (4 cards, Pop-Top
   flagship). Bg flipped from V1's dark to cream (Bruno 2026-05-08).
   Namespace fc3-upgrades__* + fc3-upgrade-card__* (zero overlap with V1).
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-upgrades__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.fc3-upgrades__eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-upgrades__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: .98;
  letter-spacing: .005em;
  margin: 0 0 1.2rem;
  text-transform: uppercase;
}
.fc3-upgrades__heading em {
  font-style: normal;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-upgrades__lede {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.55;
  opacity: .82;
}

/* 2026-06-11: 5 add-on tiles (Pop-Top, Fiamma, Climate, Mood, Shower) — was 4.
   5-across on wide desktop (intentional), 3+2 on laptop, 2-col tablet, 1-col mobile. */
.fc3-upgrades__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 1100px) { .fc3-upgrades__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .fc3-upgrades__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .fc3-upgrades__grid { grid-template-columns: 1fr; } }

.fc3-upgrade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .4s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              border-color .4s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
  text-decoration: none;
  color: inherit;
}
.fc3-upgrade-card:hover {
  transform: translateY(-3px);
  border-color: rgba(254, 197, 62, .65);
}
.fc3-upgrade-card--flagship { border-color: var(--c-gold-secondary, #fbb715); }
.fc3-upgrade-card__badge {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  padding: .3em .8em;
  background: var(--c-gold-secondary, #fbb715);
  color: var(--c-white, #fff);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius-pill);
}
.fc3-upgrade-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(0, 0, 0, .04);
}
.fc3-upgrade-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.fc3-upgrade-card:hover .fc3-upgrade-card__media img { transform: scale(1.04); }
.fc3-upgrade-card__body {
  padding: 1.3rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.fc3-upgrade-card__price {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold-secondary, #fbb715);
  font-weight: 600;
  margin: 0;
}
.fc3-upgrade-card__name {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1;
  letter-spacing: .005em;
  margin-top: .15rem;
  margin-bottom: 0;
  color: var(--c-dark, #292929);
}
.fc3-upgrade-card__meta {
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .65);
  margin: .3rem 0 0;
}
.fc3-upgrade-card__cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-gold-secondary, #fbb715);
  font-weight: 600;
  transition: color .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.fc3-upgrade-card:hover .fc3-upgrade-card__cta { color: var(--c-dark, #292929); }
.fc3-upgrade-card__cta--muted { color: rgba(0, 0, 0, .55); font-weight: 500; }

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fc3-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fc3-stickynav__link {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §02 · What is Full Conversion (cream)
   Editorial header centred · 3 numbered pillars row · closing line + anchor.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-whatis__header {
  max-width: 920px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.fc3-whatis__eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-whatis__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 5.5rem);
  line-height: .98;
  letter-spacing: .015em;
  margin: 0 0 1.6rem;
  text-transform: uppercase;
}
.fc3-whatis__heading em {
  font-style: normal;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-whatis__lede {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  opacity: .82;
}

.fc3-whatis__pillars {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 720px)  { .fc3-whatis__pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fc3-whatis__pillars { grid-template-columns: repeat(3, 1fr); } }

.fc3-whatis__pillar {
  position: relative;
  padding: clamp(1.6rem, 2.5vw, 2.2rem) clamp(1.4rem, 2.5vw, 2rem);
  background: var(--c-white, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  border-top: 2px solid var(--c-gold-secondary, #fbb715);
  transition-delay: var(--fc3-stagger, 0ms);
}
.fc3-whatis__pillar-num {
  display: inline-block;
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 2.2rem;
  letter-spacing: .04em;
  color: var(--c-gold-secondary, #fbb715);
  line-height: 1;
  margin-bottom: .8rem;
}
.fc3-whatis__pillar-title {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  line-height: 1.05;
}
.fc3-whatis__pillar-body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .82;
}

.fc3-whatis__footer {
  text-align: center;
  font-size: .92rem;
  letter-spacing: .02em;
  margin: 0;
  opacity: .68;
}
.fc3-whatis__footer-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .6rem;
  color: var(--c-gold-secondary, #fbb715);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .1rem;
  transition: color .18s ease-out;
}
.fc3-whatis__footer-link:hover,
.fc3-whatis__footer-link:focus-visible {
  color: var(--c-dark, #292929);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §03 · The Kata Process (dark) — port of FC V2 §03 process.
   2-col on desktop with sticky aside (title + lede + avg timeline).
   Mobile: stacks. Numbered <ol> on the right with stagger reveal.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .fc3-process__grid {
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.fc3-process__rail {
  /* Sticky desktop only · mobile flows naturally */
}
@media (min-width: 900px) {
  .fc3-process__rail {
    position: sticky;
    top: calc(var(--nav-h, 78px) + 80px);
  }
}
.fc3-process__eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--c-gold, #fec53e);
}
.fc3-process__h {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: .015em;
  margin: 0 0 1.4rem;
  text-transform: uppercase;
}
.fc3-process__h em {
  font-style: normal;
  color: var(--c-gold, #fec53e);
}
.fc3-process__lede {
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  margin: 0 0 1.6rem;
  opacity: .82;
  max-width: 36ch;
}
.fc3-process__total {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}
.fc3-process__total-v {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 1.7rem;
  letter-spacing: .03em;
  color: var(--c-gold, #fec53e);
  text-transform: none;
  letter-spacing: .04em;
}

.fc3-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: fc3-process;
}
.fc3-process__step {
  position: relative;
  padding: 1.6rem 0 1.7rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.2rem;
  transition-delay: var(--fc3-stagger, 0ms);
}
.fc3-process__step:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fc3-process__num {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: 2.2rem;
  letter-spacing: .04em;
  color: var(--c-gold, #fec53e);
  line-height: 1;
}
.fc3-process__head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .55rem;
  grid-column: 2;
}
.fc3-process__title {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.fc3-process__meta {
  font-size: .78rem;
  letter-spacing: .04em;
  margin: 0;
  opacity: .55;
  text-transform: uppercase;
}
.fc3-process__body {
  grid-column: 2;
  font-size: .96rem;
  line-height: 1.55;
  margin: 0;
  opacity: .82;
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   §11 · Real builds — port of FC V1 §09 builds-fc carousel (dark).
   Class names .builds-fc__* match V1 markup verbatim — V3 page bundle is
   the only consumer here so there is no overlap with V1 page CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.builds-fc {
  background: var(--c-black, #000);
  padding: clamp(4rem, 10vh, 7rem) 0 0;
}
.builds-fc__head {
  text-align: center;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.builds-fc__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: .98;
  color: var(--c-white, #fff);
  margin-top: 1rem;
  letter-spacing: .005em;
}
.builds-fc__heading em { color: var(--c-gold, #fec53e); font-style: normal; }

.builds-fc__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  background: var(--c-dark-2, #1c1c1c);
  overflow: hidden;
  outline: none;
  cursor: grab;
}
.builds-fc__stage:active { cursor: grabbing; }

.builds-fc__slides { position: absolute; inset: 0; }
.builds-fc__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
  pointer-events: none;
}
.builds-fc__slide.is-active { opacity: 1; pointer-events: auto; }
.builds-fc__slide[hidden]   { display: block; } /* opacity-controlled; override [hidden] default */

.builds-fc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.builds-fc__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(50%, 560px);
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--c-white, #fff);
  background: linear-gradient(to right, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 70%, transparent 100%);
  z-index: 2;
}
.builds-fc__tag {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold, #fec53e);
  font-weight: 600;
  margin-bottom: .6rem;
}
.builds-fc__title {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: .95;
  letter-spacing: .005em;
  margin-bottom: .8rem;
}
.builds-fc__meta {
  font-size: .82rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 1rem;
}
.builds-fc__quote {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 32em;
  margin-bottom: 1rem;
}

.builds-fc__nav {
  position: absolute;
  right: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
  pointer-events: none;
}
.builds-fc__stage:hover        .builds-fc__nav,
.builds-fc__stage:focus-within .builds-fc__nav {
  opacity: 1;
  pointer-events: auto;
}
.builds-fc__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .5);
  color: var(--c-white, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              border-color .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.builds-fc__nav-btn:hover,
.builds-fc__nav-btn:focus-visible {
  background: var(--c-gold, #fec53e);
  border-color: var(--c-gold, #fec53e);
  color: var(--c-black, #000);
  outline: none;
}

.builds-fc__thumbs {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 2rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-end;
}
.builds-fc__count {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--c-white, #fff);
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .25em .7em;
  border-radius: var(--radius-pill);
}
.builds-fc__count-current { color: var(--c-gold, #fec53e); font-weight: 700; }
.builds-fc__thumb-strip {
  display: flex;
  gap: .4rem;
}
.builds-fc__thumb {
  width: 56px;
  height: 42px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              border-color .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
              transform .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
  background: var(--c-dark-2, #1c1c1c);
}
.builds-fc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.builds-fc__thumb:hover,
.builds-fc__thumb:focus-visible {
  opacity: 1;
  outline: none;
  transform: translateY(-2px);
}
.builds-fc__thumb.is-active { border-color: var(--c-gold, #fec53e); opacity: 1; }

.builds-fc__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .08);
  z-index: 4;
}
.builds-fc__progress-fill {
  height: 100%;
  width: 0;
  background: var(--c-gold, #fec53e);
  transition: width linear;
  transform-origin: left center;
}

@media (max-width: 720px) {
  .builds-fc__stage { aspect-ratio: 3/4; max-height: none; }
  .builds-fc__caption {
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%);
    padding: 1.25rem;
  }
  .builds-fc__nav { display: none; }
  .builds-fc__thumbs       { top: .75rem; right: .5rem; bottom: auto; }
  .builds-fc__thumb-strip  { display: none; }
  .builds-fc__count        { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .builds-fc__slide         { transition: none; }
  .builds-fc__progress-fill { transition: none; width: 100%; }
  .builds-fc__nav           { opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §14 · FAQ (cream) — native <details>
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-faq__header {
  max-width: 760px;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.fc3-faq__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
}
.fc3-faq__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.fc3-faq__heading em {
  font-style: normal;
  color: var(--c-gold-secondary, #fbb715);
}
.fc3-faq__lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.5;
  margin: 0;
  opacity: .75;
  max-width: 56ch;
}
.fc3-faq__list {
  background: var(--c-white, #fff);
  border: 1px solid rgba(0, 0, 0, .1);
}
.fc3-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.fc3-faq__item:last-child { border-bottom: 0; }
.fc3-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
}
/* Cross-browser marker hide — both ::-webkit-details-marker (Safari)
   and ::marker (Chromium/Firefox). Memory: feedback_subagent_two_stage_review. */
.fc3-faq__q::-webkit-details-marker { display: none; }
.fc3-faq__q::marker                  { display: none; content: ''; }
.fc3-faq__q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
  transition: transform .25s ease-out, background .15s ease-out, border-color .15s ease-out;
}
.fc3-faq__item[open] .fc3-faq__q-icon {
  transform: rotate(180deg);
  background: var(--c-gold-secondary, #fbb715);
  border-color: var(--c-gold-secondary, #fbb715);
  color: var(--c-white, #fff);
}
.fc3-faq__a {
  padding: 0 1.25rem 1.25rem;
}
.fc3-faq__a p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .82;
}

/* ═══════════════════════════════════════════════════════════════════════
   §12 · Workshop — port of V1 §12 finale.fc with .fc3-workshop__* namespace
   Scroll-driven parallax bg + dark overlay + 4-cell contact grid.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-workshop {
  position: relative;
  background: var(--c-black, #1c1c1c);
  color: var(--c-white, #fff);
  padding: clamp(5rem, 14vh, 10rem) 0;
  min-height: 70vh;
  overflow: hidden;
  isolation: isolate;
}
.fc3-workshop__bg {
  position: absolute;
  inset: 0;
  background-image: url("https://imagedelivery.net/2FZMMlbg4zd33V8NSnMNRA/17ac6c8a-66e0-4dda-3490-089ca5524200/w=2400,h=1200");
  background-size: cover;
  background-position: center;
  filter: brightness(.35) saturate(.85);
  z-index: -2;
  animation: fc3WorkshopParallax linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
@keyframes fc3WorkshopParallax {
  from { transform: translateY(-6%) scale(1.06); }
  to   { transform: translateY(6%)  scale(1.06); }
}
/* Disable scroll-driven parallax on mobile (mid/low-end compositor pressure) */
@media (max-width: 900px) {
  .fc3-workshop__bg { animation: none; transform: scale(1.06); }
}
.fc3-workshop__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.75) 0%, rgba(8,8,8,.55) 50%, rgba(8,8,8,.85) 100%);
  z-index: -1;
}
.fc3-workshop__inner { position: relative; }
.fc3-workshop__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.fc3-workshop__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
  opacity: .55;
  color: var(--c-gold, #fec53e);
}
.fc3-workshop__heading {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .95;
  margin: 0 0 1.25rem;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.fc3-workshop__heading em {
  font-style: normal;
  color: var(--c-gold, #fec53e);
}
.fc3-workshop__lede {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .75);
  max-width: 28em;
  margin: 0 auto;
}

.fc3-workshop__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
@media (min-width: 700px) {
  .fc3-workshop__grid { grid-template-columns: repeat(4, 1fr); }
}
.fc3-workshop__item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}
.fc3-workshop__label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold, #fec53e);
  font-weight: 600;
}
.fc3-workshop__value {
  font-family: var(--ff-display, "Bebas Neue", sans-serif);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--c-white, #fff);
  letter-spacing: .02em;
  line-height: 1.3;
}
.fc3-workshop__value--link {
  text-decoration: none;
  transition: color .3s ease-out;
}
.fc3-workshop__value--link:hover,
.fc3-workshop__value--link:focus-visible {
  color: var(--c-gold, #fec53e);
  outline: none;
}

.fc3-workshop__cta {
  text-align: center;
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.fc3-workshop__directions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-gold, #fec53e);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: color .3s ease-out;
}
.fc3-workshop__directions:hover,
.fc3-workshop__directions:focus-visible {
  color: var(--c-white, #fff);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §13 · Book + FAQ unified — 2026-05-08
   2-col grid: intro/FAQ left · form right.  Stacks on mobile.
   FAQ rules below override fc3-faq cream-variant defaults for dark canvas.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-book-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
  .fc3-book-faq__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.fc3-book-faq__intro {
  /* Sticky desktop: intro panel follows scroll while form is read */
}
@media (min-width: 1100px) {
  .fc3-book-faq__intro {
    position: sticky;
    top: calc(var(--nav-h, 78px) + 80px);
  }
}
.fc3-book-faq__faq {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}
.fc3-book-faq__faq-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  opacity: .55;
}

/* Override form to fill its column instead of being centred at 760px.
 * Stretch full height of the grid row so the right column visually
 * matches the FAQ stack on the left. Active step grows; actions sit
 * at the bottom regardless of step content length. */
.fc3-book-faq__grid { align-items: stretch; }
.fc3-book-faq .fc3-book__form {
  max-width: none;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fc3-book-faq .fc3-book__step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.fc3-book-faq .fc3-book__step[hidden] { display: none; }
.fc3-book-faq .fc3-book__actions {
  margin-top: auto;
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

/* Interest banner (2026-06-09 Bruno): row layout — the label + value stay on a
   single line (never wrap); the lower-priority hint takes the remaining width
   and is the only part allowed to flow onto a 2nd line. On narrow form columns
   the hint drops to its own row (flex-wrap). Overrides the earlier
   `display: inline-flex` rule above so the banner spans the full column. */
.fc3-book__interest-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  background: rgba(254, 197, 62, .08);
  border-left: 2px solid var(--c-gold, #fec53e);
}
.fc3-book__interest-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;        /* keep on one line, don't shrink */
  white-space: nowrap;
  font-size: .9rem;
  letter-spacing: .02em;
}
.fc3-book__interest-line strong { color: var(--c-gold, #fec53e); font-weight: 600; }
.fc3-book__interest-hint {
  margin: 0;
  flex: 1 1 14rem;       /* fill the rest; wrap to a 2nd line as needed */
  font-size: .78rem;
  font-style: italic;
  opacity: .65;
}

/* FAQ inside the dark unified section — flip cream-variant colors */
.fc3-book-faq .fc3-faq__list {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
.fc3-book-faq .fc3-faq__item { border-bottom-color: rgba(255, 255, 255, .1); }
.fc3-book-faq .fc3-faq__q-icon {
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .85);
}
.fc3-book-faq .fc3-faq__a { color: rgba(255, 255, 255, .82); }
.fc3-book-faq .fc3-faq__a p { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   Pack visuals lightbox (Bruno 2026-05-08 follow-up)
   Click any pack photo / visual to enlarge in a fullscreen overlay.
   ═══════════════════════════════════════════════════════════════════════ */
.fc3-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .25s ease-out;
}
.fc3-lightbox.is-open { opacity: 1; }
.fc3-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.fc3-lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--c-white, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease-out;
}
.fc3-lightbox__close:hover,
.fc3-lightbox__close:focus-visible {
  background: var(--c-gold, #fec53e);
  color: var(--c-dark, #292929);
  outline: none;
}

/* Photo / visual focus state for the lightbox triggers */
.fc3-pack__photo:focus-visible,
.fc3-pack__visual:focus-visible {
  outline: 2px solid var(--c-gold, #fec53e);
  outline-offset: 4px;
}