/* /services: the deep dive behind the homepage pricing accordion. Loaded
   by templates/services/catalog.html only; every rule sits under .sv. The
   colours, type and buttons follow static/css/home.css, reproduced here
   rather than shared with it. Mobile first: hero, jump nav, the at-a-glance
   table (which scrolls inside its own frame), five tier sections (story
   beside a price box from 1024px), testimonials, our story, FAQ. Caveat is
   weight 400 everywhere, as on the homepage. */

.sv {
  --sv-ink: #3B2F28;
  --sv-ink-soft: #5A4A3E;
  --sv-muted: #6E5E50;
  --sv-cream: #F8F4EE;
  --sv-cream-dim: #F3ECE2;          /* the Inner Circle band: terracotta 4.52:1 */
  --sv-warm: #FBF3E6;
  --sv-line: #EDE3D6;
  --sv-line-strong: #E2D6C4;
  --sv-white: #FFFFFF;
  --sv-terracotta: #A9523E;
  --sv-terracotta-dark: #7F3A2A;
  --sv-teal: #2F7A70;
  --sv-teal-ink: #1F5A52;
  --sv-gold: #F2D58A;
  --sv-gold-line: #D9B556;
  --sv-hero-text: #FBF4E8;
  --sv-hero-soft: #F1E6D6;
  --sv-quote-bg: #4A3C33;
  --sv-shadow: 0 6px 20px rgba(59, 47, 40, 0.08);
  --sv-shadow-lg: 0 14px 36px rgba(59, 47, 40, 0.16);
  --sv-nav-h: 65px;                  /* the site nav: 64px and its 1px line */
  --sv-jump-h: 52px;

  --sv-gutter: clamp(16px, -2.79px + 5.8427vw, 72px);
  --sv-sec-py: clamp(48px, 36.22px + 4.0449vw, 88px);
  --sv-h1: clamp(32px, 23.24px + 2.2472vw, 52px);
  --sv-h2: clamp(28px, 23.62px + 1.1236vw, 40px);
  --sv-h3: clamp(20px, 18.25px + 0.4494vw, 24px);
  --sv-body: clamp(16px, 15.56px + 0.1124vw, 17px);
  --sv-lead: clamp(17px, 15.68px + 0.3371vw, 20px);
  --sv-card-pad: clamp(20px, 15.87px + 1.0730vw, 28px);

  font-family: 'Inter', sans-serif;
  color: var(--sv-ink);
  background: var(--sv-cream);
  font-size: var(--sv-body);
  line-height: 1.65;
  text-align: left;
  overflow-x: clip;                  /* clip, not hidden: the jump nav stays sticky */
}

.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv h1, .sv h2, .sv h3, .sv h4, .sv p, .sv figure, .sv dl, .sv dd, .sv ol, .sv ul { margin: 0; }
.sv h1, .sv h2, .sv h3, .sv h4 { color: var(--sv-ink); font-family: 'Playfair Display', serif; }
.sv h1, .sv h2 { font-weight: 400; }
.sv h1 { font-size: var(--sv-h1); line-height: 1.15; }
.sv h2 { font-size: var(--sv-h2); line-height: 1.2; }
.sv h3, .sv h4 { font-size: var(--sv-h3); font-weight: 600; line-height: 1.3; }
.sv p { color: var(--sv-ink-soft); }
.sv strong { color: var(--sv-ink); font-weight: 700; }
.sv a { color: var(--sv-terracotta); }
.sv a:hover { color: var(--sv-terracotta-dark); }

.sv a:focus-visible,
.sv summary:focus-visible,
.sv .sv-table-wrap:focus-visible {
  outline: 3px solid var(--sv-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sv-ink);
  border-radius: 10px;
}

