/* ═══════════════════════════════════════════════════════════════════════════
   SOULFORCE ARTS — SHOULDER REST SETUP  (/setup)
   Extends styles.css. Same components and rhythm as the rest of the site, but
   grounded in a WARM AMBER palette (deep espresso-amber + warm paper) so the
   page reads as its own room while staying unmistakably brand.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --amber-deep:   #3B2A10;  /* darkest ground — hero, dark sections */
  --amber-rich:   #5C3F12;  /* rich amber — final CTA band */
  --amber-mid:    #8E5F18;  /* var(--gold-deep) — accents on dark */
  --amber-paper:  #F7F1E4;  /* warm light ground */
  --amber-cream:  #EFE7D5;  /* second light ground */
}

/* ─── 01 Hero ─────────────────────────────────────────────────────────────── */
.hero.v-setup {
  position: relative;
  min-height: clamp(560px, 80vh, 740px);
  padding-top: clamp(132px, 15vw, 176px);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: var(--amber-deep);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero.v-setup .hero-photo {
  position: absolute;
  inset: 0;
  background: var(--amber-deep) url("assets/setup-hero.jpg") center 28% / cover no-repeat;
  z-index: 0;
}
/* Warm amber wash: opaque on the left where the copy sits, clearing to the
   right so the violin/shoulder contact stays readable. */
.hero.v-setup .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(46, 32, 10, 0.97) 0%,
      rgba(46, 32, 10, 0.93) 36%,
      rgba(46, 32, 10, 0.78) 56%,
      rgba(46, 32, 10, 0.42) 76%,
      rgba(46, 32, 10, 0.52) 100%),
    linear-gradient(180deg,
      rgba(46, 32, 10, 0.18) 0%,
      transparent 20%,
      transparent 58%,
      rgba(46, 32, 10, 0.76) 100%);
}
.hero.v-setup .hero-wrap {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--page-pad);
}
.hero.v-setup .hero-copy { max-width: 660px; }
.hero.v-setup .h-display { margin: 20px 0 22px; color: #fff; }
.hero.v-setup .hl { color: var(--gold); }
/* The hero section carries no .on-dark class, so light-ground text colours would
   otherwise win here and the lead would render dark-on-dark. */
.hero.v-setup .lead { max-width: 44ch; color: rgba(255, 255, 255, 0.86); }
.hero.v-setup .lead em { color: var(--gold); }
.hero.v-setup .enso-hero { z-index: 1; opacity: 0.16; }

.setup-buybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 4vw, 36px);
}
.setup-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.setup-reassure span { display: inline-flex; align-items: center; gap: 8px; }
.setup-reassure span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}

/* Mobile/tablet: the photo sits behind the copy rather than beside it, so the
   wash has to be much heavier or the lead paragraph washes out over the bright
   greenery. Also pull the focal point right so the violin stays visible. */
@media (max-width: 820px) {
  .hero.v-setup .hero-photo { background-position: 62% 22%; }
  .hero.v-setup .hero-photo::after {
    background:
      linear-gradient(180deg,
        rgba(46, 32, 10, 0.88) 0%,
        rgba(46, 32, 10, 0.80) 34%,
        rgba(46, 32, 10, 0.86) 62%,
        rgba(46, 32, 10, 0.95) 100%),
      linear-gradient(90deg,
        rgba(46, 32, 10, 0.72) 0%,
        rgba(46, 32, 10, 0.52) 60%,
        rgba(46, 32, 10, 0.46) 100%);
  }
  .hero.v-setup .lead { max-width: none; }
}

/* ─── 02 The rest trap (warm paper ground) ────────────────────────────────── */
.section.s-rest-trap { background: var(--amber-paper); }
.s-rest-trap .setup-head { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.s-rest-trap .rest-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .s-rest-trap .rest-cols { grid-template-columns: minmax(0, 1fr); }
}
/* The pile of rests already bought and abandoned — the section's whole argument
   in one image. Square source, so it holds its shape in both grid states. */
.rest-pile { margin: 0; }
.rest-pile img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(142, 95, 24, 0.22);
  box-shadow: 0 34px 64px -40px rgba(59, 42, 16, 0.7);
}
.rest-pile figcaption {
  margin-top: 16px;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  color: var(--gold-warm);
}
@media (max-width: 860px) {
  .rest-pile { max-width: 520px; margin-inline: auto; }
  .rest-pile figcaption { text-align: center; }
}
.rest-body p {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.rest-body .step {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  color: var(--ink);
  margin: 1.5em 0 0.7em;
}
.rest-body .reveal-line {
  border-left: 2px solid var(--gold-warm);
  padding-left: 20px;
  color: var(--ink);
}

/* ─── 03 What you'll learn (deep amber ground) ────────────────────────────── */
.section.on-dark.deeper.s-setup-learn { background: var(--amber-deep); }
.s-setup-learn .learn-head { text-align: center; max-width: 46ch; margin: 0 auto clamp(2.2rem, 4vw, 3.2rem); }
.s-setup-learn .learn-head .kicker { justify-content: center; display: inline-flex; }
.s-setup-learn .learn-sub {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.s-setup-learn .learn-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
  display: grid;
  gap: 2px;
}
.s-setup-learn .learn-item {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 26px);
  padding: clamp(20px, 2.6vw, 26px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.s-setup-learn .learn-item:last-child { border-bottom: 0; }
.s-setup-learn .learn-num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--gold);
  flex: 0 0 auto;
  min-width: 2ch;
}
.s-setup-learn .learn-text {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}
.s-setup-learn .learn-text strong { color: #fff; font-weight: 600; }
.s-setup-learn .promise-card {
  max-width: 780px;
  margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  padding: clamp(24px, 3.4vw, 34px);
  background: rgba(222, 190, 81, 0.08);
  border: 1px solid rgba(222, 190, 81, 0.28);
  border-radius: 2px;
}
.s-setup-learn .pc-flag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
}
.s-setup-learn .promise-card p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: #fff;
  text-wrap: pretty;
}
.s-setup-learn .promise-card em { font-style: italic; color: var(--gold); }
.s-setup-learn .learn-note {
  max-width: 700px;
  margin: clamp(2rem, 3.4vw, 2.6rem) auto 0;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}

