/* style-0 */
:root {
    --ivory: #F4ECDF;
    --ivory-2: #EFE6D5;
    --cream: #FBF6EC;
    --ink: #1C2338;
    --ink-soft: #3A4257;
    --muted: #6B6A63;
    --gold: #B08F5B;
    --gold-deep: #8B6E3F;
    --sage: #8FA096;
    --line: rgba(28, 35, 56, 0.12);
    --shadow-soft: 0 20px 60px -30px rgba(28, 35, 56, 0.25);
    --shadow-card: 0 2px 4px rgba(28,35,56,.04), 0 24px 48px -24px rgba(28,35,56,.18);
    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --sans: "Jost", -apple-system, system-ui, sans-serif;
  }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-weight: 400;
    overflow-x: hidden;
  }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0 0 16px;
  }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.5rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; }
p { margin: 0 0 16px; color: var(--ink-soft); }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 500;
    margin-bottom: 18px;
  }
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gold);
  }
.italic { font-style: italic; color: var(--muted); }
.utility {
    background: var(--ink);
    color: var(--cream);
    font-size: 0.83rem;
    letter-spacing: 0.04em;
  }
.utility .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 16px;
    flex-wrap: wrap;
  }
.utility .phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
  }
.utility .phone svg { color: var(--gold); }
.utility .links { display: flex; gap: 22px; opacity: 0.88; }
.utility a:hover { color: var(--gold); }
header.site {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(28, 35, 56, .05);
  }
header.site::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
    opacity: .35;
  }
header.site .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 24px;
    position: relative;
  }
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
  }
.brand-mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F4ECDF, #B08F5B 80%);
    display: grid; place-items: center;
    box-shadow: inset 0 -6px 16px rgba(139, 110, 63, 0.25);
    flex-shrink: 0;
  }
.brand-mark svg { color: var(--cream); }
.brand-name {
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
  }
.brand-tag {
    display: block;
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-top: 4px;
  }
nav.primary { display: flex; gap: 28px; align-items: center; }
nav.primary a {
    font-size: 0.95rem;
    color: var(--ink-soft);
    position: relative;
    padding: 6px 0;
    transition: color 0.2s;
  }
nav.primary a:hover { color: var(--gold-deep); }
nav.primary a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width 0.3s ease;
  }
nav.primary a:hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px rgba(28,35,56,0.12);
  }
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(139,110,63,0.22); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--cream); }
.btn.gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn.ghost-light { background: transparent; color: var(--cream); border-color: rgba(244, 236, 223, 0.55); }
.btn.ghost-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero {
    position: relative;
    background:
      radial-gradient(ellipse 80% 60% at 70% 10%, rgba(176,143,91,0.18), transparent 70%),
      radial-gradient(ellipse 60% 50% at 15% 90%, rgba(143,160,150,0.18), transparent 70%),
      linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
    overflow: hidden;
    padding: 40px 0 52px;
  }
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 3%),
      radial-gradient(circle at 75% 60%, rgba(255,255,255,0.4) 0%, transparent 4%),
      radial-gradient(circle at 50% 85%, rgba(255,255,255,0.45) 0%, transparent 3%);
    pointer-events: none;
  }
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.hero-copy h1 span { font-style: italic; color: var(--gold-deep); font-weight: 400; }
.hero-copy p.lead {
    font-size: 1.15rem;
    max-width: 520px;
    margin-bottom: 32px;
  }
.hero-features {
    list-style: none;
    padding: 0; margin: 0 0 36px;
    display: grid; gap: 12px;
  }
.hero-features li {
    position: relative;
    padding-left: 20px;
    color: var(--ink-soft);
    font-size: 0.98rem;
  }
.hero-features li::before {
    content: "";
    position: absolute;
    left: 0; top: 11px;
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
  }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-phone {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 16px;
  }
.hero-phone .num {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--ink);
  }
.hero-phone .lbl {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }
.hero-intake {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 30px 60px -20px rgba(28,35,56,0.18), 0 8px 20px -8px rgba(28,35,56,0.08);
    padding: 30px 30px 26px;
    position: relative;
    align-self: start;
    scroll-margin-top: 80px;
  }
.hero-intake:target {
    animation: vc-form-pulse 1.4s ease;
  }
