/* ═══════════════════════════════════════════════════════════
   EDEN MEMORIALS — UI KIT
   Brand: Origin (northern.digital/eden/logo-5)
   Font: Poppins only
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Colour Tokens (Origin brand) */
    --copper:      #8B9A82;
    --copper-l:    #A4B299;
    --copper-d:    #6F7D67;
    --charcoal:    #2C2C2C;
    --ink:         #1A1A1A;
    --parchment:   #F5F3EE;
    --ivory:       #FAFAF7;
    --stone:       #8B9A82;   /* was beige #A39E93 — now Sage Whisper */
    --sage:        #8B9A82;
    --light-txt:   #D4D0C8;
    --rule:        rgba(139,154,130,0.22);
    --rule-strong: rgba(139,154,130,0.45);

    /* Typography */
    --font: 'Poppins', system-ui, -apple-system, sans-serif;

    /* Type scale — client req (26 Jun): body/paragraph copy min 19px (older audience) */
    --t-xs:   13px;   /* micro labels only (stars, footer hours) */
    --t-sm:   16px;   /* secondary/captions */
    --t-base: 19px;   /* body / paragraph minimum */
    --t-md:   21px;   /* leads / intro */
    --t-lg:   24px;
    --t-xl:   30px;
    --t-2xl:  38px;
    --t-3xl:  50px;
    --t-4xl:  64px;

    /* Spacing scale (4px base) — tightened 26 Jun to reduce scroll/gaps */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 22px;
    --s-6: 28px;
    --s-7: 28px;
    --s-8: 36px;
    --s-9: 40px;
    --s-10: 56px;

    /* Grid */
    --container: 1240px;
    --container-narrow: 820px;
    --gutter: 24px;
    --radius: 2px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --silk: cubic-bezier(0.45, 0, 0.55, 1);

    /* Shadow */
    --shadow-sm: 0 4px 14px rgba(44,44,44,0.06);
    --shadow:    0 18px 40px rgba(44,44,44,0.08);
    --shadow-lg: 0 26px 60px rgba(44,44,44,0.12);
}

/* ───────── Reset & Base ───────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font);
    font-weight: 300;
    font-size: var(--t-base);
    line-height: 1.7;
    color: var(--charcoal);
    background: var(--ivory);
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--copper); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--copper-d); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ═══════ GRID SYSTEM ═══════ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    width: 100%;
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: 1440px; }

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
}
.row-tight { gap: var(--s-4); }
.row-loose { gap: var(--s-6); }

.col-1  { grid-column: span 12; }
.col-2  { grid-column: span 12; }
.col-3  { grid-column: span 12; }
.col-4  { grid-column: span 12; }
.col-5  { grid-column: span 12; }
.col-6  { grid-column: span 12; }
.col-7  { grid-column: span 12; }
.col-8  { grid-column: span 12; }
.col-9  { grid-column: span 12; }
.col-10 { grid-column: span 12; }
.col-11 { grid-column: span 12; }
.col-12 { grid-column: span 12; }

@media (min-width: 640px) {
    .col-sm-1  { grid-column: span 1; }
    .col-sm-2  { grid-column: span 2; }
    .col-sm-3  { grid-column: span 3; }
    .col-sm-4  { grid-column: span 4; }
    .col-sm-6  { grid-column: span 6; }
    .col-sm-8  { grid-column: span 8; }
    .col-sm-12 { grid-column: span 12; }
}
@media (min-width: 900px) {
    .col-1  { grid-column: span 1; }
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* Utility flex */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.cluster-center { justify-content: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }

/* ═══════ TYPOGRAPHY ═══════ */
.h1 {
    font-size: clamp(40px, 6.5vw, var(--t-4xl));
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: normal;
    color: var(--charcoal);
}
.h1 strong { font-weight: 500; color: var(--copper); }

.h2 {
    font-size: clamp(28px, 3.8vw, var(--t-3xl));
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--charcoal);
}
.h2 strong { font-weight: 500; color: var(--copper); }

.h3 {
    font-size: clamp(22px, 2.6vw, var(--t-2xl));
    font-weight: 400;
    line-height: 1.25;
    color: var(--charcoal);
}

.h4 {
    font-size: var(--t-xl);
    font-weight: 400;
    line-height: 1.3;
    color: var(--charcoal);
}

.h5 {
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.35;
    color: var(--charcoal);
}

.h6 {
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.4;
    color: var(--charcoal);
}

.eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--copper);
}

.lead {
    font-size: var(--t-md);
    font-weight: 300;
    line-height: 1.75;
    color: var(--charcoal);
}

.muted {
    color: #555550;
    font-weight: 300;
}

.caption {
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--stone);
}

.divider {
    width: 50px;
    height: 1px;
    background: var(--copper);
    border: none;
    margin: var(--s-5) auto;
}
.divider-left { margin-left: 0; }

/* ═══════ BUTTONS ═══════ */
.btn {
    display: inline-block;
    padding: 15px 34px;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    line-height: 1;
}
.btn-primary { background: var(--copper); color: #fff; }
.btn-primary:hover { background: var(--copper-d); color: #fff; }

.btn-outline { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline:hover { background: var(--charcoal); color: #fff; }

.btn-light { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-light:hover { background: #fff; color: var(--charcoal); }

.btn-ghost { background: transparent; color: var(--copper); padding: 8px 0; border-bottom: 1px solid var(--copper); letter-spacing: normal; }
.btn-ghost:hover { color: var(--copper-d); border-color: var(--copper-d); }

.btn-sm { padding: 11px 24px; font-size: 10px; }
.btn-lg { padding: 18px 44px; font-size: 12px; }

/* ═══════ CARDS ═══════ */
.card {
    background: #fff;
    border: none;
    overflow: hidden;
}
.card-hover { transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.card-media {
    position: relative;
    overflow: hidden;
    height: 280px;
    background: var(--parchment);
}
.card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.card-hover:hover .card-media img { transform: scale(1.08); }
.card-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,26,26,0.4) 0%, transparent 55%);
}

.card-tag {
    position: absolute; top: 20px; left: 20px; z-index: 2;
    background: rgba(255,255,255,0.96);
    padding: 7px 14px;
    font-size: 9px; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--copper);
}

.card-body { padding: var(--s-6) var(--s-6) var(--s-7); }

/* ═══════ BADGES ═══════ */
.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 9px 18px;
    border: 1px solid var(--rule);
    font-size: 9px; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--charcoal);
    background: transparent;
}
.badge i { color: var(--copper); font-style: normal; }
.badge-filled { background: var(--copper); color: #fff; border-color: var(--copper); }
.badge-filled i { color: #fff; }

/* ═══════ FORMS ═══════ */
.form { display: grid; gap: var(--s-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.input, .select, .textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--rule);
    background: #fff;
    font-size: var(--t-sm);
    font-weight: 300;
    color: var(--charcoal);
    transition: border-color 0.2s;
    border-radius: 0;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--copper);
}

/* ═══════ SECTIONS ═══════ */
.section { padding: var(--s-10) 0; }
.section-sm { padding: var(--s-8) 0; }
.section-alt { background: var(--parchment); }
.section-dark { background: var(--ink); color: var(--light-txt); }
.section-dark .h1, .section-dark .h2, .section-dark .h3 { color: #fff; }
.section-dark .eyebrow { color: var(--copper-l); }

.section-head {
    text-align: center;
    margin-bottom: var(--s-6);
}
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head .h2 { max-width: 820px; margin: 0 auto; }

/* ═══════ NAVIGATION ═══════ */
.nav {
    background: var(--parchment);
    border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 100;
}
.nav-top {
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--rule);
}
.nav-bottom {
    background: #fff;
    padding: var(--s-3) 0;
}
.nav-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-5);
}
.nav-aside { font-size: 14px; }
.nav-aside-label { color: var(--stone); font-weight: 500; letter-spacing: normal; text-transform: uppercase; font-size: 11px; }
.nav-aside-value { color: var(--charcoal); font-weight: 600; font-size: 15px; }
.nav-aside-right { text-align: right; }

