/* =========================================================
   American Monument & Granite Co.
   Heritage / memorial homepage — responsive (desktop / tablet / mobile)
   Palette: flag navy + red, warm parchment. Hand-drawn ink illustrations.
   ========================================================= */

:root {
    /* Brand */
    --navy:        #1d3b6b;   /* flag blue — primary */
    --navy-deep:   #142a4d;
    --navy-soft:   #2c4f86;
    --red:         #b22532;   /* flag red — accent */
    --red-deep:    #8e1d28;

    /* Surfaces */
    --cream:       #faf5ea;   /* page background */
    --parchment:   #ece0c8;   /* warm section background (sand tone, matches --sand) */
    --parchment-rgb: 236, 224, 200;  /* keep in sync with --parchment (#ece0c8) — used by gradient scrims */
    --sand:        #ece0c8;   /* deeper section background */
    --paper:       #fffdf8;   /* cards */
    --stamp-paper: #f7ecd4;   /* warm aged commemorative paper (Forever stamp) */
    --granite:     #6f6a62;   /* muted stone gray */

    /* Ink */
    --ink:         #2a2620;   /* primary text */
    --ink-soft:    #5d564b;   /* secondary text */
    --line:        rgba(42, 38, 32, 0.16);
    --line-strong: rgba(42, 38, 32, 0.4);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Hanken Grotesk', system-ui, sans-serif;
    --font-script:  'Caveat', cursive;

    --shadow-card: 0 18px 40px -24px rgba(20, 42, 77, 0.55);
    --radius: 14px;
    --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--cream);
    line-height: 1.6;
    font-size: 17px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    margin: 0;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ink);
}

p { margin: 0 0 1em; }

a { text-decoration: none; color: inherit; }

img { display: block; max-width: 100%; height: auto; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}

/* Decorative little flourishes used as section eyebrows */
.eyebrow {
    font-family: var(--font-script);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--red);
    line-height: 1;
    margin-bottom: 6px;
    display: inline-block;
}

.section-head { text-align: center; }
.section-head h2 {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    max-width: 18ch;
    margin: 0 auto 18px;
}
/* Past-work heading: wide enough for one line; nbsp grouping in the markup
   forces a clean "Find inspiration / in our past work" break when it can't. */
.section-head h2.work-head,
.section-head h2.process-head { max-width: none; }
.section-head p {
    max-width: 56ch;
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--navy-soft);
    color: #fdf6e8;
    border: 1.5px solid var(--navy-deep);
    border-radius: 999px;
    padding: 14px 30px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 3px 3px 0 0 var(--navy-deep);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-align: center;
}
/* Hover = pressed down: button sinks toward its shadow, shadow shrinks */
.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--navy-deep);
    background: var(--navy);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--navy-deep); }
.btn .arr { transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn-red {
    background: #c12c39;
    border-color: var(--red-deep);
    box-shadow: 3px 3px 0 0 var(--red-deep);
}
.btn-red:hover { background: var(--red); box-shadow: 1px 1px 0 0 var(--red-deep); }

.btn-ghost {
    background: transparent;
    color: var(--navy-deep);
    box-shadow: 3px 3px 0 0 var(--line-strong);
    border-color: var(--navy-deep);
}
.btn-ghost:hover { background: rgba(29, 59, 107, 0.06); box-shadow: 1px 1px 0 0 var(--line-strong); }

.btn-sm { padding: 9px 20px; font-size: 0.85rem; box-shadow: 2px 2px 0 0 var(--navy-deep); }

/* =========================================================
   Navbar
   ========================================================= */
.navbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 40px;
}
.navbar.scrolled {
    position: fixed;
    background: rgba(250, 245, 234, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding-top: 12px;
    padding-bottom: 12px;
    animation: dropIn 0.4s ease;
}
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.brand { display: flex; align-items: center; gap: 12px; z-index: 1101; }
.brand img { height: 42px; width: auto; }
.brand .brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--navy-deep);
}
.brand .brand-name span { color: var(--red); display: block; font-size: 0.72rem; letter-spacing: 0.18em; }

.nav-links {
    display: flex;
    gap: 30px;
    font-size: 0.92rem;
    font-weight: 600;
}
.nav-links a { position: relative; padding: 4px 0; color: var(--ink); }
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--red);
    transition: width 0.22s ease;
}
.nav-links a:hover::after { width: 100%; }

.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    border: 1.5px solid var(--red-deep);
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 3px 3px 0 0 var(--red-deep);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.nav-phone:hover { transform: translate(3px,3px); box-shadow: 0 0 0 0 var(--red-deep); }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 1101;
    background: none; border: none;
}
.hamburger span {
    display: block; width: 26px; height: 2.5px;
    background: var(--navy-deep); border-radius: 2px;
    transition: 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    text-align: center;
    min-height: clamp(580px, 92vh, 860px);
    background: var(--parchment);
    overflow: hidden;
}
/* full-bleed background scene — <video> on the homepage, <img> as the fallback.
   object-fit/position apply to both, so the crop matches the old still exactly. */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    z-index: 0;
}
/* Decorative background: never a click/tap target, and never focusable even if a
   browser exposes native controls. Parchment underneath covers the first frame's
   decode gap so the hero never flashes white. */
.hero-bg--video {
    pointer-events: none;
    background: var(--parchment);
}
/* legibility scrim — warm cream from the left + soft top/bottom fades */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(250,245,234,0.96) 0%, rgba(250,245,234,0.82) 26%, rgba(250,245,234,0.30) 50%, rgba(250,245,234,0) 68%),
        linear-gradient(180deg, rgba(250,245,234,0) 70%, rgba(20,42,77,0.16) 100%);
}
.hero .container { position: relative; z-index: 3; width: 100%; }
.hero-content { position: relative; max-width: 960px; margin: 0 auto; padding: 108px 0 44px; }
.hero .kicker {
    font-family: var(--font-script);
    color: var(--red);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1;
}
.hero h1 {
    font-size: clamp(2.3rem, 5.4vw, 3.9rem);
    line-height: 1.05;
    margin: 4px auto 14px;
    max-width: 100%;
    text-shadow: 0 1px 0 rgba(250,245,234,0.6);
}
.hero h1 em { font-style: italic; color: var(--red); }
.hero .lede {
    font-size: clamp(1.02rem, 1.7vw, 1.22rem);
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 0 auto 22px;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* subtle paper grain over hero */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 2;
}

/* Animated entrance */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
/* Hero entrance — autoplays on load (no JS needed) */
.hero-reveal { opacity: 0; transform: translateY(24px); animation: rise 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .18s; }
.d3 { animation-delay: .31s; } .d4 { animation-delay: .44s; }

/* =========================================================
   Proof / review strip — vintage stamp-strip marquee
   A torn strip of postage: scalloped perforations top & bottom,
   an engraved inner rule, aged sand paper, serif numerals, and
   red ornament dividers between credentials.
   ========================================================= */
.proof {
    position: relative;
    /* Flat parchment — same solid color as the owner section below; the engraved
       red/navy stamp rules provide all the separation. Only the hero's 4px paper
       grain rides on top so it reads as the same aged paper. */
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    padding: 40px 0 42px;
    text-align: center;
    overflow: hidden;
}
/* Engraved double rule inset from the perforated edges (US-stamp inner frame) */
.proof::before {
    content: '';
    position: absolute;
    inset: 11px 0;
    border-top: 1px solid rgba(29, 59, 107, 0.30);
    border-bottom: 1px solid rgba(29, 59, 107, 0.30);
    box-shadow:
        inset 0 2px 0 rgba(255,253,248,0.6),
        inset 0 -2px 0 rgba(255,253,248,0.6),
        inset 0 3px 0 rgba(178, 37, 50, 0.18),
        inset 0 -3px 0 rgba(178, 37, 50, 0.18);
    pointer-events: none;
}
.proof-lead {
    font-family: var(--font-script);
    /* same fluid scale + flag-red as the hero kicker, for one consistent script voice */
    font-size: clamp(1.6rem, 3vw, 2.05rem);
    color: var(--red);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
/* Flanking ornaments turn the header into a small engraved banner */
.proof-lead::before,
.proof-lead::after {
    content: '✦';
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--navy);
    vertical-align: middle;
    margin: 0 14px;
    opacity: 0.65;
}
.proof-viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.proof-track {
    display: flex;
    align-items: center;
    gap: 58px;
    width: max-content;
    animation: marquee 32s linear infinite;
}
.proof:hover .proof-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.proof-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Red ornament divider sitting in the gap between credentials */
.proof-badge::after {
    content: '✦';
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--red);
    opacity: 0.55;
}
.proof-badge b { font-weight: 700; line-height: 1; }
.proof-badge .stars { color: var(--red); font-size: 1.05rem; letter-spacing: 2px; }
.proof-badge .num {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--navy);
    font-size: 1.55rem;
}
.proof-badge .seal {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1.5px solid var(--navy);
    border-radius: 50%;
    /* double-ring engraving like a real cancellation mark — keyed to the parchment
       sheet so the inner ring blends with the ground (was --sand) */
    box-shadow: inset 0 0 0 2px var(--parchment), inset 0 0 0 3px rgba(29, 59, 107, 0.32);
    color: var(--navy);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.92rem;
}
.proof-badge .seal.flag { color: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 2px var(--parchment), inset 0 0 0 3px rgba(178, 37, 50, 0.32); }

