/* =============================================
   ORLÉ — SERVICE PAGES (shared)

   One stylesheet, three pages, one shape:
     /services/full-reconstruction   step 1, the 90-day intensive
     /services/the-correspondence    step 2, the DWY retainer
     /services/the-residency         step 2, the DFY retainer

   Built from the Figma design, file Obt0jHcZk1CmnBztogiaK9,
   frame 1953:7 (hero 1959:6, what-it-is 1959:23, the numbered
   boxes 1953:39–70, the pricing card 1953:149, the FAQ rows
   1953:166–195).

   Nav, popups and footer are the homepage's — they come from
   style.css + homepage.css and are not restyled here.
   Palette and type tokens also come from those two files:
     --hp-maroon #640a22 · --hp-blue #bed5eb
     --hp-pink   #f5dedf · --hp-cream #f7f6ee · --hp-navy #261834
   ============================================= */

/* style.css caps every <p> at 600px. Centred sections need the
   full column, so release the cap inside this page's sections. */
.sv-hero p,
.sv-what p,
.sv-rebuild p,
.sv-plan p,
.sv-band p,
.sv-pricing p,
.sv-faq p {
  max-width: none;
}

/* In-page jumps land under the fixed nav pill unless the
   target reserves room for it. */
.sv-what,
.sv-rebuild,
.sv-plan,
.sv-band,
.sv-pricing,
.sv-faq {
  scroll-margin-top: clamp(80px, 7vw, 110px);
}

/* =============================================
   SHARED BUTTON  (Figma 1959:9 — 664×103 pill,
   maroon fill, 4px pink border, drop shadow)
   ============================================= */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100px;
  padding: 0.9rem 2.75rem;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  border: 4px solid transparent;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sv-btn:hover,
.sv-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.25);
}
.sv-btn--maroon {
  background: var(--hp-maroon);
  color: var(--hp-pink);
  border-color: var(--hp-pink);
}
.sv-btn--navy {
  background: var(--hp-navy);
  color: var(--hp-pink);
  border-color: var(--hp-blue);
}
.sv-btn--blue {
  background: var(--hp-blue);
  color: var(--hp-navy);
  border-color: var(--hp-navy);
}

/* =============================================
   SECTION 1 · HERO  (Figma 1959:6)
   Script headline across the top, centred copy
   column, the 90-days portrait tilted into the
   right edge, one button underneath.
   ============================================= */
.sv-hero {
  position: relative;
  background: var(--hp-cream);
  /* clears the fixed nav pill */
  padding: calc(16px + 62px + 3rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}
.sv-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.sv-hero-heading {
  position: relative;
  z-index: 3;
  font-family: var(--hp-cursive);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
  text-align: center;
  transform: rotate(-0.56deg);
  margin: 0 0 2.5rem;
}
.sv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.sv-hero-copy {
  text-align: center;
  padding-top: clamp(1rem, 4vw, 4rem);
}
.sv-hero-eyebrow {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  text-shadow: 1px 1px 1.9px var(--hp-pink);
  margin: 0 0 2rem;
}
.sv-hero-body p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
  margin: 0 0 1.5rem;
}
.sv-hero-body p:last-child { margin-bottom: 0; }
.sv-hero-body strong { font-weight: 700; }

/* Price line under the copy — the two ways to pay */
.sv-hero-terms {
  margin: 2rem 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--hp-maroon);
}
.sv-hero-terms em { font-style: italic; }

/* Tilted photo card (Figma 1959:7 — 694×828, rotated) */
.sv-hero-photo {
  position: relative;
  aspect-ratio: 694 / 828;
  border-radius: 8px;
  overflow: hidden;
  transform: rotate(6.52deg);
  box-shadow: 0 18px 40px rgba(38, 24, 52, 0.18);
  width: 100%;
  max-width: 460px;
  /* pulled up so the script headline crosses its top corner */
  margin: clamp(-9rem, -8vw, -4.5rem) 0 0 auto;
  z-index: 1;
}
.sv-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.sv-hero-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

@media (max-width: 860px) {
  .sv-hero-grid { grid-template-columns: 1fr; }
  .sv-hero-photo {
    order: -1;
    max-width: 320px;
    margin: 0 auto 1.5rem;
    transform: rotate(3deg);
  }
  .sv-hero-copy { padding-top: 0; }
}