/* ─── 04 Who this is for (cream ground) ───────────────────────────────────── */
.section.s-setup-whofor { background: var(--amber-cream); }
.s-setup-whofor .whofor-head { max-width: 40ch; margin-bottom: clamp(2rem, 3.6vw, 2.8rem); }
.s-setup-whofor .whofor-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.s-setup-whofor .whofor-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  border-bottom: 1px solid rgba(24, 30, 27, 0.09);
}
.s-setup-whofor .whofor-row:last-child { border-bottom: 0; }
.s-setup-whofor .wf-mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--gold-warm);
  position: relative;
}
.s-setup-whofor .wf-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 10px;
  width: 4px; height: 8px;
  border: solid var(--gold-warm);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -2px);
}
.s-setup-whofor .whofor-row p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.s-setup-whofor .wf-who { color: var(--ink); font-weight: 600; }

/* ─── 05 About Joseph (deep amber ground) ─────────────────────────────────── */
.section.on-dark.deeper.s-setup-about { background: var(--amber-deep); }
.s-setup-about .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) {
  .s-setup-about .wrap { grid-template-columns: minmax(0, 1fr); }
  .s-setup-about .setup-about-visual { order: 2; max-width: 380px; }
}
.setup-about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #2E2008 url("assets/setup-hero.jpg") center 24% / cover no-repeat;
  border: 1px solid rgba(222, 190, 81, 0.24);
  box-shadow: 0 40px 70px -46px rgba(0, 0, 0, 0.8);
  filter: sepia(0.14) saturate(0.92);
}
.s-setup-about .signature {
  margin: 22px 0 0;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--gold);
}

/* ─── 06 Final CTA (rich amber band) ──────────────────────────────────────── */
.section.on-dark.deeper.s-setup-cta { background: var(--amber-rich); text-align: center; }
.s-setup-cta .kicker { justify-content: center; display: inline-flex; }
.s-setup-cta .h-section { margin: 20px auto 0; max-width: 22ch; }
.setup-cta-price {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1;
  color: var(--gold);
  margin: clamp(20px, 3vw, 28px) 0 14px;
}
.setup-cta-sub {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.s-setup-cta .ctas { justify-content: center; margin-top: clamp(26px, 4vw, 34px); }
.setup-cta-foot {
  margin: 22px auto 0;
  max-width: 48ch;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

/* ─── 07 FAQ ──────────────────────────────────────────────────────────────── */
.section.s-setup-faq { background: var(--paper); }
.s-setup-faq .faq-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.s-setup-faq .faq-head .kicker { justify-content: center; display: inline-flex; }
.s-setup-faq .faq-list { max-width: 780px; margin: 0 auto; }
/* Accordion (same treatment as the other pages — these live in each page's own
   stylesheet, not the shared one, so they have to be carried over). */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.25;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--gold-warm); }
.faq-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--gold-warm); transition: transform 0.3s ease, opacity 0.3s ease; }
.faq-icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.open .faq-a { max-height: 460px; }
.faq-a-inner { padding: 0 4px 28px; font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }

/* TheQueen ships oversized ascenders, and the kicker sits flush against the
   heading that follows it (computed gap is 0), so the gold label collides with
   the cap-heights below. Give every section heading clearance from its kicker. */
.section .kicker + .h-section,
.section .kicker + h2 { margin-top: 18px; }

/* Inline "Soulforce"/Lab links keep the site treatment */
.soulforce-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity .2s ease; }
.soulforce-link:hover { opacity: 0.7; }

/* Enso watermark placement (these variants live in each page's own stylesheet). */
.enso-toppair { right: auto; left: -6%; top: -300px; bottom: auto; width: 600px; height: 600px; }
.enso-botpair { right: auto; left: -6%; bottom: -300px; top: auto; width: 600px; height: 600px; }
.s-rest-trap .enso-toppair, .s-setup-about .enso-botpair { left: auto; right: -6%; }
.footer .cta-enso {
  position: absolute;
  top: clamp(-300px, -21vw, -210px);
  right: 3%;
  width: min(60vw, 600px);
  height: min(60vw, 600px);
  background: url("assets/enso.png") center / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.footer .wrap { position: relative; z-index: 1; }
body.enso-off .footer .cta-enso { display: none; }
body.enso-prominent .footer .cta-enso { opacity: 0.22; }

/* Amber-tinted enso watermarks so they read warm, not green */
.s-rest-trap .enso-bg,
.s-setup-whofor .enso-bg { opacity: 0.05; }
.s-setup-learn .enso-bg,
.s-setup-about .enso-bg,
.s-setup-cta .enso-bg { opacity: 0.07; }

/* Ensos must never create a horizontal scrollbar on narrow screens. */
.section { overflow: hidden; }