/* =========================================================
   Owner intro
   ========================================================= */
.owner {
    /* Flat parchment, identical to the proof strip above — no wash, just the hero's
       4px paper grain over a solid ground. */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    padding: 96px 0;
}
.owner .container {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr;
    gap: 36px;
    align-items: center;
}
.owner-text .eyebrow { font-size: 2.1rem; }
.owner-text h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 22px; text-shadow: 0 1px 0 rgba(250,245,234,0.6); }
.owner-text p { color: var(--ink-soft); font-size: 1.06rem; }
.owner-text .signature {
    font-family: var(--font-script);
    font-size: 2.2rem;
    color: var(--navy);
    margin: 18px 0 4px;
    display: inline-block;
    position: relative;
}
.owner-text .signature::after {
    content: '';
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 2px;
    background: var(--red);
    opacity: 0.5;
}
.owner-text .sig-role { font-size: 0.95rem; color: var(--granite); font-weight: 600; }
.owner-actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

.owner-portrait {
    position: relative;
    /* The stamp is a self-contained opaque rectangle. To enlarge it without
       moving the text column, grow it OUTWARD from its grid cell: a touch
       into the gutter on the left (text still clears it) and out toward the
       page edge on the right. The left text column never shifts. */
    width: calc(100% + 56px);
    max-width: none;
    margin-left: -28px;
    margin-right: -28px;
    padding: 8px 0 8px 12px;
}
/* =========================================================
   Postage stamp — US-postage styling for the owner portrait
   ========================================================= */
.postage {
    --r: 6px;            /* perforation radius */
    --g: 17px;           /* spacing between perforations */
    --pad: 14px;         /* width of the stamp margin */
    --stamp-paper: #f7ecd4;  /* warm aged commemorative paper, not clinical white */
    margin: 0;
    padding: var(--pad);
    /* flat warm aged stamp paper — in-palette with the page, no gradient */
    background: var(--stamp-paper);
    transform: rotate(-1.6deg);
    filter: drop-shadow(0 16px 30px rgba(20, 42, 77, 0.24));
    position: relative;
    /* Punch semicircular perforations along all four edges (XOR a row/column
       of circles out of a solid rectangle). */
    -webkit-mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
}
/* Engraved double-line frame (US stamps print a fine inner border) */
.postage::after {
    content: '';
    position: absolute;
    inset: calc(var(--pad) - 4px);
    border: 1px solid rgba(29, 59, 107, 0.35);
    box-shadow: inset 0 0 0 2px var(--stamp-paper), inset 0 0 0 3px rgba(29, 59, 107, 0.16);
    pointer-events: none;
}
.postage img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
}
/* Top band: country + denomination, the hallmark of US postage */
.postage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 8px 2px;
    position: relative;
    z-index: 1;
}
.postage-usa {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    color: var(--navy-deep);
}
.postage-denom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    align-self: center;
}
/* Bottom band: issuer name + place/date, like a commemorative caption */
.postage-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 8px 2px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.postage-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy-deep);
}
.postage-sub {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--granite);
}
.owner-portrait .stamp {
    position: absolute;
    bottom: -22px; left: -34px;
    background: var(--red);
    color: #fff;
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.05;
    transform: rotate(-9deg);
    box-shadow: 0 10px 26px -10px rgba(178,37,50,0.6);
    border: 2px dashed rgba(255,255,255,0.5);
    padding: 10px;
    z-index: 2;
}
.owner-portrait .stamp b { font-size: 2rem; display: block; line-height: 0.9; margin: -7px 0 3px; }

/* =========================================================
   Past work gallery
   ========================================================= */
.work {
    padding: 96px 0;
    /* Warm parchment + 4px paper grain, identical to the proof strip and owner
       section above — keeps the gallery on the same aged paper as the rest of
       the site instead of a flat, lighter panel. */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
}

/* peek carousel: equal-size cards, centre snapped, neighbours clip at the edges */
.work-carousel {
    position: relative;
    /* single source of truth for the focus-card width + inter-card gap */
    --work-card-w: clamp(320px, 50vw, 800px);
    --work-gap: 60px;
    margin-top: 56px;
    /* full-bleed: break out of the padded .container so the off-stage cards
       clip at the viewport edges, not inside a gutter (body has overflow-x:hidden) */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 20px 0 44px;
    /* clip the off-stage cards so only the focus + its two neighbours show */
    overflow: hidden;
    /* the wax-seal nav sits in a centred row BELOW the track at every width;
       gap + card-to-button distance match the testimonials' .t-controls */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 14px;
}
/* transform-driven track: JS slides one card into focus at a time and loops */
.work-track {
    display: flex;
    gap: var(--work-gap);
    /* equal-height cards (copy length varies) so the seal row below sits the
       same distance under EVERY card, like the testimonials' blue arrows */
    align-items: stretch;
    padding: 14px 0;
    will-change: transform;
    /* the track fills the first flex row; order pulls it above the prev seal,
       which precedes it in the DOM */
    order: -1;
    width: 100%;
}
/* red wax-seal nav — a solid red "cancellation" seal beneath the track,
   echoing the owner-portrait "Serving since 2004" badge (solid red fill,
   cream lettering, dashed perforation ring) so the carousel controls read as part
   of the same flag-navy/red philatelic kit as the rest of the site */
.work-arrow {
    /* with the track's 14px bottom padding this puts the seals the same ~44px
       below the cards as the testimonials' blue arrows sit below theirs */
    margin-top: 30px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* dashed cream perforation ring, like the 2004 seal */
    border: 2px dashed rgba(250, 245, 234, 0.5);
    background: var(--red);
    color: var(--cream);
    cursor: pointer;
    /* red-tinted lift, matching the seal's drop shadow */
    box-shadow: 0 10px 24px -10px rgba(178, 37, 50, 0.6);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* thin chevron drawn from two borders — no glyph font dependency */
.work-arrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}
.work-arrow.prev::before { transform: rotate(-135deg); margin-left: 2px; }
.work-arrow.next::before { transform: rotate(45deg); margin-right: 2px; }
/* hover: press the seal DOWN into the page — darker red, brighter perforation
   ring, a 2px sink + slight shrink, and the lift collapses into a tight inset
   shadow so the disc reads as being pushed in rather than popping up */
.work-arrow:hover {
    background: var(--red-deep);
    color: #fff;
    border-color: rgba(250, 245, 234, 0.7);
    transform: translateY(2px) scale(0.95);
    box-shadow:
        0 3px 8px -5px rgba(142, 29, 40, 0.55),
        inset 0 2px 5px -1px rgba(80, 12, 18, 0.45);
}
.work-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.work-card {
    /* anchors the engraved stamp frame (::after) */
    position: relative;
    /* narrower, taller focus card so more of the neighbours peek out at the
       screen edges (image 11) */
    flex: 0 0 var(--work-card-w);
    scroll-snap-align: center;
    /* warm aged commemorative stamp paper — the SAME stock as the owner's
       "Forever" stamp — with the site's 4px grain on top, so the card reads as
       printed philatelic stock, not a bright white SaaS panel */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    /* crisp, square stamp corners instead of soft SaaS rounding */
    border-radius: 2px;
    /* paper margin around the engraved frame, like a stamp's selvage */
    padding: 18px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease;
}
/* engraved double-line frame inset from the card edge — the same navy hairline +
   red philatelic accent rule the site prints on the Forever stamp and the review
   strip, now wrapping the whole card so it reads as a commemorative stamp */
.work-card::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
}
/* bare photo — no frame; the card's engraved stamp frame is the only rule, so the
   image doesn't pick up a competing navy/red border */
.work-card .photo {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    /* wider, shorter framing to bring the card height down (image 14) */
    aspect-ratio: 16 / 10;
}
.work-card .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* all card text left-aligned per image 22 */
.work-card .body { padding: 16px 4px 4px; text-align: left; }
.work-card .body h3 { font-size: 2.6rem; color: var(--ink); margin-bottom: 0; }
/* horizontal dividing line under the title */
.work-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 12px 0 14px;
}
/* bottom row: body copy on the left, button on the right */
.work-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.work-row p { flex: 1; margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
/* wider button that occupies more of the card's right side (image 4) */
.work-row .btn { flex-shrink: 0; min-width: 168px; padding: 13px 38px; }

/* centred card — emphasised purely by a deeper lift now, no outer stroke. The
   engraved stamp frame inside is the only rule on the card.
   The .featured class is moved by JS to whichever card is snapped to centre. */
.work-card.featured {
    box-shadow: 0 26px 50px -28px rgba(20, 42, 77, 0.55);
}
.work-cta { text-align: center; margin-top: 46px; }

/* =========================================================
   Process
   ========================================================= */
.process {
    padding: 100px 0;
    /* Warm parchment + 4px paper grain — the SAME aged stock as the owner and
       work sections, replacing the flat --sand panel so the process reads as the
       same heritage paper as the rest of the site. */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    position: relative;
}
.process-list { margin-top: 70px; display: flex; flex-direction: column; gap: 90px; position: relative; }
/* hand-drawn dotted connector running down the centre */
.process-list::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: 24px;
    transform: translateX(-50%);
    border-left: 3px dotted rgba(29, 59, 107, 0.38);
    z-index: 0;
}
.process-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.process-row.reverse .p-media { order: 2; }
.p-media {
    position: relative;
    z-index: 1;
    /* warm aged commemorative stamp paper + 4px grain — the SAME stock as the
       owner's "Forever" stamp and the work cards, so each step reads as a printed
       philatelic plate instead of a bright white SaaS panel */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    /* crisp, square stamp corners instead of soft SaaS rounding */
    border-radius: 2px;
    /* paper margin around the engraved frame, like a stamp's selvage */
    padding: 18px;
    box-shadow: var(--shadow-card);
}
.p-media img { width: 100%; border-radius: 2px; position: relative; z-index: 1; }
.p-text { position: relative; z-index: 1; }
/* numbered node sits on the connector, centred in the gutter */
.p-num {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    background: var(--navy);
    color: #f3d9a9;
    border-radius: 50%;
    display: grid; place-items: center;
    text-align: center;
    line-height: 1;
    padding-bottom: 4px;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    box-shadow: 0 12px 26px -12px rgba(20,42,77,0.8);
    border: 3px solid var(--parchment);
    z-index: 4;
}
.p-text .step-label {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 10px;
    display: block;
}
.p-text h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.p-text p { color: var(--ink-soft); font-size: 1.05rem; }