@keyframes vc-form-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(176,143,91,0.55), 0 30px 60px -20px rgba(28,35,56,0.18); }
    50%  { box-shadow: 0 0 0 16px rgba(176,143,91,0.18), 0 30px 60px -20px rgba(28,35,56,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(176,143,91,0), 0 30px 60px -20px rgba(28,35,56,0.18); }
  }
@media (prefers-reduced-motion: reduce) {
    .hero-intake:target { animation: none; }
  }
@media (max-width: 900px) {
    .hero-intake {
      margin-left: -28px;
      margin-right: -28px;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      padding: 28px 24px 24px;
      box-shadow: 0 10px 30px -16px rgba(28,35,56,0.18);
    }
  }
.hero-intake-head { margin-bottom: 22px; }
.hero-intake-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ivory);
    color: var(--gold-deep);
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 12px;
    margin-bottom: 14px;
  }
.hero-intake-badge svg { color: var(--gold-deep); }
.hero-intake-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px;
  }
.hero-intake-title em {
    font-style: italic;
    color: var(--gold-deep);
    font-weight: 400;
  }
.hero-intake-sub {
    color: var(--ink-soft);
    font-size: 0.96rem;
    margin: 0;
  }
.hero-intake-row { margin-bottom: 14px; }
.hero-intake-label {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 6px;
  }
.hero-intake-sublabel {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
  }
.hero-intake-form input[type="text"],
  .hero-intake-form input[type="tel"],
  .hero-intake-form input[type="email"],
  .hero-intake-form select {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
            appearance: none;
  }
.hero-intake-form input:focus,
  .hero-intake-form select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(176, 143, 91, 0.15);
  }
.hero-intake-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6A63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }
.hero-intake-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
    padding: 15px 24px;
    background: var(--gold-deep);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.25s;
    box-shadow: 0 4px 14px rgba(139,110,63,0.22);
  }
.hero-intake-cta:hover { background: #5D3F20; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,110,63,0.32); }
.hero-intake-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hero-intake-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
  }
.hero-intake-trust svg { color: var(--gold-deep); flex-shrink: 0; }
.hero-intake-or {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
  }
.hero-intake-or span { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
.hero-intake-phone {
    display: inline-block;
    font-family: var(--serif);
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
  }
.hero-intake-phone:hover { color: var(--gold-deep); }
@media (max-width: 768px) {
    .hero-intake { padding: 24px 22px 22px; }
    .hero-intake-title { font-size: 1.55rem; }
    .hero-intake-phone { font-size: 1.45rem; }
  }
.hero-visual { display: none; }
.hero-visual::before { display: none; }
.hero-visual svg { display: none; }
.hero-visual .caption {
    position: absolute;
    bottom: 32px; left: 32px; right: 32px;
    z-index: 2;
    text-align: center;
    color: var(--cream);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(28,35,56,0.4);
  }
section { padding: 32px 0; }
section.tight { padding: 36px 0; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head p { max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
.pillar {
    text-align: center;
    padding: 40px 28px;
    position: relative;
  }
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar-icon {
    width: 72px; height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--ivory);
    display: grid; place-items: center;
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(176,143,91,0.25);
  }
.pillar p { font-size: 0.98rem; }
.promise {
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }
.promise::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176,143,91,0.25), transparent 70%);
    pointer-events: none;
  }
.promise .container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
.promise h2 { color: var(--cream); }
.promise h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.promise p { color: rgba(244,236,223,0.82); font-size: 1.05rem; }
.promise .eyebrow { color: var(--gold); }
.promise .eyebrow::before { background: var(--gold); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: step;
  }
.step {
    position: relative;
    padding: 32px 24px 28px;
    background: var(--cream);
    border: 1px solid var(--line);
    transition: all 0.3s ease;
  }
.step:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    position: absolute;
    top: 20px; right: 24px;
    font-family: var(--serif);
    font-size: 2.8rem;
    line-height: 1;
    color: var(--gold-deep);
    font-style: italic;
    font-weight: 500;
    z-index: 0;
    opacity: 0.85;
  }
.step h3 { padding-right: 64px; }
@media (max-width: 768px) {
    .step::before {
      top: 16px; right: 20px;
      font-size: 2rem;
    }
    .step h3 { padding-right: 52px; }
  }