/* =============================================
   SECTION 2 · WHAT IT IS  (Figma 1959:23)
   Maroon band: headline and copy on the left,
   the three-call card on the right.
   ============================================= */
.sv-what {
  background: var(--hp-maroon);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem);
}
.sv-what-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.sv-what-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.35;
  letter-spacing: -0.05em;
  color: var(--hp-blue);
  margin: 0 0 2rem;
}
.sv-what-title span { display: block; }
.sv-what-title em {
  font-style: italic;
  font-weight: 600;
}
.sv-what-copy p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-cream);
  margin: 0 0 1.25rem;
}
.sv-what-copy p:last-child { margin-bottom: 0; }
.sv-what-copy strong { font-weight: 700; color: var(--hp-pink); }

/* The three calls, as the "how it works" card */
.sv-steps {
  background: var(--hp-cream);
  border: 4px solid var(--hp-blue);
  border-radius: 20px;
  box-shadow: 5px 6px 7.2px rgba(0, 0, 0, 0.25);
  padding: 1.75rem 2rem 2rem;
}
.sv-steps-label {
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  margin: 0 0 1rem;
}
.sv-steps-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
  border-top: 1px solid var(--hp-maroon);
}
.sv-steps-list li {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hp-maroon);
  max-width: none;
}
.sv-steps-list strong { font-weight: 700; }
.sv-steps-note {
  margin: 1.25rem 0 0;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.78rem, 1.05vw, 0.875rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
}

@media (max-width: 860px) {
  .sv-what-inner { grid-template-columns: 1fr; }
}

/* =============================================
   SECTION 3 · WHAT WE REBUILD  (Figma 1953:130–148)
   Cream section, cream pills with a maroon hairline
   border, one deliverable per row.
   ============================================= */
.sv-rebuild {
  background: var(--hp-cream);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
  text-align: center;
}
.sv-rebuild-inner {
  max-width: 1180px;
  margin: 0 auto;
}
/* These sections match The Anatomy of a World on the homepage: black
   type, a blue marker on the title, and cream pills whose only
   difference row to row is the border colour. `.hp-mark` comes from
   homepage.css, which every page here loads. */
.sv-rebuild-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #000;
  margin: 0 0 1.5rem;
}
.sv-rebuild-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  max-width: 1000px;
}
/* the marker sits tighter under the smaller lede type, as it does on
   the homepage's subtitle */
.sv-rebuild-lede .hp-mark {
  --mark-h: 0.85em;
  --mark-y: 0.28em;
}
.sv-rebuild-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}
.sv-rebuild-list li {
  background: var(--hp-cream);
  border: clamp(2px, 0.231vw, 4px) solid var(--row-border);
  border-radius: 100px;
  box-shadow: 5px 6px 7.2px rgba(0, 0, 0, 0.25);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1.25rem, 4vw, 3.5rem);
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.25vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #000;
  max-width: none;
}
.sv-rebuild-list strong { font-weight: 700; }

/* Border colour is the only thing that changes row to row, and it
   cycles so a list of any length keeps the same rhythm. */
.sv-rebuild-list li:nth-child(5n + 1) { --row-border: var(--hp-maroon); }
.sv-rebuild-list li:nth-child(5n + 2) { --row-border: var(--hp-pink); }
.sv-rebuild-list li:nth-child(5n + 3) { --row-border: var(--hp-navy); }
.sv-rebuild-list li:nth-child(5n + 4) { --row-border: var(--hp-blue); }
.sv-rebuild-list li:nth-child(5n + 5) { --row-border: var(--bleached-sand); }
.sv-rebuild-note {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #000;
  max-width: 900px;
}

@media (max-width: 640px) {
  .sv-rebuild-list li { border-radius: 24px; }
}

/* =============================================
   SECTION 4 · THE PLAN  (Figma 1953:39–72)
   Maroon ground. Reframe headline on the left,
   the four numbered boxes stacked on the right.
   ============================================= */