/* connector bridging the last step to the contact form — continues the same
   hand-drawn dotted line out of the process and ends in an arrowhead aimed at
   the form. Negative margins let it live inside the existing section gap rather
   than adding to it. */
.process-link {
    position: relative;
    height: 220px;
    margin: -86px 0 -64px;
    z-index: 2;
    pointer-events: none;
}
.process-link::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 20px;
    transform: translateX(-50%);
    border-left: 3px dotted rgba(29, 59, 107, 0.38);
}
/* arrowhead drawn as a dotted chevron — same dots, navy, and weight as the line,
   so the whole connector reads as one continuous hand-drawn stroke pointing down
   to the form */
.process-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 17px;
    height: 17px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 3px dotted rgba(29, 59, 107, 0.38);
    border-bottom: 3px dotted rgba(29, 59, 107, 0.38);
}

/* =========================================================
   Form CTA — a commemorative "correspondence card"
   The form is dressed as a piece of mail-in philatelic stock: a perforated
   stamp edge, the same navy+red engraved double-rule frame the site prints on
   the Forever stamp / proof strip / work cards, a "Forever" stamp struck by a
   Ravenna postmark in the corner, and fields drawn as ruled writing lines —
   so it reads as heritage correspondence, not a SaaS web form.
   ========================================================= */
.formcta {
    padding: 12px 0 52px;
    /* same aged parchment + 4px grain as the owner/work sections, so the
       perforation holes punched out of the card reveal matching paper behind it */
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    overflow-x: clip;
}
/* Contact page only: the whole page sits on the deeper --sand tone (the colour
   behind the map), so the form band matches the hero and visit sections. The
   homepage's identical .formcta stays on parchment. */
body.interior .formcta {
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--sand);
}

/* =========================================================
   Wax-seal seam — the break between the contact form and the testimonials is
   marked like the flap of a sealed letter ready to ship: two engraved rules run
   edge-to-edge across the page (the envelope seam) and a dimensional oxblood wax
   seal, pressed with the AMGC monogram, holds them closed in the centre.
   Both neighbours stay on parchment; the seal alone carries the separation.
   ========================================================= */
.seam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding: 20px 0;
    /* same aged parchment + 4px grain as the sections on either side, so the
       seal appears pressed onto one continuous sheet */
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    overflow: hidden;
}
/* the envelope seam: a stack of fine navy rules running the full width, out to
   both screen edges, that the wax seal clamps shut in the middle */
.seam-line {
    flex: 1 1 auto;
    height: 21px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(29, 59, 107, 0.38) 0 1.5px,
        transparent 1.5px 7px);
}

/* ---------- the wax seal ----------
   A self-contained inline SVG (see .wax-seal__svg in index.html): a domed, matte
   oxblood wax disc with a twisted-rope border, a pressed-in recessed field, fine
   engraved rings, and a relief-embossed crest (crowning star + AMGC monogram).
   All the lighting, grain and relief are done inside the SVG with native filters
   (feSpecularLighting-style bevels, inner-shadow press, fractal grain); the CSS
   here only sizes the seal and tilts it so it sits clamped in the envelope seam. */
.wax-seal {
    flex: 0 0 auto;
    position: relative;
    width: 132px;
    height: 138px;
    transform: rotate(-3deg);
    z-index: 2;
}
.wax-seal__svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* fills for the SVG parts, kept in CSS so the wax palette lives in one place */
.wax-seal .rope { fill: #7a2327; }
.wax-seal__crest path { fill: #8f2d34; }
.wax-seal__mono {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1px;
    fill: #8f2d34;
}

/* single centered column now that the questions book is gone — the card
   stands on its own, wider and more prominent than the old two-up layout */
.formcta .container {
    display: grid;
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
    align-items: start;
}

/* ---------- the correspondence card ---------- */
.tribute-card {
    --r: 7px;     /* perforation radius */
    --g: 18px;    /* perforation spacing */
    --pad: 40px;  /* selvage: paper margin from perforated edge to engraved frame */
    position: relative;
    padding: var(--pad);
    /* warm aged commemorative stamp paper — the SAME stock as the Forever stamp */
    background:
        radial-gradient(rgba(42,38,32,0.05) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    /* drop-shadow (not box-shadow) so the lift follows the scalloped perforations */
    filter: drop-shadow(0 24px 48px rgba(20, 42, 77, 0.24));
    /* punch semicircular perforations along all four edges, same technique as
       the .postage stamp in the owner section */
    -webkit-mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
}
/* engraved double-line frame inset from the perforated edge — navy hairline +
   red philatelic accent rule, identical to the work cards and Forever stamp */
.tribute-card::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.42);
    pointer-events: none;
    z-index: 1;
}

/* ---------- corner "Forever" stamp ---------- */
.tribute-stamp {
    --r: 4px; --g: 11px;
    position: absolute;
    top: 30px; right: 30px;
    z-index: 3;
    width: 74px; height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 9px 4px;
    /* a touch deeper than the card so the stamp reads as a separate sticker */
    background: #f0e2c2;
    transform: rotate(3.5deg);
    filter: drop-shadow(0 7px 12px rgba(20, 42, 77, 0.28));
    -webkit-mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        radial-gradient(var(--r) at 50% 0,    #000 96%, #0000) 50% 0    / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 50% 100%, #000 96%, #0000) 50% 100% / var(--g) var(--g) repeat-x,
        radial-gradient(var(--r) at 0 50%,    #000 96%, #0000) 0 50%    / var(--g) var(--g) repeat-y,
        radial-gradient(var(--r) at 100% 50%, #000 96%, #0000) 100% 50% / var(--g) var(--g) repeat-y,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
}
.tribute-stamp::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(29, 59, 107, 0.5);
    box-shadow:
        inset 0 0 0 1.5px #f0e2c2,
        inset 0 0 0 2.5px rgba(178, 37, 50, 0.42);
    pointer-events: none;
}
.tribute-stamp__usa {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: var(--navy-deep);
}
.tribute-stamp__flag { color: var(--red); font-size: 1.55rem; line-height: 1; }
.tribute-stamp__denom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}

/* ---------- Ravenna postmark cancellation, struck across the stamp ---------- */
.tribute-postmark {
    position: absolute;
    top: 70px; right: 86px;
    z-index: 4;
    width: 72px; height: 72px;
    transform: rotate(-13deg);
    pointer-events: none;
}
.tribute-postmark__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(29, 59, 107, 0.6);
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(29, 59, 107, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--navy);
    font-family: var(--font-display);
    text-align: center;
}
.tribute-postmark__ring b { font-size: 0.46rem; letter-spacing: 0.14em; font-weight: 700; }
.tribute-postmark__ring i { color: var(--red); font-style: normal; font-size: 0.66rem; line-height: 1; }
/* the "killer bars" that trail off a real cancellation, struck to the left */
.tribute-postmark__bars {
    position: absolute;
    right: 90%;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 22px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(29, 59, 107, 0.5) 0 1.5px,
        transparent 1.5px 6px);
}

/* ---------- intro heading ---------- */
.formcta .intro { margin-bottom: 28px; padding-right: 150px; position: relative; z-index: 2; }
.formcta .intro .eyebrow { font-size: 2rem; }
.formcta .intro h2 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); margin-bottom: 12px; }
.formcta .intro p { color: var(--ink-soft); }

/* ---------- the form, drawn as ruled writing lines ---------- */
.tribute-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 26px;
    position: relative;
    z-index: 2;
}
/* min-width:0 lets columns shrink to their grid track — without it the <select>'s
   longest <option> sets a min-width that blows the 2-col form past its container. */