.step h4 { position: relative; z-index: 1; margin-top: 48px; }
.step p { font-size: 0.92rem; position: relative; z-index: 1; margin-bottom: 0; }
.process-note {
    margin-top: 56px;
    padding: 36px 48px;
    background: var(--ivory-2);
    border-left: 3px solid var(--gold);
    font-size: 0.96rem;
    color: var(--ink-soft);
  }
.process-note strong { color: var(--ink); }
.pricing-section { background: var(--ivory); }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
.price-card {
    background: var(--cream);
    padding: 44px 36px;
    border: 1px solid var(--line);
    display: flex; flex-direction: column;
    transition: all 0.3s ease;
  }
.price-card.featured {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
  }
.price-card.featured h3,
  .price-card.featured .price { color: var(--cream); }
.price-card.featured p,
  .price-card.featured li { color: rgba(244,236,223,0.85); }
.price-card.featured .badge {
    display: inline-block;
    background: var(--gold);
    color: var(--cream);
    padding: 4px 12px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 500;
  }
.price-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.price-card .sub { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 28px; }
.price-card.featured .sub { color: rgba(244,236,223,0.6); }
.price {
    font-family: var(--serif);
    font-size: 3.2rem;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
  }
.price sup { font-size: 1.2rem; font-weight: 400; vertical-align: top; margin-top: 10px; display: inline-block; margin-right: 2px; color: var(--gold-deep); }
.price-card.featured .price sup { color: var(--gold); }
.price-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 28px; }
.price-card.featured .price-sub { color: rgba(244,236,223,0.65); }
.price-card ul {
    list-style: none;
    padding: 0; margin: 0 0 32px;
    flex-grow: 1;
    display: grid; gap: 12px;
  }
.price-card li {
    display: flex; gap: 12px;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.5;
  }