.nav-menu {
    display: flex;
    justify-content: center;
    gap: 0;
    list-style: none;
    flex-wrap: wrap;
}
.nav-menu a {
    display: block;
    padding: var(--s-3) var(--s-5);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--charcoal);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--copper); border-bottom-color: var(--copper); }

/* Contact CTA — stands out as a sage-filled pill */
.nav-menu a.nav-cta {
    background: var(--copper);
    color: #fff;
    padding: var(--s-3) var(--s-5);
    margin-left: var(--s-3);
    border-bottom: none;
    border-radius: 2px;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    box-shadow: 0 4px 10px -4px rgba(139,154,130,0.5);
}
.nav-menu a.nav-cta:hover {
    background: var(--copper-d);
    color: #fff;
    border-bottom: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(139,154,130,0.7);
}
.nav-menu a.nav-cta.active { background: var(--copper-d); color: #fff; }

@media (max-width: 900px) {
    .nav-grid { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: var(--s-4); }
    .nav-aside { display: none; }
    .nav-bottom { padding: 0; }   /* empty until the burger opens the menu */
    .nav-menu { gap: var(--s-1); }
    .nav-menu a { padding: var(--s-2) var(--s-3); }
}

/* ═══════ BRANDMARK ═══════ */
.brandmark {
    display: inline-flex; align-items: center; gap: var(--s-3);
    text-decoration: none;
}
.brandmark .logo-mark {
    width: 46px; height: 46px;
    color: var(--copper);
    flex-shrink: 0;
    transition: color 0.3s;
}
.brandmark:hover .logo-mark { color: var(--copper-d); }
.brandmark-text { line-height: 1.2; }
.brandmark-name {
    display: block;
    font-size: 18px; font-weight: 400;
    letter-spacing: normal; text-transform: lowercase;
    white-space: nowrap;
    color: var(--charcoal);
    line-height: 1;
}
.brandmark-tag {
    display: block;
    font-size: 9px; font-weight: 300;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--copper); margin-top: 4px;
}
.nav .brandmark { justify-content: center; }
/* Bigger header lettering for older audience (client 26 Jun) */
.nav .brandmark .logo-mark { width: 58px !important; height: 58px !important; }
.nav .brandmark-name { font-size: 26px; }

/* ═══════════════════════════════════════════════════════════
   HERO — logo-5 clip-path reveal animation
   Sequence: glow → clip-circle → name → sub → rule → tagline → CTA → scroll
   ═══════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: var(--s-5) var(--gutter);
    background-color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}

/* Layered background */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.hero-bg-image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.72) saturate(0.95);
    transform: scale(1.04);
    animation: heroKenBurns 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
    from { transform: scale(1.04) translate(0, 0); }
    to   { transform: scale(1.10) translate(-1.5%, -1%); }
}
.hero-bg-gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 45%, rgba(139,154,130,0.16) 0%, transparent 60%),
        linear-gradient(rgba(20,22,18,0.34), rgba(14,15,12,0.55));
}
.hero-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.48) 100%);
}
.hero-grain {
    position: absolute; inset: -50%; width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
    animation: heroGrain 8s linear infinite;
}
@keyframes heroGrain {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-10%, -10%); }
}

/* Glow — blooms before logo appears */
.hero-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 640px; height: 640px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,154,130,0.22) 0%, transparent 65%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    filter: blur(8px);
}

/* Logo wrap — clip-path reveal */
.hero-logo-wrap {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 120px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    margin-bottom: var(--s-4);
}
.hero-logo-svg {
    width: 120px !important;
    height: 120px !important;
    color: var(--light-txt) !important;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4));
}

/* Hero content (name, sub, rule, tagline, CTA) */
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: min(1180px, 80vw);   /* wider, ~20% side padding — fewer line breaks (client 29 Jun) */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Soft scrim keeps the white wordmark + tagline legible over the lighter photo */
.hero-inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 220%;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(10,11,9,0.55) 0%, rgba(10,11,9,0.28) 45%, transparent 72%);
    pointer-events: none;
}

.hero-brandname {
    font-family: var(--font);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: lowercase;
    white-space: nowrap;
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    margin-bottom: var(--s-4);
    text-shadow: 0 6px 30px rgba(0,0,0,0.5);
}

.hero-brandsub {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--copper-l);
    opacity: 0;
    transform: translateY(10px);
    margin-bottom: var(--s-5);
}

.hero-rule {
    width: 60px;
    height: 1px;
    background: var(--copper);
    transform-origin: center;
    transform: scaleX(0);
    opacity: 0;
    margin: var(--s-2) 0 var(--s-6);
}