.form-group { display: flex; flex-direction: column; min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--navy-deep);
}
/* inputs are fill-in-the-blank lines on the card, not boxed fields */
.form-control {
    font-family: var(--font-body);
    font-size: 1rem;
    min-width: 0;
    width: 100%;
    padding: 7px 2px;
    border: 0;
    border-bottom: 1.5px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control::placeholder { color: var(--granite); opacity: 0.7; }
.form-control:focus {
    outline: none;
    border-bottom-color: var(--navy);
    box-shadow: 0 1.5px 0 0 var(--navy);
}
/* select keeps a visible native arrow on the transparent rule */
select.form-control { cursor: pointer; }
/* the message field gets true ruled lines, like a sheet of correspondence */
textarea.form-control {
    resize: vertical;
    line-height: 32px;
    padding: 6px 2px 0;
    min-height: 132px;
    border-bottom: 1.5px solid var(--line-strong);
    background-attachment: local;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 31px,
        var(--line) 31px,
        var(--line) 32px);
}
.consent {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.consent input { margin-top: 4px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--navy); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: 0.75rem; color: var(--granite); }
.form-success {
    grid-column: 1 / -1;
    display: none;
    background: var(--navy);
    color: #f3ead8;
    padding: 16px 20px;
    border-radius: 2px;
    font-weight: 600;
}
.form-success.show { display: block; animation: rise 0.5s ease forwards; }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials {
    padding: 52px 0 64px;
    /* full-screen interlude: the section claims the whole viewport (heading,
       carousel and arrows centred in it) so the reviews get a full page of
       their own and the Insights broadsheet starts at the fold below. min-
       height (not height) lets long reviews grow the section on small screens;
       svh keeps phone browser chrome from clipping it. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* same aged parchment + 4px grain as the formcta section above — the paper
       runs unbroken, but the .seam postmark struck between them now marks the
       break, so the form and the testimonials read as two distinct sections */
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    text-align: center;
}
.testimonials .eyebrow { font-size: 2rem; }
.testimonials h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 44px; }
/* Peek-carousel testimonials: one centred review with slivers of its neighbours
   on either side, sliding behind a page-edge struck over each side of the
   viewport. --t-card-w (slot width) is set on .t-carousel by JS so the centred
   card tracks the viewport width on every resize. */
.t-carousel {
    position: relative;
    /* full-bleed: the carousel is a direct child of the section (outside
       .container) and spans the whole viewport, so the neighbour cards slide
       behind the real screen edges instead of an invisible inner boundary */
    width: 100%;
    overflow: hidden;       /* clips the peeking neighbours at the page edges */
}
.t-viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;       /* clips the peeking neighbours at the page edges */
    padding: 14px 0 18px;   /* breathing room so card shadows + scale aren't cropped */
}
.t-track {
    display: flex;
    gap: 28px;
    align-items: stretch;   /* every card stretches to the tallest -> uniform slot */
    will-change: transform;
}

/* Page-edge shadow struck over each side of the viewport. A crisp vertical hair-
   line marks the edge of the "page"; a soft, lens-shaped shadow (darkest in the
   vertical middle, tapering at top and bottom) falls inward from it. The peeking
   neighbour cards slide UNDER this overlay, so every review reads as sliding
   behind the page as it enters (right) and exits (left). Pure CSS twin of the
   reference site's quote-side.png, tuned to the parchment palette. */
.t-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 66px;
    z-index: 6;             /* above the centred card (z-2) so cards slide beneath */
    pointer-events: none;
    /* the shadow is most intense in the vertical middle and fades out toward the
       top and bottom corners, exactly like the page-edge curl in the reference.
       The fade runs over the top/bottom 38% (was 11%) — the short fade left a
       long flat-dark plateau whose ends drew a hard horizontal line at the same
       y on both sides, visibly marking the section's top and bottom bounds. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 62%, transparent 100%);
}
.t-edge--left {
    left: 0;
    border-left: 2px solid rgba(42, 38, 32, 0.5);
    background: linear-gradient(
        to right,
        rgba(42, 38, 32, 0.35) 0,
        rgba(42, 38, 32, 0.21) 10px,
        rgba(42, 38, 32, 0.10) 28px,
        rgba(42, 38, 32, 0.03) 48px,
        rgba(42, 38, 32, 0)    100%);
}
.t-edge--right {
    right: 0;
    border-right: 2px solid rgba(42, 38, 32, 0.5);
    background: linear-gradient(
        to left,
        rgba(42, 38, 32, 0.35) 0,
        rgba(42, 38, 32, 0.21) 10px,
        rgba(42, 38, 32, 0.10) 28px,
        rgba(42, 38, 32, 0.03) 48px,
        rgba(42, 38, 32, 0)    100%);
}

.t-card {
    flex: 0 0 var(--t-card-w, 600px);
    box-sizing: border-box;
    /* warm aged commemorative stamp paper + 4px grain — the SAME stock as the
       owner's "Forever" stamp, the work cards and the process plates, so each
       review reads as a printed philatelic card in a stack, not a bright white
       SaaS panel */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    /* crisp, square stamp corners instead of soft SaaS rounding */
    border-radius: 2px;
    /* selvage margin around the engraved frame (::after), like a stamp's edge */
    padding: 48px 44px 38px;
    /* NOT var(--shadow-card): the carousel row is a line of uniform-height cards
       inside an overflow-clipped viewport, so the stock 18/40 shadow ended at the
       same y under every card and ruled a dark line across the section (its tail
       also out-ran the viewport's 18px bottom padding and clipped flat). This
       tighter lift (tail = 10+24-16 = 18px) fades out inside the padding. */
    box-shadow: 0 10px 24px -16px rgba(20, 42, 77, 0.4);
    text-align: left;
    position: relative;
    /* neighbours sit slightly back and dimmed; the centred card rises forward */
    transform: scale(0.9);
    opacity: 0.5;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease;
    will-change: transform, opacity;
}
.t-card.is-center {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}
/* engraved double-line frame inset from the card edge — the same navy hairline +
   red philatelic accent rule the site prints on the Forever stamp, the work
   cards and the review strip, now wrapping each testimonial as a commemorative
   stamp */
.t-card::after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
}

.t-card .mark {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 0.7;
    color: var(--red);
    opacity: 0.3;
}
.t-card blockquote { margin: 0 0 22px; font-size: 1.18rem; color: var(--ink); font-family: var(--font-display); font-style: italic; line-height: 1.5; }
.t-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.t-meta .who { font-family: var(--font-script); font-size: 1.9rem; color: var(--navy); }
.t-meta .stars { color: var(--red); font-size: 0.95rem; letter-spacing: 2px; }
.t-meta .stars small { display: block; color: var(--granite); font-family: var(--font-body); letter-spacing: 0; font-size: 0.72rem; }
.t-controls { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.t-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--navy-deep);
    background: var(--navy-soft);
    color: #fdf6e8;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 0 var(--navy-deep);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.t-arrow:hover { transform: translate(2px,2px); box-shadow: 0 0 0 0 var(--navy-deep); background: var(--navy); color: #fdf6e8; }

/* =========================================================
   Insights (newspaper masthead + article feed)
   ========================================================= */
/* Aged newsprint stock — warm commemorative paper + the site's 4px grain, with a
   faint vignette so the broadsheet reads as a single pressed sheet. */
.insights {
    position: relative;
    padding: 88px 0;
    /* same aged parchment + 4px grain as the testimonials section above — the
       paper runs unbroken into the newspaper front page */
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
}

/* The whole front page sits inside an engraved broadsheet frame */
.insights .container {
    position: relative;
    border: 1px solid var(--line-strong);
    box-shadow:
        inset 0 0 0 4px var(--parchment),
        inset 0 0 0 5px rgba(29, 59, 107, 0.22);
    padding: clamp(26px, 4vw, 52px) clamp(24px, 4vw, 56px);
    max-width: 1080px;
}
/* On desktop the broadsheet spreads across the whole desk: above the width
   where the 1080px cap starts leaving dead parchment, track the viewport
   (50px margin each side) instead. min() keeps ultrawides from unrolling a
   3000px newspaper. The photos scale with it — they're aspect-ratio'd, not
   fixed-height (see .insight-card .frame img below). */
@media (min-width: 1180px) {
    .insights .container { max-width: min(2000px, calc(100% - 100px)); }
}

/* Nameplate banner — heavy/hairline double rule, classic masthead underline */
.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--navy-deep);
    border-bottom: 3px double var(--navy-deep);
    padding: 7px 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-soft);
}
.masthead .mh-mid { font-family: var(--font-script); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--red); }
.insights-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 5vw, 60px);
    margin: 20px 0 4px;
}
.insights-head .ed-side {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    color: var(--ink-soft);
    white-space: nowrap;
}
.insights-title {
    font-size: clamp(3rem, 12vw, 9rem);
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 0.9;
    /* faint letterpress relief on the nameplate */
    text-shadow: 0 1px 0 rgba(255,253,248,0.7), 0 2px 2px rgba(20,42,77,0.12);
}
.edition-line {
    text-align: center;
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0 auto 16px;
    font-style: italic;
    font-family: var(--font-display);
}
/* ✦ flourishes flanking the strapline — same engraved ornament as the proof strip */
.edition-line::before,
.edition-line::after {
    content: '✦';
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.62rem;
    color: var(--navy);
    vertical-align: middle;
    margin: 0 14px;
    opacity: 0.6;
}
/* Folio / dateline strip — the thin ruled line every front page runs under its
   nameplate: date on the left, slogan centered, edition note on the right */
