/* ==========================================================================
   eMemorybox v2 — redesign stylesheet
   Calm premium restraint: one accent (Roy's lilac, calmed right down), off-white paper,
   Fraunces serif + Source Sans 3 humanist sans (the Kelly memorial's typographic language).
   No urgency, no popups. Photography of people. Generous space.
   ========================================================================== */
/* Fallback faces sized to match the web fonts, so text wraps the same before and after they load. Without these the home hero photo moved
   when Fraunces arrived (desktop CLS 0.115 in the Chrome re-audit, 0.121 reproduced here). Ratios measured in Chrome: Fraunces 500 is about 1.2x Times New Roman (120% gave identical wrapping on every page tested), Source Sans 3 is 0.933x Arial. */
@font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Tinos"), local("Times"); size-adjust: 120%; }
@font-face { font-family: "Source Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica"); size-adjust: 93.3%; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --accent: #7c5e8e;          /* Roy's lilac (#b45ad4), calmed: dusty plum */
  --accent-deep: #5f4570;
  --accent-soft: #e9dff0;     /* washes and pills */
  --accent-faint: #f3eef6;
  --paper: #faf7f4;           /* warm off-white, never pure white */
  --paper-2: #f3eee9;         /* section tint */
  --card: #fffdfb;
  --ink: #2b2530;
  --ink-soft: #625a68;
  --ink-faint: #8b8390;
  --rule: rgba(43, 37, 48, 0.12);
  --ok: #4f7a5a;
  --serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Fallback", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px; --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(43, 37, 48, 0.08);
  --shadow-deep: 0 24px 60px rgba(43, 37, 48, 0.16);
  --max: 1140px; --narrow: 720px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1rem; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.hero-grid > *, .example > *, .two-col > *, .product-grid > *, .contact-band > *, .founder > *, .app-strip > *, .range > *, .footer-grid > * { min-width: 0; }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
.eyebrow { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.95rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placeholder { display: inline-block; padding: 0.05em 0.5em; border: 1px dashed var(--accent); border-radius: 6px; background: var(--accent-faint); color: var(--accent-deep); font-family: var(--sans); font-size: 0.85em; }
section { padding: var(--section) 0; }
section.tint { background: var(--paper-2); }
.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-head p { color: var(--ink-soft); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.6rem; border-radius: 999px; font: 600 1rem/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; transition: background .2s, color .2s, transform .15s, box-shadow .2s; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(124, 94, 142, 0.28); }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--accent-deep); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-faint); }
.btn-quiet { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.btn svg { width: 18px; height: 18px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 244, 0.96); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.25rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; white-space: nowrap; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand small { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); line-height: 1; margin-top: 2px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.2rem; }
.nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 999px; font: 500 0.95rem/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); }
.header-cta { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1rem/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-cta svg { width: 18px; height: 18px; color: var(--accent); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 28px; height: 28px; }

/* hero */
.hero { padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem); background: linear-gradient(180deg, var(--paper-2), var(--paper) 70%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; font-weight: inherit; color: inherit; }   /* Roy, 29 Oct 2026: headlines in one consistent style, no italic accent phrase */
.hero .lede { max-width: 34ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }
.hero-photo { position: relative; width: 100%; max-width: 480px; justify-self: center; }   /* Graham 14 Sep: sized to fit a laptop screen whole, then +20% */
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: min(62vh, 640px); object-fit: cover; object-position: 50% 15%; border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); }
.hero-photo img.wide { aspect-ratio: 1190 / 1080; max-height: none; object-position: 50% 50%; }
.hero-photo img.landscape { aspect-ratio: 3 / 2; max-height: none; object-position: 50% 50%; }   /* Roy, 4 Nov 2026: pets hero is his slate-and-paw-plaque photo, shown whole */
.hero-photo img.square { aspect-ratio: 1; max-height: none; object-position: 50% 50%; }   /* Roy, 4 Nov 2026: About hero is the square photo of Roy at his desk */   /* Roy, 3 Nov 2026: home hero is his grandmother-and-boy photo, shown whole */
.hero-note { position: static; margin-top: 0.8rem; max-width: 100%; padding: 0.8rem 1rem; background: rgba(250, 247, 244, 0.92); border-radius: 12px; font-size: 0.95rem; line-height: 1.4; color: var(--ink); box-shadow: var(--shadow); }
.hero-note strong { font-family: var(--serif); font-weight: 500; }
.proof-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--ink-soft); }
.proof-row li { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.proof-row ul { margin: 0; padding: 0; display: contents; }
.proof-row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* founder strip */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; padding: 2rem 2.4rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.founder-photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent-deep); text-align: center; font: 500 0.9rem/1.35 var(--sans); padding: 1rem; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 400; color: var(--ink); }
.founder cite { display: block; margin-top: 0.9rem; font: 500 1rem/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }

