:root{
  --ground:#EDF0F0;--ground-2:#E3E8E8;--card:#F6F8F8;--ink:#1D2830;--ink-soft:#4C5A63;--muted:#6F7C83;
  --rule:#CDD5D7;--accent:#9C7640;--accent-soft:rgba(156,118,64,.14);--ring:29,40,48;--glow:212,168,98;
  --ok:#2F6B4F;--err:#A33A2B;
  --serif:"Lora","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--ground:#12181D;--ground-2:#182027;--card:#161D23;--ink:#E7E5DF;--ink-soft:#B7BCBD;--muted:#8A9498;--rule:#2A343B;--accent:#D4AE74;--accent-soft:rgba(212,174,116,.14);--ring:231,229,223;--glow:212,174,116;--ok:#7BC3A0;--err:#E58B7D}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;padding-inline:clamp(16px,5vw,64px);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin-inline:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
.label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.brand img{height:58px;width:auto;display:block}
.brand .dark{display:none}
@media (prefers-color-scheme: dark){.brand .light{display:none}.brand .dark{display:block}}
nav.links{display:flex;gap:26px;font-size:14px;flex-wrap:wrap}
nav.links a{text-decoration:none;color:var(--ink-soft)}
nav.links a:hover,nav.links a[aria-current]{color:var(--ink)}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(36px,7vw,88px) clamp(48px,8vw,104px)}
.hero h1{font-size:clamp(42px,6.6vw,84px);line-height:1.04;font-style:italic}
.hero h1 em{color:var(--accent)}
.hero .lede{margin-top:26px;max-width:34em;font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft)}
.actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.btn{display:inline-block;padding:13px 24px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn.solid{background:var(--ink);color:var(--ground)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.quiet{font-size:15px;color:var(--ink-soft);text-underline-offset:5px}
.echo{position:relative;aspect-ratio:1/1;width:100%;max-width:100%;margin:0}
.echo canvas{position:absolute;inset:0;width:100%;height:100%}

section{padding-block:clamp(52px,7.5vw,100px);border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(30px,4vw,50px);line-height:1.1}
.sec-head p{color:var(--ink-soft);max-width:36em;align-self:end}

.packages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.4vw,28px)}
.pkg{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;border:1px solid var(--rule);border-radius:4px;background:var(--card)}
.pkg h3{font-size:24px;line-height:1.2}
.pkg .meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.pkg .price{font-family:var(--serif);font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums}
.pkg .price small{font-family:var(--sans);font-size:13px;color:var(--muted)}
.pkg p{color:var(--ink-soft);font-size:15.5px;flex:1}
.pkg .btn{align-self:flex-start}
.sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:44px 0 20px}
.sub-head:first-of-type{margin-top:0}
.sub-head h3{font-size:28px}
.sub-head p{color:var(--ink-soft);max-width:36em;font-size:16px}

.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px)}
.promise{padding-block:24px;border-top:1px solid var(--rule);display:grid;gap:8px}
.promise h3{font-size:23px;line-height:1.25}
.promise p{color:var(--ink-soft);font-size:16px;max-width:30em}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px);counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--ink)}
.steps li::before{content:counter(s);font-family:var(--serif);font-style:italic;font-size:30px;color:var(--accent);line-height:1}
.steps h3{font-size:20px;font-family:var(--sans);font-weight:500;letter-spacing:0}
.steps p{color:var(--ink-soft);font-size:15.5px}

.partners{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.partners blockquote{margin:18px 0 0;font-family:var(--serif);font-size:clamp(26px,3.1vw,36px);line-height:1.3}
.partners blockquote em{color:var(--accent)}
.partners ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.partners li{padding-left:22px;position:relative;color:var(--ink-soft)}
.partners li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;border-radius:50%;border:1px solid var(--accent)}
.partners li strong{color:var(--ink);font-weight:600}

.faq{max-width:820px}
.faq details{border-top:1px solid var(--rule);padding-block:18px}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:21px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--ink-soft);max-width:38em}