.hero-tagline {
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: normal;
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    margin-bottom: var(--s-4);
    max-width: 100%;
    text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.hero-tagline em {
    font-style: italic;
    color: var(--copper-l);
    font-weight: 300;
}

.hero-cta {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(14px);
}

/* Scroll hint at bottom */
.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}
.hero-scroll span {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--light-txt);
}
.hero-scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--copper), transparent);
    position: relative;
    overflow: hidden;
}
.hero-scroll-line::after {
    content: "";
    position: absolute;
    top: -20px; left: 0;
    width: 100%; height: 20px;
    background: linear-gradient(to bottom, transparent, var(--copper));
    animation: heroScrollPulse 2s ease-in-out infinite;
}
@keyframes heroScrollPulse {
    0%   { transform: translateY(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(70px); opacity: 0; }
}

/* Smaller logo on compact viewports */
@media (max-width: 640px) {
    .hero-logo-wrap, .hero-logo-svg { width: 120px !important; height: 120px !important; }
    .hero-glow { width: 440px; height: 440px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — compact hero for sub-pages (not the homepage)
   ═══════════════════════════════════════════════════════════ */
.page-hero {
    background: var(--parchment);
    padding: var(--s-10) var(--gutter) var(--s-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(139,154,130,0.10) 0%, transparent 65%);
    pointer-events: none;
}
.page-hero::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(139,154,130,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.page-hero > * { position: relative; z-index: 2; }

.page-hero-logo {
    display: inline-flex;
    justify-content: center;
    margin-bottom: var(--s-5);
    animation: pageHeroLogoIn 1s var(--ease) both;
}
.page-hero-logo .page-hero-logo-svg {
    width: 72px !important;
    height: 72px !important;
    color: var(--copper) !important;
}
@keyframes pageHeroLogoIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.page-hero .eyebrow { animation: pageHeroFadeIn 0.9s var(--ease) 0.15s both; }
.page-hero .h1 {
    animation: pageHeroFadeIn 1.1s var(--ease) 0.25s both;
    max-width: 900px;
    margin: 0 auto;
}
.page-hero-lead {
    max-width: 700px;
    margin: var(--s-5) auto 0;
    font-size: var(--t-md);
    font-weight: 300;
    line-height: 1.8;
    color: #555550;
    animation: pageHeroFadeIn 1.1s var(--ease) 0.4s both;
}
.page-hero .divider { animation: pageHeroFadeIn 0.8s var(--ease) 0.55s both; }

@keyframes pageHeroFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .page-hero { padding: var(--s-8) var(--gutter) var(--s-7); }
    .page-hero-logo .page-hero-logo-svg { width: 60px !important; height: 60px !important; }
}

/* ═══════ STATS BAND ═══════ */
.stats {
    background: var(--copper);
    padding: var(--s-8) var(--gutter);
    color: #fff;
    text-align: center;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    max-width: var(--container);
    margin: 0 auto;
}
.stat-num {
    font-size: var(--t-2xl);
    font-weight: 400;
    letter-spacing: normal;
    margin-bottom: var(--s-2);
}
.stat-lbl {
    font-size: 10px; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════ CTA BAND ═══════ */
.cta-band {
    padding: var(--s-10) var(--gutter);
    color: #fff;
    text-align: center;
    background-color: var(--ink);
    background-position: center;
    background-size: cover;
    position: relative;
}
.cta-band::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(22,26,20,0.62), rgba(20,24,18,0.72));
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band .eyebrow { color: var(--copper-l); }
.cta-band .h2 { color: #fff; margin-bottom: var(--s-6); }
.cta-band-lead {
    color: rgba(255,255,255,0.85);
    max-width: 600px; margin: 0 auto var(--s-7);
    font-size: var(--t-base); font-weight: 300; line-height: 1.85;
}

/* ═══════════════════════════════════════════════════════════
   MEMORIAL / PRODUCT CARDS
   Masonry layout · no side borders · rich hover reveal
   ═══════════════════════════════════════════════════════════ */
.memorial-grid {
    column-count: 2;
    column-gap: var(--s-6);
}
.memorial-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    width: 100%;
    margin-bottom: var(--s-6);
}
@media (max-width: 760px) {
    .memorial-grid { column-count: 1; column-gap: var(--s-5); }
    .memorial-grid > * { margin-bottom: var(--s-5); }
}

/* Varied card heights create the masonry rhythm */
.memorial-grid > *:nth-child(1) { --card-h: 560px; }
.memorial-grid > *:nth-child(2) { --card-h: 420px; }
.memorial-grid > *:nth-child(3) { --card-h: 400px; }
.memorial-grid > *:nth-child(4) { --card-h: 540px; }
.memorial-grid > *:nth-child(5) { --card-h: 440px; }
.memorial-grid > *:nth-child(6) { --card-h: 500px; }
.memorial-grid > *:nth-child(7) { --card-h: 380px; }
.memorial-grid > *:nth-child(8) { --card-h: 460px; }
.memorial-grid > *:nth-child(9) { --card-h: 520px; }

/* Card — no borders at all. Depth comes from hover. */
.memorial-card {
    --card-h: 420px;
    position: relative;
    display: block;
    height: var(--card-h);
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.memorial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px -20px rgba(26,26,26,0.4);
}

/* Full-bleed image layer */
.memorial-card-media {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: 0;
}
.memorial-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
    filter: brightness(0.85) saturate(0.95);
}
.memorial-card:hover .memorial-card-media img {
    transform: scale(1.12);
    filter: brightness(0.7) saturate(1.05);
}

/* Gradient overlay — deepens on hover */
.memorial-card-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(26,26,26,0.92) 0%,
        rgba(26,26,26,0.5) 45%,
        rgba(26,26,26,0.15) 100%
    );
    transition: opacity 0.7s var(--ease);
}
.memorial-card:hover .memorial-card-media::after { opacity: 0.95; }

/* Copper accent that sweeps in from left on hover */
.memorial-card::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--copper);
    z-index: 5;
    transition: width 0.6s var(--ease);
}
.memorial-card:hover::before { width: 100%; }

/* Tag pill — always visible */
.memorial-card-tag {
    position: absolute; top: 24px; left: 24px; z-index: 4;
    padding: 8px 16px;
    background: rgba(255,255,255,0.95);
    font-size: 9px; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--copper);
    transition: transform 0.6s var(--ease), background 0.4s;
}
.memorial-card:hover .memorial-card-tag {
    background: var(--copper);
    color: #fff;
    transform: translateY(-4px);
}

/* Content area — slides up from bottom on hover */
.memorial-card-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    padding: var(--s-7) var(--s-7);
    transform: translateY(calc(var(--card-h) - 170px));
    transition: transform 0.7s var(--ease);
}
.memorial-card:hover .memorial-card-body { transform: translateY(0); }

/* Title — always visible, fixed position */
.memorial-card-title {
    font-family: var(--font);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
    margin: 0 0 var(--s-3);
    transform: translateY(0);
    transition: color 0.4s;
}

/* Sub-label beneath title — starts visible, morphs to copper */
.memorial-card-sub {
    display: inline-block;
    font-size: 10px; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--copper-l);
    margin-bottom: var(--s-4);
    position: relative;
    padding-bottom: 8px;
}
.memorial-card-sub::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 30px; height: 1px;
    background: var(--copper);
    transition: width 0.5s var(--ease) 0.1s;
}
.memorial-card:hover .memorial-card-sub::after { width: 100%; }

/* Description — hidden by default, fades+slides in on hover */
.memorial-card-desc {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,0.85);
    margin: 0 0 var(--s-5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease) 0.15s, transform 0.5s var(--ease) 0.15s;
}
.memorial-card:hover .memorial-card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* CTA link — hidden by default, slides in on hover */
.memorial-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--copper);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease) 0.25s, transform 0.5s var(--ease) 0.25s, gap 0.3s;
}
.memorial-card:hover .memorial-card-link {
    opacity: 1;
    transform: translateY(0);
}
.memorial-card-link::after {
    content: "→";
    display: inline-block;
    transition: transform 0.3s;
}
.memorial-card:hover .memorial-card-link:hover { gap: var(--s-4); }
.memorial-card:hover .memorial-card-link::after { animation: arrowNudge 1.2s ease-in-out infinite; }

@keyframes arrowNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

/* Staggered fade-in on scroll */
.memorial-card {
    animation: memFadeIn 0.9s var(--ease) both;
}
.memorial-grid > *:nth-child(1) { animation-delay: 0.05s; }
.memorial-grid > *:nth-child(2) { animation-delay: 0.15s; }
.memorial-grid > *:nth-child(3) { animation-delay: 0.25s; }
.memorial-grid > *:nth-child(4) { animation-delay: 0.35s; }
.memorial-grid > *:nth-child(5) { animation-delay: 0.45s; }
.memorial-grid > *:nth-child(6) { animation-delay: 0.55s; }
.memorial-grid > *:nth-child(7) { animation-delay: 0.65s; }
.memorial-grid > *:nth-child(8) { animation-delay: 0.75s; }
.memorial-grid > *:nth-child(9) { animation-delay: 0.85s; }