/* range */
.range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.card-body { padding: 1.2rem 1.4rem 1.5rem; }
.card h3 { margin-bottom: 0.35rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.card .who { display: inline-block; margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.card .go { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--accent-deep); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
.step { position: relative; padding-top: 3.4rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font: 500 1.25rem/2.6rem var(--serif); text-align: center; }
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--ink-soft); margin: 0; }

/* example memorial */
.example { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.example-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-deep); border: 1px solid var(--rule); background: #241a1e; }
.example-frame img { width: 100%; height: auto; }

/* reassurance */
.assure { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; }
.assure div { padding-left: 2.1rem; position: relative; }
.assure svg { position: absolute; left: 0; top: 0.3rem; width: 22px; height: 22px; color: var(--accent); }
.assure h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.assure p { margin: 0; color: var(--ink-soft); }

/* app strip */
.app-strip { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 2.2rem 2.4rem; background: var(--accent-deep); color: #fff; border-radius: var(--radius-lg); }
.app-strip h2 { color: #fff; margin-bottom: 0.4rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.app-strip p { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 56ch; }
.store-links { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.store-links a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; text-decoration: none; font: 600 0.95rem/1.2 var(--sans); }
.store-links a:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.store-links svg { width: 22px; height: 22px; }

/* contact band */
.contact-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-lines { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact-lines li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-lines svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-lines a { font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.contact-lines span { display: block; color: var(--ink-soft); font-size: 0.95rem; }
form.enquiry { display: grid; gap: 1rem; padding: 1.8rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
form.enquiry label { display: grid; gap: 0.35rem; font: 600 0.9rem/1.3 var(--sans); color: var(--ink-soft); }
form.enquiry input, form.enquiry textarea, form.enquiry select { width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--rule); border-radius: 10px; background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--ink); }
form.enquiry input:focus, form.enquiry textarea:focus, form.enquiry select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
form.enquiry textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.4em; font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.form-status.error { color: #a12; }

/* footer */
.site-footer { padding: 3.5rem 0 2.5rem; background: var(--paper-2); border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--ink-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid .footer-head { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--accent-deep); text-decoration: underline; }
.footer-brand p { max-width: 36ch; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: 0.88rem; }
.footer-legal img { height: 36px; width: auto; }
.social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); color: var(--ink); }
.social svg { width: 18px; height: 18px; }

/* product pages */
.product-hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.product-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gallery-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.gallery-thumbs button { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; transition: border-color .15s; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy-box .price { font-family: var(--serif); font-size: 2rem; margin: 0.4rem 0 0.2rem; }
.buy-box .price s { color: var(--ink-soft); font-size: 1.2rem; margin-left: 0.5rem; }
.buy-box .price-note { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.4rem; }
.buy-box .field { display: grid; gap: 0.35rem; margin-bottom: 1rem; font: 600 0.9rem/1.3 var(--sans); color: var(--ink-soft); }
.buy-box select, .buy-box input[type=number] { padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 10px; background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--ink); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; }
.qty button { width: 40px; height: 42px; border: 0; background: none; font-size: 1.2rem; color: var(--ink-soft); cursor: pointer; }
.qty input { width: 48px; text-align: center; border: 0; font: 500 1rem var(--sans); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-box .btn-primary { width: 100%; justify-content: center; padding: 1rem; font-size: 1.05rem; }
.buy-box .buy-note { margin-top: 0.8rem; font-size: 0.95rem; color: var(--ink-soft); }
.buy-box .buy-note a { color: var(--accent-deep); }
.inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.inside li { display: flex; gap: 0.7rem; align-items: flex-start; }
.inside svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.two-col img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.faq { list-style: none; margin: 0; padding: 0; max-width: var(--narrow); margin-inline: auto; }
.faq details { border-top: 1px solid var(--rule); padding: 0.2rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 1rem 0; font: 500 1.15rem/1.4 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.1rem; color: var(--ink-soft); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* product pages */
.product-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.product-grid h1 { margin-bottom: 0.8rem; }
.buy-box { margin-top: 1.6rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.buy-box .price { margin-top: 0; }
.buy-row { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.buy-row .field { margin-bottom: 0; flex: 1 1 160px; }
.buy-box .form-status { margin: 0.6rem 0 0; }
.pull { margin: 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--accent-soft); font: 400 1.35rem/1.55 var(--serif); color: var(--ink); }
.pull cite { display: block; margin-top: 1rem; font: 600 0.9rem/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }
.video-frame { max-width: 360px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-deep); background: #1d171f; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #1d171f; }
.video-frame.wide video { aspect-ratio: 16 / 9; }
.video-facade { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-facade img { display: block; width: 100%; height: auto; }
.video-facade .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-facade .play svg { width: 76px; height: 76px; padding: 18px; box-sizing: border-box; border-radius: 50%; background: rgba(43, 37, 48, 0.72); color: #fff; }
.video-facade:hover .play svg, .video-facade:focus-visible .play svg { background: var(--accent); }
.steps { list-style: none; padding: 0; }
.steps.vertical { grid-template-columns: 1fr; gap: 1.6rem; }
.related { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.list-check { margin: 1.4rem 0 0; }
@media (max-width: 960px) { .product-grid { grid-template-columns: 1fr; } }

.ask-box h2, .ask-box h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.ask-box .actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }

.figure-narrow { display: block; width: 100%; max-width: 348px; height: auto; margin: 0 auto; }   /* audit 4 Nov 2026: overflowed by 8px at 360 wide */

.pull + p, .pull + .pull { margin-top: 1.8rem; }

.photo-slot { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1px dashed var(--accent); border-radius: var(--radius-lg); background: var(--paper-2); color: var(--accent-deep); font: 500 1rem/1.5 var(--sans); text-align: center; padding: 2rem; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.options .card img { aspect-ratio: 1 / 1; }   /* Roy's pet photos, 4 Nov 2026: square so the plaque and the slate are not cropped */
.options .card .price-line { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--accent-deep); }
@media (max-width: 820px) { .options { grid-template-columns: 1fr; } }

.video-frame.wide { max-width: none; }
.video-frame.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.video-pair p { margin: 0.6rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 820px) { .video-pair { grid-template-columns: 1fr; } }
.bullets { columns: 2; gap: 2.5rem; margin: 0; padding: 0 0 0 1.2rem; }
.bullets li { break-inside: avoid; margin-bottom: 0.6rem; color: var(--ink-soft); }
@media (max-width: 600px) { .bullets { columns: 1; } }

/* legal text (verbatim from the like-for-like pages) */
.legal .hero-simple { padding-top: clamp(2.5rem, 6vw, 4rem); }
.legal-text h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.5rem; }
.legal-text h1 small { display: block; margin-top: 0.6rem; font: 500 0.9rem/1.4 var(--sans); color: var(--ink-soft); letter-spacing: 0.04em; }
.legal-text h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; }
.legal-text p, .legal-text li { color: var(--ink-soft); overflow-wrap: anywhere; }   /* audit 4 Nov 2026: a long web address in the privacy policy ran off a phone screen and was clipped */
.legal-text ul { padding-left: 1.2rem; }
.legal-text li { margin-bottom: 0.4rem; }
/* about page */
.kind { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.kind blockquote { margin: 0; padding: 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); font: 400 1.2rem/1.5 var(--serif); color: var(--ink); }
.kind cite { display: block; margin-top: 0.9rem; font: 600 0.9rem/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }
@media (max-width: 700px) { .kind { grid-template-columns: 1fr; } }

.small-head { font-size: 1.25rem; margin: 2rem 0 0.8rem; }
.contact .contact-band { align-items: start; }

.shop-note { margin-top: 2.5rem; }
.card h2 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.price-line s { color: var(--ink-soft); font-weight: 400; margin-left: 0.4rem; }
.buy-box .price .small { font-size: 1rem; }

/* the app: badges and phone screenshots */
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; margin-top: 1.4rem; }
.app-badges .app-icon { width: 44px; height: 44px; border-radius: 11px; box-shadow: var(--shadow); }
.app-badges .app-line { font: 600 0.95rem/1.3 var(--sans); color: var(--ink); }
.app-badges .app-line small { display: block; font-weight: 400; color: var(--ink-soft); }
.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; font: 600 0.9rem/1.1 var(--sans); white-space: nowrap; }
.badge svg { width: 18px; height: 18px; }
.badge small { display: block; font-weight: 400; font-size: 0.7rem; opacity: 0.85; }
.badge:hover { background: var(--accent-deep); }
.app-hero { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.phone { display: block; width: 100%; max-width: 300px; margin: 0 auto; border-radius: 34px; box-shadow: var(--shadow-deep); }
.phone-row { display: flex; gap: 1.2rem; justify-content: center; align-items: flex-end; }
.phone-row .phone { max-width: 220px; }
.phone-row .phone.lead { max-width: 280px; }
@media (max-width: 700px) { .phone-row { flex-wrap: wrap; } .phone-row .phone { max-width: 46%; } .phone-row .phone.lead { max-width: 70%; } }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.tabs div { padding: 1.2rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.tabs h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.tabs p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 820px) { .tabs { grid-template-columns: 1fr 1fr; } }

.app-badges.center-actions { justify-content: center; margin-top: 0; }

/* menu open: freeze the page where it is, keep the header pinned */
html.menu-open { overflow: hidden; }
html.menu-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
html.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--paper); }

@media (max-width: 700px) { .hero-photo { max-width: none; } .hero-photo img { display: block; max-width: 250px; margin: 0 auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; } .hero-photo .phone { aspect-ratio: auto; max-width: 240px; } .hero-photo img.wide { max-width: 340px; aspect-ratio: 1190 / 1080; object-position: 50% 50%; } .hero-photo img.landscape { max-width: 360px; aspect-ratio: 3 / 2; object-position: 50% 50%; } .hero-photo img.square { max-width: 320px; aspect-ratio: 1; object-position: 50% 50%; } }

/* responsive */
@media (max-width: 960px) {
  .hero-grid, .example, .contact-band, .two-col, .product-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .range { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .app-strip { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; text-align: center; padding: 1.6rem; }
  .founder-photo { width: 160px; margin: 0 auto; }
}
@media (max-width: 820px) {
  .nav { position: fixed; inset: 76px 0 0 0; background: var(--paper); padding: 1rem var(--pad); transform: translateX(-100%); visibility: hidden; transition: transform .3s, visibility 0s .3s; overflow: auto; overscroll-behavior: contain; }
  .nav.open { transform: none; visibility: visible; transition: transform .3s; }
  .nav ul { flex-direction: column; gap: 0.2rem; }
  .nav a { padding: 0.9rem 1rem; font-size: 1.15rem; }
  .menu-btn { display: inline-grid; place-items: center; }
  .header-cta span { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .range, .assure, .footer-grid { grid-template-columns: 1fr; }
  .hero .lede { max-width: none; }
  .hero-note { position: static; margin-top: 0.8rem; max-width: none; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions .btn-quiet { width: auto; }
  .founder { padding: 1.4rem 1.2rem; }
  .app-strip { padding: 1.6rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .card, .btn { transition: none; } }

/* utility classes replacing inline styles (strict CSP: style-src 'self') */
.center { text-align: center; }
.center-actions { justify-content: center; }
.eyebrow-light { color: #d9c9e6; }
.text-ink-lg { font-size: 1.05rem; color: var(--ink); }
.hero-simple { padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem); }

/* ---- Roy's structure (home-b mock-up, 29 Sep 2026): app banner, drop-down nav, three tiles, four ways to remember ---- */
.app-banner { background: var(--accent-deep); color: #fff; font: 500 1.05rem/1.3 var(--sans); }   /* Roy, 3 Nov 2026: larger and more obvious */
.app-banner-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.4rem; padding: 0.8rem 0; }
.app-banner-links { display: inline-flex; gap: 0.6rem; }
.app-banner-links a { padding: 0.5rem 1.1rem; border: 2px solid #fff; border-radius: 999px; background: #fff; color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.app-banner-links a:hover { background: transparent; color: #fff; }
.nav .has-sub { position: relative; padding-bottom: 0.4rem; margin-bottom: -0.4rem; }   /* keeps the pointer inside the item on the way down to the menu */
.nav .sub { display: none; position: absolute; left: 0; top: 100%; min-width: 200px; margin: 0; padding: 0.4rem; list-style: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); z-index: 20; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: block; }
.nav .sub a { border-radius: 10px; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tiles .card img, .range .card img { aspect-ratio: 1 / 1; }   /* Roy, 3 Nov 2026: his three product photos are square */
.ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.way { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.way:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.way img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.way h3 { margin: 1rem 1.1rem 0.4rem; font-size: 1.15rem; }
.way p { margin: 0 1.1rem 1.2rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 820px) {
  .nav .sub { display: block; position: static; min-width: 0; margin: 0 0 0.4rem 1rem; padding: 0; border: 0; box-shadow: none; background: none; }
  .tiles { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr 1fr; }
  .app-banner-inner { font-size: 0.95rem; }
}
.human-check { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 12px; font-size: 0.95rem; cursor: pointer; } .human-check input { width: 18px; height: 18px; margin: 0; accent-color: #7c5e8e; }

/* Roy, Oct 2026: eight plain nav items, no drop-down; three "ways"; an "also from eMemorybox" strip; coming-soon cards; enquiry line on the plaque page */
.nav a { padding: 0.5rem 0.6rem; font-size: 0.92rem; }
.ways { grid-template-columns: repeat(3, 1fr); }
.also { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.also a { display: block; height: 100%; padding: 1.1rem 1.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.also a:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.also strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.3rem; }
.also span { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.45; }
.card.soon { background: var(--paper-2); border-style: dashed; }
.card.soon .card-body { justify-content: center; min-height: 240px; }
.card.soon .who { color: var(--ink-soft); }
.card.soon .price-line { color: var(--ink-soft); }
.buy-box .enquire-line { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; margin: 0.4rem 0 0.4rem; }
@media (max-width: 960px) { .also { grid-template-columns: 1fr; } .ways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ways { grid-template-columns: 1fr; } }

/* ---- Chrome audit, 4 Nov 2026 (verified here before fixing) ---- */
/* The eight-item nav plus the phone number needs about 1245px. Between 821 and 1245 it pushed the number off the right edge.
   Phone shows as an icon up to 1339px, and the menu button takes over from 1140px down (was 820px). Same rules as the 820px block. */
@media (max-width: 1339px) { .header-cta span { display: none; } .header-inner { gap: 1.4rem; } .header-cta { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; } .header-cta svg { width: 22px; height: 22px; } }   /* icon-only phone link is a 44px target (re-audit: it was 18px) */
@media (max-width: 1140px) {
  .nav { position: fixed; inset: 76px 0 0 0; background: var(--paper); padding: 1rem var(--pad); transform: translateX(-100%); visibility: hidden; transition: transform .3s, visibility 0s .3s; overflow: auto; overscroll-behavior: contain; }
  .nav.open { transform: none; visibility: visible; transition: transform .3s; }
  .nav ul { flex-direction: column; gap: 0.2rem; }
  .nav a { padding: 0.9rem 1rem; font-size: 1.15rem; }
  .menu-btn { display: inline-grid; place-items: center; }
}
/* Skip link: it was focusable but stayed a 1px clipped box, so keyboard users never saw it (WCAG 2.4.7) */
a.vh:focus, a.vh:focus-visible { position: fixed; left: 12px; top: 12px; z-index: 200; width: auto; height: auto; clip: auto; overflow: visible; padding: 0.8rem 1.1rem; background: var(--paper); color: var(--ink); font: 600 1rem/1 var(--sans); border-radius: 10px; box-shadow: var(--shadow); outline: 3px solid var(--accent); outline-offset: 2px; text-decoration: none; }
main:focus { outline: none; }
/* A field that fails validation scrolled under the sticky header */
.enquiry input, .enquiry textarea, .enquiry select, .gate-form input { scroll-margin-top: 110px; }
/* Portrait photos in the square gallery were cut at the top (the bear's ears, Eddie's head): crop from the bottom instead */
.gallery-main img { object-position: 50% 12%; }

/* Re-audit 4 Nov 2026: on the home hero the photo was centred against the text column, so when the headline re-wrapped as Fraunces arrived
   (three lines in the fallback, four in Fraunces at 1350px) the whole photo moved: desktop CLS 0.115. Top-aligning the two columns means a
   re-wrap can only nudge the short text under the headline. Home only; the other heroes measured 0.001. */
@media (min-width: 961px) { body.home .hero-grid { align-items: start; } body.home .hero-photo { margin-top: 0.4rem; } }
/* The browser scrolls a field that fails validation to the very top, under the sticky header. scroll-padding is honoured by that scroll; scroll-margin is not. */
html { scroll-padding-top: 110px; }
/* 44px phone target + 44px menu button + brand overflowed a 320px screen by 5px: tighten the gap on the narrowest phones */
@media (max-width: 400px) { .header-inner { gap: 0.5rem; } }
.menu-btn, .header-cta { flex-shrink: 0; }   /* the menu button was being squeezed to 16px at 320px */
@media (max-width: 350px) { .brand { font-size: 1.2rem; gap: 0.5rem; } .brand small { display: none; } }   /* 320px phones: no room for the strapline beside two 44px buttons */