.folio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 10px 0 0;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-soft);
}
.folio-mid {
    font-family: var(--font-display);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.86rem;
    color: var(--navy-deep);
}

/* Double rule closing the masthead, opening the columns */
.gallery-rule {
    height: 4px;
    border: 0;
    border-top: 1px solid var(--navy-deep);
    border-bottom: 1px solid var(--navy-deep);
    background: transparent;
    margin: 0 0 40px;
}

/* Broadsheet grid: lead story + two stacked column stories, divided by a column rule */
.insights-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    align-items: stretch;
}
.insight-card--featured { padding-right: 44px; }
.insights-side {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-left: 44px;
    /* the column rule between lead and side stories */
    border-left: 1px solid var(--line-strong);
}

/* Article = engraved image frame + headline on newsprint (no card fill) */
.insight-card {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
/* hairline rule between the two stacked column stories */
.insights-side .insight-card + .insight-card {
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
.insight-card .frame {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line-strong);
}
.insight-card .frame img {
    width: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    /* aged-newsprint photo: warm, slightly desaturated halftone feel */
    filter: sepia(0.26) saturate(0.82) contrast(1.05) brightness(0.99);
}
/* Proportional (not fixed-height) press photos so the broadsheet keeps its
   shape as the desktop frame widens — 5/4 and 2/1 match the shipped look at
   the old 1080px cap (570×460 lead, 366×190 minis). The ≤980px block swaps
   back to fixed heights for the stacked single-column layout. */
.insight-card--featured .frame img { aspect-ratio: 5 / 4; height: auto; }
.insight-card--mini .frame img { aspect-ratio: 2 / 1; height: auto; }

/* Cutline — the italic cut-off rule + caption every press photo carries underneath */
.cutline {
    margin: 7px 0 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ink-soft);
}
.insight-card--mini .cutline { font-size: 0.72rem; }

.insight-card .ic-body { padding: 16px 0 0; display: flex; flex-direction: column; }
.ic-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ic-meta .date { font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
/* squared letterpress kicker — a ruled section flag, not a modern pill */
.insight-card .tag {
    display: inline-block;
    border: 1px solid var(--navy-deep);
    border-radius: 0;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-deep);
    box-shadow: 0 0 0 2px var(--parchment), 0 0 0 3px rgba(29,59,107,0.18);
}
.insight-card h3 { line-height: 1.1; margin: 0; }
/* Secondary deck under the lead headline — the smaller italic "bank" that sits
   between the main head and the body, the hallmark of a stacked front-page head */
.ic-subdeck {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--ink);
    text-align: center;
}
.insight-card h3 a { color: var(--ink); }
.insight-card h3 a:hover { color: var(--red); }
.insight-card--featured h3 { font-size: 2.5rem; }
.insight-card--mini h3 { font-size: 1.4rem; }

/* Standfirst / dek — the column body that makes it read as a newspaper */
.ic-dek {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    /* justified, hyphenated column type — what makes a block read as newsprint */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.insight-card--mini .ic-dek { font-size: 0.86rem; margin-top: 8px; }
/* drop cap opening the lead story */
.insight-card--featured .ic-dek::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.1rem;
    line-height: 0.74;
    font-weight: 700;
    color: var(--navy-deep);
    margin: 6px 10px 0 0;
}
.ic-byline {
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* "View More Insights" pill flanked by column rules */
.gallery-cta {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 3px double var(--navy-deep);
}
.gallery-cta .vmi-rule { flex: 1; height: 1px; background: var(--line); }

/* =========================================================
   FAQ — a reader Q&A department printed below the fold, the
   broadsheet running on past "View More Insights" rather than
   a separate stamp card. Lives inside .insights .container.
   ========================================================= */
.insights-faq { margin-top: 56px; }
/* Department slug — a smaller, balanced echo of the INSIGHTS masthead. The two
   italic labels sit centred against the title block (not the top baseline), each
   carried on a thin column rule so they read as a ruled section header. */
.faq-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 34px);
    margin-bottom: 10px;
}
.faq-banner .fb-side {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.8rem, 1.4vw, 1.02rem);
    color: var(--ink-soft);
    white-space: nowrap;
}
/* a hairline column rule trailing each label out toward the title */
.faq-banner .fb-side::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.faq-banner .fb-side:last-child { flex-direction: row-reverse; text-align: right; }
.faq-title {
    font-size: clamp(1.85rem, 4.4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: center;
    white-space: nowrap;
    color: var(--ink);
    /* same faint letterpress relief as the nameplate */
    text-shadow: 0 1px 0 rgba(255,253,248,0.7), 0 2px 2px rgba(20,42,77,0.10);
}
/* editorial standfirst under the slug — same italic voice as the edition line */
.faq-standfirst {
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.04rem;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto;
}
/* tighter double rule under the department head, closing onto the Q&A columns */
.faq-rule { margin: 16px 0 4px; }
/* The Q&A list now sits directly on the broadsheet — no stamp card, no engraved
   frame, just ruled entries continuing the front page. */
.faq-list {
    max-width: 100%;
    margin: 0;
}
.faq-item {
    position: relative;
    border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    padding: 24px 44px 24px 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: color 0.2s ease;
}
.faq-q:hover { color: var(--red-deep); }
.faq-item.open .faq-q { color: var(--red-deep); }
.faq-q .plus {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.faq-q .plus::before, .faq-q .plus::after {
    content: ''; position: absolute;
    background: var(--red);
    border-radius: 2px;
    top: 50%; left: 50%;
}
.faq-q .plus::before { width: 16px; height: 2.5px; transform: translate(-50%,-50%); }
.faq-q .plus::after  { width: 2.5px; height: 16px; transform: translate(-50%,-50%); transition: transform 0.3s ease; }
.faq-item.open .plus::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-a p {
    padding: 0 44px 24px 4px;
    color: var(--ink-soft);
    margin: 0;
    /* justified, hyphenated column type — matches the newspaper deks above */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* =========================================================
   Bottom CTA
   ========================================================= */
.bottom-cta {
    position: relative;
    display: flex;
    align-items: flex-start;
    text-align: center;
    min-height: clamp(580px, 92vh, 860px);
    background: var(--parchment);
    overflow: hidden;
}
/* full-bleed background scene — matched to the hero treatment */
.bottom-cta .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    z-index: 0;
    margin: 0;
}
/* legibility scrim — warm parchment from the top + soft bottom fade
   (matches the FAQ section's --parchment #f2e7d2 paper so this closing CTA
   reads on the same warm tan stock, not the lighter cream) */
.bottom-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(var(--parchment-rgb),0.96) 0%, rgba(var(--parchment-rgb),0.82) 26%, rgba(var(--parchment-rgb),0.30) 50%, rgba(var(--parchment-rgb),0) 68%),
        linear-gradient(180deg, rgba(var(--parchment-rgb),0) 70%, rgba(20,42,77,0.16) 100%);
}
/* subtle paper grain */
.bottom-cta::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 2;
}
.bottom-cta .inner { position: relative; z-index: 3; max-width: 1000px; margin: 0 auto; padding: 108px 20px 44px; width: 100%; }
.bottom-cta .kicker { font-family: var(--font-script); color: var(--red); font-size: clamp(1.5rem,3vw,2.1rem); }
.bottom-cta h2 { font-size: clamp(2.4rem, 5vw, 3.7rem); margin: 4px 0 16px; white-space: nowrap; text-shadow: 0 1px 0 rgba(250,245,234,0.6); }
.bottom-cta p { color: var(--ink-soft); font-size: 1.2rem; margin-bottom: 30px; }

/* =========================================================
   Footer
   ========================================================= */
