@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root { --ink:#101a34; --ink-soft:#52627e; --blue:#2d64e9; --blue-soft:#dce9ff; --sky:#f1f6ff; --line:#d8e4f7; --shadow:0 22px 55px rgba(49,84,143,.12); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--sky); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; }
.site-nav { height:76px; position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(20px,5vw,78px); background:rgba(248,251,255,.85); border-bottom:1px solid rgba(216,228,247,.85); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; flex-shrink:0; } .brand img { width:148px; height:auto; display:block; } .nav-links { display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.4vw,34px); list-style:none; margin:0; padding:0; } .nav-links a { color:#52627e; font-size:.88rem; font-weight:600; transition:color .18s ease; } .nav-links a:hover,.nav-links a.active { color:var(--blue); } .nav-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; } .nav-login { color:#34425f; font-size:.88rem; font-weight:600; }
.nav-cta,.button-primary,.button-secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; font-size:.94rem; font-weight:700; padding:14px 20px; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .nav-cta,.button-primary { color:#fff; background:linear-gradient(135deg,var(--blue),#4d45e9); box-shadow:0 12px 26px rgba(45,100,233,.23); } .nav-cta { padding:10px 16px; font-size:.84rem; border-radius:11px; } .button-secondary { color:#20345e; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px rgba(49,84,143,.08); } .nav-cta:hover,.button-primary:hover,.button-secondary:hover { transform:translateY(-2px); } .menu-button { display:none; padding:8px; border:0; background:transparent; color:var(--ink); font-size:1.3rem; } .mobile-menu { display:none; }
.hero { min-height:720px; position:relative; overflow:hidden; padding:clamp(70px,10vw,130px) clamp(20px,8vw,130px) 88px; background:radial-gradient(circle at 80% 20%,rgba(125,162,255,.34),transparent 25%),radial-gradient(circle at 16% 86%,rgba(204,222,255,.78),transparent 28%),linear-gradient(125deg,#f8fbff 0%,#eef4ff 55%,#e9f1ff 100%); } .hero::after { content:''; position:absolute; width:500px; height:500px; right:-150px; bottom:-270px; border:1px solid rgba(45,100,233,.16); border-radius:50%; box-shadow:0 0 0 58px rgba(45,100,233,.035),0 0 0 116px rgba(45,100,233,.025); } .hero-inner { max-width:1180px; margin:0 auto; position:relative; z-index:1; }
.hero-workflow-image { position:absolute; z-index:-1; right:-12px; bottom:-42px; width:min(34vw,430px); margin:0; overflow:hidden; border:10px solid rgba(255,255,255,.52); border-radius:36px; box-shadow:var(--shadow); opacity:.25; transform:rotate(5deg); } .hero-workflow-image::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(219,233,255,.35),rgba(15,33,66,.18)); } .hero-workflow-image img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; } .hero-workflow-image figcaption { position:absolute; z-index:1; left:18px; right:18px; bottom:17px; color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 18px; color:var(--blue); border:1px solid #b9d0ff; border-radius:999px; background:rgba(225,236,255,.72); font-size:.85rem; font-weight:700; } h1,h2,h3,p { margin-top:0; } .hero h1 { max-width:930px; margin:28px 0 24px; font-size:clamp(3.25rem,8vw,7rem); line-height:.96; letter-spacing:-.075em; font-weight:600; } .hero h1 em,.page-hero h1 em { display:inline-block; color:#6680ad; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.08em; font-weight:500; letter-spacing:-.055em; } .hero-copy { max-width:610px; color:var(--ink-soft); font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.65; } .hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .hero-note { margin-top:20px; color:#60718e; font-size:.91rem; } .hero-note span { padding:0 7px; } .trust-list { display:grid; grid-template-columns:repeat(2,minmax(0,280px)); gap:16px 28px; margin:72px 0 0; padding:0; list-style:none; color:#5f7190; font-size:.92rem; font-weight:600; } .trust-list i { margin-right:10px; color:#397de9; }
.section { max-width:1180px; padding:100px 30px; margin:0 auto; } .section-kicker { margin-bottom:15px; color:var(--blue); font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } .section-heading { max-width:740px; font-size:clamp(2.2rem,4.8vw,4.3rem); line-height:1; letter-spacing:-.055em; margin-bottom:18px; } .section-intro { max-width:630px; color:var(--ink-soft); font-size:1.08rem; line-height:1.65; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; } .step { min-height:265px; padding:30px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 16px 36px rgba(44,75,125,.06); } .step-number { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:.85rem; font-weight:700; } .step h3 { margin:40px 0 12px; font-size:1.32rem; letter-spacing:-.035em; } .step p { margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.65; }
.path-section { background:#e9f2ff; } .path-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:42px; } .path-card { min-height:390px; display:flex; flex-direction:column; align-items:flex-start; padding:40px; overflow:hidden; position:relative; border-radius:28px; } .path-card.funeral { color:#fff; background:linear-gradient(145deg,rgba(17,36,67,.95),rgba(24,60,111,.83)),url('../images/marketing/funeral-camera.jpg') center/cover; } .path-card.event { background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(230,240,255,.84)),url('../images/marketing/wedding-ceremony.jpg') center/cover; border:1px solid #d1e1f8; } .path-icon { display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:15px; font-size:1.2rem; backdrop-filter:blur(12px); } .funeral .path-icon { background:rgba(255,255,255,.14); color:#a9cbff; } .event .path-icon { background:rgba(219,234,255,.85); color:var(--blue); } .path-card h3 { margin:48px 0 12px; font-size:clamp(1.7rem,3vw,2.45rem); letter-spacing:-.05em; } .path-card p { max-width:430px; margin-bottom:26px; line-height:1.65; } .funeral p { color:#e1e9f7; } .event p { color:#344866; } .text-link { margin-top:auto; font-size:.94rem; font-weight:700; } .text-link i { margin-left:7px; transition:transform .18s ease; } .text-link:hover i { transform:translateX(4px); } .event .text-link { color:#1d55cb; }
.closing { padding:100px 30px; background:#101a34; color:#fff; text-align:center; } .closing>div { max-width:780px; margin:0 auto; } .closing .section-kicker { color:#9ac0ff; } .closing h2 { font-size:clamp(2.5rem,5vw,4.7rem); line-height:1; letter-spacing:-.06em; margin-bottom:20px; } .closing p { color:#b9c8e0; font-size:1.08rem; line-height:1.65; } .closing .button-primary { margin-top:22px; } .site-footer { padding:34px clamp(20px,5vw,78px); background:#0d1529; color:#9eacc2; font-size:.83rem; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; } .site-footer a:hover { color:#fff; }
.page-hero { position:relative; overflow:hidden; padding:clamp(76px,11vw,146px) clamp(20px,8vw,130px) 96px; background:linear-gradient(130deg,#f8fbff,#eaf2ff); } .page-hero::before { content:''; position:absolute; z-index:0; inset:0; opacity:.23; background:center/cover no-repeat; } .page-hero::after { content:''; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(248,251,255,.98) 0%,rgba(238,245,255,.91) 48%,rgba(234,242,255,.56) 100%); } .page-hero-inner { max-width:1050px; margin:0 auto; position:relative; z-index:1; } .marketing-funerals .page-hero::before { display:none; } .marketing-events .page-hero::before { background-image:url('../images/marketing/wedding-ceremony.jpg'); background-position:68% center; } .marketing-weddings .page-hero::before { background-image:url('../images/marketing/wedding-ceremony.jpg'); background-position:center; } .page-hero h1 { max-width:920px; margin:25px 0 22px; font-size:clamp(3rem,7vw,6.3rem); line-height:.96; letter-spacing:-.07em; } .page-hero p { max-width:630px; color:var(--ink-soft); font-size:1.1rem; line-height:1.65; } .benefit-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; } .benefit { padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); } .benefit i { color:var(--blue); } .benefit strong { display:block; margin:13px 0 6px; font-size:1rem; } .benefit span { color:var(--ink-soft); font-size:.88rem; line-height:1.5; }
.story { display:grid; grid-template-columns:.9fr 1.1fr; align-items:start; gap:clamp(35px,8vw,110px); } .story-aside-stack { display:grid; gap:25px; } .story-aside { position:relative; display:flex; align-items:center; justify-content:center; padding:52px 58px; border-radius:25px; background:linear-gradient(150deg,#213d70,#101a34); color:#fff; } .quote-mark { position:absolute; color:#a5c9ff; font-family:'Cormorant Garamond',Georgia,serif; font-size:4.1rem; font-style:normal; line-height:.7; } .quote-open { top:22px; left:30px; } .quote-close { right:30px; bottom:17px; } .story-aside p { margin:0; color:#d1def1; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.85rem; font-style:italic; line-height:1.15; text-align:center; } .story-image { position:relative; margin:0; overflow:hidden; border:8px solid rgba(255,255,255,.58); border-radius:26px; box-shadow:var(--shadow); opacity:.55; transform:rotate(-3deg); } .story-image::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(219,233,255,.24),rgba(15,33,66,.18)); } .story-image img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } .story-image figcaption { position:absolute; z-index:1; left:18px; right:18px; bottom:15px; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .feature-list { display:grid; gap:18px; margin:34px 0 0; } .feature-line { display:grid; grid-template-columns:40px 1fr; gap:15px; } .feature-line i { color:var(--blue); padding-top:3px; } .feature-line strong { display:block; margin-bottom:5px; font-size:1.03rem; } .feature-line span { color:var(--ink-soft); font-size:.93rem; line-height:1.55; }
.faq-section { max-width:920px; } .faq-list { display:grid; gap:12px; margin-top:36px; } .faq-list details { background:#fff; border:1px solid var(--line); border-radius:16px; padding:0 22px; box-shadow:0 10px 25px rgba(44,75,125,.045); } .faq-list summary { cursor:pointer; padding:19px 28px 19px 0; font-weight:700; list-style:none; position:relative; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:'+'; position:absolute; right:0; color:var(--blue); font-size:1.35rem; font-weight:400; top:13px; } .faq-list details[open] summary::after { content:'−'; } .faq-list p { max-width:700px; padding:0 0 19px; margin:0; color:var(--ink-soft); line-height:1.65; font-size:.95rem; }
.compliance-intro { max-width:760px; } .compliance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:42px; } .compliance-card { padding:30px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 34px rgba(44,75,125,.06); } .compliance-card i { color:var(--blue); font-size:1.35rem; } .compliance-card h2 { margin:26px 0 12px; font-size:1.45rem; letter-spacing:-.035em; } .compliance-card p { margin:0; color:var(--ink-soft); line-height:1.65; } .compliance-card a,.compliance-source-list a { color:var(--blue); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .compliance-note { margin-top:26px; padding:22px 24px; border-left:3px solid var(--blue); border-radius:0 16px 16px 0; background:#e9f2ff; color:#385378; line-height:1.65; } .compliance-note strong { color:var(--ink); } .compliance-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; } .compliance-step { padding:26px; border-radius:20px; background:#fff; border:1px solid var(--line); } .compliance-step span { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-size:.82rem; font-weight:700; } .compliance-step h3 { margin:26px 0 8px; font-size:1.05rem; } .compliance-step p { margin:0; color:var(--ink-soft); line-height:1.6; font-size:.92rem; } .compliance-source-list { margin:28px 0 0; padding-left:20px; color:var(--ink-soft); line-height:1.8; }
@media (max-width:820px) { .nav-links,.nav-actions { display:none; } .menu-button { display:block; } .mobile-menu.open { display:grid; gap:6px; position:fixed; top:76px; left:0; right:0; z-index:9; padding:18px 22px 24px; background:#fbfdff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); } .mobile-menu a { padding:10px 0; color:#455775; font-weight:650; } .mobile-menu .mobile-cta { margin-top:8px; padding:13px 16px; border-radius:12px; color:#fff; background:var(--blue); text-align:center; } .steps,.path-grid,.benefit-row,.story { grid-template-columns:1fr; } .hero { min-height:auto; } .trust-list { margin-top:52px; } .hero-workflow-image { opacity:.12; right:-150px; width:440px; } }
@media (max-width:520px) { .brand img { width:132px; } .hero { padding-bottom:62px; } .hero h1 { font-size:clamp(3rem,15vw,4.4rem); } .hero-actions .button-primary,.hero-actions .button-secondary { width:100%; } .trust-list { grid-template-columns:1fr; gap:13px; } .section { padding:70px 20px; } .step,.path-card { padding:26px; } .path-card { min-height:340px; } .closing { padding:75px 20px; } }