/* Layout. Anchored sections land below both sticky bars. */
.sv .sv-sec {
  padding: var(--sv-sec-py) var(--sv-gutter);
  display: flex;
  flex-direction: column;
  gap: 28px;
  scroll-margin-top: calc(var(--sv-nav-h) + var(--sv-jump-h));
}
.sv .sv-col { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.sv .sv-head { width: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* "Start here", "Our flagship" and the other eyebrows: Caveat 400, which
   only this page and the homepage load (text= covers these letters). */
.sv .sv-eyebrow {
  align-self: flex-start;
  font: 400 26px/1.1 'Caveat', cursive;
  color: var(--sv-terracotta);       /* on cream 4.90:1 */
  transform: rotate(-2deg);
}
.sv .sv-tagline { font-size: var(--sv-lead); color: var(--sv-ink); line-height: 1.5; }
.sv .sv-em { font-family: 'Playfair Display', serif; font-style: italic; color: var(--sv-teal); }
.sv .sv-tier-ic .sv-em { color: var(--sv-teal-ink); }   /* teal is under 4.5:1 on the band */

/* Buttons: pills, as on the homepage. */
.sv .sv-btn {
  display: block;
  min-height: 44px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 20px;
  line-height: 1.2;
  transition: background-color 0.2s, color 0.2s;
}
.sv .sv-btn-dark { background: var(--sv-ink); color: var(--sv-cream); }
.sv .sv-btn-dark:hover { background: var(--sv-terracotta); color: var(--sv-cream); }
.sv .sv-btn-terra { background: var(--sv-terracotta); color: var(--sv-white); }
.sv .sv-btn-terra:hover { background: var(--sv-terracotta-dark); color: var(--sv-white); }
.sv .sv-btn-ghost { border: 1.5px solid var(--sv-ink); color: var(--sv-ink); padding: 12.5px 20px; }
.sv .sv-btn-ghost:hover { background: var(--sv-ink); color: var(--sv-cream); }

/* 1. Hero: the homepage's image and brown-to-teal overlay. Neither stop is
   under 0.78, so the text stays above 4.5:1 over the brightest pixel. */
.sv .sv-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 38.47px + 4.4944vw, 104px) var(--sv-gutter);
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--sv-hero-text);
  background: #2A1E17;               /* until the image paints */
}
.sv .sv-hero-img,
.sv .sv-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 85%;          /* this hero is short: 85% keeps her whole head in frame */
  z-index: -2;
}
.sv .sv-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42, 30, 23, 0.82) 0%,
              rgba(20, 62, 56, 0.78) 100%);
}
.sv .sv-hero-text {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-shadow: 0 1px 14px rgba(20, 12, 8, 0.55);
}
.sv .sv-hero h1 { color: var(--sv-hero-text); text-align: center; }
.sv .sv-hero p { color: var(--sv-hero-soft); font-size: var(--sv-lead); line-height: 1.55; }

/* 2. Jump nav: sticks under the site nav; scrolls sideways on phones. */
.sv .sv-jump {
  position: sticky;
  top: var(--sv-nav-h);
  z-index: 50;
  background: var(--sv-white);
  border-bottom: 1px solid var(--sv-line);
}
.sv .sv-jump ul {
  list-style: none;
  padding: 0 var(--sv-gutter);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  justify-content: flex-start;
}
.sv .sv-jump ul::-webkit-scrollbar { display: none; }
.sv .sv-jump a {
  display: block;
  min-height: 44px;
  padding: 14px 12px;
  line-height: 1.2;
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-ink-soft);
  text-decoration: none;
}
.sv .sv-jump a:hover { color: var(--sv-terracotta); }
.sv .sv-jump .sv-jump-hi { color: var(--sv-terracotta); font-weight: 700; }

/* 3. At a glance: the table scrolls inside its frame on phones. */
.sv .sv-table-wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  overflow-x: auto;
  background: var(--sv-white);
  border: 1px solid var(--sv-line-strong);
  border-radius: 14px;
}
.sv .sv-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.sv .sv-table th,
.sv .sv-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sv-line); }
.sv .sv-table tbody tr:last-child th,
.sv .sv-table tbody tr:last-child td { border-bottom: 0; }
.sv .sv-table thead th { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--sv-ink); }
.sv .sv-table thead th.sv-col-ic { color: var(--sv-terracotta); }
.sv .sv-table tbody th { font-weight: 600; color: var(--sv-ink); }
.sv .sv-table td { color: var(--sv-ink-soft); }
.sv .sv-table .sv-table-price th,
.sv .sv-table .sv-table-price td { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--sv-ink); background: var(--sv-cream); }
.sv .sv-table td.sv-col-ic { background: var(--sv-warm); }
.sv .sv-table .sv-no { color: var(--sv-muted); font-size: 13px; }