footer { background: var(--cream); color: var(--ink); padding: 72px 0 32px; }
.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
}
.footer-brand .fb-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .fb-logo img { height: 44px; width: auto; }
.footer-brand .fb-logo b { font-family: var(--font-display); color: var(--navy-deep); font-size: 1rem; line-height: 1.2; letter-spacing: 0.03em; }
.footer-brand .fb-logo b span { color: var(--red); }
.footer-brand p { font-size: 0.92rem; color: var(--ink-soft); max-width: 34ch; }
.footer-brand .tagline { font-family: var(--font-script); color: var(--red); font-size: 1.5rem; margin-top: 8px; }
.footer-col h4 {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; font-size: 0.92rem; }
.footer-col a:hover { color: var(--red); }
.footer-col .contact-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 13px; font-size: 0.92rem; }
.footer-col .contact-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--red); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: grid; place-items: center;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.footer-social a:hover svg { color: #fff; }
.footer-social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 28px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.footer-bot .badges { display: flex; gap: 16px; align-items: center; }
.footer-bot .bbb {
    border: 1px solid var(--line-strong);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.8rem;
}

/* =========================================================
   Responsive — large desktop
   The base design tops out at --maxw 1180px with clamp() type
   that stops growing near a 1280px viewport; on 1500–2560px
   screens that read as a tablet layout floating in parchment.
   All type clamps are rem-based, so scaling the rem root here
   grows every heading/eyebrow/ch-measure proportionally while
   the px-based borders, frames, and perforations stay crisp.
   Additive only — nothing at ≤1280px changes.
   ========================================================= */
@media (min-width: 1500px) {
    html { font-size: 17px; }
    body { font-size: 18px; }
    :root { --maxw: 1340px; }
    .hero-content { max-width: 1080px; }
    .bottom-cta .inner { max-width: 1120px; }
    .formcta .container { grid-template-columns: minmax(0, 920px); }
    .process-row { gap: 80px; }
}

@media (min-width: 1860px) {
    html { font-size: 18px; }
    :root { --maxw: 1460px; }
    .hero-content { max-width: 1180px; }
    .bottom-cta .inner { max-width: 1220px; }
    .formcta .container { grid-template-columns: minmax(0, 980px); }
}

/* =========================================================
   Responsive — tablet
   ========================================================= */
@media (max-width: 980px) {
    .nav-links {
        position: fixed;
        inset: 0;
        background: var(--cream);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        font-size: 1.5rem;
        transform: translateX(100%);
        transition: transform 0.35s ease;
        z-index: 1100;
    }
    .nav-links.open { transform: translateX(0); }
    .hamburger { display: flex; }
    .navbar { padding: 16px 22px; }
    .nav-phone { display: none; }

    .owner .container { grid-template-columns: 1fr; gap: 50px; }
    .owner-portrait { width: 100%; max-width: 460px; margin: 0 auto; padding: 8px 0 8px 24px; }

    .formcta .container { grid-template-columns: 1fr; gap: 44px; }

    .insights-grid { grid-template-columns: 1fr; gap: 0; }
    .insight-card--featured { padding-right: 0; padding-bottom: 36px; }
    /* lead/side rule turns horizontal when the columns stack */
    .insights-side { padding-left: 0; padding-top: 36px; border-left: 0; border-top: 1px solid var(--line-strong); }
    /* stacked single column: back to fixed-height panoramic crops */
    .insight-card--featured .frame img { height: 360px; aspect-ratio: auto; }
    .insight-card--mini .frame img { height: 190px; aspect-ratio: auto; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }

    /* connector dips out of the narrower gutter; nudge node + soften line */
    .process-row { gap: 50px; }
    .hero-content { max-width: 520px; }

    /* below ~980 the work card narrows enough that the copy + View All row
       crushes the copy to a couple of words per line — stack it instead */
    .work-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .work-row .btn { min-width: 0; }
}

/* =========================================================
   Responsive — mobile
   ========================================================= */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .container { padding: 0 20px; }

    .hero { min-height: 80vh; }
    .hero-content { max-width: 100%; padding: 116px 0 64px; }
    /* the stacked CTAs push the lede down into the illustration on phones, so the
       cream scrim holds stronger for longer before releasing to the artwork */
    /* the phone-width crop zooms the artwork so its dark linework sits right on
       the proof-strip boundary; the navy underglow turned that into a hard line.
       Melt the last ~15% into the proof strip's parchment instead (the bottom
       CTA gets the same treatment, fading to the footer's cream). */
    .hero::after {
        background:
            linear-gradient(180deg, rgba(250,245,234,0.95) 0%, rgba(250,245,234,0.88) 38%, rgba(250,245,234,0.55) 58%, rgba(250,245,234,0.15) 78%, rgba(250,245,234,0) 92%),
            linear-gradient(0deg, rgba(var(--parchment-rgb),1) 0%, rgba(var(--parchment-rgb),0.55) 8%, rgba(var(--parchment-rgb),0) 16%);
    }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    /* the ghost button lands over the busiest part of the drawing once the CTAs
       stack; a translucent cream backing keeps its label legible */
    .hero-cta .btn-ghost { background: rgba(250,245,234,0.78); }

    .bottom-cta { min-height: 80vh; }
    .bottom-cta .inner { max-width: 100%; padding: 116px 20px 64px; }
    .bottom-cta h2 { white-space: normal; }
    /* parchment wash (same paper as desktop, NOT cream — keeps the FAQ seam
       invisible) and, in place of the navy dusk underglow, a cream melt at the
       foot: the narrow phone crop leaves the artwork's dark grass edges sitting
       right on the footer boundary, and the navy tint turned that into a hard
       line. Fading the last ~15% into the footer's cream dissolves the edge. */
    .bottom-cta::after {
        background:
            linear-gradient(180deg, rgba(var(--parchment-rgb),0.92) 0%, rgba(var(--parchment-rgb),0.72) 34%, rgba(var(--parchment-rgb),0.18) 64%, rgba(var(--parchment-rgb),0) 84%),
            linear-gradient(0deg, rgba(250,245,234,1) 0%, rgba(250,245,234,0.55) 8%, rgba(250,245,234,0) 16%);
    }

    .proof-track { gap: 40px; }
    .proof-badge { font-size: 0.78rem; }
    .proof-badge::after { right: -23px; }
    .proof-badge .num { font-size: 1.3rem; }

    .owner { padding: 64px 0; }
    .owner-portrait .stamp { width: 90px; height: 90px; font-size: 0.62rem; left: -6px; bottom: 18px; }
    .owner-portrait .stamp b { font-size: 1.45rem; }
    .owner-actions { flex-direction: column; }
    .owner-actions .btn { width: 100%; }

    .work, .gallery, .testimonials { padding: 64px 0; }
    .insights-faq { margin-top: 40px; }
    /* drop the flanking column rules and let the slug stack + wrap on phones */
    .faq-banner .fb-side { display: none; }
    .faq-title { white-space: normal; line-height: 1.04; }
    .faq-standfirst { font-size: 0.96rem; }
    .faq-q { font-size: 1.08rem; padding: 20px 38px 20px 2px; }
    /* one card centred, small peek on each side */
    .work-track { padding: 14px 0; gap: 18px; }
    .work-card { flex-basis: 82%; }
    /* the blue t-arrows sit ~38px under their card on phones; 14px track pad + 24px */
    .work-arrow { width: 38px; height: 38px; margin-top: 24px; }

    .process { padding: 64px 0; }
    .process-list { gap: 64px; }
    .process-row, .process-row.reverse { grid-template-columns: 1fr; gap: 36px; }
    .process-row.reverse .p-media { order: 0; }
    .process-list::before { display: none; }
    .process-link { display: none; }
    .p-num { width: 52px; height: 52px; font-size: 1.4rem; top: -20px; left: 8px; transform: none; }

    .formcta { padding: 64px 0; }
    .tribute-form { grid-template-columns: 1fr; }
    /* tighter selvage + smaller philatelic corner so the card breathes on phones */
    .tribute-card { --pad: 26px; --g: 16px; --r: 6px; }
    .tribute-card::before { inset: 14px; }
    .tribute-stamp { top: 22px; right: 22px; width: 58px; height: 72px; }
    .tribute-stamp__flag { font-size: 1.2rem; }
    .tribute-postmark { top: 56px; right: 64px; width: 58px; height: 58px; }
    .formcta .intro { padding-right: 96px; }

    /* smaller wax seal on phones; rules still run edge-to-edge */
    .seam { gap: 18px; padding: 14px 0; }
    .wax-seal { width: 92px; height: 96px; }
    .seam-line { height: 18px; }

    .t-card { padding: 36px 24px 28px; }
    .t-card blockquote { font-size: 1.05rem; }
    /* reviews vary a lot in length; at phone widths the stretch-to-tallest slot
       leaves a huge void inside short cards, so let each card keep its natural
       height and let the viewport follow the centred card (script.js syncs it) */
    .t-track { align-items: flex-start; }
    .t-viewport { transition: height 0.45s ease; }
    /* on phones the centred card all but fills the viewport, so narrow the page-
       edge shadow to a slim whisper at each side */
    .t-edge { width: 32px; }

    .insights-grid { grid-template-columns: 1fr; gap: 0; }
    .insight-card--featured { padding-bottom: 28px; }
    .insights-side { padding-top: 28px; gap: 28px; }
    .insight-card--featured .frame img { height: 280px; }
    .insight-card--featured h3 { font-size: 2rem; }
    .insight-card--featured .ic-dek::first-letter { font-size: 2.6rem; }
    .insights-title { font-size: clamp(2.8rem, 18vw, 4.5rem); }
    .insights-head { gap: 12px; }
    .insights-head .ed-side { display: none; }
    /* nameplate banner stacks so the script title doesn't crowd the corners */
    .masthead { font-size: 0.58rem; flex-direction: column; gap: 4px; text-align: center; padding: 10px 0; }
    .masthead .mh-mid { font-size: 1.25rem; order: -1; }
    .masthead .mh-mid { font-size: 1.1rem; }

    .footer-top { grid-template-columns: 1fr; gap: 30px; }
    .footer-bot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .reveal, .hero-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Interior pages (no hero) — /contact/ etc.
   The navbar normally floats transparent over the homepage hero and only
   gains a background once scrolled. Interior pages have no hero, so pin it
   in-flow with a solid cream background from the very top.
   ========================================================= */
body.interior .navbar {
    position: sticky;
    background: rgba(250, 245, 234, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
/* keep it sticky (not the homepage's fixed drop-in) so there's no jump/flicker
   when the scroll handler adds .scrolled on an interior page */
body.interior .navbar.scrolled { position: sticky; animation: none; }

/* The slide-in mobile menu (.nav-links) is a position:fixed child of .navbar.
   A backdrop-filter on the navbar makes it the containing block for that fixed
   child, trapping the overlay inside the navbar's box so it can't cover the
   viewport (the menu renders see-through). Drop the filter wherever the menu
   can open (<=980px); the desktop row keeps its frosted-glass blur. */
@media (max-width: 980px) {
    .navbar,
    .navbar.scrolled,
    body.interior .navbar,
    body.interior .navbar.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------- Service detail: image-led hero ---------- */
.svc-hero {
    position: relative;
    padding: 70px 0 64px;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--sand);
    overflow: hidden;
}
.svc-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 54px;
}
.svc-hero__text .eyebrow { display: inline-block; }
.svc-hero__text h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.7rem);
    line-height: 1.05;
    margin: 6px 0 16px;
    text-shadow: 0 1px 0 rgba(250,245,234,0.7);
}
.svc-hero__text h1 em { font-style: italic; color: var(--red); }
.svc-hero__text .lede {
    max-width: 48ch;
    margin: 0 0 26px;
    color: var(--ink-soft);
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
}
.svc-hero__text .contact-hero__cta { justify-content: flex-start; }
/* feature photo in the signature engraved stamp frame, letterpress-matted */
.svc-hero__media {
    position: relative;
    margin: 0;
    padding: 12px;
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    rotate: -1.1deg;
}
.svc-hero__media::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
    z-index: 1;
}
.svc-hero__media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 1px;
}
@media (max-width: 860px) {
    .svc-hero__grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .svc-hero__text .contact-hero__cta { justify-content: center; }
    .svc-hero__text .lede { margin-left: auto; margin-right: auto; }
    .svc-hero__media { rotate: 0deg; max-width: 520px; margin: 0 auto; }
    .svc-hero__media img { height: 300px; }
}