@keyframes memFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════ PROCESS ═══════ */
.process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--s-7);
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }

.process-step {
    text-align: center;
    padding: var(--s-5) var(--s-4);
    cursor: pointer;
    transition: transform 0.5s var(--ease);
}
.process-step:hover { transform: translateY(-8px); }

/* Logo-5 mark with number nestled inside — replaces plain circles */
.process-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin-bottom: var(--s-5);
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.process-icon-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--copper);
    transition: color 0.5s var(--ease), transform 0.8s var(--ease);
}
.process-icon-logo .process-logo-svg {
    width: 110px !important;
    height: 110px !important;
    color: inherit !important;
    transition: filter 0.5s var(--ease);
}

/* The number sits inside the logo's central area (the tree/core) */
.process-icon-num {
    position: relative;
    z-index: 2;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    color: #fff;
    background: var(--copper);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(139,154,130,0.4);
    transition: transform 0.5s var(--ease), background 0.5s, color 0.5s;
}

/* Hover — logo rotates gently, number pops and breathes */
.process-step:hover .process-icon {
    transform: scale(1.06);
    filter: drop-shadow(0 14px 28px rgba(139,154,130,0.35));
}
.process-step:hover .process-icon-logo {
    color: var(--copper-d);
    transform: rotate(6deg);
}
.process-step:hover .process-icon-num {
    background: var(--charcoal);
    color: #fff;
    transform: scale(1.18);
    animation: processNumPulse 1.6s var(--ease) infinite;
}

@keyframes processNumPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(44,44,44,0.4), 0 0 0 0 rgba(139,154,130,0.5); }
    50%      { box-shadow: 0 2px 8px rgba(44,44,44,0.4), 0 0 0 14px rgba(139,154,130,0); }
}

/* Title + text react subtly too */
.process-step h4 {
    font-size: var(--t-md); font-weight: 500;
    letter-spacing: normal; text-transform: none;
    margin: 0 0 var(--s-3);
    color: var(--charcoal);
    transition: color 0.3s;
}
.process-step:hover h4 { color: var(--copper); }

.process-step p {
    font-size: var(--t-sm); font-weight: 300; line-height: 1.75;
    color: #666;
    transition: color 0.3s;
}
.process-step:hover p { color: var(--charcoal); }

/* ═══════ TESTIMONIALS ═══════ */
.testi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

.testi {
    background: #fff; padding: var(--s-7) var(--s-6);
    border: none;
}
.testi-stars { color: var(--copper); margin-bottom: var(--s-4); letter-spacing: normal; font-size: var(--t-sm); }
.testi-body {
    font-size: var(--t-base); font-weight: 300;
    font-style: italic; line-height: 1.75;
    color: var(--charcoal);
    margin: 0 0 var(--s-5);
}
.testi-meta { font-size: var(--t-xs); font-weight: 500; letter-spacing: normal; text-transform: uppercase; color: var(--charcoal); }
.testi-meta span { display: block; font-weight: 300; color: var(--stone); margin-top: var(--s-1); letter-spacing: normal; }

/* ═══════ FAQ ═══════ */
.faq { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-5) 0;
    font-size: var(--t-md); font-weight: 500;
    letter-spacing: normal;
    color: var(--charcoal);
    display: flex; justify-content: space-between; align-items: center;
    transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; font-size: 26px; color: var(--copper); font-weight: 300; line-height: 1;
    transition: transform 0.3s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--copper); }
.faq-body { padding: 0 0 var(--s-5); font-size: var(--t-sm); font-weight: 300; line-height: 1.85; color: #555550; }

/* ═══════ ABOUT ═══════ */
.about-layout {
    max-width: 960px;
    margin: 0 auto;
}
.about-img-small {
    float: left;
    width: 280px;
    margin: 6px var(--s-7) var(--s-5) 0;
    position: relative;
    shape-outside: margin-box;
}
.about-img-small img {
    width: 100%;
    display: block;
}
.about-text-flow { overflow: hidden; }
.about-text-flow::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 760px) {
    .about-img-small {
        float: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto var(--s-6);
    }
}

.about-img { position: relative; }
.about-img::before {
    content: ""; position: absolute;
    inset: -24px -24px 24px 24px;
    border: 1px solid var(--copper);
    z-index: -1;
}
.about-features {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--s-4); margin: var(--s-6) 0;
}
.about-feature {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
    font-size: var(--t-xs); font-weight: 500;
    letter-spacing: normal;
    color: var(--charcoal);
}
.about-feature i { color: var(--copper); font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   CONTACT — larger, more prominent form
   ═══════════════════════════════════════════════════════════ */
.contact-info { font-size: var(--t-sm); font-weight: 300; }
.contact-info ul { list-style: none; padding: 0; margin: var(--s-6) 0; }
.contact-info li {
    display: flex; gap: var(--s-4); padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
    color: var(--charcoal); line-height: 1.65;
}
.contact-info li strong {
    display: block; font-weight: 500;
    letter-spacing: normal;
}
.contact-info li i { color: var(--copper); width: 18px; font-style: normal; margin-top: 2px; }

/* Form wrap — big, centred, full width with max limit */
.contact-form-wrap {
    max-width: 860px;
    margin: 0 auto var(--s-10);
    padding: 0 var(--gutter);
    text-align: center;
}
.contact-form-wrap .contact-card {
    text-align: left;
}
.form-notice {
    padding: var(--s-4) var(--s-5);
    border-radius: 4px;
    margin-bottom: var(--s-5);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}
.form-notice--success {
    background: rgba(139,154,130,0.12);
    border: 1px solid rgba(139,154,130,0.4);
    color: #4d5a45;
}
.form-notice--error {
    background: rgba(180,70,60,0.08);
    border: 1px solid rgba(180,70,60,0.3);
    color: #8a3830;
}
@media (max-width: 640px) {
    .contact-form-wrap { padding: 0; margin-bottom: var(--s-8); }
}

/* Prominent contact card with copper accent bar + deep drop shadow */
.contact-card {
    position: relative;
    background: #fff;
    padding: var(--s-9) var(--s-8) var(--s-9);
    box-shadow:
        0 2px 6px rgba(44,44,44,0.04),
        0 20px 40px -10px rgba(44,44,44,0.12),
        0 60px 120px -40px rgba(44,44,44,0.35),
        0 0 0 1px rgba(139,154,130,0.05);
    border-top: 5px solid var(--copper);
    overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 6px rgba(44,44,44,0.05),
        0 30px 50px -10px rgba(44,44,44,0.16),
        0 80px 140px -50px rgba(139,154,130,0.4),
        0 0 0 1px rgba(139,154,130,0.1);
}
.contact-card::before {
    content: "";
    position: absolute; top: 0; right: 0;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(139,154,130,0.10) 0%, transparent 70%);
    pointer-events: none;
}
@media (max-width: 760px) {
    .contact-card { padding: var(--s-7) var(--s-5) var(--s-8); }
}
@media (max-width: 480px) {
    .contact-card { padding: var(--s-6) var(--s-5); }
}