/* 4 to 8. Tier sections: the story, then its price box. */
.sv .sv-tier > * { width: 100%; max-width: 720px; margin: 0 auto; }
.sv .sv-tier-text { display: flex; flex-direction: column; gap: 16px; }
.sv .sv-tier-ic { background: var(--sv-cream-dim); }
.sv .sv-examples {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sv-card-pad);
  background: var(--sv-white);
  border-radius: 14px;
}
.sv .sv-examples dl { display: flex; flex-direction: column; gap: 12px; }
.sv .sv-examples dt { font-weight: 700; color: var(--sv-terracotta); }
.sv .sv-examples dd { color: var(--sv-ink-soft); }

.sv .sv-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sv-card-pad);
  background: var(--sv-white);
  border: 1px solid var(--sv-line-strong);
  border-radius: 14px;
  box-shadow: var(--sv-shadow);
}
.sv .sv-box-ic { border: 2px solid var(--sv-terracotta); box-shadow: var(--sv-shadow-lg); }
.sv .sv-pill {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--sv-cream);
}
.sv .sv-pill-teal { background: var(--sv-teal); }
.sv .sv-pill-terra { background: var(--sv-terracotta); }
.sv .sv-pill-ink { background: var(--sv-ink); }
.sv .sv-amount { font: 700 clamp(36px, 33.37px + 0.6742vw, 42px)/1.1 'Playfair Display', serif; color: var(--sv-ink); }
.sv .sv-amount span { font: 400 16px 'Inter', sans-serif; color: var(--sv-muted); }
.sv .sv-amount-long { font-size: clamp(28px, 26.25px + 0.4494vw, 32px); }
.sv .sv-cadence { font-size: 14px; color: var(--sv-muted); }
.sv .sv-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.5; }
.sv .sv-checks li { position: relative; padding-left: 26px; color: var(--sv-ink); }
.sv .sv-checks li::before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--sv-terracotta);
  border-bottom: 2px solid var(--sv-terracotta);
  transform: rotate(45deg);
}
.sv .sv-note { font-size: 13px; color: var(--sv-muted); text-align: center; }
.sv .sv-hand { font: 400 18px/1 'Caveat', cursive; color: var(--sv-terracotta); }

/* The Circle of Ten timeline. */
.sv .sv-timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sv .sv-timeline li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--sv-white);
  border: 1px solid var(--sv-line);
  border-left: 4px solid var(--sv-terracotta);
  border-radius: 12px;
  color: var(--sv-ink-soft);
}
.sv .sv-when { font: 400 22px/1.1 'Caveat', cursive; color: var(--sv-terracotta); }

/* 9. In their words: the homepage's three bordered cards on dark brown. */
.sv .sv-words { background: var(--sv-ink); }
.sv .sv-words h2 { color: var(--sv-cream); text-align: center; }
.sv .sv-quotes { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.sv .sv-quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sv-card-pad);
  background: var(--sv-quote-bg);
  border-radius: 14px;
  border-left: 5px solid var(--sv-terracotta);
}
.sv .sv-quote-teal { border-left-color: var(--sv-teal); }
.sv .sv-quote-amber { border-left-color: var(--sv-gold-line); }
.sv .sv-quote blockquote { margin: 0; font: 400 19px/1.55 'Playfair Display', serif; color: var(--sv-cream); }
.sv .sv-quote figcaption { font: 400 24px/1 'Caveat', cursive; color: var(--sv-gold); }

/* 10. Our story */
.sv .sv-story { background: var(--sv-cream); }
.sv .sv-story-lead { font: italic 400 var(--sv-lead)/1.55 'Playfair Display', serif; color: var(--sv-teal); }

/* 11. The admin-editable block region (content_blocks.css underneath),
   restyled to the page: same fonts, sizes, colours and spacing, and left
   aligned even where the editor stored a centred alignment. */
