/* Extracted shared CSS. Do not edit by hand — regenerate via build/extract_shared_css.py */
footer.site h3{color:var(--cream);font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px;font-weight:500;line-height:1.2}
.skip-link{position:absolute;left:-9999px;top:0;background:#1C2338;color:#fff;padding:12px 18px;z-index:9999;text-decoration:none;font-weight:500}
.skip-link:focus{left:8px;top:8px;outline:2px solid #B08F5B;outline-offset:2px}
:focus-visible{outline:2px solid #B08F5B;outline-offset:2px;border-radius:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.mobile-call { display: none !important; }
.call-float { display: flex !important; }
@media (max-width: 1024px) {
  .mobile-call { display: none !important; }
  .call-float { display: flex !important; left: 18px !important; bottom: 18px !important; width: 58px !important; height: 58px !important; }
  .call-float svg { width: 26px !important; height: 26px !important; }
  .call-float .label { display: none !important; }
}
@media (max-width: 480px) {
  .call-float { left: 16px !important; bottom: 16px !important; width: 56px !important; height: 56px !important; }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
::view-transition-old(root) { animation-name: vc-vt-fade-out; }
::view-transition-new(root) { animation-name: vc-vt-fade-in; }
@keyframes vc-vt-fade-out { to { opacity: 0; transform: translateY(-2px); } }
@keyframes vc-vt-fade-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.vc-cookie{position:fixed;left:0;right:0;bottom:0;background:rgba(28,35,56,.97);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--gold,#B08F5B);box-shadow:0 -4px 16px rgba(28,35,56,.16);padding:8px 18px;z-index:200;font-family:var(--sans,"Jost",system-ui,sans-serif);font-size:.8rem;line-height:1.4;color:rgba(244,236,223,.9);display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;animation:vcCookieSlideUp .3s ease}
.vc-cookie[hidden]{display:none!important}
@keyframes vcCookieSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.vc-cookie-title{display:inline;margin:0;font-family:var(--sans,"Jost",system-ui,sans-serif);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#B08F5B);margin-right:6px;white-space:nowrap}
.vc-cookie p{display:inline;margin:0;color:rgba(244,236,223,.85);font-size:.8rem}
.vc-cookie a{color:var(--gold,#B08F5B);text-decoration:underline;text-decoration-color:rgba(176,143,91,.5);text-underline-offset:2px}
.vc-cookie a:hover{color:#FBF6EC}
.vc-cookie-row{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:auto}
.vc-cookie-btn{background:var(--gold,#B08F5B);color:var(--ink,#1C2338);border:0;padding:6px 14px;font-family:inherit;font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.vc-cookie-btn:hover{background:#FBF6EC}
.vc-cookie-btn:focus-visible{outline:2px solid var(--cream,#FBF6EC);outline-offset:2px}
.vc-cookie-link{background:none;border:0;color:rgba(244,236,223,.65);font-size:.72rem;text-decoration:underline;cursor:pointer;padding:4px 6px;font-family:inherit}
.vc-cookie-link:hover{color:var(--cream,#FBF6EC)}
@media (max-width:640px){.vc-cookie{padding:7px 12px;gap:8px;font-size:.74rem}.vc-cookie p{font-size:.74rem}.vc-cookie-title{font-size:.65rem;letter-spacing:.12em}.vc-cookie-btn{padding:5px 12px;font-size:.68rem}.vc-cookie-link{font-size:.68rem;padding:3px 4px}}
.vc-cookie:not([hidden])~.call-float,body:has(.vc-cookie:not([hidden])) .call-float{bottom:60px!important}
.vc-exit{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;font-family:var(--sans,"Jost",system-ui,sans-serif)}
.vc-exit[hidden]{display:none!important}
.vc-exit-backdrop{position:absolute;inset:0;background:rgba(28,35,56,.7);backdrop-filter:blur(4px);animation:vcFadeIn .25s ease}
.vc-exit-card{position:relative;background:var(--cream,#FBF6EC);max-width:480px;width:100%;padding:48px 40px 36px;border-top:4px solid var(--gold,#B08F5B);box-shadow:0 40px 80px -20px rgba(28,35,56,.4);animation:vcSlideUp .35s ease;text-align:center}
.vc-exit-close{position:absolute;top:14px;right:14px;background:transparent;border:0;width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--ink-soft,#3A4257);display:grid;place-items:center;font-size:1.6rem;line-height:1;font-family:inherit;transition:background .2s}
.vc-exit-close:hover{background:var(--ivory,#F4ECDF);color:var(--ink,#1C2338)}
.vc-exit-close:focus-visible{outline:2px solid var(--gold,#B08F5B);outline-offset:2px}
.vc-exit .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep,#8B6E3F);font-weight:500;margin-bottom:12px;justify-content:center}
.vc-exit .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold,#B08F5B)}
.vc-exit h2{font-family:var(--serif,"Cormorant Garamond",serif);font-size:1.9rem;font-weight:500;color:var(--ink,#1C2338);margin:0 0 12px;letter-spacing:-.01em;line-height:1.15}
.vc-exit h2 em{font-style:italic;font-weight:400;color:var(--gold-deep,#8B6E3F)}
.vc-exit-body{color:var(--ink-soft,#3A4257);margin:0 0 24px;font-size:.98rem;line-height:1.6}
.vc-exit-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.vc-exit-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink,#1C2338);background:var(--ink,#1C2338);color:var(--cream,#FBF6EC);transition:all .2s;font-family:inherit;cursor:pointer;border-radius:999px;box-shadow:0 3px 10px rgba(28,35,56,.12)}
.vc-exit-btn:hover{background:var(--gold-deep,#8B6E3F);border-color:var(--gold-deep,#8B6E3F)}
.vc-exit-btn.gold{background:var(--gold,#B08F5B);border-color:var(--gold,#B08F5B)}
.vc-exit-btn.gold:hover{background:var(--gold-deep,#8B6E3F);border-color:var(--gold-deep,#8B6E3F)}
.vc-exit-btn.ghost{background:transparent;color:var(--ink,#1C2338)}
.vc-exit-btn.ghost:hover{background:var(--ink,#1C2338);color:var(--cream,#FBF6EC)}
.vc-exit-foot{font-size:.78rem;color:var(--muted,#6B6A63);margin:0}
.vc-exit-foot button{background:none;border:0;color:var(--muted,#6B6A63);text-decoration:underline;cursor:pointer;font-size:inherit;padding:0;font-family:inherit}
.vc-exit-foot button:hover{color:var(--ink,#1C2338)}
@keyframes vcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes vcSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.vc-exit-backdrop,.vc-exit-card{animation:none}}
@media (max-width:640px){.vc-exit-card{padding:40px 24px 28px}.vc-exit h2{font-size:1.55rem}}
.vc-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:rgba(139,110,63,.08);pointer-events:none;z-index:100}
.vc-progress::before{content:"";display:block;height:100%;width:var(--vc-scroll,0%);background:linear-gradient(90deg,#B08F5B,#8B6E3F);transition:width .1s linear;will-change:width}
.vc-progress.vc-hide{display:none}
@media (prefers-reduced-motion:reduce){.vc-progress::before{transition:none}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(244,236,223,.4)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B08F5B,#8B6E3F);border-radius:6px;border:2px solid rgba(244,236,223,.4)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8B6E3F,#5D3F20)}
html{scrollbar-color:#8B6E3F rgba(244,236,223,.4);scrollbar-width:thin}
:focus-visible{outline:2px solid #B08F5B;outline-offset:2px;border-radius:2px;box-shadow:0 0 0 4px rgba(176,143,91,.18);transition:box-shadow .15s ease,outline-offset .15s ease}
.btn:focus-visible,.btn-nav:focus-visible{outline-offset:3px;box-shadow:0 0 0 5px rgba(176,143,91,.2)}
.btn.gold,.vc-exit-btn.gold{position:relative;overflow:hidden;isolation:isolate}
.btn.gold::after,.vc-exit-btn.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);transform:translateX(-100%);transition:transform .7s ease;z-index:-1;pointer-events:none}
.btn.gold:hover::after,.vc-exit-btn.gold:hover::after{transform:translateX(100%)}
nav.primary > a, nav.primary .dropdown > a{position:relative}
nav.primary > a::after, nav.primary .dropdown > a::after{content:"";position:absolute;left:0;right:auto;bottom:-2px;height:2px;width:0;background:linear-gradient(90deg,#B08F5B,#8B6E3F);transition:width .28s ease}
nav.primary > a:hover::after, nav.primary > a:focus-visible::after, nav.primary .dropdown:hover > a::after, nav.primary .dropdown:focus-within > a::after{width:100%}
h1 em, .page-hero h1 em{background:linear-gradient(90deg,#8B6E3F 0%,#B08F5B 35%,#D4BD8F 50%,#B08F5B 65%,#8B6E3F 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vcSheen 9s ease-in-out infinite}
@keyframes vcSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.card,.price-card,.obit-card,.quote,.leader{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.obit-card:hover,.quote:hover,.leader:hover{transform:translateY(-3px);box-shadow:0 18px 42px -20px rgba(139,110,63,.22),0 4px 10px -4px rgba(28,35,56,.08)}
img[loading="lazy"]{opacity:1}
::selection{background:rgba(176,143,91,.35);color:#1C2338}
::-moz-selection{background:rgba(176,143,91,.35);color:#1C2338}
.count-up{font-variant-numeric:tabular-nums;display:inline-block;min-width:1ch}
.read-time{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6B6A63);font-weight:500}
.read-time:not(:empty)::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold,#B08F5B);margin-right:8px;vertical-align:middle}
@media (prefers-reduced-motion:reduce){
  :focus-visible{transition:none}
  .btn.gold::after,.vc-exit-btn.gold::after{display:none}
  nav.primary > a::after, nav.primary .dropdown > a::after{transition:none}
  h1 em, .page-hero h1 em{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--gold-deep,#8B6E3F)}
  .card:hover,.obit-card:hover,.quote:hover,.leader:hover{transform:none}
  img[loading="lazy"]{transition:none;opacity:1}
}
.call-float{position:fixed;left:20px;bottom:20px;width:62px;height:62px;border-radius:50%;background:#8B6E3F !important;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(28,35,56,.28),0 3px 6px rgba(28,35,56,.15);z-index:45;text-decoration:none;transition:transform .2s,background .25s,box-shadow .2s}
.call-float:hover{transform:scale(1.06);background:#5D3F20 !important;box-shadow:0 14px 30px rgba(139,110,63,.38)}
.call-float:focus-visible{outline:2px solid #1C2338;outline-offset:4px}
.call-float svg{width:30px;height:30px;color:#FBF6EC}
.call-float .label{position:absolute;left:74px;background:#1C2338;color:#FBF6EC;padding:10px 16px;border-radius:4px;font-size:.82rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-family:"Jost",-apple-system,system-ui,sans-serif;font-weight:500;letter-spacing:.04em}
.call-float:hover .label,.call-float:focus-visible .label{opacity:1}
@media (max-width:1024px){.call-float{display:none}}
*,*::before,*::after{box-sizing:border-box}
a:hover{color:var(--ink)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
: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);--serif:"Cormorant Garamond","Times New Roman",serif;--sans:"Jost",-apple-system,system-ui,sans-serif;--motion-instant:120ms;--motion-quick:240ms;--motion-base:400ms;--motion-slow:600ms;--motion-stagger:90ms;--ease-out:cubic-bezier(0.22,0.61,0.36,1);--ease-in-out:cubic-bezier(0.45,0,0.20,1);--motion-rise:12px;--motion-lift:2px;}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0 0 16px;color:var(--ink)}
strong{color:var(--ink)}
ul,ol{padding-left:24px}
li{margin-bottom:8px;color:var(--ink-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:20px}
.utility{background:var(--ink);color:var(--cream);font-size:.83rem;letter-spacing:.04em}
.utility .container{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;gap:16px;flex-wrap:wrap}
.utility a{color:var(--cream);text-decoration:none}
.utility .phone{display:inline-flex;align-items:center;gap:8px;font-weight:500}
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)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.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;color:var(--cream)}
.brand-name{font-family:var(--serif);font-size:1.2rem;line-height:1.05}
.brand-tag{display:block;font-family:var(--sans);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);margin-top:3px}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--gold-deep)}
footer h4{color:var(--cream);font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:4px;font-size:.86rem;line-height:1.4}
footer a{color:rgba(244,236,223,.7);text-decoration:none}
footer a:hover{color:var(--gold)}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(244,236,223,.12);padding-top:14px;margin-top:8px;font-size:.74rem;color:rgba(244,236,223,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.call-float{position:fixed;left:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:var(--gold,#B08F5B);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(28,35,56,.22),0 2px 4px rgba(28,35,56,.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,#8B6E3F);box-shadow:0 12px 26px rgba(28,35,56,.28)}
.call-float:focus-visible{outline:2px solid var(--ink,#1C2338);outline-offset:4px}
.call-float .label{position:absolute;left:72px;background:#1C2338;color:#FBF6EC;padding:10px 16px;border-radius:4px;font-size:.82rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--sans,"Jost",system-ui,sans-serif);font-weight:500;letter-spacing:.04em}

/* Trailing gap after chart-like blocks (cards, tables, related) so following content
   does not hug them after the 2026-07-24 section-spacing tightening. */
.card-grid,table,figure,.related,.related-links{margin-bottom:32px}

/* CSP: replaces removed inline onmouseover/out border hover on team link */
.hover-gold-underline:hover{border-bottom-color:var(--gold)!important}

/* ==== VC-TBLSTACK-V2 (promoted to sitewide 2026-08-18) ====
   Was a per-page <style> on 15 of 381 pages, so any page that later gained a
   wide table rendered unstacked on phones. Sitewide by default now. */
/* VC-TBLSTACK-V2 — wide tables become labelled cards on phones. */
.vc-tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-inline-size:100%}
@media (max-width:720px){
.vc-tblscroll[data-stack]{overflow-x:visible;border-inline-start:0}
.vc-tblscroll[data-stack]>table,.vc-tblscroll[data-stack]>table tbody,.vc-tblscroll[data-stack]>table tr{display:block;width:100%}
.vc-tblscroll[data-stack]>table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vc-tblscroll[data-stack]>table tr{border:1px solid var(--line,#E7DFD2);border-radius:2px;padding:4px 0;margin:0 0 14px;background:#fff}
.vc-tblscroll[data-stack]>table td[data-rowhead],.vc-tblscroll[data-stack]>table th[scope=row]{display:block;background:var(--ivory,#F4ECDF);border-bottom:0;padding:12px 16px;font-family:var(--serif,Georgia,serif);font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--ink,#1C2338);font-weight:600}
.vc-tblscroll[data-stack]>table td{display:block;border-bottom:0;padding:10px 16px 12px}
.vc-tblscroll[data-stack]>table td+td{border-top:1px solid var(--line,#E7DFD2)}
.vc-tblscroll[data-stack]>table td[data-rowhead]::before{content:none}
.vc-tblscroll[data-stack]>table td[data-rowhead]+td{border-top:0}
.vc-tblscroll[data-stack]>table td::before{content:attr(data-label);display:block;font-family:var(--sans,Jost,sans-serif);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep,#8B6E3F);font-weight:500;margin-bottom:5px}
.vc-tblscroll[data-stack]>table tr:hover td{background:transparent}
.vc-tblscroll[data-stack]>table caption{text-align:left;padding:0 0 10px;font-size:.85rem;color:var(--muted,#6B7280)}
}

/* __VC-PILL-BUTTONS-V1__ */
.vc-util-cta,
.search-toggle,
.nav-toggle,
.vc-cookie-btn,
.vc-cookie-link{border-radius:999px}
.vc-cookie-link{padding:4px 12px}
.vc-cookie-btn{padding:5px 16px}
/* __VC-VIDEO-V1__ */
.vc-vid{margin:28px auto 0;max-width:760px}
.vc-vid video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#1C2338;
 border:1px solid rgba(28,35,56,.14);border-radius:10px;
 box-shadow:0 18px 40px -22px rgba(28,35,56,.42)}
.vc-vid figcaption{margin-top:10px;font-size:.86rem;color:#5A6072;line-height:1.5}
.vc-vid figcaption strong{color:#1C2338}
/* __VC-VIDEO-TX-V1__ */
.vc-vid-tx{margin-top:12px;font-size:.9rem}
.vc-vid-tx summary{cursor:pointer;color:#8B6E3F;font-weight:500;list-style:none}
.vc-vid-tx summary::-webkit-details-marker{display:none}
.vc-vid-tx summary::before{content:"+ ";font-weight:600}
.vc-vid-tx[open] summary::before{content:"- "}
.vc-vid-tx p{margin:10px 0 0;color:#5A6072;line-height:1.65;max-width:64ch}
/* __VC-BTNROW-V1__ */
.buttons,.hero-ctas,.cta-row{display:flex;flex-wrap:nowrap;gap:12px;align-items:stretch}
.buttons>.btn,.hero-ctas>.btn,.cta-row>.btn{flex:1 1 auto;min-inline-size:min(max-content,100%);white-space:normal;text-wrap:balance;
 text-align:center;justify-content:center}
@media(max-width:30rem){
 .buttons,.hero-ctas,.cta-row{gap:8px}
 .buttons>.btn,.hero-ctas>.btn,.cta-row>.btn{font-size:.78rem;padding-left:12px;padding-right:12px}
}

/* ── Reduced motion: the site's own switch ────────────────────────────────
   The OS preference is handled above. This is the manual control WCAG 2.2.2
   asks for and that the brief calls non-negotiable: a visitor on a borrowed
   phone, or one who has never heard of the OS setting, still gets a way out.
   `data-motion="off"` is stamped on <html> by /js/motion.js before first paint.
   Deliberately blunt and !important — when someone asks for motion to stop,
   every later rule loses. */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] ::view-transition-group(*),
html[data-motion="off"] ::view-transition-old(*),
html[data-motion="off"] ::view-transition-new(*) { animation: none !important; }

/* -- Tier 2: readability and touch ---------------------------------------
   BODY COPY 16 -> 18px. Set on body, NOT on html: body's font-size does not
   move the rem basis, so everything sized in rem - headings, buttons, cards -
   holds its exact position and only inherited running text grows. Putting this
   on html{} would have rescaled the whole site in one go.

   TAP TARGETS. WCAG 2.2 SC 2.5.8 sets 24x24 as the AA floor; 48px is the
   comfortable target and what this audience needs. Scoped to real controls
   only - an inline anchor inside a paragraph must never get min-height, which
   would blow apart its line box. Inline links get a padded hit area instead. */
body { font-size: 1.125rem; }




/* == Tier 1: motion ======================================================
   Every duration and easing below is a token from :root. Nothing here spells
   out its own number, which is what makes "nothing translates further than
   --motion-rise" an assertion the audit can actually check.

   CROSS-DOCUMENT VIEW TRANSITIONS. Today the header repaints on every
   navigation, so the phone number visibly blinks out and back. Naming the
   header and the call control means the browser treats them as the SAME
   element across pages and holds them still while the page beneath changes.
   That number is the thing a person in crisis is looking for; it should never
   flicker.

   A view-transition-name must be UNIQUE in a document. 352 Vargas pages carry
   both .call-float and .vc-mobilebar, so they get separate names - sharing one
   would make the browser silently drop the transition for the whole page. */
@view-transition { navigation: auto; }

header.site, header.hdr { view-transition-name: site-header; }
.call-float               { view-transition-name: call-float; }
.vc-mobilebar, .callbar   { view-transition-name: call-bar; }

::view-transition-group(site-header),
::view-transition-group(call-float),
::view-transition-group(call-bar) {
  animation-duration: var(--motion-quick);
  animation-timing-function: var(--ease-out);
}

/* Condensing header. The sentinel that drives this is created by motion.js;
   there is no scroll listener. Recovers about 40px of vertical space, which on
   a phone is one more row of the price table above the fold. */
header.site, header.hdr {
  transition: padding var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
html.hdr-condensed header.site,
html.hdr-condensed header.hdr {
  box-shadow: 0 1px 0 var(--line, rgba(28,35,56,.12)),
              0 8px 22px rgba(28,35,56,.07);
}
html.hdr-condensed header.site > .container,
html.hdr-condensed header.hdr > .container,
html.hdr-condensed header.hdr > .hdr-inner {
  padding-block: 6px;
}
html.hdr-condensed header.site img,
html.hdr-condensed header.hdr img {
  transform: scale(.86);
  transition: transform var(--motion-base) var(--ease-out);
  transform-origin: left center;
}

/* Section reveals.
   THE FAIL-SAFE: the hiding rule is scoped to html.js-motion, and that class is
   added by motion.js only at the moment the observer is constructed. If the
   script 404s, throws, or the browser has no IntersectionObserver, none of
   this applies and every section is simply visible. Content must never depend
   on a script to be readable. */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero load stagger. `both` fill would leave the hero at opacity 0 before the
   animation begins - which is safe ONLY because html.hero-stagger is added by
   script. No class, no animation, hero visible. The h1 is first at 0ms: it
   carries the price and is the LCP candidate, so it never waits on anything. */
@keyframes vl-rise {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to   { opacity: 1; transform: none; }
}
html.hero-stagger .hero > *,
html.hero-stagger .hero-frame > * {
  animation: vl-rise var(--motion-base) var(--ease-out) both;
}
html.hero-stagger .hero > *:nth-child(1),
html.hero-stagger .hero-frame > *:nth-child(1) { animation-delay: 0ms; }
html.hero-stagger .hero > *:nth-child(2),
html.hero-stagger .hero-frame > *:nth-child(2) { animation-delay: var(--motion-stagger); }
html.hero-stagger .hero > *:nth-child(3),
html.hero-stagger .hero-frame > *:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }
html.hero-stagger .hero > *:nth-child(n+4),
html.hero-stagger .hero-frame > *:nth-child(n+4) { animation-delay: calc(var(--motion-stagger) * 3); }

/* Variable-weight hover. Only possible because fonts.css was collapsed to a
   ranged face - with four pinned single-weight faces this snapped between
   stops instead of easing. Deliberately small: 500 -> 600 is felt, not seen. */
nav a, .hdr-nav a, .btn {
  transition: font-variation-settings var(--motion-quick) var(--ease-out),
              color var(--motion-quick) var(--ease-out);
}
nav a:hover, .hdr-nav a:hover { font-variation-settings: "wght" 600; }

/* The footer control. Styled as a real button because it is one. */
.motion-toggle {
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: .82rem;
  color: inherit;
  opacity: .85;
  cursor: pointer;
  min-height: 48px;
}
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; }
.motion-toggle [data-motion-state] { font-weight: 600; }
@media print { .motion-toggle { display: none; } }

/* == Tier 4: the three flourishes (brief section 7) ======================= */

@font-face {
  font-family: 'VL Signature';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/petitformalscript-signature.woff2) format('woff2');
  /* Subset to exactly the glyphs of "Vargas-London" - 2,116 bytes. The
     unicode-range keeps it from ever being pulled for ordinary text. */
  unicode-range: U+0020, U+002D, U+004C, U+0056, U+0061, U+0064, U+0067,
                 U+006E, U+006F, U+0072, U+0073;
}

/* -- 1. Gradient text-fill ------------------------------------------------
   Both stops are AAA on every surface this sits on. The brand gold #B08F5B
   measures 2.81:1 on cream and cannot carry text; --bronze-text is that hue
   darkened until it reaches 7.03:1. The `color` declaration BEFORE the clip is
   the fallback: without it, a browser that lacks background-clip:text paints
   transparent glyphs on a pale page. */
.hero h1 em, .hero-frame h1 em, h1 .accent {
  --bronze-text: #655131;
  color: var(--ink, #1C2338);
  background-image: linear-gradient(100deg,
      var(--ink, #1C2338) 0%,
      var(--ink, #1C2338) 35%,
      var(--bronze-text) 78%,
      var(--bronze-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em, .hero-frame h1 em, h1 .accent { color: transparent; }
}
/* Forced-colours mode throws away background images; hand the text back. */
@media (forced-colors: active) {
  .hero h1 em, .hero-frame h1 em, h1 .accent {
    color: CanvasText;
    background-image: none;
  }
}

/* -- 2. Signature reveal --------------------------------------------------
   Decorative and aria-hidden; the accessible name comes from the real text
   beside it. Never place this near anything a family signs. */
.vl-signature {
  font-family: 'VL Signature', 'Cormorant Garamond', cursive;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink, #1C2338);
  display: inline-block;
  padding-inline-end: .12em;   /* script faces overhang their advance width */
}
html.js-motion .vl-signature {
  -webkit-mask-image: linear-gradient(90deg, #000 0 0);
  mask-image: linear-gradient(90deg, #000 0 0);
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 1100ms var(--ease-out), mask-size 1100ms var(--ease-out);
}
html.js-motion .vl-signature.is-in {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* -- 3. First-24-hours timeline ------------------------------------------
   Decorative spine over headings that already exist. With no JS, or motion
   off, these are the same five headings as before - only the rule and the
   markers are added, and both are inert. */
.vl-timeline { position: relative; padding-inline-start: 34px; }
.vl-timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px 6px;
  inset-inline-start: 8px;
  inline-size: 2px;
  background: var(--line, rgba(28,35,56,.12));
}
.vl-timeline::after {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 8px;
  inline-size: 2px;
  block-size: var(--vl-progress, 0%);
  background: var(--gold-deep, #8B6E3F);
  transition: block-size var(--motion-base) var(--ease-out);
}
.vl-step { position: relative; }
.vl-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -34px;
  inset-block-start: .55em;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--cream, #FBF6EC);
  border: 2px solid var(--line, rgba(28,35,56,.2));
  transition: background var(--motion-quick) var(--ease-out),
              border-color var(--motion-quick) var(--ease-out);
}
.vl-step.is-here::before {
  background: var(--gold-deep, #8B6E3F);
  border-color: var(--gold-deep, #8B6E3F);
}
@media print {
  .vl-timeline::after, .vl-signature { display: none; }
}


/* Hard floor FIRST. This rule only ever raises a target to the WCAG 2.5.8 AA
   minimum; it must never be able to clamp a larger intended size back down.
   `summary` is deliberately absent — it has its own 48px rule below, and
   because a name inside a selector list carries the same specificity as the
   name alone, listing it here and setting 24px LATER silently overrode the 48.
   That is exactly what happened on the first attempt. */
a, button, [role="button"], input, select, textarea {
  min-block-size: 24px;
}

/* Disclosures get the full comfort target everywhere: they are block-level
   rows, so nothing around them shifts when they grow. */
summary {
  min-block-size: 48px;
  display: flex;
  align-items: center;
  gap: .4em;
}
summary::-webkit-details-marker { flex: none; }

@media (pointer: coarse) {
  header.site nav a, header.hdr nav a, .hdr-nav a,
  .vc-util-phone, .vc-util-cta, .search-toggle, .btn-nav,
  .site-footer a, footer.site nav a {
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
  }
}

/* -- Tap targets, RE-SCOPED 2026-08-20 ------------------------------------
   Everything here is wrapped in :where(), which contributes ZERO specificity.
   These rules can raise a target nothing else has sized; they can never beat
   a component that has an opinion. Written the other way round they collided
   with component CSS four times in one day - clamping a 48px summary rule to
   24, pulling the utility CTA into a pill family, and rendering the bottom
   rail at 48px where its own rule asked for 56.

   Order matters between two zero-specificity rules, so the floor comes FIRST:
   a <summary> matches both and correctly ends at 48. */

/* The WCAG 2.5.8 AA floor. Raises only; never clamps. */
:where(a, button, [role="button"], input, select, textarea, summary) {
  min-block-size: 24px;
}

/* The comfort target, for controls that are genuinely buttons. */
:where(.btn, a.btn, input[type="submit"], input[type="button"], .motion-toggle) {
  min-block-size: 48px;
}

/* Disclosures are block-level rows, so growing them shifts nothing around
   them. Full comfort target on every device. */
:where(summary) { min-block-size: 48px; }
summary { display: flex; align-items: center; gap: .4em; }
summary::-webkit-details-marker { flex: none; }

/* Layout mode belongs to the button family, not to every <button> on the site.
   Imposing inline-flex on bare `button` fought the bottom rail, whose cells
   are display:flex;flex-direction:column. */
.btn, a.btn, input[type="submit"], input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inline links in running text: expand the touch area without touching layout.
   The negative margin cancels the padding so the line box is unchanged. */
:where(main p > a, main li > a, .breadcrumbs a, .crumbs a) {
  padding: 6px 2px;
  margin: -6px -2px;
}

/* -- Target size in the footer, 2026-08-21 --------------------------------
   WCAG 2.2 AA 2.5.8 (Target Size, Minimum) asks for 24x24. MEASURED on the
   deployed site under Pixel 8 emulation with pointer:coarse ACTIVE: 35 footer
   links render 19.7px tall while their min-block-size computes to 24px.

   TWO reasons the rules above could not deliver it, both invisible to a file
   scan and to every CI gate:

     1. min-block-size DOES NOT APPLY to non-replaced INLINE elements, and a
        plain <a> is inline. The zero-specificity floor was decorative for
        every ordinary link on the site - it only ever did anything for the
        controls that already carried a display value.

     2. The @media (pointer: coarse) rule aimed at ".site-footer a", a class
        that exists nowhere on this site. The element is <footer class="site">,
        so the selector is footer.site. Its companion "footer.site nav a"
        missed for a second reason: these links live in <ul><li>, not a <nav>.

   :not(p a) encodes the standard's own exception - a link inside running text
   is exempt, and stretching the two links in the licence paragraph would look
   wrong. Verified against the live page: footer.site a = 37, :not(p a) = 35,
   and the two excluded are exactly the licence-line links.

   A HEIGHT FLOOR RATHER THAN PADDING, which is the technique used for main
   content further up this file: footer link boxes are 19.7px with 3.6px
   between them, so the 6px-each-side padding would make adjacent targets
   OVERLAP by 8px and cause mis-taps. Growing the box grows the row pitch with
   it (to ~27.6px), so the targets stay separate.

   24px, not 44px: 24 is the AA requirement. Forcing 44 would roughly double
   the height of a 30-link footer on a phone - a visual decision to take
   deliberately, not to smuggle in behind an accessibility fix. */
footer.site a:not(p a) {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}


/* -- Language switch in the utility bar, 2026-08-21 ------------------------
   Added because the site had NO way to change language: 16 of 292 English
   pages linked into /es/ at all, the homepage none of them, and hreflang only
   helps a searcher who already arrived from Google in Spanish.

   Sized against the 24px target-size floor the footer uses, and placed before
   .vc-util-cta so that on a 375px phone the call-to-action is never the thing
   that wraps off the bar. The label is set in the language being switched TO,
   which is the only convention that works for a reader who cannot read the
   current page. */
.vc-util-lang{
  display:inline-flex; align-items:center; gap:6px;
  min-block-size:24px; padding:2px 8px;
  font-size:.72rem; letter-spacing:.06em; text-decoration:none;
  color:inherit; opacity:.82; border:1px solid currentColor; border-radius:999px;
  white-space:nowrap;
}
.vc-util-lang svg{width:13px;height:13px;flex:0 0 auto}
.vc-util-lang:hover,.vc-util-lang:focus-visible{opacity:1}
/* No max-width rule hiding the label. Measured at 375px: showing the word
   changes the bar height by 0px, causes no overflow, and widens the target
   from 26px to 75px. Hiding it helped nobody and hurt the reader who needs
   it most. */



/* -- Licensed stock photography, 2026-08-21 --------------------------------
   Every one of these carries an ImageObject with license, acquireLicensePage,
   creditText and copyrightNotice. The visible credit line below the image is
   not decoration: two of the four are Creative Commons or Commons-sourced and
   the credit is part of what makes the use lawful. Do not remove it to tidy
   the layout. */
.stock-figure { margin: 28px 0; }
.stock-figure img { border-radius: 2px; }
.stock-figure figcaption {
  margin-top: 8px; font-size: .82rem; color: var(--muted); line-height: 1.45;
}
.stock-figure .credit { display: block; font-size: .74rem; opacity: .8; }


/* -- Google review strip, 2026-08-21 ---------------------------------------
   Rendered by /js/reviews.js from /.netlify/functions/reviews. The empty state
   is the normal state today - the listing has no reviews yet - so this is
   styled to look deliberate when empty rather than like a failed widget. */
.gr { margin: 24px 0 8px; }
.gr-summary { display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px; }
.gr-stars { letter-spacing: .08em; color: var(--gold-deep); }
.gr-score { font-weight: 600; }
.gr-count { color: var(--muted); font-size: .9rem; }
.gr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gr-item { border: 1px solid var(--line); padding: 16px 18px; background: #fff; }
.gr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.gr-avatar { border-radius: 50%; flex: 0 0 auto; }
.gr-who { display: flex; flex-direction: column; gap: 2px; }
.gr-author { font-weight: 600; }
.gr-when { color: var(--muted); font-size: .8rem; }
.gr-text { margin: 0 0 8px; }
.gr-link, .gr-empty a {
  display: inline-flex; align-items: center; min-block-size: 24px;
  font-size: .85rem; color: var(--gold-deep);
}
.gr-empty { color: var(--muted); }
.gr-attrib { margin-top: 12px; font-size: .74rem; color: var(--muted); }

/* __VC-UTILBAR-OPT3-V1__ ------------------------------------------------
   The utility strip as approved in preview-utility-bar.html, "Option 3 -
   tightening", shipped by commit cdfbcc6c and then lost between preview and
   ship: it became one flat navy bar reading "Start online".

   Navy left with the phone, cream right with the links. The two hide- classes
   are the point of the design: Contact goes at 500px and Pricing at 380px, so
   Start > is what survives in the corner on a phone. The bar it replaces hid
   its CTA outright below 480px, which left a phone with no Start there at all.

   These rules live here rather than inline because the old ones were inline on
   all 406 pages and an inline <style> beats a linked sheet at any specificity.
   Those have been removed; this sheet owns the bar now. */
.vc-util{display:flex;align-items:stretch;padding:0;gap:0;font-family:var(--sans)}
.vc-util-phone{background:var(--ink);color:var(--cream);flex:1 1 auto;
  padding:7px 14px;display:flex;align-items:center;gap:8px;text-decoration:none;
  min-inline-size:max-content}
.vc-util-phone:hover{color:var(--cream)}
.vc-util-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--gold);
  flex:none;display:inline-block}
.vc-util-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,236,223,.7);white-space:nowrap;flex-shrink:0}
.vc-util-num{font-family:var(--serif);font-size:.98rem;font-weight:500;
  color:var(--cream);white-space:nowrap;letter-spacing:.02em}
.vc-util-right{background:var(--cream);color:var(--ink-soft);flex:0 1 auto;
  padding:7px 14px;display:flex;align-items:center;justify-content:flex-end;
  gap:14px;font-size:.75rem}
/* MEASURED 4.43:1 with --gold-deep on --cream, which is under AA's 4.5 and is
   what "the text is invisible" actually was. --ink-soft carries the links and
   the CTA takes full --ink plus weight, so it still reads as the action. */
.vc-util-right a{color:var(--ink-soft);text-decoration:none;font-weight:500;
  letter-spacing:.02em;white-space:nowrap}
.vc-util-right .vc-util-cta{color:var(--ink);font-weight:600}
.vc-util-right a:hover{color:var(--ink)}
.vc-util-div{color:var(--muted);opacity:.5}
@media (max-width:500px){
  .vc-util-phone{padding:7px 10px;gap:6px}
  .vc-util-label{display:none}
  .vc-util-right{gap:8px;padding:7px 10px;font-size:.72rem}
  .vc-util-right .hide-narrow{display:none}
}
@media (max-width:380px){ .vc-util-right .hide-tiny{display:none} }

/* __VC-HDR-LANG-PILL-V1__ -----------------------------------------------
   Espanol moves out of the strip and into the header after the logo. It was
   65x24 there -- 24px tall, under any touch-target guidance, with nothing to
   say it was a control. As a pill it is 92x40 and keeps the word, which a
   Spanish speaker finds faster than a globe glyph. Borders in --line, the
   token the search and hamburger buttons already use, so it joins that family
   instead of inventing a third look. Measured at 430/375/360/320: sits between
   the logo and the search icon, header 56.5px, 0 document overflow. */
.hdr-lang{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  color:var(--ink-soft);text-decoration:none;font-family:var(--sans);
  font-size:.78rem;white-space:nowrap;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;min-block-size:40px}
.hdr-lang svg{inline-size:18px;block-size:18px;flex:0 0 auto}
.hdr-lang:hover{border-color:var(--gold);color:var(--gold-deep)}
.hdr-lang:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* __VC-HDR-FIT-V2__ ---------------------------------------------------------
   Reggie sent a screenshot: "Vargas-London" and the Espanol pill drawn over
   each other, and START rendered faint with two chevrons. Three faults:

   1. THE BRAND PAINTS OUTSIDE ITS BOX. .brand is a flex item that shrinks
      below its own content -- it wants 355px and got 151 at 1024, 202 at 660
      -- and with overflow visible the name painted over whatever sat beside
      it. The pill was new there, so the pill is what it hit. This was already
      true before the pill existed; the collision just had nothing to land on.

   2. THE HEADER WAS OVER-FULL FROM 1024 TO 1280, where nav.primary, the
      filled .btn-nav, the pill, search and the menu button all show at once
      -- 95px over at 1024. The bar carries Start > now, so .btn-nav is a
      third route to the same page: it goes first, and the pill drops to its
      40px circle. Above 1280 both come back.

   3. SOMETHING UPPERCASED THE CTA AND APPENDED A SECOND CHEVRON, giving
      "START > >". Confirmed by getComputedStyle. I could not find the rule,
      so this neutralises the symptom rather than the source -- said plainly.

   Measured after at 1440/1280/1180/1024/900/768/600/375/320: 0 overflow at
   every width, no overlap at any, brand name fully visible at eight of nine.

   Rejected, both measured: flex:0 0 auto on the brand overflowed 288px at
   1024, and making the pill compact only below 1024 left the brand box 28px. */
header.site .brand{min-inline-size:0;overflow:hidden}
/* !important is load-bearing here. I shipped these once WITHOUT it and the
   uppercase and the second chevron both survived -- whatever sets them
   out-specifies a bare .vc-util-cta, and I have not found the rule. Verified
   with getComputedStyle after deploy, which is the only reason I caught it. */
.vc-util-cta{text-transform:none!important;letter-spacing:.02em!important}
.vc-util-cta::after{content:none!important}
@media (max-width:1280px){
  header.site .btn-nav{display:none}
  .hdr-lang{inline-size:40px;padding:0;justify-content:center;gap:0}
  .hdr-lang span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}
/* At 320 the name needs 166px of a 132px box. The emblem carries it alone. */
@media (max-width:23rem){ header.site .brand-name{display:none} }


/* __VC-MAILTO-WRAP-V1__ carlos.vargas@mydallasfuneralhome.com is 37 characters
   with no space in it, so it renders ~306px and cannot wrap. It appears 469
   times across 405 pages. At 320px that is wider than the viewport. An email
   address is the unbreakable token wherever it sits, so target the thing
   itself rather than each container it turns up in. */
a[href^="mailto:"]{overflow-wrap:anywhere}
/* And the other unbreakable token in body copy: a bare URL used as link text.
   The law digest cites texasattorneygeneral.gov/consumer-protection as visible
   text, which is 13px wider than a 305px viewport. Scoped to <main> so header,
   footer and nav links are untouched. Measured: law digest 13 -> 0 at 320, and
   0 -> 0 at 1180 on four pages, so nothing else moved. */
main a{overflow-wrap:anywhere}

/* __VL-FTR-SOCIAL-V3__ */
footer .ftr-social{display:flex;gap:18px;margin:16px 0 24px;flex-wrap:wrap}  /* bottom margin matters: this row is now the LAST child of
     .brand-footer, and where the footer columns stack (display:block) the
     next heading sat flush against it -- measured gap was 0px. */
footer .ftr-social a{display:inline-flex;align-items:center;gap:8px;
  color:rgba(244,236,223,.6);font-size:.86rem;line-height:1;
  text-decoration:none;transition:color .18s ease}
footer .ftr-social a:hover,footer .ftr-social a:focus-visible{color:var(--gold,#B08F5B)}
footer .ftr-social svg{width:16px;height:16px;fill:currentColor;display:block;flex:none}
@media (prefers-reduced-motion:reduce){footer .ftr-social a{transition:none}}