/* Below-form details */
.contact-details {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.contact-intro {
    max-width: 720px;
    margin: 0 auto var(--s-9);
    font-size: var(--t-md);
    font-weight: 300;
    line-height: 1.8;
    color: var(--charcoal);
}
.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    margin-bottom: var(--s-8);
}
@media (max-width: 900px) { .contact-details-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (max-width: 480px) { .contact-details-grid { grid-template-columns: 1fr; } }

.contact-detail {
    padding: var(--s-5) var(--s-3);
    border-top: 1px solid var(--rule);
}
.contact-detail-mark {
    color: var(--copper);
    font-size: 14px;
    margin-bottom: var(--s-3);
}
.contact-detail-title {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: normal;
    color: var(--charcoal);
    margin: 0 0 var(--s-3);
    line-height: 1.4;
    word-break: break-word;
}
.contact-detail p {
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--stone);
    margin: 0;
}
.contact-cert-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule);
}

/* Big form fields */
.form-big { display: grid; gap: var(--s-5); }
.form-big .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .form-big .form-row { grid-template-columns: 1fr; } }

.form-field { position: relative; }
.form-field label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: var(--s-2);
    transition: color 0.3s;
}
.form-field:focus-within label { color: var(--copper); }

.input-big, .select-big, .textarea-big {
    width: 100%;
    padding: 18px 20px;
    border: none;
    border-bottom: 2px solid var(--rule);
    background: transparent;
    font-family: var(--font);
    font-size: var(--t-base);
    font-weight: 300;
    color: var(--charcoal);
    transition: border-color 0.3s var(--ease);
    border-radius: 0;
}
.input-big:focus, .select-big:focus, .textarea-big:focus {
    outline: none;
    border-bottom-color: var(--copper);
}
.input-big::placeholder, .textarea-big::placeholder { color: var(--stone); }

.select-big {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B9A82' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 34px;
    cursor: pointer;
}

.textarea-big { min-height: 140px; resize: vertical; line-height: 1.7; }

/* ═══════ HERO SUBMIT BUTTON ═══════ */
.btn-send {
    --btn-h: 72px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    height: var(--btn-h);
    padding: 0 44px;
    margin-top: var(--s-5);
    width: 100%;
    max-width: 340px;
    background: var(--charcoal);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), letter-spacing 0.4s var(--ease);
    box-shadow: 0 14px 30px -12px rgba(44,44,44,0.5);
}

/* Gradient copper fill slides in from left */
.btn-send::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-l) 50%, var(--copper) 100%);
    background-size: 200% 100%;
    transform: translateX(-102%);
    transition: transform 0.6s var(--ease);
    z-index: -1;
}

/* Shimmer highlight */
.btn-send::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 40%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.25) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    z-index: 0;
    pointer-events: none;
}

.btn-send > * { position: relative; z-index: 1; }

.btn-send:hover {
    transform: translateY(-4px);
    letter-spacing: normal;
    box-shadow: 0 24px 50px -15px rgba(139,154,130,0.55);
}
.btn-send:hover::before { transform: translateX(0); }
.btn-send:hover::after {
    animation: btnShimmer 1.3s var(--ease);
}
.btn-send:active { transform: translateY(-1px); }

@keyframes btnShimmer {
    0%   { left: -100%; }
    100% { left: 110%; }
}

/* Arrow icon that shifts on hover */
.btn-send-arrow {
    display: inline-block;
    width: 28px; height: 1px;
    background: #fff;
    position: relative;
    transition: width 0.4s var(--ease);
}
.btn-send-arrow::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 8px; height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.4s var(--ease);
}
.btn-send:hover .btn-send-arrow { width: 44px; }

/* Pulse ring at rest to draw attention */
.btn-send-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.btn-send-wrap::before {
    content: "";
    position: absolute;
    top: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 340px;
    height: 72px;
    border: 2px solid var(--copper);
    opacity: 0;
    animation: btnPulse 2.4s ease-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes btnPulse {
    0%   { opacity: 0.55; transform: translateX(-50%) scale(0.98); }
    70%  { opacity: 0;    transform: translateX(-50%) scale(1.06); }
    100% { opacity: 0;    transform: translateX(-50%) scale(1.06); }
}

/* Form helper text under button */
.form-helper {
    margin-top: var(--s-4);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--stone);
    text-align: center;
}

/* ═══════ MAP SECTION — full width, compact ═══════ */
.section-map-full {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--parchment);
}
.map-full-wrap {
    position: relative;
    width: 100%;
    background: #e8eadf;
    overflow: hidden;
}
.map-full-wrap iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
}
@media (max-width: 640px) {
    .map-full-wrap iframe { height: 300px; }
}

/* Legacy containers retained for older usages */
.section-map {
    padding: var(--s-9) 0 var(--s-10);
    background: var(--parchment);
}
.map-wrap {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    background: #e8eadf;
    min-height: 520px;
    box-shadow:
        0 2px 6px rgba(44,44,44,0.04),
        0 30px 60px -20px rgba(44,44,44,0.2);
    overflow: hidden;
}
.map-wrap iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
}

/* Floating address card — acts as a clickable overlay that opens Google Maps */
.map-open-overlay {
    position: absolute;
    top: var(--s-5);
    left: var(--s-5);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5);
    background: #fff;
    box-shadow:
        0 2px 6px rgba(44,44,44,0.06),
        0 14px 30px -10px rgba(44,44,44,0.25);
    text-decoration: none;
    color: var(--charcoal);
    max-width: 340px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    border-left: 3px solid var(--copper);
}
.map-open-overlay:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 6px rgba(44,44,44,0.06),
        0 22px 44px -10px rgba(139,154,130,0.5);
    color: var(--charcoal);
}
.map-open-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    background: var(--copper);
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139,154,130,0.4);
    animation: mapPinBob 2.4s ease-in-out infinite;
}
@keyframes mapPinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.map-open-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--t-sm);
    line-height: 1.4;
}
.map-open-text strong {
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: normal;
    color: var(--charcoal);
}
.map-open-text span {
    font-size: 12px;
    font-weight: 300;
    color: var(--stone);
}
.map-open-cta {
    margin-top: 4px;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--copper) !important;
}