/* ---------- Service detail: intro + "At a glance" panel ---------- */
.svc-intro {
    padding: 78px 0;
    background: var(--cream);
}
.svc-intro__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: start;
}
.svc-intro__text .eyebrow { display: inline-block; }
.svc-intro__text h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    margin: 2px 0 16px;
    max-width: 18ch;
}
.svc-intro__text p { color: var(--ink-soft); }
.svc-intro__text p:last-child { margin-bottom: 0; }
/* fact panel on the commemorative stamp surface with the engraved frame */
.svc-glance {
    position: relative;
    padding: 30px 30px 28px;
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
}
.svc-glance::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
}
.svc-glance__label {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: var(--font-script);
    font-size: 1.7rem;
    color: var(--red);
    line-height: 1;
    margin-bottom: 14px;
}
.svc-glance ul {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}
.svc-glance li {
    position: relative;
    padding: 11px 0 11px 28px;
    color: var(--ink);
    font-size: 1.02rem;
    border-top: 1px solid var(--line);
}
.svc-glance li:first-child { border-top: none; }
/* engraved navy check in front of each fact */
.svc-glance li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 13px;
    height: 8px;
    border-left: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: translateY(-65%) rotate(-45deg);
}
@media (max-width: 860px) {
    .svc-intro { padding: 56px 0; }
    .svc-intro__grid { grid-template-columns: 1fr; gap: 32px; }
    .svc-intro__text h2 { max-width: none; }
}

/* ---------- Service detail: compact "How It Works" step strip ---------- */
.svc-steps {
    padding: 80px 0;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
}
.svc-steps__list {
    position: relative;
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
/* the engraved rule that threads the numbered roundels together */
.svc-steps__list::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--line-strong);
    z-index: 0;
}
.svc-step {
    position: relative;
    z-index: 1;
    text-align: center;
}
.svc-step__n {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--navy);
    color: #fdf6e8;
    font-family: var(--font-display);
    font-size: 1.5rem;
    box-shadow: 0 0 0 4px var(--parchment), 0 0 0 5px rgba(178, 37, 50, 0.38);
}
.svc-step h3 {
    font-family: var(--font-display);
    font-size: 1.28rem;
    margin: 0 0 7px;
}
.svc-step p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.svc-steps__link {
    display: inline-block;
    margin-top: 40px;
    font-weight: 700;
    color: var(--navy);
}
.svc-steps__link:hover { color: var(--red); }
.svc-steps__link .arr { transition: transform 0.2s ease; display: inline-block; }
.svc-steps__link:hover .arr { transform: translateX(4px); }
.svc-steps .section-head .eyebrow { display: inline-block; }
@media (max-width: 760px) {
    .svc-steps { padding: 60px 0; }
    .svc-steps__list { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
    .svc-steps__list::before { display: none; }
}
@media (max-width: 460px) {
    .svc-steps__list { grid-template-columns: 1fr; }
}

/* ---------- Contact hero — commemorative letterhead ---------- */
.contact-hero {
    position: relative;
    text-align: center;
    padding: 74px 0 62px;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--sand);
    overflow: hidden;
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.04;
    margin: 6px 0 16px;
    /* embossed into the paper, exactly like the homepage h1 */
    text-shadow: 0 1px 0 rgba(250,245,234,0.7);
}
.contact-hero h1 em { font-style: italic; color: var(--red); }
.contact-hero .lede {
    max-width: 56ch;
    margin: 0 auto 26px;
    color: var(--ink-soft);
    font-size: clamp(1.02rem, 1.7vw, 1.18rem);
}
.contact-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Legal pages (Privacy, Terms) — readable letterpress prose ---------- */
.legal {
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
    padding: 64px 0 88px;
}
.legal .container { max-width: 760px; }
.legal .updated {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--granite);
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
    margin: 0 0 32px;
}
.legal h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 44px 0 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
    font-size: clamp(1.12rem, 2vw, 1.3rem);
    margin: 24px 0 6px;
}
.legal p, .legal li {
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 1.3rem; }
.legal li { margin: 0 0 9px; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--red); }
.legal strong { color: var(--ink); font-weight: 700; }

/* ---------- Quick-contact tiles — postage-stamp cards ---------- */
.quick-contact { background: var(--cream); padding: 62px 0 66px; }
.qc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* each tile is a commemorative stamp: aged stamp paper + 4px grain, crisp square
   corners, and the engraved navy+red frame the homepage wraps its work cards in */
.qc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px 24px;
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qc-card::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
}
.qc-card:hover { transform: translateY(-5px); box-shadow: 0 28px 52px -26px rgba(20, 42, 77, 0.58); }
/* navy postmark roundel struck with a cream icon, ringed in stamp paper + a red
   hairline — a letterpress mark, not a flat gray SaaS chip */
.qc-icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: var(--navy);
    color: #fdf6e8;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--stamp-paper), 0 0 0 5px rgba(178, 37, 50, 0.38);
    margin: 4px 0 18px;
}
.qc-icon svg { width: 23px; height: 23px; }
.qc-card h3 { font-family: var(--font-display); color: var(--ink); font-size: 1.34rem; margin: 0; line-height: 1.15; }
.qc-divider { align-self: stretch; border: 0; border-top: 1px solid var(--line); margin: 11px 0 12px; }
.qc-line { font-weight: 700; color: var(--navy); font-size: 0.98rem; margin: 0 0 7px; overflow-wrap: anywhere; }
.qc-sub { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* ---------- Visit Us (map + details) ---------- */
.contact-visit {
    padding: 76px 0;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--sand);
}
.visit-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: stretch;
    margin-top: 34px;
}
/* the map sits in a philatelic mount — a stamp-paper mat with the engraved frame,
   so it matches the cards instead of floating as a bare embed */
.visit-map {
    position: relative;
    padding: 9px;
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    min-height: 384px;
}
.visit-map::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(29, 59, 107, 0.38);
    box-shadow: inset 0 0 0 2px var(--stamp-paper), inset 0 0 0 3px rgba(178, 37, 50, 0.40);
    pointer-events: none;
    z-index: 1;
}
.visit-map iframe { width: 100%; height: 100%; min-height: 366px; border: 0; display: block; border-radius: 1px; }
.visit-info { display: flex; flex-direction: column; gap: 26px; justify-content: center; }
.vi-block h4 {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.18rem;
    margin: 0 0 7px;
}
.vi-block h4 svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }
.vi-block p { color: var(--ink-soft); margin: 0; }
.vi-link {
    display: inline-block;
    margin-top: 9px;
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.vi-link:hover { color: var(--red); }
.vi-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); }
.vi-list li { margin-bottom: 6px; }

@media (max-width: 880px) {
    .qc-grid { grid-template-columns: 1fr; }
    .visit-grid { grid-template-columns: 1fr; }
}

/* ============ ABOUT — OUR PROMISE (values) ============ */
/* Parchment + paper grain, same as the site's standard section background */
.about-promise {
    padding: 96px 0;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}
/* commemorative-stamp stock + 4px grain — the SAME card surface as work cards */
.value-card {
    position: relative;
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 34px 32px;
    box-shadow: var(--shadow-card);
}
/* engraved double-rule frame inset from the edge — navy hairline + red accent,
   identical to the work-card / Forever-stamp frame */
.value-card::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(29, 59, 107, 0.42);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 2px var(--stamp-paper),
        inset 0 0 0 3px rgba(178, 37, 50, 0.45);
    pointer-events: none;
}
.value-card h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.5rem;
    margin: 0 0 12px;
}
.value-card h3 svg { width: 26px; height: 26px; color: var(--red); flex-shrink: 0; }
.value-card p { color: var(--ink-soft); margin: 0; }