.price-card li svg { color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.price-card li span { flex: 1; }
.price-card.featured li svg { color: var(--gold); }
.price-card .btn { width: 100%; }
.leadership { background: var(--cream); }
.leaders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
.leader {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start;
  }
.leader-photo {
    aspect-ratio: 3 / 4;
    background:
      linear-gradient(160deg, rgba(244,236,223,0.4), rgba(28,35,56,0.15)),
      radial-gradient(ellipse at center, #D8BFA0, #8B6E3F);
    position: relative;
    overflow: hidden;
    display: grid; place-items: center;
    box-shadow: var(--shadow-card);
  }
.leader-photo .initials {
    font-family: var(--serif);
    font-size: 3rem;
    color: var(--cream);
    letter-spacing: -0.02em;
    font-style: italic;
    text-shadow: 0 4px 20px rgba(28,35,56,0.3);
  }
.leader-info h3 { margin-bottom: 4px; }
.leader-role {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 16px;
    font-weight: 500;
  }
.leader-info p { font-size: 0.98rem; }
.testimonials { background: var(--ivory); }
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 740px;
    margin: 0 auto;
  }
.quote {
    background: var(--cream);
    padding: 32px 36px 32px 56px;
    border: 1px solid var(--line);
    border-radius: 12px;
    position: relative;
  }
.quote::before {
    content: "\201C";
    font-family: var(--serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--gold);
    position: absolute;
    top: 12px; left: 20px;
    opacity: 0.5;
  }
.quote p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }
.quote cite {
    font-style: normal;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
.quote cite span { color: var(--gold-deep); display: block; margin-top: 2px; letter-spacing: 0.08em; }
.faq-section { background: var(--cream); }
.faq-groups {
    display: grid;
    gap: 56px;
    max-width: 920px;
    margin: 0 auto;
  }
.faq-cat {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 500;
  }
.faq-group details {
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
  }
.faq-group details:last-child { border-bottom: none; }
.faq-group details summary {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    line-height: 1.35;
    font-weight: 500;
    list-style: none;
    transition: color 0.2s;
  }
.faq-group details summary::-webkit-details-marker { display: none; }
.faq-group details summary::after {
    content: "+";
    font-family: var(--sans);
    font-size: 1.6rem;
    color: var(--gold);
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.3s;
  }
.faq-group details[open] summary::after { content: "–"; }
.faq-group details:hover summary { color: var(--gold-deep); }
.faq-group details p {
    font-size: 0.98rem;
    color: var(--ink-soft);
    margin-top: 14px;
    margin-bottom: 0;
    padding-right: 40px;
    line-height: 1.7;
    animation: faqOpen 0.4s ease;
  }
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
.faq-footer {
    text-align: center;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
.faq-footer p { font-size: 1rem; margin-bottom: 20px; }
.cta-band {
    background:
      linear-gradient(135deg, rgba(28,35,56,0.92), rgba(28,35,56,0.75)),
      radial-gradient(ellipse at top right, var(--gold-deep), var(--ink));
    color: var(--cream);
    text-align: center;
    padding: 36px 0;
  }
.cta-band h2 { color: var(--cream); max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-band h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.cta-band p { color: rgba(244,236,223,0.82); max-width: 560px; margin: 0 auto 36px; font-size: 1.05rem; }
.cta-band .buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
footer.site {
    background: var(--ink);
    color: rgba(244,236,223,0.75);
    padding: 36px 0 20px;
    font-size: 0.86rem;
  }
footer .grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
    margin-bottom: 24px;
  }
footer h4 {
    color: var(--cream);
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 500;
  }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
footer ul li, footer ul a { font-size: 0.86rem; line-height: 1.4; }
footer a:hover { color: var(--gold); }
footer .brand-footer .brand-name { color: var(--cream); }
footer .brand-footer p { color: rgba(244,236,223,0.6); margin-top: 10px; font-size: 0.86rem; line-height: 1.5; }
footer .legal {
    border-top: 1px solid rgba(244,236,223,0.12);
    padding-top: 14px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: rgba(244,236,223,0.5);
    flex-wrap: wrap;
    gap: 10px;
  }
.mobile-call {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--gold-deep);
    color: var(--cream);
    padding: 14px 20px;
    font-weight: 500;
    text-align: center;
    z-index: 40;
    box-shadow: 0 -8px 20px rgba(28,35,56,0.2);
    letter-spacing: 0.04em;
  }
.call-float {
    position: fixed; left: 20px; bottom: 20px;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(28,35,56,0.22), 0 2px 4px rgba(28,35,56,0.14);
    z-index: 45; text-decoration: none;
    transition: transform .2s, background .25s, box-shadow .2s;
  }
.call-float:hover { transform: scale(1.06); background: var(--gold-deep); box-shadow: 0 12px 26px rgba(28,35,56,0.28); }
.call-float:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.call-float svg { width: 30px; height: 30px; color: var(--cream); }
.call-float .label {
    position: absolute; left: 72px;
    background: var(--ink); color: var(--cream);
    padding: 10px 16px; border-radius: 4px;
    font-size: 0.82rem; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .2s;
    font-family: var(--sans); font-weight: 500; letter-spacing: 0.04em;
  }
.call-float:hover .label, .call-float:focus-visible .label { opacity: 1; }
@media (max-width: 1024px) { .call-float { display: none; } }
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
@media (max-width: 960px) {
    nav.primary { display: none; }
    .nav-toggle { display: inline-flex; }
    nav.primary.open {
      display: flex;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--cream);
      flex-direction: column;
      padding: 24px 28px;
      border-bottom: 1px solid var(--line);
      gap: 16px;
    }
    .hero { padding: 36px 0 44px; }
    .hero .container { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { max-width: 420px; margin: 0 auto; width: 100%; }
    .pillars { grid-template-columns: 1fr; gap: 0; }
    .pillar + .pillar { border-left: none; border-top: 1px solid var(--line); }
    .promise .container { grid-template-columns: 1fr; gap: 32px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card.featured { transform: none; }
    .leaders { grid-template-columns: 1fr; gap: 40px; }
    .leader { grid-template-columns: 140px 1fr; gap: 24px; }
    .testimonial-grid { grid-template-columns: 1fr; }
    footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    section { padding: 36px 0; }
    .mobile-call { display: block; }
    body { padding-bottom: 56px; }
    footer .legal { flex-direction: column; }
  }
@media (max-width: 640px) {
    header.site .container { gap: 12px; }
    .brand { gap: 10px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand-name { font-size: 1.05rem; white-space: nowrap; }
    .brand-tag { font-size: 0.6rem; letter-spacing: 0.2em; }
    header.site .btn.gold { display: none; }
  }
@media (max-width: 560px) {
    .utility .links { display: none; }
    .process-grid { grid-template-columns: 1fr; }
    footer .grid { grid-template-columns: 1fr; }
    .leader { grid-template-columns: 1fr; }
    .leader-photo { max-width: 200px; }
    h1 { font-size: 2.4rem; }
  }/* VC-TOOLBAR-C1 - four-up rail, every screen size. */.vc-toolbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:grid;grid-template-columns:repeat(4,1fr);background:#1C2338;border-top:1px solid rgba(176,143,91,.35);box-shadow:0 -2px 14px rgba(0,0,0,.28);padding-bottom:env(safe-area-inset-bottom,0)}.vc-toolbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:7px 4px;text-decoration:none;color:#F4ECDF;font-family:'Jost',system-ui,sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;transition:color .18s ease,background-color .18s ease}.vc-toolbar a+a{border-left:1px solid rgba(244,236,223,.16)}.vc-toolbar a:hover,.vc-toolbar a:focus-visible{color:#D8B27A;background:rgba(244,236,223,.06)}.vc-toolbar a:focus-visible{outline:2px solid #D8B27A;outline-offset:-4px}.vc-toolbar a:active{background:rgba(244,236,223,.12)}.vc-toolbar .vc-tb-call{color:#D8B27A}.vc-toolbar svg{flex:none}body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))!important}.call-float{display:none!important}@media print{.vc-toolbar{display:none}body{padding-bottom:0!important}}/* The rail is 56px plus a 1px border. Paying for 56 left the last pixel of the final line under it. */body{padding-bottom:calc(57px + env(safe-area-inset-bottom,0))!important}/* Sticky chrome is 136px on a phone. Without this, every in-page anchor lands underneath it and the reader sees nothing happen. Generous on purpose: the header condenses on scroll, so a jump settles with LESS chrome than this reserves. */[id]{scroll-margin-block-start:9rem}@media print{[id]{scroll-margin-block-start:0}}
/* style-1 */
.tldr{background:var(--ivory,#F4ECDF);border-left:3px solid var(--gold,#B08F5B);padding:28px 32px;margin:32px 0 40px;border-radius:2px;max-width:760px}
.tldr .label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep,#8B6E3F);font-weight:500;margin-bottom:10px;display:block;font-family:var(--sans,'Jost',sans-serif)}
.tldr p{margin:0;font-size:1.02rem;line-height:1.65;color:var(--ink,#1C2338);font-family:var(--sans,'Jost',sans-serif)}
.tldr p strong{font-weight:600;color:var(--ink,#1C2338)}
.tldr p em{font-style:italic;color:var(--gold-deep,#8B6E3F)}
@media (max-width:720px){
  .tldr{padding:22px 22px;margin:24px 16px 32px}
  .tldr p{font-size:.98rem}
}
/* vc-mobilebar-css */

.vc-mobilebar{display:none}
@media (max-width:1024px){
.vc-mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#1C2338;box-shadow:0 -2px 12px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom,0)}
.vc-mobilebar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.1;white-space:nowrap}
.vc-mb-call{flex:1.7;background:#B08F5B;color:#1C2338}
.vc-mb-sms{flex:1;background:#1C2338;color:#F4ECDF;border-left:1px solid rgba(244,236,223,.25)}
body{padding-bottom:60px}
.call-float{display:none!important}
.vc-cookie{bottom:calc(50px + env(safe-area-inset-bottom,0px))!important}
}
@media print{.vc-mobilebar{display:none!important}}

/* style-3 */
/* __VC-HDR-FIT-V1__ — the header is a nowrap flex row and at phone widths its items
   overshoot the container, pushing button.nav-toggle off the right edge where
   body{overflow-x:hidden} clips it. Measured 2026-08-21 at a 375px layout
   viewport: 1.1 of the button's 44 pixels were visible, so the menu was
   unreachable on every phone.

   The rule that was supposed to prevent this targets `header.site .btn.gold`,
   a class no header on this site has carried for some time. It matched nothing
   and failed silently.

   These four declarations together return the toggle to fully visible while
   KEEPING the Start Arrangements button, which is deliberate: that page is in
   neither the mobile menu nor the bottom toolbar, so hiding its header button
   would leave a phone with no route to it at all.

   Do not raise the gap or the padding back without re-measuring the toggle at
   375px. The margin here is about 16px. */
@media (max-width: 640px){
  body header.site > .container{ padding-left:16px; padding-right:16px; gap:8px; }
  body header.site .brand{ min-inline-size:0; }
  body header.site .brand-tag{ display:none; }
  body header.site .btn-nav{ padding-left:10px; padding-right:10px;
                             font-size:.82rem; white-space:nowrap; }
}
/* style-4 */
/* __VC-NAV-CTA-V1__ — /start-arrangements.html was reachable on a phone ONLY through
   the header button. That button is also the item the header-fit fix had to
   fight to keep on screen, so the page had exactly one mobile route and it was
   the fragile one. This adds a second, inside the menu itself.

   Hidden by default and shown only in the OPEN mobile panel: at desktop widths
   the header button is already visible a few pixels away, and two identical
   calls to action side by side is worse than one.

   Selectors are body-prefixed to outrank the per-page inline `nav.primary a`
   rule, the same technique the header-fit block uses. Gold on ink measures
   5.1:1, above the 4.5:1 AA floor for normal text. */
body header.site nav.primary > a.nav-cta{ display:none; }
/* No media query, for the same reason as __VC-NAV-OPEN-V1__: .open is only
   ever set by the toggle, and the toggle only appears when the nav is hidden.
   Guarding this at 960 hid the CTA on the 206 pages whose menu opens as wide
   as 1024 - measured at 990px on /pricing.html, where the panel opened with 8
   links and Start Arrangements inside it computed 0x0. */
body header.site nav.primary.open > a.nav-cta{
  display:inline-flex; justify-content:center; align-items:center;
  margin:0 0 4px; padding:12px 18px; border-radius:999px;
  background:var(--gold,#B08F5B); color:var(--ink,#1C2338);
  font-size:.8rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
}
body header.site nav.primary.open > a.nav-cta::after{ content:none; }
/* style-5 */
/* __VC-NAV-OPEN-V1__ — pressing the hamburger sets .open on nav.primary, and on 177 of
   the 385 pages nothing in any stylesheet responded to that class: 97 Spanish
   pages and 80 English ones had no rule for it at all, so the button toggled
   state and the panel stayed display:none. Measured on the deployed site.

   NO MEDIA QUERY, on purpose. The class is only ever set by the toggle, and
   the toggle is now only ever visible when the nav is already hidden (see
   nav-4.js), so this cannot fire at a width where the full nav is showing.
   Guarding it with a breakpoint would just reintroduce the mismatch: the pages
   hide their nav at 1024, 960, 900 and 860 and there is no single number that
   is right for all of them.

   Specificity (0,4,3) beats every existing `nav.primary{display:none}` at
   (0,1,1). Verified first that no page hides it with !important. */
body header.site nav.primary.open{
  /* align-items EXPLICITLY, because the base rule is nav.primary{align-items:
     center} and neither .open rule overrode it. Measured on the deployed site
     at 375px: the English panel stretched its CTA to 319px and the Spanish one
     centred the same control at 170px. Same component, two widths, and the
     narrower one is a smaller tap target for no reason. */
  display:flex; flex-direction:column; align-items:stretch;
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:var(--cream,#FBF6EC);
  padding:24px 28px; gap:16px;
  border-bottom:1px solid var(--line,rgba(28,35,56,.12));
  max-height:calc(100vh - 100%); overflow-y:auto;
}
/* style-6 */
/* __VC-MEASURE-V1__ — running text had no maximum measure anywhere except the blog.
   Measured on the deployed site at 1440px, using the font's real ch (10.80px
   at 18px in Jost, i.e. 0.6em — an earlier pass used 0.5em and overstated
   every count by about 20%):

       compliance footer   1144px @ 11.52px   166 characters a line
       FAQ answers          920px @ 15.68px    98
       interior body copy  1144px @ 18px      106
       .narrow                804px @ 18px     74   (already right)
       blog post              704px @ 18px     65   (already ideal)

   The comfortable band for continuous text is about 45–75.

   SCOPE IS DELIBERATELY NARROW. An earlier version of this block also capped
   `section.content > .container > p` and it left-anchored a CENTRED section
   intro — "New to this? See exactly what happens…" — which sat at x 63 inside
   a container starting at x 35 with its text still centred. A max-inline-size
   with no auto margin does that to any centred block, and CSS cannot ask what
   text-align resolved to. Interior body copy therefore still runs at ~106
   characters and is left for a design decision rather than guessed at.

   What is capped here is only text that is unambiguously left-aligned prose:
   the FTC compliance footer, and the FAQ answers. Both were verified centre-
   free in the browser before this shipped.

   ch rather than px so one number serves every font size: 72ch is 778px for
   18px body copy and 497px for the 11.52px legal footer. */
:root{ --measure: 72ch; }
body footer .vc-compliance p{ max-inline-size: var(--measure); }
body .faq-group details p{ max-inline-size: var(--measure); }

/* Interior running text. Added after the first pass capped only the footer and
   the FAQ, which left the actual reading copy at 106 characters a line.
   Tables, price grids and card layouts are untouched on purpose — a price
   table is data and wants the width. */
body section.content > .container > p,
body section.content > .container > ul,
body section.content > .container > ol,
body section.content > .container > dl,
body section.content .info-box > p,
body section.content .info-box > ul,
body section.content .info-box > ol{ max-inline-size: var(--measure); }

/* A centred paragraph must keep its centre once it is capped, or it anchors
   left with its text still centred and looks broken. This is what stopped the
   first attempt from shipping. 113 paragraphs sitewide declare the alignment
   in their own inline style, in both spellings; !important because those
   inline styles usually also carry a `margin` shorthand, and an inline
   shorthand beats a stylesheet longhand. */
body section.content p[style*="text-align:center"],
body section.content p[style*="text-align: center"]{ margin-inline: auto !important; }

/* style-7 */
/* __VC-UTILBAR-FIT-V1__ — at phone widths the top utility bar compressed .vc-util-phone
   from its natural 123px down to 95px and, because the number is nowrap, the
   glyphs were painted 18px outside the box and 8px into the Español link.
   Measured on the deployed homepage at a 375px layout viewport.

   The cause is `.vc-util-phone{min-width:0}`, which removes the automatic
   minimum that normally stops a flex item shrinking below its own content.

   The utility CTA is hidden below 30rem to make the room this needs. It is the
   fourth route to /start-arrangements — the header button, the mobile menu and
   the bottom toolbar all still carry it — and it was occupying 40% of a 375px
   bar while the phone number was the item being squashed.

   Do not restore min-width:0 here without re-measuring the phone's scrollWidth
   against its offsetWidth at 375px. */
@media (max-width: 30rem){
}
/* style-8 */
/* __VL-DROPDOWN-FIX-V3__ collapse on desktop, EXPAND INSIDE THE OPEN PANEL */
nav.primary .dropdown{position:relative}
nav.primary .dropdown-menu{display:none;position:absolute;top:100%;left:-20px;background:#fff;min-width:240px;padding:12px 0;box-shadow:0 20px 40px -12px rgba(28,35,56,.18);border:1px solid var(--line);z-index:100}
nav.primary .dropdown:hover .dropdown-menu,nav.primary .dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 20px;font-size:.88rem;color:var(--ink-soft);text-decoration:none}
.dropdown-menu a:hover{background:var(--ivory);color:var(--ink)}
/* THE PANEL IS THE MENU. Keyed on .open, NOT on a viewport width.
   v2 used @media (max-width:1024px) and that was wrong: this site has a
   961-1024px dead band where the nav is still a DESKTOP ROW while that
   query already matches, so the submenu expanded inline and the header
   grew back to 933px with the panel CLOSED. .open exists only while the
   hamburger panel is genuinely open, so it cannot drift with a
   breakpoint. Hover has no effect on touch; this is what makes the 20
   Resources links reachable from a phone. */
nav.primary.open .dropdown{width:100%}
nav.primary.open .dropdown-menu{display:block;position:static;box-shadow:none;border:none;padding:8px 0 8px 16px;min-width:auto;background:transparent}
nav.primary.open .dropdown-menu a{padding:10px 0;font-size:.95rem}