.sv .sv-content { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.sv .sv-content,
.sv .sv-content * { text-align: left !important; }
.sv .sv-content .section-text { margin: 0; }
/* Spacing between the blocks inside a text block; :not() lifts it above
   the margin resets below, and the heading gaps follow it. */
.sv .sv-content .lesson-html > :not(:first-child) { margin-top: 18px; }
.sv .sv-content .lesson-html > :is(h1, h2):not(:first-child) { margin-top: 32px; }
.sv .sv-content .lesson-html > h3:not(:first-child) { margin-top: 24px; }
.sv .sv-content .lesson-html p,
.sv .sv-content .lesson-html li {
  font-family: 'Inter', sans-serif;
  font-size: var(--sv-body);
  line-height: 1.65;
  color: var(--sv-ink-soft);
  margin: 0;
}
.sv .sv-content .lesson-html h1,
.sv .sv-content .lesson-html h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--sv-h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sv-ink);
  margin: 32px 0 0;
}
.sv .sv-content .lesson-html h3,
.sv .sv-content .block-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--sv-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sv-ink);
  margin: 24px 0 0;
}
.sv .sv-content .lesson-html > :first-child,
.sv .sv-content > :first-child .block-title { margin-top: 0; }
.sv .sv-content .lesson-html ul,
.sv .sv-content .lesson-html ol { padding-left: 1.4em; margin: 0; }
.sv .sv-content .lesson-html li + li { margin-top: 6px; }
.sv .sv-content .lesson-html strong { color: var(--sv-ink); }
.sv .sv-content .lesson-html a,
.sv .sv-content .lesson-quote a { color: var(--sv-terracotta); text-decoration: underline; }
.sv .sv-content .lesson-html a:hover { color: var(--sv-terracotta-dark); }
.sv .sv-content .lesson-html img,
.sv .sv-content .lesson-image-figure img { margin: 0; border-radius: 14px; }
.sv .sv-content .lesson-image-figure { margin: 0; max-width: 100%; }
.sv .sv-content .lesson-image-caption { color: var(--sv-muted); font-size: 14px; }
.sv .sv-content .lesson-html blockquote,
.sv .sv-content .lesson-quote {
  margin: 0;
  padding: var(--sv-card-pad);
  background: linear-gradient(135deg, var(--sv-white) 0%, var(--sv-warm) 100%);
  border: 1px solid var(--sv-line);
  border-left: 4px solid var(--sv-gold-line);
  border-radius: 14px;
  box-shadow: var(--sv-shadow);
  font-family: 'Playfair Display', serif;
  font-style: normal;
  color: var(--sv-ink);
}
.sv .sv-content .lesson-quote-caption { color: var(--sv-muted); font-family: 'Inter', sans-serif; }
.sv .sv-content .lesson-divider-svg { margin: 16px 0; }
.sv .sv-content .lesson-link-button { margin: 0; }
.sv .sv-content .lesson-text-button-wrap { margin: 0; }
.sv .sv-content .lesson-text-button {
  min-height: 44px;
  padding: 15px 24px;
  border-radius: 10px;
  background: var(--sv-terracotta);
  color: var(--sv-white);
  font-weight: 700;
  line-height: 1.2;
}
.sv .sv-content .lesson-text-button:hover { background: var(--sv-terracotta-dark); color: var(--sv-white); }

/* 12. Questions */
.sv .sv-faq { display: flex; flex-direction: column; gap: 10px; }
.sv .sv-faq details { background: var(--sv-cream); border: 1px solid var(--sv-line); border-radius: 12px; }
.sv .sv-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 20px;
  min-height: 44px;
  font-weight: 700;
  color: var(--sv-ink);
  position: relative;
}
.sv .sv-faq summary::-webkit-details-marker { display: none; }
.sv .sv-faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 22px; line-height: 1.2; color: var(--sv-terracotta); }
.sv .sv-faq details[open] summary::after { content: "\2212"; }
.sv .sv-faq details p { padding: 0 20px 18px; }

.sv .sv-faq-sec { background: var(--sv-white); border-top: 1px solid var(--sv-line); }

/* 768px and up */
@media (min-width: 768px) {
  .sv .sv-btn { display: inline-block; }
  .sv .sv-box .sv-btn { display: block; }
  .sv .sv-jump ul { justify-content: center; }
  .sv .sv-timeline li { flex-direction: row; align-items: baseline; gap: 16px; }
  .sv .sv-when { flex: 0 0 170px; }
}

/* 1024px and up: the story beside its price box. */
@media (min-width: 1024px) {
  .sv .sv-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
    align-items: start;
    padding-left: max(var(--sv-gutter), calc((100% - 1040px) / 2));
    padding-right: max(var(--sv-gutter), calc((100% - 1040px) / 2));
  }
  .sv .sv-tier > * { max-width: none; margin: 0; }
  .sv .sv-box { position: sticky; top: calc(var(--sv-nav-h) + var(--sv-jump-h) + 24px); }
  .sv .sv-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sv *,
  .sv *::before,
  .sv *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}