/* style-0 */
:root{--ivory:#F4ECDF;--ivory-2:#EFE6D5;--cream:#FBF6EC;--ink:#1C2338;--ink-soft:#3A4257;--muted:#6B6A63;--gold:#B08F5B;--gold-deep:#8B6E3F;--line:rgba(28,35,56,0.12);--serif:"Cormorant Garamond","Times New Roman",serif;--sans:"Jost",-apple-system,system-ui,sans-serif;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.7}
a{color:var(--gold-deep);text-decoration:underline;text-decoration-color:rgba(176,143,91,.3);text-underline-offset:3px;transition:color .2s}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.narrow{max-width:860px;margin:0 auto;padding:0 28px}
h1{font-size:clamp(2.2rem,4.2vw,3.6rem);margin-bottom:8px}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:48px}
h3{font-size:1.3rem;margin-top:32px}
p{margin:0 0 18px;color:var(--ink-soft)}
.utility{background:var(--ink);color:var(--cream);font-size:.83rem}
.utility .container{display:flex;justify-content:space-between;align-items:center;padding:10px 28px;gap:16px;flex-wrap:wrap}
header.site .container{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;gap:20px}
.brand-mark{width:40px;height:40px;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,.25);flex-shrink:0}
nav.primary{display:flex;gap:22px;align-items:center}
nav.primary a{font-size:.9rem;color:var(--ink-soft);text-decoration:none;padding:6px 0}
nav.primary a:hover{color:var(--gold-deep)}
.btn-nav{background:var(--gold);color:var(--cream)!important;padding:9px 18px!important;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none!important;border-radius:999px}
.btn-nav:hover{background:var(--gold-deep)!important}
@media (max-width:900px){nav.primary{display:none}}
.page-hero{padding: 44px 0 32px;background:linear-gradient(180deg,var(--cream) 0%,var(--ivory) 100%);text-align:center;border-bottom:1px solid var(--line)}
.page-hero h1 em{font-weight:400;color:var(--gold-deep);font-style:italic}
.page-hero p.lead{max-width:680px;margin:0 auto;font-size:1.1rem}
.breadcrumbs{font-size:.8rem;color:var(--muted);margin-bottom:20px}
section.content{padding: 44px 0}
.info-box{background:var(--ivory);border-left:3px solid var(--gold);padding:24px 28px;margin:32px 0}
.info-box .label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:8px;display:block}
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.94rem}
table th,table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
table th{background:var(--ivory-2);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;font-family:var(--sans);font-weight:500;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:var(--cream);text-decoration:none}
.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,.5)}
.btn.ghost-light:hover{background:var(--cream);color:var(--ink)}
.cta-band{background:var(--ink);color:var(--cream);padding: 44px 0;text-align:center}
.cta-band h2{color:var(--cream)}
.cta-band h2 em{color:var(--gold);font-style:italic;font-weight:400}
.cta-band p{color:rgba(244,236,223,.8);max-width:560px;margin:0 auto 32px}
.cta-band .buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer.site{background:var(--ink);color:rgba(244,236,223,.7);padding:36px 0 20px;font-size:.86rem}
footer.site .container{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
footer h3{color:var(--cream);font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;font-weight:500}
@media (max-width:780px){footer.site .container{grid-template-columns:1fr 1fr;gap:18px}}
.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;letter-spacing:.04em;text-decoration:none}
@media (max-width:1024px){.mobile-call{display:block}body{padding-bottom:56px}}
.lang-switch{background:transparent;color:var(--cream);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(244,236,223,.4);padding:6px 10px;border-radius:2px}
.lang-switch:hover{background:var(--cream);color:var(--ink)}/* 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}
}
/* style-2 */

/* 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-4 */
/* __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-5 */
/* __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-6 */
/* __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-7 */
/* __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-8 */
/* __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-9 */
/* __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}