.map-directions {
    position: absolute;
    bottom: var(--s-6);
    right: var(--s-6);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 16px 30px;
    background: var(--copper);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(139,154,130,0.5);
    transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s, letter-spacing 0.3s;
    z-index: 2;
}
.map-directions:hover {
    background: var(--copper-d);
    color: #fff;
    transform: translateY(-3px);
    letter-spacing: normal;
    box-shadow: 0 20px 40px -10px rgba(139,154,130,0.7);
}
.map-directions .btn-send-arrow { background: #fff; width: 24px; }
.map-directions .btn-send-arrow::after { border-top-color: #fff; border-right-color: #fff; }

@media (max-width: 640px) {
    .section-map { padding: var(--s-7) 0 var(--s-8); }
    .map-wrap { min-height: 460px; }
    .map-wrap iframe { height: 460px !important; }
    .map-open-overlay {
        position: static;
        max-width: none;
        margin: var(--s-4) var(--s-4) 0;
    }
    .map-directions {
        position: static;
        margin: var(--s-4) auto 0;
        display: flex;
        justify-content: center;
        max-width: 300px;
    }
}

/* Shorter overlay spacing for the full-width compact map */
.map-full-wrap .map-open-overlay {
    top: var(--s-4);
    left: var(--s-4);
    padding: var(--s-4);
    max-width: 300px;
}
.map-full-wrap .map-directions {
    bottom: var(--s-4);
    right: var(--s-4);
    padding: 12px 22px;
}
@media (max-width: 640px) {
    .map-full-wrap .map-open-overlay,
    .map-full-wrap .map-directions {
        position: static;
        margin: var(--s-4);
    }
    .map-full-wrap .map-directions {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   GALLERY — masonry grid of completed work
   ═══════════════════════════════════════════════════════════ */
.gallery-grid {
    column-count: 3;
    column-gap: var(--s-5);
}
@media (max-width: 900px) { .gallery-grid { column-count: 2; column-gap: var(--s-4); } }
@media (max-width: 560px) { .gallery-grid { column-count: 1; } }

.gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: var(--s-5);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--parchment);
}
.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.8s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item-tall img { aspect-ratio: 3/4; object-fit: cover; }

.gallery-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--s-5);
    background: linear-gradient(to top, rgba(26,26,26,0.85) 0%, transparent 60%);
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none; /* let clicks pass through to the image so the lightbox opens */
}
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-caption-title {
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: normal;
    display: block;
    margin-bottom: 4px;
}
.gallery-caption-place {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--copper-l);
}

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL INSCRIPTIONS PANEL
   ═══════════════════════════════════════════════════════════ */
.inscriptions-panel {
    background: var(--parchment);
    padding: var(--s-7) var(--s-6);
    border-top: 3px solid var(--copper);
}
.inscriptions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.inscriptions-list li {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
    font-size: var(--t-sm);
    font-weight: 300;
    line-height: 1.6;
    color: var(--charcoal);
}
.inscriptions-list li:first-child { border-top: none; }
.inscriptions-list li strong {
    display: block;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 2px;
}
.inscriptions-list li i {
    color: var(--copper);
    font-style: normal;
    width: 16px;
    flex-shrink: 0;
    margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   LOCATION PAGE
   ═══════════════════════════════════════════════════════════ */
.location-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.location-list li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    color: var(--charcoal);
}
.location-list li i {
    color: var(--copper);
    font-style: normal;
    font-size: 10px;
}
.location-aside {
    background: var(--parchment);
    padding: var(--s-7) var(--s-6);
    border-top: 3px solid var(--copper);
}
.location-badges {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* ═══════════════════════════════════════════════════════════
   GOOGLE-STYLE REVIEWS AGGREGATE
   ═══════════════════════════════════════════════════════════ */
.google-aggregate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-6);
    background: #fff;
    box-shadow:
        0 2px 6px rgba(44,44,44,0.04),
        0 20px 40px -20px rgba(44,44,44,0.15);
    max-width: 920px;
    margin: 0 auto;
    border-top: 3px solid var(--copper);
}
@media (max-width: 640px) {
    .google-aggregate { flex-direction: column; text-align: center; }
}
.google-aggregate-main {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}
@media (max-width: 640px) {
    .google-aggregate-main { flex-direction: column; gap: var(--s-3); }
}
.google-aggregate-score {
    font-size: 56px;
    font-weight: 300;
    letter-spacing: normal;
    color: var(--charcoal);
    line-height: 1;
}
.google-aggregate-stars {
    font-size: 22px;
    letter-spacing: normal;
    line-height: 1;
}
.google-aggregate-stars .star { color: var(--copper); }
.google-aggregate-stars .star.half { opacity: 0.4; }
.google-aggregate-text {
    font-size: var(--t-sm);
    font-weight: 300;
    color: #555550;
    line-height: 1.6;
}
.google-aggregate-text strong {
    font-weight: 500;
    color: var(--charcoal);
}
.google-aggregate-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 14px 24px;
    background: var(--charcoal);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}
.google-aggregate-cta:hover {
    background: var(--copper);
    color: #fff;
    transform: translateY(-2px);
}
.google-aggregate-cta .google-logo {
    background: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   15-YEAR GUARANTEE BAND
   ═══════════════════════════════════════════════════════════ */
.guarantee-band {
    background: var(--ink);
    color: var(--light-txt);
    padding: var(--s-8) 0;
    overflow: hidden;
    position: relative;
}
.guarantee-band::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(139,154,130,0.12) 0%, transparent 70%);
}
.guarantee-band::after {
    content: "";
    position: absolute;
    bottom: -80px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(139,154,130,0.10) 0%, transparent 70%);
}
.guarantee-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-7);
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (max-width: 900px) {
    .guarantee-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--s-5);
    }
}
.guarantee-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px; height: 96px;
    margin: 0 auto;
}
.guarantee-mark .guarantee-logo-svg {
    width: 96px !important;
    height: 96px !important;
    color: var(--copper) !important;
    opacity: 0.8;
}
.guarantee-years {
    position: absolute;
    z-index: 2;
    font-family: var(--font);
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    background: var(--copper);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    letter-spacing: normal;
    box-shadow: 0 4px 16px rgba(139,154,130,0.4);
}
.guarantee-copy .h4 { color: #fff; }
.guarantee-copy .eyebrow { color: var(--copper-l); }
.guarantee-copy .muted { color: var(--stone); }
.guarantee-badges {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.guarantee-badges .badge {
    color: var(--light-txt);
    border-color: rgba(139,154,130,0.35);
    background: rgba(255,255,255,0.03);
}
.guarantee-badges .badge i { color: var(--copper-l); }
@media (max-width: 900px) {
    .guarantee-badges { flex-direction: row; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   BROCHURE DOWNLOAD BAND (on memorials page)
   ═══════════════════════════════════════════════════════════ */
.brochure-band {
    background: var(--parchment);
    padding: var(--s-6) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.brochure-inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
}
@media (max-width: 760px) {
    .brochure-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--s-4);
    }
}
.brochure-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--copper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(44,44,44,0.08);
}
.brochure-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brochure-copy strong {
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--charcoal);
}
.brochure-copy span {
    font-size: var(--t-sm);
    font-weight: 300;
    color: #555550;
}