.sv-plan {
  background: var(--hp-maroon);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
}
.sv-plan-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.sv-plan-copy {
  position: sticky;
  top: clamp(90px, 9vw, 130px);
}
.sv-plan-eyebrow {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hp-pink);
  margin: 0 0 1rem;
}
.sv-plan-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.25;
  letter-spacing: -0.05em;
  color: var(--hp-blue);
  margin: 0 0 1.5rem;
}
.sv-plan-title em { font-style: italic; font-weight: 600; }
.sv-plan-copy p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-cream);
  margin: 0 0 1.25rem;
}
.sv-plan-copy p:last-child { margin-bottom: 0; }

.sv-boxes {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.sv-box {
  background: var(--hp-cream);
  border: 4px solid var(--hp-blue);
  border-radius: 20px;
  box-shadow: 5px 6px 7.2px rgba(0, 0, 0, 0.25);
  padding: 1.75rem 1.75rem 2rem;
  text-align: center;
}
.sv-box-num {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.05em;
  color: var(--hp-maroon);
  margin: 0 0 0.75rem;
}
.sv-box-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.05em;
  color: var(--hp-maroon);
  margin: 0 0 1.25rem;
}
.sv-box-rule {
  border: none;
  border-top: 1px solid var(--hp-maroon);
  margin: 0 0 1.25rem;
  width: 100%;
}
.sv-box-rule--bottom { margin: 1.25rem 0 0; }
.sv-box p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.15vw, 0.95rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--hp-maroon);
  margin: 0;
}

@media (max-width: 900px) {
  .sv-plan-inner { grid-template-columns: 1fr; }
  .sv-plan-copy { position: static; }
}

/* =============================================
   SECTION 5 · THE FIRST STEP  (Figma 1953:73–75)
   Cream band, one script line, three short lines.
   ============================================= */
.sv-band {
  background: var(--hp-cream);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
  text-align: center;
}
.sv-band-inner {
  max-width: 940px;
  margin: 0 auto;
}
.sv-band-title {
  font-family: var(--hp-cursive);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  transform: rotate(-0.56deg);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.sv-band p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  margin: 0 auto 1.5rem;
}
.sv-band p:last-of-type { margin-bottom: 0; }

/* =============================================
   SECTION 6 · PRICING  (Figma 1953:149)
   Pink card, price at the top, the deliverables
   ruled underneath, one button, one caveat.
   ============================================= */
.sv-pricing {
  background: var(--hp-cream);
  padding: 0 clamp(1rem, 4vw, 4rem) clamp(3.5rem, 7vw, 6rem);
}
.sv-pricing-card {
  max-width: 1025px;
  margin: 0 auto;
  background: var(--hp-pink);
  border: 2px solid var(--hp-maroon);
  border-radius: 20px;
  box-shadow: 5px 6px 7.2px rgba(38, 24, 52, 0.2);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem);
}
.sv-pricing-eyebrow {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  margin: 0;
}
.sv-pricing-price {
  text-align: center;
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
}
/* Paying in full is the discounted option, so it gets the badge and
   the big number; the plan is priced beside it at its real total. */
.sv-pricing-save {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  background: var(--hp-maroon);
  color: var(--hp-pink);
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sv-pricing-amount {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hp-navy);
}
.sv-pricing-terms {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hp-maroon);
}

/* The two ways to pay, side by side */
.sv-pricing-ways {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto clamp(2rem, 4vw, 3rem);
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  text-align: center;
}
.sv-pricing-way {
  border: 2px solid rgba(100, 10, 34, 0.35);
  border-radius: 16px;
  padding: clamp(0.9rem, 2vw, 1.25rem) 1rem;
}
.sv-pricing-way--pif {
  border-color: var(--hp-maroon);
  background: rgba(255, 255, 255, 0.45);
}
.sv-pricing-way b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: -0.04em;
  color: var(--hp-navy);
}
.sv-pricing-way span {
  display: block;
  margin-top: 0.35rem;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.75rem, 1.05vw, 0.85rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--hp-maroon);
}
.sv-pricing-way em {
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 560px) {
  .sv-pricing-ways { grid-template-columns: 1fr; }
}
.sv-pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(100, 10, 34, 0.45);
}
.sv-pricing-list li {
  border-bottom: 1px solid rgba(100, 10, 34, 0.45);
  padding: clamp(0.75rem, 1.4vw, 1rem) 0;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.25vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
  max-width: none;
}
.sv-pricing-list strong { font-weight: 700; }
.sv-pricing-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sv-pricing-note {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  letter-spacing: -0.04em;
  color: var(--hp-maroon);
}