.contact{display:grid;gap:20px;padding-block:clamp(64px,9vw,120px)}
.contact h2{font-size:clamp(34px,5vw,64px);line-height:1.08;max-width:14em;font-style:italic}
.contact p{color:var(--ink-soft);max-width:34em}
.email{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.8vw,32px);color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);width:fit-content}

footer{border-top:1px solid var(--rule);padding-block:26px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* consent form */
.form-page{max-width:820px;padding-block:clamp(28px,5vw,56px) 80px}
.form-page h1{font-size:clamp(34px,4.6vw,54px);line-height:1.1;font-style:italic}
.form-page .lede{margin-top:16px;color:var(--ink-soft);max-width:38em}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 8px}
.tabs a{padding:9px 16px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;font-size:14px;color:var(--ink-soft)}
.tabs a[aria-current]{border-color:var(--ink);color:var(--ink);background:var(--card)}
.terms{margin:22px 0 30px;max-height:420px;overflow:auto;border:1px solid var(--rule);border-radius:4px;background:var(--card);padding:22px 24px;font-size:15.5px}
.terms h3{font-size:19px;margin:20px 0 6px}
.terms h3:first-child{margin-top:0}
.terms p,.terms li{color:var(--ink-soft)}
.terms ul{padding-left:20px;margin:6px 0}
fieldset{border:0;padding:0;margin:0 0 26px;display:grid;gap:16px}
legend{font-family:var(--serif);font-size:22px;margin-bottom:12px;padding:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
label.f{display:grid;gap:6px;font-size:14px;font-weight:500}
label.f span.hint{font-weight:400;color:var(--muted);font-size:13px}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:11px 12px}
textarea{min-height:88px;resize:vertical}
label.c{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-soft)}
label.c input{margin-top:5px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.sigbox{border:1px dashed var(--muted);border-radius:4px;background:var(--card);position:relative}
.sigbox canvas{display:block;width:100%;height:180px;touch-action:none;cursor:crosshair}
.sigbox .clear{position:absolute;top:8px;right:8px;font-size:13px;padding:5px 12px}
.sigbox .ph{position:absolute;left:16px;bottom:14px;font-size:13px;color:var(--muted);pointer-events:none}
.notice{padding:16px 18px;border-radius:4px;border:1px solid var(--rule);background:var(--card);margin:18px 0}
.notice.err{border-color:var(--err);color:var(--err)}
.notice.ok{border-color:var(--ok)}
.draft{font-size:13px;color:var(--accent);margin-top:8px}
.hp{position:absolute;left:-9999px}

@media (max-width:880px){
  .hero{grid-template-columns:1fr}.echo{max-width:380px;margin-inline:auto}
  .sec-head,.partners{grid-template-columns:1fr}.promises{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.steps,.grid2{grid-template-columns:1fr}.brand img{height:38px}
/* Phone navigation. The nav used to be display:none below 560px, which left a phone
   with no way to reach Films, Celebrations, How it works or For funeral homes at all.
   With four items it does not need a hamburger - the header stacks and the links wrap
   into tappable pills, the same shape the review pages already use. */
header.top{flex-direction:column;align-items:flex-start;gap:14px;padding-block:18px}
nav.links{width:100%;gap:8px;font-size:13px}
nav.links a{border:1px solid var(--rule,rgba(0,0,0,.14));border-radius:999px;
  padding:9px 14px;line-height:1;white-space:nowrap}
nav.links a[aria-current]{border-color:currentColor}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.rotator span{display:inline-block;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){.rotator span{transition:none}}

.pkg .incl{list-style:none;margin:0;padding:12px 0 4px;border-top:1px solid var(--rule);display:grid;gap:6px;font-size:14px;color:var(--ink-soft)}
.pkg .incl li{padding-left:16px;position:relative}
.pkg .incl li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.addons{margin-top:28px;font-size:14.5px;color:var(--muted)}