/* ═══════ FOOTER ═══════ */
.footer {
    background: var(--ink); color: var(--light-txt);
    padding: var(--s-9) var(--gutter) 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: var(--s-7);
    max-width: var(--container);
    margin: 0 auto;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer h4 {
    font-size: var(--t-xs); font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: #fff; margin: 0 0 var(--s-5);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 6px 0; }
.footer a {
    color: var(--stone); text-decoration: none;
    font-size: var(--t-sm); font-weight: 300;
}
.footer a:hover { color: var(--copper-l); }
.footer p {
    font-size: var(--t-sm); font-weight: 300; line-height: 1.8;
    color: var(--stone); margin: 0 0 var(--s-4);
}
.footer .brandmark-name { color: #fff; }
.footer .brandmark-tag { color: var(--copper-l); }
.footer .brandmark .logo-mark { color: var(--copper-l); }
.footer-cert {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--copper-l) !important;
    margin-top: var(--s-5) !important;
}
.copyright {
    border-top: 1px solid rgba(212,208,200,0.08);
    margin-top: var(--s-8); padding: var(--s-5) 0;
    text-align: center;
    font-size: 11px; font-weight: 300;
    letter-spacing: normal;
    color: #777;
}
.copyright a { color: var(--stone); }
.copyright a:hover { color: var(--copper-l); }

/* ═══════ UI KIT PAGE ═══════ */
.uikit-section { padding: var(--s-8) 0; border-top: 1px solid var(--rule); }
.uikit-label {
    font-size: var(--t-xs); font-weight: 500;
    letter-spacing: normal; text-transform: uppercase;
    color: var(--stone);
    margin-bottom: var(--s-5);
}
.swatch {
    display: flex; flex-direction: column;
    padding: var(--s-5); min-height: 140px;
    justify-content: flex-end;
    border: 1px solid var(--rule);
}
.swatch-name { font-size: var(--t-sm); font-weight: 500; color: var(--charcoal); }
.swatch-hex { font-size: var(--t-xs); color: var(--stone); font-weight: 300; letter-spacing: normal; }

/* ═══════ UTILITIES ═══════ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-copper { color: var(--copper) !important; }
.text-stone  { color: var(--stone) !important; }
.text-white  { color: #fff !important; }

.bg-parchment { background: var(--parchment); }
.bg-ivory { background: var(--ivory); }
.bg-ink { background: var(--ink); }
.bg-copper { background: var(--copper); color: #fff; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }

.hide-sm { display: block; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* Scroll to top */
.to-top {
    position: fixed; bottom: 30px; right: 30px;
    width: 48px; height: 48px;
    background: var(--copper); color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    opacity: 0; visibility: hidden;
    transition: all 0.3s;
    z-index: 50;
}
.to-top.visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--copper-d); color: #fff; }


/* ===== Eden real-content: owner quote, dropdown nav, content pages ===== */

/* About — owner quote (light theme) */
.owner-quote{max-width:880px;margin:clamp(40px,6vw,80px) auto 0;text-align:center;padding:0 1rem;}
.owner-quote blockquote{font-family:var(--font);font-weight:300;font-style:italic;font-size:clamp(18px,2.2vw,26px);line-height:1.6;color:var(--charcoal);margin:0 0 1.25rem;}
.owner-quote figcaption{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);}
.owner-quote figcaption strong{color:var(--charcoal);font-weight:600;}

/* Dropdown nav — square, flush to the bar, no underline */
.nav-menu .nav-parent{position:relative;}
.nav-caret{font-size:.62em;opacity:.6;margin-left:3px;display:inline-block;}
.nav-menu .nav-parent > a{border-bottom:2px solid transparent;}
.nav-menu .nav-parent:hover > a{color:var(--copper);border-bottom-color:transparent;}
.nav-dropdown{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
    min-width:244px;margin:0;padding:6px;list-style:none;
    background:#fff;border:1px solid var(--rule);border-top:2px solid var(--copper);border-radius:0;
    box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:60;
}
.nav-parent:hover > .nav-dropdown,.nav-parent:focus-within > .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* invisible hover bridge so the menu reads as coming from the bar (no gap break) */
.nav-dropdown::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-dropdown li{display:block;}
.nav-dropdown a{display:block;padding:11px 16px;border:0!important;border-radius:0;font-size:13px;letter-spacing:.01em;color:var(--charcoal);text-decoration:none;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease);}
.nav-dropdown a:hover{background:var(--parchment);color:var(--copper);}
@media (max-width:900px){
    .nav-dropdown{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 var(--s-2) 14px;}
    .nav-parent:hover > .nav-dropdown{transform:none;}
    .nav-dropdown a{padding:6px 0;}
}

/* ═══════ MOBILE BURGER NAV (≤900px) ═══════ */
.nav-burger{display:none;}
@media (max-width:900px){
    .nav-burger{
        display:flex;flex-direction:column;justify-content:center;gap:5px;flex:none;
        width:48px;height:44px;margin:0;padding:11px 12px;
        background:#fff;border:1px solid var(--rule);border-radius:4px;cursor:pointer;
    }
    .nav-burger span{display:block;width:100%;height:2px;background:var(--charcoal);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease);}
    .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    .nav-menu{
        display:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
        text-align:left;gap:0;margin-top:var(--s-3);border-top:1px solid var(--rule);
    }
    .nav-menu.open{display:flex;}
    .nav-menu > li{width:100%;}
    .nav-menu a{padding:var(--s-3) var(--s-2);font-size:var(--t-sm);border-bottom:1px solid var(--rule);}
    .nav-menu a.nav-cta{margin:var(--s-3) 0 0;text-align:center;border-radius:4px;border-bottom:none;}
}