/* =============================================
   SECTION 7 · FAQ  (Figma 1953:166–195)
   Pink pills, serif question, arrow that turns
   when the answer opens.
   ============================================= */
.sv-faq {
  background: var(--hp-cream);
  padding: 0 clamp(1rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
}
.sv-faq-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.sv-faq-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--hp-maroon);
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.sv-faq-item + .sv-faq-item { margin-top: clamp(0.6rem, 1.2vw, 0.9rem); }
.sv-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: var(--hp-pink);
  border: 1px solid rgba(100, 10, 34, 0.35);
  border-radius: 14px;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--hp-maroon);
  transition: background 0.2s ease;
}
.sv-faq-q:hover { background: #f3d2d4; }
.sv-faq-arrow {
  flex: none;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.25s ease;
}
.sv-faq-item.open .sv-faq-arrow { transform: rotate(180deg); }
.sv-faq-a {
  display: none;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.75rem) 0;
}
.sv-faq-item.open .sv-faq-a { display: block; }
.sv-faq-a p {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  margin: 0 0 1rem;
}
.sv-faq-a p:last-child { margin-bottom: 0; }

/* =============================================
   SECTION 8 · APPLY
   The application card. Same shape as the free
   audit's form: you answer these, I read every
   one myself, then we talk.
   ============================================= */
.sv-apply {
  background: var(--hp-cream);
  padding: 0 clamp(1rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
  scroll-margin-top: clamp(80px, 7vw, 110px);
}
.sv-apply-head {
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.sv-apply-eyebrow {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  margin: 0 0 0.75rem;
}
.sv-apply-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--hp-navy);
  margin: 0 0 1.25rem;
}
.sv-apply-title em { font-style: italic; font-weight: 600; }
.sv-apply-intro {
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  margin: 0;
  max-width: none;
}

.sv-apply-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--hp-pink);
  border: 2px solid var(--hp-maroon);
  border-radius: 20px;
  box-shadow: 5px 6px 7.2px rgba(38, 24, 52, 0.2);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.sv-apply-required {
  margin: 0 0 1.5rem;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  letter-spacing: -0.02em;
  color: var(--hp-maroon);
}
.sv-req { color: var(--hp-maroon); font-weight: 700; }

.sv-field { margin-bottom: 1.5rem; }
.sv-field label,
.sv-fieldset legend {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
}
.sv-field input[type="text"],
.sv-field input[type="email"],
.sv-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(38, 24, 52, 0.35);
  border-radius: 8px;
  background: var(--hp-cream);
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.5;
  color: var(--hp-navy);
}
.sv-field textarea {
  min-height: 96px;
  resize: vertical;
}
.sv-field input:focus,
.sv-field textarea:focus {
  outline: 2px solid var(--hp-maroon);
  outline-offset: 1px;
}

/* How they want to pay — PIF first, since it is the cheaper one */
.sv-fieldset {
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;
}
.sv-radios {
  display: grid;
  gap: 0.6rem;
}
.sv-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(38, 24, 52, 0.35);
  border-radius: 8px;
  background: var(--hp-cream);
  cursor: pointer;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.82rem, 1.15vw, 0.92rem);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
}
.sv-radio input { margin-top: 0.2rem; flex: none; }
.sv-radio b { font-weight: 700; }
.sv-radio i { font-style: normal; color: var(--hp-maroon); font-weight: 600; }

.sv-apply-submit {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sv-apply-note {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.78rem, 1.05vw, 0.875rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  max-width: none;
}

/* =============================================
   RETAINER PAGES ONLY
   The two retainers each ship at two levels, sit
   behind The Full Reconstruction, and carry the
   same term discounts and modular swaps.
   ============================================= */

/* ---- The gate: retainers open only after step 1 ---- */
.sv-gate {
  background: var(--hp-blue);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 4rem);
  text-align: center;
}
.sv-gate-inner {
  max-width: 900px;
  margin: 0 auto;
}
.sv-gate p {
  margin: 0 auto 1rem;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  max-width: none;
}
.sv-gate p:last-child { margin-bottom: 0; }
.sv-gate strong { font-weight: 700; }
.sv-gate a {
  color: var(--hp-maroon);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ---- The two levels, side by side inside the price card ---- */
.sv-tiers {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.sv-tier {
  border: 2px solid var(--hp-maroon);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.sv-tier-level {
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  margin: 0 0 0.6rem;
}
.sv-tier-price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--hp-navy);
  margin: 0;
}
.sv-tier-per {
  display: block;
  margin-top: 0.2rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hp-maroon);
}
.sv-tier-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  letter-spacing: -0.04em;
  color: var(--hp-maroon);
  margin: 0.9rem 0 0.75rem;
}
.sv-tier-desc {
  margin: 0;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  max-width: none;
}