@media (max-width: 760px) {
    .about-promise { padding: 64px 0; }
    .values-grid { grid-template-columns: 1fr; gap: 22px; }
    .value-card { padding: 28px 26px; }
}

/* =========================================================
   Gallery (interior page) — grouped portfolio grid
   Reuses the commemorative stamp-card surface (stamp-paper +
   4px grain + engraved double-rule frame) from the work/value
   cards. The photo tiles are deliberate granite-tone PLACEHOLDERS
   until owner-approved monument imagery arrives — see
   02_WEBSITE/docs/ASSETS.md (permissions/dignity note).
   ========================================================= */
.gallery {
    padding: 96px 0;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--parchment);
}
.gallery-group + .gallery-group { margin-top: 76px; }
.gallery-group-head { max-width: 720px; margin-bottom: 34px; }
.gallery-group-head .eyebrow { display: block; }
.gallery-group-head h2 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin: 2px 0 10px;
}
.gallery-group-head p { color: var(--ink-soft); margin: 0; max-width: 60ch; }
.gallery-group-head::after {
    content: '';
    display: block;
    margin-top: 22px;
    height: 1px;
    background: var(--line);
}
/* Masonry via CSS columns: every photo keeps its true shape (no cropping),
   tiles stack and stagger to fill each column. Cards carry their own
   bottom margin (column-gap only spaces the columns, not the stack). */
.gallery-grid {
    columns: 3;
    column-gap: 28px;
}
/* commemorative-stamp stock + grain — the SAME card surface as work/value cards */
.gallery-card {
    position: relative;
    margin: 0 0 28px;
    break-inside: avoid;          /* don't split a card across two columns */
    background:
        radial-gradient(rgba(42,38,32,0.04) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--stamp-paper);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 10px;
    box-shadow: var(--shadow-card);
}
/* engraved frame — a quiet navy hairline mat around each photo.
   Deliberately drops the red inner rule the work/value stamp cards carry:
   three red frames per row floods the grid, and red is an accent, never a flood.
   Photos are the subject here; the frame recedes to a thin engraved mat. */
.gallery-card::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(29, 59, 107, 0.30);
    border-radius: 1px;
    box-shadow: inset 0 0 0 2px var(--stamp-paper);
    pointer-events: none;
}
/* PLACEHOLDER photo tile — muted granite stone tone with a faint engraved glyph.
   Reads deliberately as "photo coming", never as a finished monument shot. */
.gallery-ph {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 5px 5px,
        linear-gradient(157deg, #7b766d 0%, #635e56 56%, #54504a 100%);
    border: 1px solid var(--line-strong);
}
.gallery-ph svg {
    width: 34%;
    max-width: 86px;
    color: rgba(247, 236, 212, 0.5);   /* stamp-paper tone, engraved into the stone */
}
.gallery-card__body { padding: 16px 4px 4px; }
.gallery-card__body h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.7rem;
    margin: 0;
}
.gallery-card__body p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}
/* small "photo coming soon" tag — muted granite, uppercase label voice */
.gph-note {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--granite);
}
@media (max-width: 980px) {
    .gallery-grid { columns: 2; }
}
@media (max-width: 640px) {
    .gallery { padding: 64px 0; }
    .gallery-group + .gallery-group { margin-top: 56px; }
    .gallery-grid { columns: 1; column-gap: 22px; }
    .gallery-card { margin-bottom: 22px; }
}

/* ============================================================
   GALLERY — filter tabs, real photo cards, lightbox
   (added 2026-06-08: real monument photos replace placeholders)
   ============================================================ */

/* --- Filter tabs --- */
.gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 52px;
}
.gallery-tab {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--stamp-paper);
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s, box-shadow .12s;
}
.gallery-tab:hover { color: var(--ink); border-color: var(--navy-deep); }
.gallery-tab.is-active {
    color: #fdf6e8;
    background: var(--navy-soft);
    border-color: var(--navy-deep);
    box-shadow: 2px 2px 0 0 var(--navy-deep);
}
.gallery-tab:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: 2px; }

.gallery-group[hidden] { display: none; }

/* --- Photo cards (button wrapping a framed thumbnail) --- */
.gallery-photo {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .14s ease;
}
.gallery-photo:hover { transform: translateY(-3px); }
.gallery-photo:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: 3px; }
.gallery-photo .gallery-ph {
    aspect-ratio: auto;           /* masonry: the photo's own width/height set the box, so nothing is cropped */
    /* Subtle granite stock shows while a lazy thumbnail decodes. The gradient +
       fleck reads as intentional stone, never as a flat blank/broken tile (the
       old flat var(--granite) flashed grey mid-scroll). */
    background:
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 5px 5px,
        linear-gradient(157deg, #7b766d 0%, #635e56 56%, #54504a 100%);
}
.gallery-photo .gallery-ph img {
    width: 100%;
    height: auto;                 /* native ratio (img carries intrinsic width/height) = zero crop + zero layout shift */
    display: block;
    transition: transform .4s ease, opacity .45s ease;
}
/* gallery.js marks not-yet-painted lazy thumbnails .is-loading (opacity 0) and
   clears it on load, so each photo fades up from the granite placeholder instead
   of snapping in. Default (no class) is fully visible, so the gallery still shows
   every photo with JS disabled. */
.gallery-photo .gallery-ph img.is-loading { opacity: 0; }
.gallery-photo:hover .gallery-ph img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .gallery-photo .gallery-ph img { transition: transform .4s ease; }
    .gallery-photo .gallery-ph img.is-loading { opacity: 1; }  /* no fade — just show on load */
}

/* --- Lightbox --- */
body.lb-open { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: rgba(20, 25, 35, 0.92);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
    margin: 0;
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__img {
    max-width: 100%;
    max-height: 86vh;
    width: auto;
    height: auto;
    display: block;
    background: var(--stamp-paper);
    border: 1px solid rgba(247, 236, 212, 0.5);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: var(--stamp-paper);
    color: var(--ink);
    border: 1.5px solid var(--navy-deep);
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
    transition: background .18s;
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fdf6e8; outline-offset: 2px; }
.lightbox__close {
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    width: 46px; height: 46px;
    font-size: 1.7rem;
}
.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    font-size: 2rem;
    font-family: var(--font-display);
}
.lightbox__nav:hover { background: #fff; }
.lightbox__nav--prev { left: clamp(8px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 28px); }
.lightbox__counter {
    position: absolute;
    bottom: clamp(12px, 3vw, 28px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(247, 236, 212, 0.85);
}
@media (max-width: 640px) {
    .lightbox__nav { width: 44px; height: 44px; font-size: 1.6rem; }
    .lightbox__close { width: 42px; height: 42px; }
}

/* ============ SERVICE PAGES ============ */

/* Hub: make .value-card clickable as a whole-card link. */
a.value-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
a.value-card .svc-more { margin-top: auto; padding-top: .9rem; color: var(--red); font-weight: 600; }

/* Detail: the FAQ stands alone here (the homepage FAQ borrows the .insights
   section's spacing), so give the section its own rhythm + a readable column. */
.faq { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--cream); }
.faq .faq-list { max-width: 780px; margin: 0 auto; }

/* ───────────────────────── Insights list page (/insights/) ─────────────────
   Reuses the homepage .insights broadsheet frame + masthead; the list itself is
   a simple card grid built from the same .insight-card anatomy. */
.insights-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 44px 40px;
    margin-top: 36px;
}
.insights-list .insight-card .frame img { height: 230px; }
.insights-list .insight-card h3 { font-size: 1.5rem; line-height: 1.15; }
.insights-list .insight-card .ic-dek { font-size: 0.92rem; }

/* ───────────────────────── Blog post (post.njk) ────────────────────────────
   Headline band on the dotted sand paper (same treatment as .contact-hero),
   then a single readable column of body copy on cream. Square corners, double
   rule under the head — keeps the letterpress motif. */
.post { background: var(--cream); }
.post-head {
    text-align: center;
    padding: 70px 0 46px;
    background:
        radial-gradient(rgba(42,38,32,0.045) 1px, transparent 1px) 0 0 / 4px 4px,
        var(--sand);
    border-bottom: 3px double var(--navy-deep);
}
.post-head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 4.5vw, 3.3rem);
    line-height: 1.12;
    max-width: 22ch;
    margin: 0 auto;
    color: var(--ink);
}
.post-head .eyebrow { margin-bottom: 14px; }
.post-meta {
    margin: 16px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.post-hero {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 40px auto 0;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    /* same aged-newsprint photo treatment as the insight cards */
    filter: sepia(0.26) saturate(0.82) contrast(1.05) brightness(0.99);
}
.post-body {
    max-width: 740px;
    padding-top: 44px;
    padding-bottom: 84px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
}
.post-body h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.2;
    margin: 2.1em 0 0.55em;
    color: var(--ink);
}
.post-body p { margin: 0 0 1.15em; }
.post-body ul { margin: 0 0 1.15em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.45em; }
.post-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--red-deep); }
.post-body strong { color: var(--ink); }

@media (max-width: 640px) {
    .insights-list { gap: 32px; margin-top: 28px; }
    .insights-list .insight-card .frame img { height: 200px; }
    .post-head { padding: 52px 0 36px; }
    .post-body { padding-top: 32px; padding-bottom: 60px; font-size: 1rem; }
}