/* ═══════ MOBILE STICKY CONTACT BAR (Call / WhatsApp / Quote) ═══════ */
.mobile-ctabar{display:none;}
@media (max-width:900px){
    .mobile-ctabar{
        display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
        box-shadow:0 -4px 18px rgba(0,0,0,.16);
    }
    .mcb-item{
        flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        padding:9px 4px;min-height:60px;color:#fff;font-size:12.5px;font-weight:600;
        letter-spacing:.02em;text-decoration:none;text-align:center;
    }
    .mcb-item span{line-height:1;}
    .mcb-item svg{display:block;}
    .mcb-call{background:var(--copper-d);}
    .mcb-wa{background:#25D366;}
    .mcb-quote{background:var(--charcoal);}
    .mcb-item:active{filter:brightness(.9);}
    body{padding-bottom:60px;}           /* clear the fixed bar */
    .to-top{bottom:74px;}                 /* lift above the bar */
}

/* Content / prose pages (light theme) */
.container-narrow{max-width:var(--container-narrow,820px);}
.prose-section .prose-h{font-family:var(--font);font-weight:500;font-size:clamp(22px,2.6vw,30px);color:var(--charcoal);margin:2.4rem 0 1rem;}
.prose-section .prose-h:first-child{margin-top:0;}
.prose-section .prose-p{font-weight:300;font-size:clamp(16px,1.15vw,18px);line-height:1.85;color:var(--charcoal);opacity:.86;margin:0 0 1.15rem;}
.prose-section .prose-p a,.prose-section .prose-list a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;}
.prose-section .prose-list{margin:0 0 1.4rem;padding-left:0;list-style:none;}
.prose-section .prose-list li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;font-weight:300;line-height:1.7;color:var(--charcoal);opacity:.88;}
.prose-section .prose-list li::before{content:'';position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--copper);}
.prose-note{margin:1.6rem 0;padding:1.1rem 1.4rem;border-left:3px solid var(--copper);background:rgba(139,154,130,.08);font-weight:300;color:var(--charcoal);}
.prose-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--rule);}
.prose-figure{margin:0 0 2.2rem;border-radius:4px;overflow:hidden;background:#e7e3da;box-shadow:var(--shadow-sm);}
.prose-figure img{display:block;width:100%;height:auto;}
.prose-figure figcaption{padding:.7rem 1rem;font-size:14px;font-weight:300;color:#555550;text-align:center;}
/* Text-only block within an upgraded prose page (no image) */
.prose-block{max-width:820px;margin:0 auto var(--s-7);}
.prose-block:last-of-type{margin-bottom:0;}
.prose-section .media-row{margin-bottom:var(--s-8);}
/* Contact page — details at top + bigger, social buttons with logos */
.contact-top{margin-bottom:var(--s-9);}
.contact-details-grid--big .contact-detail-title{font-size:var(--t-lg);}
.contact-details-grid--big .contact-detail-title a{color:var(--charcoal);}
.contact-details-grid--big .contact-detail-title a:hover{color:var(--copper);}
.contact-details-grid--big .contact-detail p{font-size:var(--t-base);}
.contact-social{display:flex;gap:var(--s-4);flex-wrap:wrap;justify-content:center;margin-top:var(--s-6);}
.contact-social-btn{display:inline-flex;align-items:center;gap:var(--s-3);padding:13px 24px;border-radius:6px;color:#fff;font-weight:600;font-size:var(--t-base);text-decoration:none;transition:filter .2s var(--ease),transform .2s var(--ease);}
.contact-social-btn:hover{filter:brightness(.93);transform:translateY(-2px);color:#fff;}
.contact-social-btn svg{display:block;}
.cs-wa{background:#25D366;}
.cs-fb{background:#1877F2;}

/* ── Product gallery (real Eden work) ─────────────────────────── */
.section-product-gallery { background: var(--parchment); }
.pg-head { text-align: center; max-width: 660px; margin: 0 auto var(--s-8); }
.pg-lead { color: #555550; font-weight: 300; line-height: 1.6; margin-top: var(--s-3); }
.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: var(--s-4);
}
.pg-item {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #e7e3da;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-sm);
}
.pg-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.pg-item:hover img { transform: scale(1.05); }
.pg-note {
    text-align: center;
    margin-top: var(--s-7);
    color: #555550;
    font-weight: 300;
}
@media (max-width: 560px) {
    .product-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
}

/* ── Special offer feature (image + price card) ───────────────── */
.special-offer-feature { background: var(--parchment); }
.so-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}
.so-image {
    margin: 0;
    background: #fff;
    border-radius: 6px;
    padding: var(--s-6);
    box-shadow: var(--shadow);
    text-align: center;
}
.so-image img { max-width: 100%; height: auto; display: inline-block; }
.so-card { padding: var(--s-2) 0; }
.so-intro { color: #555550; font-weight: 300; line-height: 1.7; margin: var(--s-3) 0 var(--s-5); }
.so-price-row { display: flex; gap: var(--s-7); margin-bottom: var(--s-5); }
.so-price { display: flex; flex-direction: column; }
.so-price-size { font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-d); }
.so-price-amount { font-size: var(--t-2xl); font-weight: 500; color: var(--ink); line-height: 1.1; }
.so-includes { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.so-includes li {
    position: relative; padding-left: var(--s-5); margin-bottom: var(--s-2);
    color: var(--charcoal); font-weight: 300;
}
.so-includes li::before {
    content: ''; position: absolute; left: 0; top: 0.55em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--copper);
}
.so-includes li em { color: #777; font-style: italic; font-size: 0.9em; }
.so-excl { font-size: var(--t-sm); color: #888; margin-bottom: var(--s-6); }
@media (max-width: 760px) {
    .so-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .so-price-row { gap: var(--s-6); }
}

/* ═══════ COMBINED GREEN TRUST BANNER (global, bottom of every page) ═══════ */
/* Per client (29 Jun): one green strip, six separate cells split by thin vertical rules.
   The 1px grid gap over a solid-green container = wrap-proof hairline dividers. */
.trust-banner {
    background: var(--copper-d);
    color: #fff;
    padding: 0;
}
.trust-banner-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.28);   /* shows through the gaps as the rules */
}
.trust-banner-item {
    background: var(--copper-d);
    text-align: center;
    padding: var(--s-6) var(--s-4);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 980px) {
    .trust-banner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .trust-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Shorter hero (26 Jun) no longer needs the scroll cue — it overlapped the tagline */
.hero-scroll { display: none; }

/* ═══════ ALONGSIDE IMAGE+TEXT STANDARD (client req 29 Jun) ═══════
   Every left/right image-text block uses this: framed white-card photo
   sitting level (vertically centred) beside the text. Add .reverse to flip
   the image to the right. Mirrors the special-offer (.so-image) treatment. */
.media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto var(--s-8);
}
.media-row:last-child { margin-bottom: 0; }
.media-row.reverse .media-frame { order: 2; }
.media-frame {
    margin: 0;
    background: #fff;
    border-radius: 6px;
    padding: var(--s-5);
    box-shadow: var(--shadow);
    text-align: center;
    align-self: center;
}
.media-frame img { max-width: 100%; height: auto; display: inline-block; border-radius: 3px; }
.media-frame .media-video { max-width: 100%; height: auto; display: block; border-radius: 3px; margin: 0 auto; background: #1a1a1a; }
.media-frame .media-video { max-height: 560px; width: auto; }
@media (max-width: 760px) { .media-frame .media-video { max-height: 70vh; } }
.media-frame figcaption { font-size: var(--t-sm); color: #777; margin-top: var(--s-3); }
.media-body > :first-child { margin-top: 0; }
@media (max-width: 760px) {
    .media-row { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
    .media-row.reverse .media-frame { order: 0; }
}
/* Full-width centred copy bands that break up the white image rows */
.prose-band {
    background: var(--parchment);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.prose-center {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--t-md);
    line-height: 1.65;
    color: #4f4f47;
}
/* Owner quote sitting inside a media-row body (left-aligned, not the old centred block) */
.home-quote { margin: 0; }
.home-quote blockquote {
    font-family: var(--font); font-weight: 300; font-style: italic;
    font-size: clamp(20px, 2vw, 26px); line-height: 1.55; color: var(--charcoal);
    margin: 0 0 var(--s-4);
}
.home-quote figcaption { font-size: var(--t-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
.home-quote figcaption strong { color: var(--charcoal); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   IMAGE LIGHTBOX — click any content photo to expand it full
   (shows the whole, uncropped image; closes on click / Esc)
   ═══════════════════════════════════════════════════════════ */
.js-zoomable { cursor: zoom-in; }

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-4);
    padding: 5vmin;
    background: rgba(24, 22, 20, 0.93);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
    cursor: zoom-out;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }

.lightbox-overlay img {
    max-width: min(96vw, 1400px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transform: scale(0.94);
    transition: transform 0.3s var(--ease);
}
.lightbox-overlay.open img { transform: scale(1); }

.lightbox-caption {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--t-sm);
    text-align: center;
    max-width: 60ch;
    margin: 0;
}
.lightbox-caption:empty { display: none; }

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 26px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.06); }

@media (max-width: 640px) {
    .lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
    .lightbox-overlay img { max-height: 80vh; }
}