@media (max-width: 640px) {
  .sv-tiers { grid-template-columns: 1fr; }
}

/* ---- Term discounts ---- */
.sv-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-width: 640px;
  margin-inline: auto;
}
.sv-terms li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(100, 10, 34, 0.4);
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.82rem, 1.15vw, 0.95rem);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
  text-align: left;
  max-width: none;
}
.sv-terms b {
  flex: none;
  font-weight: 700;
  text-align: right;
}

/* ---- Modular swaps ---- */
.sv-swaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  text-align: left;
}
.sv-swaps li {
  background: var(--hp-cream);
  border: clamp(2px, 0.231vw, 4px) solid var(--row-border);
  border-radius: 20px;
  box-shadow: 5px 6px 7.2px rgba(0, 0, 0, 0.25);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 3vw, 2rem);
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: #000;
  max-width: none;
}
.sv-swaps li:nth-child(5n + 1) { --row-border: var(--hp-maroon); }
.sv-swaps li:nth-child(5n + 2) { --row-border: var(--hp-pink); }
.sv-swaps li:nth-child(5n + 3) { --row-border: var(--hp-navy); }
.sv-swaps li:nth-child(5n + 4) { --row-border: var(--hp-blue); }
.sv-swaps li:nth-child(5n + 5) { --row-border: var(--bleached-sand); }
.sv-swaps b { font-weight: 700; }

/* ---- A plain deliverables list on the cream ground ---- */
.sv-spine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.6rem, 1.3vw, 0.9rem);
  text-align: left;
  max-width: 900px;
  margin-inline: auto;
}
.sv-spine li {
  position: relative;
  padding-left: 1.6rem;
  font-family: 'Inter', var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: var(--hp-navy);
  max-width: none;
}
.sv-spine li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hp-maroon);
}
.sv-spine strong { font-weight: 700; }

/* ---- Group label inside the deliverables list ---- */
.sv-rebuild-group {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.9rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 700;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  text-align: center;
}
.sv-rebuild-group:first-child { margin-top: 0; }

/* =============================================
   INLINE LINKS
   Copy across these pages now cross-references the
   other offers, the audit and the letters, so links
   inside body copy have to read as links on every
   ground they land on.
   ============================================= */
.sv-box a,
.sv-steps-list a,
.sv-rebuild-note a,
.sv-rebuild-list a,
.sv-hero-terms a,
.sv-hero-body a,
.sv-apply-note a,
.sv-apply-intro a {
  color: var(--hp-maroon);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
.sv-band a,
.sv-faq-a a {
  color: var(--hp-maroon);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
/* On the maroon ground the link has to go light, not darker */
.sv-plan-copy a,
.sv-what-copy a {
  color: var(--hp-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
.sv-box a:hover,
.sv-steps-list a:hover,
.sv-rebuild-note a:hover,
.sv-rebuild-list a:hover,
.sv-hero-terms a:hover,
.sv-hero-body a:hover,
.sv-apply-note a:hover,
.sv-apply-intro a:hover,
.sv-band a:hover,
.sv-faq-a a:hover,
.sv-plan-copy a:hover,
.sv-what-copy a:hover { opacity: 0.7; }

/* The "see the offer" line at the foot of a card is a step out of it,
   not part of the blurb — give it room and centre it like the rest. */
.sv-box p + p { margin-top: 1rem; }

/* A full-length studio frame in the hero card sits much further back
   than the head-and-torso crops on the other pages. Zoom inside the
   card rather than swapping the photo, so the set stays consistent. */
.sv-hero-photo--tight img {
  transform: scale(1.3);
  transform-origin: center top;
}